From f881828cd8135bbe8ad303a95d4dae84b906b2d8 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Mon, 6 Jul 2026 22:37:21 +0100 Subject: [PATCH 01/27] Fix intermittently failing Playwright tests (#6886) # Description of Changes Fixes intermittently failing tests (and replaces one that wasn't useful in its previous state) and also adds a CI check to warn if there are any Playwright tests which failed on their first go and succeeded on retries, to hopefully help find intermittently failing tests more quickly and avoid them being merged in the first place. --- .github/workflows/build-enterprise.yml | 19 +++ .github/workflows/e2e-live.yml | 10 ++ .github/workflows/e2e-stubbed.yml | 11 ++ frontend/editor/playwright.config.ts | 13 +- .../editor/scripts/report-flaky-tests.mts | 127 ++++++++++++++++++ .../stubbed/file-state-across-tools.spec.ts | 38 ++++++ .../src/core/tests/stubbed/files-page.spec.ts | 9 +- .../stubbed/unsaved-changes-guard.spec.ts | 43 ------ 8 files changed, 221 insertions(+), 49 deletions(-) create mode 100644 frontend/editor/scripts/report-flaky-tests.mts delete mode 100644 frontend/editor/src/core/tests/stubbed/unsaved-changes-guard.spec.ts diff --git a/.github/workflows/build-enterprise.yml b/.github/workflows/build-enterprise.yml index 99b3b127a4..9e1a4efb83 100644 --- a/.github/workflows/build-enterprise.yml +++ b/.github/workflows/build-enterprise.yml @@ -167,6 +167,8 @@ jobs: wait_for_backend - name: Run enterprise OAuth Playwright tests id: oauth-tests + env: + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results-oauth.json run: task e2e:enterprise -- --grep "OAuth" - name: Stop backend + tear down OAuth Keycloak if: always() @@ -240,6 +242,8 @@ jobs: wait_for_backend - name: Run enterprise SAML Playwright tests id: saml-tests + env: + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results-saml.json run: task e2e:enterprise -- --grep "SAML" - name: Stop backend + tear down SAML Keycloak if: always() @@ -270,6 +274,8 @@ jobs: wait_for_backend - name: Run enterprise feature Playwright tests id: feature-tests + env: + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results-feature.json run: task e2e:enterprise -- --grep "Enterprise license" - name: Print backend log on failure if: failure() @@ -282,6 +288,19 @@ jobs: run: | source /tmp/helpers.sh stop_backend + - name: Flag flaky tests + # Runs regardless of the test outcomes: a flaky test (passed on retry) + # leaves its step green, so this is the only place it surfaces. Merges + # all three phase reports (some may be absent if an earlier phase hard- + # failed and skipped the rest). Emits ::warning:: annotations + a job + # summary; never fails the job. + if: always() + working-directory: frontend + run: > + npx tsx editor/scripts/report-flaky-tests.mts + "${{ github.workspace }}/frontend/playwright-report/results-oauth.json" + "${{ github.workspace }}/frontend/playwright-report/results-saml.json" + "${{ github.workspace }}/frontend/playwright-report/results-feature.json" - name: Upload Playwright report if: always() uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1 diff --git a/.github/workflows/e2e-live.yml b/.github/workflows/e2e-live.yml index 44d5443a73..57a4357dad 100644 --- a/.github/workflows/e2e-live.yml +++ b/.github/workflows/e2e-live.yml @@ -62,7 +62,17 @@ jobs: # .test-state/playwright/coverage-pw/ for the post-process step # to aggregate. Chromium-only - other engines silently skip. PW_COVERAGE: "1" + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results.json run: task e2e:live + - name: Flag flaky tests + # Runs regardless of the test outcome: a flaky test (passed on retry) + # leaves the step green, so this is the only place it surfaces. Emits + # ::warning:: annotations + a job summary; never fails the job. + if: always() + working-directory: frontend + run: npx tsx editor/scripts/report-flaky-tests.mts "$PLAYWRIGHT_JSON_OUTPUT_FILE" + env: + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results.json - name: Generate JaCoCo report from e2e:live .exec if: always() id: live-coverage diff --git a/.github/workflows/e2e-stubbed.yml b/.github/workflows/e2e-stubbed.yml index 33bb24ee4c..ccfdf0052f 100644 --- a/.github/workflows/e2e-stubbed.yml +++ b/.github/workflows/e2e-stubbed.yml @@ -44,7 +44,18 @@ jobs: VITE_BUILD_FOR_PREVIEW: "1" run: task frontend:build - name: Run stubbed E2E tests (chromium) + env: + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results.json run: task e2e:stubbed -- --workers=3 + - name: Flag flaky tests + # Runs regardless of the test outcome: a flaky test (passed on retry) + # leaves the step green, so this is the only place it surfaces. Emits + # ::warning:: annotations + a job summary; never fails the job. + if: always() + working-directory: frontend + run: npx tsx editor/scripts/report-flaky-tests.mts "$PLAYWRIGHT_JSON_OUTPUT_FILE" + env: + PLAYWRIGHT_JSON_OUTPUT_FILE: ${{ github.workspace }}/frontend/playwright-report/results.json - name: Upload Playwright report if: always() uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1 diff --git a/frontend/editor/playwright.config.ts b/frontend/editor/playwright.config.ts index 7a049e2632..93e6572392 100644 --- a/frontend/editor/playwright.config.ts +++ b/frontend/editor/playwright.config.ts @@ -30,7 +30,18 @@ export default defineConfig({ forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, workers: process.env.CI ? 1 : "50%", - reporter: [["html", { open: "never" }], ["list"]], + // In CI, add a JSON report alongside the HTML/list output so the workflow + // can flag flaky tests (passed only on retry) as warnings without failing + // the job. Path is pinned via PLAYWRIGHT_JSON_OUTPUT_FILE in the workflow; + // the outputFile here is just a sane default. Omitted locally to keep dev + // runs' terminal output clean. + reporter: process.env.CI + ? [ + ["html", { open: "never" }], + ["list"], + ["json", { outputFile: "playwright-report/results.json" }], + ] + : [["html", { open: "never" }], ["list"]], timeout: 60_000, expect: { timeout: 10_000 }, diff --git a/frontend/editor/scripts/report-flaky-tests.mts b/frontend/editor/scripts/report-flaky-tests.mts new file mode 100644 index 0000000000..1b1039b3ae --- /dev/null +++ b/frontend/editor/scripts/report-flaky-tests.mts @@ -0,0 +1,127 @@ +// Reads a Playwright JSON report and surfaces "flaky" tests (tests that +// failed at least once, then passed on retry) in GitHub Actions WITHOUT +// failing the job: +// - emits one ::warning:: workflow command per flaky test, so the run and +// PR show a yellow warning triangle + count, and the annotation links to +// the test's source line +// - appends a summary table to the job summary ($GITHUB_STEP_SUMMARY) +// +// A green-but-flaky job is otherwise invisible (Playwright exits 0 once a +// retry passes), which lets flakes accrete unnoticed. This makes them visible +// without turning them into hard failures. +// +// Run: `npx tsx editor/scripts/report-flaky-tests.mts [more.json...]` +// (a single path is also read from PLAYWRIGHT_JSON_OUTPUT_FILE). Multiple +// reports are merged + de-duplicated, so a job that runs Playwright in +// several segments (e.g. the enterprise OAuth/SAML/license phases) can +// pass one report per phase. A missing report or zero flaky tests is a +// silent no-op, so it is safe to run with `if: always()` after any +// Playwright step. + +import { appendFileSync, existsSync, readFileSync } from "fs"; +import { isAbsolute, join, relative } from "path"; +import type { JSONReport, JSONReportSuite } from "@playwright/test/reporter"; + +interface FlakyTest { + file: string; + line: number; + title: string; +} + +// Playwright records each test's outcome as expected|unexpected|flaky|skipped. +// "flaky" means it needed a retry to pass, which is exactly what we surface. +function collectFlaky( + report: JSONReport, + workspace: string, + rootDir: string, +): FlakyTest[] { + const flaky: FlakyTest[] = []; + const walk = (suite: JSONReportSuite, trail: string[], depth: number) => { + // The outermost suite per file has title === the file path; skip it so the + // human-readable title is just "describe > test" (the path is shown + // separately as the location). Nested suites are the describe() blocks. + const titles = depth > 0 && suite.title ? [...trail, suite.title] : trail; + for (const spec of suite.specs ?? []) { + if ((spec.tests ?? []).some((t) => t.status === "flaky")) { + const abs = spec.file + ? isAbsolute(spec.file) + ? spec.file + : join(rootDir, spec.file) + : ""; + const rel = abs ? relative(workspace, abs) : ""; + flaky.push({ + // Drop the path from the annotation if it escapes the workspace, so + // we never emit a broken file= link (the warning still shows). + file: rel && !rel.startsWith("..") ? rel : "", + line: spec.line || 0, + title: [...titles, spec.title].filter(Boolean).join(" > "), + }); + } + } + for (const child of suite.suites ?? []) walk(child, titles, depth + 1); + }; + for (const suite of report.suites ?? []) walk(suite, [], 0); + return flaky; +} + +// Deliberately no process.exit() calls: every path falls through to a natural +// exit(0). This step must never fail the job, and it keeps CI green even when +// the report is missing or clean. +function main(): void { + // Accept one or more report paths: a job may run Playwright in several + // segments, each writing its own report (the enterprise job does this for + // OAuth / SAML / license phases). Fall back to the env var when no paths are + // passed. Missing files are skipped, not fatal. + const reportPaths = process.argv.slice(2); + const envPath = process.env.PLAYWRIGHT_JSON_OUTPUT_FILE; + if (reportPaths.length === 0 && envPath) { + reportPaths.push(envPath); + } + + const workspace = process.env.GITHUB_WORKSPACE || process.cwd(); + const seen = new Set(); + const flaky: FlakyTest[] = []; + for (const reportPath of reportPaths) { + if (!reportPath || !existsSync(reportPath)) { + // No report (e.g. the build failed before this segment ran). + continue; + } + const report = JSON.parse(readFileSync(reportPath, "utf8")) as JSONReport; + const rootDir = report.config?.rootDir || process.cwd(); + for (const test of collectFlaky(report, workspace, rootDir)) { + const key = `${test.file}:${test.line}:${test.title}`; + if (!seen.has(key)) { + seen.add(key); + flaky.push(test); + } + } + } + if (flaky.length === 0) { + return; + } + + for (const f of flaky) { + const loc = f.file ? `file=${f.file},line=${f.line},` : ""; + process.stdout.write( + `::warning ${loc}title=Flaky test::${f.title} passed only on retry\n`, + ); + } + + const summaryPath = process.env.GITHUB_STEP_SUMMARY; + if (summaryPath) { + const plural = flaky.length === 1 ? "" : "s"; + const lines = [ + `### :warning: ${flaky.length} flaky test${plural} (passed on retry)`, + "", + "These passed, but not on the first attempt. Worth fixing before they turn into hard failures.", + "", + "| Test | Location |", + "| --- | --- |", + ...flaky.map((f) => `| ${f.title} | \`${f.file || "?"}:${f.line}\` |`), + "", + ]; + appendFileSync(summaryPath, lines.join("\n") + "\n"); + } +} + +main(); diff --git a/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts b/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts index e4b9a30c3e..6c84f6020a 100644 --- a/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts @@ -9,6 +9,11 @@ const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); * Files uploaded on one tool page should remain in the workbench when the * user navigates to a different tool. This is FileContext behaviour and * easy to break with a stale-effect or unmount-clear bug. + * + * Covered for both navigation mechanisms, which take different code paths: + * - a full page reload (page.goto) -> FileContext re-hydrates from IndexedDB + * - an in-app tool-link click -> client-side nav, FileContext stays + * in memory */ test.describe("File state persists across tool navigation", () => { test("file uploaded on /merge survives navigation to /split", async ({ @@ -32,4 +37,37 @@ test.describe("File state persists across tool navigation", () => { timeout: 5_000, }); }); + + test("file uploaded on /merge survives an in-app tool-link navigation", async ({ + page, + }) => { + await page.goto("/merge"); + await page.waitForLoadState("domcontentloaded"); + await uploadFiles(page, SAMPLE_PDF); + + // Navigate via the in-app tool link (client-side React Router nav) rather + // than a full reload, so this exercises the in-memory FileContext path the + // page.goto test above doesn't. Fall back to a direct visit if the nav + // rail isn't showing the link yet. + const splitNav = page.getByRole("link", { name: /^Split$/i }).first(); + if (await splitNav.isVisible({ timeout: 1_000 }).catch(() => false)) { + await splitNav.click(); + } else { + await page.goto("/split"); + } + + // A client-side nav has no document load event, so waitForLoadState is a + // no-op here. Wait for the route to actually commit before opening the + // file manager; otherwise the my-files click fires mid-transition and + // opens it against a not-yet-settled workbench, which renders a permanent + // empty state (the flaky "0 items" that then passes on retry). + await expect(page).toHaveURL(/\/split(?:$|[/?#])/); + + // The upload must still be listed after the tool switch. A "no files" + // empty state here would mean the client-side nav silently dropped it. + await page.getByTestId("my-files-button").click(); + await expect(page.getByText(/sample\.pdf/i).first()).toBeVisible({ + timeout: 10_000, + }); + }); }); diff --git a/frontend/editor/src/core/tests/stubbed/files-page.spec.ts b/frontend/editor/src/core/tests/stubbed/files-page.spec.ts index 7c08d943bb..56687b2217 100644 --- a/frontend/editor/src/core/tests/stubbed/files-page.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/files-page.spec.ts @@ -825,11 +825,10 @@ test.describe("Files page", () => { // and direct user shares.) await page.locator("#filesPage-tab-sharedByMe").click(); const sharedByMeCards = page.locator(".files-page-card:not(.is-folder)"); - await expect(sharedByMeCards).toHaveCount(2, { timeout: 3_000 }); - await expect(sharedByMeCards).toContainText([ - "link-shared.pdf", - "user-shared.pdf", - ]); + await expect(sharedByMeCards).toHaveCount(2, { timeout: 5_000 }); + for (const name of ["link-shared.pdf", "user-shared.pdf"]) { + await expect(sharedByMeCards.filter({ hasText: name })).toHaveCount(1); + } // "Shared with me" -> only from-someone-else.pdf await page.locator("#filesPage-tab-shared").click(); diff --git a/frontend/editor/src/core/tests/stubbed/unsaved-changes-guard.spec.ts b/frontend/editor/src/core/tests/stubbed/unsaved-changes-guard.spec.ts deleted file mode 100644 index fc3a1240d1..0000000000 --- a/frontend/editor/src/core/tests/stubbed/unsaved-changes-guard.spec.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { test, expect } from "@app/tests/helpers/stub-test-base"; -import { uploadFiles } from "@app/tests/helpers/ui-helpers"; -import path from "path"; - -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); - -/** - * The NavigationGuard context warns the user when they have unsaved work - * (uploaded files or modified config) and try to navigate away. The guard - * surface is a Mantine modal asking to confirm or cancel the navigation. - * - * Today the guard logic exists but is silently bypassed by tests that go - * through the workbench. This spec asserts the modal appears and that - * cancelling keeps the user on the current tool. - */ -test.describe("Unsaved changes navigation guard", () => { - test("uploading then navigating away surfaces the guard prompt", async ({ - page, - }) => { - await page.goto("/merge"); - await page.waitForLoadState("domcontentloaded"); - await uploadFiles(page, SAMPLE_PDF); - - // Triggering a tool-level navigation while files are loaded should - // either prompt or clear-and-navigate cleanly. A regression that - // discards files silently is the failure we want to catch. - const splitNav = page.getByRole("link", { name: /^Split$/i }).first(); - if (await splitNav.isVisible({ timeout: 1_000 }).catch(() => false)) { - await splitNav.click(); - } else { - await page.goto("/split"); - } - - // After arriving at /split the My Files page should still list the - // previously uploaded sample (NavigationGuard either kept us on - // /merge or moved us with state intact). A "no files" empty state - // here would indicate the guard silently dropped the workbench. - await page.getByTestId("my-files-button").click(); - await expect(page.getByText(/sample\.pdf/i).first()).toBeVisible({ - timeout: 5_000, - }); - }); -}); From b4f7b1d8a92670a1abbf65c1d13941db6b81b607 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Tue, 7 Jul 2026 08:47:07 +0100 Subject: [PATCH 02/27] Add bidirectional API types to frontend (#6867) # Description of Changes Fix https://github.com/Stirling-Tools/Stirling-PDF-SaaS/issues/281. Add generated backend API mappings to the frontend code, and the logic to convert from a backend API to frontend parameters objects. Previously, it was impossible to tell if changing the backend API would require a change to the frontend to support it because the frontend had no static type information about the backend API. This PR adds autogenerated tool API types to the frontend (in `toolApiTypes.ts`) and adds explicit typed mappings between the frontend parameter types and the backend API types, so theoretically the type checker should be able to catch issues when changing one puts us in an invalid state with the other. During development, it pointed out several inconsistencies that we have between the frontend and backend types, some of which were genuine bugs, and others were only happening to work because the backend is more permissive than its API claims to be. This also unlocks the ability for us to render the frontend settings on saved backend API structures, which we've previously had to avoid doing because we had no reverse mapping. --- .github/config/.files.yaml | 15 + .github/workflows/ai-engine.yml | 103 +- .github/workflows/build.yml | 17 + .github/workflows/check-generated-models.yml | 148 ++ .taskfiles/frontend.yml | 17 + Taskfile.yml | 10 + .../model/api/general/PosterPdfRequest.java | 46 +- .../api/security/AddPasswordRequest.java | 3 +- engine/src/stirling/models/tool_models.py | 6 +- .../scripts/generate-tool-api-types.mts | 400 +++++ .../useAddPageNumbersOperation.ts | 78 +- .../tools/addStamp/useAddStampOperation.ts | 106 +- .../useAddAttachmentsOperation.ts | 58 +- .../useAddPasswordOperation.test.ts | 51 +- .../addPassword/useAddPasswordOperation.ts | 79 +- .../useAddWatermarkOperation.test.ts | 26 + .../addWatermark/useAddWatermarkOperation.ts | 108 +- .../adjustPageScaleFormData.ts | 43 +- .../useAdjustPageScaleOperation.test.ts | 25 +- .../useAdjustPageScaleOperation.ts | 17 +- .../autoRename/useAutoRenameOperation.ts | 48 +- .../useBookletImpositionOperation.ts | 61 +- .../tools/certSign/useCertSignOperation.ts | 188 +- .../useChangePermissionsOperation.test.ts | 34 +- .../useChangePermissionsOperation.ts | 75 +- .../compress/useCompressOperation.test.ts | 127 ++ .../tools/compress/useCompressOperation.ts | 104 +- .../compress/useCompressParameters.test.ts | 42 + .../tools/compress/useCompressParameters.ts | 11 +- .../hooks/tools/crop/useCropOperation.test.ts | 32 + .../core/hooks/tools/crop/useCropOperation.ts | 65 +- .../useEditTableOfContentsOperation.test.ts | 46 + .../useEditTableOfContentsOperation.ts | 68 +- .../useExtractImagesOperation.ts | 35 +- .../tools/flatten/useFlattenOperation.ts | 57 +- .../tools/merge/useMergeOperation.test.ts | 60 + .../hooks/tools/merge/useMergeOperation.ts | 52 +- .../core/hooks/tools/ocr/useOCROperation.ts | 69 +- .../overlayPdfs/useOverlayPdfsOperation.ts | 76 +- .../pageLayout/usePageLayoutOperation.test.ts | 24 + .../pageLayout/usePageLayoutOperation.ts | 77 +- .../hooks/tools/redact/useRedactOperation.ts | 77 +- .../removeBlanks/useRemoveBlanksOperation.ts | 37 +- .../useRemoveCertificateSignOperation.ts | 21 +- .../removeImage/useRemoveImageOperation.ts | 20 +- .../removePages/useRemovePagesOperation.ts | 38 +- .../buildRemovePasswordFormData.ts | 41 +- .../useRemovePasswordOperation.ts | 11 +- .../useReorganizePagesOperation.ts | 61 +- .../hooks/tools/repair/useRepairOperation.ts | 21 +- .../replaceColor/useReplaceColorOperation.ts | 71 +- .../tools/rotate/useRotateOperation.test.ts | 31 + .../hooks/tools/rotate/useRotateOperation.ts | 38 +- .../tools/sanitize/useSanitizeOperation.ts | 70 +- .../useScannerImageSplitOperation.ts | 51 +- .../tools/shared/migratedToolMappers.test.ts | 163 ++ .../hooks/tools/shared/toolApiMapping.test.ts | 85 + .../core/hooks/tools/shared/toolApiMapping.ts | 88 + .../hooks/tools/shared/toolOperationTypes.ts | 36 +- .../hooks/tools/shared/useToolApiCalls.ts | 19 +- .../hooks/tools/shared/useToolOperation.ts | 5 + .../core/hooks/tools/sign/useSignOperation.ts | 5 +- .../useSingleLargePageOperation.ts | 20 +- .../tools/split/useSplitOperation.test.ts | 212 +++ .../hooks/tools/split/useSplitOperation.ts | 211 ++- .../timestampPdf/useTimestampPdfOperation.ts | 34 +- .../useUnlockPdfFormsOperation.ts | 20 +- .../editor/src/core/types/toolApiTypes.ts | 1594 +++++++++++++++++ .../core/utils/automationConverter.test.ts | 95 + .../src/core/utils/automationConverter.ts | 2 +- .../src/core/utils/automationExecutor.ts | 20 +- frontend/package-lock.json | 64 + frontend/package.json | 1 + 73 files changed, 5195 insertions(+), 774 deletions(-) create mode 100644 .github/workflows/check-generated-models.yml create mode 100644 frontend/editor/scripts/generate-tool-api-types.mts create mode 100644 frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/compress/useCompressOperation.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/compress/useCompressParameters.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/crop/useCropOperation.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/shared/migratedToolMappers.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/shared/toolApiMapping.test.ts create mode 100644 frontend/editor/src/core/hooks/tools/shared/toolApiMapping.ts create mode 100644 frontend/editor/src/core/hooks/tools/split/useSplitOperation.test.ts create mode 100644 frontend/editor/src/core/types/toolApiTypes.ts diff --git a/.github/config/.files.yaml b/.github/config/.files.yaml index 2d617f8f20..5e85976937 100644 --- a/.github/config/.files.yaml +++ b/.github/config/.files.yaml @@ -87,6 +87,21 @@ engine: &engine - Taskfile.yml - .taskfiles/engine.yml +# Files that can make the committed generated API models (frontend tool API +# types + engine tool models) go stale: the Java tool surfaces they derive from, +# the generators, the generated files themselves (to catch a hand-edit), and the +# tasks that drive generation. Deliberately excludes the broad frontend/docker/ +# testing globs, so a CSS-only PR does not boot the backend to rebuild the spec. +generated-models: &generated-models + - *openapi + - frontend/editor/scripts/generate-tool-api-types.mts + - frontend/editor/src/core/types/toolApiTypes.ts + - engine/scripts/generate_tool_models.py + - engine/src/stirling/models/tool_models.py + - .taskfiles/frontend.yml + - .taskfiles/engine.yml + - .github/workflows/check-generated-models.yml + licenses-frontend: &licenses-frontend - ".github/workflows/frontend-backend-licenses-update.yml" - "frontend/package.json" diff --git a/.github/workflows/ai-engine.yml b/.github/workflows/ai-engine.yml index 223490f45f..554100f535 100644 --- a/.github/workflows/ai-engine.yml +++ b/.github/workflows/ai-engine.yml @@ -1,9 +1,9 @@ name: AI Engine CI -# Validates the Python AI engine: regenerates tool models and runs the -# engine quality gate (lint, type-check, format-check, tests). Called from -# build.yml on PRs and merge_group; also runs directly on push to main as -# a post-merge safety net. +# Runs the engine quality gate (lint, type-check, format-check, tests). Called +# from build.yml on PRs and merge_group; also runs directly on push to main as +# a post-merge safety net. Freshness of the generated tool_models.py is checked +# by the shared check-generated-models workflow. on: workflow_call: push: @@ -34,104 +34,9 @@ jobs: with: enable-cache: true - - name: Set up JDK 25 - uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0 - with: - java-version: "25" - distribution: "temurin" - - - name: Setup Gradle - uses: gradle/actions/setup-gradle@50e97c2cd7a37755bbfafc9c5b7cafaece252f6e # v6.1.0 - with: - gradle-version: 9.6.0 - - name: Install Task uses: go-task/setup-task@01a4adf9db2d14c1de7a560f09170b6e0df736aa # v2.1.0 - - name: Regenerate tool models - run: task engine:tool-models - - - name: Verify tool models are up to date - id: tool-models-check - continue-on-error: true - run: git diff --exit-code engine/src/stirling/models/tool_models.py - - - name: Comment on tool models check failure - # Only post a comment on PRs. github-script's PR helpers need an - # issue/PR number, which doesn't exist on merge_group runs. - if: steps.tool-models-check.outcome == 'failure' && github.event_name == 'pull_request' - continue-on-error: true - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0 - with: - script: | - const marker = ''; - const body = [ - marker, - '### Tool Models Check Failed', - '', - 'The generated `engine/src/stirling/models/tool_models.py` is out of date with the Java OpenAPI spec and will need to be regenerated before it can be merged in.', - '', - 'Run `task engine:tool-models` to regenerate, then commit the updated file.', - ].join('\n'); - const { data: comments } = await github.rest.issues.listComments({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: context.issue.number, - }); - const existing = comments.find(c => c.body.includes(marker)); - if (existing) { - await github.rest.issues.updateComment({ - owner: context.repo.owner, - repo: context.repo.repo, - comment_id: existing.id, - body, - }); - } else { - await github.rest.issues.createComment({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: context.issue.number, - body, - }); - } - - - name: Fail if tool models check failed - if: steps.tool-models-check.outcome == 'failure' - run: | - echo "============================================" - echo " Tool Models Check Failed" - echo "============================================" - echo "" - echo "The generated engine/src/stirling/models/tool_models.py" - echo "is out of date with the Java OpenAPI spec and will" - echo "need to be regenerated before it can be merged in." - echo "" - echo "Run 'task engine:tool-models' to regenerate, then" - echo "commit the updated file." - echo "============================================" - exit 1 - - - name: Remove tool models check comment on success - if: steps.tool-models-check.outcome == 'success' && github.event_name == 'pull_request' - continue-on-error: true - uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0 - with: - script: | - const marker = ''; - const { data: comments } = await github.rest.issues.listComments({ - owner: context.repo.owner, - repo: context.repo.repo, - issue_number: context.issue.number, - }); - const existing = comments.find(c => c.body.includes(marker)); - if (existing) { - await github.rest.issues.deleteComment({ - owner: context.repo.owner, - repo: context.repo.repo, - comment_id: existing.id, - }); - } - - name: Quality-check engine id: engine-check run: task engine:check diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 0e0a702cc2..8142c37fca 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -43,6 +43,7 @@ jobs: docker-base: ${{ steps.changes.outputs.docker-base }} tauri: ${{ steps.changes.outputs.tauri }} engine: ${{ steps.changes.outputs.engine }} + generated-models: ${{ steps.changes.outputs.generated-models }} proprietary: ${{ steps.changes.outputs.proprietary }} steps: - name: Harden the runner (Audit all outbound calls) @@ -171,6 +172,20 @@ jobs: uses: ./.github/workflows/ai-engine.yml secrets: inherit + # The generated frontend types and engine tool models are both derived from + # the Java OpenAPI spec. This job regenerates and diffs them; it boots the + # backend, so it is gated on the narrow generated-models filter (spec source, + # generators, generated files, generation tasks) rather than the broad + # frontend filter, so a CSS-only PR does not pay for a backend build. + generated-models: + if: needs.files-changed.outputs.generated-models == 'true' + needs: [files-changed] + permissions: + contents: read + pull-requests: write + uses: ./.github/workflows/check-generated-models.yml + secrets: inherit + pre-commit: needs: [files-changed] permissions: @@ -228,6 +243,7 @@ jobs: - test-build-docker-images - tauri-build - ai-engine + - generated-models - pre-commit - dependency-review runs-on: ubuntu-latest @@ -253,6 +269,7 @@ jobs: test-build-docker-images=${{ needs.test-build-docker-images.result }} tauri-build=${{ needs.tauri-build.result }} ai-engine=${{ needs.ai-engine.result }} + generated-models=${{ needs.generated-models.result }} pre-commit=${{ needs.pre-commit.result }} dependency-review=${{ needs.dependency-review.result }} run: | diff --git a/.github/workflows/check-generated-models.yml b/.github/workflows/check-generated-models.yml new file mode 100644 index 0000000000..db9c49fba2 --- /dev/null +++ b/.github/workflows/check-generated-models.yml @@ -0,0 +1,148 @@ +name: Check generated models + +# Verifies the committed generated API models are still in sync with the Java +# OpenAPI spec: the frontend tool API types +# (frontend/editor/src/core/types/toolApiTypes.ts) and the engine tool +# models (engine/src/stirling/models/tool_models.py). Regenerates both with the +# single top-level `task tool-models` and fails if either committed file is +# out of date. Called from build.yml when the backend Java, frontend, or engine +# changes; also runs on push to main as a post-merge safety net. +on: + workflow_call: + push: + branches: [main] + +permissions: + contents: read + +jobs: + generated-models: + runs-on: ubuntu-latest + permissions: + contents: read + pull-requests: write + env: + DEPOT_TOKEN: ${{ secrets.DEPOT_TOKEN }} + steps: + - name: Harden the runner (Audit all outbound calls) + uses: step-security/harden-runner@ab7a9404c0f3da075243ca237b5fac12c98deaa5 # v2.19.3 + with: + egress-policy: audit + + - name: Checkout code + uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2 + + - name: Install uv + uses: astral-sh/setup-uv@fac544c07dec837d0ccb6301d7b5580bf5edae39 # v8.2.0 + with: + enable-cache: true + + - name: Set up JDK 25 + uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0 + with: + java-version: "25" + distribution: "temurin" + + - name: Setup Gradle + uses: gradle/actions/setup-gradle@50e97c2cd7a37755bbfafc9c5b7cafaece252f6e # v6.1.0 + with: + gradle-version: 9.6.0 + + - name: Set up Node + uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0 + with: + node-version: "22" + cache: "npm" + cache-dependency-path: frontend/package-lock.json + + - name: Install Task + uses: go-task/setup-task@01a4adf9db2d14c1de7a560f09170b6e0df736aa # v2.1.0 + + # Rebuilds the OpenAPI spec from the current Java and regenerates both the + # frontend types and the engine tool models from it. + - name: Regenerate generated models + run: task tool-models + + - name: Verify generated models are up to date + id: models-check + continue-on-error: true + run: | + git diff --exit-code \ + frontend/editor/src/core/types/toolApiTypes.ts \ + engine/src/stirling/models/tool_models.py + + - name: Comment on generated models check failure + # Only post a comment on PRs. github-script's PR helpers need an + # issue/PR number, which doesn't exist on merge_group runs. + if: steps.models-check.outcome == 'failure' && github.event_name == 'pull_request' + continue-on-error: true + uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0 + with: + script: | + const marker = ''; + const body = [ + marker, + '### Generated Models Check Failed', + '', + 'The generated `frontend/editor/src/core/types/toolApiTypes.ts` and/or `engine/src/stirling/models/tool_models.py` are out of date with the Java OpenAPI spec and will need to be regenerated before they can be merged in.', + '', + 'Run `task tool-models` to regenerate both, then commit the updated files.', + ].join('\n'); + const { data: comments } = await github.rest.issues.listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + }); + const existing = comments.find(c => c.body.includes(marker)); + if (existing) { + await github.rest.issues.updateComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: existing.id, + body, + }); + } else { + await github.rest.issues.createComment({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + body, + }); + } + + - name: Fail if generated models check failed + if: steps.models-check.outcome == 'failure' + run: | + echo "============================================" + echo " Generated Models Check Failed" + echo "============================================" + echo "" + echo "The generated frontend API types and/or engine tool" + echo "models are out of date with the Java OpenAPI spec and" + echo "will need to be regenerated before they can be merged in." + echo "" + echo "Run 'task tool-models' to regenerate both, then" + echo "commit the updated files." + echo "============================================" + exit 1 + + - name: Remove generated models check comment on success + if: steps.models-check.outcome == 'success' && github.event_name == 'pull_request' + continue-on-error: true + uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0 + with: + script: | + const marker = ''; + const { data: comments } = await github.rest.issues.listComments({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + }); + const existing = comments.find(c => c.body.includes(marker)); + if (existing) { + await github.rest.issues.deleteComment({ + owner: context.repo.owner, + repo: context.repo.repo, + comment_id: existing.id, + }); + } diff --git a/.taskfiles/frontend.yml b/.taskfiles/frontend.yml index 52277b5b04..4f87226f93 100644 --- a/.taskfiles/frontend.yml +++ b/.taskfiles/frontend.yml @@ -396,6 +396,23 @@ tasks: # Code Generation # ============================================================ + tool-models: + desc: "Generate tool API types from the Java OpenAPI spec" + deps: [install, ":backend:swagger"] + cmds: + - npx tsx editor/scripts/generate-tool-api-types.mts --spec ../SwaggerDoc.json --output editor/src/core/types/toolApiTypes.ts + sources: + - editor/scripts/generate-tool-api-types.mts + - ../SwaggerDoc.json + generates: + - editor/src/core/types/toolApiTypes.ts + + tool-models:check: + desc: "Fail if committed tool API types are out of date" + deps: [install, ":backend:swagger"] + cmds: + - npx tsx editor/scripts/generate-tool-api-types.mts --spec ../SwaggerDoc.json --output editor/src/core/types/toolApiTypes.ts --check + licenses:generate: desc: "Generate frontend license report" deps: [install] diff --git a/Taskfile.yml b/Taskfile.yml index 26895723d0..705ad4a1db 100644 --- a/Taskfile.yml +++ b/Taskfile.yml @@ -185,6 +185,16 @@ tasks: - task: frontend:format:check - task: engine:format:check + # ============================================================ + # Code generation + # ============================================================ + + tool-models: + desc: "Generate all API models from the Java OpenAPI spec" + cmds: + - task: frontend:tool-models + - task: engine:tool-models + # ============================================================ # Quality Gate # ============================================================ diff --git a/app/core/src/main/java/stirling/software/SPDF/model/api/general/PosterPdfRequest.java b/app/core/src/main/java/stirling/software/SPDF/model/api/general/PosterPdfRequest.java index 20d7eaf70b..222b89022a 100644 --- a/app/core/src/main/java/stirling/software/SPDF/model/api/general/PosterPdfRequest.java +++ b/app/core/src/main/java/stirling/software/SPDF/model/api/general/PosterPdfRequest.java @@ -1,5 +1,7 @@ package stirling.software.SPDF.model.api.general; +import com.fasterxml.jackson.annotation.JsonProperty; + import io.swagger.v3.oas.annotations.media.Schema; import lombok.Data; @@ -17,20 +19,8 @@ public class PosterPdfRequest extends PDFFile { allowableValues = {"A4", "Letter", "A3", "A5", "Legal", "Tabloid"}) private String pageSize = "A4"; - @Schema( - description = "Horizontal decimation factor (how many columns to split into)", - requiredMode = Schema.RequiredMode.NOT_REQUIRED, - defaultValue = "2", - minimum = "1", - maximum = "10") private int xFactor = 2; - @Schema( - description = "Vertical decimation factor (how many rows to split into)", - requiredMode = Schema.RequiredMode.NOT_REQUIRED, - defaultValue = "2", - minimum = "1", - maximum = "10") private int yFactor = 2; @Schema( @@ -38,4 +28,36 @@ public class PosterPdfRequest extends PDFFile { requiredMode = Schema.RequiredMode.NOT_REQUIRED, defaultValue = "false") private boolean rightToLeft = false; + + @JsonProperty("xFactor") + @Schema( + description = "Horizontal decimation factor (how many columns to split into)", + requiredMode = Schema.RequiredMode.NOT_REQUIRED, + defaultValue = "2", + minimum = "1", + maximum = "10") + public int getXFactor() { + return xFactor; + } + + @JsonProperty("xFactor") + public void setXFactor(int xFactor) { + this.xFactor = xFactor; + } + + @JsonProperty("yFactor") + @Schema( + description = "Vertical decimation factor (how many rows to split into)", + requiredMode = Schema.RequiredMode.NOT_REQUIRED, + defaultValue = "2", + minimum = "1", + maximum = "10") + public int getYFactor() { + return yFactor; + } + + @JsonProperty("yFactor") + public void setYFactor(int yFactor) { + this.yFactor = yFactor; + } } diff --git a/app/core/src/main/java/stirling/software/SPDF/model/api/security/AddPasswordRequest.java b/app/core/src/main/java/stirling/software/SPDF/model/api/security/AddPasswordRequest.java index 541a8717f3..2227803372 100644 --- a/app/core/src/main/java/stirling/software/SPDF/model/api/security/AddPasswordRequest.java +++ b/app/core/src/main/java/stirling/software/SPDF/model/api/security/AddPasswordRequest.java @@ -29,7 +29,8 @@ public class AddPasswordRequest extends PDFFile { description = "The length of the encryption key", type = "integer", allowableValues = {"40", "128", "256"}, - requiredMode = Schema.RequiredMode.REQUIRED) + requiredMode = Schema.RequiredMode.NOT_REQUIRED, + defaultValue = "256") private int keyLength = 256; @Schema(description = "Whether document assembly is prevented", defaultValue = "false") diff --git a/engine/src/stirling/models/tool_models.py b/engine/src/stirling/models/tool_models.py index 3e179eaf0c..2591d947a8 100644 --- a/engine/src/stirling/models/tool_models.py +++ b/engine/src/stirling/models/tool_models.py @@ -107,7 +107,7 @@ class KeyLength(IntEnum): class AddPasswordParams(ApiModel): - key_length: KeyLength = Field(..., description="The length of the encryption key") + key_length: KeyLength = Field(KeyLength.integer_256, description="The length of the encryption key") owner_password: SecretStr | None = Field( None, description="The owner password to be added to the PDF file (Restricts what can be done with the document once it is opened)", @@ -1283,8 +1283,8 @@ class PageSize1(StrEnum): class SplitForPosterPrintParams(ApiModel): page_size: PageSize1 = Field(..., description="Target page size for output chunks (e.g., 'A4', 'Letter', 'A3')") right_to_left: bool = Field(False, description="Split right-to-left instead of left-to-right") - xfactor: int | None = None - yfactor: int | None = None + x_factor: int = Field(2, description="Horizontal decimation factor (how many columns to split into)", ge=1, le=10) + y_factor: int = Field(2, description="Vertical decimation factor (how many rows to split into)", ge=1, le=10) class SplitPagesParams(ApiModel): diff --git a/frontend/editor/scripts/generate-tool-api-types.mts b/frontend/editor/scripts/generate-tool-api-types.mts new file mode 100644 index 0000000000..f12572620a --- /dev/null +++ b/frontend/editor/scripts/generate-tool-api-types.mts @@ -0,0 +1,400 @@ +/** + * Generates the committed frontend tool API types (toolApiTypes.ts) from the + * Java backend's OpenAPI spec, so the frontend's request shapes stay in step + * with the backend. + */ + +import { readFileSync, writeFileSync, mkdirSync } from "node:fs"; +import { dirname, resolve } from "node:path"; +import { parseArgs } from "node:util"; +import { compile, type JSONSchema } from "json-schema-to-typescript"; +import * as prettier from "prettier"; + +// The API namespaces whose endpoints are real, callable tools. `/api/v1/filter/` +// (pipeline-only) and `/api/v1/ai/tools/` (not in the spec) are intentionally +// excluded. Extend this list when other namespaces become tools. +const ALLOWED_PATH_PREFIXES = [ + "/api/v1/general/", + "/api/v1/misc/", + "/api/v1/security/", + "/api/v1/convert/", +]; + +// File plumbing, not user parameters: `fileInput` is the uploaded document and +// `fileId` a server-side handle. Stripped from every generated request model. +// Named file fields (stampImage, attachments, ...) are real parameters and kept. +const BASE_FILE_FIELDS = new Set(["fileInput", "fileId"]); + +// The shared "upload a file or provide a file ID" wrapper schema and its two +// branches. An endpoint whose body is exactly this has no parameters, so it must +// resolve to an empty model. It needs separate handling because the wrapper is a +// `oneOf`, which survives the flat-field stripping above and would otherwise leak +// the file fields into the output. +const FILE_WRAPPER_COMPONENTS = new Set([ + "PDFFile", + "PDFFileUpload", + "PDFFileRef", +]); + +const COMPONENT_REF_PREFIX = "#/components/schemas/"; + +const FILE_HEADER = [ + "// AUTO-GENERATED FILE. DO NOT EDIT.", + "// Generated by editor/scripts/generate-tool-api-types.mts from the Java OpenAPI spec", + "// (SwaggerDoc.json). Regenerate with: task frontend:tool-models", + "// Tools that take only a file input have no parameters; their model is Record.", +].join("\n"); + +type Json = Record; + +interface DiscoveredTool { + path: string; + className: string; +} + +function isObject(value: unknown): value is Json { + return typeof value === "object" && value !== null && !Array.isArray(value); +} + +/** + * Recursively sort object keys so the output is byte-stable regardless of the + * key ordering springdoc happens to emit. + */ +function deepSortKeys(value: unknown): unknown { + if (Array.isArray(value)) return value.map(deepSortKeys); + if (isObject(value)) { + const sorted: Json = {}; + for (const key of Object.keys(value).sort()) { + sorted[key] = deepSortKeys(value[key]); + } + return sorted; + } + return value; +} + +function pascalCase(segment: string): string { + return segment + .split(/[-_/]/) + .filter(Boolean) + .map((part) => part.charAt(0).toUpperCase() + part.slice(1)) + .join(""); +} + +/** Fallback class name for an inline request body (no $ref to name it after). */ +function pathToClassName(path: string): string { + const relevant = path.replace(/^\/api\/v1\//, ""); + return `${pascalCase(relevant)}Request`; +} + +function dedupe(name: string, used: Set): string { + let candidate = name; + let n = 2; + while (used.has(candidate)) candidate = `${name}${n++}`; + used.add(candidate); + return candidate; +} + +/** The request body schema for a POST endpoint (multipart wins, then JSON), or null. */ +function requestBodySchema(pathItem: Json): Json | null { + const post = pathItem.post; + if (!isObject(post)) return null; + const requestBody = post.requestBody; + if (!isObject(requestBody)) return null; + const content = requestBody.content; + if (!isObject(content)) return null; + for (const mediaType of ["multipart/form-data", "application/json"]) { + const entry = content[mediaType]; + if (isObject(entry) && isObject(entry.schema)) return entry.schema; + } + return null; +} + +/** + * A POST endpoint's query parameters as a property map plus the required ones. + * Some tools take inputs on the query string alongside the multipart body (e.g. + * merge-pdfs' `fileOrder`), so a complete model has to fold them in. Ref-valued + * param schemas are inlined later by rewriteRefs. + */ +function queryParameters(pathItem: Json): { props: Json; required: string[] } { + const props: Json = {}; + const required: string[] = []; + const post = pathItem.post; + if (!isObject(post) || !Array.isArray(post.parameters)) + return { props, required }; + for (const param of post.parameters) { + if ( + !isObject(param) || + param.in !== "query" || + typeof param.name !== "string" + ) + continue; + if (!isObject(param.schema)) continue; + const schema = structuredClone(param.schema) as Json; + if (!("description" in schema) && typeof param.description === "string") { + schema.description = param.description; + } + props[param.name] = schema; + if (param.required === true) required.push(param.name); + } + return { props, required }; +} + +/** + * Rewrite every `#/components/schemas/X` ref to `#/definitions/X` in place (the + * form json-schema-to-typescript expects) and collect the referenced component + * names so the caller can inline them. + */ +function rewriteRefs(node: unknown, found: Set): void { + if (Array.isArray(node)) { + for (const item of node) rewriteRefs(item, found); + return; + } + if (!isObject(node)) return; + const ref = node.$ref; + if (typeof ref === "string" && ref.startsWith(COMPONENT_REF_PREFIX)) { + const name = ref.slice(COMPONENT_REF_PREFIX.length); + node.$ref = `#/definitions/${name}`; + found.add(name); + } + for (const value of Object.values(node)) rewriteRefs(value, found); +} + +/** Keep only fields the client must send: drop those with a default or already stripped. */ +function computeRequired(schema: Json, properties: Json): string[] { + const required = Array.isArray(schema.required) + ? (schema.required as string[]) + : []; + return required.filter((name) => { + const prop = properties[name]; + return name in properties && !(isObject(prop) && "default" in prop); + }); +} + +async function main(): Promise { + const { values } = parseArgs({ + options: { + spec: { type: "string" }, + output: { type: "string" }, + check: { type: "boolean", default: false }, + }, + }); + if (!values.spec || !values.output) { + throw new Error( + "Usage: generate-tool-api-types.mts --spec --output [--check]", + ); + } + const specPath = resolve(values.spec); + const outputPath = resolve(values.output); + + const spec = JSON.parse(readFileSync(specPath, "utf-8")) as Json; + const paths = isObject(spec.paths) ? spec.paths : {}; + const components = + isObject(spec.components) && isObject(spec.components.schemas) + ? spec.components.schemas + : {}; + + const tools: DiscoveredTool[] = []; + const definitions: Record = {}; + const usedClassNames = new Set(); + const pendingComponents = new Set(); + const skipped: string[] = []; + + for (const path of Object.keys(paths).sort()) { + if ( + path.includes("{") || + !ALLOWED_PATH_PREFIXES.some((p) => path.startsWith(p)) + ) + continue; + const pathItem = paths[path]; + if (!isObject(pathItem)) continue; + const bodySchema = requestBodySchema(pathItem); + if (!bodySchema) { + if (isObject(pathItem.post)) skipped.push(path); + continue; + } + + // Resolve the request model into a fresh, mutable clone so we never mutate the shared spec. + const ref = bodySchema.$ref; + const refComponent = + typeof ref === "string" && ref.startsWith(COMPONENT_REF_PREFIX) + ? ref.slice(COMPONENT_REF_PREFIX.length) + : null; + let className: string; + let modelSchema: Json; + if (refComponent && FILE_WRAPPER_COMPONENTS.has(refComponent)) { + // File-only endpoint: model it as an empty object so it becomes + // Record rather than the wrapper's file union. Named after + // the path since the wrapper schema is shared. Query params still fold in + // below. + className = pathToClassName(path); + modelSchema = { type: "object", properties: {} }; + } else if (refComponent) { + const component = components[refComponent]; + if (!isObject(component)) continue; + className = refComponent; + modelSchema = structuredClone(component) as Json; + } else { + className = pathToClassName(path); + modelSchema = structuredClone(bodySchema) as Json; + } + + // A component shared by several endpoints (e.g. GeneralFile) is only defined once. + if (!(className in definitions)) { + const uniqueName = dedupe(className, usedClassNames); + className = uniqueName; + const bodyProps: Json = isObject(modelSchema.properties) + ? (structuredClone(modelSchema.properties) as Json) + : {}; + const query = queryParameters(pathItem); + // Body wins over query on a name collision. + const properties: Json = { ...query.props, ...bodyProps }; + for (const field of BASE_FILE_FIELDS) delete properties[field]; + modelSchema.properties = properties; + const required = new Set(computeRequired(modelSchema, properties)); + for (const name of query.required) { + const prop = properties[name]; + if (name in properties && !(isObject(prop) && "default" in prop)) { + required.add(name); + } + } + if (required.size > 0) modelSchema.required = [...required]; + else delete modelSchema.required; + modelSchema.title = className; + rewriteRefs(modelSchema, pendingComponents); + definitions[className] = modelSchema; + } + + tools.push({ path, className }); + } + + // Transitively inline every referenced component into `definitions`, rewriting its refs too. + const queue = [...pendingComponents]; + while (queue.length > 0) { + const name = queue.pop() as string; + if (name in definitions) continue; + const component = components[name]; + if (!isObject(component)) continue; + const cloned = structuredClone(component) as Json; + cloned.title = name; + const nested = new Set(); + rewriteRefs(cloned, nested); + definitions[name] = cloned; + for (const next of nested) if (!(next in definitions)) queue.push(next); + } + + await compileAndWrite( + tools, + definitions, + outputPath, + values.check ?? false, + skipped, + ); +} + +async function compileAndWrite( + tools: DiscoveredTool[], + definitions: Record, + outputPath: string, + check: boolean, + skipped: string[], +): Promise { + // json-schema-to-typescript only emits a named, exported interface per schema + // if something references it, so wrap every model in one root object. The root + // interface itself is stripped from the output afterwards. + const rootName = "__ToolApiRootAutogen"; + const uniqueClassNames = [...new Set(tools.map((t) => t.className))]; + const rootSchema: JSONSchema = { + title: rootName, + type: "object", + additionalProperties: false, + properties: Object.fromEntries( + uniqueClassNames.map((name) => [name, { $ref: `#/definitions/${name}` }]), + ), + definitions: definitions as Record, + }; + + // Canonicalize key order so a reordering in SwaggerDoc.json can never change + // the generated file (which would flake the committed-types CI check). + const canonicalRoot = deepSortKeys(rootSchema) as JSONSchema; + + const compiled = await compile(canonicalRoot, rootName, { + bannerComment: "", + additionalProperties: false, + declareExternallyReferenced: true, + unreachableDefinitions: false, + strictIndexSignatures: true, + format: false, + }); + + // Drop the root wrapper interface, then rewrite empty models (file-only tools) + // to `Record` - the precise, lint-clean type for an object with + // no properties (json-schema-to-typescript always emits `{}` interfaces here). + const models = compiled + .replace(new RegExp(`export interface ${rootName} \\{[^}]*\\}`), "") + .replace( + /export interface (\w+) \{\s*\}/g, + "export type $1 = Record;", + ) + .trim(); + + const endpointUnion = tools + .map((t) => ` | ${JSON.stringify(t.path)}`) + .join("\n"); + const paramsEntries = tools + .map((t) => ` ${JSON.stringify(t.path)}: ${t.className};`) + .join("\n"); + const endpointList = tools + .map((t) => ` ${JSON.stringify(t.path)},`) + .join("\n"); + + const footer = [ + "/** Endpoint path for a generated tool operation (the operation identity across languages). */", + `export type ToolEndpoint =\n${endpointUnion};`, + "", + "/** Backend request-parameter model for each tool endpoint. */", + `export interface ToolApiParams {\n${paramsEntries}\n}`, + "", + "/** Every generated tool endpoint, for iteration. */", + `export const TOOL_ENDPOINTS = [\n${endpointList}\n] as const satisfies readonly ToolEndpoint[];`, + "", + "/** Union of every generated tool request model. */", + `export type ToolApiRequest = ToolApiParams[ToolEndpoint];`, + ].join("\n"); + + const body = `${FILE_HEADER}\n\n${models}\n\n${footer}\n`; + const prettierConfig = await prettier.resolveConfig(outputPath); + const formatted = await prettier.format(body, { + ...prettierConfig, + parser: "typescript", + }); + + if (check) { + let current = ""; + try { + current = readFileSync(outputPath, "utf-8"); + } catch { + // Missing file counts as out of date. + } + if (current !== formatted) { + throw new Error( + `${outputPath} is out of date. Run 'task frontend:tool-models' and commit the result.`, + ); + } + console.log(`Up to date: ${tools.length} tool endpoints.`); + return; + } + + mkdirSync(dirname(outputPath), { recursive: true }); + writeFileSync(outputPath, formatted, "utf-8"); + console.log(`Generated ${tools.length} tool endpoints -> ${outputPath}`); + if (skipped.length > 0) { + console.log( + `Skipped ${skipped.length} POST endpoint(s) with no request body: ${skipped.join(", ")}`, + ); + } +} + +main().catch((error: unknown) => { + console.error(error instanceof Error ? error.message : error); + process.exit(1); +}); diff --git a/frontend/editor/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts b/frontend/editor/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts index f9bf73f4ce..cb5624bce2 100644 --- a/frontend/editor/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts +++ b/frontend/editor/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts @@ -3,35 +3,83 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { AddPageNumbersParameters, defaultParameters, } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters"; +const ENDPOINT = "/api/v1/misc/add-page-numbers" satisfies ToolEndpoint; +type AddPageNumbersApiParams = ToolApiParams[typeof ENDPOINT]; + +// The UI labels fonts capitalized while the backend model uses lowercase; these +// maps translate between them so both mappers type-check without casting. +const FONT_TYPE_TO_API = { + Times: "times", + Helvetica: "helvetica", + Courier: "courier", +} as const satisfies Record< + AddPageNumbersParameters["fontType"], + AddPageNumbersApiParams["fontType"] +>; +const FONT_TYPE_FROM_API = { + times: "Times", + helvetica: "Helvetica", + courier: "Courier", +} as const satisfies Record< + AddPageNumbersApiParams["fontType"], + AddPageNumbersParameters["fontType"] +>; + +// Convert the tool's UI parameters into the add-page-numbers request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const addPageNumbersToApiParams = ( + parameters: AddPageNumbersParameters, +): AddPageNumbersApiParams => ({ + customMargin: parameters.customMargin, + position: parameters.position, + fontSize: parameters.fontSize, + fontType: FONT_TYPE_TO_API[parameters.fontType], + startingNumber: parameters.startingNumber, + pagesToNumber: parameters.pagesToNumber, + customText: parameters.customText, + zeroPad: parameters.zeroPad, +}); + +// Reconstruct the tool's UI parameters from an add-page-numbers request body, +// so a stored or AI-authored step can be re-rendered in the settings UI. +export const addPageNumbersFromApiParams = ( + apiParams: AddPageNumbersApiParams, +): Partial => ({ + customMargin: apiParams.customMargin, + position: apiParams.position, + fontSize: apiParams.fontSize, + fontType: FONT_TYPE_FROM_API[apiParams.fontType], + startingNumber: apiParams.startingNumber, + pagesToNumber: apiParams.pagesToNumber, + customText: apiParams.customText, + zeroPad: apiParams.zeroPad, +}); + export const buildAddPageNumbersFormData = ( parameters: AddPageNumbersParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("customMargin", parameters.customMargin); - formData.append("position", String(parameters.position)); - formData.append("fontSize", String(parameters.fontSize)); - formData.append("fontType", parameters.fontType); - formData.append("startingNumber", String(parameters.startingNumber)); - formData.append("pagesToNumber", parameters.pagesToNumber); - formData.append("customText", parameters.customText); - formData.append("zeroPad", String(parameters.zeroPad)); - - return formData; -}; +): FormData => + objectToFormData(addPageNumbersToApiParams(parameters), { fileInput: file }); export const addPageNumbersOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildAddPageNumbersFormData, + toApiParams: addPageNumbersToApiParams, + fromApiParams: addPageNumbersFromApiParams, operationType: "addPageNumbers", - endpoint: "/api/v1/misc/add-page-numbers", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/components/tools/addStamp/useAddStampOperation.ts b/frontend/editor/src/core/components/tools/addStamp/useAddStampOperation.ts index dc34c5d27a..bdceee49f1 100644 --- a/frontend/editor/src/core/components/tools/addStamp/useAddStampOperation.ts +++ b/frontend/editor/src/core/components/tools/addStamp/useAddStampOperation.ts @@ -3,51 +3,97 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { AddStampParameters, defaultParameters, } from "@app/components/tools/addStamp/useAddStampParameters"; +const ENDPOINT = "/api/v1/misc/add-stamp" satisfies ToolEndpoint; +type AddStampApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the add-stamp request body. The stamp +// image itself is a File and is passed via the `files` argument, not here. +export const addStampToApiParams = ( + parameters: AddStampParameters, +): AddStampApiParams => { + const stampType = parameters.stampType || "text"; + const apiParams: AddStampApiParams = { + stampType, + pageNumbers: parameters.pageNumbers, + customMargin: parameters.customMargin || "medium", + position: parameters.position, + fontSize: parameters.fontSize, + rotation: parameters.rotation, + // The UI stores opacity as a 0-100 percentage; the backend expects 0.0-1.0. + opacity: parameters.opacity / 100, + overrideX: parameters.overrideX, + overrideY: parameters.overrideY, + customColor: parameters.customColor.startsWith("#") + ? parameters.customColor + : `#${parameters.customColor}`, + alphabet: parameters.alphabet, + }; + + if (stampType === "text") { + apiParams.stampText = parameters.stampText; + } + + return apiParams; +}; + +// Reconstruct the tool's UI parameters from an add-stamp request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. The stamp +// image File cannot be recovered from the request model. +export const addStampFromApiParams = ( + apiParams: AddStampApiParams, +): Partial => { + const result: Partial = { + stampType: apiParams.stampType, + pageNumbers: apiParams.pageNumbers, + customMargin: apiParams.customMargin, + position: apiParams.position, + fontSize: apiParams.fontSize, + rotation: apiParams.rotation, + overrideX: apiParams.overrideX, + overrideY: apiParams.overrideY, + customColor: apiParams.customColor, + alphabet: apiParams.alphabet, + }; + + if (apiParams.opacity !== undefined) { + result.opacity = apiParams.opacity * 100; + } + if (apiParams.stampText !== undefined) { + result.stampText = apiParams.stampText; + } + + return result; +}; + export const buildAddStampFormData = ( parameters: AddStampParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("pageNumbers", parameters.pageNumbers); - formData.append("customMargin", parameters.customMargin || "medium"); - formData.append("position", String(parameters.position)); - const effectiveFontSize = parameters.fontSize; - formData.append("fontSize", String(effectiveFontSize)); - formData.append("rotation", String(parameters.rotation)); - formData.append("opacity", String(parameters.opacity / 100)); - formData.append("overrideX", String(parameters.overrideX)); - formData.append("overrideY", String(parameters.overrideY)); - formData.append( - "customColor", - parameters.customColor.startsWith("#") - ? parameters.customColor - : `#${parameters.customColor}`, +): FormData => + objectToFormData( + addStampToApiParams(parameters), + parameters.stampType === "image" && parameters.stampImage + ? { fileInput: file, stampImage: parameters.stampImage } + : { fileInput: file }, ); - formData.append("alphabet", parameters.alphabet); - - // Stamp type and payload - formData.append("stampType", parameters.stampType || "text"); - if (parameters.stampType === "text") { - formData.append("stampText", parameters.stampText); - } else if (parameters.stampType === "image" && parameters.stampImage) { - formData.append("stampImage", parameters.stampImage); - } - - return formData; -}; export const addStampOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildAddStampFormData, + toApiParams: addStampToApiParams, + fromApiParams: addStampFromApiParams, operationType: "addStamp", - endpoint: "/api/v1/misc/add-stamp", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts b/frontend/editor/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts index 2b66bbdc34..bc9fb738bc 100644 --- a/frontend/editor/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts +++ b/frontend/editor/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts @@ -4,37 +4,59 @@ import { ToolOperationConfig, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; -import { AddAttachmentsParameters } from "@app/hooks/tools/addAttachments/useAddAttachmentsParameters"; +import { + AddAttachmentsParameters, + DEFAULT_ADD_ATTACHMENTS_PARAMETERS, +} from "@app/hooks/tools/addAttachments/useAddAttachmentsParameters"; + +const ENDPOINT = "/api/v1/misc/add-attachments" satisfies ToolEndpoint; +type AddAttachmentsApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the add-attachments request body. The +// attachment files are uploaded via the named "attachments" field (see +// buildFormData); the model lists them but they are not scalar parameters. +export const addAttachmentsToApiParams = ( + parameters: AddAttachmentsParameters, +): AddAttachmentsApiParams => ({ + attachments: [], + convertToPdfA3b: parameters.convertToPdfA3b, +}); + +// Reconstruct the tool's UI parameters from an add-attachments request body (the +// attachment files themselves are not recoverable from stored parameters). +export const addAttachmentsFromApiParams = ( + apiParams: AddAttachmentsApiParams, +): Partial => ({ + convertToPdfA3b: + apiParams.convertToPdfA3b ?? + DEFAULT_ADD_ATTACHMENTS_PARAMETERS.convertToPdfA3b, +}); const buildFormData = ( parameters: AddAttachmentsParameters, file: File, -): FormData => { - const formData = new FormData(); - - // Add the main PDF file (single file per request in singleFile mode) - if (file) { - formData.append("fileInput", file); - } - - // Add attachment files - (parameters.attachments || []).forEach((attachment) => { - if (attachment) formData.append("attachments", attachment); +): FormData => + objectToFormData(addAttachmentsToApiParams(parameters), { + fileInput: file, + attachments: (parameters.attachments || []).filter(Boolean), }); - formData.append("convertToPdfA3b", String(parameters.convertToPdfA3b)); - - return formData; -}; - // Operation configuration for automation export const addAttachmentsOperationConfig: ToolOperationConfig = { toolType: ToolType.singleFile, buildFormData, + toApiParams: addAttachmentsToApiParams, + fromApiParams: addAttachmentsFromApiParams, operationType: "addAttachments", - endpoint: "/api/v1/misc/add-attachments", + endpoint: ENDPOINT, + defaultParameters: DEFAULT_ADD_ATTACHMENTS_PARAMETERS, }; export const useAddAttachmentsOperation = () => { diff --git a/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts b/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts index 3045c69450..77958629b0 100644 --- a/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts +++ b/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts @@ -1,6 +1,10 @@ import { describe, expect, test, vi, beforeEach } from "vitest"; import { renderHook } from "@testing-library/react"; -import { useAddPasswordOperation } from "@app/hooks/tools/addPassword/useAddPasswordOperation"; +import { + addPasswordFromApiParams, + addPasswordToApiParams, + useAddPasswordOperation, +} from "@app/hooks/tools/addPassword/useAddPasswordOperation"; import type { AddPasswordFullParameters } from "@app/hooks/tools/addPassword/useAddPasswordParameters"; // Mock the useToolOperation hook @@ -141,3 +145,48 @@ describe("useAddPasswordOperation", () => { expect(callArgs[property]).toBe(expectedValue); }); }); + +describe("addPassword mappers", () => { + test("round-trips backend params, including the flattened permissions", () => { + // Baseline differs from the configured values so the round trip fails if + // fromApiParams drops a field instead of reconstructing it. + const baseline: AddPasswordFullParameters = { + password: "", + ownerPassword: "", + keyLength: 40, + permissions: { + preventAssembly: false, + preventExtractContent: false, + preventExtractForAccessibility: false, + preventFillInForm: false, + preventModify: false, + preventModifyAnnotations: false, + preventPrinting: false, + preventPrintingFaithful: false, + }, + }; + const configured: AddPasswordFullParameters = { + password: "user-pw", + ownerPassword: "owner-pw", + keyLength: 128, + permissions: { + preventAssembly: true, + preventExtractContent: false, + preventExtractForAccessibility: true, + preventFillInForm: false, + preventModify: true, + preventModifyAnnotations: false, + preventPrinting: true, + preventPrintingFaithful: false, + }, + }; + + const api = addPasswordToApiParams(configured); + const roundTripped = addPasswordToApiParams({ + ...baseline, + ...addPasswordFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts b/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts index c09a740250..0bc3c1b396 100644 --- a/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts +++ b/frontend/editor/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts @@ -3,29 +3,80 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { AddPasswordFullParameters, defaultParameters, } from "@app/hooks/tools/addPassword/useAddPasswordParameters"; import { defaultParameters as permissionsDefaults } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters"; -import { getFormData } from "@app/hooks/tools/changePermissions/useChangePermissionsOperation"; + +const ENDPOINT = "/api/v1/security/add-password" satisfies ToolEndpoint; +type AddPasswordApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the add-password request body. The +// permissions sub-object is flattened into the request's prevent* fields. +export const addPasswordToApiParams = ( + parameters: AddPasswordFullParameters, +): AddPasswordApiParams => ({ + password: parameters.password, + ownerPassword: parameters.ownerPassword, + // The UI stores keyLength as a number; narrow it to the model's allowed sizes. + keyLength: parameters.keyLength as AddPasswordApiParams["keyLength"], + preventAssembly: parameters.permissions.preventAssembly ?? false, + preventExtractContent: parameters.permissions.preventExtractContent ?? false, + preventExtractForAccessibility: + parameters.permissions.preventExtractForAccessibility ?? false, + preventFillInForm: parameters.permissions.preventFillInForm ?? false, + preventModify: parameters.permissions.preventModify ?? false, + preventModifyAnnotations: + parameters.permissions.preventModifyAnnotations ?? false, + preventPrinting: parameters.permissions.preventPrinting ?? false, + preventPrintingFaithful: + parameters.permissions.preventPrintingFaithful ?? false, +}); + +// Reconstruct the tool's UI parameters from an add-password request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const addPasswordFromApiParams = ( + apiParams: AddPasswordApiParams, +): Partial => ({ + password: apiParams.password ?? defaultParameters.password, + ownerPassword: apiParams.ownerPassword ?? defaultParameters.ownerPassword, + keyLength: apiParams.keyLength, + permissions: { + preventAssembly: + apiParams.preventAssembly ?? permissionsDefaults.preventAssembly, + preventExtractContent: + apiParams.preventExtractContent ?? + permissionsDefaults.preventExtractContent, + preventExtractForAccessibility: + apiParams.preventExtractForAccessibility ?? + permissionsDefaults.preventExtractForAccessibility, + preventFillInForm: + apiParams.preventFillInForm ?? permissionsDefaults.preventFillInForm, + preventModify: apiParams.preventModify ?? permissionsDefaults.preventModify, + preventModifyAnnotations: + apiParams.preventModifyAnnotations ?? + permissionsDefaults.preventModifyAnnotations, + preventPrinting: + apiParams.preventPrinting ?? permissionsDefaults.preventPrinting, + preventPrintingFaithful: + apiParams.preventPrintingFaithful ?? + permissionsDefaults.preventPrintingFaithful, + }, +}); // Static function that can be used by both the hook and automation executor export const buildAddPasswordFormData = ( parameters: AddPasswordFullParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("password", parameters.password); - formData.append("ownerPassword", parameters.ownerPassword); - formData.append("keyLength", parameters.keyLength.toString()); - getFormData(parameters.permissions).forEach(([key, value]) => { - formData.append(key, value); - }); - return formData; -}; +): FormData => + objectToFormData(addPasswordToApiParams(parameters), { fileInput: file }); // Full default parameters including permissions for automation const fullDefaultParameters: AddPasswordFullParameters = { @@ -37,8 +88,10 @@ const fullDefaultParameters: AddPasswordFullParameters = { export const addPasswordOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildAddPasswordFormData, + toApiParams: addPasswordToApiParams, + fromApiParams: addPasswordFromApiParams, operationType: "addPassword", - endpoint: "/api/v1/security/add-password", + endpoint: ENDPOINT, defaultParameters: fullDefaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.test.ts b/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.test.ts new file mode 100644 index 0000000000..e00753e41c --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.test.ts @@ -0,0 +1,26 @@ +import { describe, expect, test } from "vitest"; +import { + addWatermarkFromApiParams, + addWatermarkToApiParams, +} from "@app/hooks/tools/addWatermark/useAddWatermarkOperation"; +import { + AddWatermarkParameters, + defaultParameters, +} from "@app/hooks/tools/addWatermark/useAddWatermarkParameters"; + +describe("addWatermark mappers", () => { + // opacity 33 exercises the percentage <-> fraction conversion (/100, *100), + // which must survive the round trip without drifting on floating point. + test.each>([ + { watermarkType: "text", watermarkText: "DRAFT", opacity: 33 }, + { watermarkType: "image", opacity: 33 }, + ])("round-trips backend params for %o", (overrides) => { + const api = addWatermarkToApiParams({ ...defaultParameters, ...overrides }); + const roundTripped = addWatermarkToApiParams({ + ...defaultParameters, + ...addWatermarkFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts b/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts index 19700f43e7..75651f7bcd 100644 --- a/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts +++ b/frontend/editor/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts @@ -3,57 +3,97 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { AddWatermarkParameters, defaultParameters, } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters"; +const ENDPOINT = "/api/v1/security/add-watermark" satisfies ToolEndpoint; +type AddWatermarkApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the add-watermark request body. The +// watermark image itself is a File and is passed via the `files` argument. +export const addWatermarkToApiParams = ( + parameters: AddWatermarkParameters, +): AddWatermarkApiParams => { + const watermarkType = parameters.watermarkType || "text"; + const apiParams: AddWatermarkApiParams = { + watermarkType, + fontSize: parameters.fontSize, + rotation: parameters.rotation, + // The UI stores opacity as a 0-100 percentage; the backend expects 0.0-1.0. + opacity: parameters.opacity / 100, + widthSpacer: parameters.widthSpacer, + heightSpacer: parameters.heightSpacer, + // The UI types alphabet as a free string; the wire always sends it (empty + // string when unset) so the value is passed through and cast to the model + // enum to preserve existing behaviour. + alphabet: (parameters.alphabet || "") as AddWatermarkApiParams["alphabet"], + customColor: parameters.customColor || "", + convertPDFToImage: parameters.convertPDFToImage ?? false, + }; + + if (watermarkType === "text") { + apiParams.watermarkText = parameters.watermarkText; + } + + return apiParams; +}; + +// Reconstruct the tool's UI parameters from an add-watermark request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. The +// watermark image File cannot be recovered from the request model. +export const addWatermarkFromApiParams = ( + apiParams: AddWatermarkApiParams, +): Partial => { + const result: Partial = { + watermarkType: apiParams.watermarkType, + fontSize: apiParams.fontSize, + rotation: apiParams.rotation, + widthSpacer: apiParams.widthSpacer, + heightSpacer: apiParams.heightSpacer, + alphabet: apiParams.alphabet ?? defaultParameters.alphabet, + customColor: apiParams.customColor ?? defaultParameters.customColor, + convertPDFToImage: + apiParams.convertPDFToImage ?? defaultParameters.convertPDFToImage, + }; + + if (apiParams.opacity !== undefined) { + result.opacity = apiParams.opacity * 100; + } + if (apiParams.watermarkText !== undefined) { + result.watermarkText = apiParams.watermarkText; + } + + return result; +}; + // Static function that can be used by both the hook and automation executor export const buildAddWatermarkFormData = ( parameters: AddWatermarkParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - // Required: watermarkType as string - formData.append("watermarkType", parameters.watermarkType || "text"); - - // Add watermark content based on type - if (parameters.watermarkType === "text") { - formData.append("watermarkText", parameters.watermarkText); - } else if ( - parameters.watermarkType === "image" && - parameters.watermarkImage - ) { - formData.append("watermarkImage", parameters.watermarkImage); - } - - // Required parameters with correct formatting (defaults merged in automationExecutor) - formData.append("fontSize", parameters.fontSize.toString()); - formData.append("rotation", parameters.rotation.toString()); - formData.append("opacity", (parameters.opacity / 100).toString()); // Convert percentage to decimal - formData.append("widthSpacer", parameters.widthSpacer.toString()); - formData.append("heightSpacer", parameters.heightSpacer.toString()); - - // Backend-expected parameters from user input - formData.append("alphabet", parameters.alphabet || ""); - formData.append("customColor", parameters.customColor || ""); - formData.append( - "convertPDFToImage", - (parameters.convertPDFToImage ?? false).toString(), +): FormData => + objectToFormData( + addWatermarkToApiParams(parameters), + parameters.watermarkType === "image" && parameters.watermarkImage + ? { fileInput: file, watermarkImage: parameters.watermarkImage } + : { fileInput: file }, ); - return formData; -}; - // Static configuration object export const addWatermarkOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildAddWatermarkFormData, + toApiParams: addWatermarkToApiParams, + fromApiParams: addWatermarkFromApiParams, operationType: "watermark", - endpoint: "/api/v1/security/add-watermark", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/adjustPageScale/adjustPageScaleFormData.ts b/frontend/editor/src/core/hooks/tools/adjustPageScale/adjustPageScaleFormData.ts index 95ee6f3293..e278097508 100644 --- a/frontend/editor/src/core/hooks/tools/adjustPageScale/adjustPageScaleFormData.ts +++ b/frontend/editor/src/core/hooks/tools/adjustPageScale/adjustPageScaleFormData.ts @@ -1,13 +1,38 @@ -import { AdjustPageScaleParameters } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters"; +import { + AdjustPageScaleParameters, + PageSize, +} from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; + +export const ADJUST_PAGE_SCALE_ENDPOINT = + "/api/v1/general/scale-pages" satisfies ToolEndpoint; +type AdjustPageScaleApiParams = + ToolApiParams[typeof ADJUST_PAGE_SCALE_ENDPOINT]; + +export const adjustPageScaleToApiParams = ( + parameters: AdjustPageScaleParameters, +): AdjustPageScaleApiParams => ({ + scaleFactor: parameters.scaleFactor, + pageSize: parameters.pageSize, + orientation: parameters.orientation, +}); + +export const adjustPageScaleFromApiParams = ( + apiParams: AdjustPageScaleApiParams, +): Partial => ({ + scaleFactor: apiParams.scaleFactor, + pageSize: apiParams.pageSize as PageSize, + orientation: apiParams.orientation, +}); export const buildAdjustPageScaleFormData = ( parameters: AdjustPageScaleParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("scaleFactor", parameters.scaleFactor.toString()); - formData.append("pageSize", parameters.pageSize); - formData.append("orientation", parameters.orientation); - return formData; -}; +): FormData => + objectToFormData(adjustPageScaleToApiParams(parameters), { + fileInput: file, + }); diff --git a/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.test.ts b/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.test.ts index 264c71c940..7453ecfb3e 100644 --- a/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.test.ts +++ b/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.test.ts @@ -1,5 +1,9 @@ -import { describe, expect, it } from "vitest"; -import { buildAdjustPageScaleFormData } from "@app/hooks/tools/adjustPageScale/adjustPageScaleFormData"; +import { describe, expect, it, test } from "vitest"; +import { + adjustPageScaleFromApiParams, + adjustPageScaleToApiParams, + buildAdjustPageScaleFormData, +} from "@app/hooks/tools/adjustPageScale/adjustPageScaleFormData"; import { defaultParameters, PageSize, @@ -49,3 +53,20 @@ describe("buildAdjustPageScaleFormData", () => { expect(formData.get("fileInput")).toBe(file); }); }); + +describe("adjustPageScale mappers", () => { + test("round-trips backend params", () => { + const api = adjustPageScaleToApiParams({ + ...defaultParameters, + scaleFactor: 1.5, + pageSize: PageSize.A4, + orientation: "LANDSCAPE", + }); + const roundTripped = adjustPageScaleToApiParams({ + ...defaultParameters, + ...adjustPageScaleFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts b/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts index c710737722..c25e12e3a9 100644 --- a/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts +++ b/frontend/editor/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts @@ -8,15 +8,26 @@ import { AdjustPageScaleParameters, defaultParameters, } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters"; -import { buildAdjustPageScaleFormData } from "@app/hooks/tools/adjustPageScale/adjustPageScaleFormData"; +import { + buildAdjustPageScaleFormData, + adjustPageScaleToApiParams, + adjustPageScaleFromApiParams, + ADJUST_PAGE_SCALE_ENDPOINT, +} from "@app/hooks/tools/adjustPageScale/adjustPageScaleFormData"; -export { buildAdjustPageScaleFormData }; +export { + buildAdjustPageScaleFormData, + adjustPageScaleToApiParams, + adjustPageScaleFromApiParams, +}; export const adjustPageScaleOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildAdjustPageScaleFormData, + toApiParams: adjustPageScaleToApiParams, + fromApiParams: adjustPageScaleFromApiParams, operationType: "scalePages", - endpoint: "/api/v1/general/scale-pages", + endpoint: ADJUST_PAGE_SCALE_ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts b/frontend/editor/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts index 26c900df66..faca5b0ae7 100644 --- a/frontend/editor/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts +++ b/frontend/editor/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts @@ -3,40 +3,54 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { AutoRenameParameters, defaultParameters, } from "@app/hooks/tools/autoRename/useAutoRenameParameters"; -export const getFormData = (parameters: AutoRenameParameters) => - Object.entries(parameters).map(([key, value]) => [ - key, - value.toString(), - ]) as string[][]; +const ENDPOINT = "/api/v1/misc/auto-rename" satisfies ToolEndpoint; +type AutoRenameApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the auto-rename request body. The return +// type is the generated backend model, so a spec change that renames or drops a +// field breaks the build here. +export const autoRenameToApiParams = ( + parameters: AutoRenameParameters, +): AutoRenameApiParams => ({ + useFirstTextAsFallback: parameters.useFirstTextAsFallback, +}); + +// Reconstruct the tool's UI parameters from an auto-rename request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const autoRenameFromApiParams = ( + apiParams: AutoRenameApiParams, +): Partial => ({ + useFirstTextAsFallback: + apiParams.useFirstTextAsFallback ?? + defaultParameters.useFirstTextAsFallback, +}); // Static function that can be used by both the hook and automation executor export const buildAutoRenameFormData = ( parameters: AutoRenameParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - // Add all permission parameters - getFormData(parameters).forEach(([key, value]) => { - formData.append(key, value); - }); - - return formData; -}; +): FormData => + objectToFormData(autoRenameToApiParams(parameters), { fileInput: file }); // Static configuration object export const autoRenameOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildAutoRenameFormData, + toApiParams: autoRenameToApiParams, + fromApiParams: autoRenameFromApiParams, operationType: "autoRename", - endpoint: "/api/v1/misc/auto-rename", + endpoint: ENDPOINT, preserveBackendFilename: true, // Use filename from backend response headers defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts b/frontend/editor/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts index 6da2b66320..f5a213d48c 100644 --- a/frontend/editor/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts +++ b/frontend/editor/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts @@ -3,36 +3,69 @@ import { useToolOperation, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { BookletImpositionParameters, defaultParameters, } from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters"; +const ENDPOINT = "/api/v1/general/booklet-imposition" satisfies ToolEndpoint; +type BookletImpositionApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the booklet-imposition request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const bookletImpositionToApiParams = ( + parameters: BookletImpositionParameters, +): BookletImpositionApiParams => ({ + pagesPerSheet: parameters.pagesPerSheet, + addBorder: parameters.addBorder, + spineLocation: parameters.spineLocation, + addGutter: parameters.addGutter, + gutterSize: parameters.gutterSize, + doubleSided: parameters.doubleSided, + duplexPass: parameters.duplexPass, + flipOnShortEdge: parameters.flipOnShortEdge, +}); + +// Reconstruct the tool's UI parameters from a booklet-imposition request body, +// so a stored or AI-authored step can be re-rendered in the settings UI. +export const bookletImpositionFromApiParams = ( + apiParams: BookletImpositionApiParams, +): Partial => ({ + pagesPerSheet: apiParams.pagesPerSheet ?? defaultParameters.pagesPerSheet, + addBorder: apiParams.addBorder ?? defaultParameters.addBorder, + spineLocation: apiParams.spineLocation ?? defaultParameters.spineLocation, + addGutter: apiParams.addGutter ?? defaultParameters.addGutter, + gutterSize: apiParams.gutterSize ?? defaultParameters.gutterSize, + doubleSided: apiParams.doubleSided ?? defaultParameters.doubleSided, + duplexPass: apiParams.duplexPass ?? defaultParameters.duplexPass, + flipOnShortEdge: + apiParams.flipOnShortEdge ?? defaultParameters.flipOnShortEdge, +}); + // Static configuration that can be used by both the hook and automation executor export const buildBookletImpositionFormData = ( parameters: BookletImpositionParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("pagesPerSheet", parameters.pagesPerSheet.toString()); - formData.append("addBorder", parameters.addBorder.toString()); - formData.append("spineLocation", parameters.spineLocation); - formData.append("addGutter", parameters.addGutter.toString()); - formData.append("gutterSize", parameters.gutterSize.toString()); - formData.append("doubleSided", parameters.doubleSided.toString()); - formData.append("duplexPass", parameters.duplexPass); - formData.append("flipOnShortEdge", parameters.flipOnShortEdge.toString()); - return formData; -}; +): FormData => + objectToFormData(bookletImpositionToApiParams(parameters), { + fileInput: file, + }); // Static configuration object export const bookletImpositionOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildBookletImpositionFormData, + toApiParams: bookletImpositionToApiParams, + fromApiParams: bookletImpositionFromApiParams, operationType: "bookletImposition", - endpoint: "/api/v1/general/booklet-imposition", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/certSign/useCertSignOperation.ts b/frontend/editor/src/core/hooks/tools/certSign/useCertSignOperation.ts index 8488dec77a..9f4767044e 100644 --- a/frontend/editor/src/core/hooks/tools/certSign/useCertSignOperation.ts +++ b/frontend/editor/src/core/hooks/tools/certSign/useCertSignOperation.ts @@ -3,86 +3,146 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type FormDataFiles, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { CertSignParameters, defaultParameters, } from "@app/hooks/tools/certSign/useCertSignParameters"; +const ENDPOINT = "/api/v1/security/cert-sign" satisfies ToolEndpoint; +type CertSignApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the cert-sign request body. The keystore +// uploads (privateKeyFile, certFile, p12File, jksFile) are actual File uploads +// and are appended separately (see buildCertSignFormData); only the scalar +// fields are serialized here. +export const certSignToApiParams = ( + parameters: CertSignParameters, +): CertSignApiParams => { + // AUTO mode signs with the server certificate; no keystore/password is sent. + if (parameters.signMode === "AUTO") { + return withSignatureAppearance({ certType: "SERVER" }, parameters); + } + + const apiParams: CertSignApiParams = { + certType: parameters.certType as CertSignApiParams["certType"], + password: parameters.password, + }; + + // Non-file identifiers depend on the chosen certificate type. + switch (parameters.certType) { + case "WINDOWS_STORE": + if (parameters.alias) apiParams.alias = parameters.alias; + break; + case "PKCS11": + if (parameters.pkcs11LibraryPath) { + apiParams.pkcs11LibraryPath = parameters.pkcs11LibraryPath; + } + if (parameters.pkcs11Slot != null) { + apiParams.pkcs11Slot = parameters.pkcs11Slot; + } + if (parameters.alias) apiParams.alias = parameters.alias; + break; + } + + return withSignatureAppearance(apiParams, parameters); +}; + +// Signature appearance fields are only sent when the visible signature is +// enabled, matching the original form behaviour. +const withSignatureAppearance = ( + apiParams: CertSignApiParams, + parameters: CertSignParameters, +): CertSignApiParams => { + if (parameters.showSignature) { + apiParams.showSignature = true; + apiParams.reason = parameters.reason; + apiParams.location = parameters.location; + apiParams.name = parameters.name; + apiParams.pageNumber = parameters.pageNumber; + apiParams.showLogo = parameters.showLogo; + } + return apiParams; +}; + +// Select the keystore File uploads for the chosen certificate type. AUTO mode +// (server certificate) uploads no keystore. +const certSignFiles = (parameters: CertSignParameters): FormDataFiles => { + if (parameters.signMode === "AUTO") return {}; + + switch (parameters.certType) { + case "PEM": + return { + privateKeyFile: parameters.privateKeyFile, + certFile: parameters.certFile, + }; + case "PKCS12": + case "PFX": + return { p12File: parameters.p12File }; + case "JKS": + return { jksFile: parameters.jksFile }; + default: + return {}; + } +}; + +// Reconstruct the tool's UI parameters from a cert-sign request body, so a stored +// or AI-authored step can be re-rendered in the settings UI. Uploaded keystore +// files cannot be recovered from the request model. +export const certSignFromApiParams = ( + apiParams: CertSignApiParams, +): Partial => { + const result: Partial = { + signMode: apiParams.certType === "SERVER" ? "AUTO" : "MANUAL", + showSignature: apiParams.showSignature ?? defaultParameters.showSignature, + }; + + if (apiParams.certType !== "SERVER") { + result.certType = apiParams.certType; + result.password = apiParams.password ?? defaultParameters.password; + } + if (apiParams.alias !== undefined) result.alias = apiParams.alias; + if (apiParams.pkcs11LibraryPath !== undefined) { + result.pkcs11LibraryPath = apiParams.pkcs11LibraryPath; + } + if (apiParams.pkcs11Slot !== undefined) { + result.pkcs11Slot = apiParams.pkcs11Slot; + } + if (apiParams.reason !== undefined) result.reason = apiParams.reason; + if (apiParams.location !== undefined) result.location = apiParams.location; + if (apiParams.name !== undefined) result.name = apiParams.name; + if (apiParams.pageNumber !== undefined) { + result.pageNumber = apiParams.pageNumber; + } + if (apiParams.showLogo !== undefined) result.showLogo = apiParams.showLogo; + + return result; +}; + // Build form data for signing export const buildCertSignFormData = ( parameters: CertSignParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - // Handle sign mode - if (parameters.signMode === "AUTO") { - formData.append("certType", "SERVER"); - } else { - formData.append("certType", parameters.certType); - formData.append("password", parameters.password); - - // Add certificate files based on type (only for manual mode) - switch (parameters.certType) { - case "PEM": - if (parameters.privateKeyFile) { - formData.append("privateKeyFile", parameters.privateKeyFile); - } - if (parameters.certFile) { - formData.append("certFile", parameters.certFile); - } - break; - case "PKCS12": - case "PFX": - if (parameters.p12File) { - formData.append("p12File", parameters.p12File); - } - break; - case "JKS": - if (parameters.jksFile) { - formData.append("jksFile", parameters.jksFile); - } - break; - case "WINDOWS_STORE": - if (parameters.alias) { - formData.append("alias", parameters.alias); - } - break; - case "PKCS11": - if (parameters.pkcs11LibraryPath) { - formData.append("pkcs11LibraryPath", parameters.pkcs11LibraryPath); - } - if (parameters.pkcs11Slot != null) { - formData.append("pkcs11Slot", parameters.pkcs11Slot.toString()); - } - if (parameters.alias) { - formData.append("alias", parameters.alias); - } - break; - } - } - - // Add signature appearance options if enabled - if (parameters.showSignature) { - formData.append("showSignature", "true"); - formData.append("reason", parameters.reason); - formData.append("location", parameters.location); - formData.append("name", parameters.name); - formData.append("pageNumber", parameters.pageNumber.toString()); - formData.append("showLogo", parameters.showLogo.toString()); - } - - return formData; -}; +): FormData => + objectToFormData(certSignToApiParams(parameters), { + fileInput: file, + ...certSignFiles(parameters), + }); // Static configuration object export const certSignOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildCertSignFormData, + toApiParams: certSignToApiParams, + fromApiParams: certSignFromApiParams, operationType: "certSign", - endpoint: "/api/v1/security/cert-sign", + endpoint: ENDPOINT, multiFileEndpoint: false, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts b/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts index 2be13c3466..bad85097e2 100644 --- a/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts +++ b/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts @@ -1,7 +1,14 @@ import { describe, expect, test, vi, beforeEach } from "vitest"; import { renderHook } from "@testing-library/react"; -import { useChangePermissionsOperation } from "@app/hooks/tools/changePermissions/useChangePermissionsOperation"; -import type { ChangePermissionsParameters } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters"; +import { + changePermissionsFromApiParams, + changePermissionsToApiParams, + useChangePermissionsOperation, +} from "@app/hooks/tools/changePermissions/useChangePermissionsOperation"; +import { + type ChangePermissionsParameters, + defaultParameters, +} from "@app/hooks/tools/changePermissions/useChangePermissionsParameters"; // Mock the useToolOperation hook vi.mock("../shared/useToolOperation", async () => { @@ -141,3 +148,26 @@ describe("useChangePermissionsOperation", () => { expect(callArgs[property]).toBe(expectedValue); }); }); + +describe("changePermissions mappers", () => { + test("round-trips backend params", () => { + const configured: ChangePermissionsParameters = { + preventAssembly: true, + preventExtractContent: false, + preventExtractForAccessibility: true, + preventFillInForm: false, + preventModify: true, + preventModifyAnnotations: false, + preventPrinting: true, + preventPrintingFaithful: false, + }; + + const api = changePermissionsToApiParams(configured); + const roundTripped = changePermissionsToApiParams({ + ...defaultParameters, + ...changePermissionsFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts b/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts index 0500d86417..dd0c532706 100644 --- a/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts +++ b/frontend/editor/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts @@ -3,42 +3,81 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { ChangePermissionsParameters, defaultParameters, } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters"; -export const getFormData = (parameters: ChangePermissionsParameters) => { - if (!parameters) return []; - return Object.entries(parameters).map(([key, value]) => [ - key, - (value ?? false).toString(), - ]) as string[][]; -}; +// Change Permissions reuses the Add Password endpoint but sends only the +// prevent* subset of the request model (no password or keyLength). +const ENDPOINT = "/api/v1/security/add-password" satisfies ToolEndpoint; +type AddPasswordApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the add-password request body. Only the +// prevent* permission flags are sent; password and keyLength are optional on the +// model and left unset, so the endpoint changes permissions without encrypting. +export const changePermissionsToApiParams = ( + parameters: ChangePermissionsParameters, +): AddPasswordApiParams => ({ + preventAssembly: parameters.preventAssembly ?? false, + preventExtractContent: parameters.preventExtractContent ?? false, + preventExtractForAccessibility: + parameters.preventExtractForAccessibility ?? false, + preventFillInForm: parameters.preventFillInForm ?? false, + preventModify: parameters.preventModify ?? false, + preventModifyAnnotations: parameters.preventModifyAnnotations ?? false, + preventPrinting: parameters.preventPrinting ?? false, + preventPrintingFaithful: parameters.preventPrintingFaithful ?? false, +}); + +// Reconstruct the tool's UI parameters from an add-password request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const changePermissionsFromApiParams = ( + apiParams: AddPasswordApiParams, +): Partial => ({ + preventAssembly: + apiParams.preventAssembly ?? defaultParameters.preventAssembly, + preventExtractContent: + apiParams.preventExtractContent ?? defaultParameters.preventExtractContent, + preventExtractForAccessibility: + apiParams.preventExtractForAccessibility ?? + defaultParameters.preventExtractForAccessibility, + preventFillInForm: + apiParams.preventFillInForm ?? defaultParameters.preventFillInForm, + preventModify: apiParams.preventModify ?? defaultParameters.preventModify, + preventModifyAnnotations: + apiParams.preventModifyAnnotations ?? + defaultParameters.preventModifyAnnotations, + preventPrinting: + apiParams.preventPrinting ?? defaultParameters.preventPrinting, + preventPrintingFaithful: + apiParams.preventPrintingFaithful ?? + defaultParameters.preventPrintingFaithful, +}); // Static function that can be used by both the hook and automation executor export const buildChangePermissionsFormData = ( parameters: ChangePermissionsParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - // Add all permission parameters - getFormData(parameters).forEach(([key, value]) => { - formData.append(key, value); +): FormData => + objectToFormData(changePermissionsToApiParams(parameters), { + fileInput: file, }); - return formData; -}; - // Static configuration object export const changePermissionsOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildChangePermissionsFormData, + toApiParams: changePermissionsToApiParams, + fromApiParams: changePermissionsFromApiParams, operationType: "changePermissions", - endpoint: "/api/v1/security/add-password", // Change Permissions is a fake endpoint for the Add Password tool + endpoint: ENDPOINT, // Change Permissions is a fake endpoint for the Add Password tool defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.test.ts b/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.test.ts new file mode 100644 index 0000000000..4118eaf7d6 --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.test.ts @@ -0,0 +1,127 @@ +import { describe, expect, test } from "vitest"; +import { + buildCompressFormData, + compressFromApiParams, + compressToApiParams, +} from "@app/hooks/tools/compress/useCompressOperation"; +import { + CompressParameters, + defaultParameters, +} from "@app/hooks/tools/compress/useCompressParameters"; + +const params = ( + overrides: Partial, +): CompressParameters => ({ + ...defaultParameters, + ...overrides, +}); + +describe("compressToApiParams", () => { + test("quality mode sends optimizeLevel and no expectedOutputSize", () => { + const api = compressToApiParams( + params({ compressionMethod: "quality", compressionLevel: 7 }), + ); + + expect(api.optimizeLevel).toBe(7); + expect(api.expectedOutputSize).toBeUndefined(); + }); + + test("file-size mode sends expectedOutputSize (level still present for the spec)", () => { + const api = compressToApiParams( + params({ + compressionMethod: "filesize", + fileSizeValue: "100", + fileSizeUnit: "MB", + }), + ); + + // optimizeLevel is required by the backend model; the backend recomputes it + // from the target size, so its presence is harmless. + expect(api.optimizeLevel).toBeDefined(); + expect(api.expectedOutputSize).toBe("100MB"); + }); + + test("omits expectedOutputSize when file-size value is empty", () => { + const api = compressToApiParams( + params({ compressionMethod: "filesize", fileSizeValue: "" }), + ); + + expect(api.expectedOutputSize).toBeUndefined(); + }); + + test("line-art thresholds only included when line art is enabled", () => { + const off = compressToApiParams(params({ lineArt: false })); + expect(off.lineArtThreshold).toBeUndefined(); + expect(off.lineArtEdgeLevel).toBeUndefined(); + + const on = compressToApiParams( + params({ lineArt: true, lineArtThreshold: 40, lineArtEdgeLevel: 2 }), + ); + expect(on.lineArtThreshold).toBe(40); + expect(on.lineArtEdgeLevel).toBe(2); + }); + + test("defaults produce the required optimizeLevel field", () => { + const api = compressToApiParams(defaultParameters); + expect(api.optimizeLevel).toBe(defaultParameters.compressionLevel); + }); +}); + +describe("compressFromApiParams", () => { + test("expectedOutputSize maps back to file-size mode and its value/unit", () => { + const ui = compressFromApiParams({ + optimizeLevel: 5, + expectedOutputSize: "25KB", + }); + + expect(ui.compressionMethod).toBe("filesize"); + expect(ui.fileSizeValue).toBe("25"); + expect(ui.fileSizeUnit).toBe("KB"); + }); + + test("no expectedOutputSize maps back to quality mode", () => { + const ui = compressFromApiParams({ optimizeLevel: 8 }); + + expect(ui.compressionMethod).toBe("quality"); + expect(ui.compressionLevel).toBe(8); + }); +}); + +describe("compress round-trip", () => { + test.each>([ + { compressionMethod: "quality", compressionLevel: 3, grayscale: true }, + { + compressionMethod: "filesize", + fileSizeValue: "10", + fileSizeUnit: "MB", + linearize: true, + }, + { + compressionMethod: "quality", + lineArt: true, + lineArtThreshold: 60, + lineArtEdgeLevel: 3, + }, + ])("toApiParams(fromApiParams(x)) reproduces x %o", (overrides) => { + const api = compressToApiParams(params(overrides)); + const roundTripped = compressToApiParams( + params(compressFromApiParams(api)), + ); + + expect(roundTripped).toEqual(api); + }); +}); + +describe("buildCompressFormData", () => { + test("appends the file and serialized parameters", () => { + const file = new File(["x"], "test.pdf", { type: "application/pdf" }); + const formData = buildCompressFormData( + params({ compressionMethod: "quality", compressionLevel: 6 }), + file, + ); + + expect(formData.get("fileInput")).toBe(file); + expect(formData.get("optimizeLevel")).toBe("6"); + expect(formData.get("grayscale")).toBe("false"); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.ts b/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.ts index 6efa24e5d3..f62c981879 100644 --- a/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.ts +++ b/frontend/editor/src/core/hooks/tools/compress/useCompressOperation.ts @@ -3,48 +3,100 @@ import { useToolOperation, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { CompressParameters, defaultParameters, } from "@app/hooks/tools/compress/useCompressParameters"; +const ENDPOINT = "/api/v1/misc/compress-pdf" satisfies ToolEndpoint; +type CompressApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the compress-pdf request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const compressToApiParams = ( + parameters: CompressParameters, +): CompressApiParams => { + const apiParams: CompressApiParams = { + // compressionLevel is validated to 1-9 by the parameters hook. It is always + // sent: in file-size mode the backend recomputes the level from the target + // size (autoMode in CompressController), so this value only takes effect in + // quality mode. + optimizeLevel: + parameters.compressionLevel as CompressApiParams["optimizeLevel"], + grayscale: parameters.grayscale ?? false, + lineArt: parameters.lineArt, + linearize: parameters.linearize, + }; + + if (parameters.compressionMethod === "filesize" && parameters.fileSizeValue) { + apiParams.expectedOutputSize = `${parameters.fileSizeValue}${parameters.fileSizeUnit}`; + } + + if (parameters.lineArt) { + apiParams.lineArtThreshold = parameters.lineArtThreshold; + apiParams.lineArtEdgeLevel = parameters.lineArtEdgeLevel; + } + + return apiParams; +}; + +// Reconstruct the tool's UI parameters from a compress-pdf request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const compressFromApiParams = ( + apiParams: CompressApiParams, +): Partial => { + const result: Partial = { + compressionLevel: apiParams.optimizeLevel, + grayscale: apiParams.grayscale ?? defaultParameters.grayscale, + lineArt: apiParams.lineArt ?? defaultParameters.lineArt, + linearize: apiParams.linearize ?? defaultParameters.linearize, + }; + + if (apiParams.lineArtThreshold !== undefined) { + result.lineArtThreshold = apiParams.lineArtThreshold; + } + if (apiParams.lineArtEdgeLevel !== undefined) { + result.lineArtEdgeLevel = apiParams.lineArtEdgeLevel; + } + + if (apiParams.expectedOutputSize) { + result.compressionMethod = "filesize"; + const match = /^(\d+(?:\.\d+)?)(KB|MB)$/i.exec( + apiParams.expectedOutputSize, + ); + if (match) { + result.fileSizeValue = match[1]; + result.fileSizeUnit = match[2].toUpperCase() as "KB" | "MB"; + } + } else { + result.compressionMethod = "quality"; + } + + return result; +}; + // Static configuration that can be used by both the hook and automation executor export const buildCompressFormData = ( parameters: CompressParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - if (parameters.compressionMethod === "quality") { - formData.append("optimizeLevel", parameters.compressionLevel.toString()); - } else { - // File size method - const fileSize = parameters.fileSizeValue - ? `${parameters.fileSizeValue}${parameters.fileSizeUnit}` - : ""; - if (fileSize) { - formData.append("expectedOutputSize", fileSize); - } - } - - formData.append("grayscale", (parameters.grayscale ?? false).toString()); - formData.append("lineArt", parameters.lineArt.toString()); - formData.append("linearize", parameters.linearize.toString()); - if (parameters.lineArt) { - formData.append("lineArtThreshold", parameters.lineArtThreshold.toString()); - formData.append("lineArtEdgeLevel", parameters.lineArtEdgeLevel.toString()); - } - return formData; -}; +): FormData => + objectToFormData(compressToApiParams(parameters), { fileInput: file }); // Static configuration object export const compressOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildCompressFormData, + toApiParams: compressToApiParams, + fromApiParams: compressFromApiParams, operationType: "compress", - endpoint: "/api/v1/misc/compress-pdf", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.test.ts b/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.test.ts new file mode 100644 index 0000000000..eb03607d54 --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.test.ts @@ -0,0 +1,42 @@ +import { describe, expect, test } from "vitest"; +import { renderHook, act } from "@testing-library/react"; +import { useCompressParameters } from "@app/hooks/tools/compress/useCompressParameters"; + +describe("useCompressParameters", () => { + test("defaults (quality mode) validate", () => { + const { result } = renderHook(() => useCompressParameters()); + + expect(result.current.validateParameters()).toBe(true); + }); + + test("compressionLevel outside 1-9 is invalid", () => { + const { result } = renderHook(() => useCompressParameters()); + + act(() => { + result.current.updateParameter("compressionLevel", 0); + }); + expect(result.current.validateParameters()).toBe(false); + + act(() => { + result.current.updateParameter("compressionLevel", 10); + }); + expect(result.current.validateParameters()).toBe(false); + }); + + test("filesize mode requires a target size", () => { + const { result } = renderHook(() => useCompressParameters()); + + // Filesize mode with no size entered must not validate: otherwise the + // request omits expectedOutputSize and the backend silently falls back to a + // quality compression. + act(() => { + result.current.updateParameter("compressionMethod", "filesize"); + }); + expect(result.current.validateParameters()).toBe(false); + + act(() => { + result.current.updateParameter("fileSizeValue", "5"); + }); + expect(result.current.validateParameters()).toBe(true); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.ts b/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.ts index a6e9bfe631..0500b8c77c 100644 --- a/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.ts +++ b/frontend/editor/src/core/hooks/tools/compress/useCompressParameters.ts @@ -37,8 +37,15 @@ export const useCompressParameters = (): CompressParametersHook => { defaultParameters, endpointName: "compress-pdf", validateFn: (params) => { - // For compression, we only need to validate that compression level is within range - return params.compressionLevel >= 1 && params.compressionLevel <= 9; + if (params.compressionLevel < 1 || params.compressionLevel > 9) { + return false; + } + // Filesize mode needs a target size; without one the request omits + // expectedOutputSize and the backend silently does a quality compression. + if (params.compressionMethod === "filesize") { + return params.fileSizeValue.trim() !== ""; + } + return true; }, }); }; diff --git a/frontend/editor/src/core/hooks/tools/crop/useCropOperation.test.ts b/frontend/editor/src/core/hooks/tools/crop/useCropOperation.test.ts new file mode 100644 index 0000000000..806ad40af0 --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/crop/useCropOperation.test.ts @@ -0,0 +1,32 @@ +import { describe, expect, test } from "vitest"; +import { + cropFromApiParams, + cropToApiParams, +} from "@app/hooks/tools/crop/useCropOperation"; +import { + CropParameters, + defaultParameters, +} from "@app/hooks/tools/crop/useCropParameters"; + +describe("crop mappers", () => { + // With autoCrop on the coordinates aren't sent, so they must not resurface on + // the round trip; with autoCrop off the rectangle must survive intact. + test.each<{ label: string; overrides: Partial }>([ + { label: "autoCrop on", overrides: { autoCrop: true } }, + { + label: "autoCrop off with a rectangle", + overrides: { + autoCrop: false, + cropArea: { x: 10, y: 20, width: 300, height: 400 }, + }, + }, + ])("round-trips backend params ($label)", ({ overrides }) => { + const api = cropToApiParams({ ...defaultParameters, ...overrides }); + const roundTripped = cropToApiParams({ + ...defaultParameters, + ...cropFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/crop/useCropOperation.ts b/frontend/editor/src/core/hooks/tools/crop/useCropOperation.ts index 67d72c8df0..24dc35daa3 100644 --- a/frontend/editor/src/core/hooks/tools/crop/useCropOperation.ts +++ b/frontend/editor/src/core/hooks/tools/crop/useCropOperation.ts @@ -3,40 +3,69 @@ import { useToolOperation, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { CropParameters, defaultParameters, } from "@app/hooks/tools/crop/useCropParameters"; +import { DEFAULT_CROP_AREA } from "@app/constants/cropConstants"; + +const ENDPOINT = "/api/v1/general/crop" satisfies ToolEndpoint; +type CropApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the crop request body. The return type +// is the generated backend model, so a spec change that renames or drops a +// field breaks the build here. +export const cropToApiParams = (parameters: CropParameters): CropApiParams => { + const apiParams: CropApiParams = { + autoCrop: parameters.autoCrop, + }; + + if (!parameters.autoCrop) { + const cropArea = parameters.cropArea; + apiParams.x = cropArea.x; + apiParams.y = cropArea.y; + apiParams.width = cropArea.width; + apiParams.height = cropArea.height; + } + + return apiParams; +}; + +// Reconstruct the tool's UI parameters from a crop request body, so a stored or +// AI-authored step can be re-rendered in the settings UI. +export const cropFromApiParams = ( + apiParams: CropApiParams, +): Partial => ({ + autoCrop: apiParams.autoCrop ?? defaultParameters.autoCrop, + cropArea: { + x: apiParams.x ?? DEFAULT_CROP_AREA.x, + y: apiParams.y ?? DEFAULT_CROP_AREA.y, + width: apiParams.width ?? DEFAULT_CROP_AREA.width, + height: apiParams.height ?? DEFAULT_CROP_AREA.height, + }, +}); // Static configuration that can be used by both the hook and automation executor export const buildCropFormData = ( parameters: CropParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - if (!parameters.autoCrop) { - const cropArea = parameters.cropArea; - - formData.append("x", cropArea.x.toString()); - formData.append("y", cropArea.y.toString()); - formData.append("width", cropArea.width.toString()); - formData.append("height", cropArea.height.toString()); - } - - formData.append("autoCrop", parameters.autoCrop.toString()); - - return formData; -}; +): FormData => + objectToFormData(cropToApiParams(parameters), { fileInput: file }); // Static configuration object export const cropOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildCropFormData, + toApiParams: cropToApiParams, + fromApiParams: cropFromApiParams, operationType: "crop", - endpoint: "/api/v1/general/crop", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.test.ts b/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.test.ts new file mode 100644 index 0000000000..288beed847 --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.test.ts @@ -0,0 +1,46 @@ +import { describe, test, expect } from "vitest"; +import { expectConsole } from "@app/tests/failOnConsole"; +import { editTableOfContentsFromApiParams } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsOperation"; + +describe("editTableOfContentsFromApiParams", () => { + test("passes replaceExisting through", () => { + expect(editTableOfContentsFromApiParams({ replaceExisting: true })).toEqual( + { + replaceExisting: true, + }, + ); + }); + + test("hydrates a valid (empty) bookmark array", () => { + expect( + editTableOfContentsFromApiParams({ + replaceExisting: false, + bookmarkData: "[]", + }), + ).toEqual({ replaceExisting: false, bookmarks: [] }); + }); + + test.each(["", "not json", "{truncated"])( + "does not throw on malformed bookmarkData (%j); leaves bookmarks unset", + (bookmarkData) => { + expectConsole.warn(/could not parse bookmarkData/); + const result = editTableOfContentsFromApiParams({ + replaceExisting: true, + bookmarkData, + }); + expect(result).toEqual({ replaceExisting: true }); + expect(result).not.toHaveProperty("bookmarks"); + }, + ); + + test.each(["{}", "null", "42"])( + "ignores non-array bookmarkData (%j) without throwing", + (bookmarkData) => { + const result = editTableOfContentsFromApiParams({ + replaceExisting: false, + bookmarkData, + }); + expect(result).not.toHaveProperty("bookmarks"); + }, + ); +}); diff --git a/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts b/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts index 7f94008503..c395ed0521 100644 --- a/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts +++ b/frontend/editor/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts @@ -4,30 +4,74 @@ import { type ToolOperationConfig, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { EditTableOfContentsParameters } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsParameters"; -import { serializeBookmarkNodes } from "@app/utils/editTableOfContents"; +import { + hydrateBookmarkPayload, + serializeBookmarkNodes, + type BookmarkPayload, +} from "@app/utils/editTableOfContents"; + +const ENDPOINT = + "/api/v1/general/edit-table-of-contents" satisfies ToolEndpoint; +type EditTableOfContentsApiParams = ToolApiParams[typeof ENDPOINT]; + +// bookmarkData is a string in the backend model even though it carries JSON, so +// the serialized bookmark tree is JSON-encoded into that string here. +export const editTableOfContentsToApiParams = ( + parameters: EditTableOfContentsParameters, +): EditTableOfContentsApiParams => ({ + replaceExisting: parameters.replaceExisting, + bookmarkData: JSON.stringify(serializeBookmarkNodes(parameters.bookmarks)), +}); + +export const editTableOfContentsFromApiParams = ( + apiParams: EditTableOfContentsApiParams, +): Partial => { + const result: Partial = { + replaceExisting: apiParams.replaceExisting, + }; + + // bookmarkData carries JSON in a string field, so a stored step + // could hold malformed or non-array content. Degrade to leaving bookmarks unset. + if (apiParams.bookmarkData !== undefined) { + try { + const payload = JSON.parse(apiParams.bookmarkData) as BookmarkPayload[]; + if (Array.isArray(payload)) { + result.bookmarks = hydrateBookmarkPayload(payload); + } + } catch (error) { + console.warn( + `editTableOfContents: could not parse bookmarkData; ` + + `leaving bookmarks unset. Error: ${error}`, + ); + } + } + + return result; +}; const buildFormData = ( parameters: EditTableOfContentsParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("replaceExisting", String(parameters.replaceExisting)); - formData.append( - "bookmarkData", - JSON.stringify(serializeBookmarkNodes(parameters.bookmarks)), - ); - return formData; -}; +): FormData => + objectToFormData(editTableOfContentsToApiParams(parameters), { + fileInput: file, + }); export const editTableOfContentsOperationConfig: ToolOperationConfig = { toolType: ToolType.singleFile, operationType: "editTableOfContents", - endpoint: "/api/v1/general/edit-table-of-contents", + endpoint: ENDPOINT, buildFormData, + toApiParams: editTableOfContentsToApiParams, + fromApiParams: editTableOfContentsFromApiParams, }; export const useEditTableOfContentsOperation = () => { diff --git a/frontend/editor/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts b/frontend/editor/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts index e52a9d6f2e..4f43ddf3ec 100644 --- a/frontend/editor/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts +++ b/frontend/editor/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts @@ -4,6 +4,11 @@ import { useToolOperation, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { ExtractImagesParameters, @@ -11,24 +16,38 @@ import { } from "@app/hooks/tools/extractImages/useExtractImagesParameters"; import { useToolResources } from "@app/hooks/tools/shared/useToolResources"; +const ENDPOINT = "/api/v1/misc/extract-images" satisfies ToolEndpoint; +type ExtractImagesApiParams = ToolApiParams[typeof ENDPOINT]; + +// The frontend param type uses "jpg" while the backend model uses "jpeg"; the +// wire value is preserved verbatim (as the pre-mapper code did) via the cast. +export const extractImagesToApiParams = ( + parameters: ExtractImagesParameters, +): ExtractImagesApiParams => ({ + format: parameters.format as ExtractImagesApiParams["format"], +}); + +export const extractImagesFromApiParams = ( + apiParams: ExtractImagesApiParams, +): Partial => ({ + format: apiParams.format as ExtractImagesParameters["format"], +}); + // Static configuration that can be used by both the hook and automation executor export const buildExtractImagesFormData = ( parameters: ExtractImagesParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("format", parameters.format); - // formData.append("allowDuplicates", parameters.allowDuplicates.toString()); - return formData; -}; +): FormData => + objectToFormData(extractImagesToApiParams(parameters), { fileInput: file }); // Static configuration object (without response handler - will be added in hook) export const extractImagesOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildExtractImagesFormData, + toApiParams: extractImagesToApiParams, + fromApiParams: extractImagesFromApiParams, operationType: "extractImages", - endpoint: "/api/v1/misc/extract-images", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/flatten/useFlattenOperation.ts b/frontend/editor/src/core/hooks/tools/flatten/useFlattenOperation.ts index 9138b824ed..7e01678e73 100644 --- a/frontend/editor/src/core/hooks/tools/flatten/useFlattenOperation.ts +++ b/frontend/editor/src/core/hooks/tools/flatten/useFlattenOperation.ts @@ -3,32 +3,69 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { FlattenParameters, defaultParameters, } from "@app/hooks/tools/flatten/useFlattenParameters"; +const ENDPOINT = "/api/v1/misc/flatten" satisfies ToolEndpoint; +type FlattenApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the flatten request body. The return +// type is the generated backend model, so a spec change that renames or drops a +// field breaks the build here. +export const flattenToApiParams = ( + parameters: FlattenParameters, +): FlattenApiParams => { + const apiParams: FlattenApiParams = { + flattenOnlyForms: parameters.flattenOnlyForms, + }; + + if (parameters.renderDpi != null) { + apiParams.renderDpi = parameters.renderDpi; + } + + return apiParams; +}; + +// Reconstruct the tool's UI parameters from a flatten request body, so a stored +// or AI-authored step can be re-rendered in the settings UI. +export const flattenFromApiParams = ( + apiParams: FlattenApiParams, +): Partial => { + const result: Partial = { + flattenOnlyForms: + apiParams.flattenOnlyForms ?? defaultParameters.flattenOnlyForms, + }; + + if (apiParams.renderDpi != null) { + result.renderDpi = apiParams.renderDpi; + } + + return result; +}; + // Static function that can be used by both the hook and automation executor export const buildFlattenFormData = ( parameters: FlattenParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("flattenOnlyForms", parameters.flattenOnlyForms.toString()); - if (parameters.renderDpi != null) { - formData.append("renderDpi", parameters.renderDpi.toString()); - } - return formData; -}; +): FormData => + objectToFormData(flattenToApiParams(parameters), { fileInput: file }); // Static configuration object export const flattenOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildFlattenFormData, + toApiParams: flattenToApiParams, + fromApiParams: flattenFromApiParams, operationType: "flatten", - endpoint: "/api/v1/misc/flatten", + endpoint: ENDPOINT, multiFileEndpoint: false, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.test.ts b/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.test.ts index c637f2fe53..21817ddfcd 100644 --- a/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.test.ts +++ b/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.test.ts @@ -29,6 +29,10 @@ import { ToolOperationHook, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + mergeFromApiParams, + mergeToApiParams, +} from "@app/hooks/tools/merge/useMergeOperation"; describe("useMergeOperation", () => { const mockUseToolOperation = vi.mocked(useToolOperation); @@ -128,4 +132,60 @@ describe("useMergeOperation", () => { expect(formData2.get("removeCertSign")).toBe("true"); expect(formData2.get("generateToc")).toBe("true"); }); + + test("should include client file IDs derived from the files", () => { + renderHook(() => useMergeOperation()); + + const config = getToolConfig(); + const mockFiles = [ + new File(["a"], "a.pdf", { type: "application/pdf" }), + new File(["b"], "b.pdf", { type: "application/pdf" }), + ]; + const formData = config.buildFormData( + { removeDigitalSignature: false, generateTableOfContents: false }, + mockFiles, + ); + + expect(formData.get("clientFileIds")).toBe( + JSON.stringify(["a.pdf", "b.pdf"]), + ); + }); +}); + +describe("merge mappers", () => { + test("toApiParams renames UI fields to the backend request model", () => { + expect( + mergeToApiParams({ + removeDigitalSignature: true, + generateTableOfContents: false, + }), + ).toEqual({ + sortType: "orderProvided", + removeCertSign: true, + generateToc: false, + }); + }); + + test("fromApiParams maps the backend request model back to UI fields", () => { + expect( + mergeFromApiParams({ removeCertSign: false, generateToc: true }), + ).toEqual({ + removeDigitalSignature: false, + generateTableOfContents: true, + }); + }); + + test("round-trips backend params", () => { + const api = mergeToApiParams({ + removeDigitalSignature: true, + generateTableOfContents: true, + }); + const roundTripped = mergeToApiParams({ + removeDigitalSignature: false, + generateTableOfContents: false, + ...mergeFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); }); diff --git a/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.ts b/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.ts index 44cee9e134..9b43f35fcd 100644 --- a/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.ts +++ b/frontend/editor/src/core/hooks/tools/merge/useMergeOperation.ts @@ -4,36 +4,54 @@ import { ToolOperationConfig, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { MergeParameters, defaultParameters, } from "@app/hooks/tools/merge/useMergeParameters"; +const ENDPOINT = "/api/v1/general/merge-pdfs" satisfies ToolEndpoint; +type MergeApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the merge-pdfs request body. File-derived +// fields (clientFileIds) are appended by buildFormData, not here. +export const mergeToApiParams = ( + parameters: MergeParameters, +): MergeApiParams => ({ + // The UI owns file ordering, so the backend is always told to keep it. + sortType: "orderProvided", + removeCertSign: parameters.removeDigitalSignature ?? false, + generateToc: parameters.generateTableOfContents ?? false, +}); + +// Reconstruct the tool's UI parameters from a merge-pdfs request body. +export const mergeFromApiParams = ( + apiParams: MergeApiParams, +): Partial => ({ + removeDigitalSignature: + apiParams.removeCertSign ?? defaultParameters.removeDigitalSignature, + generateTableOfContents: + apiParams.generateToc ?? defaultParameters.generateTableOfContents, +}); + const buildFormData = ( parameters: MergeParameters, files: File[], ): FormData => { - const formData = new FormData(); - - files.forEach((file) => { - formData.append("fileInput", file); + const formData = objectToFormData(mergeToApiParams(parameters), { + fileInput: files, }); - // Provide stable client file IDs (align with files order) + // Stable client file IDs, aligned with the fileInput order. Derived from the + // files themselves, so it belongs to the file-appending step. const clientIds: string[] = files.map((f) => String((f as { fileId?: string }).fileId || f.name), ); formData.append("clientFileIds", JSON.stringify(clientIds)); - formData.append("sortType", "orderProvided"); // Always use orderProvided since UI handles sorting - formData.append( - "removeCertSign", - (parameters.removeDigitalSignature ?? false).toString(), - ); - formData.append( - "generateToc", - (parameters.generateTableOfContents ?? false).toString(), - ); - return formData; }; @@ -41,8 +59,10 @@ const buildFormData = ( export const mergeOperationConfig: ToolOperationConfig = { toolType: ToolType.multiFile, buildFormData, + toApiParams: mergeToApiParams, + fromApiParams: mergeFromApiParams, operationType: "merge", - endpoint: "/api/v1/general/merge-pdfs", + endpoint: ENDPOINT, filePrefix: "merged_", defaultParameters, }; diff --git a/frontend/editor/src/core/hooks/tools/ocr/useOCROperation.ts b/frontend/editor/src/core/hooks/tools/ocr/useOCROperation.ts index b7d6d56564..e9b1e92b2d 100644 --- a/frontend/editor/src/core/hooks/tools/ocr/useOCROperation.ts +++ b/frontend/editor/src/core/hooks/tools/ocr/useOCROperation.ts @@ -9,9 +9,17 @@ import { ToolOperationConfig, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { useToolResources } from "@app/hooks/tools/shared/useToolResources"; +const ENDPOINT = "/api/v1/misc/ocr-pdf" satisfies ToolEndpoint; +type OCRApiParams = ToolApiParams[typeof ENDPOINT]; + // Helper: get MIME type based on file extension function getMimeType(filename: string): string { const ext = filename.toLowerCase().split(".").pop(); @@ -48,28 +56,49 @@ function stripExt(name: string): string { return i > 0 ? name.slice(0, i) : name; } +// Convert the tool's UI parameters into the ocr-pdf request body. The return +// type is the generated backend model, so a spec change that renames or drops a +// field breaks the build here. +export const ocrToApiParams = (parameters: OCRParameters): OCRApiParams => { + const options = parameters.additionalOptions || []; + return { + languages: parameters.languages, + ocrType: parameters.ocrType as OCRApiParams["ocrType"], + ocrRenderType: parameters.ocrRenderType as OCRApiParams["ocrRenderType"], + sidecar: options.includes("sidecar"), + deskew: options.includes("deskew"), + clean: options.includes("clean"), + cleanFinal: options.includes("cleanFinal"), + removeImagesAfter: options.includes("removeImagesAfter"), + }; +}; + +// Reconstruct the tool's UI parameters from an ocr-pdf request body, so a stored +// or AI-authored step can be re-rendered in the settings UI. +export const ocrFromApiParams = ( + apiParams: OCRApiParams, +): Partial => { + const additionalOptions: string[] = []; + if (apiParams.sidecar) additionalOptions.push("sidecar"); + if (apiParams.deskew) additionalOptions.push("deskew"); + if (apiParams.clean) additionalOptions.push("clean"); + if (apiParams.cleanFinal) additionalOptions.push("cleanFinal"); + if (apiParams.removeImagesAfter) additionalOptions.push("removeImagesAfter"); + + return { + languages: apiParams.languages ?? defaultParameters.languages, + ocrType: apiParams.ocrType, + ocrRenderType: apiParams.ocrRenderType ?? defaultParameters.ocrRenderType, + additionalOptions, + }; +}; + // Static function that can be used by both the hook and automation executor export const buildOCRFormData = ( parameters: OCRParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - parameters.languages.forEach((lang) => formData.append("languages", lang)); - formData.append("ocrType", parameters.ocrType); - formData.append("ocrRenderType", parameters.ocrRenderType); - - const options = parameters.additionalOptions || []; - formData.append("sidecar", options.includes("sidecar").toString()); - formData.append("deskew", options.includes("deskew").toString()); - formData.append("clean", options.includes("clean").toString()); - formData.append("cleanFinal", options.includes("cleanFinal").toString()); - formData.append( - "removeImagesAfter", - options.includes("removeImagesAfter").toString(), - ); - return formData; -}; +): FormData => + objectToFormData(ocrToApiParams(parameters), { fileInput: file }); // Static response handler for OCR - can be used by automation executor export const ocrResponseHandler = async ( @@ -125,8 +154,10 @@ export const ocrResponseHandler = async ( export const ocrOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildOCRFormData, + toApiParams: ocrToApiParams, + fromApiParams: ocrFromApiParams, operationType: "ocr", - endpoint: "/api/v1/misc/ocr-pdf", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts b/frontend/editor/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts index 02b72e9e1d..448d70346d 100644 --- a/frontend/editor/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts +++ b/frontend/editor/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts @@ -4,41 +4,69 @@ import { ToolType, type ToolOperationConfig, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; -import { type OverlayPdfsParameters } from "@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters"; +import { + type OverlayPdfsParameters, + defaultParameters, +} from "@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters"; + +const ENDPOINT = "/api/v1/general/overlay-pdfs" satisfies ToolEndpoint; +type OverlayPdfsApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the overlay-pdfs request body. The +// overlay documents are actual File uploads sent as repeated `overlayFiles` +// fields (see buildFormData), so `overlayFiles` here is an empty array: the real +// uploads are appended separately and an empty array serializes to no fields. +export const overlayPdfsToApiParams = ( + parameters: OverlayPdfsParameters, +): OverlayPdfsApiParams => { + const apiParams: OverlayPdfsApiParams = { + overlayFiles: [], + overlayMode: parameters.overlayMode, + overlayPosition: parameters.overlayPosition, + }; + + // Counts are only relevant for FixedRepeatOverlay; the server accepts repeated + // 'counts' fields. + if (parameters.overlayMode === "FixedRepeatOverlay") { + apiParams.counts = parameters.counts || []; + } + + return apiParams; +}; + +// Reconstruct the tool's UI parameters from an overlay-pdfs request body. The +// overlay File uploads cannot be recovered from the request model. +export const overlayPdfsFromApiParams = ( + apiParams: OverlayPdfsApiParams, +): Partial => ({ + overlayMode: apiParams.overlayMode, + overlayPosition: apiParams.overlayPosition, + counts: apiParams.counts ?? defaultParameters.counts, +}); const buildFormData = ( parameters: OverlayPdfsParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - // Overlay files - for (const overlay of parameters.overlayFiles || []) { - formData.append("overlayFiles", overlay); - } - - // Mode and position - formData.append("overlayMode", parameters.overlayMode); - formData.append("overlayPosition", String(parameters.overlayPosition)); - - // Counts (only relevant for FixedRepeatOverlay, server accepts repeated 'counts' fields) - if (parameters.overlayMode === "FixedRepeatOverlay") { - for (const count of parameters.counts || []) { - formData.append("counts", String(count)); - } - } - - return formData; -}; +): FormData => + objectToFormData(overlayPdfsToApiParams(parameters), { + fileInput: file, + overlayFiles: parameters.overlayFiles || [], + }); export const overlayPdfsOperationConfig: ToolOperationConfig = { toolType: ToolType.singleFile, buildFormData, + toApiParams: overlayPdfsToApiParams, + fromApiParams: overlayPdfsFromApiParams, operationType: "overlayPdfs", - endpoint: "/api/v1/general/overlay-pdfs", + endpoint: ENDPOINT, }; export const useOverlayPdfsOperation = () => { diff --git a/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.test.ts b/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.test.ts new file mode 100644 index 0000000000..874fdff811 --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.test.ts @@ -0,0 +1,24 @@ +import { describe, expect, test } from "vitest"; +import { + pageLayoutFromApiParams, + pageLayoutToApiParams, +} from "@app/hooks/tools/pageLayout/usePageLayoutOperation"; +import { + PageLayoutParameters, + defaultParameters, +} from "@app/hooks/tools/pageLayout/usePageLayoutParameters"; + +describe("pageLayout mappers", () => { + test.each>([ + {}, + { addBorder: true, borderWidth: 3, innerMargin: 5, topMargin: 2 }, + ])("round-trips backend params for %o", (overrides) => { + const api = pageLayoutToApiParams({ ...defaultParameters, ...overrides }); + const roundTripped = pageLayoutToApiParams({ + ...defaultParameters, + ...pageLayoutFromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts b/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts index b168f15f6f..dce2101cd4 100644 --- a/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts +++ b/frontend/editor/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts @@ -3,40 +3,77 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { PageLayoutParameters, defaultParameters, } from "@app/hooks/tools/pageLayout/usePageLayoutParameters"; +const ENDPOINT = "/api/v1/general/multi-page-layout" satisfies ToolEndpoint; +type PageLayoutApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the multi-page-layout request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const pageLayoutToApiParams = ( + parameters: PageLayoutParameters, +): PageLayoutApiParams => ({ + mode: parameters.mode, + pagesPerSheet: + parameters.pagesPerSheet as PageLayoutApiParams["pagesPerSheet"], + rows: parameters.rows, + cols: parameters.cols, + orientation: parameters.orientation, + arrangement: parameters.arrangement, + readingDirection: parameters.readingDirection, + innerMargin: parameters.innerMargin ?? 0, + topMargin: parameters.topMargin ?? 0, + bottomMargin: parameters.bottomMargin ?? 0, + leftMargin: parameters.leftMargin ?? 0, + rightMargin: parameters.rightMargin ?? 0, + addBorder: parameters.addBorder, + borderWidth: parameters.borderWidth ?? 1, +}); + +// Reconstruct the tool's UI parameters from a multi-page-layout request body, so +// a stored or AI-authored step can be re-rendered in the settings UI. +export const pageLayoutFromApiParams = ( + apiParams: PageLayoutApiParams, +): Partial => ({ + mode: apiParams.mode, + pagesPerSheet: apiParams.pagesPerSheet, + rows: apiParams.rows, + cols: apiParams.cols, + orientation: apiParams.orientation, + arrangement: apiParams.arrangement, + readingDirection: apiParams.readingDirection, + innerMargin: apiParams.innerMargin, + topMargin: apiParams.topMargin, + bottomMargin: apiParams.bottomMargin, + leftMargin: apiParams.leftMargin, + rightMargin: apiParams.rightMargin, + addBorder: apiParams.addBorder, + borderWidth: apiParams.borderWidth, +}); + export const buildPageLayoutFormData = ( parameters: PageLayoutParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("mode", String(parameters.mode)); - formData.append("pagesPerSheet", String(parameters.pagesPerSheet)); - formData.append("rows", String(parameters.rows)); - formData.append("cols", String(parameters.cols)); - formData.append("orientation", String(parameters.orientation)); - formData.append("arrangement", String(parameters.arrangement)); - formData.append("readingDirection", String(parameters.readingDirection)); - formData.append("innerMargin", String(parameters.innerMargin ?? 0)); - formData.append("topMargin", String(parameters.topMargin ?? 0)); - formData.append("bottomMargin", String(parameters.bottomMargin ?? 0)); - formData.append("leftMargin", String(parameters.leftMargin ?? 0)); - formData.append("rightMargin", String(parameters.rightMargin ?? 0)); - formData.append("addBorder", String(parameters.addBorder)); - formData.append("borderWidth", String(parameters.borderWidth ?? 1)); - return formData; -}; +): FormData => + objectToFormData(pageLayoutToApiParams(parameters), { fileInput: file }); export const pageLayoutOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildPageLayoutFormData, + toApiParams: pageLayoutToApiParams, + fromApiParams: pageLayoutFromApiParams, operationType: "pageLayout", - endpoint: "/api/v1/general/multi-page-layout", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/redact/useRedactOperation.ts b/frontend/editor/src/core/hooks/tools/redact/useRedactOperation.ts index bc4db5b6c3..c7cefe1f43 100644 --- a/frontend/editor/src/core/hooks/tools/redact/useRedactOperation.ts +++ b/frontend/editor/src/core/hooks/tools/redact/useRedactOperation.ts @@ -3,52 +3,75 @@ import { useToolOperation, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { RedactParameters, defaultParameters, } from "@app/hooks/tools/redact/useRedactParameters"; +// Automatic redaction is the only mode that calls the backend; manual redaction +// is handled client-side by EmbedPDF in the viewer. +const AUTO_ENDPOINT = "/api/v1/security/auto-redact" satisfies ToolEndpoint; +type RedactApiParams = ToolApiParams[typeof AUTO_ENDPOINT]; + +// Convert the tool's UI parameters into the auto-redact request body. +export const redactToApiParams = ( + parameters: RedactParameters, +): RedactApiParams => ({ + // The backend takes the search terms as a single newline-separated string. + listOfText: parameters.wordsToRedact.join("\n"), + useRegex: parameters.useRegex, + wholeWordSearch: parameters.wholeWordSearch, + // The backend expects the hex colour without the leading '#'. + redactColor: parameters.redactColor.replace("#", ""), + customPadding: parameters.customPadding, + convertPDFToImage: parameters.convertPDFToImage, +}); + +// Reconstruct the tool's UI parameters from an auto-redact request body. +export const redactFromApiParams = ( + apiParams: RedactApiParams, +): Partial => ({ + mode: "automatic", + wordsToRedact: apiParams.listOfText ? apiParams.listOfText.split("\n") : [], + useRegex: apiParams.useRegex ?? defaultParameters.useRegex, + wholeWordSearch: + apiParams.wholeWordSearch ?? defaultParameters.wholeWordSearch, + redactColor: apiParams.redactColor + ? `#${apiParams.redactColor}` + : defaultParameters.redactColor, + customPadding: apiParams.customPadding, + convertPDFToImage: + apiParams.convertPDFToImage ?? defaultParameters.convertPDFToImage, +}); + // Static configuration that can be used by both the hook and automation executor export const buildRedactFormData = ( parameters: RedactParameters, file: File, ): FormData => { - const formData = new FormData(); - - // For automatic mode we hit the backend and need full payload - if (parameters.mode === "automatic") { - formData.append("fileInput", file); - // Convert array to newline-separated string as expected by backend - formData.append("listOfText", parameters.wordsToRedact.join("\n")); - formData.append("useRegex", parameters.useRegex.toString()); - formData.append("wholeWordSearch", parameters.wholeWordSearch.toString()); - formData.append("redactColor", parameters.redactColor.replace("#", "")); - formData.append("customPadding", parameters.customPadding.toString()); - formData.append( - "convertPDFToImage", - parameters.convertPDFToImage.toString(), - ); - } else { - // Manual redaction uses EmbedPDF in-viewer; we don't call the API. - // Return an empty formData to satisfy shared interfaces without throwing. + // Manual redaction uses EmbedPDF in-viewer and makes no API call; return an + // empty payload to satisfy the shared interface without throwing. + if (parameters.mode !== "automatic") { + return new FormData(); } - - return formData; + return objectToFormData(redactToApiParams(parameters), { fileInput: file }); }; // Static configuration object export const redactOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRedactFormData, + toApiParams: redactToApiParams, + fromApiParams: redactFromApiParams, operationType: "redact", - endpoint: (parameters: RedactParameters) => { - if (parameters.mode === "automatic") { - return "/api/v1/security/auto-redact"; - } - // Manual redaction is handled by EmbedPDF in the viewer; no endpoint call. - return ""; - }, + endpoint: (parameters: RedactParameters) => + parameters.mode === "automatic" ? AUTO_ENDPOINT : null, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts b/frontend/editor/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts index 5f24a28dd8..2cde7832e4 100644 --- a/frontend/editor/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts +++ b/frontend/editor/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts @@ -5,6 +5,11 @@ import { useToolOperation, ToolOperationConfig, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { RemoveBlanksParameters, @@ -12,23 +17,37 @@ import { } from "@app/hooks/tools/removeBlanks/useRemoveBlanksParameters"; import { useToolResources } from "@app/hooks/tools/shared/useToolResources"; +const ENDPOINT = "/api/v1/misc/remove-blanks" satisfies ToolEndpoint; +type RemoveBlanksApiParams = ToolApiParams[typeof ENDPOINT]; + +// Note: includeBlankPages is not sent to backend as it always returns both files in a ZIP +export const removeBlanksToApiParams = ( + parameters: RemoveBlanksParameters, +): RemoveBlanksApiParams => ({ + threshold: parameters.threshold, + whitePercent: parameters.whitePercent, +}); + +export const removeBlanksFromApiParams = ( + apiParams: RemoveBlanksApiParams, +): Partial => ({ + threshold: apiParams.threshold, + whitePercent: apiParams.whitePercent, +}); + export const buildRemoveBlanksFormData = ( parameters: RemoveBlanksParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("threshold", String(parameters.threshold)); - formData.append("whitePercent", String(parameters.whitePercent)); - // Note: includeBlankPages is not sent to backend as it always returns both files in a ZIP - return formData; -}; +): FormData => + objectToFormData(removeBlanksToApiParams(parameters), { fileInput: file }); export const removeBlanksOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRemoveBlanksFormData, + toApiParams: removeBlanksToApiParams, + fromApiParams: removeBlanksFromApiParams, operationType: "removeBlanks", - endpoint: "/api/v1/misc/remove-blanks", + endpoint: ENDPOINT, defaultParameters, } as const satisfies ToolOperationConfig; diff --git a/frontend/editor/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts b/frontend/editor/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts index 1d6604f0ef..55d053fe09 100644 --- a/frontend/editor/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts +++ b/frontend/editor/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts @@ -3,28 +3,35 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + fileOnlyMapping, + objectToFormData, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { RemoveCertificateSignParameters, defaultParameters, } from "@app/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters"; -// Static function that can be used by both the hook and automation executor +const ENDPOINT = "/api/v1/security/remove-cert-sign" satisfies ToolEndpoint; + +// Removing certificate signatures takes only a file; no parameters to map. +const { toApiParams, fromApiParams } = fileOnlyMapping(); + export const buildRemoveCertificateSignFormData = ( _parameters: RemoveCertificateSignParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - return formData; -}; +): FormData => objectToFormData(toApiParams(), { fileInput: file }); // Static configuration object export const removeCertificateSignOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRemoveCertificateSignFormData, + toApiParams, + fromApiParams, operationType: "removeCertSign", - endpoint: "/api/v1/security/remove-cert-sign", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts b/frontend/editor/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts index 3441623cf6..2ba770c822 100644 --- a/frontend/editor/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts +++ b/frontend/editor/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts @@ -4,24 +4,32 @@ import { ToolOperationConfig, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + fileOnlyMapping, + objectToFormData, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import type { RemoveImageParameters } from "@app/hooks/tools/removeImage/useRemoveImageParameters"; +const ENDPOINT = "/api/v1/general/remove-image-pdf" satisfies ToolEndpoint; + +// Remove-image takes only a file; there are no request parameters to map. +const { toApiParams, fromApiParams } = fileOnlyMapping(); + export const buildRemoveImageFormData = ( _params: RemoveImageParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - return formData; -}; +): FormData => objectToFormData(toApiParams(), { fileInput: file }); export const removeImageOperationConfig: ToolOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRemoveImageFormData, + toApiParams, + fromApiParams, operationType: "removeImage", - endpoint: "/api/v1/general/remove-image-pdf", + endpoint: ENDPOINT, }; export const useRemoveImageOperation = () => { diff --git a/frontend/editor/src/core/hooks/tools/removePages/useRemovePagesOperation.ts b/frontend/editor/src/core/hooks/tools/removePages/useRemovePagesOperation.ts index 9ff5e6fb62..8d8f14f3b4 100644 --- a/frontend/editor/src/core/hooks/tools/removePages/useRemovePagesOperation.ts +++ b/frontend/editor/src/core/hooks/tools/removePages/useRemovePagesOperation.ts @@ -4,6 +4,11 @@ import { useToolOperation, ToolOperationConfig, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { RemovePagesParameters, @@ -11,22 +16,39 @@ import { } from "@app/hooks/tools/removePages/useRemovePagesParameters"; // import { useToolResources } from '@app/hooks/tools/shared/useToolResources'; +const ENDPOINT = "/api/v1/general/remove-pages" satisfies ToolEndpoint; +type RemovePagesApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the remove-pages request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const removePagesToApiParams = ( + parameters: RemovePagesParameters, +): RemovePagesApiParams => ({ + pageNumbers: parameters.pageNumbers.replace(/\s+/g, ""), +}); + +// Reconstruct the tool's UI parameters from a remove-pages request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const removePagesFromApiParams = ( + apiParams: RemovePagesApiParams, +): Partial => ({ + pageNumbers: apiParams.pageNumbers ?? defaultParameters.pageNumbers, +}); + export const buildRemovePagesFormData = ( parameters: RemovePagesParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - const cleaned = parameters.pageNumbers.replace(/\s+/g, ""); - formData.append("pageNumbers", cleaned); - return formData; -}; +): FormData => + objectToFormData(removePagesToApiParams(parameters), { fileInput: file }); export const removePagesOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRemovePagesFormData, + toApiParams: removePagesToApiParams, + fromApiParams: removePagesFromApiParams, operationType: "removePages", - endpoint: "/api/v1/general/remove-pages", + endpoint: ENDPOINT, defaultParameters, } as const satisfies ToolOperationConfig; diff --git a/frontend/editor/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts b/frontend/editor/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts index 8f04c4806f..c55040c7f2 100644 --- a/frontend/editor/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts +++ b/frontend/editor/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts @@ -1,4 +1,35 @@ -import { RemovePasswordParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters"; +import { + RemovePasswordParameters, + defaultParameters, +} from "@app/hooks/tools/removePassword/useRemovePasswordParameters"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; + +// Defined here (not in the operation config) so both the mappers and the config +// share one endpoint constant without a circular import via FileContext. +export const REMOVE_PASSWORD_ENDPOINT = + "/api/v1/security/remove-password" satisfies ToolEndpoint; +type RemovePasswordApiParams = ToolApiParams[typeof REMOVE_PASSWORD_ENDPOINT]; + +// Convert the tool's UI parameters into the remove-password request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const removePasswordToApiParams = ( + parameters: RemovePasswordParameters, +): RemovePasswordApiParams => ({ + password: parameters.password, +}); + +// Reconstruct the tool's UI parameters from a remove-password request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const removePasswordFromApiParams = ( + apiParams: RemovePasswordApiParams, +): Partial => ({ + password: apiParams.password ?? defaultParameters.password, +}); /** * Builds FormData for remove password API request. @@ -7,9 +38,5 @@ import { RemovePasswordParameters } from "@app/hooks/tools/removePassword/useRem export const buildRemovePasswordFormData = ( parameters: RemovePasswordParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("password", parameters.password); - return formData; -}; +): FormData => + objectToFormData(removePasswordToApiParams(parameters), { fileInput: file }); diff --git a/frontend/editor/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts b/frontend/editor/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts index aa71a5befb..2d516b861b 100644 --- a/frontend/editor/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts +++ b/frontend/editor/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts @@ -8,7 +8,12 @@ import { RemovePasswordParameters, defaultParameters, } from "@app/hooks/tools/removePassword/useRemovePasswordParameters"; -import { buildRemovePasswordFormData } from "@app/hooks/tools/removePassword/buildRemovePasswordFormData"; +import { + buildRemovePasswordFormData, + removePasswordToApiParams, + removePasswordFromApiParams, + REMOVE_PASSWORD_ENDPOINT, +} from "@app/hooks/tools/removePassword/buildRemovePasswordFormData"; // Re-export for backwards compatibility with any other imports export { buildRemovePasswordFormData }; @@ -17,8 +22,10 @@ export { buildRemovePasswordFormData }; export const removePasswordOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRemovePasswordFormData, + toApiParams: removePasswordToApiParams, + fromApiParams: removePasswordFromApiParams, operationType: "removePassword", - endpoint: "/api/v1/security/remove-password", + endpoint: REMOVE_PASSWORD_ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts b/frontend/editor/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts index de5aaf5c53..2bdb75f31c 100644 --- a/frontend/editor/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts +++ b/frontend/editor/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts @@ -4,31 +4,64 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; -import { ReorganizePagesParameters } from "@app/hooks/tools/reorganizePages/useReorganizePagesParameters"; +import { + ReorganizePagesParameters, + defaultReorganizePagesParameters, +} from "@app/hooks/tools/reorganizePages/useReorganizePagesParameters"; + +const ENDPOINT = "/api/v1/general/rearrange-pages" satisfies ToolEndpoint; +type ReorganizePagesApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the rearrange-pages request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const reorganizePagesToApiParams = ( + parameters: ReorganizePagesParameters, +): ReorganizePagesApiParams => { + const apiParams: ReorganizePagesApiParams = {}; + if (parameters.customMode) { + apiParams.customMode = + parameters.customMode as ReorganizePagesApiParams["customMode"]; + } + if (parameters.pageNumbers) { + apiParams.pageNumbers = parameters.pageNumbers.replace(/\s+/g, ""); + } + return apiParams; +}; + +// Reconstruct the tool's UI parameters from a rearrange-pages request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const reorganizePagesFromApiParams = ( + apiParams: ReorganizePagesApiParams, +): Partial => ({ + customMode: + apiParams.customMode ?? defaultReorganizePagesParameters.customMode, + pageNumbers: + apiParams.pageNumbers ?? defaultReorganizePagesParameters.pageNumbers, +}); const buildFormData = ( parameters: ReorganizePagesParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - if (parameters.customMode) { - formData.append("customMode", parameters.customMode); - } - if (parameters.pageNumbers) { - const cleaned = parameters.pageNumbers.replace(/\s+/g, ""); - formData.append("pageNumbers", cleaned); - } - return formData; -}; +): FormData => + objectToFormData(reorganizePagesToApiParams(parameters), { + fileInput: file, + }); export const reorganizePagesOperationConfig: ToolOperationConfig = { toolType: ToolType.singleFile, buildFormData, + toApiParams: reorganizePagesToApiParams, + fromApiParams: reorganizePagesFromApiParams, operationType: "reorganizePages", - endpoint: "/api/v1/general/rearrange-pages", + endpoint: ENDPOINT, }; export const useReorganizePagesOperation = () => { diff --git a/frontend/editor/src/core/hooks/tools/repair/useRepairOperation.ts b/frontend/editor/src/core/hooks/tools/repair/useRepairOperation.ts index a62f448bac..ef60151d07 100644 --- a/frontend/editor/src/core/hooks/tools/repair/useRepairOperation.ts +++ b/frontend/editor/src/core/hooks/tools/repair/useRepairOperation.ts @@ -3,28 +3,35 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + fileOnlyMapping, + objectToFormData, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { RepairParameters, defaultParameters, } from "@app/hooks/tools/repair/useRepairParameters"; -// Static function that can be used by both the hook and automation executor +const ENDPOINT = "/api/v1/misc/repair" satisfies ToolEndpoint; + +// Repair takes only a file; there are no request parameters to map. +const { toApiParams, fromApiParams } = fileOnlyMapping(); + export const buildRepairFormData = ( _parameters: RepairParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - return formData; -}; +): FormData => objectToFormData(toApiParams(), { fileInput: file }); // Static configuration object export const repairOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRepairFormData, + toApiParams, + fromApiParams, operationType: "repair", - endpoint: "/api/v1/misc/repair", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts b/frontend/editor/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts index dd24c10e22..94bbc32d9e 100644 --- a/frontend/editor/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts +++ b/frontend/editor/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts @@ -3,39 +3,72 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { ReplaceColorParameters, defaultParameters, } from "@app/hooks/tools/replaceColor/useReplaceColorParameters"; +const ENDPOINT = "/api/v1/misc/replace-invert-pdf" satisfies ToolEndpoint; +type ReplaceColorApiParams = ToolApiParams[typeof ENDPOINT]; + +export const replaceColorToApiParams = ( + parameters: ReplaceColorParameters, +): ReplaceColorApiParams => { + const apiParams: ReplaceColorApiParams = { + replaceAndInvertOption: parameters.replaceAndInvertOption, + }; + + if (parameters.replaceAndInvertOption === "HIGH_CONTRAST_COLOR") { + apiParams.highContrastColorCombination = + parameters.highContrastColorCombination; + } else if (parameters.replaceAndInvertOption === "CUSTOM_COLOR") { + apiParams.textColor = parameters.textColor; + apiParams.backGroundColor = parameters.backGroundColor; + } + + return apiParams; +}; + +export const replaceColorFromApiParams = ( + apiParams: ReplaceColorApiParams, +): Partial => { + const result: Partial = { + replaceAndInvertOption: apiParams.replaceAndInvertOption, + }; + + if (apiParams.highContrastColorCombination !== undefined) { + result.highContrastColorCombination = + apiParams.highContrastColorCombination; + } + if (apiParams.textColor !== undefined) { + result.textColor = apiParams.textColor; + } + if (apiParams.backGroundColor !== undefined) { + result.backGroundColor = apiParams.backGroundColor; + } + + return result; +}; + export const buildReplaceColorFormData = ( parameters: ReplaceColorParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - formData.append("replaceAndInvertOption", parameters.replaceAndInvertOption); - - if (parameters.replaceAndInvertOption === "HIGH_CONTRAST_COLOR") { - formData.append( - "highContrastColorCombination", - parameters.highContrastColorCombination, - ); - } else if (parameters.replaceAndInvertOption === "CUSTOM_COLOR") { - formData.append("textColor", parameters.textColor); - formData.append("backGroundColor", parameters.backGroundColor); - } - - return formData; -}; +): FormData => + objectToFormData(replaceColorToApiParams(parameters), { fileInput: file }); export const replaceColorOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildReplaceColorFormData, + toApiParams: replaceColorToApiParams, + fromApiParams: replaceColorFromApiParams, operationType: "replaceColor", - endpoint: "/api/v1/misc/replace-invert-pdf", + endpoint: ENDPOINT, multiFileEndpoint: false, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.test.ts b/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.test.ts index 5db2b30788..96973db125 100644 --- a/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.test.ts +++ b/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.test.ts @@ -30,6 +30,10 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + rotateFromApiParams, + rotateToApiParams, +} from "@app/hooks/tools/rotate/useRotateOperation"; describe("useRotateOperation", () => { const mockUseToolOperation = vi.mocked(useToolOperation); @@ -114,3 +118,30 @@ describe("useRotateOperation", () => { expect(callArgs[property]).toBe(expectedValue); }); }); + +describe("rotate mappers", () => { + test.each([ + { angle: 0, expected: 0 }, + { angle: 90, expected: 90 }, + { angle: -90, expected: 270 }, + { angle: 450, expected: 90 }, + ])( + "toApiParams normalizes angle $angle to $expected", + ({ angle, expected }) => { + expect(rotateToApiParams({ angle }).angle).toBe(expected); + }, + ); + + test("fromApiParams maps the backend angle back to the UI parameter", () => { + expect(rotateFromApiParams({ angle: 180 })).toEqual({ angle: 180 }); + }); + + test.each([0, 90, 180, 270] as const)( + "round-trips a normalized angle %i", + (angle) => { + const ui = rotateFromApiParams({ angle }); + const api = rotateToApiParams({ angle: ui.angle ?? 0 }); + expect(api).toEqual({ angle }); + }, + ); +}); diff --git a/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.ts b/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.ts index e675610eb9..7e73aab99f 100644 --- a/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.ts +++ b/frontend/editor/src/core/hooks/tools/rotate/useRotateOperation.ts @@ -3,6 +3,11 @@ import { useToolOperation, ToolType, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { RotateParameters, @@ -10,24 +15,41 @@ import { normalizeAngle, } from "@app/hooks/tools/rotate/useRotateParameters"; +const ENDPOINT = "/api/v1/general/rotate-pdf" satisfies ToolEndpoint; +type RotateApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the rotate-pdf request body. The return +// type is the generated backend model, so a spec change breaks the build here. +export const rotateToApiParams = ( + parameters: RotateParameters, +): RotateApiParams => ({ + // The UI angle can be any multiple of 90 (including negatives or values above + // 360); normalize to the four values the backend accepts. + angle: normalizeAngle(parameters.angle) as RotateApiParams["angle"], +}); + +// Reconstruct the tool's UI parameters from a rotate-pdf request body. +export const rotateFromApiParams = ( + apiParams: RotateApiParams, +): Partial => ({ + angle: apiParams.angle, +}); + // Static configuration that can be used by both the hook and automation executor export const buildRotateFormData = ( parameters: RotateParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - // Normalize angle for backend (0, 90, 180, 270) - formData.append("angle", normalizeAngle(parameters.angle).toString()); - return formData; -}; +): FormData => + objectToFormData(rotateToApiParams(parameters), { fileInput: file }); // Static configuration object export const rotateOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildRotateFormData, + toApiParams: rotateToApiParams, + fromApiParams: rotateFromApiParams, operationType: "rotate", - endpoint: "/api/v1/general/rotate-pdf", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/sanitize/useSanitizeOperation.ts b/frontend/editor/src/core/hooks/tools/sanitize/useSanitizeOperation.ts index 9c98b7d57f..93fd64240d 100644 --- a/frontend/editor/src/core/hooks/tools/sanitize/useSanitizeOperation.ts +++ b/frontend/editor/src/core/hooks/tools/sanitize/useSanitizeOperation.ts @@ -3,49 +3,65 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { SanitizeParameters, defaultParameters, } from "@app/hooks/tools/sanitize/useSanitizeParameters"; +const ENDPOINT = "/api/v1/security/sanitize-pdf" satisfies ToolEndpoint; +type SanitizeApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the sanitize-pdf request body. The +// return type is the generated backend model, so a spec change that renames or +// drops a field breaks the build here. +export const sanitizeToApiParams = ( + parameters: SanitizeParameters, +): SanitizeApiParams => ({ + removeJavaScript: parameters.removeJavaScript ?? false, + removeEmbeddedFiles: parameters.removeEmbeddedFiles ?? false, + removeXMPMetadata: parameters.removeXMPMetadata ?? false, + removeMetadata: parameters.removeMetadata ?? false, + removeLinks: parameters.removeLinks ?? false, + removeFonts: parameters.removeFonts ?? false, +}); + +// Reconstruct the tool's UI parameters from a sanitize-pdf request body, so a +// stored or AI-authored step can be re-rendered in the settings UI. +export const sanitizeFromApiParams = ( + apiParams: SanitizeApiParams, +): Partial => ({ + removeJavaScript: + apiParams.removeJavaScript ?? defaultParameters.removeJavaScript, + removeEmbeddedFiles: + apiParams.removeEmbeddedFiles ?? defaultParameters.removeEmbeddedFiles, + removeXMPMetadata: + apiParams.removeXMPMetadata ?? defaultParameters.removeXMPMetadata, + removeMetadata: apiParams.removeMetadata ?? defaultParameters.removeMetadata, + removeLinks: apiParams.removeLinks ?? defaultParameters.removeLinks, + removeFonts: apiParams.removeFonts ?? defaultParameters.removeFonts, +}); + // Static function that can be used by both the hook and automation executor export const buildSanitizeFormData = ( parameters: SanitizeParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - // Add parameters - formData.append( - "removeJavaScript", - (parameters.removeJavaScript ?? false).toString(), - ); - formData.append( - "removeEmbeddedFiles", - (parameters.removeEmbeddedFiles ?? false).toString(), - ); - formData.append( - "removeXMPMetadata", - (parameters.removeXMPMetadata ?? false).toString(), - ); - formData.append( - "removeMetadata", - (parameters.removeMetadata ?? false).toString(), - ); - formData.append("removeLinks", (parameters.removeLinks ?? false).toString()); - formData.append("removeFonts", (parameters.removeFonts ?? false).toString()); - - return formData; -}; +): FormData => + objectToFormData(sanitizeToApiParams(parameters), { fileInput: file }); // Static configuration object export const sanitizeOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildSanitizeFormData, + toApiParams: sanitizeToApiParams, + fromApiParams: sanitizeFromApiParams, operationType: "sanitize", - endpoint: "/api/v1/security/sanitize-pdf", + endpoint: ENDPOINT, multiFileEndpoint: false, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts b/frontend/editor/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts index e035c90ce5..27aadeb98b 100644 --- a/frontend/editor/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts +++ b/frontend/editor/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts @@ -5,6 +5,11 @@ import { useToolOperation, ToolOperationConfig, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { ScannerImageSplitParameters, @@ -12,26 +17,50 @@ import { } from "@app/hooks/tools/scannerImageSplit/useScannerImageSplitParameters"; import { useToolResources } from "@app/hooks/tools/shared/useToolResources"; +const ENDPOINT = "/api/v1/misc/extract-image-scans" satisfies ToolEndpoint; +type ScannerImageSplitApiParams = ToolApiParams[typeof ENDPOINT]; + +// Convert the tool's UI parameters into the extract-image-scans request body. +// The frontend uses snake_case field names, but the backend model (the contract) +// uses camelCase, so the keys are renamed here. +export const scannerImageSplitToApiParams = ( + parameters: ScannerImageSplitParameters, +): ScannerImageSplitApiParams => ({ + angleThreshold: parameters.angle_threshold, + tolerance: parameters.tolerance, + minArea: parameters.min_area, + minContourArea: parameters.min_contour_area, + borderSize: parameters.border_size, +}); + +// Reconstruct the tool's UI parameters from an extract-image-scans request body, +// so a stored or AI-authored step can be re-rendered in the settings UI. +export const scannerImageSplitFromApiParams = ( + apiParams: ScannerImageSplitApiParams, +): Partial => ({ + angle_threshold: apiParams.angleThreshold, + tolerance: apiParams.tolerance, + min_area: apiParams.minArea, + min_contour_area: apiParams.minContourArea, + border_size: apiParams.borderSize, +}); + export const buildScannerImageSplitFormData = ( parameters: ScannerImageSplitParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - formData.append("angle_threshold", parameters.angle_threshold.toString()); - formData.append("tolerance", parameters.tolerance.toString()); - formData.append("min_area", parameters.min_area.toString()); - formData.append("min_contour_area", parameters.min_contour_area.toString()); - formData.append("border_size", parameters.border_size.toString()); - return formData; -}; +): FormData => + objectToFormData(scannerImageSplitToApiParams(parameters), { + fileInput: file, + }); // Static configuration object export const scannerImageSplitOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildScannerImageSplitFormData, + toApiParams: scannerImageSplitToApiParams, + fromApiParams: scannerImageSplitFromApiParams, operationType: "scannerImageSplit", - endpoint: "/api/v1/misc/extract-image-scans", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/shared/migratedToolMappers.test.ts b/frontend/editor/src/core/hooks/tools/shared/migratedToolMappers.test.ts new file mode 100644 index 0000000000..a809ae9604 --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/shared/migratedToolMappers.test.ts @@ -0,0 +1,163 @@ +import { describe, expect, test } from "vitest"; +import { type RegistryToolOperationConfig } from "@app/hooks/tools/shared/toolOperationTypes"; +import { objectToFormData } from "@app/hooks/tools/shared/toolApiMapping"; + +// Pilot tools. +import { compressOperationConfig } from "@app/hooks/tools/compress/useCompressOperation"; +import { rotateOperationConfig } from "@app/hooks/tools/rotate/useRotateOperation"; +import { mergeOperationConfig } from "@app/hooks/tools/merge/useMergeOperation"; +import { splitOperationConfig } from "@app/hooks/tools/split/useSplitOperation"; +// Rolled out in Phase 3. +import { addAttachmentsOperationConfig } from "@app/hooks/tools/addAttachments/useAddAttachmentsOperation"; +import { addPageNumbersOperationConfig } from "@app/components/tools/addPageNumbers/useAddPageNumbersOperation"; +import { addPasswordOperationConfig } from "@app/hooks/tools/addPassword/useAddPasswordOperation"; +import { addStampOperationConfig } from "@app/components/tools/addStamp/useAddStampOperation"; +import { addWatermarkOperationConfig } from "@app/hooks/tools/addWatermark/useAddWatermarkOperation"; +import { adjustPageScaleOperationConfig } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleOperation"; +import { autoRenameOperationConfig } from "@app/hooks/tools/autoRename/useAutoRenameOperation"; +import { bookletImpositionOperationConfig } from "@app/hooks/tools/bookletImposition/useBookletImpositionOperation"; +import { certSignOperationConfig } from "@app/hooks/tools/certSign/useCertSignOperation"; +import { changePermissionsOperationConfig } from "@app/hooks/tools/changePermissions/useChangePermissionsOperation"; +import { cropOperationConfig } from "@app/hooks/tools/crop/useCropOperation"; +import { editTableOfContentsOperationConfig } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsOperation"; +import { extractImagesOperationConfig } from "@app/hooks/tools/extractImages/useExtractImagesOperation"; +import { flattenOperationConfig } from "@app/hooks/tools/flatten/useFlattenOperation"; +import { ocrOperationConfig } from "@app/hooks/tools/ocr/useOCROperation"; +import { overlayPdfsOperationConfig } from "@app/hooks/tools/overlayPdfs/useOverlayPdfsOperation"; +import { pageLayoutOperationConfig } from "@app/hooks/tools/pageLayout/usePageLayoutOperation"; +import { redactOperationConfig } from "@app/hooks/tools/redact/useRedactOperation"; +import { removeBlanksOperationConfig } from "@app/hooks/tools/removeBlanks/useRemoveBlanksOperation"; +import { removeCertificateSignOperationConfig } from "@app/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation"; +import { removeImageOperationConfig } from "@app/hooks/tools/removeImage/useRemoveImageOperation"; +import { removePagesOperationConfig } from "@app/hooks/tools/removePages/useRemovePagesOperation"; +import { removePasswordOperationConfig } from "@app/hooks/tools/removePassword/useRemovePasswordOperation"; +import { reorganizePagesOperationConfig } from "@app/hooks/tools/reorganizePages/useReorganizePagesOperation"; +import { repairOperationConfig } from "@app/hooks/tools/repair/useRepairOperation"; +import { replaceColorOperationConfig } from "@app/hooks/tools/replaceColor/useReplaceColorOperation"; +import { sanitizeOperationConfig } from "@app/hooks/tools/sanitize/useSanitizeOperation"; +import { scannerImageSplitOperationConfig } from "@app/hooks/tools/scannerImageSplit/useScannerImageSplitOperation"; +import { singleLargePageOperationConfig } from "@app/hooks/tools/singleLargePage/useSingleLargePageOperation"; +import { timestampPdfOperationConfig } from "@app/hooks/tools/timestampPdf/useTimestampPdfOperation"; +import { unlockPdfFormsOperationConfig } from "@app/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation"; + +// Every tool migrated to the mapper seam. Erased to the registry shape so one +// loop can invoke toApiParams(defaultParameters) uniformly regardless of the +// tool's own parameter type. +const MIGRATED_CONFIGS = [ + compressOperationConfig, + rotateOperationConfig, + mergeOperationConfig, + splitOperationConfig, + addAttachmentsOperationConfig, + addPageNumbersOperationConfig, + addPasswordOperationConfig, + addStampOperationConfig, + addWatermarkOperationConfig, + adjustPageScaleOperationConfig, + autoRenameOperationConfig, + bookletImpositionOperationConfig, + certSignOperationConfig, + changePermissionsOperationConfig, + cropOperationConfig, + editTableOfContentsOperationConfig, + extractImagesOperationConfig, + flattenOperationConfig, + ocrOperationConfig, + overlayPdfsOperationConfig, + pageLayoutOperationConfig, + redactOperationConfig, + removeBlanksOperationConfig, + removeCertificateSignOperationConfig, + removeImageOperationConfig, + removePagesOperationConfig, + removePasswordOperationConfig, + reorganizePagesOperationConfig, + repairOperationConfig, + replaceColorOperationConfig, + sanitizeOperationConfig, + scannerImageSplitOperationConfig, + singleLargePageOperationConfig, + timestampPdfOperationConfig, + unlockPdfFormsOperationConfig, + // Erase each tool's own TParams to the shared registry shape (the same + // existential boundary asRegistryConfig applies) so one loop can call + // toApiParams(defaultParameters) uniformly. +] as unknown as RegistryToolOperationConfig[]; + +// A few tools have no static defaultParameters (the UI always supplies a value); +// give the sweep a minimal valid parameter set for those. +const FALLBACK_PARAMS: Record> = { + editTableOfContents: { bookmarks: [], replaceExisting: false }, +}; + +describe("migrated tool mappers (sweep)", () => { + const file = new File(["x"], "test.pdf", { type: "application/pdf" }); + + test.each( + MIGRATED_CONFIGS.map((config) => [config.operationType, config] as const), + )( + "%s: exposes both mappers and serializes its default parameters cleanly", + (_name, config) => { + // Every migrated tool authors both directions of the mapping. + expect(config.toApiParams).toBeDefined(); + expect(config.fromApiParams).toBeDefined(); + + // toApiParams(defaults) must produce a body objectToFormData can serialize + // (i.e. only primitives / arrays of primitives). A mapper that leaked a + // structured value would throw here. + const params = + config.defaultParameters ?? FALLBACK_PARAMS[config.operationType] ?? {}; + const apiParams = config.toApiParams!(params); + expect(() => + objectToFormData(apiParams, { fileInput: file }), + ).not.toThrow(); + }, + ); +}); + +describe("redact mappers", () => { + test("toApiParams builds the auto-redact body from UI parameters", () => { + const api = redactOperationConfig.toApiParams({ + mode: "automatic", + wordsToRedact: ["foo", "bar"], + useRegex: true, + wholeWordSearch: false, + redactColor: "#ff0000", + customPadding: 0.2, + convertPDFToImage: false, + }); + + expect(api).toEqual({ + listOfText: "foo\nbar", + useRegex: true, + wholeWordSearch: false, + redactColor: "ff0000", // '#' stripped for the backend + customPadding: 0.2, + convertPDFToImage: false, + }); + }); + + test("round-trips through fromApiParams", () => { + const api = redactOperationConfig.toApiParams({ + mode: "automatic", + wordsToRedact: ["secret"], + useRegex: false, + wholeWordSearch: true, + redactColor: "#123456", + customPadding: 0.1, + convertPDFToImage: true, + }); + const roundTripped = redactOperationConfig.toApiParams({ + mode: "automatic", + wordsToRedact: [], + useRegex: false, + wholeWordSearch: false, + redactColor: "#000000", + customPadding: 0, + convertPDFToImage: false, + ...redactOperationConfig.fromApiParams(api), + }); + + expect(roundTripped).toEqual(api); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/shared/toolApiMapping.test.ts b/frontend/editor/src/core/hooks/tools/shared/toolApiMapping.test.ts new file mode 100644 index 0000000000..6ed02a49ae --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/shared/toolApiMapping.test.ts @@ -0,0 +1,85 @@ +import { describe, expect, test } from "vitest"; +import { + objectToFormData, + type ToolApiParams, +} from "@app/hooks/tools/shared/toolApiMapping"; + +describe("objectToFormData", () => { + test("serializes primitive fields to string form values", () => { + const request: ToolApiParams["/api/v1/misc/compress-pdf"] = { + optimizeLevel: 3, + grayscale: true, + linearize: false, + expectedOutputSize: "25KB", + }; + const formData = objectToFormData(request); + + expect(formData.get("optimizeLevel")).toBe("3"); + expect(formData.get("grayscale")).toBe("true"); + expect(formData.get("linearize")).toBe("false"); + expect(formData.get("expectedOutputSize")).toBe("25KB"); + }); + + test("omits fields whose value is undefined", () => { + const request: ToolApiParams["/api/v1/misc/compress-pdf"] = { + optimizeLevel: 5, + expectedOutputSize: undefined, + }; + const formData = objectToFormData(request); + + expect(formData.has("optimizeLevel")).toBe(true); + expect(formData.has("expectedOutputSize")).toBe(false); + }); + + test("expands arrays into repeated fields", () => { + const request: ToolApiParams["/api/v1/misc/add-attachments"] = { + attachments: ["a.png", "b.png", "c.png"], + }; + const formData = objectToFormData(request); + + expect(formData.getAll("attachments")).toEqual(["a.png", "b.png", "c.png"]); + }); + + test("throws on a non-primitive field value rather than dropping it", () => { + // A redact request whose structured field was left un-encoded: the array + // items are objects, which cannot be sent as form fields. + const request: ToolApiParams["/api/v1/security/redact"] = { + redactions: [{ x: 1, y: 2 }], + }; + + expect(() => objectToFormData(request)).toThrow(/field "redactions"/); + }); + + test("appends a single file under its field name", () => { + const file = new File(["x"], "doc.pdf", { type: "application/pdf" }); + const request: ToolApiParams["/api/v1/misc/compress-pdf"] = { + optimizeLevel: 5, + }; + const formData = objectToFormData(request, { fileInput: file }); + + expect(formData.get("fileInput")).toBe(file); + expect(formData.get("optimizeLevel")).toBe("5"); + }); + + test("appends multiple files under the same field name", () => { + const files = [ + new File(["1"], "a.pdf", { type: "application/pdf" }), + new File(["2"], "b.pdf", { type: "application/pdf" }), + ]; + const formData = objectToFormData({}, { fileInput: files }); + + expect(formData.getAll("fileInput")).toEqual(files); + }); + + test("appends named file fields alongside fileInput", () => { + const doc = new File(["d"], "doc.pdf", { type: "application/pdf" }); + const stamp = new File(["s"], "stamp.png", { type: "image/png" }); + const formData = objectToFormData( + {}, + { fileInput: doc, stampImage: stamp }, + ); + + expect(formData.get("fileInput")).toBe(doc); + expect(formData.get("stampImage")).toBe(stamp); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/shared/toolApiMapping.ts b/frontend/editor/src/core/hooks/tools/shared/toolApiMapping.ts new file mode 100644 index 0000000000..760df9ce5e --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/shared/toolApiMapping.ts @@ -0,0 +1,88 @@ +import { + type ToolApiParams, + type ToolApiRequest, + type ToolEndpoint, +} from "@app/types/toolApiTypes"; + +export type { ToolApiParams, ToolApiRequest, ToolEndpoint }; + +/** + * Mapping for tools that take only a file and have no request parameters (their + * generated model is `Record`). Both directions are empty; the + * tool's buildFormData just appends the file. + */ +export function fileOnlyMapping(): { + toApiParams: () => Record; + fromApiParams: () => Record; +} { + return { toApiParams: () => ({}), fromApiParams: () => ({}) }; +} + +/** Named file fields to append alongside the serialized parameters. */ +export interface FormDataFiles { + /** Primary document input(s); appended under the `fileInput` field. */ + fileInput?: File | File[]; + /** Any other named file field the endpoint accepts. */ + [field: string]: File | File[] | undefined; +} + +function appendPrimitive( + formData: FormData, + key: string, + value: unknown, +): void { + if (value === undefined || value === null) return; + if (typeof value === "string") { + formData.append(key, value); + } else if (typeof value === "number" || typeof value === "boolean") { + formData.append(key, `${value}`); + } else { + // A non-primitive here means a mapper produced a value the backend cannot + // receive as a form field. Fail loudly rather than silently drop it: + // structured fields must be JSON-encoded in the mapper, and Files passed via + // the `files` argument. + throw new Error( + `objectToFormData: field "${key}" has an unsupported value of type ` + + `"${typeof value}"; expected a string, number, or boolean.`, + ); + } +} + +/** + * Serialize a backend request model (the output of a `toApiParams` function) + * into multipart FormData: primitives become string fields, arrays become + * repeated fields, and `undefined`/`null` are omitted. Files are appended + * separately via `files`, keeping file plumbing out of the parameter mapper. + * + * Throws if a field holds a non-primitive value, since that cannot be sent as a + * form field: structured fields must be JSON-encoded by the mapper. + */ +export function objectToFormData( + params: ToolApiRequest, + files?: FormDataFiles, +): FormData { + const formData = new FormData(); + + for (const [key, value] of Object.entries(params)) { + if (Array.isArray(value)) { + for (const item of value) { + appendPrimitive(formData, key, item); + } + } else { + appendPrimitive(formData, key, value); + } + } + + if (files) { + for (const [field, value] of Object.entries(files)) { + if (value === undefined) continue; + if (Array.isArray(value)) { + value.forEach((file) => formData.append(field, file)); + } else { + formData.append(field, value); + } + } + } + + return formData; +} diff --git a/frontend/editor/src/core/hooks/tools/shared/toolOperationTypes.ts b/frontend/editor/src/core/hooks/tools/shared/toolOperationTypes.ts index 0d48ce6d09..93ade85368 100644 --- a/frontend/editor/src/core/hooks/tools/shared/toolOperationTypes.ts +++ b/frontend/editor/src/core/hooks/tools/shared/toolOperationTypes.ts @@ -3,9 +3,16 @@ import { StirlingFile } from "@app/types/fileContext"; import type { ResponseHandler } from "@app/utils/toolResponseProcessor"; import { ToolId } from "@app/types/toolId"; import type { ProcessingProgress } from "@app/hooks/tools/shared/useToolState"; +import type { ToolApiRequest, ToolEndpoint } from "@app/types/toolApiTypes"; export type { ProcessingProgress, ResponseHandler }; +/** + * A tool operation's backend endpoint, checked against the generated ToolEndpoint + * set, or `null` when the operation has no backend endpoint. + */ +export type ToolOperationEndpoint = ToolEndpoint | null; + export enum ToolType { singleFile, multiFile, @@ -72,6 +79,19 @@ interface BaseToolOperationConfig { /** Default parameter values for automation */ defaultParameters?: TParams; + /** + * Typed frontend params -> backend request model. When a tool provides this, + * it is the spec-checked source of truth for the request body and its + * buildFormData is derived from it via objectToFormData. + */ + toApiParams?(params: TParams): ToolApiRequest; + + /** + * Backend request model -> partial frontend params, so a stored API call + * can be re-hydrated into this tool's settings UI. + */ + fromApiParams?(apiParams: ToolApiRequest): Partial; + /** * For custom tools: if true, success implies all input files were successfully processed. * Use this for tools like Automate or Merge where Many-to-One relationships exist @@ -89,8 +109,12 @@ export interface SingleFileToolOperationConfig< /** Builds FormData for API request. */ buildFormData: (params: TParams, file: File) => FormData; - /** API endpoint for the operation. Can be static string or function for dynamic routing. */ - endpoint: string | ((params: TParams) => string); + /** + * API endpoint for the operation. Can be static or a function for dynamic routing. + */ + endpoint: + | ToolOperationEndpoint + | ((params: TParams) => ToolOperationEndpoint); customProcessor?: undefined; } @@ -107,8 +131,12 @@ export interface MultiFileToolOperationConfig< /** Builds FormData for API request. */ buildFormData: (params: TParams, files: File[]) => FormData; - /** API endpoint for the operation. Can be static string or function for dynamic routing. */ - endpoint: string | ((params: TParams) => string); + /** + * API endpoint for the operation. Can be static or a function for dynamic routing. + */ + endpoint: + | ToolOperationEndpoint + | ((params: TParams) => ToolOperationEndpoint); customProcessor?: undefined; } diff --git a/frontend/editor/src/core/hooks/tools/shared/useToolApiCalls.ts b/frontend/editor/src/core/hooks/tools/shared/useToolApiCalls.ts index 28da62484a..cca1f5e563 100644 --- a/frontend/editor/src/core/hooks/tools/shared/useToolApiCalls.ts +++ b/frontend/editor/src/core/hooks/tools/shared/useToolApiCalls.ts @@ -10,7 +10,7 @@ import type { ProcessingProgress } from "@app/hooks/tools/shared/useToolState"; import type { StirlingFile, FileId } from "@app/types/fileContext"; export interface ApiCallsConfig { - endpoint: string | ((params: TParams) => string); + endpoint: string | null | ((params: TParams) => string | null); buildFormData: (params: TParams, file: File) => FormData; filePrefix?: string; responseHandler?: ResponseHandler; @@ -37,6 +37,19 @@ export const useToolApiCalls = () => { // Create cancel token for this operation cancelTokenRef.current = axios.CancelToken.source(); + // Params are the same for every file, so resolve the endpoint once. A null + // endpoint means the tool has no backend call (e.g. client-side tools) and + // should never reach here, so fail loudly rather than POST to null. + const endpoint = + typeof config.endpoint === "function" + ? config.endpoint(params) + : config.endpoint; + if (!endpoint) { + throw new Error( + "This operation has no backend endpoint and cannot be executed directly.", + ); + } + for (let i = 0; i < validFiles.length; i++) { const file = validFiles[i]; @@ -51,10 +64,6 @@ export const useToolApiCalls = () => { try { const formData = config.buildFormData(params, file); - const endpoint = - typeof config.endpoint === "function" - ? config.endpoint(params) - : config.endpoint; console.debug("[processFiles] POST", { endpoint, name: file.name }); const response = await apiClient.post(endpoint, formData, { responseType: "blob", diff --git a/frontend/editor/src/core/hooks/tools/shared/useToolOperation.ts b/frontend/editor/src/core/hooks/tools/shared/useToolOperation.ts index 5629dfe54b..17e4c47442 100644 --- a/frontend/editor/src/core/hooks/tools/shared/useToolOperation.ts +++ b/frontend/editor/src/core/hooks/tools/shared/useToolOperation.ts @@ -266,6 +266,11 @@ export const useToolOperation = ( typeof config.endpoint === "function" ? config.endpoint(params) : config.endpoint; + if (!endpoint) { + throw new Error( + "This operation has no backend endpoint and cannot be executed directly.", + ); + } const response = await apiClient.post(endpoint, formData, { responseType: "blob", diff --git a/frontend/editor/src/core/hooks/tools/sign/useSignOperation.ts b/frontend/editor/src/core/hooks/tools/sign/useSignOperation.ts index bd92fdd758..175fa744ab 100644 --- a/frontend/editor/src/core/hooks/tools/sign/useSignOperation.ts +++ b/frontend/editor/src/core/hooks/tools/sign/useSignOperation.ts @@ -54,7 +54,10 @@ export const signOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildSignFormData, operationType: "sign", - endpoint: "/api/v1/security/add-signature", + // Signing is applied client-side in the viewer (see createStampTool -> + // flattenSignatures); there is no backend endpoint and the standard execute + // path is never used. + endpoint: null, filePrefix: "signed_", defaultParameters: DEFAULT_PARAMETERS, } as const; diff --git a/frontend/editor/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts b/frontend/editor/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts index a57a26a7dc..835959c484 100644 --- a/frontend/editor/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts +++ b/frontend/editor/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts @@ -3,28 +3,36 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + fileOnlyMapping, + objectToFormData, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { SingleLargePageParameters, defaultParameters, } from "@app/hooks/tools/singleLargePage/useSingleLargePageParameters"; +const ENDPOINT = "/api/v1/general/pdf-to-single-page" satisfies ToolEndpoint; + +// Single large page takes only a file; there are no request parameters to map. +const { toApiParams, fromApiParams } = fileOnlyMapping(); + // Static function that can be used by both the hook and automation executor export const buildSingleLargePageFormData = ( _parameters: SingleLargePageParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - return formData; -}; +): FormData => objectToFormData(toApiParams(), { fileInput: file }); // Static configuration object export const singleLargePageOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildSingleLargePageFormData, + toApiParams, + fromApiParams, operationType: "pdfToSinglePage", - endpoint: "/api/v1/general/pdf-to-single-page", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/split/useSplitOperation.test.ts b/frontend/editor/src/core/hooks/tools/split/useSplitOperation.test.ts new file mode 100644 index 0000000000..4cf8509c5d --- /dev/null +++ b/frontend/editor/src/core/hooks/tools/split/useSplitOperation.test.ts @@ -0,0 +1,212 @@ +import { describe, expect, test } from "vitest"; +import { + buildSplitFormData, + getSplitEndpoint, + splitFromApiParams, + splitToApiParams, +} from "@app/hooks/tools/split/useSplitOperation"; +import { + SplitParameters, + defaultParameters, +} from "@app/hooks/tools/split/useSplitParameters"; +import { SPLIT_METHODS } from "@app/constants/splitConstants"; + +const params = (overrides: Partial): SplitParameters => ({ + ...defaultParameters, + ...overrides, +}); + +describe("splitToApiParams", () => { + test("byPages sends pageNumbers", () => { + expect( + splitToApiParams( + params({ method: SPLIT_METHODS.BY_PAGES, pages: "2,5" }), + ), + ).toEqual({ pageNumbers: "2,5" }); + }); + + test("bySections sends divisions and split mode without custom pages", () => { + expect( + splitToApiParams( + params({ + method: SPLIT_METHODS.BY_SECTIONS, + hDiv: "3", + vDiv: "2", + merge: true, + splitMode: "SPLIT_ALL", + }), + ), + ).toEqual({ + horizontalDivisions: 3, + verticalDivisions: 2, + merge: true, + splitMode: "SPLIT_ALL", + }); + }); + + test("bySections includes pageNumbers only for CUSTOM mode", () => { + expect( + splitToApiParams( + params({ + method: SPLIT_METHODS.BY_SECTIONS, + splitMode: "CUSTOM", + customPages: "1,2", + }), + ), + ).toMatchObject({ splitMode: "CUSTOM", pageNumbers: "1,2" }); + }); + + test.each([ + { method: SPLIT_METHODS.BY_SIZE, splitType: 0 }, + { method: SPLIT_METHODS.BY_PAGE_COUNT, splitType: 1 }, + { method: SPLIT_METHODS.BY_DOC_COUNT, splitType: 2 }, + ])("$method maps to splitType $splitType", ({ method, splitType }) => { + expect(splitToApiParams(params({ method, splitValue: "5" }))).toEqual({ + splitType, + splitValue: "5", + }); + }); + + test("byChapters converts bookmarkLevel to a number", () => { + expect( + splitToApiParams( + params({ + method: SPLIT_METHODS.BY_CHAPTERS, + bookmarkLevel: "2", + includeMetadata: true, + }), + ), + ).toEqual({ + bookmarkLevel: 2, + includeMetadata: true, + allowDuplicates: false, + }); + }); + + test("byPageDivider sends duplexMode", () => { + expect( + splitToApiParams( + params({ method: SPLIT_METHODS.BY_PAGE_DIVIDER, duplexMode: true }), + ), + ).toEqual({ duplexMode: true }); + }); + + test("byPoster maps the factors to the spec's xFactor/yFactor fields", () => { + expect( + splitToApiParams( + params({ + method: SPLIT_METHODS.BY_POSTER, + pageSize: "A4", + xFactor: "3", + yFactor: "2", + rightToLeft: true, + }), + ), + ).toEqual({ pageSize: "A4", xFactor: 3, yFactor: 2, rightToLeft: true }); + }); + + // A cleared numeric field arrives as "". It must fall back to the default, + // not Number("") === 0, which the backend turns into an empty/degenerate PDF. + test("byPoster falls back to the default factor for empty fields", () => { + expect( + splitToApiParams( + params({ method: SPLIT_METHODS.BY_POSTER, xFactor: "", yFactor: "" }), + ), + ).toMatchObject({ xFactor: 2, yFactor: 2 }); + }); + + test("bySections falls back to the default divisions for empty fields", () => { + expect( + splitToApiParams( + params({ method: SPLIT_METHODS.BY_SECTIONS, hDiv: "", vDiv: "" }), + ), + ).toMatchObject({ horizontalDivisions: 2, verticalDivisions: 2 }); + }); + + test("byChapters falls back to the default bookmark level for an empty field", () => { + expect( + splitToApiParams( + params({ method: SPLIT_METHODS.BY_CHAPTERS, bookmarkLevel: "" }), + ), + ).toMatchObject({ bookmarkLevel: 1 }); + }); +}); + +describe("split round-trip", () => { + test.each>([ + { method: SPLIT_METHODS.BY_PAGES, pages: "2,5" }, + { + method: SPLIT_METHODS.BY_SECTIONS, + hDiv: "3", + vDiv: "2", + merge: true, + splitMode: "SPLIT_ALL", + }, + { + method: SPLIT_METHODS.BY_SECTIONS, + splitMode: "CUSTOM", + customPages: "1,2", + }, + { method: SPLIT_METHODS.BY_SIZE, splitValue: "10MB" }, + { method: SPLIT_METHODS.BY_PAGE_COUNT, splitValue: "5" }, + { method: SPLIT_METHODS.BY_DOC_COUNT, splitValue: "3" }, + { + method: SPLIT_METHODS.BY_CHAPTERS, + bookmarkLevel: "2", + includeMetadata: true, + }, + { method: SPLIT_METHODS.BY_PAGE_DIVIDER, duplexMode: true }, + { + method: SPLIT_METHODS.BY_POSTER, + pageSize: "A4", + xFactor: "3", + yFactor: "2", + }, + ])("toApiParams(fromApiParams(x)) reproduces x for %o", (overrides) => { + const api = splitToApiParams(params(overrides)); + const roundTripped = splitToApiParams(params(splitFromApiParams(api))); + + expect(roundTripped).toEqual(api); + }); +}); + +describe("getSplitEndpoint", () => { + test.each([ + { method: SPLIT_METHODS.BY_PAGES, endpoint: "/api/v1/general/split-pages" }, + { + method: SPLIT_METHODS.BY_SECTIONS, + endpoint: "/api/v1/general/split-pdf-by-sections", + }, + { + method: SPLIT_METHODS.BY_SIZE, + endpoint: "/api/v1/general/split-by-size-or-count", + }, + { + method: SPLIT_METHODS.BY_CHAPTERS, + endpoint: "/api/v1/general/split-pdf-by-chapters", + }, + { + method: SPLIT_METHODS.BY_PAGE_DIVIDER, + endpoint: "/api/v1/misc/auto-split-pdf", + }, + { + method: SPLIT_METHODS.BY_POSTER, + endpoint: "/api/v1/general/split-for-poster-print", + }, + ])("$method routes to $endpoint", ({ method, endpoint }) => { + expect(getSplitEndpoint(params({ method }))).toBe(endpoint); + }); +}); + +describe("buildSplitFormData", () => { + test("appends the file and the serialized parameters", () => { + const file = new File(["x"], "test.pdf", { type: "application/pdf" }); + const formData = buildSplitFormData( + params({ method: SPLIT_METHODS.BY_PAGES, pages: "3" }), + file, + ); + + expect(formData.get("fileInput")).toBe(file); + expect(formData.get("pageNumbers")).toBe("3"); + }); +}); diff --git a/frontend/editor/src/core/hooks/tools/split/useSplitOperation.ts b/frontend/editor/src/core/hooks/tools/split/useSplitOperation.ts index bedf83d09e..adeb65546a 100644 --- a/frontend/editor/src/core/hooks/tools/split/useSplitOperation.ts +++ b/frontend/editor/src/core/hooks/tools/split/useSplitOperation.ts @@ -5,115 +5,176 @@ import { useToolOperation, ToolOperationConfig, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { SplitParameters, defaultParameters, } from "@app/hooks/tools/split/useSplitParameters"; -import { SPLIT_METHODS } from "@app/constants/splitConstants"; +import { SPLIT_METHODS, type SplitMethod } from "@app/constants/splitConstants"; import { useToolResources } from "@app/hooks/tools/shared/useToolResources"; -// Static functions that can be used by both the hook and automation executor -export const buildSplitFormData = ( +// Split routes to a different endpoint per method. This map is the single source +// of truth: getSplitEndpoint returns from it, and the mapper types below are +// derived from it, so the endpoint posted and the request shape checked can +// never point at different endpoints. +const SPLIT_ENDPOINTS = { + [SPLIT_METHODS.BY_PAGES]: "/api/v1/general/split-pages", + [SPLIT_METHODS.BY_SECTIONS]: "/api/v1/general/split-pdf-by-sections", + [SPLIT_METHODS.BY_SIZE]: "/api/v1/general/split-by-size-or-count", + [SPLIT_METHODS.BY_PAGE_COUNT]: "/api/v1/general/split-by-size-or-count", + [SPLIT_METHODS.BY_DOC_COUNT]: "/api/v1/general/split-by-size-or-count", + [SPLIT_METHODS.BY_CHAPTERS]: "/api/v1/general/split-pdf-by-chapters", + [SPLIT_METHODS.BY_PAGE_DIVIDER]: "/api/v1/misc/auto-split-pdf", + [SPLIT_METHODS.BY_POSTER]: "/api/v1/general/split-for-poster-print", +} as const satisfies Record; + +type SplitApiParams = ToolApiParams[(typeof SPLIT_ENDPOINTS)[SplitMethod]]; +type SectionsApiParams = + ToolApiParams[(typeof SPLIT_ENDPOINTS)[typeof SPLIT_METHODS.BY_SECTIONS]]; +type PosterApiParams = + ToolApiParams[(typeof SPLIT_ENDPOINTS)[typeof SPLIT_METHODS.BY_POSTER]]; + +// Convert the tool's UI parameters into the request body for the routed endpoint. +export const splitToApiParams = ( parameters: SplitParameters, - file: File, -): FormData => { - const formData = new FormData(); - - formData.append("fileInput", file); - +): SplitApiParams => { // Use BY_PAGES as default if no method is selected const method = parameters.method || SPLIT_METHODS.BY_PAGES; switch (method) { case SPLIT_METHODS.BY_PAGES: - formData.append("pageNumbers", parameters.pages); - break; - case SPLIT_METHODS.BY_SECTIONS: - formData.append("horizontalDivisions", parameters.hDiv); - formData.append("verticalDivisions", parameters.vDiv); - formData.append("merge", (parameters.merge ?? false).toString()); - formData.append("splitMode", parameters.splitMode || "SPLIT_ALL"); + return { pageNumbers: parameters.pages }; + case SPLIT_METHODS.BY_SECTIONS: { + const sections: SectionsApiParams = { + horizontalDivisions: Number(parameters.hDiv || "2"), + verticalDivisions: Number(parameters.vDiv || "2"), + merge: parameters.merge ?? false, + splitMode: (parameters.splitMode || + "SPLIT_ALL") as SectionsApiParams["splitMode"], + }; if (parameters.splitMode === "CUSTOM" && parameters.customPages) { - formData.append("pageNumbers", parameters.customPages); + sections.pageNumbers = parameters.customPages; } - break; + return sections; + } case SPLIT_METHODS.BY_SIZE: - formData.append("splitType", "0"); - formData.append("splitValue", parameters.splitValue); - break; + return { splitType: 0, splitValue: parameters.splitValue }; case SPLIT_METHODS.BY_PAGE_COUNT: - formData.append("splitType", "1"); - formData.append("splitValue", parameters.splitValue); - break; + return { splitType: 1, splitValue: parameters.splitValue }; case SPLIT_METHODS.BY_DOC_COUNT: - formData.append("splitType", "2"); - formData.append("splitValue", parameters.splitValue); - break; + return { splitType: 2, splitValue: parameters.splitValue }; case SPLIT_METHODS.BY_CHAPTERS: - formData.append("bookmarkLevel", parameters.bookmarkLevel); - formData.append( - "includeMetadata", - (parameters.includeMetadata ?? false).toString(), - ); - formData.append( - "allowDuplicates", - (parameters.allowDuplicates ?? false).toString(), - ); - break; + return { + bookmarkLevel: Number(parameters.bookmarkLevel || "1"), + includeMetadata: parameters.includeMetadata ?? false, + allowDuplicates: parameters.allowDuplicates ?? false, + }; case SPLIT_METHODS.BY_PAGE_DIVIDER: - formData.append( - "duplexMode", - (parameters.duplexMode ?? false).toString(), - ); - break; + return { duplexMode: parameters.duplexMode ?? false }; case SPLIT_METHODS.BY_POSTER: - formData.append("pageSize", parameters.pageSize || "A4"); - formData.append("xFactor", parameters.xFactor || "2"); - formData.append("yFactor", parameters.yFactor || "2"); - formData.append( - "rightToLeft", - (parameters.rightToLeft ?? false).toString(), - ); - break; + return { + pageSize: (parameters.pageSize || "A4") as PosterApiParams["pageSize"], + xFactor: Number(parameters.xFactor || "2"), + yFactor: Number(parameters.yFactor || "2"), + rightToLeft: parameters.rightToLeft ?? false, + }; default: throw new Error(`Unknown split method: ${method}`); } - - return formData; }; -export const getSplitEndpoint = (parameters: SplitParameters): string => { - // Default to BY_PAGES endpoint if no method selected yet - if (!parameters.method) { - return "/api/v1/general/split-pages"; +// Reconstruct the tool's UI parameters from a stored request body. The step +// carries no explicit method, so it is inferred from the fields present. +export const splitFromApiParams = ( + apiParams: SplitApiParams, +): Partial => { + if ("pageSize" in apiParams) { + return { + method: SPLIT_METHODS.BY_POSTER, + pageSize: apiParams.pageSize, + xFactor: + apiParams.xFactor !== undefined ? `${apiParams.xFactor}` : undefined, + yFactor: + apiParams.yFactor !== undefined ? `${apiParams.yFactor}` : undefined, + rightToLeft: apiParams.rightToLeft ?? defaultParameters.rightToLeft, + }; } - - switch (parameters.method) { - case null: - case SPLIT_METHODS.BY_PAGES: - return "/api/v1/general/split-pages"; - case SPLIT_METHODS.BY_SECTIONS: - return "/api/v1/general/split-pdf-by-sections"; - case SPLIT_METHODS.BY_SIZE: - case SPLIT_METHODS.BY_PAGE_COUNT: - case SPLIT_METHODS.BY_DOC_COUNT: - return "/api/v1/general/split-by-size-or-count"; - case SPLIT_METHODS.BY_CHAPTERS: - return "/api/v1/general/split-pdf-by-chapters"; - case SPLIT_METHODS.BY_PAGE_DIVIDER: - return "/api/v1/misc/auto-split-pdf"; - case SPLIT_METHODS.BY_POSTER: - return "/api/v1/general/split-for-poster-print"; - default: - throw new Error(`Unknown split method: ${parameters.method}`); + if ("horizontalDivisions" in apiParams || "verticalDivisions" in apiParams) { + return { + method: SPLIT_METHODS.BY_SECTIONS, + hDiv: + apiParams.horizontalDivisions !== undefined + ? `${apiParams.horizontalDivisions}` + : undefined, + vDiv: + apiParams.verticalDivisions !== undefined + ? `${apiParams.verticalDivisions}` + : undefined, + merge: apiParams.merge ?? false, + splitMode: apiParams.splitMode ?? "SPLIT_ALL", + customPages: + apiParams.splitMode === "CUSTOM" + ? apiParams.pageNumbers + : defaultParameters.customPages, + }; } + if ("bookmarkLevel" in apiParams) { + return { + method: SPLIT_METHODS.BY_CHAPTERS, + bookmarkLevel: + apiParams.bookmarkLevel !== undefined + ? `${apiParams.bookmarkLevel}` + : "", + includeMetadata: apiParams.includeMetadata ?? false, + allowDuplicates: apiParams.allowDuplicates ?? false, + }; + } + if ("splitType" in apiParams) { + const methodBySplitType = { + 0: SPLIT_METHODS.BY_SIZE, + 1: SPLIT_METHODS.BY_PAGE_COUNT, + 2: SPLIT_METHODS.BY_DOC_COUNT, + } as const; + return { + method: methodBySplitType[apiParams.splitType as 0 | 1 | 2], + splitValue: apiParams.splitValue ?? "", + }; + } + if ("duplexMode" in apiParams) { + return { + method: SPLIT_METHODS.BY_PAGE_DIVIDER, + duplexMode: apiParams.duplexMode ?? false, + }; + } + const pages = "pageNumbers" in apiParams ? apiParams.pageNumbers : undefined; + return { + method: SPLIT_METHODS.BY_PAGES, + pages: pages ?? defaultParameters.pages, + }; }; +// Static functions that can be used by both the hook and automation executor +export const buildSplitFormData = ( + parameters: SplitParameters, + file: File, +): FormData => + objectToFormData(splitToApiParams(parameters), { fileInput: file }); + +export const getSplitEndpoint = (parameters: SplitParameters): ToolEndpoint => + // Default to BY_PAGES when no method is selected yet. + SPLIT_ENDPOINTS[parameters.method ?? SPLIT_METHODS.BY_PAGES]; + // Static configuration object export const splitOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildSplitFormData, + toApiParams: splitToApiParams, + fromApiParams: splitFromApiParams, operationType: "split", endpoint: getSplitEndpoint, defaultParameters, diff --git a/frontend/editor/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts b/frontend/editor/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts index b14f785574..f607a727f0 100644 --- a/frontend/editor/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts +++ b/frontend/editor/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts @@ -3,29 +3,45 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + objectToFormData, + type ToolApiParams, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { TimestampPdfParameters, defaultParameters, } from "@app/hooks/tools/timestampPdf/useTimestampPdfParameters"; +const ENDPOINT = "/api/v1/security/timestamp-pdf" satisfies ToolEndpoint; +type TimestampPdfApiParams = ToolApiParams[typeof ENDPOINT]; + +export const timestampPdfToApiParams = ( + parameters: TimestampPdfParameters, +): TimestampPdfApiParams => ({ + tsaUrl: parameters.tsaUrl, +}); + +export const timestampPdfFromApiParams = ( + apiParams: TimestampPdfApiParams, +): Partial => ({ + tsaUrl: apiParams.tsaUrl, +}); + export const buildTimestampPdfFormData = ( parameters: TimestampPdfParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - - formData.append("tsaUrl", parameters.tsaUrl); - - return formData; -}; +): FormData => + objectToFormData(timestampPdfToApiParams(parameters), { fileInput: file }); export const timestampPdfOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildTimestampPdfFormData, + toApiParams: timestampPdfToApiParams, + fromApiParams: timestampPdfFromApiParams, operationType: "timestampPdf", - endpoint: "/api/v1/security/timestamp-pdf", + endpoint: ENDPOINT, multiFileEndpoint: false, defaultParameters, } as const; diff --git a/frontend/editor/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts b/frontend/editor/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts index 1e78d2d407..2d3e22fb06 100644 --- a/frontend/editor/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts +++ b/frontend/editor/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts @@ -3,28 +3,36 @@ import { ToolType, useToolOperation, } from "@app/hooks/tools/shared/useToolOperation"; +import { + fileOnlyMapping, + objectToFormData, + type ToolEndpoint, +} from "@app/hooks/tools/shared/toolApiMapping"; import { createStandardErrorHandler } from "@app/utils/toolErrorHandler"; import { UnlockPdfFormsParameters, defaultParameters, } from "@app/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters"; +const ENDPOINT = "/api/v1/misc/unlock-pdf-forms" satisfies ToolEndpoint; + +// Unlock PDF forms takes only a file; there are no request parameters to map. +const { toApiParams, fromApiParams } = fileOnlyMapping(); + // Static function that can be used by both the hook and automation executor export const buildUnlockPdfFormsFormData = ( _parameters: UnlockPdfFormsParameters, file: File, -): FormData => { - const formData = new FormData(); - formData.append("fileInput", file); - return formData; -}; +): FormData => objectToFormData(toApiParams(), { fileInput: file }); // Static configuration object export const unlockPdfFormsOperationConfig = { toolType: ToolType.singleFile, buildFormData: buildUnlockPdfFormsFormData, + toApiParams, + fromApiParams, operationType: "unlockPDFForms", - endpoint: "/api/v1/misc/unlock-pdf-forms", + endpoint: ENDPOINT, defaultParameters, } as const; diff --git a/frontend/editor/src/core/types/toolApiTypes.ts b/frontend/editor/src/core/types/toolApiTypes.ts new file mode 100644 index 0000000000..d62e13b20f --- /dev/null +++ b/frontend/editor/src/core/types/toolApiTypes.ts @@ -0,0 +1,1594 @@ +// AUTO-GENERATED FILE. DO NOT EDIT. +// Generated by editor/scripts/generate-tool-api-types.mts from the Java OpenAPI spec +// (SwaggerDoc.json). Regenerate with: task frontend:tool-models +// Tools that take only a file input have no parameters; their model is Record. + +export interface AddAttachmentRequest { + /** + * The image file to be overlaid onto the PDF. + */ + attachments: string[]; + /** + * Convert the resulting PDF to PDF/A-3b format after adding attachments + */ + convertToPdfA3b?: boolean; +} +export interface AddCommentsRequest { + /** + * JSON array of comment specs. Each element has: {pageIndex, x, y, width, height, text, author?, subject?}. Coordinates are PDF user-space with origin at the page's bottom-left. + */ + comments: string; +} +export interface AddPageNumbersRequest { + /** + * Custom margin: small/medium/large/x-large + */ + customMargin?: "small" | "medium" | "large" | "x-large"; + /** + * Custom text pattern. Available variables: {n}=current page number, {total}=total pages, {filename}=original filename + */ + customText?: string; + /** + * Hex colour for page numbers (e.g. #FF0000) + */ + fontColor?: string; + /** + * Font size for page numbers + */ + fontSize?: number; + /** + * Font type for page numbers + */ + fontType: "helvetica" | "courier" | "times"; + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; + /** + * Which pages to number (e.g. '1,3-5,7' or 'all') + */ + pagesToNumber?: string; + /** + * Position: 1-9 representing positions on the page (1=top-left, 2=top-center, 3=top-right, 4=middle-left, 5=middle-center, 6=middle-right, 7=bottom-left, 8=bottom-center, 9=bottom-right) + */ + position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; + /** + * Starting number for page numbering + */ + startingNumber?: number; + /** + * Zero-padding width for page numbers (Bates Stamping). Set to 0 to disable padding + */ + zeroPad?: number; +} +export interface AddPasswordRequest { + /** + * The length of the encryption key + */ + keyLength?: 40 | 128 | 256; + /** + * The owner password to be added to the PDF file (Restricts what can be done with the document once it is opened) + */ + ownerPassword?: string; + /** + * The password to be added to the PDF file (Restricts the opening of the document itself.) + */ + password?: string; + /** + * Whether document assembly is prevented + */ + preventAssembly?: boolean; + /** + * Whether content extraction is prevented + */ + preventExtractContent?: boolean; + /** + * Whether content extraction for accessibility is prevented + */ + preventExtractForAccessibility?: boolean; + /** + * Whether form filling is prevented + */ + preventFillInForm?: boolean; + /** + * Whether document modification is prevented + */ + preventModify?: boolean; + /** + * Whether modification of annotations is prevented + */ + preventModifyAnnotations?: boolean; + /** + * Whether printing of the document is prevented + */ + preventPrinting?: boolean; + /** + * Whether faithful printing is prevented + */ + preventPrintingFaithful?: boolean; +} +export interface AddStampRequest { + /** + * The selected alphabet of the stamp text + */ + alphabet?: "roman" | "arabic" | "japanese" | "korean" | "chinese" | "thai"; + /** + * The color of the stamp text + */ + customColor?: string; + /** + * Specifies the margin size for the stamp. + */ + customMargin?: "small" | "medium" | "large" | "x-large"; + /** + * The font size of the stamp text and image in points. + */ + fontSize?: number; + /** + * The opacity of the stamp (0.0 - 1.0) + */ + opacity?: number; + /** + * Override X coordinate for stamp placement. If set, it will override the position-based calculation. Negative value means no override. + */ + overrideX?: number; + /** + * Override Y coordinate for stamp placement. If set, it will override the position-based calculation. Negative value means no override. + */ + overrideY?: number; + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; + /** + * Position for stamp placement based on a 1-9 grid (1: bottom-left, 2: bottom-center, 3: bottom-right, 4: middle-left, 5: middle-center, 6: middle-right, 7: top-left, 8: top-center, 9: top-right) + */ + position?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; + /** + * The rotation of the stamp in degrees + */ + rotation?: number; + stampImage?: string; + /** + * The stamp text + */ + stampText?: string; + /** + * The stamp type (text or image) + */ + stampType: "text" | "image"; +} +export interface AddWatermarkRequest { + /** + * The selected alphabet + */ + alphabet?: "roman" | "arabic" | "japanese" | "korean" | "chinese" | "thai"; + /** + * Convert the redacted PDF to an image + */ + convertPDFToImage?: boolean; + /** + * The color for watermark + */ + customColor?: string; + /** + * The font size of the watermark text + */ + fontSize?: number; + /** + * The height spacer between watermark elements + */ + heightSpacer?: number; + /** + * The opacity of the watermark (0.0 - 1.0) + */ + opacity?: number; + /** + * The rotation of the watermark in degrees + */ + rotation?: number; + watermarkImage?: string; + /** + * The watermark text + */ + watermarkText?: string; + /** + * The watermark type (text or image) + */ + watermarkType: "text" | "image"; + /** + * The width spacer between watermark elements + */ + widthSpacer?: number; +} +export interface AutoSplitPdfRequest { + /** + * Flag indicating if the duplex mode is active, where the page after the divider also gets removed. + */ + duplexMode?: boolean; +} +export interface BookletImpositionRequest { + /** + * Boolean for if you wish to add border around the pages + */ + addBorder?: boolean; + /** + * Add gutter margin (inner margin for binding) + */ + addGutter?: boolean; + /** + * Generate both front and back sides (double-sided printing) + */ + doubleSided?: boolean; + /** + * For manual duplex: which pass to generate + */ + duplexPass?: "BOTH" | "FIRST" | "SECOND"; + /** + * Flip back sides for short-edge duplex printing (default is long-edge) + */ + flipOnShortEdge?: boolean; + /** + * Gutter margin size in points (used when addGutter is true) + */ + gutterSize?: number; + /** + * The number of pages per side for booklet printing (always 2 for proper booklet). + */ + pagesPerSheet?: 2; + /** + * The spine location for the booklet. + */ + spineLocation?: "LEFT" | "RIGHT"; +} +export interface ConvertCbrToPdfRequest { + /** + * Optimize the output PDF for ebook reading using Ghostscript + */ + optimizeForEbook?: boolean; +} +export interface ConvertCbzToPdfRequest { + /** + * Optimize the output PDF for ebook reading using Ghostscript + */ + optimizeForEbook?: boolean; +} +export interface ConvertEbookToPdfRequest { + /** + * Embed all fonts from the eBook into the generated PDF + */ + embedAllFonts?: true | false; + /** + * Add page numbers to the generated PDF + */ + includePageNumbers?: true | false; + /** + * Add a generated table of contents to the resulting PDF + */ + includeTableOfContents?: true | false; + /** + * Optimize the PDF for eBook reading (smaller file size, better rendering on eInk devices) + */ + optimizeForEbook?: true | false; +} +export type ConvertPdfHtmlRequest = Record; +export type ConvertPdfMarkdownRequest = Record; +export type ConvertPdfTextEditorMetadataRequest = Record; +export interface ConvertPdfTextEditorRequest { + lightweight?: boolean; +} +export interface ConvertPdfToCbrRequest { + /** + * The DPI (Dots Per Inch) for rendering PDF pages as images + */ + dpi: number; +} +export interface ConvertPdfToCbzRequest { + /** + * The DPI (Dots Per Inch) for rendering PDF pages as images + */ + dpi: number; +} +export interface ConvertPdfToEpubRequest { + /** + * Detect headings that look like chapters and insert EPUB page breaks. + */ + detectChapters?: true | false; + /** + * Choose the output format for the ebook. + */ + outputFormat?: "EPUB" | "AZW3"; + /** + * Choose an output profile optimized for the reader device. + */ + targetDevice?: "TABLET_PHONE_IMAGES" | "KINDLE_EINK_TEXT"; +} +export type ConvertPdfXmlRequest = Record; +export interface ConvertToImageRequest { + /** + * The color type of the output image(s) + */ + colorType?: "color" | "greyscale" | "blackwhite"; + /** + * The DPI (dots per inch) for the output image(s) + */ + dpi?: number; + /** + * The output image format + */ + imageFormat?: "png" | "jpeg" | "jpg" | "gif" | "webp"; + /** + * Include annotations such as comments in the output image(s) + */ + includeAnnotations?: boolean; + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; + /** + * Choose between a single image containing all pages or separate images for each page + */ + singleOrMultiple?: "single" | "multiple"; +} +export interface ConvertToPdfRequest { + /** + * Whether to automatically rotate the images to better fit the PDF page + */ + autoRotate?: boolean; + /** + * The color type of the output image(s) + */ + colorType?: "color" | "greyscale" | "blackwhite"; + /** + * Option to determine how the image will fit onto the page + */ + fitOption?: "fillPage" | "fitDocumentToImage" | "maintainAspectRatio"; +} +export interface CropPdfForm { + /** + * Enable auto-crop to detect and remove white space + */ + autoCrop?: boolean; + /** + * The height of the crop area + */ + height?: number; + /** + * Whether to remove text outside the crop area (keeps images) + */ + removeDataOutsideCrop?: boolean; + /** + * The width of the crop area + */ + width?: number; + /** + * The x-coordinate of the top-left corner of the crop area + */ + x?: number; + /** + * The y-coordinate of the top-left corner of the crop area + */ + y?: number; +} +export interface DeleteAttachmentRequest { + /** + * The name of the attachment to delete + */ + attachmentName: string; +} +export interface EditTableOfContentsRequest { + /** + * Bookmark structure in JSON format + */ + bookmarkData?: string; + /** + * Whether to replace existing bookmarks or append to them + */ + replaceExisting?: boolean; +} +export interface EditTextRequest { + /** + * Ordered list of find/replace operations. Each replaces every occurrence on the selected pages, in order; later operations see the result of earlier ones (so 'foo'->'foos' then 'foos'->'bars' turns 'foo' into 'bars'). + */ + edits: EditTextOperation[]; + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; + /** + * Whether matches must be whole words (boundaries determined by non-word characters) + */ + wholeWordSearch?: boolean; +} +/** + * Ordered list of find/replace operations. Each replaces every occurrence on the selected pages, in order; later operations see the result of earlier ones (so 'foo'->'foos' then 'foos'->'bars' turns 'foo' into 'bars'). + */ +export interface EditTextOperation { + /** + * The literal text to find. + */ + find: string; + /** + * The replacement text. May be empty to delete the matched text. + */ + replace: string; +} +export interface EmlToPdfRequest { + /** + * Download HTML intermediate file instead of PDF + */ + downloadHtml?: boolean; + /** + * Include CC and BCC recipients in header (if available) + */ + includeAllRecipients?: boolean; + /** + * Include email attachments in the PDF output + */ + includeAttachments?: boolean; + /** + * Maximum attachment size in MB to include (default 10MB, range: 1-100) + */ + maxAttachmentSizeMB?: number; +} +export type ExtractAttachmentsRequest = Record; +export interface ExtractHeaderRequest { + /** + * Flag indicating whether to use the first text as a fallback if no suitable title is found. Defaults to false. + */ + useFirstTextAsFallback?: boolean; +} +export interface ExtractImageScansRequest { + /** + * The angle threshold for the image scan extraction + */ + angleThreshold?: number; + /** + * The border size for the image scan extraction + */ + borderSize?: number; + /** + * The minimum area for the image scan extraction + */ + minArea?: number; + /** + * The minimum contour area for the image scan extraction + */ + minContourArea?: number; + /** + * The tolerance for the image scan extraction + */ + tolerance?: number; +} +export interface FlattenRequest { + /** + * True to flatten only the forms, false to flatten full PDF (Convert page to image) + */ + flattenOnlyForms?: boolean; + /** + * Optional DPI for page rendering when flattening the full document. + */ + renderDpi?: number; +} +export interface GeneralExtractBookmarksRequest { + file: string; +} +export type GeneralFile = Record; +export type GeneralPdfToSinglePageRequest = Record; +export type GeneralRemoveImagePdfRequest = Record; +export interface HTMLToPdfRequest { + /** + * Zoom level for displaying the website. Default is '1'. + */ + zoom?: number; +} +export type ListAttachmentsRequest = Record; +export interface ManualRedactPdfRequest { + /** + * Convert the redacted PDF to an image + */ + convertPDFToImage?: boolean; + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; + /** + * The color used to fully redact certain pages + */ + pageRedactionColor?: string; + /** + * A list of areas that should be redacted + */ + redactions: RedactionArea[]; +} +/** + * A list of areas that should be redacted + */ +export interface RedactionArea { + /** + * The color used to redact the specified area. + */ + color?: string; + /** + * The height of the area to be redacted. + */ + height?: number; + /** + * The page on which the area should be redacted. + */ + page?: number; + /** + * The width of the area to be redacted. + */ + width?: number; + /** + * The left edge point of the area to be redacted. + */ + x?: number; + /** + * The top edge point of the area to be redacted. + */ + y?: number; +} +export interface MergeMultiplePagesRequest { + /** + * Boolean for if you wish to add border around the pages + */ + addBorder?: boolean; + /** + * The arrangement of pages on the sheet: BY_ROWS fills pages row by row, while BY_COLUMNS fills pages column by column. + */ + arrangement?: "BY_ROWS" | "BY_COLUMNS"; + /** + * Border width (in points) to apply around each page when merging + */ + borderWidth?: number; + /** + * Bottom margin (in points) to apply to the output pages when merging + */ + bottomMargin?: number; + /** + * Number of columns + */ + cols?: number; + /** + * Inner margin (in points) to apply around each page when merging + */ + innerMargin?: number; + /** + * Left margin (in points) to apply to the output pages when merging + */ + leftMargin?: number; + /** + * Input mode: DEFAULT uses pagesPerSheet; CUSTOM uses explicit cols x rows. + */ + mode?: "DEFAULT" | "CUSTOM"; + /** + * The orientation of the output PDF pages + */ + orientation?: "PORTRAIT" | "LANDSCAPE"; + /** + * The number of pages to fit onto a single sheet in the output PDF. + */ + pagesPerSheet?: 2 | 4 | 9 | 16; + /** + * The direction in which pages are arranged on the sheet: LTR (left-to-right) or RTL (right-to-left). + */ + readingDirection?: "LTR" | "RTL"; + /** + * Right margin (in points) to apply to the output pages when merging + */ + rightMargin?: number; + /** + * Number of rows + */ + rows?: number; + /** + * Top margin (in points) to apply to the output pages when merging + */ + topMargin?: number; +} +export interface MergePdfsRequest { + /** + * JSON array of client-provided IDs for each uploaded file (same order as fileInput) + */ + clientFileIds?: string; + fileOrder?: string; + /** + * Flag indicating whether to generate a table of contents for the merged PDF. If true, a table of contents will be created using the input filenames as chapter names. + */ + generateToc?: boolean; + /** + * Flag indicating whether to remove certification signatures from the merged PDF. If true, all certification signatures will be removed from the final merged document. + */ + removeCertSign?: boolean; + /** + * The type of sorting to be applied on the input files before merging. + */ + sortType?: + | "orderProvided" + | "byFileName" + | "byDateModified" + | "byDateCreated" + | "byPDFTitle"; +} +export interface MetadataRequest { + /** + * Map list of key and value of custom parameters. Note these must start with customKey and customValue if they are non-standard + */ + allRequestParams?: { + /** + * Map list of key and value of custom parameters. Note these must start with customKey and customValue if they are non-standard + */ + [k: string]: string | undefined; + }; + /** + * The author of the document + */ + author?: string; + /** + * The creation date of the document (format: yyyy/MM/dd HH:mm:ss) + */ + creationDate?: string; + /** + * The creator of the document + */ + creator?: string; + /** + * Delete all metadata if set to true + */ + deleteAll?: boolean; + /** + * The keywords for the document + */ + keywords?: string; + /** + * The modification date of the document (format: yyyy/MM/dd HH:mm:ss) + */ + modificationDate?: string; + /** + * The producer of the document + */ + producer?: string; + /** + * The subject of the document + */ + subject?: string; + /** + * The title of the document + */ + title?: string; + /** + * The trapped status of the document + */ + trapped?: "True" | "False" | "Unknown"; +} +export type MiscDecompressPdfRequest = Record; +export type MiscRepairRequest = Record; +export type MiscShowJavascriptRequest = Record; +export type MiscUnlockPdfFormsRequest = Record; +export interface OptimizePdfRequest { + /** + * The expected output size, e.g. '100MB', '25KB', etc. + */ + expectedOutputSize?: string; + /** + * Whether to convert the PDF to grayscale. Default is false. + */ + grayscale?: boolean; + /** + * Whether to convert images to high-contrast line art using ImageMagick. Default is false. + */ + lineArt?: boolean; + /** + * Edge detection strength to use for line art conversion (1-3). This maps to ImageMagick's -edge radius. + */ + lineArtEdgeLevel?: 1 | 2 | 3; + /** + * Threshold to use for line art conversion (0-100). + */ + lineArtThreshold?: number; + /** + * Whether to linearize the PDF for faster web viewing. Default is false. + */ + linearize?: boolean; + /** + * Whether to normalize the PDF content for better compatibility. Default is false. + */ + normalize?: boolean; + /** + * The level of optimization to apply to the PDF file. Higher values indicate greater compression but may reduce quality. + */ + optimizeLevel: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; +} +export interface OverlayImageRequest { + /** + * Whether to overlay the image onto every page of the PDF. + */ + everyPage?: boolean; + imageFile: string; + /** + * The x-coordinate at which to place the top-left corner of the image. + */ + x?: number; + /** + * The y-coordinate at which to place the top-left corner of the image. + */ + y?: number; +} +export interface OverlayPdfsRequest { + /** + * An array of integers specifying the number of times each corresponding overlay file should be applied in the 'FixedRepeatOverlay' mode. This should match the length of the overlayFiles array. + */ + counts?: number[]; + /** + * An array of PDF files to be used as overlays on the base PDF. The order in these files is applied based on the selected mode. + */ + overlayFiles: string[]; + /** + * The mode of overlaying: 'SequentialOverlay' for sequential application, 'InterleavedOverlay' for round-robin application, 'FixedRepeatOverlay' for fixed repetition based on provided counts + */ + overlayMode: + | "SequentialOverlay" + | "InterleavedOverlay" + | "FixedRepeatOverlay"; + /** + * Overlay position 0 is Foregound, 1 is Background + */ + overlayPosition: 0 | 1; +} +export interface PDFExtractImagesRequest { + /** + * The output image format e.g., 'png', 'jpeg', or 'gif' + */ + format?: "png" | "jpeg" | "gif"; +} +export interface PDFPasswordRequest { + /** + * The password of the PDF file + */ + password?: string; +} +export type PDFVerificationRequest = Record; +export interface PDFWithPageNums { + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; +} +export interface PdfToPdfARequest { + /** + * The output format type (PDF/A or PDF/X) + */ + outputFormat: + | "pdfa" + | "pdfa-1" + | "pdfa-2" + | "pdfa-2b" + | "pdfa-3" + | "pdfa-3b" + | "pdfx"; + /** + * If true, the conversion will fail if the output is not perfectly compliant + */ + strict?: boolean; +} +export interface PdfToPresentationRequest { + /** + * The output Presentation format + */ + outputFormat: "ppt" | "pptx" | "odp"; +} +export interface PdfToTextOrRTFRequest { + /** + * The output Text or RTF format + */ + outputFormat: "rtf" | "txt"; +} +export interface PdfToWordRequest { + /** + * The output Word document format + */ + outputFormat: "doc" | "docx" | "odt"; +} +export interface PdfVectorExportRequest { + /** + * Target vector format extension + */ + outputFormat?: "eps" | "ps" | "pcl" | "xps"; + /** + * Apply Ghostscript prepress settings + */ + prepress?: true | false; +} +export interface Pkcs11CertificatesRequest { + libraryPath?: string; + pin?: string; + slot?: number; +} +export interface PosterPdfRequest { + /** + * Target page size for output chunks (e.g., 'A4', 'Letter', 'A3') + */ + pageSize: "A4" | "Letter" | "A3" | "A5" | "Legal" | "Tabloid"; + /** + * Split right-to-left instead of left-to-right + */ + rightToLeft?: boolean; + /** + * Horizontal decimation factor (how many columns to split into) + */ + xFactor?: number; + /** + * Vertical decimation factor (how many rows to split into) + */ + yFactor?: number; +} +export interface ProcessPdfWithOcrRequest { + /** + * Clean the input file if set to true + */ + clean?: boolean; + /** + * Clean the final output if set to true + */ + cleanFinal?: boolean; + /** + * Deskew the input file if set to true + */ + deskew?: boolean; + /** + * List of languages to use in OCR processing, e.g., 'eng', 'deu' + */ + languages?: string[]; + /** + * Specify the OCR render type, either 'hocr' or 'sandwich' + */ + ocrRenderType?: "hocr" | "sandwich"; + /** + * Specify the OCR type, e.g., 'skip-text', 'force-ocr', or 'Normal' + */ + ocrType: "skip-text" | "force-ocr" | "Normal"; + /** + * Remove images from the output PDF if set to true + */ + removeImagesAfter?: boolean; + /** + * Include OCR text in a sidecar text file if set to true + */ + sidecar?: boolean; +} +export interface RearrangePagesRequest { + /** + * The custom mode for page rearrangement. Valid values are: + * CUSTOM: Uses order defined in PageNums DUPLICATE: Duplicate pages n times (if Page order defined as 4, then duplicates each page 4 times)REVERSE_ORDER: Reverses the order of all pages. + * DUPLEX_SORT: Sorts pages as if all fronts were scanned then all backs in reverse (1, n, 2, n-1, ...). BOOKLET_SORT: Arranges pages for booklet printing (last, first, second, second last, ...). + * ODD_EVEN_SPLIT: Splits and arranges pages into odd and even numbered pages. + * REMOVE_FIRST: Removes the first page. + * REMOVE_LAST: Removes the last page. + * REMOVE_FIRST_AND_LAST: Removes both the first and the last pages. + * + */ + customMode?: + | "CUSTOM" + | "REVERSE_ORDER" + | "DUPLEX_SORT" + | "BOOKLET_SORT" + | "SIDE_STITCH_BOOKLET_SORT" + | "ODD_EVEN_SPLIT" + | "REMOVE_FIRST" + | "REMOVE_LAST" + | "REMOVE_FIRST_AND_LAST" + | "DUPLICATE"; + /** + * The pages to select, Supports ranges (e.g., '1,3,5-9'), or 'all' or functions in the format 'an+b' where 'a' is the multiplier of the page number 'n', and 'b' is a constant (e.g., '2n+1', '3n', '6n-5') + */ + pageNumbers?: string; +} +export interface RedactExecuteRequest { + /** + * Rectangular areas to black out, each defined by a page number and bounding box coordinates. + */ + imageBoxes?: ImageBox[]; + /** + * Text ranges to redact by specifying a start and end anchor phrase. All content between the two phrases (inclusive) is redacted. Anchors work best when short and unique. They must appear verbatim in the document. + */ + ranges?: TextRange[]; + /** + * 1-indexed page numbers to redact all detected images from. Pass an empty list to redact images from every page. Omit or pass null to skip image redaction entirely. + */ + redactImagePages?: number[]; + /** + * Regex patterns to match and redact. Each match anywhere in the document is blacked out. Uses Java/PCRE regex syntax. Well-suited for strings that follow known patterns, like phone numbers, email addresses, national ID numbers, or dates (which can appear with different separators, optional country codes, etc.). For fixed known strings such as names, use textValues instead. + */ + regexPatterns?: string[]; + style?: RedactStyle; + /** + * Exact strings to find and black out. One entry per phrase to redact. Best for known names, identifiers, and specific text found in the document. + */ + textValues?: string[]; + /** + * 1-indexed page numbers to wipe entirely (all content removed from those pages). + */ + wipePages?: number[]; +} +/** + * Rectangular areas to black out, each defined by a page number and bounding box coordinates. + */ +export interface ImageBox { + /** + * 0-indexed page number (first page = 0). + */ + pageIndex: number; + /** + * Left x coordinate of the redaction rectangle in PDF user-space points. + */ + x1: number; + /** + * Right x coordinate of the redaction rectangle in PDF user-space points. + */ + x2: number; + /** + * Top y coordinate of the redaction rectangle in PDF user-space points. + */ + y1: number; + /** + * Bottom y coordinate of the redaction rectangle in PDF user-space points. + */ + y2: number; +} +/** + * Text ranges to redact by specifying a start and end anchor phrase. All content between the two phrases (inclusive) is redacted. Anchors work best when short and unique. They must appear verbatim in the document. + */ +export interface TextRange { + /** + * A short, distinctive phrase (5–15 words) that marks where redaction ends (inclusive). Must appear verbatim in the document. Shorter phrases match more reliably. + */ + endString: string; + /** + * A short, distinctive phrase (5–15 words) that marks where redaction begins (inclusive). Must appear verbatim in the document — e.g. a section heading or a unique sentence fragment. + */ + startString: string; +} +/** + * Redaction style options + */ +export interface RedactStyle { + /** + * Hex redaction box color + */ + color?: string; + /** + * Rasterize output to prevent text extraction + */ + convertToImage?: boolean; + /** + * Extra padding around each box in points + */ + padding?: number; + /** + * Execution strategy hint for the redaction pipeline + */ + strategy?: "AUTO" | "OVERLAY_ONLY" | "IMAGE_FINALIZE"; +} +export interface RedactPdfRequest { + /** + * Convert the redacted PDF to an image + */ + convertPDFToImage?: boolean; + /** + * Custom padding for redaction + */ + customPadding: number; + /** + * List of text to redact from the PDF + */ + listOfText?: string; + /** + * The color for redaction + */ + redactColor?: string; + /** + * Whether to use regex for the listOfText + */ + useRegex?: boolean; + /** + * Whether to use whole word search + */ + wholeWordSearch?: boolean; +} +export interface RemoveBlankPagesRequest { + /** + * The threshold value to determine blank pages + */ + threshold?: number; + /** + * The percentage of white color on a page to consider it as blank + */ + whitePercent?: number; +} +export interface RenameAttachmentRequest { + /** + * The current name of the attachment to rename + */ + attachmentName: string; + /** + * The new name for the attachment + */ + newName: string; +} +export interface ReplaceAndInvertColorRequest { + /** + * If CUSTOM_COLOR option selected, then pick the custom color for background. Expected color value should be 24bit decimal value of a color + */ + backGroundColor?: string; + /** + * If HIGH_CONTRAST_COLOR option selected, then pick the default color option for text and background. + */ + highContrastColorCombination?: + | "WHITE_TEXT_ON_BLACK" + | "BLACK_TEXT_ON_WHITE" + | "YELLOW_TEXT_ON_BLACK" + | "GREEN_TEXT_ON_BLACK"; + /** + * Replace and Invert color options of a pdf. + */ + replaceAndInvertOption?: + | "HIGH_CONTRAST_COLOR" + | "CUSTOM_COLOR" + | "FULL_INVERSION" + | "COLOR_SPACE_CONVERSION"; + /** + * If CUSTOM_COLOR option selected, then pick the custom color for text. Expected color value should be 24bit decimal value of a color + */ + textColor?: string; +} +export interface RotatePDFRequest { + /** + * The clockwise angle by which to rotate all pages in the PDF file. Must be a multiple of 90. + */ + angle: 0 | 90 | 180 | 270; +} +export interface SanitizePdfRequest { + /** + * Remove embedded files from the PDF + */ + removeEmbeddedFiles?: boolean; + /** + * Remove fonts from the PDF + */ + removeFonts?: boolean; + /** + * Remove JavaScript actions from the PDF + */ + removeJavaScript?: boolean; + /** + * Remove links from the PDF + */ + removeLinks?: boolean; + /** + * Remove document info metadata from the PDF + */ + removeMetadata?: boolean; + /** + * Remove XMP metadata from the PDF + */ + removeXMPMetadata?: boolean; +} +export interface ScalePagesRequest { + /** + * Orientation to apply to the target page size. Ignored when pageSize is KEEP. + */ + orientation?: "PORTRAIT" | "LANDSCAPE"; + /** + * The scale of pages in the output PDF. Acceptable values are A0-A6, LETTER, LEGAL, KEEP. + */ + pageSize: + | "A0" + | "A1" + | "A2" + | "A3" + | "A4" + | "A5" + | "A6" + | "LETTER" + | "LEGAL" + | "KEEP"; + /** + * The scale of the content on the pages of the output PDF. Acceptable values are floats. + */ + scaleFactor?: number; +} +export interface ScannerEffectRequest { + /** + * Whether advanced settings are enabled + */ + advancedEnabled?: boolean; + /** + * Blur amount (0 = none, higher = more blur) + */ + blur?: number; + /** + * Border thickness in pixels + */ + border?: number; + /** + * Brightness multiplier (1.0 = no change) + */ + brightness?: number; + /** + * Colorspace for output image + */ + colorspace?: "grayscale" | "color"; + /** + * Contrast multiplier (1.0 = no change) + */ + contrast?: number; + /** + * Noise amount (0 = none, higher = more noise) + */ + noise?: number; + /** + * Scan quality preset + */ + quality: "low" | "medium" | "high"; + /** + * Rendering resolution in DPI + */ + resolution?: number; + /** + * Base rotation in degrees + */ + rotate?: number; + /** + * Random rotation variance in degrees + */ + rotateVariance?: number; + /** + * Rotation preset + */ + rotation: "none" | "slight" | "moderate" | "severe"; + rotationValue?: number; + /** + * Simulate yellowed paper + */ + yellowish?: boolean; +} +export interface SecurityCertSignSessionsRequest { + file: string; + request?: WorkflowCreationRequest; +} +export interface WorkflowCreationRequest { + documentName?: string; + dueDate?: string; + message?: string; + ownerEmail?: string; + participantEmails?: string[]; + participantUserIds?: number[]; + workflowMetadata?: string; + workflowType?: "SIGNING" | "REVIEW" | "APPROVAL"; +} +export interface SecurityCertSignValidateCertificateRequest { + certType: string; + jksFile?: string; + p12File?: string; + password?: string; +} +export type SecurityGetInfoOnPdfRequest = Record; +export type SecurityRemoveCertSignRequest = Record; +export interface SignPDFWithCertRequest { + /** + * The alias of the certificate to sign with. Required for WINDOWS_STORE and recommended for PKCS11 tokens holding multiple certificates. + */ + alias?: string; + certFile?: string; + /** + * The type of the digital certificate. WINDOWS_STORE and PKCS11 are hardware-backed and only available in the desktop app. + */ + certType: + | "PEM" + | "PKCS12" + | "PFX" + | "JKS" + | "SERVER" + | "WINDOWS_STORE" + | "PKCS11"; + jksFile?: string; + /** + * The location where the PDF is signed + */ + location?: string; + /** + * The name of the signer + */ + name?: string; + p12File?: string; + /** + * The page number where the signature should be visible. This is required if showSignature is set to true + */ + pageNumber?: number; + /** + * The password for the keystore / private key, or the token PIN for PKCS11 + */ + password?: string; + /** + * Absolute path to the PKCS#11 driver library (required for PKCS11 type). Must be an allowed driver - a detected one or configured via STIRLING_PKCS11_LIBRARIES. + */ + pkcs11LibraryPath?: string; + /** + * Optional PKCS#11 slot index. When omitted the first slot with a token is used. + */ + pkcs11Slot?: number; + privateKeyFile?: string; + /** + * The reason for signing the PDF + */ + reason?: string; + /** + * Whether to visually show a signature logo along with the signature + */ + showLogo?: boolean; + /** + * Whether to visually show the signature in the PDF file + */ + showSignature?: boolean; +} +export interface SignatureValidationRequest { + certFile?: string; +} +export interface SplitPagesRequest { + /** + * Split points - page numbers after which the PDF will be cut. For example, `"2"` produces two documents (pages 1-2 and pages 3+); `"2,5"` produces three (pages 1-2, 3-5, 6+). Supports ranges (e.g. `"1,3,5-9"` splits after pages 1, 3, 5, 6, 7, 8, 9, yielding 8 documents), `"all"` (split after every page), or functions like `"2n+1"`, `"3n"`, `"6n-5"`. + */ + pageNumbers?: string; +} +export interface SplitPdfByChaptersRequest { + /** + * Whether to allow duplicates or not + */ + allowDuplicates?: boolean; + /** + * Maximum bookmark level required + */ + bookmarkLevel?: number; + /** + * Whether to include Metadata or not + */ + includeMetadata?: boolean; +} +export interface SplitPdfBySectionsRequest { + /** + * Number of horizontal divisions for each PDF page + */ + horizontalDivisions?: number; + /** + * Merge the split documents into a single PDF + */ + merge?: boolean; + /** + * Pages to be split by section + */ + pageNumbers?: string; + /** + * Modes for page split. Valid values are: + * SPLIT_ALL_EXCEPT_FIRST_AND_LAST: Splits all except the first and the last pages. + * SPLIT_ALL_EXCEPT_FIRST: Splits all except the first page. + * SPLIT_ALL_EXCEPT_LAST: Splits all except the last page. + * SPLIT_ALL: Splits all pages. + * CUSTOM: Custom split. + * + */ + splitMode?: + | "CUSTOM" + | "SPLIT_ALL_EXCEPT_FIRST_AND_LAST" + | "SPLIT_ALL_EXCEPT_FIRST" + | "SPLIT_ALL_EXCEPT_LAST" + | "SPLIT_ALL"; + /** + * Number of vertical divisions for each PDF page + */ + verticalDivisions?: number; +} +export interface SplitPdfBySizeOrCountRequest { + /** + * Determines the type of split: 0 for size, 1 for page count, 2 for document count + */ + splitType?: number; + /** + * Value for split: size in MB (e.g., '10MB') or number of pages (e.g., '5') + */ + splitValue?: string; +} +export interface SvgToPdfRequest { + /** + * Whether to combine all SVG files into a single PDF (each SVG as a separate page) or create separate PDF files for each SVG. + */ + combineIntoSinglePdf?: boolean; +} +export interface TimestampPdfRequest { + /** + * URL of the RFC 3161 Time Stamp Authority (TSA) server. Must be one of the built-in presets (DigiCert, Sectigo, SSL.com, FreeTSA, MeSign) or an admin-configured URL in settings.yml (security.timestamp.customTsaUrls). If omitted, the server default is used. + */ + tsaUrl?: string; +} +export interface UrlToPdfRequest { + /** + * The input URL to be converted to a PDF file + */ + urlInput: string; +} + +/** Endpoint path for a generated tool operation (the operation identity across languages). */ +export type ToolEndpoint = + | "/api/v1/convert/cbr/pdf" + | "/api/v1/convert/cbz/pdf" + | "/api/v1/convert/ebook/pdf" + | "/api/v1/convert/eml/pdf" + | "/api/v1/convert/file/pdf" + | "/api/v1/convert/html/pdf" + | "/api/v1/convert/img/pdf" + | "/api/v1/convert/markdown/pdf" + | "/api/v1/convert/pdf/cbr" + | "/api/v1/convert/pdf/cbz" + | "/api/v1/convert/pdf/csv" + | "/api/v1/convert/pdf/epub" + | "/api/v1/convert/pdf/html" + | "/api/v1/convert/pdf/img" + | "/api/v1/convert/pdf/markdown" + | "/api/v1/convert/pdf/pdfa" + | "/api/v1/convert/pdf/presentation" + | "/api/v1/convert/pdf/text" + | "/api/v1/convert/pdf/text-editor" + | "/api/v1/convert/pdf/text-editor/metadata" + | "/api/v1/convert/pdf/vector" + | "/api/v1/convert/pdf/word" + | "/api/v1/convert/pdf/xlsx" + | "/api/v1/convert/pdf/xml" + | "/api/v1/convert/svg/pdf" + | "/api/v1/convert/text-editor/pdf" + | "/api/v1/convert/url/pdf" + | "/api/v1/convert/vector/pdf" + | "/api/v1/general/booklet-imposition" + | "/api/v1/general/crop" + | "/api/v1/general/edit-table-of-contents" + | "/api/v1/general/edit-text" + | "/api/v1/general/extract-bookmarks" + | "/api/v1/general/merge-pdfs" + | "/api/v1/general/multi-page-layout" + | "/api/v1/general/overlay-pdfs" + | "/api/v1/general/pdf-to-single-page" + | "/api/v1/general/rearrange-pages" + | "/api/v1/general/remove-image-pdf" + | "/api/v1/general/remove-pages" + | "/api/v1/general/rotate-pdf" + | "/api/v1/general/scale-pages" + | "/api/v1/general/split-by-size-or-count" + | "/api/v1/general/split-for-poster-print" + | "/api/v1/general/split-pages" + | "/api/v1/general/split-pdf-by-chapters" + | "/api/v1/general/split-pdf-by-sections" + | "/api/v1/misc/add-attachments" + | "/api/v1/misc/add-comments" + | "/api/v1/misc/add-image" + | "/api/v1/misc/add-page-numbers" + | "/api/v1/misc/add-stamp" + | "/api/v1/misc/auto-rename" + | "/api/v1/misc/auto-split-pdf" + | "/api/v1/misc/compress-pdf" + | "/api/v1/misc/decompress-pdf" + | "/api/v1/misc/delete-attachment" + | "/api/v1/misc/extract-attachments" + | "/api/v1/misc/extract-image-scans" + | "/api/v1/misc/extract-images" + | "/api/v1/misc/flatten" + | "/api/v1/misc/list-attachments" + | "/api/v1/misc/ocr-pdf" + | "/api/v1/misc/remove-blanks" + | "/api/v1/misc/rename-attachment" + | "/api/v1/misc/repair" + | "/api/v1/misc/replace-invert-pdf" + | "/api/v1/misc/scanner-effect" + | "/api/v1/misc/show-javascript" + | "/api/v1/misc/unlock-pdf-forms" + | "/api/v1/misc/update-metadata" + | "/api/v1/security/add-password" + | "/api/v1/security/add-watermark" + | "/api/v1/security/auto-redact" + | "/api/v1/security/cert-sign" + | "/api/v1/security/cert-sign/hardware/pkcs11-certificates" + | "/api/v1/security/cert-sign/sessions" + | "/api/v1/security/cert-sign/validate-certificate" + | "/api/v1/security/get-info-on-pdf" + | "/api/v1/security/redact" + | "/api/v1/security/redact-execute" + | "/api/v1/security/remove-cert-sign" + | "/api/v1/security/remove-password" + | "/api/v1/security/sanitize-pdf" + | "/api/v1/security/timestamp-pdf" + | "/api/v1/security/validate-signature" + | "/api/v1/security/verify-pdf"; + +/** Backend request-parameter model for each tool endpoint. */ +export interface ToolApiParams { + "/api/v1/convert/cbr/pdf": ConvertCbrToPdfRequest; + "/api/v1/convert/cbz/pdf": ConvertCbzToPdfRequest; + "/api/v1/convert/ebook/pdf": ConvertEbookToPdfRequest; + "/api/v1/convert/eml/pdf": EmlToPdfRequest; + "/api/v1/convert/file/pdf": GeneralFile; + "/api/v1/convert/html/pdf": HTMLToPdfRequest; + "/api/v1/convert/img/pdf": ConvertToPdfRequest; + "/api/v1/convert/markdown/pdf": GeneralFile; + "/api/v1/convert/pdf/cbr": ConvertPdfToCbrRequest; + "/api/v1/convert/pdf/cbz": ConvertPdfToCbzRequest; + "/api/v1/convert/pdf/csv": PDFWithPageNums; + "/api/v1/convert/pdf/epub": ConvertPdfToEpubRequest; + "/api/v1/convert/pdf/html": ConvertPdfHtmlRequest; + "/api/v1/convert/pdf/img": ConvertToImageRequest; + "/api/v1/convert/pdf/markdown": ConvertPdfMarkdownRequest; + "/api/v1/convert/pdf/pdfa": PdfToPdfARequest; + "/api/v1/convert/pdf/presentation": PdfToPresentationRequest; + "/api/v1/convert/pdf/text": PdfToTextOrRTFRequest; + "/api/v1/convert/pdf/text-editor": ConvertPdfTextEditorRequest; + "/api/v1/convert/pdf/text-editor/metadata": ConvertPdfTextEditorMetadataRequest; + "/api/v1/convert/pdf/vector": PdfVectorExportRequest; + "/api/v1/convert/pdf/word": PdfToWordRequest; + "/api/v1/convert/pdf/xlsx": PDFWithPageNums; + "/api/v1/convert/pdf/xml": ConvertPdfXmlRequest; + "/api/v1/convert/svg/pdf": SvgToPdfRequest; + "/api/v1/convert/text-editor/pdf": GeneralFile; + "/api/v1/convert/url/pdf": UrlToPdfRequest; + "/api/v1/convert/vector/pdf": PdfVectorExportRequest; + "/api/v1/general/booklet-imposition": BookletImpositionRequest; + "/api/v1/general/crop": CropPdfForm; + "/api/v1/general/edit-table-of-contents": EditTableOfContentsRequest; + "/api/v1/general/edit-text": EditTextRequest; + "/api/v1/general/extract-bookmarks": GeneralExtractBookmarksRequest; + "/api/v1/general/merge-pdfs": MergePdfsRequest; + "/api/v1/general/multi-page-layout": MergeMultiplePagesRequest; + "/api/v1/general/overlay-pdfs": OverlayPdfsRequest; + "/api/v1/general/pdf-to-single-page": GeneralPdfToSinglePageRequest; + "/api/v1/general/rearrange-pages": RearrangePagesRequest; + "/api/v1/general/remove-image-pdf": GeneralRemoveImagePdfRequest; + "/api/v1/general/remove-pages": PDFWithPageNums; + "/api/v1/general/rotate-pdf": RotatePDFRequest; + "/api/v1/general/scale-pages": ScalePagesRequest; + "/api/v1/general/split-by-size-or-count": SplitPdfBySizeOrCountRequest; + "/api/v1/general/split-for-poster-print": PosterPdfRequest; + "/api/v1/general/split-pages": SplitPagesRequest; + "/api/v1/general/split-pdf-by-chapters": SplitPdfByChaptersRequest; + "/api/v1/general/split-pdf-by-sections": SplitPdfBySectionsRequest; + "/api/v1/misc/add-attachments": AddAttachmentRequest; + "/api/v1/misc/add-comments": AddCommentsRequest; + "/api/v1/misc/add-image": OverlayImageRequest; + "/api/v1/misc/add-page-numbers": AddPageNumbersRequest; + "/api/v1/misc/add-stamp": AddStampRequest; + "/api/v1/misc/auto-rename": ExtractHeaderRequest; + "/api/v1/misc/auto-split-pdf": AutoSplitPdfRequest; + "/api/v1/misc/compress-pdf": OptimizePdfRequest; + "/api/v1/misc/decompress-pdf": MiscDecompressPdfRequest; + "/api/v1/misc/delete-attachment": DeleteAttachmentRequest; + "/api/v1/misc/extract-attachments": ExtractAttachmentsRequest; + "/api/v1/misc/extract-image-scans": ExtractImageScansRequest; + "/api/v1/misc/extract-images": PDFExtractImagesRequest; + "/api/v1/misc/flatten": FlattenRequest; + "/api/v1/misc/list-attachments": ListAttachmentsRequest; + "/api/v1/misc/ocr-pdf": ProcessPdfWithOcrRequest; + "/api/v1/misc/remove-blanks": RemoveBlankPagesRequest; + "/api/v1/misc/rename-attachment": RenameAttachmentRequest; + "/api/v1/misc/repair": MiscRepairRequest; + "/api/v1/misc/replace-invert-pdf": ReplaceAndInvertColorRequest; + "/api/v1/misc/scanner-effect": ScannerEffectRequest; + "/api/v1/misc/show-javascript": MiscShowJavascriptRequest; + "/api/v1/misc/unlock-pdf-forms": MiscUnlockPdfFormsRequest; + "/api/v1/misc/update-metadata": MetadataRequest; + "/api/v1/security/add-password": AddPasswordRequest; + "/api/v1/security/add-watermark": AddWatermarkRequest; + "/api/v1/security/auto-redact": RedactPdfRequest; + "/api/v1/security/cert-sign": SignPDFWithCertRequest; + "/api/v1/security/cert-sign/hardware/pkcs11-certificates": Pkcs11CertificatesRequest; + "/api/v1/security/cert-sign/sessions": SecurityCertSignSessionsRequest; + "/api/v1/security/cert-sign/validate-certificate": SecurityCertSignValidateCertificateRequest; + "/api/v1/security/get-info-on-pdf": SecurityGetInfoOnPdfRequest; + "/api/v1/security/redact": ManualRedactPdfRequest; + "/api/v1/security/redact-execute": RedactExecuteRequest; + "/api/v1/security/remove-cert-sign": SecurityRemoveCertSignRequest; + "/api/v1/security/remove-password": PDFPasswordRequest; + "/api/v1/security/sanitize-pdf": SanitizePdfRequest; + "/api/v1/security/timestamp-pdf": TimestampPdfRequest; + "/api/v1/security/validate-signature": SignatureValidationRequest; + "/api/v1/security/verify-pdf": PDFVerificationRequest; +} + +/** Every generated tool endpoint, for iteration. */ +export const TOOL_ENDPOINTS = [ + "/api/v1/convert/cbr/pdf", + "/api/v1/convert/cbz/pdf", + "/api/v1/convert/ebook/pdf", + "/api/v1/convert/eml/pdf", + "/api/v1/convert/file/pdf", + "/api/v1/convert/html/pdf", + "/api/v1/convert/img/pdf", + "/api/v1/convert/markdown/pdf", + "/api/v1/convert/pdf/cbr", + "/api/v1/convert/pdf/cbz", + "/api/v1/convert/pdf/csv", + "/api/v1/convert/pdf/epub", + "/api/v1/convert/pdf/html", + "/api/v1/convert/pdf/img", + "/api/v1/convert/pdf/markdown", + "/api/v1/convert/pdf/pdfa", + "/api/v1/convert/pdf/presentation", + "/api/v1/convert/pdf/text", + "/api/v1/convert/pdf/text-editor", + "/api/v1/convert/pdf/text-editor/metadata", + "/api/v1/convert/pdf/vector", + "/api/v1/convert/pdf/word", + "/api/v1/convert/pdf/xlsx", + "/api/v1/convert/pdf/xml", + "/api/v1/convert/svg/pdf", + "/api/v1/convert/text-editor/pdf", + "/api/v1/convert/url/pdf", + "/api/v1/convert/vector/pdf", + "/api/v1/general/booklet-imposition", + "/api/v1/general/crop", + "/api/v1/general/edit-table-of-contents", + "/api/v1/general/edit-text", + "/api/v1/general/extract-bookmarks", + "/api/v1/general/merge-pdfs", + "/api/v1/general/multi-page-layout", + "/api/v1/general/overlay-pdfs", + "/api/v1/general/pdf-to-single-page", + "/api/v1/general/rearrange-pages", + "/api/v1/general/remove-image-pdf", + "/api/v1/general/remove-pages", + "/api/v1/general/rotate-pdf", + "/api/v1/general/scale-pages", + "/api/v1/general/split-by-size-or-count", + "/api/v1/general/split-for-poster-print", + "/api/v1/general/split-pages", + "/api/v1/general/split-pdf-by-chapters", + "/api/v1/general/split-pdf-by-sections", + "/api/v1/misc/add-attachments", + "/api/v1/misc/add-comments", + "/api/v1/misc/add-image", + "/api/v1/misc/add-page-numbers", + "/api/v1/misc/add-stamp", + "/api/v1/misc/auto-rename", + "/api/v1/misc/auto-split-pdf", + "/api/v1/misc/compress-pdf", + "/api/v1/misc/decompress-pdf", + "/api/v1/misc/delete-attachment", + "/api/v1/misc/extract-attachments", + "/api/v1/misc/extract-image-scans", + "/api/v1/misc/extract-images", + "/api/v1/misc/flatten", + "/api/v1/misc/list-attachments", + "/api/v1/misc/ocr-pdf", + "/api/v1/misc/remove-blanks", + "/api/v1/misc/rename-attachment", + "/api/v1/misc/repair", + "/api/v1/misc/replace-invert-pdf", + "/api/v1/misc/scanner-effect", + "/api/v1/misc/show-javascript", + "/api/v1/misc/unlock-pdf-forms", + "/api/v1/misc/update-metadata", + "/api/v1/security/add-password", + "/api/v1/security/add-watermark", + "/api/v1/security/auto-redact", + "/api/v1/security/cert-sign", + "/api/v1/security/cert-sign/hardware/pkcs11-certificates", + "/api/v1/security/cert-sign/sessions", + "/api/v1/security/cert-sign/validate-certificate", + "/api/v1/security/get-info-on-pdf", + "/api/v1/security/redact", + "/api/v1/security/redact-execute", + "/api/v1/security/remove-cert-sign", + "/api/v1/security/remove-password", + "/api/v1/security/sanitize-pdf", + "/api/v1/security/timestamp-pdf", + "/api/v1/security/validate-signature", + "/api/v1/security/verify-pdf", +] as const satisfies readonly ToolEndpoint[]; + +/** Union of every generated tool request model. */ +export type ToolApiRequest = ToolApiParams[ToolEndpoint]; diff --git a/frontend/editor/src/core/utils/automationConverter.test.ts b/frontend/editor/src/core/utils/automationConverter.test.ts index 88e313c604..d61d61f08e 100644 --- a/frontend/editor/src/core/utils/automationConverter.test.ts +++ b/frontend/editor/src/core/utils/automationConverter.test.ts @@ -120,6 +120,35 @@ describe("automationConverter", () => { const config = convertToFolderScanningConfig(automation, registry); expect(config.pipeline[0].operation).toBe("unknownTool"); }); + + test("preserves frontend params on export, even for a tool with a toApiParams mapper", () => { + // The folder-scan export keeps frontend param shape; toApiParams runs at + // execution time, not here. A tool with a mapper still exports its UI + // field name (compressionLevel), not the backend one (optimizeLevel). + const withMapper = { + ...registry, + compress: { + operationConfig: { + endpoint: "/api/v1/misc/compress-pdf", + toApiParams: (p: Record) => ({ + optimizeLevel: p.compressionLevel, + }), + }, + }, + } as unknown as Partial; + const automation: AutomationConfig = { + ...sampleAutomation, + operations: [ + { operation: "compress", parameters: { compressionLevel: 9 } }, + ], + }; + const config = convertToFolderScanningConfig(automation, withMapper); + // The UI field name and value are preserved as-is (not optimizeLevel). + expect(config.pipeline[0].parameters).toEqual({ + compressionLevel: 9, + fileInput: "automated", + }); + }); }); describe("detectAutomationFormat", () => { @@ -212,6 +241,72 @@ describe("automationConverter", () => { }); }); + test("round-trips frontend params losslessly, even for a tool with a mapper", () => { + // A value set in the UI survives an export then import unchanged. Because + // the export keeps frontend shape, a tool with a toApiParams mapper + // round-trips just like one without. + const withMapper = { + ...registry, + compress: { + operationConfig: { + endpoint: "/api/v1/misc/compress-pdf", + toApiParams: (p: Record) => ({ + optimizeLevel: p.compressionLevel, + }), + }, + }, + } as unknown as Partial; + const automation: AutomationConfig = { + ...sampleAutomation, + operations: [ + { operation: "compress", parameters: { compressionLevel: 9 } }, + ], + }; + const exported = convertToFolderScanningConfig(automation, withMapper); + const parsed = parseFolderScanningConfig(exported, withMapper); + expect(parsed.automation.operations[0]).toEqual({ + operation: "compress", + parameters: { compressionLevel: 9 }, + }); + }); + + test("round-trips a tool whose endpoint depends on a frontend-only field", () => { + // Split-style tool: the endpoint is chosen from a frontend-only `method` + // field. Keeping frontend shape on export lets import replay the endpoint + // and resolve the tool. + const splitLike = { + ...registry, + splitLike: { + operationConfig: { + endpoint: (p: Record) => + p.method === "size" + ? "/api/v1/general/split-by-size" + : "/api/v1/general/split-pages", + }, + }, + } as unknown as Partial; + const automation: AutomationConfig = { + ...sampleAutomation, + operations: [ + { + operation: "splitLike", + parameters: { method: "size", value: "10MB" }, + }, + ], + }; + const exported = convertToFolderScanningConfig(automation, splitLike); + expect(exported.pipeline[0]).toEqual({ + operation: "/api/v1/general/split-by-size", + parameters: { method: "size", value: "10MB", fileInput: "automated" }, + }); + const parsed = parseFolderScanningConfig(exported, splitLike); + expect(parsed.unresolvedOperations).toEqual([]); + expect(parsed.automation.operations[0]).toEqual({ + operation: "splitLike", + parameters: { method: "size", value: "10MB" }, + }); + }); + test("keeps unmappable endpoints verbatim and reports them", () => { const config = { name: "Mystery", diff --git a/frontend/editor/src/core/utils/automationConverter.ts b/frontend/editor/src/core/utils/automationConverter.ts index ce29f71bd0..05acbed8a6 100644 --- a/frontend/editor/src/core/utils/automationConverter.ts +++ b/frontend/editor/src/core/utils/automationConverter.ts @@ -83,7 +83,7 @@ export function convertToFolderScanningConfig( endpoint = endpointConfig; } else if (typeof endpointConfig === "function") { try { - endpoint = endpointConfig(op.parameters); + endpoint = endpointConfig(op.parameters) ?? undefined; } catch (error) { console.warn( `Failed to resolve dynamic endpoint for operation "${op.operation}". ` + diff --git a/frontend/editor/src/core/utils/automationExecutor.ts b/frontend/editor/src/core/utils/automationExecutor.ts index a29ffbcb83..f47778deda 100644 --- a/frontend/editor/src/core/utils/automationExecutor.ts +++ b/frontend/editor/src/core/utils/automationExecutor.ts @@ -88,12 +88,17 @@ const executeSingleFileOperation = async ( ): Promise => { const resultFiles: File[] = []; - for (const file of files) { - const endpoint = - typeof config.endpoint === "function" - ? config.endpoint(parameters) - : config.endpoint; + const endpoint = + typeof config.endpoint === "function" + ? config.endpoint(parameters) + : config.endpoint; + if (!endpoint) { + throw new Error( + "This operation has no backend endpoint and cannot be executed directly.", + ); + } + for (const file of files) { const formData = config.buildFormData(parameters, file); const processedFiles = await executeApiRequest( @@ -122,6 +127,11 @@ const executeMultiFileOperation = async ( typeof config.endpoint === "function" ? config.endpoint(parameters) : config.endpoint; + if (!endpoint) { + throw new Error( + "This operation has no backend endpoint and cannot be executed directly.", + ); + } const formData = config.buildFormData(parameters, files); diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3a9db8016c..3d0ff68cd2 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -117,6 +117,7 @@ "eslint": "^10.0.2", "fake-indexeddb": "^6.2.5", "jsdom": "^27.0.0", + "json-schema-to-typescript": "^15.0.4", "license-checker": "^25.0.1", "msw": "^2.14.6", "msw-storybook-addon": "^2.0.7", @@ -192,6 +193,24 @@ "url": "https://github.com/sponsors/antfu" } }, + "node_modules/@apidevtools/json-schema-ref-parser": { + "version": "11.9.3", + "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-11.9.3.tgz", + "integrity": "sha512-60vepv88RwcJtSHrD6MjIL6Ta3SOYbgfnkHb+ppAVK+o9mXprRtulx7VlRl3lN3bbvysAfCS7WMVfhUYemB0IQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jsdevtools/ono": "^7.1.3", + "@types/json-schema": "^7.0.15", + "js-yaml": "^4.1.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/philsturgeon" + } + }, "node_modules/@asamuzakjp/css-color": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.2.tgz", @@ -2237,6 +2256,13 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@jsdevtools/ono": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz", + "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==", + "dev": true, + "license": "MIT" + }, "node_modules/@kessler/tableify": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@kessler/tableify/-/tableify-1.0.2.tgz", @@ -5663,6 +5689,13 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/lodash": { + "version": "4.17.24", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.24.tgz", + "integrity": "sha512-gIW7lQLZbue7lRSWEFql49QJJWThrTFFeIMJdp3eH4tKoxm1OvEPg02rm4wCCSHS0cL3/Fizimb35b7k8atwsQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/mdast": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", @@ -10581,6 +10614,30 @@ "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", "license": "MIT" }, + "node_modules/json-schema-to-typescript": { + "version": "15.0.4", + "resolved": "https://registry.npmjs.org/json-schema-to-typescript/-/json-schema-to-typescript-15.0.4.tgz", + "integrity": "sha512-Su9oK8DR4xCmDsLlyvadkXzX6+GGXJpbhwoLtOGArAG61dvbW4YQmSEno2y66ahpIdmLMg6YUf/QHLgiwvkrHQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@apidevtools/json-schema-ref-parser": "^11.5.5", + "@types/json-schema": "^7.0.15", + "@types/lodash": "^4.17.7", + "is-glob": "^4.0.3", + "js-yaml": "^4.1.0", + "lodash": "^4.17.21", + "minimist": "^1.2.8", + "prettier": "^3.2.5", + "tinyglobby": "^0.2.9" + }, + "bin": { + "json2ts": "dist/src/cli.js" + }, + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", @@ -11102,6 +11159,13 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.18.1", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz", + "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==", + "dev": true, + "license": "MIT" + }, "node_modules/log-symbols": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index dca6e68c43..e9d57208e2 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -137,6 +137,7 @@ "eslint": "^10.0.2", "fake-indexeddb": "^6.2.5", "jsdom": "^27.0.0", + "json-schema-to-typescript": "^15.0.4", "license-checker": "^25.0.1", "msw": "^2.14.6", "msw-storybook-addon": "^2.0.7", From 1df6a1759ce6d11390d89661e81fa879c1949306 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Tue, 7 Jul 2026 10:37:35 +0100 Subject: [PATCH 03/27] Set App version to v2.14.1 (#6891) Upped version in build.gradle then ran build so version falls through --- .github/aur/stirling-pdf-desktop/PKGBUILD | 2 +- .github/aur/stirling-pdf-server-bin/PKGBUILD | 2 +- build.gradle | 2 +- frontend/editor/src-tauri/tauri.conf.json | 2 +- frontend/editor/src/core/testing/serverExperienceSimulations.ts | 2 +- .../src/proprietary/testing/serverExperienceSimulations.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/aur/stirling-pdf-desktop/PKGBUILD b/.github/aur/stirling-pdf-desktop/PKGBUILD index c02bde345e..5d92425b19 100644 --- a/.github/aur/stirling-pdf-desktop/PKGBUILD +++ b/.github/aur/stirling-pdf-desktop/PKGBUILD @@ -1,6 +1,6 @@ # Maintainer: Stirling PDF Inc pkgname=stirling-pdf-desktop -pkgver=2.14.0 +pkgver=2.14.1 pkgrel=1 pkgdesc="Locally hosted, web-based PDF manipulation tool (Tauri desktop app, official Stirling PDF Inc build)" arch=('x86_64') diff --git a/.github/aur/stirling-pdf-server-bin/PKGBUILD b/.github/aur/stirling-pdf-server-bin/PKGBUILD index c73b1c5087..f5a2bf3c6c 100644 --- a/.github/aur/stirling-pdf-server-bin/PKGBUILD +++ b/.github/aur/stirling-pdf-server-bin/PKGBUILD @@ -1,6 +1,6 @@ # Maintainer: Stirling PDF Inc pkgname=stirling-pdf-server-bin -pkgver=2.14.0 +pkgver=2.14.1 pkgrel=1 pkgdesc="Locally hosted, web-based PDF manipulation tool (server JAR, prebuilt)" arch=('any') diff --git a/build.gradle b/build.gradle index 3946b32449..5c89fd7af2 100644 --- a/build.gradle +++ b/build.gradle @@ -91,7 +91,7 @@ springBoot { allprojects { group = 'stirling.software' - version = '2.14.0' + version = '2.14.1' configurations.configureEach { exclude group: "org.springframework.boot", module: "spring-boot-starter-tomcat" diff --git a/frontend/editor/src-tauri/tauri.conf.json b/frontend/editor/src-tauri/tauri.conf.json index 87f3a48a1d..6cfe33cbe6 100644 --- a/frontend/editor/src-tauri/tauri.conf.json +++ b/frontend/editor/src-tauri/tauri.conf.json @@ -2,7 +2,7 @@ "$schema": "../node_modules/@tauri-apps/cli/config.schema.json", "productName": "Stirling PDF", "mainBinaryName": "Stirling-PDF", - "version": "2.14.0", + "version": "2.14.1", "identifier": "stirling.pdf.dev", "build": { "frontendDist": "../dist", diff --git a/frontend/editor/src/core/testing/serverExperienceSimulations.ts b/frontend/editor/src/core/testing/serverExperienceSimulations.ts index 09344f9234..cd7ed8f2ba 100644 --- a/frontend/editor/src/core/testing/serverExperienceSimulations.ts +++ b/frontend/editor/src/core/testing/serverExperienceSimulations.ts @@ -38,7 +38,7 @@ const FREE_LICENSE_INFO: LicenseInfo = { const BASE_NO_LOGIN_CONFIG: AppConfig = { enableAnalytics: true, - appVersion: "2.14.0", + appVersion: "2.14.1", serverCertificateEnabled: false, enableAlphaFunctionality: false, serverPort: 8080, diff --git a/frontend/editor/src/proprietary/testing/serverExperienceSimulations.ts b/frontend/editor/src/proprietary/testing/serverExperienceSimulations.ts index 50bf5eb230..1aaabfeb33 100644 --- a/frontend/editor/src/proprietary/testing/serverExperienceSimulations.ts +++ b/frontend/editor/src/proprietary/testing/serverExperienceSimulations.ts @@ -48,7 +48,7 @@ const FREE_LICENSE_INFO: LicenseInfo = { const BASE_NO_LOGIN_CONFIG: AppConfig = { enableAnalytics: true, - appVersion: "2.14.0", + appVersion: "2.14.1", serverCertificateEnabled: false, enableAlphaFunctionality: false, enableDesktopInstallSlide: true, From 20204f0ddcecd9d80dc5c13c802cd878d1ddc3e9 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Tue, 7 Jul 2026 12:01:18 +0100 Subject: [PATCH 04/27] Improve consistency and reliability of tools in Stirling Engine (#6855) # Description of Changes A few changes to improve things in the engine: - Changed the PDF to Markdown code to be a real tool in Java, to remove the need for the `pdf_ingest` code, which looked a bit like an agent but wasn't behaving as an agent. It's now just covered automatically by the edit agent. - Noticed that 0-parameter-endpoints were previously being ignored by the `tool_models` generator, so some tools which require no params were being mistakenly excluded. - Removed tools which currently never succeed like Add Stamp, Cert Sign, and Overlay, because they require the supporting files to be sent in a different location in the API call, which we don't currently do. Ideally, we'd add proper support for this, but we're better off now removing support for these tools rather than just have them crash. We can re-add these tools in a future PR properly. --- .../model/api/ai/AiWorkflowOutcome.java | 3 +- .../service/AiWorkflowService.java | 68 ----- .../service/AiWorkflowServiceMoreTest.java | 28 -- .../service/AiWorkflowServiceTest.java | 28 +- engine/scripts/generate_tool_models.py | 36 ++- engine/src/stirling/agents/orchestrator.py | 21 +- engine/src/stirling/contracts/__init__.py | 2 - engine/src/stirling/contracts/common.py | 14 - engine/src/stirling/contracts/orchestrator.py | 2 - engine/src/stirling/models/tool_models.py | 273 +++++++----------- 10 files changed, 157 insertions(+), 318 deletions(-) diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/model/api/ai/AiWorkflowOutcome.java b/app/proprietary/src/main/java/stirling/software/proprietary/model/api/ai/AiWorkflowOutcome.java index 2bed56f0f0..a7239e8f90 100644 --- a/app/proprietary/src/main/java/stirling/software/proprietary/model/api/ai/AiWorkflowOutcome.java +++ b/app/proprietary/src/main/java/stirling/software/proprietary/model/api/ai/AiWorkflowOutcome.java @@ -21,8 +21,7 @@ public enum AiWorkflowOutcome { COMPLETED("completed"), UNSUPPORTED_CAPABILITY("unsupported_capability"), CANNOT_CONTINUE("cannot_continue"), - GENERATE_FILE("generate_file"), - CONVERT_MARKDOWN("convert_markdown"); + GENERATE_FILE("generate_file"); private final String value; diff --git a/app/proprietary/src/main/java/stirling/software/proprietary/service/AiWorkflowService.java b/app/proprietary/src/main/java/stirling/software/proprietary/service/AiWorkflowService.java index 4e6c515318..d3b2d21a00 100644 --- a/app/proprietary/src/main/java/stirling/software/proprietary/service/AiWorkflowService.java +++ b/app/proprietary/src/main/java/stirling/software/proprietary/service/AiWorkflowService.java @@ -68,7 +68,6 @@ import tools.jackson.databind.ObjectMapper; public class AiWorkflowService { private static final String DOCUMENTS_ENDPOINT = "/api/v1/documents"; - private static final String PDF_TO_MARKDOWN_ENDPOINT = "/api/v1/convert/pdf/markdown"; private final CustomPDFDocumentFactory pdfDocumentFactory; private final AiEngineClient aiEngineClient; @@ -196,7 +195,6 @@ public class AiWorkflowService { return switch (response.getOutcome()) { case NEED_CONTENT -> onNeedContent(response, filesById, request, listener); case NEED_INGEST -> onNeedIngest(response, filesById, request, listener); - case CONVERT_MARKDOWN -> onConvertMarkdown(response, filesById, listener); case TOOL_CALL -> onToolCall(response, filesById, listener); case PLAN -> onPlan(response, filesById, request, listener); case ANSWER -> onAnswer(response, filesById, request, listener); @@ -333,72 +331,6 @@ public class AiWorkflowService { return new WorkflowState.Pending(nextRequest); } - /** - * Deterministically convert each requested PDF to Markdown via the {@code - * /convert/pdf/markdown} endpoint (backed by {@code PdfMarkdownConverter}) and return the - * {@code .md} file(s) as a completed result. No AI resume — the conversion output is the final - * answer. - */ - private WorkflowState onConvertMarkdown( - AiWorkflowResponse response, - Map filesById, - ProgressListener listener) { - List filesToConvert = response.getFilesToIngest(); - if (filesToConvert == null || filesToConvert.isEmpty()) { - return new WorkflowState.Terminal( - cannotContinue( - "AI engine requested markdown conversion without listing any files.")); - } - - try { - List resultFiles = new ArrayList<>(); - List inputNames = new ArrayList<>(); - for (int i = 0; i < filesToConvert.size(); i++) { - AiFile file = filesToConvert.get(i); - MultipartFile multipartFile = filesById.get(file.getId()); - if (multipartFile == null) { - return new WorkflowState.Terminal( - cannotContinue( - "AI engine requested markdown conversion for unknown file: " - + file.getName())); - } - listener.onProgress( - AiWorkflowProgressEvent.executingTool( - PDF_TO_MARKDOWN_ENDPOINT, i + 1, filesToConvert.size())); - Resource input = toResource(multipartFile); - PipelineDefinition definition = - new PipelineDefinition( - "convert-markdown", - List.of(new PipelineStep(PDF_TO_MARKDOWN_ENDPOINT, Map.of())), - null); - PolicyExecutionResult result = - policyExecutor.execute( - definition, - PolicyInputs.of(List.of(input)), - PolicyProgressListener.NOOP); - resultFiles.addAll(result.files()); - inputNames.add(multipartFile.getOriginalFilename()); - } - return new WorkflowState.Terminal( - buildCompletedResponse(null, resultFiles, inputNames, null)); - } catch (InternalApiTimeoutException e) { - log.error("PDF to Markdown conversion timed out: {}", e.getMessage()); - return new WorkflowState.Terminal( - cannotContinue(toolTimeoutMessage(PDF_TO_MARKDOWN_ENDPOINT, e))); - } catch (Exception e) { - AiWorkflowResponse limit = paygLimitResponseOrNull(e); - if (limit != null) { - log.info( - "AI markdown conversion blocked by downstream entitlement gate ({})", - limit.getErrorCode()); - return new WorkflowState.Terminal(limit); - } - log.error("Failed to convert PDF to Markdown: {}", e.getMessage(), e); - return new WorkflowState.Terminal( - cannotContinue(toolFailureMessage(PDF_TO_MARKDOWN_ENDPOINT, e))); - } - } - private Resource toResource(MultipartFile file) throws IOException { TempFile tempFile = tempFileManager.createManagedTempFile("ai-workflow"); file.transferTo(tempFile.getPath()); diff --git a/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceMoreTest.java b/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceMoreTest.java index cc8388b8c2..7c44a40a5d 100644 --- a/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceMoreTest.java +++ b/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceMoreTest.java @@ -221,34 +221,6 @@ class AiWorkflowServiceMoreTest { } } - @Nested - @DisplayName("convert_markdown guards") - class ConvertMarkdownGuards { - - @Test - @DisplayName("no files listed yields CANNOT_CONTINUE") - void noFiles() throws IOException { - stubOrchestrator("{\"outcome\":\"convert_markdown\",\"filesToIngest\":[]}"); - AiWorkflowResponse result = service.orchestrate(requestFor(pdf("a.pdf", "x"), "to md")); - assertThat(result.getOutcome()).isEqualTo(AiWorkflowOutcome.CANNOT_CONTINUE); - } - - @Test - @DisplayName("unknown file id yields CANNOT_CONTINUE") - void unknownFile() throws IOException { - when(fileIdStrategy.idFor(any())).thenReturn("real-id"); - stubOrchestrator( - """ - {"outcome":"convert_markdown", - "filesToIngest":[{"id":"other-id","name":"other.pdf"}]} - """); - AiWorkflowResponse result = - service.orchestrate(requestFor(pdf("real.pdf", "x"), "to md")); - assertThat(result.getOutcome()).isEqualTo(AiWorkflowOutcome.CANNOT_CONTINUE); - assertThat(result.getReason()).contains("other.pdf"); - } - } - @Nested @DisplayName("plan guards and errors") class PlanGuardsAndErrors { diff --git a/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceTest.java b/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceTest.java index 9e611cf32e..7dc174c041 100644 --- a/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceTest.java +++ b/app/proprietary/src/test/java/stirling/software/proprietary/service/AiWorkflowServiceTest.java @@ -78,6 +78,7 @@ class AiWorkflowServiceTest { private static final String SPLIT_ENDPOINT = "/api/v1/general/split-pages"; private static final String MERGE_ENDPOINT = "/api/v1/general/merge-pdfs"; private static final String COMPRESS_ENDPOINT = "/api/v1/misc/compress-pdf"; + private static final String MARKDOWN_ENDPOINT = "/api/v1/convert/pdf/markdown"; @Mock private CustomPDFDocumentFactory pdfDocumentFactory; @Mock private AiEngineClient aiEngineClient; @@ -440,23 +441,23 @@ class AiWorkflowServiceTest { } @Test - void convertMarkdownRunsDeterministicConversionAndReturnsMdFile() throws IOException { + void planWithMarkdownStepReturnsMdFile() throws IOException { + // PDF→Markdown is a normal tool the edit agent emits as a plan step (no bespoke + // outcome); the plan executor runs the converter and returns the .md file. MockMultipartFile input = pdf("multi-column-test_lorem.pdf", "pdf-bytes"); - when(fileIdStrategy.idFor(any())).thenReturn("doc-1"); stubOrchestrator( """ { - "outcome":"convert_markdown", - "reason":"PDF to Markdown requested.", - "filesToIngest":[{"id":"doc-1","name":"multi-column-test_lorem.pdf"}] + "outcome":"plan", + "summary":"Convert to Markdown", + "steps":[{"tool":"%s","parameters":{}}] } - """); - when(toolMetadataService.shouldUnpackZipResponse("/api/v1/convert/pdf/markdown")) - .thenReturn(false); - stubEndpoint( - "/api/v1/convert/pdf/markdown", - pdfResource("# Title", "multi-column-test_lorem.md")); - AtomicInteger ids = stubFileStorage(); + """ + .formatted(MARKDOWN_ENDPOINT)); + when(toolMetadataService.isMultiInput(anyString())).thenReturn(false); + when(toolMetadataService.shouldUnpackZipResponse(anyString())).thenReturn(false); + stubEndpoint(MARKDOWN_ENDPOINT, pdfResource("# Title", "multi-column-test_lorem.md")); + stubFileStorage(); AiWorkflowResponse result = service.orchestrate(requestFor(input, "convert to markdown")); @@ -464,8 +465,7 @@ class AiWorkflowServiceTest { assertEquals(1, result.getResultFiles().size()); // Extension changes (pdf -> md), so the converter's response filename wins. assertEquals("multi-column-test_lorem.md", result.getResultFiles().get(0).getFileName()); - assertEquals(1, ids.get()); - verify(internalApiClient, times(1)).post(eq("/api/v1/convert/pdf/markdown"), any()); + verify(internalApiClient, times(1)).post(eq(MARKDOWN_ENDPOINT), any()); } @Test diff --git a/engine/scripts/generate_tool_models.py b/engine/scripts/generate_tool_models.py index 9bc1458fea..dfe461fcca 100644 --- a/engine/scripts/generate_tool_models.py +++ b/engine/scripts/generate_tool_models.py @@ -59,6 +59,36 @@ class ToolDiscovery: "/api/v1/convert/", ) + # Endpoints under the allowed prefixes that are NOT edit-agent operations. A listed + # path and everything nested under it is dropped. Several kinds live here: + EXCLUDED_PATHS = ( + # 1. Cert-signing family: needs certificate/key files the agent can't supply, plus + # interactive session and hardware-token management. The whole subtree is dropped. + "/api/v1/security/cert-sign", + # 2. Interactive PDF text-editor endpoints, not one-shot operations. + "/api/v1/convert/pdf/text-editor", + "/api/v1/convert/text-editor/pdf", + # 3. Introspection / query endpoints that return metadata, a listing, or a + # verification verdict rather than a transformed document, so they belong to + # the question path, not the edit agent. (decompress is a dev-only stream op.) + "/api/v1/security/get-info-on-pdf", + "/api/v1/security/verify-pdf", + "/api/v1/security/validate-signature", + "/api/v1/misc/list-attachments", + "/api/v1/misc/show-javascript", + "/api/v1/misc/decompress-pdf", + "/api/v1/general/extract-bookmarks", + # 4. Require a secondary file (image, overlay PDF, attachments) on top of the input + # PDF. The agent only ever supplies the input PDF(s), so these can never run. + # (add-stamp / add-watermark stay: their text mode needs no extra file.) + "/api/v1/misc/add-image", + "/api/v1/misc/add-attachments", + "/api/v1/general/overlay-pdfs", + ) + + def _is_excluded(self, path: str) -> bool: + return any(path == p or path.startswith(p + "/") for p in self.EXCLUDED_PATHS) + def __init__(self, spec: dict[str, Any]): resource = Resource.from_contents(spec, default_specification=DRAFT202012) self.resolver = Registry().with_resource("", resource).resolver() @@ -73,17 +103,15 @@ class ToolDiscovery: for path, path_item in sorted(self.spec.get("paths", {}).items()): if "{" in path or not any(path.startswith(p) for p in self.ALLOWED_PATH_PREFIXES): continue + if self._is_excluded(path): + continue body_schema = self._get_request_body_schema(path_item) or {} query_props = self._get_query_parameters(path_item) body_props = body_schema.get("properties") or {} # Body properties win on name collision — body is the canonical param source # for the existing tools; query params are additive. properties = {**query_props, **body_props} - if not properties: - continue clean_props = self._filter_properties(properties) - if not clean_props: - continue enum_name = _deduplicate(_path_to_enum_name(path), used_enum) class_name = _deduplicate(_path_to_class_name(path), used_class) diff --git a/engine/src/stirling/agents/orchestrator.py b/engine/src/stirling/agents/orchestrator.py index c73d9dab32..e07e771e34 100644 --- a/engine/src/stirling/agents/orchestrator.py +++ b/engine/src/stirling/agents/orchestrator.py @@ -15,7 +15,6 @@ from stirling.agents.pdf_review import PdfReviewAgent from stirling.agents.user_spec import UserSpecAgent from stirling.contracts import ( AgentDraftWorkflowResponse, - ConvertMarkdownResponse, ExtractedTextArtifact, OrchestratorRequest, OrchestratorResponse, @@ -48,7 +47,7 @@ class OrchestratorAgent: ToolOutput( self.delegate_pdf_edit, name="delegate_pdf_edit", - description="Delegate requests for PDF modifications and return the PDF edit result.", + description="Delegate requests to modify or convert PDFs and return the PDF edit result.", ), ToolOutput( self.delegate_pdf_question, @@ -71,13 +70,6 @@ class OrchestratorAgent: " feedback')." ), ), - ToolOutput( - self.delegate_pdf_ingest, - name="delegate_pdf_ingest", - description=( - "Delegate requests to convert a PDF to Markdown or extract its content as readable text." - ), - ), ToolOutput( self.delegate_pdf_create, name="delegate_pdf_create", @@ -98,7 +90,7 @@ class OrchestratorAgent: system_prompt=( "You are the top-level orchestrator. " "Choose exactly one output function that best handles the request. " - "Use delegate_pdf_edit for any requested modification of one or more PDFs. " + "Use delegate_pdf_edit for any request to modify or convert one or more PDFs. " "Use delegate_pdf_question for questions about the contents of the attached PDFs. " "Use delegate_user_spec for requests to create or define an agent spec. " "Use delegate_pdf_review when the user wants the PDF returned with review" @@ -106,8 +98,6 @@ class OrchestratorAgent: " 'leave feedback on the PDF'. " "Use delegate_pdf_create when the user wants to generate a new document from" " scratch with no input file — invoices, reports, letters, contracts, etc. " - "Use delegate_pdf_ingest for any request to convert a PDF to Markdown " - "or extract its content as readable text. " "Use unsupported_capability when the user asks about the assistant itself " "or when none of the other outputs fit; supply a helpful message." ), @@ -177,13 +167,6 @@ class OrchestratorAgent: async def _run_agent_draft(self, request: OrchestratorRequest) -> AgentDraftWorkflowResponse: return await UserSpecAgent(self.runtime).orchestrate(request) - async def delegate_pdf_ingest(self, ctx: RunContext[OrchestratorDeps]) -> ConvertMarkdownResponse: - request = ctx.deps.request - return ConvertMarkdownResponse( - reason="PDF to Markdown requested — Java converts deterministically.", - files_to_ingest=request.files, - ) - async def delegate_pdf_review(self, ctx: RunContext[OrchestratorDeps]) -> PdfReviewOrchestrateResponse: return await self._run_pdf_review(ctx.deps.request) diff --git a/engine/src/stirling/contracts/__init__.py b/engine/src/stirling/contracts/__init__.py index 6c8d99d120..77ce40301e 100644 --- a/engine/src/stirling/contracts/__init__.py +++ b/engine/src/stirling/contracts/__init__.py @@ -13,7 +13,6 @@ from .common import ( AiFile, ArtifactKind, ConversationMessage, - ConvertMarkdownResponse, ExtractedFileText, GenerateFileResponse, MathAuditorToolReportArtifact, @@ -163,7 +162,6 @@ __all__ = [ "NeedContentFileRequest", "NeedContentResponse", "NeedIngestResponse", - "ConvertMarkdownResponse", "NextExecutionAction", "OrchestratorRequest", "OrchestratorResponse", diff --git a/engine/src/stirling/contracts/common.py b/engine/src/stirling/contracts/common.py index 8f35c9ceb4..d9105bad4e 100644 --- a/engine/src/stirling/contracts/common.py +++ b/engine/src/stirling/contracts/common.py @@ -62,7 +62,6 @@ class WorkflowOutcome(StrEnum): CANNOT_CONTINUE = "cannot_continue" UNSUPPORTED_CAPABILITY = "unsupported_capability" GENERATE_FILE = "generate_file" - CONVERT_MARKDOWN = "convert_markdown" class ArtifactKind(StrEnum): @@ -184,19 +183,6 @@ class NeedIngestResponse(ApiModel): content_types: list[PdfContentType] = Field(default_factory=list) -class ConvertMarkdownResponse(ApiModel): - """Terminal signal: convert the listed files to Markdown deterministically. - - This is a deterministic, non-AI conversion. Java runs the PDF→Markdown converter - (``PdfMarkdownConverter``) on each file and returns the resulting ``.md`` file(s) as a - completed result. There is no resume turn — the conversion output is the final answer. - """ - - outcome: Literal[WorkflowOutcome.CONVERT_MARKDOWN] = WorkflowOutcome.CONVERT_MARKDOWN - reason: str - files_to_ingest: list[AiFile] - - class ToolOperationStep(ApiModel): kind: Literal[StepKind.TOOL] = StepKind.TOOL tool: AnyToolId diff --git a/engine/src/stirling/contracts/orchestrator.py b/engine/src/stirling/contracts/orchestrator.py index 8b916ccaff..2d85853c51 100644 --- a/engine/src/stirling/contracts/orchestrator.py +++ b/engine/src/stirling/contracts/orchestrator.py @@ -11,7 +11,6 @@ from .common import ( AiFile, ArtifactKind, ConversationMessage, - ConvertMarkdownResponse, ExtractedFileText, GenerateFileResponse, NeedContentResponse, @@ -61,7 +60,6 @@ type OrchestratorResponse = Annotated[ | GenerateFileResponse | NeedContentResponse | NeedIngestResponse - | ConvertMarkdownResponse | AgentDraftResponse | NextExecutionAction | UnsupportedCapabilityResponse, diff --git a/engine/src/stirling/models/tool_models.py b/engine/src/stirling/models/tool_models.py index 2591d947a8..1827730283 100644 --- a/engine/src/stirling/models/tool_models.py +++ b/engine/src/stirling/models/tool_models.py @@ -11,13 +11,6 @@ from pydantic import Field, RootModel, SecretStr from stirling.models.base import ApiModel -class AddAttachmentsParams(ApiModel): - attachments: list[bytes] = Field(..., description="The image file to be overlaid onto the PDF.") - convert_to_pdf_a3b: bool = Field( - False, description="Convert the resulting PDF to PDF/A-3b format after adding attachments" - ) - - class AddCommentsParams(ApiModel): comments: str = Field( ..., @@ -28,12 +21,6 @@ class AddCommentsParams(ApiModel): ) -class AddImageParams(ApiModel): - every_page: bool = Field(False, description="Whether to overlay the image onto every page of the PDF.") - x: float = Field(0, description="The x-coordinate at which to place the top-left corner of the image.") - y: float = Field(0, description="The y-coordinate at which to place the top-left corner of the image.") - - class CustomMargin(StrEnum): """ Custom margin: small/medium/large/x-large @@ -312,50 +299,6 @@ class CbzToPdfParams(ApiModel): optimize_for_ebook: bool = Field(False, description="Optimize the output PDF for ebook reading using Ghostscript") -class CertType(StrEnum): - """ - The type of the digital certificate. WINDOWS_STORE and PKCS11 are hardware-backed and only available in the desktop app. - """ - - pem = "PEM" - pkcs12 = "PKCS12" - pfx = "PFX" - jks = "JKS" - server = "SERVER" - windows_store = "WINDOWS_STORE" - pkcs11 = "PKCS11" - - -class CertSignParams(ApiModel): - alias: str | None = Field( - None, - description="The alias of the certificate to sign with. Required for WINDOWS_STORE and recommended for PKCS11 tokens holding multiple certificates.", - ) - cert_type: CertType = Field( - ..., - description="The type of the digital certificate. WINDOWS_STORE and PKCS11 are hardware-backed and only available in the desktop app.", - ) - location: str = Field("SPDF", description="The location where the PDF is signed") - name: str = Field("SPDF", description="The name of the signer") - page_number: int = Field( - 1, - description="The page number where the signature should be visible. This is required if showSignature is set to true", - ) - password: SecretStr | None = Field( - None, description="The password for the keystore / private key, or the token PIN for PKCS11" - ) - pkcs11_library_path: str | None = Field( - None, - description="Absolute path to the PKCS#11 driver library (required for PKCS11 type). Must be an allowed driver - a detected one or configured via STIRLING_PKCS11_LIBRARIES.", - ) - pkcs11_slot: int | None = Field( - None, description="Optional PKCS#11 slot index. When omitted the first slot with a token is used." - ) - reason: str = Field("Signed by SPDF", description="The reason for signing the PDF") - show_logo: bool = Field(True, description="Whether to visually show a signature logo along with the signature") - show_signature: bool = Field(False, description="Whether to visually show the signature in the PDF file") - - class LineArtEdgeLevel(IntEnum): """ Edge detection strength to use for line art conversion (1-3). This maps to ImageMagick's -edge radius. @@ -525,6 +468,10 @@ class EmlToPdfParams(ApiModel): ) +class ExtractAttachmentsParams(ApiModel): + pass + + class ExtractImageScansParams(ApiModel): angle_threshold: int = Field(5, description="The angle threshold for the image scan extraction") border_size: int = Field(1, description="The border size for the image scan extraction") @@ -547,6 +494,10 @@ class ExtractImagesParams(ApiModel): format: Format = Field(Format.png, description="The output image format e.g., 'png', 'jpeg', or 'gif'") +class FileToPdfParams(ApiModel): + pass + + class FlattenParams(ApiModel): flatten_only_forms: bool = Field( False, description="True to flatten only the forms, false to flatten full PDF (Convert page to image)" @@ -602,6 +553,10 @@ class ImgToPdfParams(ApiModel): ) +class MarkdownToPdfParams(ApiModel): + pass + + class SortType(StrEnum): """ The type of sorting to be applied on the input files before merging. @@ -750,41 +705,6 @@ class OcrPdfParams(ApiModel): sidecar: bool | None = Field(None, description="Include OCR text in a sidecar text file if set to true") -class OverlayMode(StrEnum): - """ - The mode of overlaying: 'SequentialOverlay' for sequential application, 'InterleavedOverlay' for round-robin application, 'FixedRepeatOverlay' for fixed repetition based on provided counts - """ - - sequential_overlay = "SequentialOverlay" - interleaved_overlay = "InterleavedOverlay" - fixed_repeat_overlay = "FixedRepeatOverlay" - - -class OverlayPosition(Enum): - """ - Overlay position 0 is Foregound, 1 is Background - """ - - number_0 = 0 - number_1 = 1 - - -class OverlayPdfsParams(ApiModel): - counts: list[int] | None = Field( - None, - description="An array of integers specifying the number of times each corresponding overlay file should be applied in the 'FixedRepeatOverlay' mode. This should match the length of the overlayFiles array.", - ) - overlay_files: list[bytes] = Field( - ..., - description="An array of PDF files to be used as overlays on the base PDF. The order in these files is applied based on the selected mode.", - ) - overlay_mode: OverlayMode = Field( - ..., - description="The mode of overlaying: 'SequentialOverlay' for sequential application, 'InterleavedOverlay' for round-robin application, 'FixedRepeatOverlay' for fixed repetition based on provided counts", - ) - overlay_position: OverlayPosition = Field(..., description="Overlay position 0 is Foregound, 1 is Background") - - class PdfToCbrParams(ApiModel): dpi: int = Field(..., description="The DPI (Dots Per Inch) for rendering PDF pages as images", examples=[150]) @@ -841,6 +761,12 @@ class PdfToEpubParams(ApiModel): ) +class PdfToHtmlParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ + + class ImageFormat(StrEnum): """ The output image format @@ -877,6 +803,12 @@ class PdfToImgParams(ApiModel): ) +class PdfToMarkdownParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ + + class OutputFormat1(StrEnum): """ The output format type (PDF/A or PDF/X) @@ -912,13 +844,11 @@ class PdfToPresentationParams(ApiModel): output_format: OutputFormat2 = Field(..., description="The output Presentation format") -class PdfToTextEditorParams(ApiModel): +class PdfToSinglePageParams(ApiModel): """ Either upload a file or provide a server-side file ID """ - lightweight: bool = False - class OutputFormat3(StrEnum): """ @@ -979,10 +909,10 @@ class PdfToXlsxParams(ApiModel): ) -class Pkcs11CertificatesParams(ApiModel): - library_path: str | None = None - pin: str | None = None - slot: int | None = None +class PdfToXmlParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ class CustomMode(StrEnum): @@ -1061,6 +991,18 @@ class RemoveBlanksParams(ApiModel): ) +class RemoveCertSignParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ + + +class RemoveImagePdfParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ + + class RemovePagesParams(ApiModel): page_numbers: str = Field( "all", @@ -1077,6 +1019,12 @@ class RenameAttachmentParams(ApiModel): new_name: str = Field(..., description="The new name for the attachment") +class RepairParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ + + class HighContrastColorCombination(StrEnum): """ If HIGH_CONTRAST_COLOR option selected, then pick the default color option for text and background. @@ -1237,27 +1185,6 @@ class ScannerEffectParams(ApiModel): yellowish: bool | None = Field(None, description="Simulate yellowed paper", examples=[False]) -class WorkflowType(StrEnum): - signing = "SIGNING" - review = "REVIEW" - approval = "APPROVAL" - - -class Request(ApiModel): - document_name: str | None = None - due_date: str | None = None - message: str | None = None - owner_email: str | None = None - participant_emails: list[str] | None = None - participant_user_ids: list[int] | None = None - workflow_metadata: str | None = None - workflow_type: WorkflowType | None = None - - -class SessionsParams(ApiModel): - request: Request | None = None - - class SplitBySizeOrCountParams(ApiModel): split_type: int = Field( 0, description="Determines the type of split: 0 for size, 1 for page count, 2 for document count" @@ -1360,6 +1287,12 @@ class TimestampPdfParams(ApiModel): ) +class UnlockPdfFormsParams(ApiModel): + """ + Either upload a file or provide a server-side file ID + """ + + class Trapped(StrEnum): """ The trapped status of the document @@ -1399,11 +1332,6 @@ class UrlToPdfParams(ApiModel): url_input: str = Field(..., description="The input URL to be converted to a PDF file") -class ValidateCertificateParams(ApiModel): - cert_type: str | None = None - password: str | None = None - - class OutputFormat6(StrEnum): """ Target vector format extension @@ -1462,20 +1390,24 @@ class Model( | CbzToPdfParams | EbookToPdfParams | EmlToPdfParams + | FileToPdfParams | HtmlToPdfParams | ImgToPdfParams + | MarkdownToPdfParams | PdfToCbrParams | PdfToCbzParams | PdfToCsvParams | PdfToEpubParams + | PdfToHtmlParams | PdfToImgParams + | PdfToMarkdownParams | PdfToPdfaParams | PdfToPresentationParams | PdfToTextParams - | PdfToTextEditorParams | PdfToVectorParams | PdfToWordParams | PdfToXlsxParams + | PdfToXmlParams | SvgToPdfParams | UrlToPdfParams | VectorToPdfParams @@ -1485,8 +1417,9 @@ class Model( | EditTextParams | MergePdfsParams | MultiPageLayoutParams - | OverlayPdfsParams + | PdfToSinglePageParams | RearrangePagesParams + | RemoveImagePdfParams | RemovePagesParams | RotatePdfParams | ScalePagesParams @@ -1495,33 +1428,31 @@ class Model( | SplitPagesParams | SplitPdfByChaptersParams | SplitPdfBySectionsParams - | AddAttachmentsParams | AddCommentsParams - | AddImageParams | AddPageNumbersParams | AddStampParams | AutoRenameParams | AutoSplitPdfParams | CompressPdfParams | DeleteAttachmentParams + | ExtractAttachmentsParams | ExtractImageScansParams | ExtractImagesParams | FlattenParams | OcrPdfParams | RemoveBlanksParams | RenameAttachmentParams + | RepairParams | ReplaceInvertPdfParams | ScannerEffectParams + | UnlockPdfFormsParams | UpdateMetadataParams | AddPasswordParams | AddWatermarkParams | AutoRedactParams - | CertSignParams - | Pkcs11CertificatesParams - | SessionsParams - | ValidateCertificateParams | RedactParams | RedactExecuteParams + | RemoveCertSignParams | RemovePasswordParams | SanitizePdfParams | TimestampPdfParams @@ -1532,20 +1463,24 @@ class Model( | CbzToPdfParams | EbookToPdfParams | EmlToPdfParams + | FileToPdfParams | HtmlToPdfParams | ImgToPdfParams + | MarkdownToPdfParams | PdfToCbrParams | PdfToCbzParams | PdfToCsvParams | PdfToEpubParams + | PdfToHtmlParams | PdfToImgParams + | PdfToMarkdownParams | PdfToPdfaParams | PdfToPresentationParams | PdfToTextParams - | PdfToTextEditorParams | PdfToVectorParams | PdfToWordParams | PdfToXlsxParams + | PdfToXmlParams | SvgToPdfParams | UrlToPdfParams | VectorToPdfParams @@ -1555,8 +1490,9 @@ class Model( | EditTextParams | MergePdfsParams | MultiPageLayoutParams - | OverlayPdfsParams + | PdfToSinglePageParams | RearrangePagesParams + | RemoveImagePdfParams | RemovePagesParams | RotatePdfParams | ScalePagesParams @@ -1565,33 +1501,31 @@ class Model( | SplitPagesParams | SplitPdfByChaptersParams | SplitPdfBySectionsParams - | AddAttachmentsParams | AddCommentsParams - | AddImageParams | AddPageNumbersParams | AddStampParams | AutoRenameParams | AutoSplitPdfParams | CompressPdfParams | DeleteAttachmentParams + | ExtractAttachmentsParams | ExtractImageScansParams | ExtractImagesParams | FlattenParams | OcrPdfParams | RemoveBlanksParams | RenameAttachmentParams + | RepairParams | ReplaceInvertPdfParams | ScannerEffectParams + | UnlockPdfFormsParams | UpdateMetadataParams | AddPasswordParams | AddWatermarkParams | AutoRedactParams - | CertSignParams - | Pkcs11CertificatesParams - | SessionsParams - | ValidateCertificateParams | RedactParams | RedactExecuteParams + | RemoveCertSignParams | RemovePasswordParams | SanitizePdfParams | TimestampPdfParams @@ -1603,20 +1537,24 @@ type ParamToolModel = ( | CbzToPdfParams | EbookToPdfParams | EmlToPdfParams + | FileToPdfParams | HtmlToPdfParams | ImgToPdfParams + | MarkdownToPdfParams | PdfToCbrParams | PdfToCbzParams | PdfToCsvParams | PdfToEpubParams + | PdfToHtmlParams | PdfToImgParams + | PdfToMarkdownParams | PdfToPdfaParams | PdfToPresentationParams | PdfToTextParams - | PdfToTextEditorParams | PdfToVectorParams | PdfToWordParams | PdfToXlsxParams + | PdfToXmlParams | SvgToPdfParams | UrlToPdfParams | VectorToPdfParams @@ -1626,8 +1564,9 @@ type ParamToolModel = ( | EditTextParams | MergePdfsParams | MultiPageLayoutParams - | OverlayPdfsParams + | PdfToSinglePageParams | RearrangePagesParams + | RemoveImagePdfParams | RemovePagesParams | RotatePdfParams | ScalePagesParams @@ -1636,33 +1575,31 @@ type ParamToolModel = ( | SplitPagesParams | SplitPdfByChaptersParams | SplitPdfBySectionsParams - | AddAttachmentsParams | AddCommentsParams - | AddImageParams | AddPageNumbersParams | AddStampParams | AutoRenameParams | AutoSplitPdfParams | CompressPdfParams | DeleteAttachmentParams + | ExtractAttachmentsParams | ExtractImageScansParams | ExtractImagesParams | FlattenParams | OcrPdfParams | RemoveBlanksParams | RenameAttachmentParams + | RepairParams | ReplaceInvertPdfParams | ScannerEffectParams + | UnlockPdfFormsParams | UpdateMetadataParams | AddPasswordParams | AddWatermarkParams | AutoRedactParams - | CertSignParams - | Pkcs11CertificatesParams - | SessionsParams - | ValidateCertificateParams | RedactParams | RedactExecuteParams + | RemoveCertSignParams | RemovePasswordParams | SanitizePdfParams | TimestampPdfParams @@ -1675,20 +1612,24 @@ class ToolEndpoint(StrEnum): CBZ_TO_PDF = "/api/v1/convert/cbz/pdf" EBOOK_TO_PDF = "/api/v1/convert/ebook/pdf" EML_TO_PDF = "/api/v1/convert/eml/pdf" + FILE_TO_PDF = "/api/v1/convert/file/pdf" HTML_TO_PDF = "/api/v1/convert/html/pdf" IMG_TO_PDF = "/api/v1/convert/img/pdf" + MARKDOWN_TO_PDF = "/api/v1/convert/markdown/pdf" PDF_TO_CBR = "/api/v1/convert/pdf/cbr" PDF_TO_CBZ = "/api/v1/convert/pdf/cbz" PDF_TO_CSV = "/api/v1/convert/pdf/csv" PDF_TO_EPUB = "/api/v1/convert/pdf/epub" + PDF_TO_HTML = "/api/v1/convert/pdf/html" PDF_TO_IMG = "/api/v1/convert/pdf/img" + PDF_TO_MARKDOWN = "/api/v1/convert/pdf/markdown" PDF_TO_PDFA = "/api/v1/convert/pdf/pdfa" PDF_TO_PRESENTATION = "/api/v1/convert/pdf/presentation" PDF_TO_TEXT = "/api/v1/convert/pdf/text" - PDF_TO_TEXT_EDITOR = "/api/v1/convert/pdf/text-editor" PDF_TO_VECTOR = "/api/v1/convert/pdf/vector" PDF_TO_WORD = "/api/v1/convert/pdf/word" PDF_TO_XLSX = "/api/v1/convert/pdf/xlsx" + PDF_TO_XML = "/api/v1/convert/pdf/xml" SVG_TO_PDF = "/api/v1/convert/svg/pdf" URL_TO_PDF = "/api/v1/convert/url/pdf" VECTOR_TO_PDF = "/api/v1/convert/vector/pdf" @@ -1698,8 +1639,9 @@ class ToolEndpoint(StrEnum): EDIT_TEXT = "/api/v1/general/edit-text" MERGE_PDFS = "/api/v1/general/merge-pdfs" MULTI_PAGE_LAYOUT = "/api/v1/general/multi-page-layout" - OVERLAY_PDFS = "/api/v1/general/overlay-pdfs" + PDF_TO_SINGLE_PAGE = "/api/v1/general/pdf-to-single-page" REARRANGE_PAGES = "/api/v1/general/rearrange-pages" + REMOVE_IMAGE_PDF = "/api/v1/general/remove-image-pdf" REMOVE_PAGES = "/api/v1/general/remove-pages" ROTATE_PDF = "/api/v1/general/rotate-pdf" SCALE_PAGES = "/api/v1/general/scale-pages" @@ -1708,33 +1650,31 @@ class ToolEndpoint(StrEnum): SPLIT_PAGES = "/api/v1/general/split-pages" SPLIT_PDF_BY_CHAPTERS = "/api/v1/general/split-pdf-by-chapters" SPLIT_PDF_BY_SECTIONS = "/api/v1/general/split-pdf-by-sections" - ADD_ATTACHMENTS = "/api/v1/misc/add-attachments" ADD_COMMENTS = "/api/v1/misc/add-comments" - ADD_IMAGE = "/api/v1/misc/add-image" ADD_PAGE_NUMBERS = "/api/v1/misc/add-page-numbers" ADD_STAMP = "/api/v1/misc/add-stamp" AUTO_RENAME = "/api/v1/misc/auto-rename" AUTO_SPLIT_PDF = "/api/v1/misc/auto-split-pdf" COMPRESS_PDF = "/api/v1/misc/compress-pdf" DELETE_ATTACHMENT = "/api/v1/misc/delete-attachment" + EXTRACT_ATTACHMENTS = "/api/v1/misc/extract-attachments" EXTRACT_IMAGE_SCANS = "/api/v1/misc/extract-image-scans" EXTRACT_IMAGES = "/api/v1/misc/extract-images" FLATTEN = "/api/v1/misc/flatten" OCR_PDF = "/api/v1/misc/ocr-pdf" REMOVE_BLANKS = "/api/v1/misc/remove-blanks" RENAME_ATTACHMENT = "/api/v1/misc/rename-attachment" + REPAIR = "/api/v1/misc/repair" REPLACE_INVERT_PDF = "/api/v1/misc/replace-invert-pdf" SCANNER_EFFECT = "/api/v1/misc/scanner-effect" + UNLOCK_PDF_FORMS = "/api/v1/misc/unlock-pdf-forms" UPDATE_METADATA = "/api/v1/misc/update-metadata" ADD_PASSWORD = "/api/v1/security/add-password" ADD_WATERMARK = "/api/v1/security/add-watermark" AUTO_REDACT = "/api/v1/security/auto-redact" - CERT_SIGN = "/api/v1/security/cert-sign" - PKCS11_CERTIFICATES = "/api/v1/security/cert-sign/hardware/pkcs11-certificates" - SESSIONS = "/api/v1/security/cert-sign/sessions" - VALIDATE_CERTIFICATE = "/api/v1/security/cert-sign/validate-certificate" REDACT = "/api/v1/security/redact" REDACT_EXECUTE = "/api/v1/security/redact-execute" + REMOVE_CERT_SIGN = "/api/v1/security/remove-cert-sign" REMOVE_PASSWORD = "/api/v1/security/remove-password" SANITIZE_PDF = "/api/v1/security/sanitize-pdf" TIMESTAMP_PDF = "/api/v1/security/timestamp-pdf" @@ -1745,20 +1685,24 @@ OPERATIONS: dict[ToolEndpoint, ParamToolModelType] = { ToolEndpoint.CBZ_TO_PDF: CbzToPdfParams, ToolEndpoint.EBOOK_TO_PDF: EbookToPdfParams, ToolEndpoint.EML_TO_PDF: EmlToPdfParams, + ToolEndpoint.FILE_TO_PDF: FileToPdfParams, ToolEndpoint.HTML_TO_PDF: HtmlToPdfParams, ToolEndpoint.IMG_TO_PDF: ImgToPdfParams, + ToolEndpoint.MARKDOWN_TO_PDF: MarkdownToPdfParams, ToolEndpoint.PDF_TO_CBR: PdfToCbrParams, ToolEndpoint.PDF_TO_CBZ: PdfToCbzParams, ToolEndpoint.PDF_TO_CSV: PdfToCsvParams, ToolEndpoint.PDF_TO_EPUB: PdfToEpubParams, + ToolEndpoint.PDF_TO_HTML: PdfToHtmlParams, ToolEndpoint.PDF_TO_IMG: PdfToImgParams, + ToolEndpoint.PDF_TO_MARKDOWN: PdfToMarkdownParams, ToolEndpoint.PDF_TO_PDFA: PdfToPdfaParams, ToolEndpoint.PDF_TO_PRESENTATION: PdfToPresentationParams, ToolEndpoint.PDF_TO_TEXT: PdfToTextParams, - ToolEndpoint.PDF_TO_TEXT_EDITOR: PdfToTextEditorParams, ToolEndpoint.PDF_TO_VECTOR: PdfToVectorParams, ToolEndpoint.PDF_TO_WORD: PdfToWordParams, ToolEndpoint.PDF_TO_XLSX: PdfToXlsxParams, + ToolEndpoint.PDF_TO_XML: PdfToXmlParams, ToolEndpoint.SVG_TO_PDF: SvgToPdfParams, ToolEndpoint.URL_TO_PDF: UrlToPdfParams, ToolEndpoint.VECTOR_TO_PDF: VectorToPdfParams, @@ -1768,8 +1712,9 @@ OPERATIONS: dict[ToolEndpoint, ParamToolModelType] = { ToolEndpoint.EDIT_TEXT: EditTextParams, ToolEndpoint.MERGE_PDFS: MergePdfsParams, ToolEndpoint.MULTI_PAGE_LAYOUT: MultiPageLayoutParams, - ToolEndpoint.OVERLAY_PDFS: OverlayPdfsParams, + ToolEndpoint.PDF_TO_SINGLE_PAGE: PdfToSinglePageParams, ToolEndpoint.REARRANGE_PAGES: RearrangePagesParams, + ToolEndpoint.REMOVE_IMAGE_PDF: RemoveImagePdfParams, ToolEndpoint.REMOVE_PAGES: RemovePagesParams, ToolEndpoint.ROTATE_PDF: RotatePdfParams, ToolEndpoint.SCALE_PAGES: ScalePagesParams, @@ -1778,33 +1723,31 @@ OPERATIONS: dict[ToolEndpoint, ParamToolModelType] = { ToolEndpoint.SPLIT_PAGES: SplitPagesParams, ToolEndpoint.SPLIT_PDF_BY_CHAPTERS: SplitPdfByChaptersParams, ToolEndpoint.SPLIT_PDF_BY_SECTIONS: SplitPdfBySectionsParams, - ToolEndpoint.ADD_ATTACHMENTS: AddAttachmentsParams, ToolEndpoint.ADD_COMMENTS: AddCommentsParams, - ToolEndpoint.ADD_IMAGE: AddImageParams, ToolEndpoint.ADD_PAGE_NUMBERS: AddPageNumbersParams, ToolEndpoint.ADD_STAMP: AddStampParams, ToolEndpoint.AUTO_RENAME: AutoRenameParams, ToolEndpoint.AUTO_SPLIT_PDF: AutoSplitPdfParams, ToolEndpoint.COMPRESS_PDF: CompressPdfParams, ToolEndpoint.DELETE_ATTACHMENT: DeleteAttachmentParams, + ToolEndpoint.EXTRACT_ATTACHMENTS: ExtractAttachmentsParams, ToolEndpoint.EXTRACT_IMAGE_SCANS: ExtractImageScansParams, ToolEndpoint.EXTRACT_IMAGES: ExtractImagesParams, ToolEndpoint.FLATTEN: FlattenParams, ToolEndpoint.OCR_PDF: OcrPdfParams, ToolEndpoint.REMOVE_BLANKS: RemoveBlanksParams, ToolEndpoint.RENAME_ATTACHMENT: RenameAttachmentParams, + ToolEndpoint.REPAIR: RepairParams, ToolEndpoint.REPLACE_INVERT_PDF: ReplaceInvertPdfParams, ToolEndpoint.SCANNER_EFFECT: ScannerEffectParams, + ToolEndpoint.UNLOCK_PDF_FORMS: UnlockPdfFormsParams, ToolEndpoint.UPDATE_METADATA: UpdateMetadataParams, ToolEndpoint.ADD_PASSWORD: AddPasswordParams, ToolEndpoint.ADD_WATERMARK: AddWatermarkParams, ToolEndpoint.AUTO_REDACT: AutoRedactParams, - ToolEndpoint.CERT_SIGN: CertSignParams, - ToolEndpoint.PKCS11_CERTIFICATES: Pkcs11CertificatesParams, - ToolEndpoint.SESSIONS: SessionsParams, - ToolEndpoint.VALIDATE_CERTIFICATE: ValidateCertificateParams, ToolEndpoint.REDACT: RedactParams, ToolEndpoint.REDACT_EXECUTE: RedactExecuteParams, + ToolEndpoint.REMOVE_CERT_SIGN: RemoveCertSignParams, ToolEndpoint.REMOVE_PASSWORD: RemovePasswordParams, ToolEndpoint.SANITIZE_PDF: SanitizePdfParams, ToolEndpoint.TIMESTAMP_PDF: TimestampPdfParams, From 17aa71850ca94b67cac5e94d4f76e9d07d408522 Mon Sep 17 00:00:00 2001 From: James Brunton Date: Tue, 7 Jul 2026 12:11:24 +0100 Subject: [PATCH 05/27] Convert to consistently use JS modules (#6854) # Description of Changes Modernises the codebase and gets rid of warnings where Node complains that it doesn't know what type of JS it's supposed to be reading on `.js` files. We might as well update everything to just use correct JS syntax instead of keeping with some files having Node-specific imports. --- frontend/editor/postcss.config.js | 7 ++- frontend/editor/scripts/generate-icons.js | 12 ++--- frontend/editor/scripts/generate-licenses.js | 21 +++------ frontend/editor/scripts/generate-og-image.mjs | 47 ++++++++++--------- .../live/encrypted-unlock-then-tool.spec.ts | 2 +- .../stubbed/add-page-numbers-tool.spec.ts | 5 +- .../core/tests/stubbed/add-stamp-tool.spec.ts | 5 +- .../tests/stubbed/cert-sign-wizard.spec.ts | 2 +- .../stubbed/certificate-validation.spec.ts | 2 +- .../stubbed/comments-sidebar-order.spec.ts | 2 +- .../src/core/tests/stubbed/compare.spec.ts | 2 +- .../src/core/tests/stubbed/convert.spec.ts | 2 +- .../stubbed/encrypted-pdf-unlock.spec.ts | 2 +- .../stubbed/file-state-across-tools.spec.ts | 2 +- .../stubbed/merge-response-handling.spec.ts | 2 +- .../stubbed/page-editor-rotation.spec.ts | 5 +- .../tests/stubbed/pdf-text-search.spec.ts | 5 +- .../src/core/tests/stubbed/seed.spec.ts | 9 +++- .../tests/stubbed/tour-onboarding.spec.ts | 5 +- .../stubbed/validate-signature-trust.spec.ts | 2 +- .../viewer-sidebar-add-buttons.spec.ts | 5 +- .../stubbed/viewer-text-selection.spec.ts | 2 +- .../core/tests/stubbed/watermark-tool.spec.ts | 5 +- frontend/editor/tailwind.config.js | 2 +- frontend/eslint.config.mjs | 1 - frontend/package.json | 1 + frontend/scripts/update-minor.js | 2 +- 27 files changed, 93 insertions(+), 66 deletions(-) diff --git a/frontend/editor/postcss.config.js b/frontend/editor/postcss.config.js index 7b8895cce8..5bb7b5d6ef 100644 --- a/frontend/editor/postcss.config.js +++ b/frontend/editor/postcss.config.js @@ -1,3 +1,6 @@ -module.exports = { - plugins: [require("@tailwindcss/postcss"), require("autoprefixer")], +import tailwindcssPostcss from "@tailwindcss/postcss"; +import autoprefixer from "autoprefixer"; + +export default { + plugins: [tailwindcssPostcss, autoprefixer], }; diff --git a/frontend/editor/scripts/generate-icons.js b/frontend/editor/scripts/generate-icons.js index 7e6da2740e..70b4a091d2 100644 --- a/frontend/editor/scripts/generate-icons.js +++ b/frontend/editor/scripts/generate-icons.js @@ -1,8 +1,8 @@ #!/usr/bin/env node -const { icons } = require("@iconify-json/material-symbols"); -const fs = require("fs"); -const path = require("path"); +import { icons } from "@iconify-json/material-symbols"; +import fs from "node:fs"; +import path from "node:path"; // Check for verbose flag const isVerbose = @@ -19,7 +19,7 @@ const debug = (message) => { // Function to scan codebase for LocalIcon usage function scanForUsedIcons() { const usedIcons = new Set(); - const srcDir = path.join(__dirname, "..", "src"); + const srcDir = path.join(import.meta.dirname, "..", "src"); info("🔍 Scanning codebase for LocalIcon usage..."); @@ -140,7 +140,7 @@ async function main() { // Check if we need to regenerate (compare with existing) const outputPath = path.join( - __dirname, + import.meta.dirname, "..", "src", "assets", @@ -200,7 +200,7 @@ async function main() { } // Create output directory - const outputDir = path.join(__dirname, "..", "src", "assets"); + const outputDir = path.join(import.meta.dirname, "..", "src", "assets"); if (!fs.existsSync(outputDir)) { fs.mkdirSync(outputDir, { recursive: true }); } diff --git a/frontend/editor/scripts/generate-licenses.js b/frontend/editor/scripts/generate-licenses.js index a82ec9a2bd..72da16c6a9 100644 --- a/frontend/editor/scripts/generate-licenses.js +++ b/frontend/editor/scripts/generate-licenses.js @@ -1,28 +1,21 @@ #!/usr/bin/env node -const { execSync } = require("node:child_process"); -const { - existsSync, - mkdirSync, - writeFileSync, - readFileSync, -} = require("node:fs"); -const path = require("node:path"); +import { execSync } from "node:child_process"; +import { existsSync, mkdirSync, writeFileSync, readFileSync } from "node:fs"; +import path from "node:path"; +import { argv } from "node:process"; -const { argv } = require("node:process"); const inputIdx = argv.indexOf("--input"); const INPUT_FILE = inputIdx > -1 ? argv[inputIdx + 1] : null; const POSTPROCESS_ONLY = !!INPUT_FILE; -// __dirname is available in CommonJS by default - /** * Generate 3rd party licenses for frontend dependencies * This script creates a JSON file similar to the Java backend's 3rdPartyLicenses.json */ const OUTPUT_FILE = path.join( - __dirname, + import.meta.dirname, "..", "src", "assets", @@ -30,7 +23,7 @@ const OUTPUT_FILE = path.join( ); // package.json lives at the workspace root (frontend/), not editor/. The // script is at frontend/editor/scripts/, so walk up two levels. -const PACKAGE_JSON = path.join(__dirname, "..", "..", "package.json"); +const PACKAGE_JSON = path.join(import.meta.dirname, "..", "..", "package.json"); // Ensure the output directory exists const outputDir = path.dirname(OUTPUT_FILE); @@ -192,7 +185,7 @@ try { // Write license warnings to a separate file for CI/CD const warningsFile = path.join( - __dirname, + import.meta.dirname, "..", "src", "assets", diff --git a/frontend/editor/scripts/generate-og-image.mjs b/frontend/editor/scripts/generate-og-image.mjs index 7cef32c9b0..cf617bf7e8 100644 --- a/frontend/editor/scripts/generate-og-image.mjs +++ b/frontend/editor/scripts/generate-og-image.mjs @@ -16,11 +16,10 @@ /* global document, getComputedStyle */ // used inside page.evaluate (browser context) import fs from "node:fs/promises"; +import { readFileSync } from "node:fs"; import path from "node:path"; import { fileURLToPath } from "node:url"; -import { createRequire } from "node:module"; -const require = createRequire(import.meta.url); const HERE = path.dirname(fileURLToPath(import.meta.url)); const ROOT = path.resolve(HERE, ".."); @@ -69,11 +68,14 @@ export const THEME = { }; // ---- icon resolution (material-symbols via iconify) ------------------------ -function resolveIcon(icon) { +async function resolveIcon(icon) { if (!icon) return ""; if (icon.trim().startsWith(" let _browser = null; async function getBrowser() { if (_browser) return _browser; - const puppeteer = require("puppeteer"); + const { default: puppeteer } = await import("puppeteer"); _browser = await puppeteer.launch({ headless: "new", args: ["--no-sandbox"], @@ -163,7 +165,7 @@ export async function renderOgCard({ outFile, theme = THEME, }) { - const iconSvg = resolveIcon(icon); + const iconSvg = await resolveIcon(icon); const html = await buildHtml({ name, description, iconSvg, theme }); const browser = await getBrowser(); const page = await browser.newPage(); @@ -230,7 +232,7 @@ const kebab = (id) => id.replace(/([A-Z])/g, "-$1").toLowerCase(); // English name/description live next to each tool as the `t(key, fallback)` default. function readRegistryStrings() { - const src = require("node:fs").readFileSync( + const src = readFileSync( path.join(ROOT, "src/core/data/useTranslatedToolRegistry.tsx"), "utf8", ); @@ -268,7 +270,7 @@ export async function generateMissing(theme = THEME) { // Each tool's app icon lives as `icon=""` just before its // `name: t("home..title", …)`. Pair each title with the closest preceding icon. function readRegistryIcons() { - const src = require("node:fs").readFileSync( + const src = readFileSync( path.join(ROOT, "src/core/data/useTranslatedToolRegistry.tsx"), "utf8", ); @@ -288,25 +290,26 @@ function readRegistryIcons() { return byId; } -function iconExists(name) { +async function iconExists(name) { if (!name) return false; try { - const { getIconData } = require("@iconify/utils"); - return !!getIconData( - require("@iconify-json/material-symbols/icons.json"), - name, + const { getIconData } = await import("@iconify/utils"); + const { default: set } = await import( + "@iconify-json/material-symbols/icons.json", + { with: { type: "json" } } ); + return !!getIconData(set, name); } catch { return false; } } // First candidate that resolves; also tries dropping a "-rounded" suffix. -function firstResolvableIcon(candidates) { +async function firstResolvableIcon(candidates) { for (const c of candidates) { - if (iconExists(c)) return c; + if (await iconExists(c)) return c; const alt = c && c.replace(/-rounded$/, ""); - if (alt && alt !== c && iconExists(alt)) return alt; + if (alt && alt !== c && (await iconExists(alt))) return alt; } return "description-outline"; } @@ -324,14 +327,14 @@ export async function generateAll(theme = THEME) { const { titles, descs } = readRegistryStrings(); const regIcons = readRegistryIcons(); const ogMap = JSON.parse( - require("node:fs").readFileSync( - path.join(ROOT, "src/core/data/ogImageMap.json"), - "utf8", - ), + readFileSync(path.join(ROOT, "src/core/data/ogImageMap.json"), "utf8"), ); const results = []; for (const [id, basename] of Object.entries(ogMap)) { - const icon = firstResolvableIcon([regIcons[id], MISSING_TOOL_ICONS[id]]); + const icon = await firstResolvableIcon([ + regIcons[id], + MISSING_TOOL_ICONS[id], + ]); await renderOgCard({ name: titles[id] || humanizeId(id), description: descs[id] || "", diff --git a/frontend/editor/src/core/tests/live/encrypted-unlock-then-tool.spec.ts b/frontend/editor/src/core/tests/live/encrypted-unlock-then-tool.spec.ts index de9d803d25..d1b3641962 100644 --- a/frontend/editor/src/core/tests/live/encrypted-unlock-then-tool.spec.ts +++ b/frontend/editor/src/core/tests/live/encrypted-unlock-then-tool.spec.ts @@ -7,7 +7,7 @@ import { } from "@app/tests/helpers/ui-helpers"; import path from "path"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const ENCRYPTED_PDF = path.join(FIXTURES_DIR, "encrypted.pdf"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); diff --git a/frontend/editor/src/core/tests/stubbed/add-page-numbers-tool.spec.ts b/frontend/editor/src/core/tests/stubbed/add-page-numbers-tool.spec.ts index ecb6f6ce0b..8fa6a1940c 100644 --- a/frontend/editor/src/core/tests/stubbed/add-page-numbers-tool.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/add-page-numbers-tool.spec.ts @@ -2,7 +2,10 @@ import { test, expect } from "@app/tests/helpers/stub-test-base"; import { uploadFiles } from "@app/tests/helpers/ui-helpers"; import path from "path"; -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); +const SAMPLE_PDF = path.join( + import.meta.dirname, + "../test-fixtures/sample.pdf", +); /** * Add Page Numbers walks the user through a multi-step config: position diff --git a/frontend/editor/src/core/tests/stubbed/add-stamp-tool.spec.ts b/frontend/editor/src/core/tests/stubbed/add-stamp-tool.spec.ts index 56236d5bb4..6c6adbb4ac 100644 --- a/frontend/editor/src/core/tests/stubbed/add-stamp-tool.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/add-stamp-tool.spec.ts @@ -2,7 +2,10 @@ import { test, expect } from "@app/tests/helpers/stub-test-base"; import { uploadFiles } from "@app/tests/helpers/ui-helpers"; import path from "path"; -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); +const SAMPLE_PDF = path.join( + import.meta.dirname, + "../test-fixtures/sample.pdf", +); /** * AddStamp loads, accepts a PDF upload, and remains interactive. diff --git a/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts b/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts index 807e4231d4..f72d642a8e 100644 --- a/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts @@ -3,7 +3,7 @@ import { uploadFiles } from "@app/tests/helpers/ui-helpers"; import type { Page, Route } from "@playwright/test"; import path from "path"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); // app-config the desktop bundle would return: hardware signing is offered only there. diff --git a/frontend/editor/src/core/tests/stubbed/certificate-validation.spec.ts b/frontend/editor/src/core/tests/stubbed/certificate-validation.spec.ts index 075464c587..a00a91c6ba 100644 --- a/frontend/editor/src/core/tests/stubbed/certificate-validation.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/certificate-validation.spec.ts @@ -5,7 +5,7 @@ import { suppressNativeFilePicker } from "@app/tests/helpers/ui-helpers"; // --------------------------------------------------------------------------- // Test fixtures — pre-generated keystores in test-fixtures/certs/ // --------------------------------------------------------------------------- -const CERTS_DIR = path.join(__dirname, "../test-fixtures/certs"); +const CERTS_DIR = path.join(import.meta.dirname, "../test-fixtures/certs"); const VALID_P12 = path.join(CERTS_DIR, "valid-test.p12"); const EXPIRED_P12 = path.join(CERTS_DIR, "expired-test.p12"); const NOT_YET_VALID_P12 = path.join(CERTS_DIR, "not-yet-valid-test.p12"); diff --git a/frontend/editor/src/core/tests/stubbed/comments-sidebar-order.spec.ts b/frontend/editor/src/core/tests/stubbed/comments-sidebar-order.spec.ts index 097b162c85..91206b1222 100644 --- a/frontend/editor/src/core/tests/stubbed/comments-sidebar-order.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/comments-sidebar-order.spec.ts @@ -2,7 +2,7 @@ import { test, expect } from "@app/tests/helpers/stub-test-base"; import path from "path"; const ANNOTATED_PDF = path.join( - __dirname, + import.meta.dirname, "../test-fixtures/annotations_out_of_order.pdf", ); diff --git a/frontend/editor/src/core/tests/stubbed/compare.spec.ts b/frontend/editor/src/core/tests/stubbed/compare.spec.ts index 6bcaaee538..6893721465 100644 --- a/frontend/editor/src/core/tests/stubbed/compare.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/compare.spec.ts @@ -22,7 +22,7 @@ import { test, expect, type Page } from "@playwright/test"; import path from "path"; import { mockAppApis } from "@app/tests/helpers/api-stubs"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const PDF_A = path.join(FIXTURES_DIR, "compare_sample_a.pdf"); const PDF_B = path.join(FIXTURES_DIR, "compare_sample_b.pdf"); diff --git a/frontend/editor/src/core/tests/stubbed/convert.spec.ts b/frontend/editor/src/core/tests/stubbed/convert.spec.ts index de8fa17a9c..52feefcb98 100644 --- a/frontend/editor/src/core/tests/stubbed/convert.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/convert.spec.ts @@ -10,7 +10,7 @@ import path from "path"; import { mockAppApis } from "@app/tests/helpers/api-stubs"; import { suppressNativeFilePicker } from "@app/tests/helpers/ui-helpers"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); // --------------------------------------------------------------------------- diff --git a/frontend/editor/src/core/tests/stubbed/encrypted-pdf-unlock.spec.ts b/frontend/editor/src/core/tests/stubbed/encrypted-pdf-unlock.spec.ts index 2a202b6cfe..430f5e4f24 100644 --- a/frontend/editor/src/core/tests/stubbed/encrypted-pdf-unlock.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/encrypted-pdf-unlock.spec.ts @@ -23,7 +23,7 @@ import fs from "fs"; import { mockAppApis } from "@app/tests/helpers/api-stubs"; import { suppressNativeFilePicker } from "@app/tests/helpers/ui-helpers"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const ENCRYPTED_PDF = path.join(FIXTURES_DIR, "encrypted.pdf"); const FAKE_UNLOCKED_PDF = Buffer.from( diff --git a/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts b/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts index 6c84f6020a..09708bbb0a 100644 --- a/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/file-state-across-tools.spec.ts @@ -2,7 +2,7 @@ import { test, expect } from "@app/tests/helpers/stub-test-base"; import { uploadFiles } from "@app/tests/helpers/ui-helpers"; import path from "path"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); /** diff --git a/frontend/editor/src/core/tests/stubbed/merge-response-handling.spec.ts b/frontend/editor/src/core/tests/stubbed/merge-response-handling.spec.ts index 8dd5662c3d..20a96e32f4 100644 --- a/frontend/editor/src/core/tests/stubbed/merge-response-handling.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/merge-response-handling.spec.ts @@ -13,7 +13,7 @@ import fs from "fs"; // `result.zip` instead of the merged file. The UI fix uses signature-based // detection - %PDF wins regardless of Content-Type. -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); const SAMPLE_PDF_BYTES = fs.readFileSync(SAMPLE_PDF); diff --git a/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts b/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts index 5912c89211..aeb6eb0de2 100644 --- a/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts @@ -10,7 +10,10 @@ import { uploadFiles, dismissTourTooltip } from "@app/tests/helpers/ui-helpers"; // Fixture: 4 portrait pages whose intrinsic /Rotate is 0, 90, 270, 180. // Page 3 (index 2) is 270 so a single rotate-right lands on a net-0 target - // the exact case the export used to drop, leaving the source rotation behind. -const ROTATED_PDF = path.join(__dirname, "../test-fixtures/rotated-pages.pdf"); +const ROTATED_PDF = path.join( + import.meta.dirname, + "../test-fixtures/rotated-pages.pdf", +); const SOURCE_ROTATIONS = [0, 90, 270, 180]; /** Read the rotation each thumbnail is currently displaying (= page.rotation). */ diff --git a/frontend/editor/src/core/tests/stubbed/pdf-text-search.spec.ts b/frontend/editor/src/core/tests/stubbed/pdf-text-search.spec.ts index ce4bbce081..89d2fcfcce 100644 --- a/frontend/editor/src/core/tests/stubbed/pdf-text-search.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/pdf-text-search.spec.ts @@ -1,7 +1,10 @@ import { test, expect } from "@app/tests/helpers/stub-test-base"; import path from "path"; -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); +const SAMPLE_PDF = path.join( + import.meta.dirname, + "../test-fixtures/sample.pdf", +); /** * The reader/viewer exposes an in-PDF text search via CustomSearchLayer. diff --git a/frontend/editor/src/core/tests/stubbed/seed.spec.ts b/frontend/editor/src/core/tests/stubbed/seed.spec.ts index e85e7a723f..6b50e198aa 100644 --- a/frontend/editor/src/core/tests/stubbed/seed.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/seed.spec.ts @@ -22,7 +22,14 @@ function resolveFixturePath(filename: string): string { filename, ), path.join(process.cwd(), "src", "core", "tests", "test-fixtures", filename), - path.join(__dirname, "..", "core", "tests", "test-fixtures", filename), + path.join( + import.meta.dirname, + "..", + "core", + "tests", + "test-fixtures", + filename, + ), ]; for (const p of candidates) { if (fs.existsSync(p)) return p; diff --git a/frontend/editor/src/core/tests/stubbed/tour-onboarding.spec.ts b/frontend/editor/src/core/tests/stubbed/tour-onboarding.spec.ts index 658407e263..8d4d07cd8c 100644 --- a/frontend/editor/src/core/tests/stubbed/tour-onboarding.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/tour-onboarding.spec.ts @@ -17,7 +17,10 @@ import { uploadFiles, openSettings } from "@app/tests/helpers/ui-helpers"; * - whatsNewStepsConfig.ts */ -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); +const SAMPLE_PDF = path.join( + import.meta.dirname, + "../test-fixtures/sample.pdf", +); // --------------------------------------------------------------------------- // 15.1 Static layout - always visible on the main page diff --git a/frontend/editor/src/core/tests/stubbed/validate-signature-trust.spec.ts b/frontend/editor/src/core/tests/stubbed/validate-signature-trust.spec.ts index e699451d9e..322b7cc88f 100644 --- a/frontend/editor/src/core/tests/stubbed/validate-signature-trust.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/validate-signature-trust.spec.ts @@ -3,7 +3,7 @@ import { uploadFiles } from "@app/tests/helpers/ui-helpers"; import type { Page, Route } from "@playwright/test"; import path from "path"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); // Base backend SignatureValidationResult; tests override the trust-related fields. diff --git a/frontend/editor/src/core/tests/stubbed/viewer-sidebar-add-buttons.spec.ts b/frontend/editor/src/core/tests/stubbed/viewer-sidebar-add-buttons.spec.ts index ad3527c9c3..67df3865e1 100644 --- a/frontend/editor/src/core/tests/stubbed/viewer-sidebar-add-buttons.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/viewer-sidebar-add-buttons.spec.ts @@ -17,7 +17,10 @@ import path from "path"; * Backend-free spec. */ -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); +const SAMPLE_PDF = path.join( + import.meta.dirname, + "../test-fixtures/sample.pdf", +); async function openViewerWithSample(page: import("@playwright/test").Page) { await page.goto("/read"); diff --git a/frontend/editor/src/core/tests/stubbed/viewer-text-selection.spec.ts b/frontend/editor/src/core/tests/stubbed/viewer-text-selection.spec.ts index 1a7486e37a..d9a08ae9e7 100644 --- a/frontend/editor/src/core/tests/stubbed/viewer-text-selection.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/viewer-text-selection.spec.ts @@ -1,7 +1,7 @@ import path from "path"; import { test, expect } from "@app/tests/helpers/stub-test-base"; -const FIXTURES_DIR = path.join(__dirname, "../test-fixtures"); +const FIXTURES_DIR = path.join(import.meta.dirname, "../test-fixtures"); const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf"); const MULTIPAGE_PDF = path.join(FIXTURES_DIR, "annotations_out_of_order.pdf"); diff --git a/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts b/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts index 47ad9cd57c..e2d3ffcb71 100644 --- a/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts @@ -2,7 +2,10 @@ import { test, expect } from "@app/tests/helpers/stub-test-base"; import { uploadFiles } from "@app/tests/helpers/ui-helpers"; import path from "path"; -const SAMPLE_PDF = path.join(__dirname, "../test-fixtures/sample.pdf"); +const SAMPLE_PDF = path.join( + import.meta.dirname, + "../test-fixtures/sample.pdf", +); /** * Watermark has three modes — text / image / file overlay — selected via diff --git a/frontend/editor/tailwind.config.js b/frontend/editor/tailwind.config.js index b38eea76ee..37af74b68a 100644 --- a/frontend/editor/tailwind.config.js +++ b/frontend/editor/tailwind.config.js @@ -1,5 +1,5 @@ /** @type {import('tailwindcss').Config} */ -module.exports = { +export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], darkMode: ["class", '[data-mantine-color-scheme="dark"]'], theme: { diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs index 4a3df8ad10..81698ddde6 100644 --- a/frontend/eslint.config.mjs +++ b/frontend/eslint.config.mjs @@ -64,7 +64,6 @@ export default defineConfig( }, ], "@typescript-eslint/no-explicit-any": "off", // Temporarily disabled until codebase conformant - "@typescript-eslint/no-require-imports": "off", // Temporarily disabled until codebase conformant "@typescript-eslint/no-unused-vars": [ "error", { diff --git a/frontend/package.json b/frontend/package.json index e9d57208e2..f9f035fa0d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -2,6 +2,7 @@ "name": "frontend", "version": "0.1.0", "private": true, + "type": "module", "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE", "proxy": "http://localhost:8080", "dependencies": { diff --git a/frontend/scripts/update-minor.js b/frontend/scripts/update-minor.js index 3765265656..c0bb9467c2 100644 --- a/frontend/scripts/update-minor.js +++ b/frontend/scripts/update-minor.js @@ -5,7 +5,7 @@ * Calculates date from 7 days ago and runs npm update/audit with that date */ -const { spawn } = require("child_process"); +import { spawn } from "node:child_process"; // Calculate date from 7 days ago in YYYY-MM-DD format const date = new Date(); From 7bd38261788be970c4cd32eadeec6e8b83945133 Mon Sep 17 00:00:00 2001 From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com> Date: Tue, 7 Jul 2026 13:02:02 +0100 Subject: [PATCH 06/27] Portal procurement: real pricing/trial/quote spine + linked-gated checkout (vertical slice) (#6861) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## What this is The enterprise procurement flow, built into the customer portal as a **vertical slice** — one linked account can go the whole way from trial to a paid, committed subscription, using real Stripe under the hood. Procurement no longer lives as a nav tab. It sits on **Home** as a deal-status hero and expands into a full-screen takeover, matching the marketing prototype. ## The journey (what a customer does) - **Start a trial** in one click — the deadline and next steps show on the Home hero (no card, mock licence). - **Build a quote** — a short form (volume → commitment & service → details); pricing is computed server-side. - **Generate the quote** — this creates a real **Stripe Quote** with a proper **PDF** you can download and share, and it becomes a milestone you can come back to. - **Review & sign the agreement** — one combined agreement (MSA + Order Form + EULA + DPA) with an itemised order form and an "I agree" (no e-signature yet). - **Accept** — Stripe creates the committed annual **subscription** and its **first invoice**, which you can **pay or download right in the app** (no waiting on email). - Edit a quote any time — it remembers your inputs and company name; the old Stripe quote is cancelled so it can't still be accepted. - The hero also has quick actions: **key documents**, **invite teammates**, **schedule a call**, and a **trial countdown** you can extend. ## Architecture — Supabase vs Java Pricing, deal/quote state, and the commercial journey live in **Java (`:saas`)**. Everything that touches **Stripe** (writes + PDFs) lives in **Supabase edge functions** — Java has no Stripe SDK and only reads Stripe via the sync mirror. The portal calls both. ```mermaid flowchart LR Portal["Portal (React · editor/src/portal)"] subgraph JAVA["Java :saas backend (trusted cloud)"] Pricing["Pricing engine (volume bands, SLA, term, add-ons)"] Deal["Deal + quote state, journey, snapshot"] Trial["Trial (mock Keygen licence seam)"] Authz["Auth: team resolve + leader gating"] Mirror["Reads Stripe via sync mirror (stripe.* tables)"] end subgraph SUPA["Supabase edge functions (own Stripe)"] Issue["issue-procurement-quote → create + finalize Stripe Quote"] Accept["accept-procurement-quote → subscription + finalize invoice"] Pdf["get-procurement-quote-pdf → proxy the quote PDF"] RPC["SECURITY DEFINER RPCs (read/write stirling_pdf, enforce team/leader)"] end Stripe["Stripe (Quotes · Subscription · Invoice)"] Portal -->|"price / build / trial / agreement / snapshot"| JAVA Portal -->|"issue / accept / download PDF"| SUPA SUPA --> Stripe SUPA --- RPC Mirror -. reads .-> Stripe ``` | Top-level feature | Handled in | |---|---| | Quote pricing (bands, SLA, term, add-ons) | **Java** | | Deal + quote state, journey, snapshot | **Java** | | Trial start / extend (mock licence) | **Java** | | AuthN/Z (team resolve, leader gating) | **Java** | | Issue quote → Stripe Quote + PDF | **Supabase edge fn** | | Accept → subscription + invoice | **Supabase edge fn** | | Quote PDF download | **Supabase edge fn** | | Reading Stripe state | **Java** (sync mirror) | | `stirling_pdf` writes from edge | **SECURITY DEFINER RPCs** (service-role only) | ## Screenshots **Home deal-status hero (trial)** hero-check **Issued quote milestone (with breakdown)** milestone-breakdown **Agreement step (itemised order form)** agreement-itemised **Key documents** keydocs-modal **Subscription created (pay / download invoice)** accepted-check ## Mocked for now (scaffolding, not wired to real backends) - **Key documents** ledger — static demo list. - **Schedule a call** — static solutions-engineer + time slots. - **Invite teammates** — routes to the existing Users view. - **Simulate payment received** / **Reset procurement** — demo controls, **off by default** in prod (flag-gated), 404 unless enabled. ## Deferred (separate follow-up PRs) - **Real `invoice.paid` webhook** → go-live (today a demo button stands in). - **Keygen licence controller** — real licensing (currently a mock seam). - **Document sharing**. - **Stirling admin / Deal Desk** view. - **Minimum ACV floor** — pending a number from marketing (server-side enforcement is a one-liner once decided). ## How to test - **Frontend, no backend:** runs against MSW mocks (Storybook + mocks-on dev) — the whole journey is clickable. - **Real end-to-end:** apply the migrations (Flyway `V27–V29` / Supabase `20260701–20260707`), deploy the three edge functions, ensure **Invoicing Plus** is enabled on Stripe, and set `STIRLING_PROCUREMENT_DEMO_CONTROLS_ENABLED=true` if you want the demo controls. - Paired SaaS PR: **Stirling-Tools/Stirling-PDF-SaaS#318**. ## Notes for reviewers - Pricing is server-authoritative (client sends config, never amounts). - Security review done: edge functions validate the JWT and enforce **team membership** (and **leader** for issue/accept) via the RPC; demo endpoints are flag-gated off. Only open item is the ACV floor (policy). --- .../software/saas/config/SaasJpaConfig.java | 6 +- .../api/ProcurementController.java | 321 ++++++ .../ProcurementConfigurationProperties.java | 33 + .../license/EnterpriseLicenseService.java | 25 + .../license/MockEnterpriseLicenseService.java | 54 + .../procurement/model/ProcurementDeal.java | 87 ++ .../procurement/model/ProcurementQuote.java | 119 ++ .../procurement/pricing/PricingRates.java | 53 + .../pricing/ProcurementPricingService.java | 125 ++ .../procurement/pricing/QuoteBreakdown.java | 12 + .../saas/procurement/pricing/QuoteConfig.java | 26 + .../procurement/pricing/QuoteLineItem.java | 16 + .../repository/ProcurementDealRepository.java | 17 + .../ProcurementQuoteRepository.java | 12 + .../service/ProcurementService.java | 244 ++++ .../db/migration/saas/V27__procurement.sql | 72 ++ .../saas/V28__procurement_stripe_quote.sql | 8 + .../saas/V29__procurement_business_name.sql | 5 + .../ProcurementPricingServiceTest.java | 87 ++ frontend/.gitignore | 1 + frontend/.storybook/preview.tsx | 6 +- .../public/locales/en-US/translation.toml | 129 ++- frontend/editor/src/portal/api/procurement.ts | 163 +++ .../editor/src/portal/components/Sidebar.tsx | 12 +- .../components/billing/EnterpriseUpsell.tsx | 12 +- .../procurement/DealStatusHero.stories.tsx | 47 + .../components/procurement/DealStatusHero.tsx | 162 +++ .../procurement/ProcurementAgreement.tsx | 126 +++ .../procurement/ProcurementExtras.tsx | 299 +++++ .../procurement/ProcurementHome.stories.tsx | 18 + .../procurement/ProcurementHome.tsx | 296 +++++ .../procurement/ProcurementModal.stories.tsx | 42 + .../procurement/ProcurementModal.tsx | 102 ++ .../procurement/ProcurementStages.tsx | 160 +++ .../procurement/QuoteBuilder.stories.tsx | 20 + .../components/procurement/QuoteBuilder.tsx | 436 +++++++ .../portal/components/procurement/format.ts | 9 + .../editor/src/portal/mocks/handlers/index.ts | 2 + .../portal/mocks/handlers/procurementSaas.ts | 241 ++++ frontend/editor/src/portal/views/Home.tsx | 3 + .../editor/src/portal/views/Procurement.css | 1007 +++++++++++++++++ .../editor/src/portal/views/Procurement.tsx | 106 +- 42 files changed, 4603 insertions(+), 118 deletions(-) create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/api/ProcurementController.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/config/ProcurementConfigurationProperties.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/license/EnterpriseLicenseService.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/license/MockEnterpriseLicenseService.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementDeal.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementQuote.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/pricing/PricingRates.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/pricing/ProcurementPricingService.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteBreakdown.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteConfig.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteLineItem.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementDealRepository.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementQuoteRepository.java create mode 100644 app/saas/src/main/java/stirling/software/saas/procurement/service/ProcurementService.java create mode 100644 app/saas/src/main/resources/db/migration/saas/V27__procurement.sql create mode 100644 app/saas/src/main/resources/db/migration/saas/V28__procurement_stripe_quote.sql create mode 100644 app/saas/src/main/resources/db/migration/saas/V29__procurement_business_name.sql create mode 100644 app/saas/src/test/java/stirling/software/saas/procurement/pricing/ProcurementPricingServiceTest.java create mode 100644 frontend/editor/src/portal/components/procurement/DealStatusHero.stories.tsx create mode 100644 frontend/editor/src/portal/components/procurement/DealStatusHero.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementExtras.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementHome.stories.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementHome.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementModal.stories.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementModal.tsx create mode 100644 frontend/editor/src/portal/components/procurement/ProcurementStages.tsx create mode 100644 frontend/editor/src/portal/components/procurement/QuoteBuilder.stories.tsx create mode 100644 frontend/editor/src/portal/components/procurement/QuoteBuilder.tsx create mode 100644 frontend/editor/src/portal/mocks/handlers/procurementSaas.ts diff --git a/app/saas/src/main/java/stirling/software/saas/config/SaasJpaConfig.java b/app/saas/src/main/java/stirling/software/saas/config/SaasJpaConfig.java index 5e90df6bf5..53a5f34c15 100644 --- a/app/saas/src/main/java/stirling/software/saas/config/SaasJpaConfig.java +++ b/app/saas/src/main/java/stirling/software/saas/config/SaasJpaConfig.java @@ -18,13 +18,15 @@ import org.springframework.data.jpa.repository.config.EnableJpaRepositories; "stirling.software.saas.repository", "stirling.software.saas.billing.repository", "stirling.software.saas.ai.repository", - "stirling.software.saas.payg.repository" + "stirling.software.saas.payg.repository", + "stirling.software.saas.procurement.repository" }) @EntityScan({ "stirling.software.saas.accountlink", "stirling.software.saas.model", "stirling.software.saas.billing.model", "stirling.software.saas.ai.model", - "stirling.software.saas.payg" + "stirling.software.saas.payg", + "stirling.software.saas.procurement.model" }) public class SaasJpaConfig {} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/api/ProcurementController.java b/app/saas/src/main/java/stirling/software/saas/procurement/api/ProcurementController.java new file mode 100644 index 0000000000..1f27896b87 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/api/ProcurementController.java @@ -0,0 +1,321 @@ +package stirling.software.saas.procurement.api; + +import java.util.List; +import java.util.Objects; + +import org.springframework.context.annotation.Profile; +import org.springframework.http.HttpStatus; +import org.springframework.http.ResponseEntity; +import org.springframework.security.access.prepost.PreAuthorize; +import org.springframework.security.core.Authentication; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.PostMapping; +import org.springframework.web.bind.annotation.RequestBody; +import org.springframework.web.bind.annotation.RequestMapping; +import org.springframework.web.bind.annotation.RestController; + +import com.fasterxml.jackson.databind.ObjectMapper; + +import io.swagger.v3.oas.annotations.Hidden; + +import lombok.extern.slf4j.Slf4j; + +import stirling.software.common.model.enumeration.TeamRole; +import stirling.software.proprietary.security.database.repository.UserRepository; +import stirling.software.proprietary.security.model.User; +import stirling.software.saas.model.TeamMembership; +import stirling.software.saas.procurement.config.ProcurementConfigurationProperties; +import stirling.software.saas.procurement.model.ProcurementDeal; +import stirling.software.saas.procurement.model.ProcurementQuote; +import stirling.software.saas.procurement.pricing.QuoteConfig; +import stirling.software.saas.procurement.pricing.QuoteLineItem; +import stirling.software.saas.procurement.service.ProcurementService; +import stirling.software.saas.repository.TeamMembershipRepository; +import stirling.software.saas.util.AuthenticationUtils; + +/** + * The enterprise procurement journey for a linked team: read the deal snapshot, start/extend a + * (mock-licensed) trial, build a server-priced quote, and accept it. Stripe checkout itself is a + * Supabase edge function the portal calls with the accepted quote — this controller never touches + * Stripe. The caller's team is resolved from the authenticated principal; a team id is never + * trusted from the request. Mutations require the team leader. + */ +@Slf4j +@Hidden +@RestController +@RequestMapping("/api/v1/procurement") +@Profile("saas") +public class ProcurementController { + + // Local mapper to parse the stored line-items JSON; the saas context exposes no injectable + // ObjectMapper bean. + private static final ObjectMapper OBJECT_MAPPER = new ObjectMapper(); + + private final ProcurementService procurement; + private final TeamMembershipRepository memberRepo; + private final UserRepository userRepository; + private final ProcurementConfigurationProperties config; + + public ProcurementController( + ProcurementService procurement, + TeamMembershipRepository memberRepo, + UserRepository userRepository, + ProcurementConfigurationProperties config) { + this.procurement = Objects.requireNonNull(procurement); + this.memberRepo = Objects.requireNonNull(memberRepo); + this.userRepository = Objects.requireNonNull(userRepository); + this.config = Objects.requireNonNull(config); + } + + // ---- request / response DTOs ------------------------------------------- + + public record QuoteRequest( + long volume, + int users, + String deployment, + int termYears, + String serviceLevel, + boolean indemnification, + boolean training, + boolean qbr, + String currency, + String businessName) { + QuoteConfig toConfig() { + return new QuoteConfig( + volume, + users, + deployment, + termYears, + serviceLevel, + indemnification, + training, + qbr, + currency); + } + } + + public record QuoteResponse( + Long quoteId, + String quoteNumber, + String status, + String currency, + long annualNetMinor, + long tcvMinor, + List lineItems, + String validUntil, + String stripeQuoteId, + String invoiceUrl, + QuoteConfigEcho config) {} + + /** + * The inputs the quote was priced from, echoed back so the builder can seed itself when the + * buyer re-edits an existing quote. {@code users} is not persisted (only the resulting volume + * is), so it is always 0 here; the builder treats the seeded volume as manually set. + */ + public record QuoteConfigEcho( + long volume, + int users, + String deployment, + int termYears, + String serviceLevel, + boolean indemnification, + boolean training, + boolean qbr, + String currency, + String businessName) {} + + public record SnapshotResponse( + Long dealId, + String stage, + String trialStartedAt, + String trialEndsAt, + int trialExtensionsUsed, + boolean licensed, + QuoteResponse latestQuote) {} + + // ---- endpoints ---------------------------------------------------------- + + /** + * The team's deal snapshot. Always 200 with a single shape; an unstarted procurement returns an + * empty snapshot ({@code dealId == null}) so the portal can render the "start" state without + * special-casing an empty body. + */ + @GetMapping + @PreAuthorize("isAuthenticated()") + public ResponseEntity snapshot(Authentication auth) { + Long teamId = resolveTeam(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.UNAUTHORIZED).build(); + return ResponseEntity.ok( + procurement.getDeal(teamId).map(this::toSnapshot).orElse(EMPTY_SNAPSHOT)); + } + + private static final SnapshotResponse EMPTY_SNAPSHOT = + new SnapshotResponse(null, null, null, null, 0, false, null); + + @PostMapping("/trial/start") + @PreAuthorize("isAuthenticated()") + public ResponseEntity startTrial(Authentication auth) { + Long teamId = requireLeader(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); + return ResponseEntity.ok(toSnapshot(procurement.startTrial(teamId))); + } + + @PostMapping("/trial/extend") + @PreAuthorize("isAuthenticated()") + public ResponseEntity extendTrial(Authentication auth) { + Long teamId = requireLeader(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); + try { + return ResponseEntity.ok(toSnapshot(procurement.extendTrial(teamId))); + } catch (IllegalStateException e) { + return ResponseEntity.status(HttpStatus.CONFLICT).build(); + } + } + + @PostMapping("/quote") + @PreAuthorize("isAuthenticated()") + public ResponseEntity buildQuote( + @RequestBody QuoteRequest request, Authentication auth) { + Long teamId = requireLeader(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); + return ResponseEntity.ok( + toQuote( + procurement.buildQuote( + teamId, request.toConfig(), request.businessName()))); + } + + // Issue + accept are Supabase edge functions (they own Stripe): issue-procurement-quote turns a + // draft into a finalized Stripe Quote; accept-procurement-quote accepts it into a subscription. + // Both persist their results via SECURITY DEFINER RPCs; the snapshot above reflects them. + + /** + * Advance an issued quote to the agreement (security) stage, where the buyer reviews + agrees. + */ + @PostMapping("/agreement") + @PreAuthorize("isAuthenticated()") + public ResponseEntity startAgreement(Authentication auth) { + Long teamId = requireLeader(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); + try { + return ResponseEntity.ok(toSnapshot(procurement.startAgreement(teamId))); + } catch (IllegalStateException e) { + return ResponseEntity.status(HttpStatus.CONFLICT).build(); + } + } + + /** + * Demo/manual stand-in for the {@code invoice.paid} webhook: mark the deal live (issue the + * annual licence, advance to active). The real go-live is webhook-driven once payment settles. + */ + @PostMapping("/go-live") + @PreAuthorize("isAuthenticated()") + public ResponseEntity goLive(Authentication auth) { + if (!config.isDemoControlsEnabled()) return ResponseEntity.notFound().build(); + Long teamId = requireLeader(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); + try { + return ResponseEntity.ok(toSnapshot(procurement.markLive(teamId))); + } catch (IllegalStateException e) { + return ResponseEntity.status(HttpStatus.CONFLICT).build(); + } + } + + /** Reset the team's procurement (delete the deal + quotes); returns the empty snapshot. */ + @PostMapping("/reset") + @PreAuthorize("isAuthenticated()") + public ResponseEntity reset(Authentication auth) { + if (!config.isDemoControlsEnabled()) return ResponseEntity.notFound().build(); + Long teamId = requireLeader(auth); + if (teamId == null) return ResponseEntity.status(HttpStatus.FORBIDDEN).build(); + procurement.resetDeal(teamId); + return ResponseEntity.ok(EMPTY_SNAPSHOT); + } + + // ---- helpers ------------------------------------------------------------ + + /** + * Resolve the caller's team from their primary membership; null when unauthenticated/teamless. + */ + private Long resolveTeam(Authentication auth) { + User user; + try { + user = AuthenticationUtils.getCurrentUser(auth, userRepository); + } catch (SecurityException e) { + return null; + } + List rows = memberRepo.findPrimaryMembership(user.getId()); + return rows.isEmpty() ? null : rows.get(0).getTeam().getId(); + } + + /** Team id only when the caller is the team leader; null otherwise (commercial actions). */ + private Long requireLeader(Authentication auth) { + User user; + try { + user = AuthenticationUtils.getCurrentUser(auth, userRepository); + } catch (SecurityException e) { + return null; + } + List rows = memberRepo.findPrimaryMembership(user.getId()); + if (rows.isEmpty() || rows.get(0).getRole() != TeamRole.LEADER) return null; + return rows.get(0).getTeam().getId(); + } + + private SnapshotResponse toSnapshot(ProcurementDeal deal) { + QuoteResponse latest = + procurement.quotesForDeal(deal.getDealId()).stream() + .findFirst() + .map(this::toQuote) + .orElse(null); + return new SnapshotResponse( + deal.getDealId(), + deal.getStage(), + str(deal.getTrialStartedAt()), + str(deal.getTrialEndsAt()), + deal.getTrialExtensionsUsed(), + deal.getLicenseRef() != null, + latest); + } + + private QuoteResponse toQuote(ProcurementQuote q) { + return new QuoteResponse( + q.getQuoteId(), + q.getQuoteNumber(), + q.getStatus(), + q.getCurrency(), + q.getAnnualNetMinor(), + q.getTcvMinor(), + parseLineItems(q.getLineItemsJson()), + q.getValidUntil() == null ? null : q.getValidUntil().toString(), + q.getStripeQuoteId(), + q.getStripeInvoiceUrl(), + new QuoteConfigEcho( + q.getVolume(), + 0, + q.getDeployment(), + q.getTermYears(), + q.getServiceLevel(), + q.isIndemnification(), + q.isTraining(), + q.isQbr(), + q.getCurrency(), + q.getBusinessName())); + } + + private List parseLineItems(String json) { + if (json == null || json.isBlank()) return List.of(); + try { + return OBJECT_MAPPER.readValue( + json, + OBJECT_MAPPER + .getTypeFactory() + .constructCollectionType(List.class, QuoteLineItem.class)); + } catch (Exception e) { + log.warn("[procurement] failed to parse line items", e); + return List.of(); + } + } + + private static String str(Object o) { + return o == null ? null : o.toString(); + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/config/ProcurementConfigurationProperties.java b/app/saas/src/main/java/stirling/software/saas/procurement/config/ProcurementConfigurationProperties.java new file mode 100644 index 0000000000..98ec0cd573 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/config/ProcurementConfigurationProperties.java @@ -0,0 +1,33 @@ +package stirling.software.saas.procurement.config; + +import org.springframework.boot.context.properties.ConfigurationProperties; +import org.springframework.context.annotation.Profile; +import org.springframework.stereotype.Component; + +import lombok.Getter; +import lombok.Setter; + +/** Tunables for the enterprise procurement flow. Prefix {@code stirling.procurement}. */ +@Getter +@Setter +@Component +@Profile("saas") +@ConfigurationProperties(prefix = "stirling.procurement") +public class ProcurementConfigurationProperties { + + /** Free trial length, in days (no card). */ + private int trialDurationDays = 14; + + /** Days added per trial extension. */ + private int trialExtensionDays = 7; + + /** Maximum number of trial extensions a buyer may take. */ + private int maxTrialExtensions = 2; + + /** + * Enables the demo-only endpoints (POST /reset, POST /go-live) that reset a team's procurement + * or mark it live without payment. Off by default; turn on ONLY in demo/dev environments — + * /go-live is a stand-in for the invoice.paid webhook and would let a leader activate unpaid. + */ + private boolean demoControlsEnabled = false; +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/license/EnterpriseLicenseService.java b/app/saas/src/main/java/stirling/software/saas/procurement/license/EnterpriseLicenseService.java new file mode 100644 index 0000000000..0f0c242601 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/license/EnterpriseLicenseService.java @@ -0,0 +1,25 @@ +package stirling.software.saas.procurement.license; + +import java.time.LocalDateTime; + +/** + * Issues and modifies the customer-facing entitlement that actually unlocks the product for an + * enterprise deal — a Keygen licence (trial or annual, connected or air-gapped). This is the seam + * the real Keygen management client plugs into; today {@link MockEnterpriseLicenseService} records + * intent without calling Keygen. Distinct from the EE {@code KeygenLicenseVerifier}, which only + * verifies this instance's own licence. + */ +public interface EnterpriseLicenseService { + + /** Issue a time-boxed trial licence for the team; returns the licence reference. */ + String issueTrialLicense(Long teamId, LocalDateTime expiresAt); + + /** Move a licence's expiry out (trial extension). */ + void extendLicense(String licenseRef, LocalDateTime newExpiry); + + /** Issue/upgrade to a committed annual licence with the quote's entitlements. */ + String issueAnnualLicense(Long teamId, String deployment, LocalDateTime expiresAt); + + /** Suspend a licence (e.g. payment failed, deal lost). */ + void suspendLicense(String licenseRef); +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/license/MockEnterpriseLicenseService.java b/app/saas/src/main/java/stirling/software/saas/procurement/license/MockEnterpriseLicenseService.java new file mode 100644 index 0000000000..bde31a4119 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/license/MockEnterpriseLicenseService.java @@ -0,0 +1,54 @@ +package stirling.software.saas.procurement.license; + +import java.time.LocalDateTime; +import java.util.UUID; + +import org.springframework.context.annotation.Profile; +import org.springframework.stereotype.Service; + +import lombok.extern.slf4j.Slf4j; + +/** + * Mock implementation of {@link EnterpriseLicenseService}: records the intended licence action and + * returns a synthetic reference, without calling Keygen. Lets the whole procurement journey run + * end-to-end while the real Keygen management client is a later drop-in — the seam and the stored + * {@code license_ref} on the deal stay identical. + */ +@Slf4j +@Service +@Profile("saas") +public class MockEnterpriseLicenseService implements EnterpriseLicenseService { + + @Override + public String issueTrialLicense(Long teamId, LocalDateTime expiresAt) { + String ref = "mock-trial-" + UUID.randomUUID(); + log.info( + "[procurement][mock-license] issue trial team={} expires={} ref={}", + teamId, + expiresAt, + ref); + return ref; + } + + @Override + public void extendLicense(String licenseRef, LocalDateTime newExpiry) { + log.info("[procurement][mock-license] extend ref={} newExpiry={}", licenseRef, newExpiry); + } + + @Override + public String issueAnnualLicense(Long teamId, String deployment, LocalDateTime expiresAt) { + String ref = "mock-annual-" + UUID.randomUUID(); + log.info( + "[procurement][mock-license] issue annual team={} deployment={} expires={} ref={}", + teamId, + deployment, + expiresAt, + ref); + return ref; + } + + @Override + public void suspendLicense(String licenseRef) { + log.info("[procurement][mock-license] suspend ref={}", licenseRef); + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementDeal.java b/app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementDeal.java new file mode 100644 index 0000000000..f97d66f365 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementDeal.java @@ -0,0 +1,87 @@ +package stirling.software.saas.procurement.model; + +import java.io.Serializable; +import java.time.LocalDateTime; + +import org.hibernate.annotations.CreationTimestamp; +import org.hibernate.annotations.UpdateTimestamp; + +import jakarta.persistence.Column; +import jakarta.persistence.Entity; +import jakarta.persistence.GeneratedValue; +import jakarta.persistence.GenerationType; +import jakarta.persistence.Id; +import jakarta.persistence.Table; +import jakarta.persistence.Version; + +import lombok.Getter; +import lombok.NoArgsConstructor; +import lombok.Setter; + +/** + * A linked team's enterprise commercial journey (one per team). Stage mirrors the buyer journey the + * portal renders (trial -> quote -> agreement -> payment -> live). The entitlement that + * actually unlocks the product is the Keygen licence in {@code licenseRef}; the paid subscription, + * once commercial, is mirrored in {@code billing_subscriptions} and referenced by {@code + * subscriptionId}. + */ +@Entity +@Table(name = "procurement_deal") +@NoArgsConstructor +@Getter +@Setter +public class ProcurementDeal implements Serializable { + + private static final long serialVersionUID = 1L; + + public static final String STAGE_TRIAL = "trial"; + public static final String STAGE_QUOTE = "quote"; + public static final String STAGE_AGREEMENT = "security"; + public static final String STAGE_PAYMENT = "procurement"; + public static final String STAGE_LIVE = "active"; + + @Id + @GeneratedValue(strategy = GenerationType.IDENTITY) + @Column(name = "deal_id") + private Long dealId; + + @Column(name = "team_id", nullable = false, unique = true) + private Long teamId; + + @Column(name = "stage", nullable = false, length = 32) + private String stage = STAGE_TRIAL; + + @Column(name = "trial_started_at") + private LocalDateTime trialStartedAt; + + @Column(name = "trial_ends_at") + private LocalDateTime trialEndsAt; + + @Column(name = "trial_extensions_used", nullable = false) + private int trialExtensionsUsed; + + @Column(name = "license_ref", length = 128) + private String licenseRef; + + @Column(name = "subscription_id", length = 255) + private String subscriptionId; + + @Column(name = "accepted_quote_id") + private Long acceptedQuoteId; + + @CreationTimestamp + @Column(name = "created_at", nullable = false, updatable = false) + private LocalDateTime createdAt; + + @UpdateTimestamp + @Column(name = "updated_at", nullable = false) + private LocalDateTime updatedAt; + + @Version + @Column(name = "version", nullable = false) + private Long version; + + public ProcurementDeal(Long teamId) { + this.teamId = teamId; + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementQuote.java b/app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementQuote.java new file mode 100644 index 0000000000..d8f4c3edb7 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/model/ProcurementQuote.java @@ -0,0 +1,119 @@ +package stirling.software.saas.procurement.model; + +import java.io.Serializable; +import java.time.LocalDate; +import java.time.LocalDateTime; + +import org.hibernate.annotations.CreationTimestamp; +import org.hibernate.annotations.UpdateTimestamp; + +import jakarta.persistence.Column; +import jakarta.persistence.Entity; +import jakarta.persistence.GeneratedValue; +import jakarta.persistence.GenerationType; +import jakarta.persistence.Id; +import jakarta.persistence.Table; +import jakarta.persistence.Version; + +import lombok.Getter; +import lombok.NoArgsConstructor; +import lombok.Setter; + +/** + * A priced, itemised offer built against a {@link ProcurementDeal}. The config columns are the + * buyer's choices; {@code annualNetMinor}/{@code tcvMinor} and {@code lineItemsJson} are the + * server-computed result (never trusted from the client). Stripe fields are populated when the + * accepted quote is turned into a checkout. + */ +@Entity +@Table(name = "procurement_quote") +@NoArgsConstructor +@Getter +@Setter +public class ProcurementQuote implements Serializable { + + private static final long serialVersionUID = 1L; + + public static final String STATUS_DRAFT = "draft"; + public static final String STATUS_SENT = "sent"; + public static final String STATUS_ACCEPTED = "accepted"; + public static final String STATUS_EXPIRED = "expired"; + + @Id + @GeneratedValue(strategy = GenerationType.IDENTITY) + @Column(name = "quote_id") + private Long quoteId; + + @Column(name = "deal_id", nullable = false) + private Long dealId; + + @Column(name = "quote_number", nullable = false, length = 64) + private String quoteNumber; + + @Column(name = "status", nullable = false, length = 24) + private String status = STATUS_DRAFT; + + @Column(name = "currency", nullable = false, length = 8) + private String currency = "USD"; + + @Column(name = "volume", nullable = false) + private long volume; + + @Column(name = "seats") + private Integer seats; + + @Column(name = "deployment", length = 24) + private String deployment; + + @Column(name = "term_years", nullable = false) + private int termYears; + + @Column(name = "service_level", nullable = false, length = 24) + private String serviceLevel; + + @Column(name = "indemnification", nullable = false) + private boolean indemnification; + + @Column(name = "training", nullable = false) + private boolean training; + + @Column(name = "qbr", nullable = false) + private boolean qbr; + + @Column(name = "annual_net_minor", nullable = false) + private long annualNetMinor; + + @Column(name = "tcv_minor", nullable = false) + private long tcvMinor; + + @Column(name = "line_items", columnDefinition = "text") + private String lineItemsJson; + + // The Stripe Quote this was issued as (finalized → has a number + PDF). Set by the edge fn. + @Column(name = "stripe_quote_id", length = 128) + private String stripeQuoteId; + + // Hosted Stripe invoice URL for the subscription's first invoice, set once the quote is + // accepted. + @Column(name = "stripe_invoice_url", columnDefinition = "text") + private String stripeInvoiceUrl; + + // Buyer's company name (shown on the quote/agreement); echoed back so an edit remembers it. + @Column(name = "business_name", length = 255) + private String businessName; + + @Column(name = "valid_until") + private LocalDate validUntil; + + @CreationTimestamp + @Column(name = "created_at", nullable = false, updatable = false) + private LocalDateTime createdAt; + + @UpdateTimestamp + @Column(name = "updated_at", nullable = false) + private LocalDateTime updatedAt; + + @Version + @Column(name = "version", nullable = false) + private Long version; +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/pricing/PricingRates.java b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/PricingRates.java new file mode 100644 index 0000000000..19a3ab759d --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/PricingRates.java @@ -0,0 +1,53 @@ +package stirling.software.saas.procurement.pricing; + +/** + * The enterprise rate card: the inputs pricing multiplies against. In production these are read + * from the Stripe price mirror (see {@code StripeMirrorPriceCatalog}); {@link #defaults()} is the + * fallback used when the {@code stripe} schema isn't synced (dev / tests) and is the single source + * of the numbers the marketing prototype encodes. + * + *

Per-PDF rates are in minor units (cents) per document. Multipliers are fractions (e.g. 0.15 = + * +15%). Flat/one-time fees are in minor units. + */ +public record PricingRates( + long perPdfMinorUnder1M, + long perPdfMinorUnder5M, + long perPdfMinor5MPlus, + double priorityUplift, + double dedicatedUplift, + double indemnificationUplift, + double[] termDiscountByYear, // index 0 = 1yr … index 4 = 5yr + long qbrAnnualMinor, + long trainingOneTimeMinor) { + + public static PricingRates defaults() { + return new PricingRates( + 5, // $0.05 / PDF under 1M/yr + 4, // $0.04 / PDF at 1M–5M/yr + 3, // $0.03 / PDF at 5M+/yr + 0.15, // priority +15% + 0.30, // dedicated +30% + 0.05, // IP indemnification +5% + new double[] {0.0, 0.05, 0.10, 0.12, 0.15}, + 800_000, // QBRs $8,000 / yr + 750_000); // onboarding & training $7,500 one-time + } + + /** Volume-banded per-PDF rate for an annual volume, in minor units. */ + public long perPdfMinor(long annualVolume) { + if (annualVolume >= 5_000_000) return perPdfMinor5MPlus; + if (annualVolume >= 1_000_000) return perPdfMinorUnder5M; + return perPdfMinorUnder1M; + } + + public double termDiscount(int termYears) { + int idx = Math.max(1, Math.min(termYears, 5)) - 1; + return termDiscountByYear[idx]; + } + + public double serviceLevelUplift(String serviceLevel) { + if ("priority".equalsIgnoreCase(serviceLevel)) return priorityUplift; + if ("dedicated".equalsIgnoreCase(serviceLevel)) return dedicatedUplift; + return 0.0; + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/pricing/ProcurementPricingService.java b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/ProcurementPricingService.java new file mode 100644 index 0000000000..62d5baed9d --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/ProcurementPricingService.java @@ -0,0 +1,125 @@ +package stirling.software.saas.procurement.pricing; + +import java.util.ArrayList; +import java.util.List; + +import org.springframework.stereotype.Service; + +/** + * The canonical enterprise pricing engine — the single server-side definition the quote builder, + * the order form, and the Stripe checkout all derive from. A faithful port of the marketing + * prototype's {@code quotePricing}: + * + * 

+ *   annual        = volume x perPdfRate x serviceLevelMult x (indemnification ? 1.05 : 1)
+ *   annualNet     = round(annual x (1 - termDiscount)) + qbr
+ *   tcv           = annualNet x termYears + training
+ *
+ * + * The multi-year discount applies to usage + service level + indemnification, but NOT to the flat + * QBR fee (added after), and one-time training sits outside the recurring total. All money is in + * minor units (cents). Rates come from {@link PricingRates} (Stripe-backed in prod). + */ +@Service +public class ProcurementPricingService { + + /** Bespoke/committed deals don't price below this ACV; the builder floors against it. */ + public static final long MIN_ACV_MINOR = 5_000_000L; // $50,000 + + /** + * Estimated annual PDF volume from seat count (~2,012.5 PDFs/user/yr = 5 docs/day x 230 working + * days x 1.75), used to prefill the builder's volume step. Rounded, matching the prototype's + * {@code users x 5 x 230 x 1.75}. + */ + public long estimateAnnualVolume(int users) { + return Math.round(Math.max(0, users) * 5.0 * 230.0 * 1.75); + } + + public QuoteBreakdown price(QuoteConfig cfg) { + return price(cfg, PricingRates.defaults()); + } + + public QuoteBreakdown price(QuoteConfig cfg, PricingRates rates) { + // Never trust the client's volume: clamp to non-negative so a tampered request can't drive + // a + // negative amount. The rate card and formula are server-side, so the browser can't lower + // the + // price — only pick a smaller, legitimate config. (See MIN_ACV_MINOR for the committed + // floor, + // a policy decision that is intentionally not force-applied here — see the review notes.) + long volume = Math.max(0, cfg.volume()); + long perPdf = rates.perPdfMinor(volume); + long usage = Math.round(volume * (double) perPdf); // base, pre-service-level + double slaUplift = rates.serviceLevelUplift(cfg.serviceLevel()); + long withSla = Math.round(usage * (1.0 + slaUplift)); + long withIndemnity = + cfg.indemnification() + ? Math.round(withSla * (1.0 + rates.indemnificationUplift())) + : withSla; + + double termDiscount = rates.termDiscount(cfg.termYears()); + long discount = Math.round(withIndemnity * termDiscount); + long qbr = cfg.qbr() ? rates.qbrAnnualMinor() : 0L; + long training = cfg.training() ? rates.trainingOneTimeMinor() : 0L; + + long annualNet = (withIndemnity - discount) + qbr; + long tcv = annualNet * cfg.termYears() + training; + + List lines = new ArrayList<>(); + lines.add( + new QuoteLineItem("usage", "PDF processing", QuoteLineItem.Kind.RECURRING, usage)); + lines.add( + new QuoteLineItem( + "seats", + "Unlimited users + SSO / SCIM / RBAC", + QuoteLineItem.Kind.INCLUDED, + 0L)); + if (withSla != usage) { + lines.add( + new QuoteLineItem( + "service-level", + serviceLevelLabel(cfg.serviceLevel()), + QuoteLineItem.Kind.RECURRING, + withSla - usage)); + } + if (withIndemnity != withSla) { + lines.add( + new QuoteLineItem( + "indemnification", + "IP indemnification", + QuoteLineItem.Kind.RECURRING, + withIndemnity - withSla)); + } + if (qbr > 0) { + lines.add( + new QuoteLineItem( + "qbr", + "Quarterly business reviews", + QuoteLineItem.Kind.RECURRING, + qbr)); + } + if (discount > 0) { + lines.add( + new QuoteLineItem( + "multi-year", + cfg.termYears() + "-year commitment", + QuoteLineItem.Kind.DISCOUNT, + -discount)); + } + if (training > 0) { + lines.add( + new QuoteLineItem( + "training", + "Onboarding & training", + QuoteLineItem.Kind.ONE_TIME, + training)); + } + return new QuoteBreakdown(lines, annualNet, tcv, cfg.currency()); + } + + private static String serviceLevelLabel(String serviceLevel) { + if ("priority".equalsIgnoreCase(serviceLevel)) return "Priority service level"; + if ("dedicated".equalsIgnoreCase(serviceLevel)) return "Dedicated service level"; + return "Standard service level"; + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteBreakdown.java b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteBreakdown.java new file mode 100644 index 0000000000..10ffde5271 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteBreakdown.java @@ -0,0 +1,12 @@ +package stirling.software.saas.procurement.pricing; + +import java.util.List; + +/** + * The priced result of a {@link QuoteConfig}: the itemised lines plus the two headline figures the + * order form and Stripe checkout are built from. {@code annualNetMinor} is the recurring annual fee + * after the multi-year discount; {@code tcvMinor} is total contract value across the term including + * one-time fees. Minor units (cents). + */ +public record QuoteBreakdown( + List lineItems, long annualNetMinor, long tcvMinor, String currency) {} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteConfig.java b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteConfig.java new file mode 100644 index 0000000000..30917a73a6 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteConfig.java @@ -0,0 +1,26 @@ +package stirling.software.saas.procurement.pricing; + +/** + * The buyer-configurable inputs to an enterprise quote. Mirrors the quote builder's four steps + * (volume, commitment & service, add-ons) and is the sole input to {@link + * ProcurementPricingService}. Amounts are never carried here — the service derives them from these + * choices and the rate card. + */ +public record QuoteConfig( + long volume, // committed PDFs per year + int users, // seats (drives the volume auto-estimate when the buyer hasn't overridden) + String deployment, // cloud | selfhost | airgap (inherited from the trial; not priced) + int termYears, // 1..5 + String serviceLevel, // standard | priority | dedicated + boolean indemnification, + boolean training, + boolean qbr, + String currency) { // USD | EUR | GBP + + public QuoteConfig { + if (termYears < 1) termYears = 1; + if (termYears > 5) termYears = 5; + if (serviceLevel == null || serviceLevel.isBlank()) serviceLevel = "standard"; + if (currency == null || currency.isBlank()) currency = "USD"; + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteLineItem.java b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteLineItem.java new file mode 100644 index 0000000000..a8b0d29352 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/pricing/QuoteLineItem.java @@ -0,0 +1,16 @@ +package stirling.software.saas.procurement.pricing; + +/** + * One line on the itemised quote. {@code amountMinor} is in the currency's minor unit (cents); + * discounts are negative. {@code kind} drives how the portal groups it (recurring annual vs a + * one-time fee vs a discount line). + */ +public record QuoteLineItem(String key, String label, Kind kind, long amountMinor) { + + public enum Kind { + RECURRING, + ONE_TIME, + DISCOUNT, + INCLUDED + } +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementDealRepository.java b/app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementDealRepository.java new file mode 100644 index 0000000000..14247ba1ba --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementDealRepository.java @@ -0,0 +1,17 @@ +package stirling.software.saas.procurement.repository; + +import java.util.Optional; + +import org.springframework.data.jpa.repository.JpaRepository; + +import stirling.software.saas.procurement.model.ProcurementDeal; + +public interface ProcurementDealRepository extends JpaRepository { + + Optional findByTeamId(Long teamId); + + boolean existsByTeamId(Long teamId); + + /** Reset: drop the team's deal (quotes + activity cascade via FK). */ + void deleteByTeamId(Long teamId); +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementQuoteRepository.java b/app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementQuoteRepository.java new file mode 100644 index 0000000000..45f7af8225 --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/repository/ProcurementQuoteRepository.java @@ -0,0 +1,12 @@ +package stirling.software.saas.procurement.repository; + +import java.util.List; + +import org.springframework.data.jpa.repository.JpaRepository; + +import stirling.software.saas.procurement.model.ProcurementQuote; + +public interface ProcurementQuoteRepository extends JpaRepository { + + List findByDealIdOrderByCreatedAtDesc(Long dealId); +} diff --git a/app/saas/src/main/java/stirling/software/saas/procurement/service/ProcurementService.java b/app/saas/src/main/java/stirling/software/saas/procurement/service/ProcurementService.java new file mode 100644 index 0000000000..52e19f751e --- /dev/null +++ b/app/saas/src/main/java/stirling/software/saas/procurement/service/ProcurementService.java @@ -0,0 +1,244 @@ +package stirling.software.saas.procurement.service; + +import java.time.LocalDate; +import java.time.LocalDateTime; +import java.util.List; +import java.util.Locale; +import java.util.Optional; +import java.util.UUID; + +import org.springframework.context.annotation.Profile; +import org.springframework.stereotype.Service; +import org.springframework.transaction.annotation.Transactional; + +import com.fasterxml.jackson.core.JsonProcessingException; +import com.fasterxml.jackson.databind.ObjectMapper; + +import lombok.extern.slf4j.Slf4j; + +import stirling.software.saas.procurement.config.ProcurementConfigurationProperties; +import stirling.software.saas.procurement.license.EnterpriseLicenseService; +import stirling.software.saas.procurement.model.ProcurementDeal; +import stirling.software.saas.procurement.model.ProcurementQuote; +import stirling.software.saas.procurement.pricing.ProcurementPricingService; +import stirling.software.saas.procurement.pricing.QuoteBreakdown; +import stirling.software.saas.procurement.pricing.QuoteConfig; +import stirling.software.saas.procurement.repository.ProcurementDealRepository; +import stirling.software.saas.procurement.repository.ProcurementQuoteRepository; + +/** + * Orchestrates a linked team's procurement journey: start a (mock-licensed) trial, build a + * server-priced quote, and accept it. Stripe checkout itself lives in a Supabase edge function the + * portal calls with the accepted quote; on payment the webhook seeds {@code billing_subscriptions} + * and this service issues the annual licence. All amounts are minor units (cents). + */ +@Slf4j +@Service +@Profile("saas") +public class ProcurementService { + + // Local mapper for the line-items JSON snapshot; the saas context exposes no injectable + // ObjectMapper bean, and this (de)serialisation doesn't need Spring's configured one. + private static final ObjectMapper OBJECT_MAPPER = new ObjectMapper(); + + private final ProcurementDealRepository dealRepo; + private final ProcurementQuoteRepository quoteRepo; + private final ProcurementPricingService pricing; + private final EnterpriseLicenseService licenses; + private final ProcurementConfigurationProperties config; + + public ProcurementService( + ProcurementDealRepository dealRepo, + ProcurementQuoteRepository quoteRepo, + ProcurementPricingService pricing, + EnterpriseLicenseService licenses, + ProcurementConfigurationProperties config) { + this.dealRepo = dealRepo; + this.quoteRepo = quoteRepo; + this.pricing = pricing; + this.licenses = licenses; + this.config = config; + } + + @Transactional(readOnly = true) + public Optional getDeal(Long teamId) { + return dealRepo.findByTeamId(teamId); + } + + @Transactional(readOnly = true) + public List quotesForDeal(Long dealId) { + return quoteRepo.findByDealIdOrderByCreatedAtDesc(dealId); + } + + /** + * Start (or restart) the free trial for a team: issue a mock trial licence and stamp the trial + * window on the deal. No Stripe: a no-card trial has no subscription; the entitlement is the + * Keygen licence, and the deal row is the journey state. + */ + @Transactional + public ProcurementDeal startTrial(Long teamId) { + ProcurementDeal deal = + dealRepo.findByTeamId(teamId).orElseGet(() -> new ProcurementDeal(teamId)); + LocalDateTime now = LocalDateTime.now(); + LocalDateTime ends = now.plusDays(config.getTrialDurationDays()); + deal.setStage(ProcurementDeal.STAGE_TRIAL); + deal.setTrialStartedAt(now); + deal.setTrialEndsAt(ends); + deal.setTrialExtensionsUsed(0); + deal.setLicenseRef(licenses.issueTrialLicense(teamId, ends)); + deal = dealRepo.save(deal); + log.info( + "[procurement] trial started team={} deal={} ends={}", + teamId, + deal.getDealId(), + ends); + return deal; + } + + /** Extend the current trial by the configured increment, up to the cap. */ + @Transactional + public ProcurementDeal extendTrial(Long teamId) { + ProcurementDeal deal = + dealRepo.findByTeamId(teamId) + .orElseThrow(() -> new IllegalStateException("No deal for team " + teamId)); + // Only extend while still in the trial. Past the trial (e.g. active), licenseRef points at + // the committed annual licence — extending would rewind its expiry. + if (!ProcurementDeal.STAGE_TRIAL.equals(deal.getStage())) { + throw new IllegalStateException("Trial extension only allowed during the trial stage"); + } + if (deal.getTrialExtensionsUsed() >= config.getMaxTrialExtensions()) { + throw new IllegalStateException("Trial extension cap reached"); + } + LocalDateTime base = + deal.getTrialEndsAt() != null ? deal.getTrialEndsAt() : LocalDateTime.now(); + LocalDateTime newEnd = base.plusDays(config.getTrialExtensionDays()); + deal.setTrialEndsAt(newEnd); + deal.setTrialExtensionsUsed(deal.getTrialExtensionsUsed() + 1); + if (deal.getLicenseRef() != null) { + licenses.extendLicense(deal.getLicenseRef(), newEnd); + } + return dealRepo.save(deal); + } + + /** Price a quote config server-side and persist it as a draft against the team's deal. */ + @Transactional + public ProcurementQuote buildQuote(Long teamId, QuoteConfig cfg, String businessName) { + ProcurementDeal deal = + dealRepo.findByTeamId(teamId).orElseGet(() -> new ProcurementDeal(teamId)); + if (ProcurementDeal.STAGE_LIVE.equals(deal.getStage())) { + throw new IllegalStateException("Cannot rebuild a quote on a live deal"); + } + // (Re)building a quote returns the deal to the quote stage and drops any prior acceptance, + // so a rebuild from security/payment can't leave a stale stage or accepted-quote pointer. + deal.setStage(ProcurementDeal.STAGE_QUOTE); + deal.setAcceptedQuoteId(null); + deal = dealRepo.save(deal); + + QuoteBreakdown breakdown = pricing.price(cfg); + + ProcurementQuote quote = new ProcurementQuote(); + quote.setDealId(deal.getDealId()); + quote.setQuoteNumber(nextQuoteNumber(deal.getDealId())); + // Priced but not yet issued: the edge fn creates the Stripe Quote and flips this to SENT. + quote.setStatus(ProcurementQuote.STATUS_DRAFT); + quote.setCurrency(cfg.currency()); + quote.setVolume(cfg.volume()); + quote.setSeats(cfg.users() > 0 ? cfg.users() : null); + quote.setDeployment(cfg.deployment()); + quote.setTermYears(cfg.termYears()); + quote.setServiceLevel(cfg.serviceLevel()); + quote.setIndemnification(cfg.indemnification()); + quote.setTraining(cfg.training()); + quote.setQbr(cfg.qbr()); + quote.setBusinessName(businessName); + quote.setAnnualNetMinor(breakdown.annualNetMinor()); + quote.setTcvMinor(breakdown.tcvMinor()); + quote.setLineItemsJson(writeLineItems(breakdown)); + quote.setValidUntil(LocalDate.now().plusDays(30)); + quote = quoteRepo.save(quote); + log.info( + "[procurement] quote built team={} quote={} annualNet={} tcv={}", + teamId, + quote.getQuoteNumber(), + quote.getAnnualNetMinor(), + quote.getTcvMinor()); + return quote; + } + + /** + * Advance the deal to the agreement (security) stage: the buyer has an issued quote and is + * reviewing the enterprise agreement before it's accepted into a subscription. Requires an + * issued quote on the deal. + */ + @Transactional + public ProcurementDeal startAgreement(Long teamId) { + ProcurementDeal deal = + dealRepo.findByTeamId(teamId) + .orElseThrow(() -> new IllegalStateException("No deal for team " + teamId)); + boolean hasIssuedQuote = + quoteRepo.findByDealIdOrderByCreatedAtDesc(deal.getDealId()).stream() + .anyMatch(q -> ProcurementQuote.STATUS_SENT.equals(q.getStatus())); + if (!hasIssuedQuote) { + throw new IllegalStateException("No issued quote for team " + teamId); + } + deal.setStage(ProcurementDeal.STAGE_AGREEMENT); + deal = dealRepo.save(deal); + log.info("[procurement] agreement stage team={} deal={}", teamId, deal.getDealId()); + return deal; + } + + /** + * Mark the deal live: issue the annual licence and advance to the active stage. In production + * this is driven by the {@code invoice.paid} webhook once the first invoice is settled; this + * method is the demo/manual stand-in until that webhook lands. + */ + @Transactional + public ProcurementDeal markLive(Long teamId) { + ProcurementDeal deal = + dealRepo.findByTeamId(teamId) + .orElseThrow(() -> new IllegalStateException("No deal for team " + teamId)); + int term = 1; + String deployment = "cloud"; + if (deal.getAcceptedQuoteId() != null) { + ProcurementQuote q = quoteRepo.findById(deal.getAcceptedQuoteId()).orElse(null); + if (q != null) { + term = Math.max(1, q.getTermYears()); + if (q.getDeployment() != null && !q.getDeployment().isBlank()) { + deployment = q.getDeployment(); + } + } + } + deal.setLicenseRef( + licenses.issueAnnualLicense( + teamId, deployment, LocalDateTime.now().plusYears(term))); + deal.setStage(ProcurementDeal.STAGE_LIVE); + deal = dealRepo.save(deal); + log.info("[procurement] deal live team={} deal={}", teamId, deal.getDealId()); + return deal; + } + + /** + * Reset a team's procurement: delete the deal (quotes + activity cascade). For + * re-demos/testing. + */ + @Transactional + public void resetDeal(Long teamId) { + dealRepo.deleteByTeamId(teamId); + log.info("[procurement] deal reset team={}", teamId); + } + + private String nextQuoteNumber(Long dealId) { + int seq = quoteRepo.findByDealIdOrderByCreatedAtDesc(dealId).size() + 1; + String token = UUID.randomUUID().toString().substring(0, 4).toUpperCase(Locale.ROOT); + return String.format(Locale.ROOT, "QT-%s-%04d", token, seq); + } + + private String writeLineItems(QuoteBreakdown breakdown) { + try { + return OBJECT_MAPPER.writeValueAsString(breakdown.lineItems()); + } catch (JsonProcessingException e) { + log.warn("[procurement] failed to serialise line items", e); + return "[]"; + } + } +} diff --git a/app/saas/src/main/resources/db/migration/saas/V27__procurement.sql b/app/saas/src/main/resources/db/migration/saas/V27__procurement.sql new file mode 100644 index 0000000000..0048f999c1 --- /dev/null +++ b/app/saas/src/main/resources/db/migration/saas/V27__procurement.sql @@ -0,0 +1,72 @@ +-- Enterprise procurement: the tables that track a linked team's journey from trial to live. +-- +-- One deal per team (the commercial journey: trial -> quote -> agreement -> payment -> live), the +-- quotes built against it (the itemised, priced offers), and an append-only activity log for the +-- money/licence-touching actions. The resulting subscription is mirrored in billing_subscriptions +-- (seeded on trial start / payment); the entitlement that unlocks the product is a Keygen licence +-- referenced by procurement_deal.license_ref. Prices are computed server-side (ProcurementPricingService). +-- +-- Additive and idempotent (IF NOT EXISTS) — safe on the shared dev branch. + +CREATE TABLE IF NOT EXISTS stirling_pdf.procurement_deal ( + deal_id BIGSERIAL PRIMARY KEY, + team_id BIGINT NOT NULL UNIQUE REFERENCES stirling_pdf.teams(team_id) ON DELETE CASCADE, + -- one active deal per team; the journey lives on this row. + stage VARCHAR(32) NOT NULL DEFAULT 'trial', + -- trial | quote | security (agreement) | procurement (payment) | active (live) + trial_started_at TIMESTAMP, + trial_ends_at TIMESTAMP, + trial_extensions_used INT NOT NULL DEFAULT 0, + license_ref VARCHAR(128), + -- Keygen licence id issued for this deal (trial or annual). Mocked until Keygen mgmt lands. + subscription_id VARCHAR(255), + -- Stripe subscription id, mirrored into billing_subscriptions once commercial. + accepted_quote_id BIGINT, + created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + version BIGINT NOT NULL DEFAULT 0 +); + +CREATE TABLE IF NOT EXISTS stirling_pdf.procurement_quote ( + quote_id BIGSERIAL PRIMARY KEY, + deal_id BIGINT NOT NULL REFERENCES stirling_pdf.procurement_deal(deal_id) ON DELETE CASCADE, + quote_number VARCHAR(64) NOT NULL, + status VARCHAR(24) NOT NULL DEFAULT 'draft', + -- draft | sent | accepted | expired + currency VARCHAR(8) NOT NULL DEFAULT 'USD', + volume BIGINT NOT NULL, + seats INT, + deployment VARCHAR(24), + term_years INT NOT NULL, + service_level VARCHAR(24) NOT NULL, + indemnification BOOLEAN NOT NULL DEFAULT FALSE, + training BOOLEAN NOT NULL DEFAULT FALSE, + qbr BOOLEAN NOT NULL DEFAULT FALSE, + annual_net_minor BIGINT NOT NULL, + -- recurring annual fee after the multi-year discount, in minor units (cents). + tcv_minor BIGINT NOT NULL, + -- total contract value across the term incl. one-time fees, minor units. + line_items TEXT, + -- JSON snapshot of the itemised lines the order form renders. + stripe_price_id VARCHAR(128), + checkout_session_id VARCHAR(255), + checkout_url TEXT, + valid_until DATE, + created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, + version BIGINT NOT NULL DEFAULT 0 +); + +CREATE TABLE IF NOT EXISTS stirling_pdf.procurement_activity ( + activity_id BIGSERIAL PRIMARY KEY, + deal_id BIGINT NOT NULL REFERENCES stirling_pdf.procurement_deal(deal_id) ON DELETE CASCADE, + actor_user_id BIGINT, + -- the internal/portal user who took the action; informational (no FK). + action VARCHAR(48) NOT NULL, + -- trial_started | trial_extended | quote_built | quote_accepted | checkout_created | went_live ... + detail TEXT, + created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP +); + +CREATE INDEX IF NOT EXISTS idx_procurement_quote_deal ON stirling_pdf.procurement_quote (deal_id); +CREATE INDEX IF NOT EXISTS idx_procurement_activity_deal ON stirling_pdf.procurement_activity (deal_id); diff --git a/app/saas/src/main/resources/db/migration/saas/V28__procurement_stripe_quote.sql b/app/saas/src/main/resources/db/migration/saas/V28__procurement_stripe_quote.sql new file mode 100644 index 0000000000..5d83ee35f8 --- /dev/null +++ b/app/saas/src/main/resources/db/migration/saas/V28__procurement_stripe_quote.sql @@ -0,0 +1,8 @@ +-- Stripe Quote support: a procurement quote is issued as a real Stripe Quote (finalized → PDF + +-- shareable), and on acceptance Stripe creates the committed subscription + first invoice. The +-- Stripe operations live in Supabase edge functions; these columns hold the references they write +-- back. Twin of Supabase migration 20260703000000_procurement_stripe_quote.sql. + +ALTER TABLE stirling_pdf.procurement_quote + ADD COLUMN IF NOT EXISTS stripe_quote_id VARCHAR(128), + ADD COLUMN IF NOT EXISTS stripe_invoice_url TEXT; diff --git a/app/saas/src/main/resources/db/migration/saas/V29__procurement_business_name.sql b/app/saas/src/main/resources/db/migration/saas/V29__procurement_business_name.sql new file mode 100644 index 0000000000..ba9c74dde8 --- /dev/null +++ b/app/saas/src/main/resources/db/migration/saas/V29__procurement_business_name.sql @@ -0,0 +1,5 @@ +-- Persist the buyer's company name on the quote so re-editing remembers it and it can be shown on +-- the quote/agreement. Twin of Supabase migration 20260705000000_procurement_business_name.sql. + +ALTER TABLE stirling_pdf.procurement_quote + ADD COLUMN IF NOT EXISTS business_name VARCHAR(255); diff --git a/app/saas/src/test/java/stirling/software/saas/procurement/pricing/ProcurementPricingServiceTest.java b/app/saas/src/test/java/stirling/software/saas/procurement/pricing/ProcurementPricingServiceTest.java new file mode 100644 index 0000000000..1f903a1ee2 --- /dev/null +++ b/app/saas/src/test/java/stirling/software/saas/procurement/pricing/ProcurementPricingServiceTest.java @@ -0,0 +1,87 @@ +package stirling.software.saas.procurement.pricing; + +import static org.assertj.core.api.Assertions.assertThat; + +import org.junit.jupiter.api.Test; + +import stirling.software.saas.procurement.pricing.QuoteLineItem.Kind; + +/** + * Locks the pricing engine to the numbers the marketing prototype encodes — most importantly the + * canonical quote QT-AC9F-0001 (1M PDFs, priority, 3-year) = $41,400/yr, $124,200 TCV. + */ +class ProcurementPricingServiceTest { + + private final ProcurementPricingService pricing = new ProcurementPricingService(); + + private static QuoteConfig cfg(long volume, String sla, int term) { + return new QuoteConfig(volume, 0, "cloud", term, sla, false, false, false, "USD"); + } + + @Test + void canonicalQuoteMatchesPrototype() { + QuoteBreakdown q = pricing.price(cfg(1_000_000, "priority", 3)); + + assertThat(q.annualNetMinor()).isEqualTo(4_140_000L); // $41,400 + assertThat(q.tcvMinor()).isEqualTo(12_420_000L); // $124,200 + assertThat(lineAmount(q, "usage")).isEqualTo(4_000_000L); // $40,000 @ $0.04 + assertThat(lineAmount(q, "service-level")).isEqualTo(600_000L); // +15% + assertThat(lineAmount(q, "multi-year")).isEqualTo(-460_000L); // -10% + } + + @Test + void volumeBandsPickTheRightPerPdfRate() { + assertThat(lineAmount(pricing.price(cfg(500_000, "standard", 1)), "usage")) + .isEqualTo(2_500_000L); // 500k @ $0.05 + assertThat(lineAmount(pricing.price(cfg(1_000_000, "standard", 1)), "usage")) + .isEqualTo(4_000_000L); // 1M @ $0.04 + assertThat(lineAmount(pricing.price(cfg(5_000_000, "standard", 1)), "usage")) + .isEqualTo(15_000_000L); // 5M @ $0.03 + } + + @Test + void addOnsAndTermStack() { + QuoteConfig c = + new QuoteConfig(1_000_000, 0, "cloud", 5, "dedicated", true, true, true, "USD"); + QuoteBreakdown q = pricing.price(c); + + long usage = 4_000_000L; + long withSla = Math.round(usage * 1.30); // 5,200,000 + long withIndemnity = Math.round(withSla * 1.05); // 5,460,000 + long discount = Math.round(withIndemnity * 0.15); // 819,000 + long qbr = 800_000L; + long expectedAnnual = (withIndemnity - discount) + qbr; + long expectedTcv = expectedAnnual * 5 + 750_000L; // + training one-time + + assertThat(q.annualNetMinor()).isEqualTo(expectedAnnual); + assertThat(q.tcvMinor()).isEqualTo(expectedTcv); + assertThat(q.lineItems()) + .anyMatch(l -> l.key().equals("training") && l.kind() == Kind.ONE_TIME); + assertThat(q.lineItems()).anyMatch(l -> l.key().equals("qbr")); + assertThat(q.lineItems()).anyMatch(l -> l.key().equals("indemnification")); + } + + @Test + void standardSingleYearHasNoUpliftOrDiscountLines() { + QuoteBreakdown q = pricing.price(cfg(1_000_000, "standard", 1)); + assertThat(q.annualNetMinor()).isEqualTo(4_000_000L); + assertThat(q.tcvMinor()).isEqualTo(4_000_000L); + assertThat(q.lineItems()).noneMatch(l -> l.key().equals("service-level")); + assertThat(q.lineItems()).noneMatch(l -> l.key().equals("multi-year")); + } + + @Test + void volumeEstimateFromSeats() { + // ~2,013 PDFs/user/yr + assertThat(pricing.estimateAnnualVolume(100)).isEqualTo(201_250L); + assertThat(pricing.estimateAnnualVolume(0)).isZero(); + } + + private static long lineAmount(QuoteBreakdown q, String key) { + return q.lineItems().stream() + .filter(l -> l.key().equals(key)) + .mapToLong(QuoteLineItem::amountMinor) + .findFirst() + .orElseThrow(); + } +} diff --git a/frontend/.gitignore b/frontend/.gitignore index e07dce196a..0605e6e79f 100644 --- a/frontend/.gitignore +++ b/frontend/.gitignore @@ -11,6 +11,7 @@ # production /build /dist +/dist-portal /storybook-static /editor/build diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index d086613f44..dd8e379a8a 100644 --- a/frontend/.storybook/preview.tsx +++ b/frontend/.storybook/preview.tsx @@ -2,7 +2,7 @@ // the decorators below transpiles to React.createElement and needs React in // scope. (The app + story files use the automatic runtime via the portal vite // config; this import is specifically for the preview config file.) -import React, { useEffect } from "react"; +import React, { Suspense, useEffect } from "react"; import type { Decorator, Preview } from "@storybook/react-vite"; import { initialize, mswLoader } from "msw-storybook-addon"; import { MemoryRouter } from "react-router-dom"; @@ -109,7 +109,9 @@ const withProviders: Decorator = (Story, context) => { - + + + diff --git a/frontend/editor/public/locales/en-US/translation.toml b/frontend/editor/public/locales/en-US/translation.toml index 346ece1523..241289d1db 100644 --- a/frontend/editor/public/locales/en-US/translation.toml +++ b/frontend/editor/public/locales/en-US/translation.toml @@ -7430,7 +7430,7 @@ upgrade = "Upgrade" volumeSuffix = "PDFs processed · last 30 days" [portal.procurement] -enterpriseBadge = "Enterprise" +reset = "Reset procurement (demo)" subtitle = "Get your team evaluated, contracted, and onboarded. Every document in one place." title = "Procurement" @@ -7441,6 +7441,63 @@ request = "Request" sign = "Review & sign" upload = "Upload" +[portal.procurement.agreement] +agreeCta = "Agree & subscribe" +confirm = "I have read and agree to the Stirling Enterprise Agreement." +eyebrow = "Agreement" +intro = "One combined agreement covers your deal: Master Service Agreement, Order Form, EULA, and Data Processing Agreement. Review it, then agree to accept the quote into a committed subscription." +title = "Review your enterprise agreement" + +[portal.procurement.builder] +addons = "Add-ons" +back = "Back" +businessName = "Business name" +businessNamePlaceholder = "Your company" +continue = "Continue" +country = "Country" +countryEuro = "Eurozone (EUR €)" +countryUK = "United Kingdom (GBP £)" +countryUS = "United States (USD $)" +eula = "I have read and agree to the Stirling Enterprise EULA. It governs the agreement generated from this quote." +generate = "Generate quote" +included = "Included" +indemnification = "IP indemnification" +indemnificationSub = "We defend qualifying IP claims, per the EULA" +qbr = "Quarterly business reviews" +qbrSub = "Your SE reviews usage and roadmap each quarter" +running = "{{annual}} / yr · {{years}}-yr {{tcv}}" +s1Sub = "Your team, and the PDFs you expect to run each year." +# Step 1 — volume +s1Title = "How much will you process?" +s2Sub = "Longer terms discount the rate; your service level sets support." +# Step 2 — commitment & service +s2Title = "Commitment and service" +s3Sub = "For the quote and the agreement it generates." +# Step 3 — details +s3Title = "Your details" +serviceLevel = "Service level" +slDedicated = "Dedicated" +slDedicatedSub = "4 business hours · dedicated account manager · +30%" +slPriority = "Priority" +slPrioritySub = "Same business day · named CSM · +15%" +slStandard = "Standard" +slStandardSub = "Next business day · shared CSM · included" +stepOf = "Step {{n}} of {{total}}" +term = "Term" +termDiscount = "{{pct}}% multi-year commitment discount applied" +title = "Build your quote" +training = "Onboarding & training" +trainingSub = "Live sessions to get your team running" +users = "Total users" +usersPlaceholder = "e.g. 250" +volEstimated = "Estimated from {{count}} users (~2,000 PDFs each, including automation). Edit if you know better." +volManual = "Using your figure. Re-estimate from your team size any time." +volNoUsers = "Not sure? Enter your team size and we'll estimate it." +volume = "Annual PDF volume" +volumePlaceholder = "e.g. 1,000,000" +years_one = "{{count}} year" +years_other = "{{count}} years" + [portal.procurement.docs] count_one = "{{count}} doc" count_other = "{{count}} docs" @@ -7456,6 +7513,30 @@ supportingTitle = "Supporting your evaluation" title = "Documents" upcoming = "Upcoming" +[portal.procurement.error] +title = "Something went wrong" + +[portal.procurement.hero] +company = "Your enterprise deal" +ctaAgreement = "Review & sign agreement" +ctaLive = "You're live" +ctaPayment = "Add payment" +ctaQuote = "Review your quote" +ctaTrial = "Build your quote" +eyebrow = "Enterprise procurement" +inviteTeammates = "Invite teammates" +keyDocs = "Key documents" +nextStep = "Next step: {{action}}" +notStarted = "Not started" +open = "Open procurement" +scheduleCall = "Schedule a call" +setup1Sub = "Invite your teammates" +setup1Title = "Deploy the PDF Editor" +setup2Sub = "Turn on processing across editors and other sources" +setup2Title = "Connect the PDF Processor" +setup3Sub = "Turn on Security, Compliance, Routing, or Retention when you need them" +setup3Title = "Add recommended policies" + [portal.procurement.journey] daysLeft_one = "{{count}} day left" daysLeft_other = "{{count}} days left" @@ -7467,15 +7548,39 @@ subtitle = "Your solutions engineer is on every step. One next action at a time; title = "From trial to live, one guided path" trialTitle = "Enterprise trial" +[portal.procurement.link] +cta = "Link account" +description = "Procurement runs on your linked Stirling account: it's how we provision the trial, price your quote, and start billing. Link an account to start." +eyebrow = "Enterprise" +title = "Link your account to begin" + +[portal.procurement.live] +description = "Your subscription is active and your licence is issued. Your team is provisioned and billing has started." +eyebrow = "Live" +title = "You're live on Stirling Enterprise" + [portal.procurement.locked] description = "Trial keys, committed-volume quotes, the one-signature agreement, payment, and your document ledger all live here once you start an enterprise evaluation." eyebrow = "Enterprise only" talkToSales = "Talk to sales" title = "The procurement track opens with Enterprise" +[portal.procurement.milestone] +accept = "Accept & continue" +description = "Download the PDF to share it with your team, come back to accept when you're ready, or make changes." +download = "Download PDF" +downloadError = "Could not download the quote PDF just yet — please try again in a moment." +edit = "Edit quote" +eyebrow = "Quote {{number}}" +perYear = " / yr" +preparedFor = "Prepared for {{company}}" +tcv = "{{value}} total contract value" +title = "Your quote is ready" + [portal.procurement.modal] cancel = "Cancel" chooseFile = "Choose file" +close = "Close" downloadBody = "Your download will begin shortly." downloadCta = "Download" downloadTitle = "Download" @@ -7494,6 +7599,13 @@ uploadBody = "Send us your PO and we invoice against it on your terms. Drag in t uploadCta = "Upload purchase order" uploadTitle = "Upload your purchase order" +[portal.procurement.payment] +description = "Your quote is accepted and a committed annual subscription has been created. Pay the first invoice to go live — you can pay or download it right here, no email needed." +downloadInvoice = "Download invoice" +simulate = "Simulate payment received (demo)" +title = "Subscription created" +viewInvoice = "View & pay invoice" + [portal.procurement.status] action = "Action needed" available = "Available" @@ -7501,6 +7613,21 @@ complete = "Complete" pending = "Pending" request = "On request" +[portal.procurement.trial] +body = "Extending adds 7 days and notifies your solutions engineer." +bodyMaxed = "You have used all your extensions — talk to your solutions engineer if you need more time." +cancel = "Cancel trial" +extend = "Extend 7 days" +maxed = "Maxed out" +subtitle = "Your free trial runs through {{date}}. No card required." +title = "Enterprise trial" + +[portal.procurement.upsell] +homeBadge = "Enterprise" +homeBody = "Committed volume pricing, org-wide SSO + SCIM + RBAC, 90-day immutable audit, and a dedicated SE." +homeCta = "Start Trial →" +homeHeadline = "Process millions of PDFs." + [portal.recentActivity] title = "Recent activity" viewAll = "View all" diff --git a/frontend/editor/src/portal/api/procurement.ts b/frontend/editor/src/portal/api/procurement.ts index 3a2b9fe0f2..9327179c03 100644 --- a/frontend/editor/src/portal/api/procurement.ts +++ b/frontend/editor/src/portal/api/procurement.ts @@ -1,4 +1,5 @@ import { apiClient } from "@portal/api/http"; +import { getSupabaseClient } from "@app/auth/supabase/supabaseClient"; import type { Tier } from "@portal/contexts/TierContext"; import type { DealStage, @@ -92,3 +93,165 @@ export async function requestDocument( { method: "POST", body: { action } }, ); } + +// ============================================================================ +// Enterprise procurement — real SaaS backend (/api/v1/procurement). +// +// The journey/ledger visuals above still ride the MSW mock; the commercial spine +// below (trial, server-priced quote, accept -> Stripe checkout) is the real thing, +// served by the saas Java backend and gated on a linked account. +// ============================================================================ + +export type QuoteLineItemKind = + | "RECURRING" + | "ONE_TIME" + | "DISCOUNT" + | "INCLUDED"; + +export interface QuoteLineItem { + key: string; + label: string; + kind: QuoteLineItemKind; + amountMinor: number; +} + +export interface QuoteResult { + quoteId: number; + quoteNumber: string; + /** draft (priced, editable) | sent (issued Stripe quote — PDF + shareable) | accepted | expired. */ + status: string; + currency: string; + annualNetMinor: number; + tcvMinor: number; + lineItems: QuoteLineItem[]; + validUntil: string | null; + /** The Stripe Quote id once issued; null while still a local draft. */ + stripeQuoteId: string | null; + /** Hosted Stripe invoice URL, present once the quote is accepted and the subscription invoice exists. */ + invoiceUrl: string | null; + /** The inputs this quote was priced from, so the builder can seed itself on re-edit. */ + config: QuoteConfigInput; +} + +/** Outcome of accepting an issued quote: Stripe creates the subscription + first invoice. */ +export interface AcceptResult { + status: string; + subscriptionId: string | null; + invoiceUrl: string | null; + invoicePdf: string | null; +} + +/** One shape for every state; an unstarted procurement has {@link ProcurementSnapshot.dealId} null. */ +export interface ProcurementSnapshot { + dealId: number | null; + stage: DealStage | null; + trialStartedAt: string | null; + trialEndsAt: string | null; + trialExtensionsUsed: number; + licensed: boolean; + latestQuote: QuoteResult | null; +} + +export interface QuoteConfigInput { + volume: number; + users: number; + deployment: string; + termYears: number; + serviceLevel: string; + indemnification: boolean; + training: boolean; + qbr: boolean; + currency: string; + /** Buyer's company name — shown on the quote/agreement and remembered when re-editing. */ + businessName: string; +} + +export function fetchSnapshot(): Promise { + return apiClient.saas.json("/api/v1/procurement"); +} + +export function startTrial(): Promise { + return apiClient.saas.json( + "/api/v1/procurement/trial/start", + { method: "POST" }, + ); +} + +export function extendTrial(): Promise { + return apiClient.saas.json( + "/api/v1/procurement/trial/extend", + { method: "POST" }, + ); +} + +/** Advance an issued quote to the agreement (security) stage for review + agree. */ +export function startAgreement(): Promise { + return apiClient.saas.json( + "/api/v1/procurement/agreement", + { method: "POST" }, + ); +} + +/** Price a config server-side and persist it as a local DRAFT (no Stripe object yet). */ +export function buildQuote(cfg: QuoteConfigInput): Promise { + return apiClient.saas.json("/api/v1/procurement/quote", { + method: "POST", + body: cfg, + }); +} + +// ---- Stripe Quote operations (Supabase edge functions) --------------------- +// Java has no Stripe SDK, so issuing/accepting the quote and fetching its PDF run in edge functions +// that own Stripe; they persist results back through SECURITY DEFINER RPCs. The portal invokes them +// directly (same pattern the PAYG checkout uses). + +async function invokeEdge(fn: string, quoteId: number): Promise { + const supabase = getSupabaseClient(); + if (!supabase) throw new Error("No SaaS session"); + const { data, error } = await supabase.functions.invoke(fn, { + body: { quote_id: quoteId }, + }); + if (error) throw error; + if (data == null) throw new Error(`${fn} returned no data`); + return data; +} + +/** Turn a draft into an issued Stripe Quote (finalized → gets a number + PDF, shareable). */ +export function issueQuote(quoteId: number): Promise { + return invokeEdge("issue-procurement-quote", quoteId); +} + +/** Accept an issued quote → Stripe creates the committed subscription + first invoice. */ +export function acceptQuote(quoteId: number): Promise { + return invokeEdge("accept-procurement-quote", quoteId); +} + +/** Fetch the Stripe-generated quote PDF as a blob (for download / share). */ +export async function fetchQuotePdf(quoteId: number): Promise { + const supabase = getSupabaseClient(); + if (!supabase) throw new Error("No SaaS session"); + const { data, error } = await supabase.functions.invoke( + "get-procurement-quote-pdf", + { body: { quote_id: quoteId } }, + ); + if (error) throw error; + if (!data) throw new Error("No PDF returned"); + return data; +} + +/** + * Demo/manual stand-in for the invoice.paid webhook: mark the deal live (issue licence, go active). + */ +export function goLive(): Promise { + return apiClient.saas.json( + "/api/v1/procurement/go-live", + { method: "POST" }, + ); +} + +/** Reset the team's procurement (delete the deal) and get the fresh empty snapshot. */ +export function resetProcurement(): Promise { + return apiClient.saas.json("/api/v1/procurement/reset", { + method: "POST", + }); +} diff --git a/frontend/editor/src/portal/components/Sidebar.tsx b/frontend/editor/src/portal/components/Sidebar.tsx index d9ced4ae65..0deb3c0dda 100644 --- a/frontend/editor/src/portal/components/Sidebar.tsx +++ b/frontend/editor/src/portal/components/Sidebar.tsx @@ -22,7 +22,6 @@ import { UsageIcon, LinkIcon, DocsIcon, - ProcurementIcon, SettingsIcon, ChevronDownIcon, } from "@portal/components/icons"; @@ -136,15 +135,10 @@ export function Sidebar() { const { activeView, setActiveView } = useView(); const { theme } = useTheme(); const { openSettings } = useUI(); - const { tier } = useTier(); const { t } = useTranslation(); - // Procurement is the enterprise buyer's commercial journey — surfaced only to - // enterprise tenants (it has no free/pro equivalent). - const platformGroup: NavEntry[] = - tier === "enterprise" - ? [{ id: "procurement", icon: }, ...GROUP_PLATFORM] - : GROUP_PLATFORM; + // Procurement is no longer a nav tab — it lives on Home as the deal-status hero and expands into + // a takeover modal (matching the marketing prototype). function renderGroup(entries: NavEntry[]) { return entries.map((entry) => ( @@ -227,7 +221,7 @@ export function Sidebar() {
- {renderGroup(platformGroup)} + {renderGroup(GROUP_PLATFORM)}
diff --git a/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx b/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx index b303c530ff..6525e66970 100644 --- a/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx +++ b/frontend/editor/src/portal/components/billing/EnterpriseUpsell.tsx @@ -1,5 +1,6 @@ import { useTranslation } from "react-i18next"; import { Button, Card } from "@app/ui"; +import { useView } from "@portal/contexts/ViewContext"; interface Props { /** Render without the Card wrapper, to embed inside another card's column. */ @@ -8,10 +9,12 @@ interface Props { /** * Volume-discount / Enterprise upsell, shared by the free and subscribed billing - * views. The CTA is intentionally inert until the sales/quote URL is confirmed. + * views. The CTA opens the procurement journey (/procurement auto-opens the quote + * builder in the takeover modal). */ export function EnterpriseUpsell({ bare = false }: Props) { const { t } = useTranslation(); + const { setActiveView } = useView(); const body = ( <> @@ -32,8 +35,11 @@ export function EnterpriseUpsell({ bare = false }: Props) { )}

- {/* Destination wired when the enterprise/sales URL is confirmed. */} - + )} + {stage !== "active" && ( + + )} + {stage !== "active" && ( + + )} + + + + +
+ +
+ + {inTrial && ( +
    + {setupSteps.map((s) => ( +
  • + +
    • + ))} +
+ )} + +
+ + + {t("portal.procurement.hero.nextStep", { action: cta })} + +
+ +
+
+ + ); +} + +function daysLeft(iso: string): number { + const end = new Date(iso).getTime(); + return Math.max(0, Math.ceil((end - Date.now()) / 86_400_000)); +} diff --git a/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx b/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx new file mode 100644 index 0000000000..bd00a93904 --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx @@ -0,0 +1,126 @@ +import { useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Button, Card } from "@app/ui"; +import type { QuoteResult } from "@portal/api/procurement"; +import { money } from "@portal/components/procurement/format"; +import "@portal/views/Procurement.css"; + +/** + * The agreement (security) step: a single combined Stirling Enterprise Agreement — Master Service + * Agreement + Order Form (from the issued quote) + EULA + Data Processing Agreement — that the buyer + * reviews and agrees to before it's accepted into a subscription. No e-signature for now: an explicit + * "I agree" click stands in (the terms reference the accepted quote). Document body is static legal + * copy; the surrounding UI is translated. + */ +export function ProcurementAgreement({ + quote, + busy, + onAgree, +}: { + quote: QuoteResult; + busy: boolean; + onAgree: () => void; +}) { + const { t } = useTranslation(); + const [checked, setChecked] = useState(false); + const annual = money(quote.annualNetMinor, quote.currency); + const tcv = money(quote.tcvMinor, quote.currency); + const years = quote.config.termYears; + + return ( + + + {t("portal.procurement.agreement.eyebrow")} + +

+ {t("portal.procurement.agreement.title")} +

+

+ {t("portal.procurement.agreement.intro")} +

+ +
+

1. Master Service Agreement

+

+ This Stirling Enterprise Agreement ("Agreement") is entered into + between Stirling PDF Inc. ("Stirling") and the customer identified on + the Order Form ("Customer"). It governs Customer's access to and use + of the Stirling enterprise platform and related services (the + "Service"). Stirling will provide the Service with commercially + reasonable skill and care and in accordance with the service levels + set out in the Order Form. +

+ +

2. Order Form

+

+ Quote {quote.quoteNumber} forms the Order Form for + this Agreement. Customer commits to a {years}-year term at{" "} + {annual} per year (total contract value{" "} + {tcv}), billed annually in advance by invoice. Fees + are exclusive of taxes. The committed volume, service level, and + add-ons are itemised below: +

+
    + {quote.lineItems.map((li) => ( +
  • + {li.label} + + {li.kind === "INCLUDED" + ? t("portal.procurement.builder.included") + : money(li.amountMinor, quote.currency)} + +
    • + ))} +
+ +

3. End-User License Agreement

+

+ Subject to the terms of this Agreement, Stirling grants Customer a + non-exclusive, non-transferable right to use the Service for its + internal business purposes during the term. Customer is responsible + for its users' compliance and for the content it processes. The + Service, and all intellectual property in it, remains Stirling's. +

+ +

4. Data Processing Agreement

+

+ Where Stirling processes personal data on Customer's behalf, it does + so only on Customer's documented instructions and applies appropriate + technical and organisational measures. Sub-processors, international + transfers, and security commitments are as described in Stirling's + Data Processing Agreement and Trust Center, incorporated here by + reference. +

+ +

5. Acceptance

+

+ By agreeing below, Customer accepts this Agreement and the Order Form. + On acceptance, Stirling will issue the committed annual subscription + and its first invoice. This preview stands in for e-signature during + the pilot. +

+
+ + + +
+ +
+ + ); +} diff --git a/frontend/editor/src/portal/components/procurement/ProcurementExtras.tsx b/frontend/editor/src/portal/components/procurement/ProcurementExtras.tsx new file mode 100644 index 0000000000..ce6620da78 --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementExtras.tsx @@ -0,0 +1,299 @@ +import { useEffect } from "react"; +import { createPortal } from "react-dom"; +import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui"; +import type { ProcurementSnapshot } from "@portal/api/procurement"; +import { useFocusTrap } from "@portal/components/procurement/ProcurementModal"; +import "@portal/views/Procurement.css"; + +/** + * Small centred dialogs that hang off the deal-status hero's quick actions — Key documents, Schedule + * a call, and trial management. Content is mocked for the pilot (static demo data); the shells and + * wiring are real so the hero behaves like the marketing prototype. + */ + +function SideModal({ + open, + onClose, + title, + subtitle, + children, + footer, +}: { + open: boolean; + onClose: () => void; + title: string; + subtitle?: string; + children: React.ReactNode; + footer?: React.ReactNode; +}) { + const { t } = useTranslation(); + const trapRef = useFocusTrap(open); + + useEffect(() => { + if (!open) return; + const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose(); + document.addEventListener("keydown", onKey); + return () => document.removeEventListener("keydown", onKey); + }, [open, onClose]); + + if (!open) return null; + return createPortal( +
e.target === e.currentTarget && onClose()} + > +
+ +
+

{title}

+ {subtitle &&

{subtitle}

} +
+
{children}
+ {footer &&
{footer}
} +
+
, + document.body, + ); +} + +// ── Key documents ──────────────────────────────────────────────────────────── +type DocStatus = "available" | "action" | "request"; +interface DocRow { + name: string; + sub: string; + status: DocStatus; + fee?: number; +} +const STAGE_DOCS: { group: string; docs: DocRow[] }[] = [ + { + group: "Your deal", + docs: [ + { + name: "Formal quote", + sub: "Built to your volume, term, and service level", + status: "available", + }, + { + name: "Master Services Agreement", + sub: "One signature — MSA, order form, EULA, and DPA combined", + status: "action", + }, + { + name: "Bank transfer instructions", + sub: "Wire details for your AP team", + status: "available", + }, + { + name: "Purchase order", + sub: "Issuing a PO? Upload it and we invoice against it", + status: "request", + }, + ], + }, + { + group: "Supporting your evaluation", + docs: [ + { + name: "SOC 2 Type II report", + sub: "Audited · NDA-gated", + status: "available", + }, + { + name: "Custom security review", + sub: "We complete your questionnaire and join your review call", + status: "request", + fee: 5000, + }, + { + name: "Business Associate Agreement", + sub: "HIPAA · available on request", + status: "request", + fee: 2500, + }, + { name: "IRS Form W-9", sub: "Stirling PDF Inc.", status: "available" }, + { + name: "Certificate of Insurance", + sub: "Cyber + E&O · current policy", + status: "available", + }, + ], + }, +]; +const STATUS_LABEL: Record = { + available: "Download", + action: "Action needed", + request: "Request", +}; + +export function KeyDocumentsModal({ + open, + onClose, +}: { + open: boolean; + onClose: () => void; +}) { + return ( + + {STAGE_DOCS.map((g) => ( +
+
{g.group}
+
    + {g.docs.map((d) => ( +
  • +
    + {d.name} + + {d.sub} + {d.fee ? ` · one-time $${d.fee.toLocaleString()}` : ""} + +
    + + {STATUS_LABEL[d.status]} + +
    • + ))} +
+
+ ))} + + ); +} + +// ── Schedule a call ────────────────────────────────────────────────────────── +const SLOTS = [ + "Tomorrow · 10:00", + "Tomorrow · 15:30", + "Thursday · 11:00", + "Friday · 09:30", +]; + +export function ScheduleCallModal({ + open, + onClose, +}: { + open: boolean; + onClose: () => void; +}) { + return ( + +
+ + SE + +
+
Your solutions engineer
+
+ Dedicated to your evaluation and rollout +
+
+
+
+ {SLOTS.map((s) => ( + + ))} +
+ + ); +} + +// ── Trial management ───────────────────────────────────────────────────────── +export function TrialManageModal({ + open, + onClose, + snapshot, + busy, + onExtend, + onCancel, +}: { + open: boolean; + onClose: () => void; + snapshot: ProcurementSnapshot; + busy: boolean; + onExtend: () => void; + onCancel: () => void; +}) { + const { t } = useTranslation(); + const ends = snapshot.trialEndsAt + ? new Date(snapshot.trialEndsAt).toLocaleDateString(undefined, { + month: "long", + day: "numeric", + year: "numeric", + }) + : ""; + const maxed = snapshot.trialExtensionsUsed >= 2; + return ( + + + + + } + > +

+ {maxed + ? t("portal.procurement.trial.bodyMaxed") + : t("portal.procurement.trial.body")} +

+ + ); +} diff --git a/frontend/editor/src/portal/components/procurement/ProcurementHome.stories.tsx b/frontend/editor/src/portal/components/procurement/ProcurementHome.stories.tsx new file mode 100644 index 0000000000..ae424922ad --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementHome.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { ProcurementHome } from "@portal/components/procurement/ProcurementHome"; + +/** + * The end-to-end procurement experience (Home hero + takeover modal), driven by the `procurementSaas` + * MSW handlers: start trial → build quote → generate (issue Stripe Quote) → milestone (download PDF / + * accept). `autoOpen` opens the modal so the flow is immediately clickable. + */ +const meta: Meta = { + title: "Portal/Procurement/ProcurementHome", + component: ProcurementHome, + parameters: { layout: "fullscreen" }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { args: { autoOpen: true } }; diff --git a/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx b/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx new file mode 100644 index 0000000000..a10057a3d8 --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx @@ -0,0 +1,296 @@ +import { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Banner, Button, Card, EmptyState, Skeleton } from "@app/ui"; +import { useLink } from "@portal/contexts/LinkContext"; +import { useUI } from "@portal/contexts/UIContext"; +import { useView } from "@portal/contexts/ViewContext"; +import { useAsync } from "@portal/hooks/useAsync"; +import { + acceptQuote, + extendTrial, + fetchQuotePdf, + fetchSnapshot, + goLive, + issueQuote, + JOURNEY, + resetProcurement, + startAgreement, + startTrial, + type ProcurementSnapshot, + type QuoteResult, +} from "@portal/api/procurement"; +import { DealStatusHero } from "@portal/components/procurement/DealStatusHero"; +import { ProcurementAgreement } from "@portal/components/procurement/ProcurementAgreement"; +import { + KeyDocumentsModal, + ScheduleCallModal, + TrialManageModal, +} from "@portal/components/procurement/ProcurementExtras"; +import { ProcurementModal } from "@portal/components/procurement/ProcurementModal"; +import { + LiveStageCard, + PaymentStageCard, + QuoteMilestoneCard, +} from "@portal/components/procurement/ProcurementStages"; +import { QuoteBuilder } from "@portal/components/procurement/QuoteBuilder"; +import { StageStepper } from "@portal/components/procurement/StageStepper"; +import "@portal/views/Procurement.css"; + +/** + * The procurement experience on Home: a compact deal-status hero once a trial is running (or the + * enterprise upsell on-ramp before it), both expanding into the full-screen takeover modal that + * holds the journey — build + issue a quote (a Stripe Quote with a real PDF, the milestone the buyer + * can share and return to), review + agree to the enterprise agreement, then accept into a committed + * subscription. Starting a trial is a single click (no "start a trial" prompt); the deadline + next + * steps then show on the hero. Rendered on Home and at /procurement (autoOpen). Gated on a link. + */ +export function ProcurementHome({ autoOpen = false }: { autoOpen?: boolean }) { + const { t } = useTranslation(); + const { isLinked } = useLink(); + const { openLinkModal } = useUI(); + const { setActiveView } = useView(); + + const state = useAsync( + () => (isLinked ? fetchSnapshot() : Promise.resolve(null)), + [isLinked], + ); + const [snap, setSnap] = useState(null); + const [open, setOpen] = useState(false); + const [busy, setBusy] = useState(false); + const [editing, setEditing] = useState(false); + const [downloading, setDownloading] = useState(false); + const [invoicePdf, setInvoicePdf] = useState(null); + const [error, setError] = useState(null); + const [extra, setExtra] = useState( + null, + ); + + const data = snap ?? (state.loading ? null : state.data); + const started = data?.dealId != null; + const stage = data?.stage; + const latest = data?.latestQuote ?? null; + const isIssued = latest?.status === "sent" || latest?.status === "open"; + // No live quote to act on (none yet, still a draft, or expired/canceled) → the buyer (re)builds. + const isDraft = + !latest || + ["draft", "expired", "canceled", "cancelled"].includes(latest.status); + + async function run(fn: () => Promise) { + setBusy(true); + setError(null); + try { + await fn(); + setSnap(await fetchSnapshot()); + } catch (e) { + console.error("[procurement] action failed", e); + setError(e instanceof Error ? e.message : String(e)); + } finally { + setBusy(false); + } + } + + const onStartTrial = () => run(startTrial); + const onExtendTrial = () => run(extendTrial); + const onReset = () => + run(async () => { + await resetProcurement(); + setEditing(false); + setInvoicePdf(null); + }); + const onGenerate = (draft: QuoteResult) => + run(async () => { + await issueQuote(draft.quoteId); + setEditing(false); + }); + // Milestone → agreement (security) stage; then agreeing accepts into a subscription. + const onAcceptQuote = () => run(startAgreement); + const onAgree = () => + run(async () => { + if (!latest) return; + const res = await acceptQuote(latest.quoteId); + setInvoicePdf(res.invoicePdf); + }); + + async function onDownloadPdf() { + if (!latest) return; + setDownloading(true); + try { + const blob = await fetchQuotePdf(latest.quoteId); + // A same-gesture click is reliable; window.open after an await is often + // popup-blocked (which is what made this take "a few goes"). + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = `${latest.quoteNumber || "quote"}.pdf`; + document.body.appendChild(a); + a.click(); + a.remove(); + setTimeout(() => URL.revokeObjectURL(url), 60_000); + } catch (e) { + console.error("[procurement] quote PDF download failed", e); + setError(t("portal.procurement.milestone.downloadError")); + } finally { + setDownloading(false); + } + } + + // A deep link (/procurement) opens the flow when a deal is already underway; if there's no deal + // yet it must NOT silently start a trial — leave the modal closed so the Start-trial CTA shows. + useEffect(() => { + if (autoOpen && started) setOpen(true); + }, [autoOpen, started]); + + const banner = + isLinked && started && data ? ( + setOpen(true)} + onKeyDocs={() => setExtra("docs")} + onInvite={() => setActiveView("users")} + onSchedule={() => setExtra("schedule")} + onManageTrial={() => setExtra("trial")} + onNavigate={setActiveView} + /> + ) : ( + +
+ + {t("portal.procurement.upsell.homeBadge")} + +

+ {t("portal.procurement.upsell.homeHeadline")} + {t("portal.procurement.upsell.homeBody")} +

+
+ + + ); + + return ( + <> + {banner} + setOpen(false)} + title={t("portal.procurement.title")} + subtitle={t("portal.procurement.subtitle")} + > + {error && ( + setError(null)} + > + {error} + + )} + + {!isLinked && ( + openLinkModal()} + > + {t("portal.procurement.link.cta")} + + } + /> + )} + + {isLinked && (state.loading || !started) && } + + {isLinked && started && ( + <> +
+ +
+ + {(editing || + (isDraft && (stage === "trial" || stage === "quote"))) && ( + + )} + + {!editing && isIssued && stage === "quote" && latest && ( + setEditing(true)} + /> + )} + + {!editing && stage === "security" && latest && ( + + )} + + {!editing && stage === "procurement" && latest && ( + run(goLive)} + /> + )} + + {!editing && stage === "active" && } + +
+ +
+ + )} + + + setExtra(null)} + /> + setExtra(null)} + /> + {data && ( + setExtra(null)} + snapshot={data} + busy={busy} + onExtend={async () => { + await onExtendTrial(); + setExtra(null); + }} + onCancel={async () => { + await onReset(); + setExtra(null); + }} + /> + )} + + ); +} diff --git a/frontend/editor/src/portal/components/procurement/ProcurementModal.stories.tsx b/frontend/editor/src/portal/components/procurement/ProcurementModal.stories.tsx new file mode 100644 index 0000000000..7074e390e7 --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementModal.stories.tsx @@ -0,0 +1,42 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { Button, Card } from "@app/ui"; +import { ProcurementModal } from "@portal/components/procurement/ProcurementModal"; + +/** + * The full-screen takeover modal shell. Rendered always-open here to verify the panel has a solid + * (not see-through) surface over the dimmed, blurred backdrop. + */ +const meta: Meta = { + title: "Portal/Procurement/ProcurementModal", + component: ProcurementModal, + parameters: { layout: "fullscreen" }, + args: { + open: true, + onClose: () => {}, + title: "Enterprise procurement", + subtitle: "Get your team evaluated, contracted, and onboarded.", + }, +}; +export default meta; + +type Story = StoryObj; + +export const Open: Story = { + args: { + children: ( + +

Ready for payment

+

+ Your quote is accepted. Continue to checkout to pay your committed + contract and go live. +

+
+ + +
+ + ), + }, +}; diff --git a/frontend/editor/src/portal/components/procurement/ProcurementModal.tsx b/frontend/editor/src/portal/components/procurement/ProcurementModal.tsx new file mode 100644 index 0000000000..bf3f463585 --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementModal.tsx @@ -0,0 +1,102 @@ +import { useEffect, useRef } from "react"; +import { createPortal } from "react-dom"; +import "@portal/views/Procurement.css"; + +/** Keep keyboard focus inside an open dialog: focus it on open and wrap Tab at the edges. */ +export function useFocusTrap(open: boolean) { + const ref = useRef(null); + useEffect(() => { + if (!open) return; + const panel = ref.current; + if (!panel) return; + const prev = document.activeElement as HTMLElement | null; + const focusables = () => + Array.from( + panel.querySelectorAll( + 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])', + ), + ).filter((el) => !el.hasAttribute("disabled")); + (focusables()[0] ?? panel).focus(); + const onKey = (e: KeyboardEvent) => { + if (e.key !== "Tab") return; + const items = focusables(); + if (items.length === 0) return; + const first = items[0]; + const last = items[items.length - 1]; + if (e.shiftKey && document.activeElement === first) { + e.preventDefault(); + last.focus(); + } else if (!e.shiftKey && document.activeElement === last) { + e.preventDefault(); + first.focus(); + } + }; + panel.addEventListener("keydown", onKey); + return () => { + panel.removeEventListener("keydown", onKey); + prev?.focus?.(); + }; + }, [open]); + return ref; +} + +/** + * Full-screen takeover modal for the procurement flow, copying the prototype's modal design + * (portaled to body, dimmed + blurred backdrop, rounded panel, close button). The Home deal-status + * hero expands into this. + */ +export function ProcurementModal({ + open, + onClose, + title, + subtitle, + children, +}: { + open: boolean; + onClose: () => void; + title: string; + subtitle?: string; + children: React.ReactNode; +}) { + const trapRef = useFocusTrap(open); + + useEffect(() => { + if (!open) return; + const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose(); + document.addEventListener("keydown", onKey); + return () => document.removeEventListener("keydown", onKey); + }, [open, onClose]); + + if (!open) return null; + + return createPortal( +
e.target === e.currentTarget && onClose()} + > +
+ +
+

{title}

+ {subtitle &&

{subtitle}

} +
+
{children}
+
+
, + document.body, + ); +} diff --git a/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx b/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx new file mode 100644 index 0000000000..fdebad61f6 --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx @@ -0,0 +1,160 @@ +import { useTranslation } from "react-i18next"; +import { Button, Card } from "@app/ui"; +import type { QuoteResult } from "@portal/api/procurement"; +import { money } from "@portal/components/procurement/format"; +import "@portal/views/Procurement.css"; + +/** + * The stage-specific cards shown inside the procurement takeover modal once a quote exists: the + * issued-quote milestone, the subscription-created payment step, and the live confirmation. Each is + * a pure presentational view driven by props; ProcurementHome owns the state and the actions. + */ + +/** The issued Stripe Quote as a shareable milestone: itemised, with accept / download / edit. */ +export function QuoteMilestoneCard({ + quote, + busy, + downloading, + onAccept, + onDownload, + onEdit, +}: { + quote: QuoteResult; + busy: boolean; + downloading: boolean; + onAccept: () => void; + onDownload: () => void; + onEdit: () => void; +}) { + const { t } = useTranslation(); + return ( + + + {t("portal.procurement.milestone.eyebrow", { + number: quote.quoteNumber, + })} + +

+ {t("portal.procurement.milestone.title")} +

+ {quote.config.businessName && ( +

+ {t("portal.procurement.milestone.preparedFor", { + company: quote.config.businessName, + })} +

+ )} +

+ {t("portal.procurement.milestone.description")} +

+
    + {quote.lineItems.map((li) => ( +
  • + {li.label} + + {li.kind === "INCLUDED" + ? t("portal.procurement.builder.included") + : money(li.amountMinor, quote.currency)} + +
    • + ))} +
+
+ + {money(quote.annualNetMinor, quote.currency)} + {t("portal.procurement.milestone.perYear")} + + + {t("portal.procurement.milestone.tcv", { + value: money(quote.tcvMinor, quote.currency), + })} + +
+
+ + + +
+ + ); +} + +/** The subscription-created step: pay/download the first invoice, or (demo) simulate payment. */ +export function PaymentStageCard({ + invoiceUrl, + invoicePdf, + busy, + onSimulate, +}: { + invoiceUrl?: string | null; + invoicePdf?: string | null; + busy: boolean; + onSimulate: () => void; +}) { + const { t } = useTranslation(); + return ( + +

+ {t("portal.procurement.payment.title")} +

+

+ {t("portal.procurement.payment.description")} +

+ {(invoiceUrl || invoicePdf) && ( +
+ {invoiceUrl && ( + + )} + {invoicePdf && ( + + )} +
+ )} +
+ +
+ + ); +} + +/** The live confirmation once the deal is active. */ +export function LiveStageCard() { + const { t } = useTranslation(); + return ( + + + {t("portal.procurement.live.eyebrow")} + +

+ {t("portal.procurement.live.title")} +

+

+ {t("portal.procurement.live.description")} +

+ + ); +} diff --git a/frontend/editor/src/portal/components/procurement/QuoteBuilder.stories.tsx b/frontend/editor/src/portal/components/procurement/QuoteBuilder.stories.tsx new file mode 100644 index 0000000000..430bcf23cf --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/QuoteBuilder.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { QuoteBuilder } from "@portal/components/procurement/QuoteBuilder"; +import "@portal/views/Procurement.css"; + +/** + * The enterprise quote builder. The "Review quote" step calls the SaaS backend, answered here by + * the `procurementSaas` MSW handler, so all four steps (incl. the itemised quote paper) work in + * Storybook. Click through Volume → Commitment & service → Details → Quote. + */ +const meta: Meta = { + title: "Portal/Procurement/QuoteBuilder", + component: QuoteBuilder, + parameters: { layout: "padded" }, + args: { deployment: "cloud", onGenerate: () => {} }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/frontend/editor/src/portal/components/procurement/QuoteBuilder.tsx b/frontend/editor/src/portal/components/procurement/QuoteBuilder.tsx new file mode 100644 index 0000000000..b180c986bf --- /dev/null +++ b/frontend/editor/src/portal/components/procurement/QuoteBuilder.tsx @@ -0,0 +1,436 @@ +import { useEffect, useState, type ReactNode } from "react"; +import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui"; +import { + DocumentsIcon, + PoliciesIcon, + UsersIcon, +} from "@portal/components/icons"; +import { money } from "@portal/components/procurement/format"; +import { + buildQuote, + type QuoteConfigInput, + type QuoteResult, +} from "@portal/api/procurement"; +import "@portal/views/Procurement.css"; + +const STEPS = ["volume", "plan", "details"] as const; +const TERM_DISCOUNT = [0, 0.05, 0.1, 0.12, 0.15]; // 1..5 years +const SLA_UPLIFT: Record = { + standard: 0, + priority: 0.15, + dedicated: 0.3, +}; + +/** + * The enterprise quote builder — volume → commitment & service → details. A client-side preview + * drives the live footer total; the backend is authoritative. Completing the form generates the + * quote directly (build + issue in one step) — the issued quote is then shown as the milestone, so + * there's no redundant in-builder preview. + */ +export function QuoteBuilder({ + deployment, + initial, + onGenerate, +}: { + deployment: string; + /** Seed the builder from an existing quote's config (re-editing a quote). */ + initial?: QuoteConfigInput; + /** Called with the priced DRAFT quote; the parent issues it as a Stripe Quote. */ + onGenerate: (quote: QuoteResult) => void; +}) { + const { t } = useTranslation(); + const [step, setStep] = useState(0); + const [cfg, setCfg] = useState( + initial ?? { + volume: 1_000_000, + users: 0, + deployment, + termYears: 3, + serviceLevel: "priority", + indemnification: false, + training: false, + qbr: false, + currency: "USD", + businessName: "", + }, + ); + // A seeded quote carries a volume but no user count, so treat it as manually set. + const [manualVolume, setManualVolume] = useState(initial != null); + const [eula, setEula] = useState(initial != null); + const [busy, setBusy] = useState(false); + + function set(k: K, v: QuoteConfigInput[K]) { + setCfg((c) => ({ ...c, [k]: v })); + } + + // Re-editing an existing quote: everything is seeded, so jump to the last step (details) with the + // agreement pre-accepted — one click re-generates, or Back to change a field. No walking from step 1. + // Mount-only: seed the step from `initial` once (deliberately no deps). + useEffect(() => { + if (initial) setStep(STEPS.length - 1); + }, []); + + const preview = previewAnnualMinor(cfg); + const tcvPreview = preview * cfg.termYears + (cfg.training ? 750_000 : 0); + + // Fully filled → price + hand the draft to the parent to issue as a Stripe Quote (which then shows + // as the milestone). No separate in-builder preview step. + async function generate() { + setBusy(true); + try { + onGenerate(await buildQuote(cfg)); + } finally { + setBusy(false); + } + } + + return ( +
+
+

+ {t("portal.procurement.builder.title")} +

+ + {t("portal.procurement.builder.stepOf", { + n: step + 1, + total: STEPS.length, + })} + +
+
+ {STEPS.map((s, i) => ( + + ))} +
+ +
+ {step === 0 && ( + } + title={t("portal.procurement.builder.s1Title")} + sub={t("portal.procurement.builder.s1Sub")} + > +
+ + { + const users = Number(e.target.value); + set("users", users); + if (!manualVolume) set("volume", estimateVolume(users)); + }} + /> + + + { + setManualVolume(true); + set("volume", Number(e.target.value)); + }} + /> + +
+

+ {cfg.users > 0 && !manualVolume + ? t("portal.procurement.builder.volEstimated", { + count: cfg.users, + }) + : cfg.users > 0 + ? t("portal.procurement.builder.volManual") + : t("portal.procurement.builder.volNoUsers")} +

+ + )} + + {step === 1 && ( + } + title={t("portal.procurement.builder.s2Title")} + sub={t("portal.procurement.builder.s2Sub")} + > + +
+ {[1, 2, 3, 4, 5].map((y) => ( + + ))} +
+ {TERM_DISCOUNT[cfg.termYears - 1] > 0 && ( +

+ {t("portal.procurement.builder.termDiscount", { + pct: Math.round(TERM_DISCOUNT[cfg.termYears - 1] * 100), + })} +

+ )} + + + +
+ set("serviceLevel", "standard")} + /> + set("serviceLevel", "priority")} + /> + set("serviceLevel", "dedicated")} + /> +
+ + + +
+ set("indemnification", !cfg.indemnification)} + /> + set("training", !cfg.training)} + /> + set("qbr", !cfg.qbr)} + /> +
+ + + )} + + {step === 2 && ( + } + title={t("portal.procurement.builder.s3Title")} + sub={t("portal.procurement.builder.s3Sub")} + > + + set("businessName", e.target.value)} + /> + +
+ + + +
+ + + )} +
+ +
+ + {t("portal.procurement.builder.running", { + annual: money(preview, cfg.currency), + years: cfg.termYears, + tcv: money(tcvPreview, cfg.currency), + })} + +
+ {step > 0 && ( + + )} + {step === 0 && ( + + )} + {step === 1 && ( + + )} + {step === 2 && ( + + )} +
+
+
+ ); +} + +function Step({ + icon, + title, + sub, + children, +}: { + icon: ReactNode; + title: string; + sub: string; + children: React.ReactNode; +}) { + return ( + <> +
+ + {icon} + +
+
{title}
+
{sub}
+
+
+ {children} + + ); +} + +function Field({ + label, + children, +}: { + label: string; + children: React.ReactNode; +}) { + return ( + + ); +} + +function OptCard({ + on, + title, + sub, + onClick, +}: { + on: boolean; + title: string; + sub: string; + onClick: () => void; +}) { + return ( + + ); +} + +function AddOn({ + on, + title, + sub, + onClick, +}: { + on: boolean; + title: string; + sub: string; + onClick: () => void; +}) { + return ( + + ); +} + +function estimateVolume(users: number): number { + const raw = Math.max(0, users) * 5 * 230 * 1.75; + const stepSize = raw >= 1_000_000 ? 50_000 : raw >= 100_000 ? 25_000 : 5_000; + return Math.round(raw / stepSize) * stepSize; +} + +function previewAnnualMinor(cfg: QuoteConfigInput): number { + const perPdf = cfg.volume >= 5_000_000 ? 3 : cfg.volume >= 1_000_000 ? 4 : 5; + const usage = Math.round(cfg.volume * perPdf); + const withSla = Math.round(usage * (1 + (SLA_UPLIFT[cfg.serviceLevel] ?? 0))); + const withInd = cfg.indemnification ? Math.round(withSla * 1.05) : withSla; + const disc = Math.round( + withInd * TERM_DISCOUNT[Math.min(Math.max(cfg.termYears, 1), 5) - 1], + ); + return withInd - disc + (cfg.qbr ? 800_000 : 0); +} diff --git a/frontend/editor/src/portal/components/procurement/format.ts b/frontend/editor/src/portal/components/procurement/format.ts index bba7e63393..75f5b2fb16 100644 --- a/frontend/editor/src/portal/components/procurement/format.ts +++ b/frontend/editor/src/portal/components/procurement/format.ts @@ -9,6 +9,15 @@ export const USD = new Intl.NumberFormat(undefined, { maximumFractionDigits: 0, }); +/** Format a minor-unit (cents) amount in the given currency, whole units (no decimals). */ +export function money(minor: number, currency: string): string { + return new Intl.NumberFormat(undefined, { + style: "currency", + currency: currency || "USD", + maximumFractionDigits: 0, + }).format(minor / 100); +} + /** Document status → badge tone. Action items lean amber to pull the eye. */ export const STATUS_TONE: Record = { available: "success", diff --git a/frontend/editor/src/portal/mocks/handlers/index.ts b/frontend/editor/src/portal/mocks/handlers/index.ts index bd1d471988..9341ce6304 100644 --- a/frontend/editor/src/portal/mocks/handlers/index.ts +++ b/frontend/editor/src/portal/mocks/handlers/index.ts @@ -8,6 +8,7 @@ import { pipelinesHandlers } from "@portal/mocks/handlers/pipelines"; import { sourcesHandlers } from "@portal/mocks/handlers/sources"; import { infrastructureHandlers } from "@portal/mocks/handlers/infrastructure"; import { procurementHandlers } from "@portal/mocks/handlers/procurement"; +import { procurementSaasHandlers } from "@portal/mocks/handlers/procurementSaas"; import { docsHandlers } from "@portal/mocks/handlers/docs"; import { settingsHandlers } from "@portal/mocks/handlers/settings"; import { usersHandlers } from "@portal/mocks/handlers/users"; @@ -30,6 +31,7 @@ export const handlers = [ ...infrastructureHandlers, ...docsHandlers, ...procurementHandlers, + ...procurementSaasHandlers, ...settingsHandlers, ...usersHandlers, ...agentsHandlers, diff --git a/frontend/editor/src/portal/mocks/handlers/procurementSaas.ts b/frontend/editor/src/portal/mocks/handlers/procurementSaas.ts new file mode 100644 index 0000000000..4a4cc4bcb8 --- /dev/null +++ b/frontend/editor/src/portal/mocks/handlers/procurementSaas.ts @@ -0,0 +1,241 @@ +import { http, HttpResponse } from "msw"; + +/** + * MSW mock for the real SaaS procurement endpoints (`apiClient.saas` → VITE_SAAS_API_URL, which is + * `http://saas.mock` in dev/Storybook). Lets the trial → quote → accept flow run without the Java + * backend (Storybook + mocks-on dev). Pricing mirrors ProcurementPricingService. + */ +const SAAS = "http://saas.mock"; + +const EMPTY = { + dealId: null, + stage: null, + trialStartedAt: null, + trialEndsAt: null, + trialExtensionsUsed: 0, + licensed: false, + latestQuote: null, +}; + +interface Cfg { + volume: number; + serviceLevel: string; + termYears: number; + indemnification: boolean; + training: boolean; + qbr: boolean; + currency: string; + businessName?: string; +} + +let deal: typeof EMPTY | (Record & { latestQuote: unknown }) = + EMPTY; +let seq = 0; + +const SLA: Record = { + standard: 0, + priority: 0.15, + dedicated: 0.3, +}; +const TERM = [0, 0.05, 0.1, 0.12, 0.15]; + +function priceQuote(cfg: Cfg) { + const perPdf = cfg.volume >= 5_000_000 ? 3 : cfg.volume >= 1_000_000 ? 4 : 5; + const usage = Math.round(cfg.volume * perPdf); + const withSla = Math.round(usage * (1 + (SLA[cfg.serviceLevel] ?? 0))); + const withInd = cfg.indemnification ? Math.round(withSla * 1.05) : withSla; + const disc = Math.round( + withInd * TERM[Math.min(Math.max(cfg.termYears, 1), 5) - 1], + ); + const qbr = cfg.qbr ? 800_000 : 0; + const training = cfg.training ? 750_000 : 0; + const annualNetMinor = withInd - disc + qbr; + const tcvMinor = annualNetMinor * cfg.termYears + training; + + type Kind = "RECURRING" | "ONE_TIME" | "DISCOUNT" | "INCLUDED"; + const lines: { + key: string; + label: string; + kind: Kind; + amountMinor: number; + }[] = [ + { + key: "usage", + label: "PDF processing", + kind: "RECURRING", + amountMinor: usage, + }, + { + key: "seats", + label: "Unlimited users + SSO / SCIM / RBAC", + kind: "INCLUDED", + amountMinor: 0, + }, + ]; + if (withSla !== usage) + lines.push({ + key: "service-level", + label: + cfg.serviceLevel === "dedicated" + ? "Dedicated service level" + : "Priority service level", + kind: "RECURRING", + amountMinor: withSla - usage, + }); + if (withInd !== withSla) + lines.push({ + key: "indemnification", + label: "IP indemnification", + kind: "RECURRING", + amountMinor: withInd - withSla, + }); + if (qbr > 0) + lines.push({ + key: "qbr", + label: "Quarterly business reviews", + kind: "RECURRING", + amountMinor: qbr, + }); + if (disc > 0) + lines.push({ + key: "multi-year", + label: `${cfg.termYears}-year commitment`, + kind: "DISCOUNT", + amountMinor: -disc, + }); + if (training > 0) + lines.push({ + key: "training", + label: "Onboarding & training", + kind: "ONE_TIME", + amountMinor: training, + }); + + seq += 1; + return { + quoteId: seq, + quoteNumber: `QT-DEMO-${String(seq).padStart(4, "0")}`, + status: "draft", + currency: cfg.currency || "USD", + annualNetMinor, + tcvMinor, + lineItems: lines, + validUntil: "2026-07-31", + stripeQuoteId: null, + invoiceUrl: null, + config: { + volume: cfg.volume, + users: 0, + deployment: "cloud", + termYears: cfg.termYears, + serviceLevel: cfg.serviceLevel, + indemnification: cfg.indemnification, + training: cfg.training, + qbr: cfg.qbr, + currency: cfg.currency || "USD", + businessName: cfg.businessName ?? "", + }, + }; +} + +export function resetProcurementSaasStore() { + deal = EMPTY; + seq = 0; +} + +export const procurementSaasHandlers = [ + http.get(`${SAAS}/api/v1/procurement`, () => HttpResponse.json(deal)), + http.post(`${SAAS}/api/v1/procurement/trial/start`, () => { + const now = Date.now(); + deal = { + dealId: 1, + stage: "trial", + trialStartedAt: new Date(now).toISOString(), + trialEndsAt: new Date(now + 14 * 86_400_000).toISOString(), + trialExtensionsUsed: 0, + licensed: true, + latestQuote: null, + }; + return HttpResponse.json(deal); + }), + http.post(`${SAAS}/api/v1/procurement/quote`, async ({ request }) => { + const cfg = (await request.json()) as Cfg; + const quote = priceQuote(cfg); + const d = ( + deal.dealId ? deal : { dealId: 1, trialExtensionsUsed: 0 } + ) as Record; + deal = { + ...d, + stage: "quote", + licensed: true, + latestQuote: quote, + } as never; + return HttpResponse.json(quote); + }), + http.post(`${SAAS}/api/v1/procurement/trial/extend`, () => { + const d = deal as Record; + if (d.dealId) { + const base = d.trialEndsAt + ? Date.parse(d.trialEndsAt as string) + : Date.now(); + d.trialEndsAt = new Date(base + 7 * 86_400_000).toISOString(); + d.trialExtensionsUsed = ((d.trialExtensionsUsed as number) ?? 0) + 1; + } + return HttpResponse.json(deal); + }), + http.post(`${SAAS}/api/v1/procurement/agreement`, () => { + (deal as Record).stage = "security"; + return HttpResponse.json(deal); + }), + http.post(`${SAAS}/api/v1/procurement/go-live`, () => { + const d = deal as Record; + if (d.dealId) { + d.stage = "active"; + d.licensed = true; + } + return HttpResponse.json(deal); + }), + http.post(`${SAAS}/api/v1/procurement/reset`, () => { + resetProcurementSaasStore(); + return HttpResponse.json(EMPTY); + }), + + // Stripe Quote edge functions (supabase.functions.invoke → ${url}/functions/v1/{name}). + http.post(`${SAAS}/functions/v1/issue-procurement-quote`, () => { + const q = (deal as { latestQuote: Record | null }) + .latestQuote; + if (q) { + q.status = "sent"; + q.stripeQuoteId = `qt_mock_${q.quoteId}`; + } + return HttpResponse.json(q); + }), + http.post(`${SAAS}/functions/v1/accept-procurement-quote`, () => { + const q = (deal as { latestQuote: Record | null }) + .latestQuote; + const invoiceUrl = "https://invoice.stripe.com/i/mock_procurement"; + if (q) { + q.status = "accepted"; + q.invoiceUrl = invoiceUrl; + (deal as Record).stage = "procurement"; + } + return HttpResponse.json({ + status: "accepted", + subscriptionId: "sub_mock_procurement", + invoiceUrl, + invoicePdf: "https://invoice.stripe.com/i/mock_procurement/pdf", + }); + }), + http.post(`${SAAS}/functions/v1/get-procurement-quote-pdf`, () => { + // A minimal valid PDF so the download opens something in Storybook / mock dev. + const pdf = `%PDF-1.1 +1 0 obj<>endobj +2 0 obj<>endobj +3 0 obj<>endobj +trailer<> +%%EOF`; + return new HttpResponse(pdf, { + headers: { "Content-Type": "application/pdf" }, + }); + }), +]; diff --git a/frontend/editor/src/portal/views/Home.tsx b/frontend/editor/src/portal/views/Home.tsx index b9478ead32..92d7f69318 100644 --- a/frontend/editor/src/portal/views/Home.tsx +++ b/frontend/editor/src/portal/views/Home.tsx @@ -28,6 +28,7 @@ import { UsageAreaChart } from "@portal/components/UsageAreaChart"; import { RecentActivity } from "@portal/components/RecentActivity"; import { SingleOpRunner } from "@portal/components/SingleOpRunner"; import { ProcessingStatusStrip } from "@portal/components/ProcessingStatusStrip"; +import { ProcurementHome } from "@portal/components/procurement/ProcurementHome"; import { PolicySummary } from "@portal/components/PolicySummary"; import { PipelineForkWizard } from "@portal/components/PipelineForkWizard"; import "@portal/views/Home.css"; @@ -538,6 +539,8 @@ export function Home() { setRunnerOpen(true)} /> + + {tier === "free" && ( <> diff --git a/frontend/editor/src/portal/views/Procurement.css b/frontend/editor/src/portal/views/Procurement.css index 90da816a53..8294709e5d 100644 --- a/frontend/editor/src/portal/views/Procurement.css +++ b/frontend/editor/src/portal/views/Procurement.css @@ -451,3 +451,1010 @@ overflow-x: auto; } } + +/* ── Enterprise upsell CTA (Home / Usage on-ramp) ─────────────────────────── */ +.portal-proc__upsell { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} +.portal-proc__upsell-badge { + display: inline-block; + font-size: 0.625rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--color-primary, #2383e2); + background: var(--color-primary-light, #eaf2fb); + padding: 0.15rem 0.5rem; + border-radius: 0.375rem; + margin-bottom: 0.4rem; +} +.portal-proc__upsell-copy { + margin: 0; + font-size: 0.8125rem; + line-height: 1.45; + color: var(--color-text-3); + max-width: 44rem; +} +.portal-proc__upsell-copy strong { + color: var(--color-text-1); +} + +/* ── Quote builder ────────────────────────────────────────────────────────── */ +.portal-proc__builder-head { + display: flex; + align-items: baseline; + justify-content: space-between; + margin-bottom: 1rem; +} +.portal-proc__builder-title { + margin: 0; + font-size: 1rem; + font-weight: 650; + color: var(--color-text-1); +} +.portal-proc__builder-step { + font-size: 0.75rem; + color: var(--color-text-5); +} +.portal-proc__builder-body { + display: flex; + flex-direction: column; + gap: 0.85rem; +} +.portal-proc__field { + display: flex; + flex-direction: column; + gap: 0.3rem; + font-size: 0.8125rem; + color: var(--color-text-3); +} +.portal-proc__field input, +.portal-proc__field select { + padding: 0.45rem 0.6rem; + border: 1px solid var(--color-border, #eae8e3); + border-radius: 0.5rem; + font-size: 0.875rem; + background: var(--color-bg-elevated, #fff); + color: var(--color-text-1); +} +.portal-proc__builder-addons { + display: flex; + flex-direction: column; + gap: 0.4rem; + font-size: 0.8125rem; + color: var(--color-text-2); +} +.portal-proc__builder-addons label { + display: flex; + align-items: center; + gap: 0.5rem; +} +.portal-proc__builder-actions { + display: flex; + justify-content: flex-end; + gap: 0.6rem; + margin-top: 0.5rem; +} +.portal-proc__quote-head { + display: flex; + align-items: baseline; + justify-content: space-between; + border-bottom: 1px solid var(--color-border, #eae8e3); + padding-bottom: 0.5rem; +} +.portal-proc__quote-number { + font-weight: 650; + color: var(--color-text-1); +} +.portal-proc__quote-valid { + font-size: 0.75rem; + color: var(--color-text-5); +} +.portal-proc__quote-lines { + list-style: none; + margin: 0; + padding: 0; +} +.portal-proc__quote-lines li { + display: flex; + justify-content: space-between; + padding: 0.4rem 0; + font-size: 0.8125rem; + color: var(--color-text-2); + border-bottom: 1px solid var(--color-border-light, #f0eee9); +} +.portal-proc__quote-lines li[data-kind="DISCOUNT"] { + color: var(--color-success, #0f7b6c); +} +.portal-proc__quote-total { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 0.6rem 0 0.2rem; + font-size: 0.9375rem; +} +.portal-proc__quote-total strong { + font-size: 1.25rem; + color: var(--color-text-1); +} +.portal-proc__quote-tcv { + font-size: 0.75rem; + color: var(--color-text-5); +} + +/* ══ Quote builder — copied from the marketing prototype (tight density) ═════ */ +.portal-qb { + background: #ffffff; + border: 1px solid #e3e1dc; + border-radius: 14px; + box-shadow: inset 0 0 0 1px #eae8e3; + overflow: hidden; +} +.portal-qb__head { + display: flex; + align-items: center; + justify-content: space-between; + padding: 18px 24px 14px; + border-bottom: 1px solid #f0eee9; + background: linear-gradient( + 180deg, + rgba(35, 131, 226, 0.055) 0%, + transparent 100% + ); +} +.portal-qb__title { + margin: 0; + font-size: 16px; + font-weight: 700; + color: #37352f; +} +.portal-qb__stepchip { + font-size: 11px; + font-weight: 700; + color: #9b9a97; + background: #f5f4f1; + padding: 3px 10px; + border-radius: 999px; +} +.portal-qb__progress { + display: flex; + gap: 6px; + padding: 12px 24px 0; +} +.portal-qb__progress span { + flex: 1; + height: 6px; + border-radius: 999px; + background: #f0eee9; + transition: background 0.3s; +} +.portal-qb__progress span[data-on] { + background: #2383e2; +} +.portal-qb__body { + padding: 20px 24px; + max-height: 56vh; + overflow-y: auto; +} +.portal-qb__intro { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 18px; +} +.portal-qb__intro-icon { + width: 38px; + height: 38px; + border-radius: 10px; + background: #eaf2fb; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + flex-shrink: 0; +} +.portal-qb__intro-title { + font-size: 15px; + font-weight: 700; + color: #37352f; +} +.portal-qb__intro-sub { + font-size: 12.5px; + color: #9b9a97; + margin-top: 1px; +} +.portal-qb__field { + display: block; + margin-bottom: 18px; +} +.portal-qb__field-label { + display: block; + font-size: 12px; + font-weight: 600; + color: #787774; + margin-bottom: 6px; +} +.portal-qb__field input, +.portal-qb__field select { + width: 100%; + box-sizing: border-box; + padding: 9px 11px; + font-size: 13.5px; + border-radius: 8px; + border: 1px solid #e3e1dc; + font-family: inherit; + outline: none; + background: #fff; + color: #37352f; +} +.portal-qb__row { + display: flex; + gap: 14px; + flex-wrap: wrap; +} +.portal-qb__row .portal-qb__field { + flex: 1; + min-width: 190px; +} +.portal-qb__hint { + margin: 7px 0 0; + font-size: 11.5px; + color: #9b9a97; + line-height: 1.4; +} +.portal-qb__pills { + display: flex; + gap: 8px; + flex-wrap: wrap; +} +.portal-qb__pills button { + padding: 8px 16px; + font-size: 13px; + font-weight: 600; + border-radius: 8px; + border: 1px solid #e3e1dc; + background: #fff; + color: #37352f; + cursor: pointer; +} +.portal-qb__pills button[data-on] { + background: #2383e2; + border-color: #2383e2; + color: #fff; +} +.portal-qb__discount { + margin: 6px 0 0; + font-size: 11.5px; + color: #0f7b6c; +} +.portal-qb__opts { + display: flex; + gap: 10px; + flex-wrap: wrap; +} +.portal-qb__opt { + text-align: left; + flex: 1; + min-width: 150px; + padding: 12px 14px; + border-radius: 9px; + border: 1px solid #e3e1dc; + background: #fff; + cursor: pointer; + display: flex; + flex-direction: column; + gap: 2px; +} +.portal-qb__opt[data-on] { + border-color: #2383e2; + background: #eaf2fb; +} +.portal-qb__opt-title { + font-size: 13px; + font-weight: 700; + color: #37352f; +} +.portal-qb__opt[data-on] .portal-qb__opt-title { + color: #1b6ec2; +} +.portal-qb__opt-sub { + font-size: 11.5px; + color: #9b9a97; + line-height: 1.4; +} +.portal-qb__addons { + display: flex; + flex-direction: column; + gap: 8px; +} +.portal-qb__addon { + display: flex; + align-items: flex-start; + gap: 11px; + padding: 11px 13px; + border-radius: 9px; + border: 1px solid #e3e1dc; + background: #fff; + cursor: pointer; + text-align: left; +} +.portal-qb__addon[data-on] { + border-color: #2383e2; + background: #eaf2fb; +} +.portal-qb__addon-box { + width: 18px; + height: 18px; + flex-shrink: 0; + border-radius: 5px; + border: 1px solid #d3d1cb; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + color: transparent; + background: #fff; +} +.portal-qb__addon[data-on] .portal-qb__addon-box { + background: #2383e2; + border-color: #2383e2; + color: #fff; +} +.portal-qb__addon-title { + display: block; + font-size: 13px; + font-weight: 600; + color: #37352f; +} +.portal-qb__addon-sub { + display: block; + font-size: 11.5px; + color: #9b9a97; + margin-top: 1px; +} +.portal-qb__eula { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 12px; + border-radius: 9px; + border: 1px solid #f0eee9; + background: #f5f4f1; + font-size: 12.5px; + color: #37352f; + line-height: 1.5; + cursor: pointer; +} +.portal-qb__foot { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + padding: 14px 24px; + border-top: 1px solid #f0eee9; + flex-wrap: wrap; +} +.portal-qb__running { + font-size: 11.5px; + color: #9b9a97; +} +.portal-qb__foot-btns { + display: flex; + gap: 10px; +} +/* Step 4 — the itemised quote paper */ +.portal-qb__papertray { + background: #f5f4f1; + padding: 18px; + max-height: 56vh; + overflow-y: auto; + margin: -20px -24px; +} +.portal-qb__paper { + background: #fff; + border: 1px solid #f0eee9; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); +} +.portal-qb__paper-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + padding: 20px 24px; + border-bottom: 1px solid #f0eee9; +} +.portal-qb__paper-brand { + font-size: 13.5px; + font-weight: 800; + color: #37352f; +} +.portal-qb__paper-eyebrow { + font-size: 11px; + color: #9b9a97; +} +.portal-qb__paper-meta { + text-align: right; +} +.portal-qb__quote-number { + font-size: 12.5px; + font-weight: 700; + color: #37352f; +} +.portal-qb__paper-meta div:not(.portal-qb__quote-number) { + font-size: 11px; + color: #9b9a97; +} +.portal-qb__paper-for { + padding: 18px 24px 0; +} +.portal-qb__paper-company { + font-size: 14px; + font-weight: 700; + color: #37352f; +} +.portal-qb__lines { + list-style: none; + margin: 0; + padding: 12px 24px 0; +} +.portal-qb__lines li { + display: flex; + justify-content: space-between; + gap: 14px; + padding: 10px 0; + border-bottom: 1px solid #f0eee9; + font-size: 13px; + font-weight: 600; + color: #37352f; +} +.portal-qb__lines li[data-kind="DISCOUNT"] { + color: #0f7b6c; +} +.portal-qb__lines li[data-kind="INCLUDED"] span:last-child { + color: #9b9a97; + font-weight: 500; +} +.portal-qb__total { + display: flex; + align-items: center; + justify-content: space-between; + margin: 16px 24px 24px; + padding: 16px 18px; + border-radius: 10px; + background: #eaf2fb; + border: 1px solid #b8d5f2; +} +.portal-qb__total-label { + font-size: 13px; + font-weight: 700; + color: #37352f; +} +.portal-qb__total-tcv { + font-size: 11.5px; + color: #787774; + margin-top: 2px; +} +.portal-qb__total-num { + text-align: right; +} +.portal-qb__total-num strong { + display: block; + font-size: 23px; + font-weight: 800; + color: #37352f; + line-height: 1; +} +.portal-qb__total-num span { + font-size: 11px; + color: #9b9a97; + margin-top: 3px; +} + +/* ── Enterprise upsell text wrapper (Home on-ramp) ────────────────────────── */ +.portal-proc__upsell-text { + flex: 1 1 20rem; +} + +/* ── Deal-status hero (Home, active deal) ─────────────────────────────────── */ +.portal-hero { + border: 1px solid var(--color-border); + border-radius: 12px; + padding: 1.1rem 1.25rem; + background: + radial-gradient( + 120% 140% at 100% 0%, + rgba(124, 58, 237, 0.08), + transparent 55% + ), + var(--color-surface); + display: flex; + flex-direction: column; + gap: 1rem; +} +.portal-hero__top { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} +.portal-hero__eyebrow { + display: block; + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--color-primary, #2383e2); +} +.portal-hero__company { + display: block; + font-size: 1.0625rem; + font-weight: 650; + color: var(--color-text-1); + margin-top: 0.2rem; +} +.portal-hero__chips { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; +} +.portal-hero__chip { + font-size: 0.6875rem; + font-weight: 600; + color: var(--color-text-3); + background: var(--color-border-light); + border-radius: 999px; + padding: 0.2rem 0.6rem; +} +.portal-hero__stepper { + overflow-x: auto; +} +.portal-hero__next { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + flex-wrap: wrap; + padding-top: 0.85rem; + border-top: 1px solid var(--color-border-light); +} +.portal-hero__next-label { + display: inline-flex; + align-items: center; + gap: 0.45rem; + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-text-2); +} +.portal-hero__next-dot { + width: 0.5rem; + height: 0.5rem; + border-radius: 999px; + background: var(--color-primary, #2383e2); + box-shadow: 0 0 0 3px rgba(35, 131, 226, 0.18); +} + +/* ── Full-screen takeover modal (procurement flow) ────────────────────────── */ +.portal-procmodal { + position: fixed; + inset: 0; + z-index: 1000; + display: flex; + align-items: flex-start; + justify-content: center; + padding: clamp(0.5rem, 4vh, 3rem) 1rem; + overflow-y: auto; + background: rgba(15, 23, 42, 0.55); + backdrop-filter: blur(6px) saturate(160%); + -webkit-backdrop-filter: blur(6px) saturate(160%); + animation: portal-procmodal-fade 0.15s ease-out; +} +@keyframes portal-procmodal-fade { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +.portal-procmodal__panel { + position: relative; + width: 100%; + max-width: 62rem; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 14px; + box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28); + padding: 1.5rem 1.5rem 1.75rem; +} +.portal-procmodal__close { + position: absolute; + top: 0.85rem; + right: 0.85rem; + border: none; + background: var(--color-border-light); + color: var(--color-text-3); + width: 1.9rem; + height: 1.9rem; + border-radius: 8px; + font-size: 0.85rem; + cursor: pointer; +} +.portal-procmodal__close:hover { + background: var(--color-border); + color: var(--color-text-1); +} +.portal-procmodal__header { + margin-bottom: 1.25rem; + padding-right: 2.5rem; +} +.portal-procmodal__title { + margin: 0; + font-size: 1.35rem; + font-weight: 700; + color: var(--color-text-1); +} +.portal-procmodal__sub { + margin: 0.3rem 0 0; + font-size: 0.875rem; + color: var(--color-text-3); +} +.portal-procmodal__body { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.portal-proc__modal-stepper { + overflow-x: auto; +} +.portal-proc__payment-actions { + display: flex; + gap: 0.6rem; + flex-wrap: wrap; + margin-top: 1rem; +} +.portal-proc__milestone-for { + margin: 0.15rem 0 0; + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-text-2); +} +.portal-proc__milestone-lines { + margin: 0.85rem 0 0.5rem; +} +.portal-proc__milestone-totals { + display: flex; + align-items: baseline; + gap: 1rem; + flex-wrap: wrap; + margin: 0.75rem 0 0.25rem; +} +.portal-proc__milestone-annual { + font-size: 1.75rem; + font-weight: 700; + color: var(--color-text-1); +} +.portal-proc__milestone-annual small { + font-size: 0.8125rem; + font-weight: 500; + color: var(--color-text-4); +} +.portal-proc__milestone-tcv { + font-size: 0.8125rem; + color: var(--color-text-3); +} + +/* Hero next-step action row (primary CTA + optional extend-trial). */ +.portal-hero__next-actions { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} + +/* Hero quick-action chips (clickable pills next to the company name). */ +.portal-hero__chip--action { + border: 1px solid var(--color-border); + cursor: pointer; + transition: + background 0.12s, + box-shadow 0.12s, + transform 0.12s; +} +.portal-hero__chip--action:hover { + background: var(--color-surface); + box-shadow: 0 2px 5px rgba(15, 23, 42, 0.1); + transform: translateY(-1px); +} + +/* Hero rollout checklist (trial): the "do this now" setup steps. */ +.portal-hero__checklist { + list-style: none; + margin: 0; + padding: 0; + border-top: 1px solid var(--color-border-light); +} +.portal-hero__checklist li { + border-bottom: 1px solid var(--color-border-light); +} +.portal-hero__checklist button { + display: flex; + align-items: center; + gap: 0.85rem; + width: 100%; + padding: 0.7rem 0.25rem; + background: none; + border: none; + cursor: pointer; + text-align: left; +} +.portal-hero__checklist button:hover { + background: var(--color-bg-hover, var(--color-border-light)); +} +.portal-hero__check-dot { + width: 0.5rem; + height: 0.5rem; + border-radius: 999px; + background: var(--color-border); + flex-shrink: 0; +} +.portal-hero__check-text { + flex: 1; + min-width: 0; +} +.portal-hero__check-title { + display: block; + font-size: 0.85rem; + font-weight: 600; + color: var(--color-text-1); +} +.portal-hero__check-sub { + display: block; + font-size: 0.75rem; + color: var(--color-text-4); + margin-top: 0.05rem; +} +.portal-hero__check-pill { + font-size: 0.6875rem; + font-weight: 600; + color: var(--color-text-5); + background: var(--color-border-light); + border-radius: 999px; + padding: 0.15rem 0.55rem; + flex-shrink: 0; +} + +/* ── Side dialogs (Key documents / Schedule a call / Trial) ───────────────── */ +.portal-sidemodal { + position: fixed; + inset: 0; + z-index: 1100; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + overflow-y: auto; + background: rgba(15, 23, 42, 0.55); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + animation: portal-procmodal-fade 0.15s ease-out; +} +.portal-sidemodal__panel { + position: relative; + width: 100%; + max-width: 30rem; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 14px; + box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28); + padding: 1.35rem 1.4rem 1.4rem; + max-height: 86vh; + overflow-y: auto; +} +.portal-sidemodal__header { + margin-bottom: 1rem; + padding-right: 2rem; +} +.portal-sidemodal__title { + margin: 0; + font-size: 1.05rem; + font-weight: 700; + color: var(--color-text-1); +} +.portal-sidemodal__sub { + margin: 0.25rem 0 0; + font-size: 0.8125rem; + color: var(--color-text-4); + line-height: 1.5; +} +.portal-sidemodal__text { + margin: 0; + font-size: 0.8125rem; + color: var(--color-text-3); + line-height: 1.55; +} +.portal-sidemodal__footer { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-top: 1.1rem; + padding-top: 0.9rem; + border-top: 1px solid var(--color-border-light); +} +.portal-sidemodal__ghost { + border: none; + background: none; + font-size: 0.8125rem; + color: var(--color-text-4); + cursor: pointer; +} +.portal-sidemodal__ghost:hover:not(:disabled) { + color: var(--color-text-2); +} + +/* Key documents ledger. */ +.portal-docs__group + .portal-docs__group { + margin-top: 1rem; +} +.portal-docs__group-title { + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-text-5); + margin-bottom: 0.4rem; +} +.portal-docs__list { + list-style: none; + margin: 0; + padding: 0; +} +.portal-docs__row { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.55rem 0; + border-top: 1px solid var(--color-border-light); +} +.portal-docs__row-text { + flex: 1; + min-width: 0; +} +.portal-docs__row-name { + display: block; + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-text-1); +} +.portal-docs__row-sub { + display: block; + font-size: 0.72rem; + color: var(--color-text-4); + margin-top: 0.05rem; +} +.portal-docs__row-action { + font-size: 0.6875rem; + font-weight: 600; + border-radius: 999px; + padding: 0.2rem 0.6rem; + flex-shrink: 0; + color: var(--color-text-3); + background: var(--color-border-light); +} +.portal-docs__row-action[data-status="action"] { + color: var(--color-primary, #2383e2); + background: var(--color-primary-light, #eaf2fb); +} +.portal-docs__row-action[data-status="request"] { + color: var(--color-text-5); +} + +/* Solutions-engineer + time slots (Schedule a call). */ +.portal-se { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 1rem; +} +.portal-se__avatar { + width: 2.4rem; + height: 2.4rem; + border-radius: 999px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + font-weight: 700; + color: var(--color-primary, #2383e2); + background: var(--color-primary-light, #eaf2fb); + flex-shrink: 0; +} +.portal-se__name { + font-size: 0.875rem; + font-weight: 650; + color: var(--color-text-1); +} +.portal-se__role { + font-size: 0.75rem; + color: var(--color-text-4); +} +.portal-slots { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5rem; +} +.portal-slots__slot { + padding: 0.6rem 0.75rem; + font-size: 0.8125rem; + font-weight: 600; + color: var(--color-text-2); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: 9px; + cursor: pointer; +} +.portal-slots__slot:hover { + border-color: var(--color-primary, #2383e2); + color: var(--color-primary, #2383e2); +} + +/* ── Agreement (security) step ────────────────────────────────────────────── */ +.portal-agreement__doc { + margin: 1rem 0; + max-height: 22rem; + overflow-y: auto; + padding: 1rem 1.1rem; + border: 1px solid var(--color-border); + border-radius: 10px; + background: var(--color-bg-subtle, var(--color-bg)); + font-size: 0.8125rem; + line-height: 1.55; + color: var(--color-text-3); +} +.portal-agreement__doc h4 { + margin: 1rem 0 0.35rem; + font-size: 0.8125rem; + font-weight: 650; + color: var(--color-text-1); +} +.portal-agreement__doc h4:first-child { + margin-top: 0; +} +.portal-agreement__doc p { + margin: 0 0 0.5rem; +} +.portal-agreement__doc strong { + color: var(--color-text-1); +} +.portal-agreement__accept { + margin-top: 0.25rem; +} +.portal-agreement__lines { + margin: 0.4rem 0 0.6rem; +} +.portal-proc__reset { + display: flex; + justify-content: center; + padding-top: 0.5rem; +} +.portal-proc__reset button { + border: none; + background: none; + font-size: 0.75rem; + color: var(--color-text-5); + cursor: pointer; + text-decoration: underline; +} +.portal-proc__reset button:hover:not(:disabled) { + color: var(--color-text-3); +} +.portal-proc__reset button:disabled { + opacity: 0.5; + cursor: default; +} diff --git a/frontend/editor/src/portal/views/Procurement.tsx b/frontend/editor/src/portal/views/Procurement.tsx index f4fa25178a..1f6e2329a9 100644 --- a/frontend/editor/src/portal/views/Procurement.tsx +++ b/frontend/editor/src/portal/views/Procurement.tsx @@ -1,111 +1,15 @@ -import { useEffect, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Card, Skeleton, StatusBadge } from "@app/ui"; -import { useTier } from "@portal/contexts/TierContext"; -import { useAsync } from "@portal/hooks/useAsync"; -import { - advanceStage, - fetchProcurement, - type DealStage, - type LedgerDoc, - type ProcurementResponse, -} from "@portal/api/procurement"; -import { DealJourney } from "@portal/components/procurement/DealJourney"; -import { DocumentLedger } from "@portal/components/procurement/DocumentLedger"; -import { ActionModal } from "@portal/components/procurement/ActionModal"; -import { LockedState } from "@portal/components/procurement/LockedState"; +import { ProcurementHome } from "@portal/components/procurement/ProcurementHome"; import "@portal/views/Procurement.css"; /** - * Procurement: the enterprise commercial journey (trial to live) plus the - * document ledger. Enterprise-only: free/pro buyers see a locked upgrade state. + * /procurement — procurement is no longer a nav tab; it lives on Home as the deal-status hero. + * This route is kept for deep links (and the Usage "Build your quote" CTA): it renders the same + * surface, opening the takeover modal once a deal is underway. */ export function Procurement() { - const { t } = useTranslation(); - const { tier } = useTier(); - const [activeDoc, setActiveDoc] = useState(null); - const [advancing, setAdvancing] = useState(false); - - const state = useAsync( - () => fetchProcurement(tier), - [tier], - ); - - // Write actions return the new canonical state; we hold it here so the - // journey reflects every action immediately. Cleared when the tier (and so - // the deal) changes, falling back to whatever the GET loaded. - const [applied, setApplied] = useState(null); - useEffect(() => setApplied(null), [tier]); - const data = applied ?? (state.loading ? null : state.data); - - async function onAdvance(stage: DealStage) { - setAdvancing(true); - try { - setApplied(await advanceStage(stage)); - } finally { - setAdvancing(false); - } - } - return (
-
-
-

- {t("portal.procurement.title")} -

-

- {t("portal.procurement.subtitle")} -

-
- - {t("portal.procurement.enterpriseBadge")} - -
- - {state.loading && ( - - - - - )} - - {data && !data.unlocked && ( - { - // TODO(backend): POST /v1/procurement/sales-contact, for now this - // is the sidebar's upgrade path; hand off to the account team. - }} - /> - )} - - {data && data.unlocked && data.deal && ( - <> - - - - )} - - setActiveDoc(null)} - onDone={(next) => { - setApplied(next); - setActiveDoc(null); - }} - /> +
); } From be97268a7ccb24691cdf8e042a7589d8c68d5d25 Mon Sep 17 00:00:00 2001 From: Reece Browne <74901996+reecebrowne@users.noreply.github.com> Date: Tue, 7 Jul 2026 15:29:55 +0100 Subject: [PATCH 07/27] SUI - setting up mantine backed SUI components (#6890) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Converts SUI's existing Select and Slider to Mantine-backed implementations, and adds three new Mantine-backed SUI components: MultiSelect, NumberInput, ColorInput. All five components follow the same contract as the rest of the SUI catalogue: - Imported from `@app/ui` — Mantine is an implementation detail - Explicit prop allowlists: appearance props (color, variant, radius, classNames, styles) are locked internally to SUI tokens; only behavioural props are exposed - Labels and error messages stripped from the interface — callers use `` for both. The components take an `invalid` flag that applies error styling only; Mantine never renders its own message element, so the text can't appear twice - `aria-label` / `aria-invalid` / `aria-describedby` and `FormField`'s injected `required` are forwarded, so the injected accessibility wiring reaches the underlying input. Mantine drops some of this wiring internally (`aria-describedby` on inputs, all aria props on Slider's thumb, `required` on MultiSelect's field), so `ariaForwarding.ts` re-applies it to the DOM node and `ariaForwarding.test.tsx` locks the contract in - Typed escape hatches (`comboboxProps`, `popoverProps`, `rightSection`) documented for the z-index-in-modal use case **Select** — rebuilt from native `` to Mantine Slider. Gains accessible keyboard navigation and `marks` support. **MultiSelect, NumberInput, ColorInput** — new components. The behaviour (multi-select combobox, number stepper, colour picker) is too complex to hand-build correctly; Mantine provides it for free behind a locked SUI interface. Also wires `suiCssVariablesResolver` into the Storybook `MantineProvider` so Mantine combobox/popover dropdowns follow the SUI palette in dark mode, and adds `"neutral"` accent variant to `IconBadge`. ## Usage ```tsx import { Select, Slider, MultiSelect, NumberInput, ColorInput } from "@app/ui"; import { FormField } from "@app/ui/FormField"; // Select — onChange receives string | null, not a DOM event onRegion(e.target.value)} + onChange={(value) => onRegion(value ?? "")} options={regionOptions} /> @@ -750,8 +750,8 @@ function AuthenticationPanel({ > setRetention(e.target.value as RetentionWindow)} + onChange={(value) => + setRetention((value ?? "") as RetentionWindow) + } /> diff --git a/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx b/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx index 1d35e8d0f7..5040a97ac0 100644 --- a/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx +++ b/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx @@ -362,8 +362,8 @@ export function PipelineComposer({ - setRunOn(e.target.value as "upload" | "export") + onChange={(value) => + setRunOn((value ?? "upload") as "upload" | "export") } options={[ { @@ -474,8 +474,10 @@ function PolicySetupWizardBody({ + onChange={(value) => setOutputNamePosition( - e.target.value as "prefix" | "suffix" | "auto-number", + (value ?? "suffix") as + | "prefix" + | "suffix" + | "auto-number", ) } options={[ diff --git a/frontend/editor/src/portal/components/sources/ConnectWizard.test.tsx b/frontend/editor/src/portal/components/sources/ConnectWizard.test.tsx index c6874effcd..d354da1d40 100644 --- a/frontend/editor/src/portal/components/sources/ConnectWizard.test.tsx +++ b/frontend/editor/src/portal/components/sources/ConnectWizard.test.tsx @@ -1,8 +1,13 @@ import { beforeEach, describe, expect, it, vi } from "vitest"; import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { MantineProvider } from "@mantine/core"; import { HttpError } from "@portal/api/http"; import { ConnectWizard } from "@portal/components/sources/ConnectWizard"; +function renderWithMantine(ui: React.ReactElement) { + return render({ui}); +} + // Deterministic i18n: keys come back verbatim so the test never waits on the // async TOML backend. vi.mock("react-i18next", () => ({ @@ -41,7 +46,9 @@ describe("ConnectWizard", () => { const onCreated = vi.fn(); const onClose = vi.fn(); - render(); + renderWithMantine( + , + ); stepToReview(); @@ -66,7 +73,7 @@ describe("ConnectWizard", () => { createSource.mockResolvedValue({ id: "s1" }); const onCreated = vi.fn(); - render( + renderWithMantine( { }), ); - render(); + renderWithMantine( + , + ); stepToReview(); fireEvent.click(screen.getByText("portal.sources.actions.connectSource")); diff --git a/frontend/editor/src/portal/components/sources/ConnectWizard.tsx b/frontend/editor/src/portal/components/sources/ConnectWizard.tsx index 8683873316..2c6e9263b7 100644 --- a/frontend/editor/src/portal/components/sources/ConnectWizard.tsx +++ b/frontend/editor/src/portal/components/sources/ConnectWizard.tsx @@ -245,8 +245,8 @@ export function ConnectWizard({ value: o.value, label: t(o.labelKey), }))} - onChange={(e) => - setOptions((o) => ({ ...o, [field.key]: e.target.value })) + onChange={(value) => + setOptions((o) => ({ ...o, [field.key]: value ?? "" })) } /> ) : ( diff --git a/frontend/editor/src/portal/components/users/InviteMemberModal.tsx b/frontend/editor/src/portal/components/users/InviteMemberModal.tsx index 5031b6427c..ad98077ba4 100644 --- a/frontend/editor/src/portal/components/users/InviteMemberModal.tsx +++ b/frontend/editor/src/portal/components/users/InviteMemberModal.tsx @@ -91,7 +91,7 @@ export function InviteMemberModal({ open, onClose }: InviteMemberModalProps) { - setRunOn(e.target.value as "upload" | "export") + onChange={(value) => + setRunOn((value ?? "upload") as "upload" | "export") } aria-label={t("policies.wizard.runOnLabel", "Run on")} options={[ @@ -437,8 +437,8 @@ export function PolicySetupWizard({ + onChange={(value) => setOutputNamePosition( - e.target.value as "prefix" | "suffix" | "auto-number", + (value ?? "suffix") as + | "prefix" + | "suffix" + | "auto-number", ) } aria-label={t( diff --git a/frontend/editor/src/proprietary/ui/ColorInput.tsx b/frontend/editor/src/proprietary/ui/ColorInput.tsx new file mode 100644 index 0000000000..6063ecf688 --- /dev/null +++ b/frontend/editor/src/proprietary/ui/ColorInput.tsx @@ -0,0 +1,146 @@ +import type React from "react"; +import { + ColorInput as MantineColorInput, + type ColorInputProps as MantineColorInputProps, +} from "@mantine/core"; +import { useInputAria } from "@app/ui/ariaForwarding"; +import "@app/ui/MantineForms.css"; + +const SUI_INPUT_VARS = { + "--input-bg": "var(--color-surface)", + "--input-bd": "var(--color-border-input)", + "--input-bd-focus": "var(--color-blue)", + "--input-radius": "var(--radius-md)", + "--input-color": "var(--color-text-1)", + "--input-placeholder-color": "var(--color-text-placeholder)", + "--input-height-sm": "1.75rem", + "--input-height-md": "2.25rem", +} as React.CSSProperties; + +export type ColorInputSize = "sm" | "md"; + +export interface ColorInputProps { + // Value + value?: string; + onChange?: (value: string) => void; + defaultValue?: string; + + // Behaviour + format?: "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla"; + swatches?: string[]; + swatchesPerRow?: number; + withPicker?: boolean; + + // Popover escape hatch — only for zIndex / offset overrides in modals + popoverProps?: MantineColorInputProps["popoverProps"]; + + // Form + placeholder?: string; + id?: string; + name?: string; + "aria-label"?: string; + "aria-invalid"?: boolean; + "aria-describedby"?: string; + required?: boolean; + disabled?: boolean; + readOnly?: boolean; + onFocus?: React.FocusEventHandler; + onBlur?: React.FocusEventHandler; + + // SUI — invalid applies error styling; FormField renders the message itself. + inputSize?: ColorInputSize; + invalid?: boolean; +} + +type PassthroughProps = Omit< + Pick< + MantineColorInputProps, + | "value" + | "onChange" + | "defaultValue" + | "format" + | "swatches" + | "swatchesPerRow" + | "withPicker" + | "popoverProps" + | "placeholder" + | "id" + | "name" + | "aria-label" + | "aria-describedby" + | "required" + | "disabled" + | "readOnly" + | "onFocus" + | "onBlur" + >, + never +>; + +/** + * SUI colour picker input with swatch preview and popover picker. Use with + * for labels and error display. Appearance is locked to SUI tokens. + * + * Defaults to hex format. Pass `popoverProps={{ withinPortal: true, zIndex: Z }}` when + * rendering inside a modal. + */ +export function ColorInput({ + inputSize = "md", + invalid, + format = "hex", + value, + onChange, + defaultValue, + swatches, + swatchesPerRow, + withPicker, + popoverProps, + placeholder, + id, + name, + "aria-label": ariaLabel, + "aria-invalid": ariaInvalid, + "aria-describedby": ariaDescribedBy, + required, + disabled, + readOnly, + onFocus, + onBlur, +}: ColorInputProps) { + const inputRef = useInputAria({ describedBy: ariaDescribedBy }); + const passthroughProps: PassthroughProps = { + value, + onChange, + defaultValue, + format, + swatches, + swatchesPerRow, + withPicker, + popoverProps, + placeholder, + id, + name, + "aria-label": ariaLabel, + "aria-describedby": ariaDescribedBy, + required, + disabled, + readOnly, + onFocus, + onBlur, + }; + + return ( + + ); +} diff --git a/frontend/editor/src/proprietary/ui/Forms.stories.tsx b/frontend/editor/src/proprietary/ui/Forms.stories.tsx index 10f4e0b1c3..0d14cf3392 100644 --- a/frontend/editor/src/proprietary/ui/Forms.stories.tsx +++ b/frontend/editor/src/proprietary/ui/Forms.stories.tsx @@ -73,23 +73,6 @@ export const Input_Error: Story = { ), }; -export const Select_Default: Story = { - render: () => ( - - setRetention(e.target.value)} + onChange={(value) => setRetention(value ?? "90")} options={[ { value: "30", label: "30 days" }, { value: "90", label: "90 days" }, diff --git a/frontend/editor/src/proprietary/ui/IconBadge.css b/frontend/editor/src/proprietary/ui/IconBadge.css index 10e2d28915..43d4eb0af9 100644 --- a/frontend/editor/src/proprietary/ui/IconBadge.css +++ b/frontend/editor/src/proprietary/ui/IconBadge.css @@ -34,3 +34,7 @@ .sui-iconbadge--red { --ib-base: var(--color-red); } +.sui-iconbadge--neutral { + --ib-base: var(--color-text-1); + background: none; +} diff --git a/frontend/editor/src/proprietary/ui/IconBadge.tsx b/frontend/editor/src/proprietary/ui/IconBadge.tsx index 9b421d47c5..ae6c5536d1 100644 --- a/frontend/editor/src/proprietary/ui/IconBadge.tsx +++ b/frontend/editor/src/proprietary/ui/IconBadge.tsx @@ -1,7 +1,13 @@ import type { ReactNode } from "react"; import "@app/ui/IconBadge.css"; -export type IconBadgeAccent = "blue" | "purple" | "green" | "amber" | "red"; +export type IconBadgeAccent = + | "blue" + | "purple" + | "green" + | "amber" + | "red" + | "neutral"; export interface IconBadgeProps { children: ReactNode; diff --git a/frontend/editor/src/proprietary/ui/MantineForms.css b/frontend/editor/src/proprietary/ui/MantineForms.css new file mode 100644 index 0000000000..66551aedf5 --- /dev/null +++ b/frontend/editor/src/proprietary/ui/MantineForms.css @@ -0,0 +1,114 @@ +/* =================================================================== + * MantineForms.css — SUI design tokens injected into Mantine inputs + * + * Applied via classNames.wrapper="sui-mantine-wrapper" on each + * Mantine-backed SUI component (MultiSelect, NumberInput, ColorInput). + * The inline `styles.wrapper` in each component sets the base CSS + * variables; this file adds focus ring + pill styling that require + * CSS pseudo-selectors or attribute selectors. + * =================================================================== */ + +/* CSS custom properties for Mantine's input system, mapped to SUI tokens. + * These are also set as inline styles (higher specificity); the declarations + * here act as a typed reference and as a fallback for any slot Mantine reads + * before the inline vars are applied. */ +.sui-mantine-wrapper { + --input-bg: var(--color-surface); + --input-bd: var(--color-border-input); + --input-bd-focus: var(--color-blue); + --input-radius: var(--radius-md); + --input-color: var(--color-text-1); + --input-placeholder-color: var(--color-text-placeholder); + --input-height-sm: 1.75rem; + --input-height-md: 2.25rem; + font-size: 0.875rem; +} + +/* SUI focus ring — matches .sui-input:focus-within */ +.sui-mantine-wrapper[data-focused], +.sui-mantine-wrapper:focus-within { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-blue) 16%, transparent); +} + +/* Error state */ +.sui-mantine-wrapper[data-invalid] { + --input-bd: var(--color-red); + --input-bd-focus: var(--color-red); +} + +.sui-mantine-wrapper[data-invalid][data-focused], +.sui-mantine-wrapper[data-invalid]:focus-within { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-red) 16%, transparent); +} + +/* Disabled state */ +.sui-mantine-wrapper[data-disabled] { + opacity: 0.5; + cursor: not-allowed; +} + +/* ---- MultiSelect pills ---- */ +/* Pills match SUI's Chip component: small rounded tags. */ +.sui-mantine-pill { + background: var(--color-blue-light) !important; + color: var(--color-blue-dark) !important; + border: 1px solid var(--color-blue-border) !important; + border-radius: var(--radius-sm) !important; + font-size: 0.75rem !important; + font-weight: 500 !important; +} + +/* Pills list needs a min-height to not collapse when empty */ +.sui-mantine-pills-list { + min-height: var(--input-height-sm, 1.75rem); +} + +/* ---- NumberInput controls (increment/decrement buttons) ---- */ +.sui-mantine-control { + border-color: var(--color-border-input) !important; + color: var(--color-text-3) !important; +} + +.sui-mantine-control:hover { + background: var(--color-bg-hover) !important; + color: var(--color-text-1) !important; +} + +/* ---- Select: hide Mantine's right-section clear button border ---- */ +.sui-mantine-wrapper .mantine-Select-section { + color: var(--color-text-3); +} + +/* ---- Slider ---- */ +.sui-mantine-slider { + --slider-color: var(--color-blue); + --slider-track-bg: var(--color-border); + --slider-thumb-color: var(--color-surface); + --slider-thumb-bd: var(--color-blue); +} + +.sui-mantine-slider:focus-within { + outline: none; +} + +/* Thumb focus ring matches SUI */ +.sui-mantine-slider .mantine-Slider-thumb:focus-visible { + box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-blue) 16%, transparent); + outline: none; +} + +/* Mark labels use SUI text tokens */ +.sui-mantine-slider .mantine-Slider-markLabel { + color: var(--color-text-3); + font-size: 0.75rem; +} + +/* ---- Dark mode: Mantine's own dark-mode vars beat ours when Mantine's + * color-scheme is "dark". Reassert SUI tokens so the two systems stay in sync. + * SuiProvider syncs forceColorScheme to SUI theme, so + * [data-mantine-color-scheme="dark"] === [data-theme="dark"] in practice. ---- */ +[data-mantine-color-scheme="dark"] .sui-mantine-wrapper { + --input-bg: var(--color-surface); + --input-bd: var(--color-border-input); + --input-color: var(--color-text-1); +} diff --git a/frontend/editor/src/proprietary/ui/MantineForms.stories.tsx b/frontend/editor/src/proprietary/ui/MantineForms.stories.tsx new file mode 100644 index 0000000000..dfa40644dd --- /dev/null +++ b/frontend/editor/src/proprietary/ui/MantineForms.stories.tsx @@ -0,0 +1,568 @@ +import { useState } from "react"; +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { FormField } from "@app/ui/FormField"; +import { Stack } from "@app/ui/Stack"; +import { MultiSelect } from "@app/ui/MultiSelect"; +import { NumberInput } from "@app/ui/NumberInput"; +import { ColorInput } from "@app/ui/ColorInput"; +import { Select } from "@app/ui/Select"; +import { Slider } from "@app/ui/Slider"; + +const PII_OPTIONS = [ + { value: "ssn", label: "Social Security Number" }, + { value: "dob", label: "Date of Birth" }, + { value: "account", label: "Account Number" }, + { value: "email", label: "Email Address" }, + { value: "phone", label: "Phone Number" }, + { value: "address", label: "Postal Address" }, + { value: "passport", label: "Passport Number" }, + { value: "license", label: "Driver's License" }, +]; + +const meta: Meta = { + title: "Primitives/Forms", + parameters: { layout: "padded" }, + decorators: [ + (S) => ( +
+ +
+ ), + ], +}; +export default meta; +type Story = StoryObj; + +// ─── MultiSelect ───────────────────────────────────────────────────────────── + +export const MultiSelect_Default: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState([]); + return ( + + + + ); + } + return ; + }, +}; + +export const MultiSelect_WithValues: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState(["ssn", "dob", "email"]); + return ( + + + + ); + } + return ; + }, +}; + +export const MultiSelect_SmSize: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState(["ssn", "email"]); + return ( + + + + ); + } + return ; + }, +}; + +export const MultiSelect_Error: Story = { + render: () => ( + + {}} + placeholder="Choose types…" + invalid + /> + + ), +}; + +export const MultiSelect_Disabled: Story = { + render: () => ( + + {}} + disabled + /> + + ), +}; + +// ─── NumberInput ───────────────────────────────────────────────────────────── + +export const NumberInput_Default: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState(100); + return ( + + + + ); + } + return ; + }, +}; + +export const NumberInput_Decimal: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState(0.85); + return ( + + + + ); + } + return ; + }, +}; + +export const NumberInput_WithUnit: Story = { + render: () => { + function Bound() { + const [opacity, setOpacity] = useState(80); + const [fontSize, setFontSize] = useState(24); + return ( + + + + + + + + + ); + } + return ; + }, +}; + +export const NumberInput_SmSize: Story = { + render: () => { + function Bound() { + const [v, setV] = useState(12); + return ( + + + + ); + } + return ; + }, +}; + +export const NumberInput_Error: Story = { + render: () => ( + + {}} invalid /> + + ), +}; + +export const NumberInput_Disabled: Story = { + render: () => ( + + {}} disabled /> + + ), +}; + +// ─── ColorInput ────────────────────────────────────────────────────────────── + +export const ColorInput_Default: Story = { + render: () => { + function Bound() { + const [color, setColor] = useState(""); + return ( + + + + ); + } + return ; + }, +}; + +export const ColorInput_Preselected: Story = { + render: () => { + function Bound() { + const [color, setColor] = useState("#3B82F6"); + return ( + + + + ); + } + return ; + }, +}; + +export const ColorInput_SmSize: Story = { + render: () => { + function Bound() { + const [color, setColor] = useState("#EF4444"); + return ( + + + + ); + } + return ; + }, +}; + +export const ColorInput_Error: Story = { + render: () => ( + + {}} invalid /> + + ), +}; + +export const ColorInput_Disabled: Story = { + render: () => ( + + {}} disabled /> + + ), +}; + +// ─── Select ────────────────────────────────────────────────────────────────── + +const RETENTION_OPTIONS = [ + { value: "30", label: "30 days" }, + { value: "60", label: "60 days" }, + { value: "90", label: "90 days (default)" }, + { value: "180", label: "180 days" }, + { value: "never", label: "Never expire" }, +]; + +export const Select_Default: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState("90"); + return ( + + + + ); + } + return ; + }, +}; + +export const Select_SmSize: Story = { + render: () => { + function Bound() { + const [value, setValue] = useState("upload"); + return ( + + {}} + placeholder="Choose…" + invalid + /> + + ), +}; + +export const Select_Disabled: Story = { + render: () => ( + + - {placeholder && ( - - )} - {options.map((opt) => ( - - ))} - - - - - - - - ); - }, -); +type PassthroughProps = Omit< + Pick< + MantineSelectProps, + | "value" + | "onChange" + | "defaultValue" + | "searchable" + | "clearable" + | "placeholder" + | "nothingFoundMessage" + | "maxDropdownHeight" + | "comboboxProps" + | "id" + | "name" + | "aria-label" + | "aria-describedby" + | "required" + | "disabled" + | "readOnly" + | "onFocus" + | "onBlur" + >, + never +>; + +/** + * SUI select / combobox backed by Mantine. Supports optional search and clear. + * Use with for labels and error display. Appearance is locked to SUI tokens. + * + * onChange receives the selected string value (or null when cleared), not a DOM event. + */ +export function Select({ + inputSize = "md", + invalid, + options, + value, + onChange, + defaultValue, + searchable, + clearable, + placeholder, + nothingFoundMessage, + maxDropdownHeight, + comboboxProps, + id, + name, + "aria-label": ariaLabel, + "aria-invalid": ariaInvalid, + "aria-describedby": ariaDescribedBy, + required, + disabled, + readOnly, + onFocus, + onBlur, +}: SelectProps) { + const inputRef = useInputAria({ describedBy: ariaDescribedBy }); + const passthroughProps: PassthroughProps = { + value, + onChange, + defaultValue, + searchable, + clearable, + placeholder, + nothingFoundMessage, + maxDropdownHeight, + comboboxProps, + id, + name, + "aria-label": ariaLabel, + "aria-describedby": ariaDescribedBy, + required, + disabled, + readOnly, + onFocus, + onBlur, + }; + + return ( + + ); +} diff --git a/frontend/editor/src/proprietary/ui/Slider.tsx b/frontend/editor/src/proprietary/ui/Slider.tsx index 3b540def06..ebeb782f9e 100644 --- a/frontend/editor/src/proprietary/ui/Slider.tsx +++ b/frontend/editor/src/proprietary/ui/Slider.tsx @@ -1,63 +1,113 @@ -import { forwardRef, type InputHTMLAttributes } from "react"; -import "@app/ui/Slider.css"; +import { + Slider as MantineSlider, + type SliderProps as MantineSliderProps, +} from "@mantine/core"; +import { useThumbAria } from "@app/ui/ariaForwarding"; +import "@app/ui/MantineForms.css"; -export interface SliderProps extends Omit< - InputHTMLAttributes, - "type" | "value" | "onChange" -> { +export interface SliderMark { value: number; + label?: React.ReactNode; +} + +export interface SliderProps { + value: number; + onChange?: (value: number) => void; min?: number; max?: number; step?: number; - onChange: (value: number) => void; - /** Optional formatter for the value pill (e.g. "0.85", "30 days"). */ + + /** Tick marks along the track. */ + marks?: SliderMark[]; + + /** Format the tooltip shown while dragging. Defaults to the raw number. */ formatValue?: (value: number) => string; - /** Show the right-aligned value badge. Defaults to true. */ + + /** + * Show the value tooltip on hover/drag. Defaults to true. + * Pass false to hide the label entirely (useful when the value is shown elsewhere). + */ showValue?: boolean; + + // Form + id?: string; + /** Accessible name for the slider thumb — the visible FormField label can't + * associate with Mantine's non-input thumb element, so set this too. */ + "aria-label"?: string; + "aria-invalid"?: boolean; + "aria-describedby"?: string; + disabled?: boolean; + + // SUI + inputSize?: "sm" | "md"; } -export const Slider = forwardRef(function Slider( - { +type PassthroughProps = Omit< + Pick< + MantineSliderProps, + | "value" + | "onChange" + | "min" + | "max" + | "step" + | "marks" + | "label" + | "thumbLabel" + | "id" + | "disabled" + | "size" + >, + never +>; + +/** + * SUI range slider backed by Mantine. Provides accessible keyboard navigation, + * optional tick marks, and a drag tooltip. Use with for labels. + * Appearance is locked to SUI tokens. + */ +export function Slider({ + value, + onChange, + min = 0, + max = 1, + step = 0.01, + marks, + formatValue, + showValue = true, + id, + "aria-label": ariaLabel, + "aria-invalid": ariaInvalid, + "aria-describedby": ariaDescribedBy, + disabled, + inputSize = "md", +}: SliderProps) { + const label = showValue + ? (v: number) => (formatValue ? formatValue(v) : String(v)) + : null; + + // The role="slider" element is the thumb, not an input, so FormField's + // injected aria wiring has to land there for AT to announce it. + const rootRef = useThumbAria(ariaDescribedBy, ariaInvalid); + + const passthroughProps: PassthroughProps = { value, - min = 0, - max = 1, - step = 0.01, onChange, - formatValue, - showValue = true, - className, - ...rest - }, - ref, -) { - const pct = ((value - min) / (max - min)) * 100; + min, + max, + step, + marks, + label, + thumbLabel: ariaLabel, + id, + disabled, + size: inputSize, + }; + return ( - - onChange(Number(e.target.value))} - className="sui-slider__input" - {...rest} - /> - {showValue && ( - - {formatValue ? formatValue(value) : value.toString()} - - )} - + ); -}); +} diff --git a/frontend/editor/src/proprietary/ui/ariaForwarding.test.tsx b/frontend/editor/src/proprietary/ui/ariaForwarding.test.tsx new file mode 100644 index 0000000000..608baff21d --- /dev/null +++ b/frontend/editor/src/proprietary/ui/ariaForwarding.test.tsx @@ -0,0 +1,106 @@ +import { describe, expect, it } from "vitest"; +import { render } from "@testing-library/react"; +import { MantineProvider } from "@mantine/core"; +import { Select } from "@app/ui/Select"; +import { MultiSelect } from "@app/ui/MultiSelect"; +import { NumberInput } from "@app/ui/NumberInput"; +import { ColorInput } from "@app/ui/ColorInput"; +import { Slider } from "@app/ui/Slider"; + +// Guards the FormField contract on the Mantine-backed components: the +// injected required / aria-describedby / aria-invalid wiring must reach the +// focusable element. Mantine internals clobber some of these (see +// ariaForwarding.ts), so this exercises the real DOM output. + +function renderInProvider(ui: React.ReactElement) { + return render({ui}); +} + +const OPTIONS = [{ value: "a", label: "A" }]; + +describe("Mantine-backed SUI aria forwarding", () => { + it("Select forwards required and aria-describedby to the input", () => { + const { container } = renderInProvider( + {}} invalid />, + ); + expect(container.querySelector("input")?.getAttribute("aria-invalid")).toBe( + "true", + ); + }); + + it("MultiSelect forwards aria-required and aria-describedby to the field", () => { + const { container } = renderInProvider( + {}} + required + aria-describedby="help-2" + />, + ); + // The focusable pills field; a native `required` would misfire form + // validation there, so the requirement is announced via aria-required. + const input = container.querySelector("input"); + expect(input?.getAttribute("aria-required")).toBe("true"); + expect(input?.getAttribute("aria-describedby")).toBe("help-2"); + }); + + it("NumberInput forwards required and aria-describedby to the input", () => { + const { container } = renderInProvider( + {}} + required + aria-describedby="help-3" + />, + ); + const input = container.querySelector("input"); + expect(input?.hasAttribute("required")).toBe(true); + expect(input?.getAttribute("aria-describedby")).toBe("help-3"); + }); + + it("ColorInput forwards required and aria-describedby to the input", () => { + const { container } = renderInProvider( + {}} + required + aria-describedby="help-4" + />, + ); + const input = container.querySelector("input"); + expect(input?.hasAttribute("required")).toBe(true); + expect(input?.getAttribute("aria-describedby")).toBe("help-4"); + }); + + it("Slider forwards aria wiring to the role=slider thumb", () => { + const { container } = renderInProvider( + {}} + aria-label="Confidence" + aria-invalid + aria-describedby="help-5" + />, + ); + const thumb = container.querySelector('[role="slider"]'); + expect(thumb?.getAttribute("aria-label")).toBe("Confidence"); + expect(thumb?.getAttribute("aria-invalid")).toBe("true"); + expect(thumb?.getAttribute("aria-describedby")).toBe("help-5"); + }); +}); diff --git a/frontend/editor/src/proprietary/ui/ariaForwarding.ts b/frontend/editor/src/proprietary/ui/ariaForwarding.ts new file mode 100644 index 0000000000..344016a50c --- /dev/null +++ b/frontend/editor/src/proprietary/ui/ariaForwarding.ts @@ -0,0 +1,57 @@ +import { useEffect, useRef } from "react"; + +/** + * Mantine drops caller-supplied accessibility wiring in a few places: + * Input-based components overwrite `aria-describedby` with their own + * Input.Wrapper context (unset here — FormField owns the help text), + * MultiSelect consumes `required` for its label asterisk without marking the + * focusable field, and Slider's thumb ignores unknown `thumbProps` keys + * entirely. These hooks re-apply the attributes to the rendered DOM node + * after every render so FormField's injected wiring survives. + */ + +/** + * Ref for a Mantine input component; keeps `aria-describedby` applied. + * Pass `required` only when Mantine doesn't put the attribute on the field + * itself (MultiSelect) — it is announced as `aria-required`, since a native + * `required` on a combobox search field would misfire form validation. + */ +export function useInputAria(options: { + describedBy?: string; + required?: boolean; +}) { + const { describedBy, required } = options; + const ref = useRef(null); + useEffect(() => { + applyAria(ref.current, "aria-describedby", describedBy); + applyAria(ref.current, "aria-required", required ? "true" : undefined); + }); + return ref; +} + +/** Ref for Mantine Slider's root; keeps aria wiring applied to the thumb. */ +export function useThumbAria( + describedBy: string | undefined, + invalid: boolean | undefined, +) { + const rootRef = useRef(null); + useEffect(() => { + const thumb = rootRef.current?.querySelector('[role="slider"]'); + applyAria(thumb, "aria-describedby", describedBy); + applyAria(thumb, "aria-invalid", invalid ? "true" : undefined); + }); + return rootRef; +} + +function applyAria( + el: Element | null | undefined, + attribute: string, + value: string | undefined, +) { + if (!el) return; + if (value !== undefined) { + el.setAttribute(attribute, value); + } else { + el.removeAttribute(attribute); + } +} diff --git a/frontend/editor/src/proprietary/ui/index.ts b/frontend/editor/src/proprietary/ui/index.ts index 6c2132f894..e6c4864c52 100644 --- a/frontend/editor/src/proprietary/ui/index.ts +++ b/frontend/editor/src/proprietary/ui/index.ts @@ -41,3 +41,8 @@ export * from "@app/ui/Select"; export * from "@app/ui/Checkbox"; export * from "@app/ui/Radio"; export * from "@app/ui/Slider"; + +// Mantine-backed form elements (SUI-styled) +export * from "@app/ui/MultiSelect"; +export * from "@app/ui/NumberInput"; +export * from "@app/ui/ColorInput"; From 8ba8f69252aed0c89480998af84cf56f3ab03c0c Mon Sep 17 00:00:00 2001 From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com> Date: Tue, 7 Jul 2026 17:06:56 +0100 Subject: [PATCH 08/27] Consolidate buttons and related components (#6787) SegmentedControl, Chip, ChipFlow. Bring in the portal dark mode theme and other small fixes to issues I found during testing --- frontend/.storybook/declarations.d.ts | 1 + frontend/.storybook/preview.tsx | 51 +-- frontend/.storybook/tsconfig.json | 24 ++ .../public/locales/en-US/translation.toml | 40 ++- .../components/onboarding/renderButtons.tsx | 40 +-- .../onboarding/slides/TeamSlide.tsx | 3 +- .../shared/FreeLimitReachedModal.tsx | 5 +- .../shared/SpendCapReachedModal.tsx | 5 +- .../shared/TeamInvitationBanner.tsx | 18 +- .../shared/config/configSections/Payg.css | 21 +- .../shared/config/configSections/Payg.tsx | 21 +- .../shared/config/configSections/PaygFree.css | 19 -- .../shared/config/configSections/PaygFree.tsx | 9 +- .../config/configSections/SpendCapControl.css | 8 +- .../configSections/StripeCheckoutPanel.tsx | 10 +- .../config/configSections/TeamSection.tsx | 31 +- .../config/configSections/UpgradeModal.css | 85 +---- .../config/configSections/UpgradeModal.tsx | 48 ++- .../editor/src/core/assets/login/github.svg | 2 +- .../src/core/components/StorageStatsCard.tsx | 16 +- .../annotation/shared/ColorControl.tsx | 29 +- .../annotation/shared/ColorPicker.tsx | 3 +- .../annotation/shared/DrawingCanvas.tsx | 5 +- .../annotation/shared/DrawingControls.tsx | 14 +- .../annotation/shared/OpacityControl.tsx | 28 +- .../annotation/shared/PropertiesPopover.tsx | 44 +-- .../annotation/shared/TextInputWithFont.tsx | 12 +- .../annotation/shared/WidthControl.tsx | 28 +- .../components/fileEditor/AddFileCard.tsx | 5 +- .../fileEditor/FileEditor.module.css | 6 +- .../fileEditor/FileEditorThumbnail.tsx | 39 +-- .../fileManager/CompactFileDetails.tsx | 18 +- .../fileManager/EmptyFilesState.tsx | 4 +- .../components/fileManager/FileActions.tsx | 44 ++- .../components/fileManager/FileDetails.tsx | 11 +- .../components/fileManager/FileInfoCard.tsx | 6 +- .../components/fileManager/FileListItem.tsx | 7 +- .../fileManager/FileSourceButtons.tsx | 95 ++---- .../filesPage/DeleteFilesDialog.tsx | 8 +- .../filesPage/DeleteFolderDialog.tsx | 15 +- .../components/filesPage/FileDetailsPanel.tsx | 65 ++-- .../core/components/filesPage/FileGrid.tsx | 18 +- .../components/filesPage/FileManagerView.tsx | 80 +++-- .../filesPage/FolderAppearancePicker.tsx | 11 +- .../components/filesPage/FolderNameDialog.tsx | 6 +- .../filesPage/FolderTreeSidebar.tsx | 7 +- .../filesPage/MoveToFolderDialog.tsx | 44 ++- .../components/filesPage/VersionTimeline.tsx | 58 ++-- .../InitialOnboardingModal/renderButtons.tsx | 41 +-- .../onboarding/OnboardingModalSlide.tsx | 24 +- .../components/onboarding/OnboardingTour.tsx | 12 +- .../onboarding/onboardingFlowConfig.ts | 4 + .../slides/AnalyticsChoiceSlide.tsx | 4 +- .../onboarding/slides/DesktopInstallTitle.tsx | 9 +- .../onboarding/slides/FirstLoginSlide.tsx | 7 +- .../onboarding/slides/MFASetupSlide.tsx | 6 +- .../components/pageEditor/FileThumbnail.tsx | 52 ++-- .../pageEditor/PageEditorControls.tsx | 87 ++---- .../pageEditor/PageSelectByNumberButton.tsx | 6 +- .../bulkSelectionPanel/OperatorsSection.tsx | 13 +- .../bulkSelectionPanel/PageSelectionInput.tsx | 22 +- .../bulkSelectionPanel/SelectPages.tsx | 3 +- .../core/components/shared/AppConfigModal.tsx | 5 +- .../core/components/shared/BulkShareModal.tsx | 8 +- .../shared/BulkUploadToServerModal.tsx | 5 +- .../components/shared/ButtonSelector.test.tsx | 73 +++-- .../core/components/shared/ButtonSelector.tsx | 109 +++---- .../core/components/shared/ButtonToggle.tsx | 86 ++--- .../shared/DismissAllErrorsButton.tsx | 9 +- .../shared/DropdownListWithFooter.tsx | 6 +- .../components/shared/EditableSecretField.tsx | 11 +- .../shared/EncryptedPdfUnlockModal.tsx | 16 +- .../core/components/shared/ErrorBoundary.tsx | 9 +- .../src/core/components/shared/FileCard.tsx | 34 +- .../components/shared/FileDropdownMenu.tsx | 15 +- .../src/core/components/shared/FileGrid.tsx | 15 +- .../components/shared/FilePickerModal.tsx | 8 +- .../components/shared/FileSelectorPicker.tsx | 12 +- .../core/components/shared/FileSidebar.tsx | 47 +-- .../components/shared/FileSidebarFileItem.css | 2 +- .../components/shared/FileSidebarFileItem.tsx | 16 +- .../components/shared/FileUploadButton.tsx | 44 ++- .../components/shared/FirstLoginModal.tsx | 14 +- .../src/core/components/shared/Footer.tsx | 10 +- .../components/shared/HoverActionMenu.tsx | 6 +- .../src/core/components/shared/InfoBanner.tsx | 59 +++- .../core/components/shared/LandingActions.tsx | 15 +- .../core/components/shared/LandingPage.css | 11 +- .../core/components/shared/LandingPage.tsx | 8 +- .../components/shared/LanguageSelector.tsx | 88 ++---- .../components/shared/LoginAgreementModal.tsx | 6 +- .../components/shared/MultiSelectControls.tsx | 16 +- .../shared/NavigationWarningModal.tsx | 43 +-- .../components/shared/ObscuredOverlay.tsx | 7 +- .../core/components/shared/ShareFileModal.tsx | 8 +- .../shared/ShareManagementModal.tsx | 42 ++- .../src/core/components/shared/TextInput.tsx | 7 +- .../components/shared/ToolPanelHeader.tsx | 10 +- .../src/core/components/shared/Tooltip.tsx | 6 +- .../core/components/shared/TopControls.tsx | 37 +-- .../core/components/shared/UpdateModal.tsx | 66 ++-- .../components/shared/UploadToServerModal.tsx | 5 +- .../core/components/shared/UserSelector.tsx | 7 +- .../shared/ViewerInlineControls.tsx | 9 +- .../core/components/shared/WorkbenchBar.css | 21 +- .../core/components/shared/WorkbenchBar.tsx | 78 ++--- .../components/shared/ZipWarningModal.tsx | 31 +- .../config/RestartConfirmationModal.tsx | 6 +- .../shared/config/SettingsStickyFooter.tsx | 5 +- .../config/configSections/GeneralSection.tsx | 23 +- .../config/configSections/HelpSection.tsx | 7 +- .../config/configSections/HotkeysSection.tsx | 11 +- .../config/configSections/LegalSection.tsx | 5 +- .../config/configSections/ProviderCard.tsx | 10 +- .../shared/filePreview/NavigationArrows.tsx | 13 +- .../quickAccessBar/QuickAccessButton.tsx | 6 +- .../shared/signing/SharedSigningLauncher.tsx | 5 +- .../steps/ConfigureSignatureDefaultsStep.tsx | 5 +- .../signing/steps/ReviewSessionStep.tsx | 16 +- .../signing/steps/SelectDocumentStep.tsx | 3 +- .../signing/steps/SelectParticipantsStep.tsx | 5 +- .../wetSignature/DrawSignatureCanvas.tsx | 7 +- .../wetSignature/SignatureTypeSelector.tsx | 8 +- .../wetSignature/UploadSignatureImage.tsx | 9 +- .../core/components/toast/ToastRenderer.tsx | 18 +- .../core/components/tools/RightSidebar.tsx | 35 +-- .../src/core/components/tools/ToolPanel.css | 1 + .../components/tools/ToolPanelModePrompt.tsx | 13 +- .../components/tools/ToolPanelViewerBar.tsx | 8 +- .../src/core/components/tools/ToolPicker.tsx | 7 +- .../addAttachments/AddAttachmentsSettings.tsx | 39 +-- .../addPageNumbers/PageNumberPreview.tsx | 7 +- .../StampPositionFormattingSettings.tsx | 38 ++- .../tools/addStamp/StampPreview.tsx | 7 +- .../tools/addStamp/StampSetupSettings.tsx | 7 +- .../AdjustPageScaleSettings.tsx | 14 +- .../tools/automate/AutomationCreation.tsx | 10 +- .../tools/automate/AutomationEntry.tsx | 43 ++- .../tools/automate/AutomationImportModal.tsx | 4 +- .../tools/automate/AutomationRun.tsx | 13 +- .../tools/automate/IconSelector.tsx | 20 +- .../tools/automate/ToolConfigurationModal.tsx | 14 +- .../components/tools/automate/ToolList.tsx | 27 +- .../BookletImpositionSettings.tsx | 4 +- .../certSign/CertificateFormatSettings.tsx | 17 +- .../tools/certSign/CertificateSelector.tsx | 15 +- .../certSign/CertificateTypeSettings.tsx | 45 +-- .../certSign/HardwareCertificateSettings.tsx | 34 +- .../certSign/SignatureAppearanceSettings.tsx | 19 +- .../tools/certSign/SignatureSettingsInput.tsx | 18 +- .../tools/certSign/WetSignatureInput.tsx | 11 +- .../certSign/modals/AddParticipantsFlow.tsx | 7 +- .../modals/CertificateConfigModal.tsx | 8 +- .../certSign/modals/SelectSignatureModal.tsx | 29 +- .../certSign/panels/ParticipantListPanel.tsx | 11 +- .../certSign/panels/SessionActionsPanel.tsx | 8 +- .../certSign/panels/SessionDetailPanel.tsx | 27 +- .../certSign/panels/SignControlsPanel.tsx | 37 +-- .../certSign/panels/SignRequestPanel.tsx | 14 +- .../certSign/steps/AddSignaturesStep.tsx | 7 +- .../steps/CertificateSelectionStep.tsx | 5 +- .../certSign/steps/ReviewSignatureStep.tsx | 11 +- .../certSign/steps/SignatureCreationStep.tsx | 3 +- .../certSign/steps/SignaturePlacementStep.tsx | 5 +- .../steps/CustomMetadataStep.tsx | 13 +- .../compare/ComparePixelWorkbenchView.tsx | 7 +- .../components/tools/compare/compareView.css | 73 +---- .../tools/compress/CompressSettings.tsx | 18 +- .../tools/convert/ConvertSettings.tsx | 20 +- .../tools/convert/GroupedFormatDropdown.tsx | 34 +- .../components/tools/crop/CropSettings.tsx | 4 +- .../editTableOfContents/BookmarkEditor.tsx | 36 ++- .../EditTableOfContentsSettings.tsx | 66 ++-- .../EditTableOfContentsWorkbenchView.tsx | 6 +- .../tools/fullscreen/CompactToolItem.tsx | 35 ++- .../tools/fullscreen/DetailedToolItem.tsx | 7 +- .../tools/getPdfInfo/GetPdfInfoResults.tsx | 4 +- .../tools/merge/MergeFileSorter.tsx | 15 +- .../tools/overlayPdfs/OverlayPdfsSettings.tsx | 19 +- .../pdfTextEditor/PdfTextEditorSidebar.tsx | 39 ++- .../tools/pdfTextEditor/PdfTextEditorView.tsx | 23 +- .../tools/redact/ManualRedactionControls.tsx | 8 +- .../redact/RedactSingleStepSettings.test.tsx | 20 +- .../tools/redact/WordsToRedactInput.tsx | 18 +- .../tools/rotate/RotateSettings.tsx | 11 +- .../tools/shared/NavigationControls.tsx | 11 +- .../tools/shared/OperationButton.tsx | 53 +++- .../tools/shared/ReviewToolStep.tsx | 10 +- .../tools/shared/ScopedOperationButton.tsx | 14 +- .../components/tools/showJS/ShowJSView.tsx | 30 +- .../tools/sign/SavedSignaturesSection.tsx | 35 +-- .../components/tools/sign/SignSettings.tsx | 59 ++-- .../tools/toolPicker/FavoriteStar.tsx | 25 +- .../tools/toolPicker/ToolButton.tsx | 201 ++++++------ .../tools/toolPicker/ToolPicker.css | 7 +- .../tools/toolPicker/ToolSearch.tsx | 7 +- .../ValidateSignatureResults.tsx | 17 +- .../ValidateSignatureSettings.tsx | 6 +- .../viewer/AnnotationMenuButtons.tsx | 94 ++---- .../components/viewer/AttachmentSidebar.tsx | 48 ++- .../components/viewer/BookmarkSidebar.tsx | 127 ++++++-- .../components/viewer/CommentsSidebar.tsx | 136 ++++---- .../core/components/viewer/EmbedPdfViewer.tsx | 10 +- .../core/components/viewer/LayerSidebar.tsx | 19 +- .../src/core/components/viewer/LinkLayer.tsx | 16 +- .../core/components/viewer/NonPdfViewer.tsx | 7 +- .../components/viewer/PdfViewerToolbar.tsx | 84 ++--- .../viewer/RedactionSelectionMenu.tsx | 31 +- .../components/viewer/SearchInterface.tsx | 11 +- .../viewer/SignaturePreviewLayer.tsx | 9 +- .../components/viewer/TextSelectionMenu.tsx | 9 +- .../components/viewer/ThumbnailSidebar.tsx | 14 +- .../viewer/ViewerAnnotationControls.tsx | 19 +- .../components/viewer/ViewerShareButton.tsx | 17 +- .../viewer/nonpdf/MarkdownRenderer.tsx | 6 +- .../components/viewer/nonpdf/NonPdfBanner.tsx | 8 +- .../viewer/useViewerWorkbenchBarButtons.tsx | 48 ++- .../src/core/contexts/FileManagerContext.tsx | 13 +- .../core/contexts/UnsavedChangesContext.tsx | 7 +- frontend/editor/src/core/pages/HomePage.tsx | 21 +- .../src/core/pages/MobileScannerPage.tsx | 66 ++-- .../editor/src/core/styles/cookieconsent.css | 39 +-- frontend/editor/src/core/styles/theme.css | 271 ++++++++-------- .../live/viewer-sidebar-add-buttons.spec.ts | 4 +- .../tests/stubbed/cert-sign-wizard.spec.ts | 17 +- .../stubbed/page-editor-rotation.spec.ts | 6 +- .../core/tests/stubbed/watermark-tool.spec.ts | 8 +- .../editor/src/core/theme/mantineTheme.ts | 18 ++ frontend/editor/src/core/tokens/tokens.css | 13 + frontend/editor/src/core/tools/AddStamp.tsx | 1 - frontend/editor/src/core/tools/Compare.tsx | 45 ++- frontend/editor/src/core/tools/GetPdfInfo.tsx | 28 +- frontend/editor/src/core/tools/Merge.tsx | 7 +- frontend/editor/src/core/tools/SharedSign.tsx | 40 ++- .../core/tools/annotate/AnnotationPanel.tsx | 71 ++--- .../core/tools/formFill/FormFieldSidebar.tsx | 12 +- .../src/core/tools/formFill/FormFill.tsx | 23 +- .../src/core/tools/formFill/FormSaveBar.tsx | 31 +- frontend/editor/src/core/ui/ActionIcon.css | 21 ++ .../editor/src/core/ui/ActionIcon.stories.tsx | 132 ++++++++ frontend/editor/src/core/ui/ActionIcon.tsx | 140 +++++++++ .../src/{proprietary => core}/ui/Avatar.css | 0 .../ui/Avatar.stories.tsx | 0 .../src/{proprietary => core}/ui/Avatar.tsx | 0 .../src/{proprietary => core}/ui/Banner.css | 15 +- .../ui/Banner.stories.tsx | 2 +- .../src/{proprietary => core}/ui/Banner.tsx | 22 +- frontend/editor/src/core/ui/Button.css | 41 +++ .../editor/src/core/ui/Button.stories.tsx | 293 ++++++++++++++++++ frontend/editor/src/core/ui/Button.tsx | 205 ++++++++++++ .../src/{proprietary => core}/ui/Card.css | 20 +- .../{proprietary => core}/ui/Card.stories.tsx | 42 ++- .../src/{proprietary => core}/ui/Card.tsx | 10 +- .../ui/ChatFABButton.css | 0 .../ui/ChatFABButton.stories.tsx | 6 +- .../ui/ChatFABButton.tsx | 12 +- .../ui/ChatFABWindow.css | 4 +- .../ui/ChatFABWindow.stories.tsx | 0 .../ui/ChatFABWindow.tsx | 0 .../src/{proprietary => core}/ui/Checkbox.css | 0 .../src/{proprietary => core}/ui/Checkbox.tsx | 0 frontend/editor/src/core/ui/Chip.css | 49 +++ frontend/editor/src/core/ui/Chip.stories.tsx | 91 ++++++ frontend/editor/src/core/ui/Chip.tsx | 113 +++++++ .../src/{proprietary => core}/ui/ChipFlow.css | 0 .../ui/ChipFlow.stories.tsx | 0 .../src/{proprietary => core}/ui/ChipFlow.tsx | 14 +- .../{proprietary => core}/ui/CodeBlock.css | 0 .../ui/CodeBlock.stories.tsx | 0 .../{proprietary => core}/ui/CodeBlock.tsx | 26 +- .../{proprietary => core}/ui/Collapsible.css | 0 .../ui/Collapsible.stories.tsx | 0 .../{proprietary => core}/ui/Collapsible.tsx | 0 .../{proprietary => core}/ui/ColorInput.tsx | 0 .../src/{proprietary => core}/ui/DataRow.css | 0 .../ui/DataRow.stories.tsx | 0 .../src/{proprietary => core}/ui/DataRow.tsx | 0 .../src/{proprietary => core}/ui/Drawer.css | 16 +- .../ui/Drawer.stories.tsx | 6 +- .../src/{proprietary => core}/ui/Drawer.tsx | 51 ++- .../src/{proprietary => core}/ui/Dropdown.css | 0 .../ui/Dropdown.stories.tsx | 8 +- .../src/{proprietary => core}/ui/Dropdown.tsx | 0 .../{proprietary => core}/ui/EmptyState.css | 0 .../ui/EmptyState.stories.tsx | 4 +- .../{proprietary => core}/ui/EmptyState.tsx | 0 frontend/editor/src/core/ui/FilePicker.tsx | 55 ++++ .../{proprietary => core}/ui/FormField.css | 0 .../{proprietary => core}/ui/FormField.tsx | 0 .../ui/Forms.stories.tsx | 0 .../{proprietary => core}/ui/IconBadge.css | 0 .../ui/IconBadge.stories.tsx | 0 .../{proprietary => core}/ui/IconBadge.tsx | 0 .../src/{proprietary => core}/ui/Inline.css | 0 .../ui/Inline.stories.tsx | 6 +- .../src/{proprietary => core}/ui/Inline.tsx | 0 .../src/{proprietary => core}/ui/Input.css | 0 .../src/{proprietary => core}/ui/Input.tsx | 0 .../src/{proprietary => core}/ui/ListRow.css | 0 .../ui/ListRow.stories.tsx | 0 .../src/{proprietary => core}/ui/ListRow.tsx | 0 .../{proprietary => core}/ui/MantineForms.css | 0 .../ui/MantineForms.stories.tsx | 0 .../{proprietary => core}/ui/MethodBadge.css | 0 .../ui/MethodBadge.stories.tsx | 0 .../{proprietary => core}/ui/MethodBadge.tsx | 0 .../{proprietary => core}/ui/MetricCard.css | 0 .../ui/MetricCard.stories.tsx | 0 .../{proprietary => core}/ui/MetricCard.tsx | 0 .../{proprietary => core}/ui/MetricStrip.css | 0 .../ui/MetricStrip.stories.tsx | 0 .../{proprietary => core}/ui/MetricStrip.tsx | 0 .../src/{proprietary => core}/ui/Modal.css | 17 +- .../src/{proprietary => core}/ui/Modal.tsx | 58 ++-- .../{proprietary => core}/ui/MultiSelect.tsx | 0 .../src/{proprietary => core}/ui/NavItem.css | 0 .../ui/NavItem.stories.tsx | 0 .../src/{proprietary => core}/ui/NavItem.tsx | 0 .../{proprietary => core}/ui/NumberInput.tsx | 0 .../{proprietary => core}/ui/PanelHeader.css | 0 .../ui/PanelHeader.stories.tsx | 27 +- .../{proprietary => core}/ui/PanelHeader.tsx | 3 - .../{proprietary => core}/ui/ProgressBar.css | 0 .../ui/ProgressBar.stories.tsx | 0 .../{proprietary => core}/ui/ProgressBar.tsx | 0 .../src/{proprietary => core}/ui/Radio.css | 0 .../src/{proprietary => core}/ui/Radio.tsx | 0 .../ui/SectionDivider.css | 0 .../ui/SectionDivider.stories.tsx | 0 .../ui/SectionDivider.tsx | 0 .../ui/SectionHeader.css | 0 .../ui/SectionHeader.stories.tsx | 0 .../ui/SectionHeader.tsx | 0 .../editor/src/core/ui/SegmentedControl.css | 38 +++ .../src/core/ui/SegmentedControl.stories.tsx | 135 ++++++++ .../editor/src/core/ui/SegmentedControl.tsx | 103 ++++++ .../src/{proprietary => core}/ui/Select.css | 0 .../src/{proprietary => core}/ui/Select.tsx | 0 .../{proprietary => core}/ui/SettingsRow.css | 0 .../ui/SettingsRow.stories.tsx | 0 .../{proprietary => core}/ui/SettingsRow.tsx | 0 .../ui/SettingsShell.css | 20 +- .../ui/SettingsShell.stories.tsx | 4 +- .../ui/SettingsShell.tsx | 62 ++-- .../src/{proprietary => core}/ui/Skeleton.css | 0 .../ui/Skeleton.stories.tsx | 0 .../src/{proprietary => core}/ui/Skeleton.tsx | 0 .../src/{proprietary => core}/ui/Slider.css | 0 .../src/{proprietary => core}/ui/Slider.tsx | 0 .../src/{proprietary => core}/ui/Spinner.css | 0 .../ui/Spinner.stories.tsx | 0 .../src/{proprietary => core}/ui/Spinner.tsx | 0 .../src/{proprietary => core}/ui/Stack.css | 0 .../ui/Stack.stories.tsx | 0 .../src/{proprietary => core}/ui/Stack.tsx | 0 .../src/{proprietary => core}/ui/StatTile.css | 0 .../ui/StatTile.stories.tsx | 0 .../src/{proprietary => core}/ui/StatTile.tsx | 0 .../{proprietary => core}/ui/StatusBadge.css | 0 .../ui/StatusBadge.stories.tsx | 0 .../{proprietary => core}/ui/StatusBadge.tsx | 0 .../ui/StepIndicator.css | 0 .../ui/StepIndicator.stories.tsx | 0 .../ui/StepIndicator.tsx | 0 .../src/{proprietary => core}/ui/Table.css | 0 .../ui/Table.stories.tsx | 0 .../src/{proprietary => core}/ui/Table.tsx | 0 .../src/{proprietary => core}/ui/Tabs.css | 0 .../{proprietary => core}/ui/Tabs.stories.tsx | 0 .../src/{proprietary => core}/ui/Tabs.tsx | 0 .../src/{proprietary => core}/ui/Toast.css | 13 +- .../ui/Toast.stories.tsx | 0 .../src/{proprietary => core}/ui/Toast.tsx | 18 +- .../{proprietary => core}/ui/ToggleSwitch.css | 0 .../ui/ToggleSwitch.stories.tsx | 0 .../{proprietary => core}/ui/ToggleSwitch.tsx | 0 frontend/editor/src/core/ui/accents.css | 101 ++++++ .../ui/ariaForwarding.test.tsx | 0 .../ui/ariaForwarding.ts | 0 frontend/editor/src/core/ui/controlSizes.ts | 9 + .../src/{proprietary => core}/ui/index.ts | 3 + .../desktop/components/ConnectionSettings.tsx | 9 +- .../components/DesktopOnboardingModal.tsx | 24 +- .../SetupWizard/DesktopOAuthButtons.tsx | 6 +- .../SetupWizard/SaaSLoginScreen.tsx | 13 +- .../components/SetupWizard/SelfHostedLink.tsx | 7 +- .../SetupWizard/ServerSelection.tsx | 15 +- .../desktop/components/SetupWizard/index.tsx | 24 +- .../shared/SelfHostedOfflineBanner.tsx | 22 +- .../configSections/DefaultAppSettings.tsx | 6 +- .../toolPicker/ToolPickerFooterExtensions.tsx | 8 +- .../src/desktop/routes/login/LoginHeader.tsx | 9 +- .../src/portal/components/AssistantButton.tsx | 7 +- .../src/portal/components/AssistantPanel.tsx | 20 +- .../components/ChatFABWidget.stories.tsx | 68 ++-- .../portal/components/ErrorBoundary.test.tsx | 12 +- .../editor/src/portal/components/Header.tsx | 25 +- .../src/portal/components/MocksToggle.tsx | 7 +- .../components/NotificationsDropdown.tsx | 20 +- .../portal/components/PipelineForkWizard.tsx | 13 +- .../src/portal/components/PolicySummary.tsx | 4 +- .../src/portal/components/PopularUseCases.tsx | 32 +- .../components/ProcessingStatusStrip.tsx | 4 +- .../src/portal/components/RecentActivity.tsx | 6 +- .../src/portal/components/SearchModal.tsx | 10 +- .../src/portal/components/SettingsModal.tsx | 15 +- .../editor/src/portal/components/Sidebar.tsx | 8 +- .../src/portal/components/SingleOpRunner.tsx | 22 +- .../src/portal/components/WelcomeCarousel.tsx | 9 +- .../account-link/LinkAccountCard.tsx | 4 +- .../account-link/LinkAccountModal.tsx | 2 +- .../account-link/LinkedInstancesTable.tsx | 4 +- .../agent-builder/AgentSelector.tsx | 10 +- .../agent-builder/BootstrapDialog.tsx | 2 +- .../components/agent-builder/EvalsPanel.tsx | 2 +- .../agent-builder/ScenariosPanel.tsx | 4 +- .../components/agent-builder/ToolsPanel.tsx | 4 +- .../agent-builder/VersionsPanel.tsx | 4 +- .../components/billing/EnterpriseUpsell.tsx | 6 +- .../components/billing/FreePdfEditorsCard.tsx | 4 +- .../components/billing/FreePlanView.tsx | 3 +- .../components/billing/InvoicesList.tsx | 2 +- .../components/billing/LinkAccountPrompt.tsx | 6 +- .../components/billing/PaymentMethodCard.tsx | 2 +- .../components/billing/SpendLimitCard.tsx | 11 +- .../billing/StripeCheckoutModal.tsx | 2 +- .../components/catalogue/ComponentCard.tsx | 2 +- .../catalogue/ComponentDetailModal.tsx | 4 +- .../catalogue/ComponentPropsTable.tsx | 2 +- .../components/docs/AuthenticationSection.tsx | 4 +- .../components/docs/ComponentsSection.tsx | 2 +- .../src/portal/components/docs/DocsNav.tsx | 10 +- .../components/docs/GettingStartedSection.tsx | 2 +- .../components/docs/PlaybooksSection.tsx | 4 +- .../components/docs/WebhooksSection.tsx | 2 +- .../editor-admin/CredentialRotationCard.tsx | 4 +- .../editor-admin/DeploymentTargets.tsx | 5 +- .../editor-admin/InstanceHealthTable.tsx | 13 +- .../editor-admin/OfflineActivationCard.tsx | 10 +- .../components/editor-admin/PairingPanel.tsx | 8 +- .../components/infrastructure/ApiKeyCard.tsx | 12 +- .../components/infrastructure/ApiKeysTab.tsx | 3 +- .../infrastructure/CreateKeyModal.tsx | 7 +- .../infrastructure/DeploymentsTab.tsx | 6 +- .../components/infrastructure/ModelsTab.tsx | 6 +- .../components/infrastructure/SecurityTab.tsx | 6 +- .../components/infrastructure/StorageTab.tsx | 2 +- .../components/infrastructure/infraFormat.ts | 12 +- .../components/pipelines/PipelineComposer.tsx | 17 +- .../pipelines/PipelineDetailCard.tsx | 20 +- .../components/pipelines/PipelinesTable.tsx | 2 +- .../policies/PolicyCategoryCard.tsx | 4 +- .../components/policies/PolicyDetailPanel.tsx | 18 +- .../components/policies/PolicyFieldRow.tsx | 2 +- .../components/policies/PolicySetupWizard.tsx | 16 +- .../components/procurement/ActionModal.tsx | 8 +- .../components/procurement/DealJourney.tsx | 4 +- .../components/procurement/DealStatusHero.tsx | 4 +- .../portal/components/procurement/DocRow.tsx | 14 +- .../components/procurement/DocumentLedger.tsx | 4 +- .../components/procurement/LockedState.tsx | 2 +- .../procurement/ProcurementAgreement.tsx | 4 +- .../procurement/ProcurementExtras.tsx | 4 +- .../procurement/ProcurementHome.tsx | 8 +- .../procurement/ProcurementModal.stories.tsx | 4 +- .../procurement/ProcurementStages.tsx | 14 +- .../components/procurement/QuoteBuilder.tsx | 14 +- .../components/sources/ConnectWizard.tsx | 10 +- .../components/sources/SourceDetailCard.tsx | 21 +- .../components/sources/SourceDetailPanel.tsx | 2 +- .../components/sources/SourcesTable.tsx | 4 +- .../portal/components/sources/sourceTypes.ts | 10 +- .../components/users/AccessControls.tsx | 4 +- .../components/users/InviteMemberModal.tsx | 2 +- .../portal/components/users/MembersTable.tsx | 23 +- .../src/portal/components/users/RolesGrid.tsx | 3 +- .../src/portal/components/users/format.ts | 19 +- frontend/editor/src/portal/mocks/docs.ts | 11 +- .../editor/src/portal/views/AgentBuilder.tsx | 2 +- frontend/editor/src/portal/views/Home.tsx | 43 +-- .../src/portal/views/Infrastructure.tsx | 2 +- .../src/portal/views/Pipelines.test.tsx | 13 +- .../editor/src/portal/views/Pipelines.tsx | 6 +- frontend/editor/src/portal/views/Policies.css | 74 +++++ frontend/editor/src/portal/views/Policies.tsx | 2 +- frontend/editor/src/portal/views/Sources.css | 10 +- .../editor/src/portal/views/Sources.test.tsx | 13 +- frontend/editor/src/portal/views/Sources.tsx | 10 +- frontend/editor/src/portal/views/Usage.tsx | 2 +- frontend/editor/src/portal/views/Users.tsx | 2 +- .../proprietary/auth/ui/EmailPasswordForm.tsx | 16 +- .../auth/ui/LoginRightCarousel.tsx | 11 +- .../src/proprietary/auth/ui/OAuthButtons.tsx | 85 +++-- .../proprietary/auth/ui/SpringLoginForm.tsx | 5 +- .../src/proprietary/auth/ui/auth-theme.css | 4 +- .../editor/src/proprietary/auth/ui/auth.css | 55 ++++ .../proprietary/billing/SpendCapControl.tsx | 12 +- .../proprietary/components/chat/ChatFAB.css | 8 + .../proprietary/components/chat/ChatFAB.tsx | 26 +- .../proprietary/components/chat/ChatPanel.css | 107 ++++++- .../proprietary/components/chat/ChatPanel.tsx | 20 +- .../components/chat/ChatQuickActions.tsx | 23 +- .../components/policies/Policies.css | 5 + .../components/policies/PoliciesSidebar.tsx | 37 ++- .../policies/PolicyDeleteConfirmModal.tsx | 7 +- .../components/policies/PolicyDetailPanel.tsx | 18 +- .../components/policies/PolicyFieldRow.tsx | 7 +- .../components/policies/PolicySetupWizard.tsx | 11 +- .../components/policies/PolicyToolConfig.tsx | 6 +- .../shared/ChangeUserPasswordModal.tsx | 22 +- .../components/shared/InviteMembersModal.tsx | 26 +- .../components/shared/ManageBillingButton.tsx | 4 +- .../components/shared/UpdateSeatsButton.tsx | 6 +- .../components/shared/UpdateSeatsModal.tsx | 4 +- .../components/shared/UpgradeBanner.tsx | 2 +- .../shared/config/OverviewHeader.tsx | 5 +- .../config/configSections/AccountSection.tsx | 22 +- .../configSections/AdminAdvancedSection.tsx | 6 +- .../configSections/AdminAuditSection.tsx | 6 +- .../configSections/AdminDatabaseSection.tsx | 36 ++- .../configSections/AdminGeneralSection.tsx | 4 +- .../configSections/AdminUsageSection.tsx | 35 +-- .../configSections/LoginAgreementEditor.tsx | 3 +- .../config/configSections/PeopleSection.tsx | 38 ++- .../configSections/TeamDetailsSection.tsx | 50 ++- .../config/configSections/TeamsSection.tsx | 42 ++- .../configSections/apiKeys/ApiKeySection.tsx | 27 +- .../configSections/apiKeys/RefreshModal.tsx | 7 +- .../audit/AuditChartsSection.tsx | 25 +- .../audit/AuditClearDataSection.tsx | 12 +- .../configSections/audit/AuditEventsTable.tsx | 28 +- .../audit/AuditExportSection.tsx | 21 +- .../configSections/audit/AuditFiltersForm.tsx | 28 +- .../plan/AvailablePlansSection.tsx | 5 +- .../configSections/plan/LicenseKeySection.tsx | 52 ++-- .../config/configSections/plan/PlanCard.tsx | 6 +- .../plan/StaticCheckoutModal.tsx | 8 +- .../configSections/plan/StaticPlanSection.tsx | 29 +- .../shared/stripeCheckout/StripeCheckout.tsx | 5 +- .../stripeCheckout/stages/EmailStage.tsx | 5 +- .../stripeCheckout/stages/ErrorStage.tsx | 5 +- .../stages/PlanSelectionStage.tsx | 15 +- .../stripeCheckout/stages/SuccessStage.tsx | 19 +- .../watchedFolders/CardExpansionModal.tsx | 6 +- .../DeleteFolderConfirmModal.tsx | 12 +- .../watchedFolders/WatchedFolderCard.tsx | 28 +- .../watchedFolders/WatchedFolderHomePage.tsx | 34 +- .../WatchedFolderManagementModal.tsx | 38 +-- .../watchedFolders/WatchedFolderSection.tsx | 10 +- .../WatchedFolderWorkbenchView.tsx | 99 +++--- .../components/workflow/ParticipantView.tsx | 10 +- .../src/proprietary/routes/InviteAccept.tsx | 10 +- .../editor/src/proprietary/routes/Landing.tsx | 5 +- .../src/proprietary/routes/Login.test.tsx | 16 +- .../editor/src/proprietary/routes/Login.tsx | 11 +- .../src/proprietary/routes/ShareLinkPage.tsx | 4 +- .../editor/src/proprietary/routes/Signup.tsx | 7 +- .../routes/login/NavigationLink.tsx | 5 +- .../routes/login/OAuthButtons.stories.tsx | 33 ++ .../proprietary/routes/signup/SignupForm.tsx | 3 +- frontend/editor/src/proprietary/ui/Button.css | 118 ------- .../src/proprietary/ui/Button.stories.tsx | 57 ---- frontend/editor/src/proprietary/ui/Button.tsx | 68 ---- frontend/editor/src/proprietary/ui/Chip.css | 96 ------ .../src/proprietary/ui/Chip.stories.tsx | 79 ----- frontend/editor/src/proprietary/ui/Chip.tsx | 88 ------ .../components/SignupRequiredBootstrap.tsx | 5 +- .../saas/components/auth/GuestUserBanner.css | 32 -- .../saas/components/auth/GuestUserBanner.tsx | 17 +- .../saas/components/shared/AppConfigModal.tsx | 12 +- .../shared/config/ProfilePictureCropper.tsx | 5 +- .../shared/config/configSections/ApiKeys.tsx | 3 +- .../config/configSections/McpSection.tsx | 13 +- .../shared/config/configSections/Overview.tsx | 64 ++-- .../configSections/PasswordSecurity.tsx | 6 +- .../components/tools/sign/SignSettings.tsx | 59 ++-- .../editor/src/saas/routes/AuthCallback.tsx | 4 +- frontend/editor/src/saas/routes/Login.tsx | 37 +-- .../editor/src/saas/routes/OAuthConsent.tsx | 18 +- .../editor/src/saas/routes/ResetPassword.tsx | 5 +- frontend/editor/src/saas/routes/Signup.tsx | 21 +- .../routes/authShared/GuestSignInButton.tsx | 9 +- .../src/saas/routes/authShared/saas-auth.css | 5 + .../saas/routes/login/EmailPasswordForm.tsx | 8 +- .../src/saas/routes/login/MagicLinkForm.tsx | 10 +- .../src/saas/routes/login/OAuthButtons.tsx | 29 +- .../editor/src/saas/styles/saas-theme.css | 36 +-- frontend/editor/tsconfig.portal.vite.json | 2 +- frontend/editor/vitest.config.ts | 2 +- frontend/eslint.config.mjs | 77 +++++ frontend/scripts/find-unused-css.mjs | 129 ++++++++ frontend/shared/components/index.ts | 45 +++ 592 files changed, 6399 insertions(+), 5057 deletions(-) create mode 100644 frontend/.storybook/declarations.d.ts create mode 100644 frontend/.storybook/tsconfig.json create mode 100644 frontend/editor/src/core/ui/ActionIcon.css create mode 100644 frontend/editor/src/core/ui/ActionIcon.stories.tsx create mode 100644 frontend/editor/src/core/ui/ActionIcon.tsx rename frontend/editor/src/{proprietary => core}/ui/Avatar.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Avatar.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Avatar.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Banner.css (85%) rename frontend/editor/src/{proprietary => core}/ui/Banner.stories.tsx (96%) rename frontend/editor/src/{proprietary => core}/ui/Banner.tsx (71%) create mode 100644 frontend/editor/src/core/ui/Button.css create mode 100644 frontend/editor/src/core/ui/Button.stories.tsx create mode 100644 frontend/editor/src/core/ui/Button.tsx rename frontend/editor/src/{proprietary => core}/ui/Card.css (74%) rename frontend/editor/src/{proprietary => core}/ui/Card.stories.tsx (82%) rename frontend/editor/src/{proprietary => core}/ui/Card.tsx (86%) rename frontend/editor/src/{proprietary => core}/ui/ChatFABButton.css (100%) rename frontend/editor/src/{proprietary => core}/ui/ChatFABButton.stories.tsx (90%) rename frontend/editor/src/{proprietary => core}/ui/ChatFABButton.tsx (84%) rename frontend/editor/src/{proprietary => core}/ui/ChatFABWindow.css (93%) rename frontend/editor/src/{proprietary => core}/ui/ChatFABWindow.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ChatFABWindow.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Checkbox.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Checkbox.tsx (100%) create mode 100644 frontend/editor/src/core/ui/Chip.css create mode 100644 frontend/editor/src/core/ui/Chip.stories.tsx create mode 100644 frontend/editor/src/core/ui/Chip.tsx rename frontend/editor/src/{proprietary => core}/ui/ChipFlow.css (100%) rename frontend/editor/src/{proprietary => core}/ui/ChipFlow.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ChipFlow.tsx (65%) rename frontend/editor/src/{proprietary => core}/ui/CodeBlock.css (100%) rename frontend/editor/src/{proprietary => core}/ui/CodeBlock.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/CodeBlock.tsx (66%) rename frontend/editor/src/{proprietary => core}/ui/Collapsible.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Collapsible.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Collapsible.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ColorInput.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/DataRow.css (100%) rename frontend/editor/src/{proprietary => core}/ui/DataRow.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/DataRow.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Drawer.css (83%) rename frontend/editor/src/{proprietary => core}/ui/Drawer.stories.tsx (91%) rename frontend/editor/src/{proprietary => core}/ui/Drawer.tsx (75%) rename frontend/editor/src/{proprietary => core}/ui/Dropdown.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Dropdown.stories.tsx (90%) rename frontend/editor/src/{proprietary => core}/ui/Dropdown.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/EmptyState.css (100%) rename frontend/editor/src/{proprietary => core}/ui/EmptyState.stories.tsx (90%) rename frontend/editor/src/{proprietary => core}/ui/EmptyState.tsx (100%) create mode 100644 frontend/editor/src/core/ui/FilePicker.tsx rename frontend/editor/src/{proprietary => core}/ui/FormField.css (100%) rename frontend/editor/src/{proprietary => core}/ui/FormField.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Forms.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/IconBadge.css (100%) rename frontend/editor/src/{proprietary => core}/ui/IconBadge.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/IconBadge.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Inline.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Inline.stories.tsx (88%) rename frontend/editor/src/{proprietary => core}/ui/Inline.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Input.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Input.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ListRow.css (100%) rename frontend/editor/src/{proprietary => core}/ui/ListRow.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ListRow.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MantineForms.css (100%) rename frontend/editor/src/{proprietary => core}/ui/MantineForms.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MethodBadge.css (100%) rename frontend/editor/src/{proprietary => core}/ui/MethodBadge.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MethodBadge.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MetricCard.css (100%) rename frontend/editor/src/{proprietary => core}/ui/MetricCard.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MetricCard.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MetricStrip.css (100%) rename frontend/editor/src/{proprietary => core}/ui/MetricStrip.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/MetricStrip.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Modal.css (83%) rename frontend/editor/src/{proprietary => core}/ui/Modal.tsx (66%) rename frontend/editor/src/{proprietary => core}/ui/MultiSelect.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/NavItem.css (100%) rename frontend/editor/src/{proprietary => core}/ui/NavItem.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/NavItem.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/NumberInput.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/PanelHeader.css (100%) rename frontend/editor/src/{proprietary => core}/ui/PanelHeader.stories.tsx (75%) rename frontend/editor/src/{proprietary => core}/ui/PanelHeader.tsx (94%) rename frontend/editor/src/{proprietary => core}/ui/ProgressBar.css (100%) rename frontend/editor/src/{proprietary => core}/ui/ProgressBar.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ProgressBar.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Radio.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Radio.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SectionDivider.css (100%) rename frontend/editor/src/{proprietary => core}/ui/SectionDivider.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SectionDivider.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SectionHeader.css (100%) rename frontend/editor/src/{proprietary => core}/ui/SectionHeader.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SectionHeader.tsx (100%) create mode 100644 frontend/editor/src/core/ui/SegmentedControl.css create mode 100644 frontend/editor/src/core/ui/SegmentedControl.stories.tsx create mode 100644 frontend/editor/src/core/ui/SegmentedControl.tsx rename frontend/editor/src/{proprietary => core}/ui/Select.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Select.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SettingsRow.css (100%) rename frontend/editor/src/{proprietary => core}/ui/SettingsRow.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SettingsRow.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/SettingsShell.css (88%) rename frontend/editor/src/{proprietary => core}/ui/SettingsShell.stories.tsx (94%) rename frontend/editor/src/{proprietary => core}/ui/SettingsShell.tsx (65%) rename frontend/editor/src/{proprietary => core}/ui/Skeleton.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Skeleton.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Skeleton.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Slider.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Slider.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Spinner.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Spinner.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Spinner.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Stack.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Stack.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Stack.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/StatTile.css (100%) rename frontend/editor/src/{proprietary => core}/ui/StatTile.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/StatTile.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/StatusBadge.css (100%) rename frontend/editor/src/{proprietary => core}/ui/StatusBadge.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/StatusBadge.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/StepIndicator.css (100%) rename frontend/editor/src/{proprietary => core}/ui/StepIndicator.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/StepIndicator.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Table.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Table.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Table.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Tabs.css (100%) rename frontend/editor/src/{proprietary => core}/ui/Tabs.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Tabs.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Toast.css (81%) rename frontend/editor/src/{proprietary => core}/ui/Toast.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/Toast.tsx (90%) rename frontend/editor/src/{proprietary => core}/ui/ToggleSwitch.css (100%) rename frontend/editor/src/{proprietary => core}/ui/ToggleSwitch.stories.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ToggleSwitch.tsx (100%) create mode 100644 frontend/editor/src/core/ui/accents.css rename frontend/editor/src/{proprietary => core}/ui/ariaForwarding.test.tsx (100%) rename frontend/editor/src/{proprietary => core}/ui/ariaForwarding.ts (100%) create mode 100644 frontend/editor/src/core/ui/controlSizes.ts rename frontend/editor/src/{proprietary => core}/ui/index.ts (92%) create mode 100644 frontend/editor/src/proprietary/routes/login/OAuthButtons.stories.tsx delete mode 100644 frontend/editor/src/proprietary/ui/Button.css delete mode 100644 frontend/editor/src/proprietary/ui/Button.stories.tsx delete mode 100644 frontend/editor/src/proprietary/ui/Button.tsx delete mode 100644 frontend/editor/src/proprietary/ui/Chip.css delete mode 100644 frontend/editor/src/proprietary/ui/Chip.stories.tsx delete mode 100644 frontend/editor/src/proprietary/ui/Chip.tsx create mode 100644 frontend/scripts/find-unused-css.mjs create mode 100644 frontend/shared/components/index.ts diff --git a/frontend/.storybook/declarations.d.ts b/frontend/.storybook/declarations.d.ts new file mode 100644 index 0000000000..ef6d741f62 --- /dev/null +++ b/frontend/.storybook/declarations.d.ts @@ -0,0 +1 @@ +declare module "*.css" {} diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index cd601cf525..bab413a0e8 100644 --- a/frontend/.storybook/preview.tsx +++ b/frontend/.storybook/preview.tsx @@ -14,7 +14,7 @@ void React; import { TierProvider, type Tier } from "@portal/contexts/TierContext"; import { LinkProvider, type LinkState } from "@portal/contexts/LinkContext"; -import { ThemeProvider } from "@portal/contexts/ThemeContext"; +import { ThemeProvider, useTheme } from "@portal/contexts/ThemeContext"; import { UIProvider } from "@portal/contexts/UIContext"; import { SuiProvider } from "@portal/theme/SuiProvider"; import { handlers } from "@portal/mocks/handlers"; @@ -78,13 +78,21 @@ function TierKey({ ); } -/** Keeps useTheme() and the data-theme attribute in sync. */ -function ThemeWatcher() { +/** + * Makes the Storybook toolbar the SINGLE source of truth for the theme. + */ +function ThemeBridge({ + theme, + children, +}: { + theme: "light" | "dark"; + children: React.ReactNode; +}) { + const { setTheme } = useTheme(); useEffect(() => { - // The addon-themes decorator already sets data-theme on . - // We just read it on mount so ThemeProvider picks it up. - }, []); - return null; + setTheme(theme); + }, [theme, setTheme]); + return <>{children}; } const withProviders: Decorator = (Story, context) => { @@ -101,20 +109,21 @@ const withProviders: Decorator = (Story, context) => { return ( - - {/* LinkProvider must wrap TierProvider: TierContext derives its tier - from useLink() (matches App.tsx's nesting). */} - - - - - - - - - - - + + + {/* LinkProvider must wrap TierProvider: TierContext derives its tier + from useLink() (matches App.tsx's nesting). */} + + + + + + + + + + + ); diff --git a/frontend/.storybook/tsconfig.json b/frontend/.storybook/tsconfig.json new file mode 100644 index 0000000000..9615d34a22 --- /dev/null +++ b/frontend/.storybook/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es2022", + "jsx": "react-jsx", + "module": "esnext", + "moduleResolution": "bundler", + "paths": { + "@app/*": [ + "../editor/src/desktop/*", + "../editor/src/proprietary/*", + "../editor/src/core/*" + ], + "@core/*": ["../editor/src/core/*"], + "@proprietary/*": ["../editor/src/proprietary/*"], + "@portal/*": ["../editor/src/portal/*"] + }, + "resolveJsonModule": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true + }, + "include": ["./**/*"] +} diff --git a/frontend/editor/public/locales/en-US/translation.toml b/frontend/editor/public/locales/en-US/translation.toml index 241289d1db..6d827eb895 100644 --- a/frontend/editor/public/locales/en-US/translation.toml +++ b/frontend/editor/public/locales/en-US/translation.toml @@ -7,6 +7,7 @@ black = "Black" blue = "Blue" cancel = "Cancel" chooseFile = "Choose File" +clear = "Clear" close = "Close" comingSoon = "Coming soon" confirm = "Confirm" @@ -87,6 +88,7 @@ processingCompleteMultiple = "{{count}} files are ready." property = "Property" quickPosition = "Quick Position" red = "Red" +remove = "Remove" reset = "Reset" review = "Review" save = "Save" @@ -180,6 +182,7 @@ addMoreFiles = "Add more files..." attachments = "Select Attachments" info = "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel." placeholder = "Choose files..." +removeFile = "Remove file" selectedFiles = "Selected Files" submit = "Add Attachments" @@ -1628,6 +1631,9 @@ title = "Do you want to help make Stirling PDF better?" tags = "annotate,highlight,draw,markup,comment,notes,review,redline,feedback,markup tools,sticky notes,shapes,arrows,text box,freehand" [annotation] +alignCenter = "Align center" +alignLeft = "Align left" +alignRight = "Align right" annotationStyle = "Annotation style" backgroundColor = "Background color" borderOff = "Border: Off" @@ -2531,6 +2537,7 @@ title = "Rule of thumb" [certSign.source] device = "This device" +noOtherSources = "No other certificate sources are available." server = "Server" stepTitle = "Certificate source" upload = "Upload" @@ -3595,7 +3602,9 @@ makeCopy = "Make a copy" mobileShort = "Mobile" mobileUpload = "Mobile Upload" mobileUploadNotAvailable = "Mobile upload not enabled" +moreOptions = "More options" myFiles = "My Files" +nextFile = "Next file" noFiles = "No files available" noFilesFound = "No files found matching your search" noRecentFiles = "No recent files found" @@ -3605,6 +3614,7 @@ openInFileEditor = "Open in File Editor" openInPageEditor = "Open in Page Editor" owner = "Owner" ownerUnknown = "Unknown" +previousFile = "Previous file" recent = "Recent" removeBoth = "Remove from both" removeFilePrompt = "This file is saved on this device and on your server. Where would you like to remove it from?" @@ -4614,10 +4624,10 @@ welcomeTitle = "You've been invited!" [landing] addFiles = "Add Files" heroSubtitle = "Drop in or add an existing PDF to get started." -heroTitle = "Stirling PDF" mobileUpload = "Upload from Mobile" openFromComputer = "Open from computer" uploadFromComputer = "Upload from computer" +workbenchEmptyStateHero = "Drop a PDF anywhere" [language] direction = "ltr" @@ -4930,6 +4940,7 @@ title = "Output" [onboarding] activeFiles = "The Active Files view shows all of the PDFs you have loaded into the tool, and allows you to select which ones to process." allTools = "This is the Tools panel, where you can browse and select from all available PDF tools." +close = "Close" cropSettings = "Now that we've selected the file we want crop, we can configure the Crop tool to choose the area that we want to crop the PDF to." fileCheckbox = "Clicking one of the files selects it for processing. You can select multiple files for batch operations." fileReplacement = "The modified file will replace the original file in the Workbench automatically, allowing you to easily run it through more tools." @@ -4955,6 +4966,7 @@ skipTheTour = "Skip the tour" [onboarding.desktopInstall] body = "Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer." +selectOs = "Select operating system" title = "Download" titleWithOs = "Download for {{osLabel}}" @@ -5566,7 +5578,9 @@ viewLabel = "PDF Editor" [pdfTextEditor.actions] applyChanges = "Apply Changes" +clearText = "Clear text" downloadCopy = "Download Copy" +moreOptions = "More options" reset = "Reset Changes" [pdfTextEditor.badges] @@ -9670,7 +9684,9 @@ memberRemoved = "Member removed successfully" namePlaceholder = "Enter team name" personal = "Personal" removeError = "Failed to remove member" +renameCancel = "Cancel rename" renameError = "Failed to rename team" +renameSubmit = "Save team name" renameSuccess = "Team renamed successfully" [team.invitationBanner] @@ -9686,6 +9702,7 @@ sendButton = "Send Invitation" title = "Invite Team Member" [team.members] +actions = "Member actions" emailColumn = "Email" empty = "No team members yet" nameColumn = "Name" @@ -10041,14 +10058,23 @@ zoomOut = "Zoom Out" [viewer.attachments] addAttachment = "Add attachment" close = "Close attachments" +closeSidebar = "Close attachments sidebar" +download = "Download attachment" empty = "No attachments in this document" loading = "Loading attachments..." noDocument = "Open a PDF to view its attachments." noMatch = "No attachments match your search" noSupport = "Attachment support is unavailable for this viewer." +retry = "Retry" searchPlaceholder = "Search attachments" title = "Attachments" +[viewer.bookmarks] +bookmarkTitle = "Bookmark title" +closeSidebar = "Close bookmarks sidebar" +collapseAll = "Collapse all bookmarks" +expandAll = "Expand all bookmarks" + [viewer.comments] addComment = "Add comment" addCommentPlaceholder = "Add comment..." @@ -10059,6 +10085,7 @@ clearAll = "Clear all comments" clearAllDescription = "This removes comments and replies from the sidebar while keeping any attached annotations in the document." clearAllTitle = "Clear all comments?" close = "Close comments" +closeSidebar = "Close comments sidebar" deleteAnnotationAndComment = "Delete annotation & comment" deleteDescription = "This annotation has a comment attached. You can remove just the comment from the sidebar while keeping the annotation, or delete everything." deleteTitle = "Remove annotation from comments?" @@ -10090,6 +10117,11 @@ title = "Form Fields" unsavedBadge = "Unsaved" unsavedDesc = "You have unsaved changes" +[viewer.layers] +closeSidebar = "Close layers sidebar" +hideAll = "Hide all layers" +showAll = "Show all layers" + [viewer.link] delete = "Delete link" @@ -10120,6 +10152,9 @@ resultsOf = "of {{total}}" [viewer.signature] delete = "Delete signature" +[viewer.thumbnails] +closeSidebar = "Close thumbnails sidebar" + [viewPdf] tags = "view,read,annotate,text,image,highlight,edit" title = "View/Edit PDF" @@ -10546,6 +10581,7 @@ loading = "Loading people..." locked = "locked" lockedBadge = "Locked" loginRequired = "Enable login mode first" +memberActions = "Member actions" noMembersFound = "No members found" role = "Role" searchMembers = "Search members..." @@ -10555,6 +10591,7 @@ unlockAccount = "Unlock Account" unlockUserError = "Failed to unlock user account" unlockUserSuccess = "User account unlocked successfully" user = "User" +userInfo = "User info" [workspace.people.actions] upgrade = "Upgrade" @@ -10700,6 +10737,7 @@ removeMemberError = "Failed to remove user from team" removeMemberSuccess = "User removed from team" renameTeamLabel = "Rename Team" system = "System" +teamActions = "Team actions" teamName = "Team Name" teamNotFound = "Team not found" title = "Teams" diff --git a/frontend/editor/src/cloud/components/onboarding/renderButtons.tsx b/frontend/editor/src/cloud/components/onboarding/renderButtons.tsx index f2857af460..7ff108d121 100644 --- a/frontend/editor/src/cloud/components/onboarding/renderButtons.tsx +++ b/frontend/editor/src/cloud/components/onboarding/renderButtons.tsx @@ -1,5 +1,7 @@ import React from "react"; -import { Button, Group, ActionIcon } from "@mantine/core"; +import { Group } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import { TFunction } from "i18next"; import { @@ -31,22 +33,6 @@ export function renderButtons({ (btn) => btn.group === "right", ); - const buttonStyles = (variant: ButtonDefinition["variant"]) => - variant === "primary" - ? { - root: { - background: "var(--onboarding-primary-button-bg)", - color: "var(--onboarding-primary-button-text)", - }, - } - : { - root: { - background: "var(--onboarding-secondary-button-bg)", - border: "1px solid var(--onboarding-secondary-button-border)", - color: "var(--onboarding-secondary-button-text)", - }, - }; - const resolveButtonLabel = (button: ButtonDefinition) => { // Translate the label (it's a translation key) const label = button.label ?? ""; @@ -65,20 +51,15 @@ export function renderButtons({ onAction(button.action)} - radius="md" - size={40} + size="lg" + variant="secondary" + accent="neutral" disabled={disabled} - styles={{ - root: { - background: "var(--onboarding-secondary-button-bg)", - border: "1px solid var(--onboarding-secondary-button-border)", - color: "var(--onboarding-secondary-button-text)", - }, - }} + aria-label={t("onboarding.buttons.back", "Back")} > - {button.icon === "chevron-left" && ( + {button.icon === "chevron-left" ? ( - )} + ) : null} ); } @@ -91,7 +72,8 @@ export function renderButtons({ key={button.key} onClick={() => onAction(button.action)} disabled={disabled} - styles={buttonStyles(variant)} + variant={variant === "primary" ? "primary" : "secondary"} + accent="neutral" > {label} diff --git a/frontend/editor/src/cloud/components/onboarding/slides/TeamSlide.tsx b/frontend/editor/src/cloud/components/onboarding/slides/TeamSlide.tsx index 03eadf0f4c..a1948f2f06 100644 --- a/frontend/editor/src/cloud/components/onboarding/slides/TeamSlide.tsx +++ b/frontend/editor/src/cloud/components/onboarding/slides/TeamSlide.tsx @@ -1,5 +1,6 @@ import React, { useEffect, useState } from "react"; -import { Badge, Button, TextInput } from "@mantine/core"; +import { Badge, TextInput } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import { SlideConfig } from "@app/types/types"; import { createLightSlideBackground } from "@app/components/onboarding/slides/unifiedBackgroundConfig"; diff --git a/frontend/editor/src/cloud/components/shared/FreeLimitReachedModal.tsx b/frontend/editor/src/cloud/components/shared/FreeLimitReachedModal.tsx index 7db30887e7..177a15b7af 100644 --- a/frontend/editor/src/cloud/components/shared/FreeLimitReachedModal.tsx +++ b/frontend/editor/src/cloud/components/shared/FreeLimitReachedModal.tsx @@ -1,5 +1,6 @@ import { useMemo } from "react"; -import { Modal, Stack, Button } from "@mantine/core"; +import { Modal, Stack } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import CelebrationIcon from "@mui/icons-material/CelebrationOutlined"; import AnimatedSlideBackground from "@app/components/onboarding/slides/AnimatedSlideBackground"; @@ -169,7 +170,7 @@ export function FreeLimitReachedModal({ onClose }: FreeLimitReachedModalProps) { > + {open && (
    @@ -446,16 +447,16 @@ function CapReachedHelp() { const [open, setOpen] = useState(false); return (
    - + {open && (
    @@ -656,7 +657,7 @@ function StripePortalLink({ onClick={handleClick} loading={loading} rightSection={} - variant="light" + variant="secondary" > {t("payg.stripe.open", "Open billing portal")} diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css b/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css index 17ef96e8b3..6ade6c7b6d 100644 --- a/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css +++ b/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.css @@ -217,25 +217,6 @@ border-top: 1px solid var(--payg-divider); padding-top: 16px; } -.paygf-cta__button { - padding: 13px 22px; - border: none; - border-radius: 11px; - background: linear-gradient(135deg, var(--payg-accent) 0%, #6c5ce7 100%); - color: white; - font-weight: 600; - font-size: 0.95rem; - font-family: inherit; - cursor: pointer; - transition: - transform 120ms ease, - box-shadow 120ms ease; - white-space: nowrap; -} -.paygf-cta__button:hover { - transform: translateY(-1px); - box-shadow: 0 8px 22px -6px rgba(10, 139, 255, 0.55); -} .paygf-cta__reassurance { margin: 0; font-size: 0.78rem; diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.tsx b/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.tsx index 330bffa71e..ae3738bd5f 100644 --- a/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.tsx +++ b/frontend/editor/src/cloud/components/shared/config/configSections/PaygFree.tsx @@ -25,6 +25,7 @@ */ import React, { useState } from "react"; import { Stack } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import BoltIcon from "@mui/icons-material/BoltRounded"; import AllInclusiveIcon from "@mui/icons-material/AllInclusiveRounded"; import CheckIcon from "@mui/icons-material/CheckRounded"; @@ -171,14 +172,14 @@ function ProcessorCard({ snap, isLeader, onTurnOn }: ProcessorCardProps) { {isLeader ? ( <> - + {t( "payg.free.cta.reassurance", diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css b/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css index 90083fb80e..bc9ce0cef8 100644 --- a/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css +++ b/frontend/editor/src/cloud/components/shared/config/configSections/SpendCapControl.css @@ -22,10 +22,10 @@ gap: 14px; } [data-mantine-color-scheme="dark"] .scc { - --scc-accent-text: #66b8ff; - --scc-accent-soft: rgba(10, 139, 255, 0.16); - --scc-chip-bg: #272d35; - --scc-chip-border: #3d444e; + --scc-accent-text: #7ab4ff; + --scc-accent-soft: rgba(79, 142, 245, 0.16); + --scc-chip-bg: #1c2340; + --scc-chip-border: #2d3560; } /* ── Inline row: presets · custom · no-cap · (save) ──────────────────── */ diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/StripeCheckoutPanel.tsx b/frontend/editor/src/cloud/components/shared/config/configSections/StripeCheckoutPanel.tsx index 1ffc9f4ee2..03584f11de 100644 --- a/frontend/editor/src/cloud/components/shared/config/configSections/StripeCheckoutPanel.tsx +++ b/frontend/editor/src/cloud/components/shared/config/configSections/StripeCheckoutPanel.tsx @@ -64,6 +64,7 @@ */ import React, { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui/Button"; import { useAuth } from "@app/auth/UseSession"; import { createCheckoutSession, @@ -267,17 +268,12 @@ const StripeCheckoutPanel: React.FC = ({ )}
    - +
    ); diff --git a/frontend/editor/src/cloud/components/shared/config/configSections/TeamSection.tsx b/frontend/editor/src/cloud/components/shared/config/configSections/TeamSection.tsx index 6755a4d746..44fc59c738 100644 --- a/frontend/editor/src/cloud/components/shared/config/configSections/TeamSection.tsx +++ b/frontend/editor/src/cloud/components/shared/config/configSections/TeamSection.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from "react"; import { - Button, TextInput, Group, Text, @@ -8,9 +7,10 @@ import { Alert, Table, Badge, - ActionIcon, Menu, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import { useSaaSTeam } from "@app/contexts/SaaSTeamContext"; import LocalIcon from "@app/components/shared/LocalIcon"; @@ -233,19 +233,18 @@ const TeamSection: React.FC = () => { }} /> @@ -257,7 +256,7 @@ const TeamSection: React.FC = () => { {isTeamLeader && !isPersonalTeam && ( {
    {!isPersonalTeam && !isTeamLeader && !isEditingName && ( + )}

    {step === "confirm" @@ -170,14 +172,13 @@ export default function UpgradeModal({ )}

- + {/* Step indicator. Hidden on the confirmation panel since the @@ -198,13 +199,13 @@ export default function UpgradeModal({ "{{symbol}}{{amount}} / month", { symbol: sym, amount: effectiveCap }, )} - + ) : ( @@ -264,36 +265,23 @@ export default function UpgradeModal({
{step === "cap" && ( <> - - + + )} {step === "confirm" && ( - + )}
diff --git a/frontend/editor/src/core/assets/login/github.svg b/frontend/editor/src/core/assets/login/github.svg index 651eaac2b8..1174b67928 100644 --- a/frontend/editor/src/core/assets/login/github.svg +++ b/frontend/editor/src/core/assets/login/github.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/editor/src/core/components/StorageStatsCard.tsx b/frontend/editor/src/core/components/StorageStatsCard.tsx index 468d24fe37..186b56c4ca 100644 --- a/frontend/editor/src/core/components/StorageStatsCard.tsx +++ b/frontend/editor/src/core/components/StorageStatsCard.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { Card, Group, Text, Button, Progress } from "@mantine/core"; +import { Card, Group, Text, Progress } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import StorageIcon from "@mui/icons-material/Storage"; import DeleteIcon from "@mui/icons-material/Delete"; @@ -58,21 +59,16 @@ const StorageStatsCard: React.FC = ({ {filesCount > 0 && ( )} - diff --git a/frontend/editor/src/core/components/annotation/shared/ColorControl.tsx b/frontend/editor/src/core/components/annotation/shared/ColorControl.tsx index ca41f0f6a2..524314ee62 100644 --- a/frontend/editor/src/core/components/annotation/shared/ColorControl.tsx +++ b/frontend/editor/src/core/components/annotation/shared/ColorControl.tsx @@ -1,5 +1,4 @@ import { - ActionIcon, Tooltip, Popover, Stack, @@ -10,6 +9,7 @@ import { import { useState, useCallback, useEffect } from "react"; import { useTranslation } from "react-i18next"; import ColorizeIcon from "@mui/icons-material/Colorize"; +import { ActionIcon } from "@app/ui/ActionIcon"; // safari and firefox do not support the eye dropper API, only edge, chrome and opera do. // the button is hidden in the UI if the API is not supported. @@ -66,24 +66,12 @@ export function ColorControl({ setOpened(!opened)} disabled={disabled} - styles={{ - root: { - flexShrink: 0, - backgroundColor: "var(--bg-raised)", - border: "1px solid var(--border-default)", - color: "var(--text-secondary)", - "&:hover": { - backgroundColor: "var(--hover-bg)", - borderColor: "var(--border-strong)", - color: "var(--text-primary)", - }, - }, - }} > @@ -117,11 +105,14 @@ export function ColorControl({ label={t("color.eyeDropper.tooltip", "Pick colour from screen")} > diff --git a/frontend/editor/src/core/components/annotation/shared/ColorPicker.tsx b/frontend/editor/src/core/components/annotation/shared/ColorPicker.tsx index e12db7f340..ec854426e6 100644 --- a/frontend/editor/src/core/components/annotation/shared/ColorPicker.tsx +++ b/frontend/editor/src/core/components/annotation/shared/ColorPicker.tsx @@ -4,13 +4,12 @@ import { Stack, ColorPicker as MantineColorPicker, Group, - Button, ColorSwatch, Slider, Text, } from "@mantine/core"; import { useTranslation } from "react-i18next"; - +import { Button } from "@app/ui/Button"; interface ColorPickerProps { isOpen: boolean; onClose: () => void; diff --git a/frontend/editor/src/core/components/annotation/shared/DrawingCanvas.tsx b/frontend/editor/src/core/components/annotation/shared/DrawingCanvas.tsx index 08808b5b61..c10d9d9023 100644 --- a/frontend/editor/src/core/components/annotation/shared/DrawingCanvas.tsx +++ b/frontend/editor/src/core/components/annotation/shared/DrawingCanvas.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useRef, useState } from "react"; -import { Paper, Button, Modal, Stack, Text, Group } from "@mantine/core"; +import { Paper, Modal, Stack, Text, Group } from "@mantine/core"; import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui/Button"; import { ColorSwatchButton } from "@app/components/annotation/shared/ColorPicker"; import PenSizeSelector from "@app/components/tools/sign/PenSizeSelector"; import SignaturePad from "signature_pad"; @@ -331,7 +332,7 @@ export const DrawingCanvas: React.FC = ({
- diff --git a/frontend/editor/src/core/components/annotation/shared/DrawingControls.tsx b/frontend/editor/src/core/components/annotation/shared/DrawingControls.tsx index 7118a817e8..0844125117 100644 --- a/frontend/editor/src/core/components/annotation/shared/DrawingControls.tsx +++ b/frontend/editor/src/core/components/annotation/shared/DrawingControls.tsx @@ -1,7 +1,9 @@ import React from "react"; -import { Group, Button, ActionIcon, Tooltip } from "@mantine/core"; +import { Group, Tooltip } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { LocalIcon } from "@app/components/shared/LocalIcon"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; interface DrawingControlsProps { onUndo?: () => void; @@ -37,12 +39,11 @@ export const DrawingControls: React.FC = ({ {onUndo && ( = ({ {onRedo && ( = ({ {/* Place Signature Button */} {showPlaceButton && onPlaceSignature && ( diff --git a/frontend/editor/src/core/components/annotation/shared/OpacityControl.tsx b/frontend/editor/src/core/components/annotation/shared/OpacityControl.tsx index 496b5c4070..3853fa32c2 100644 --- a/frontend/editor/src/core/components/annotation/shared/OpacityControl.tsx +++ b/frontend/editor/src/core/components/annotation/shared/OpacityControl.tsx @@ -1,14 +1,8 @@ -import { - ActionIcon, - Tooltip, - Popover, - Stack, - Slider, - Text, -} from "@mantine/core"; +import { Tooltip, Popover, Stack, Slider, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { useState } from "react"; import OpacityIcon from "@mui/icons-material/Opacity"; +import { ActionIcon } from "@app/ui/ActionIcon"; interface OpacityControlProps { value: number; // 0-100 @@ -29,24 +23,12 @@ export function OpacityControl({ setOpened(!opened)} disabled={disabled} - styles={{ - root: { - flexShrink: 0, - backgroundColor: "var(--bg-raised)", - border: "1px solid var(--border-default)", - color: "var(--text-secondary)", - "&:hover": { - backgroundColor: "var(--hover-bg)", - borderColor: "var(--border-strong)", - color: "var(--text-primary)", - }, - }, - }} > diff --git a/frontend/editor/src/core/components/annotation/shared/PropertiesPopover.tsx b/frontend/editor/src/core/components/annotation/shared/PropertiesPopover.tsx index 5f23b81ede..2f2a42b982 100644 --- a/frontend/editor/src/core/components/annotation/shared/PropertiesPopover.tsx +++ b/frontend/editor/src/core/components/annotation/shared/PropertiesPopover.tsx @@ -1,14 +1,7 @@ -import { - ActionIcon, - Tooltip, - Popover, - Stack, - Slider, - Text, - Group, - Button, -} from "@mantine/core"; +import { Tooltip, Popover, Stack, Slider, Text, Group } from "@mantine/core"; import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useState } from "react"; import type { TrackedAnnotation } from "@embedpdf/plugin-annotation"; import type { PdfAnnotationObject } from "@embedpdf/models"; @@ -106,21 +99,24 @@ export function PropertiesPopover({ onUpdate({ textAlign: 0 })} size="md" > onUpdate({ textAlign: 1 })} size="md" > onUpdate({ textAlign: 2 })} size="md" > @@ -176,8 +172,8 @@ export function PropertiesPopover({ />
- - @@ -633,14 +626,10 @@ const FileEditorThumbnail = ({ {file.name} - - diff --git a/frontend/editor/src/core/components/fileManager/CompactFileDetails.tsx b/frontend/editor/src/core/components/fileManager/CompactFileDetails.tsx index 09ca9a10b1..11657cc288 100644 --- a/frontend/editor/src/core/components/fileManager/CompactFileDetails.tsx +++ b/frontend/editor/src/core/components/fileManager/CompactFileDetails.tsx @@ -1,5 +1,7 @@ import React from "react"; -import { Stack, Box, Text, Button, ActionIcon, Center } from "@mantine/core"; +import { Stack, Box, Text, Center } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; @@ -128,18 +130,20 @@ const CompactFileDetails: React.FC = ({ {hasMultipleFiles && ( @@ -150,16 +154,10 @@ const CompactFileDetails: React.FC = ({ {/* Action Button */} {!shouldHideGoogleDrive && ( + {fieldsOpen && (
} - variant="default" + variant="secondary" onClick={onOpenVersionHistory} > {t( @@ -291,7 +300,6 @@ export function FileDetailsPanel({
@@ -309,7 +311,7 @@ function EmptyState({ ) : ( @@ -942,7 +935,7 @@ export default function FileManagerView() { ) : (
)} @@ -1147,8 +1139,8 @@ export default function FileManagerView() { w={280} >
@@ -1712,8 +1702,8 @@ function Breadcrumbs() { const isLast = idx === trail.length - 1; return ( - + {!isLast && ( {FOLDER_COLOR_PALETTE.map((c) => ( - + ); } diff --git a/frontend/editor/src/core/components/filesPage/FolderNameDialog.tsx b/frontend/editor/src/core/components/filesPage/FolderNameDialog.tsx index 4197d652ed..62858076cd 100644 --- a/frontend/editor/src/core/components/filesPage/FolderNameDialog.tsx +++ b/frontend/editor/src/core/components/filesPage/FolderNameDialog.tsx @@ -1,8 +1,10 @@ import React, { useEffect, useState } from "react"; import { useTranslation } from "react-i18next"; -import { Alert, Button, Group, Modal, Stack, TextInput } from "@mantine/core"; +import { Alert, Group, Modal, Stack, TextInput } from "@mantine/core"; import ErrorOutlineIcon from "@mui/icons-material/ErrorOutlined"; +import { Button } from "@app/ui/Button"; + interface FolderNameDialogProps { opened: boolean; title: string; @@ -94,7 +96,7 @@ export function FolderNameDialog({ )} - + ); } diff --git a/frontend/editor/src/core/components/filesPage/VersionTimeline.tsx b/frontend/editor/src/core/components/filesPage/VersionTimeline.tsx index 937db8c384..0b6a75878b 100644 --- a/frontend/editor/src/core/components/filesPage/VersionTimeline.tsx +++ b/frontend/editor/src/core/components/filesPage/VersionTimeline.tsx @@ -1,6 +1,8 @@ import { useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; -import { ActionIcon, Badge, Menu } from "@mantine/core"; +import { Badge, Menu } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import DeleteIcon from "@mui/icons-material/Delete"; import DownloadIcon from "@mui/icons-material/Download"; @@ -144,8 +146,8 @@ export function VersionTimeline({ )} - + ); } @@ -181,24 +183,31 @@ export function VersionTimeline({ )}
- +
{formatFileSize(v.size)} {v.lastModified ? ( @@ -230,7 +232,7 @@ export function VersionTimeline({ {collapsible && showAllCollapsed && ( - + )}
); diff --git a/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx b/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx index fc7914db55..86a087f325 100644 --- a/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx +++ b/frontend/editor/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx @@ -1,5 +1,7 @@ import React from "react"; -import { Button, Group, ActionIcon } from "@mantine/core"; +import { Group } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; +import { Button } from "@app/ui/Button"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import { useTranslation } from "react-i18next"; import { @@ -33,22 +35,6 @@ export function SlideButtons({ (btn) => btn.group === "right", ); - const buttonStyles = (variant: ButtonDefinition["variant"]) => - variant === "primary" - ? { - root: { - background: "var(--onboarding-primary-button-bg)", - color: "var(--onboarding-primary-button-text)", - }, - } - : { - root: { - background: "var(--onboarding-secondary-button-bg)", - border: "1px solid var(--onboarding-secondary-button-border)", - color: "var(--onboarding-secondary-button-text)", - }, - }; - const resolveButtonLabel = (button: ButtonDefinition) => { // Special case: override "See Plans" with "Upgrade now" when over limit if ( @@ -77,20 +63,14 @@ export function SlideButtons({ onAction(button.action)} - radius="md" - size={40} + variant="secondary" + accent="neutral" disabled={disabled} - styles={{ - root: { - background: "var(--onboarding-secondary-button-bg)", - border: "1px solid var(--onboarding-secondary-button-border)", - color: "var(--onboarding-secondary-button-text)", - }, - }} + aria-label={t("onboarding.buttons.back", "Back")} > - {button.icon === "chevron-left" && ( + {button.icon === "chevron-left" ? ( - )} + ) : null} ); } @@ -103,7 +83,10 @@ export function SlideButtons({ key={button.key} onClick={() => onAction(button.action)} disabled={disabled} - styles={buttonStyles(variant)} + variant={variant === "primary" ? "primary" : "secondary"} + accent={ + button.accent ?? (variant === "primary" ? "default" : "neutral") + } > {label} diff --git a/frontend/editor/src/core/components/onboarding/OnboardingModalSlide.tsx b/frontend/editor/src/core/components/onboarding/OnboardingModalSlide.tsx index b1bc731d52..b8135739bd 100644 --- a/frontend/editor/src/core/components/onboarding/OnboardingModalSlide.tsx +++ b/frontend/editor/src/core/components/onboarding/OnboardingModalSlide.tsx @@ -6,9 +6,10 @@ */ import React from "react"; -import { Modal, Stack, ActionIcon } from "@mantine/core"; +import { Modal, Stack } from "@mantine/core"; +import { useTranslation } from "react-i18next"; +import { ActionIcon } from "@app/ui/ActionIcon"; import DiamondOutlinedIcon from "@mui/icons-material/DiamondOutlined"; -import CloseIcon from "@mui/icons-material/Close"; import type { SlideDefinition, @@ -45,6 +46,7 @@ export default function OnboardingModalSlide({ onAction, allowDismiss = true, }: OnboardingModalSlideProps) { + const { t } = useTranslation(); const renderHero = () => { if (slideDefinition.hero.type === "dual-icon") { return ( @@ -139,8 +141,9 @@ export default function OnboardingModalSlide({ {allowDismiss && ( - + )}
diff --git a/frontend/editor/src/core/components/onboarding/OnboardingTour.tsx b/frontend/editor/src/core/components/onboarding/OnboardingTour.tsx index 1f3ca67692..c38d9f952b 100644 --- a/frontend/editor/src/core/components/onboarding/OnboardingTour.tsx +++ b/frontend/editor/src/core/components/onboarding/OnboardingTour.tsx @@ -8,7 +8,7 @@ import React from "react"; import { TourProvider, useTour, type StepType } from "@reactour/tour"; -import { CloseButton, ActionIcon } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import ArrowForwardIcon from "@mui/icons-material/ArrowForward"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import CheckIcon from "@mui/icons-material/Check"; @@ -137,7 +137,7 @@ export default function OnboardingTour({ setIsOpen, }) } - variant="subtle" + variant="tertiary" size="lg" aria-label={ isLast @@ -151,11 +151,15 @@ export default function OnboardingTour({ }} components={{ Close: ({ onClick }) => ( - + > + × + ), Content: ({ content }: { content: string }) => (
boolean; @@ -238,6 +241,7 @@ export const SLIDE_DEFINITIONS: Record = { type: "button", label: "onboarding.serverLicense.seePlans", variant: "primary", + accent: "premium", group: "right", action: "see-plans", }, diff --git a/frontend/editor/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx b/frontend/editor/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx index 6960b88c27..23566a5527 100644 --- a/frontend/editor/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx +++ b/frontend/editor/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Trans } from "react-i18next"; -import { Button } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import OpenInNewIcon from "@mui/icons-material/OpenInNew"; import i18n from "@app/i18n"; import { SlideConfig } from "@app/types/types"; @@ -36,7 +36,7 @@ export default function AnalyticsChoiceSlide({
diff --git a/frontend/editor/src/core/components/onboarding/slides/MFASetupSlide.tsx b/frontend/editor/src/core/components/onboarding/slides/MFASetupSlide.tsx index de76eadd6b..c018d69265 100644 --- a/frontend/editor/src/core/components/onboarding/slides/MFASetupSlide.tsx +++ b/frontend/editor/src/core/components/onboarding/slides/MFASetupSlide.tsx @@ -8,13 +8,13 @@ import { import { Alert, Box, - Button, Group, Loader, Stack, Text, TextInput, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { QRCodeSVG } from "qrcode.react"; import { useTranslation } from "react-i18next"; import { SlideConfig } from "@app/types/types"; @@ -210,8 +210,8 @@ function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) { - diff --git a/frontend/editor/src/core/components/pageEditor/FileThumbnail.tsx b/frontend/editor/src/core/components/pageEditor/FileThumbnail.tsx index 93ff3c2ab9..472fc141d7 100644 --- a/frontend/editor/src/core/components/pageEditor/FileThumbnail.tsx +++ b/frontend/editor/src/core/components/pageEditor/FileThumbnail.tsx @@ -5,7 +5,9 @@ import React, { useMemo, useEffect, } from "react"; -import { ActionIcon, CheckboxIndicator } from "@mantine/core"; +import { CheckboxIndicator } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import DeleteOutlineIcon from "@mui/icons-material/DeleteOutlined"; @@ -259,7 +261,7 @@ const FileThumbnail = ({ {/* Kebab menu */} { e.stopPropagation(); @@ -277,8 +279,18 @@ const FileThumbnail = ({ style={{ width: actionsWidth }} onClick={(e) => e.stopPropagation()} > - - - - + {terminology.download} +
- - + {t("delete", "Delete")} +
)} diff --git a/frontend/editor/src/core/components/pageEditor/PageEditorControls.tsx b/frontend/editor/src/core/components/pageEditor/PageEditorControls.tsx index 2e8653fa89..96762a9203 100644 --- a/frontend/editor/src/core/components/pageEditor/PageEditorControls.tsx +++ b/frontend/editor/src/core/components/pageEditor/PageEditorControls.tsx @@ -1,4 +1,5 @@ -import { Tooltip, ActionIcon } from "@mantine/core"; +import { Tooltip } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import UndoIcon from "@mui/icons-material/Undo"; import RedoIcon from "@mui/icons-material/Redo"; import ContentCutIcon from "@mui/icons-material/ContentCut"; @@ -135,28 +136,22 @@ const PageEditorControls = ({ {/* Undo/Redo */} @@ -176,17 +171,14 @@ const PageEditorControls = ({ label={t("pageEditor.toolbar.rotateLeft", "Rotate Selected Left")} > onRotate("left")} disabled={selectedPageIds.length === 0} - variant="subtle" - style={{ - color: - selectedPageIds.length > 0 - ? "var(--text-secondary)" - : "var(--text-muted)", - }} - radius="md" - size="lg" + aria-label={t( + "pageEditor.toolbar.rotateLeft", + "Rotate Selected Left", + )} > @@ -195,68 +187,47 @@ const PageEditorControls = ({ label={t("pageEditor.toolbar.rotateRight", "Rotate Selected Right")} > onRotate("right")} disabled={selectedPageIds.length === 0} - variant="subtle" - style={{ - color: - selectedPageIds.length > 0 - ? "var(--text-secondary)" - : "var(--text-muted)", - }} - radius="md" - size="lg" + aria-label={t( + "pageEditor.toolbar.rotateRight", + "Rotate Selected Right", + )} > 0 - ? "var(--text-secondary)" - : "var(--text-muted)", - }} - radius="md" - size="lg" + aria-label={t("pageEditor.toolbar.delete", "Delete Selected")} > 0 - ? "var(--text-secondary)" - : "var(--text-muted)", - }} - radius="md" - size="lg" + aria-label={getSplitTooltip()} > 0 - ? "var(--text-secondary)" - : "var(--text-muted)", - }} - radius="md" - size="lg" + aria-label={getPageBreakTooltip()} > diff --git a/frontend/editor/src/core/components/pageEditor/PageSelectByNumberButton.tsx b/frontend/editor/src/core/components/pageEditor/PageSelectByNumberButton.tsx index fff0b8ef8f..dc2032fa4a 100644 --- a/frontend/editor/src/core/components/pageEditor/PageSelectByNumberButton.tsx +++ b/frontend/editor/src/core/components/pageEditor/PageSelectByNumberButton.tsx @@ -1,4 +1,5 @@ -import { ActionIcon, Popover } from "@mantine/core"; +import { Popover } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import LocalIcon from "@app/components/shared/LocalIcon"; import { Tooltip } from "@app/components/shared/Tooltip"; import BulkSelectionPanel from "@app/components/pageEditor/BulkSelectionPanel"; @@ -37,8 +38,7 @@ export default function PageSelectByNumberButton({
diff --git a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx index 71c07d26b3..d2ff79ad97 100644 --- a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx +++ b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx @@ -1,4 +1,5 @@ -import { Button, Text, Group, Divider } from "@mantine/core"; +import { Text, Group, Divider } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css"; import { LogicalOperator } from "@app/utils/bulkselection/selectionBuilders"; @@ -22,7 +23,7 @@ const OperatorsSection = ({ + × + ) } onKeyDown={(e) => e.key === "Enter" && onUpdatePagesFromCSV()} diff --git a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx index 314ca282b6..5fc7341430 100644 --- a/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx +++ b/frontend/editor/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; -import { Button, Text, NumberInput, Group } from "@mantine/core"; +import { Text, NumberInput, Group } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css"; interface SelectPagesProps { diff --git a/frontend/editor/src/core/components/shared/AppConfigModal.tsx b/frontend/editor/src/core/components/shared/AppConfigModal.tsx index 365d42608a..264db178ac 100644 --- a/frontend/editor/src/core/components/shared/AppConfigModal.tsx +++ b/frontend/editor/src/core/components/shared/AppConfigModal.tsx @@ -5,7 +5,8 @@ import React, { useCallback, useRef, } from "react"; -import { Badge, Modal, Text, ActionIcon, Tooltip, Group } from "@mantine/core"; +import { Badge, Modal, Text, Tooltip, Group } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useNavigate, useLocation } from "react-router-dom"; import { useTranslation } from "react-i18next"; import LocalIcon from "@app/components/shared/LocalIcon"; @@ -365,7 +366,7 @@ const AppConfigModalInner: React.FC = ({ /> = ({ label={t("storageShare.linkLabel", "Share link")} rightSection={ - ); - - // Wrap with tooltip if provided (useful for disabled state explanations) - if (option.tooltip && isDisabled) { - return ( - - - {button} - - - ); - } - - return ( - - {button} - - ); - })} - + ); }; diff --git a/frontend/editor/src/core/components/shared/ButtonToggle.tsx b/frontend/editor/src/core/components/shared/ButtonToggle.tsx index 5e02fb169b..9932c88062 100644 --- a/frontend/editor/src/core/components/shared/ButtonToggle.tsx +++ b/frontend/editor/src/core/components/shared/ButtonToggle.tsx @@ -1,5 +1,4 @@ -import { Button, Stack } from "@mantine/core"; -import React from "react"; +import { SegmentedControl } from "@app/ui/SegmentedControl"; export interface ButtonToggleOption { value: string; @@ -13,70 +12,49 @@ export interface ButtonToggleProps { value: string; onChange: (value: string) => void; disabled?: boolean; - orientation?: "vertical" | "horizontal"; size?: "xs" | "sm" | "md" | "lg"; fullWidth?: boolean; } -export const ButtonToggle: React.FC = ({ +export const ButtonToggle = ({ options, value, onChange, disabled = false, - orientation = "vertical", size = "md", fullWidth = true, -}) => { - const isVertical = orientation === "vertical"; +}: ButtonToggleProps) => { + const segmentedSize = size === "xs" || size === "sm" ? "sm" : "md"; - const buttonStyle: React.CSSProperties = { - justifyContent: "flex-start", - height: isVertical ? "auto" : undefined, - minHeight: isVertical ? "50px" : undefined, - padding: isVertical ? "12px 16px" : undefined, - textAlign: "left", - }; - - const renderButton = (option: ButtonToggleOption) => { - const isSelected = value === option.value; - const isDisabled = disabled || option.disabled; - - return ( - - ); - }; - - if (isVertical) { - return {options.map(renderButton)}; - } + const segmentedOptions = options.map((option) => ({ + value: option.value, + disabled: disabled || option.disabled, + label: ( +
+
{option.label}
+ {option.description && ( +
+ {option.description} +
+ )} +
+ ), + })); return ( -
- {options.map(renderButton)} -
+ ); }; diff --git a/frontend/editor/src/core/components/shared/DismissAllErrorsButton.tsx b/frontend/editor/src/core/components/shared/DismissAllErrorsButton.tsx index 3bcc53daf7..5f3f4ada2a 100644 --- a/frontend/editor/src/core/components/shared/DismissAllErrorsButton.tsx +++ b/frontend/editor/src/core/components/shared/DismissAllErrorsButton.tsx @@ -1,9 +1,9 @@ import React from "react"; -import { Button, Group } from "@mantine/core"; +import { Group } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import { useFileState } from "@app/contexts/FileContext"; import { useFileActions } from "@app/contexts/file/fileHooks"; -import CloseIcon from "@mui/icons-material/Close"; import { Z_INDEX_TOAST } from "@app/styles/zIndex"; interface DismissAllErrorsButtonProps { @@ -32,10 +32,9 @@ const DismissAllErrorsButton: React.FC = ({ return ( diff --git a/frontend/editor/src/core/components/shared/FileCard.tsx b/frontend/editor/src/core/components/shared/FileCard.tsx index 5d53418d7f..c731092459 100644 --- a/frontend/editor/src/core/components/shared/FileCard.tsx +++ b/frontend/editor/src/core/components/shared/FileCard.tsx @@ -1,15 +1,7 @@ import { useState } from "react"; -import { - Card, - Stack, - Text, - Group, - Badge, - Button, - Box, - ActionIcon, - Tooltip, -} from "@mantine/core"; +import { Card, Stack, Text, Group, Badge, Box, Tooltip } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import StorageIcon from "@mui/icons-material/Storage"; import VisibilityIcon from "@mui/icons-material/Visibility"; @@ -114,8 +106,8 @@ const FileCard = ({ { e.stopPropagation(); onView(); @@ -131,8 +123,12 @@ const FileCard = ({ > { e.stopPropagation(); onEdit(); @@ -182,14 +178,14 @@ const FileCard = ({ diff --git a/frontend/editor/src/core/components/shared/FileDropdownMenu.tsx b/frontend/editor/src/core/components/shared/FileDropdownMenu.tsx index 519366b9d6..735d633fee 100644 --- a/frontend/editor/src/core/components/shared/FileDropdownMenu.tsx +++ b/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 { Menu, Loader, Group, Text, Tooltip } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; @@ -102,10 +103,14 @@ export const FileDropdownMenu: React.FC = ({ withArrow > { e.stopPropagation(); onFileRemove(file.fileId as FileId); diff --git a/frontend/editor/src/core/components/shared/FileGrid.tsx b/frontend/editor/src/core/components/shared/FileGrid.tsx index 2ade54426f..c1e87ab18a 100644 --- a/frontend/editor/src/core/components/shared/FileGrid.tsx +++ b/frontend/editor/src/core/components/shared/FileGrid.tsx @@ -1,13 +1,6 @@ import { useState } from "react"; -import { - Box, - Flex, - Group, - Text, - Button, - TextInput, - Select, -} from "@mantine/core"; +import { Box, Flex, Group, Text, TextInput, Select } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import SearchIcon from "@mui/icons-material/Search"; import SortIcon from "@mui/icons-material/Sort"; @@ -121,7 +114,7 @@ const FileGrid = ({ {onDeleteAll && ( - )} @@ -179,7 +172,7 @@ const FileGrid = ({ {/* Show All Button */} {hasMoreFiles && onShowAll && ( - diff --git a/frontend/editor/src/core/components/shared/FilePickerModal.tsx b/frontend/editor/src/core/components/shared/FilePickerModal.tsx index da1bb91b6c..5e077d3437 100644 --- a/frontend/editor/src/core/components/shared/FilePickerModal.tsx +++ b/frontend/editor/src/core/components/shared/FilePickerModal.tsx @@ -2,7 +2,6 @@ import { useState, useEffect } from "react"; import { Modal, Text, - Button, Group, Stack, Checkbox, @@ -11,6 +10,7 @@ import { Badge, SimpleGrid, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail"; import { FileId } from "@app/types/file"; @@ -151,10 +151,10 @@ const FilePickerModal = ({ )} - - @@ -249,7 +249,7 @@ const FilePickerModal = ({ {/* Action buttons */} - + ); }) )} diff --git a/frontend/editor/src/core/components/shared/FileSidebar.tsx b/frontend/editor/src/core/components/shared/FileSidebar.tsx index 1eb51b759b..db3820350e 100644 --- a/frontend/editor/src/core/components/shared/FileSidebar.tsx +++ b/frontend/editor/src/core/components/shared/FileSidebar.tsx @@ -7,6 +7,7 @@ import React, { forwardRef, } from "react"; import { Loader, Tooltip } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; import { useFileState, useFileActions } from "@app/contexts/file/fileHooks"; @@ -961,26 +962,31 @@ const FileSidebar = forwardRef( {t("fileSidebar.files", "Files")} - - +
{!stubsLoaded ? ( @@ -989,35 +995,6 @@ const FileSidebar = forwardRef(
) : filteredFileStubs.length > 0 ? (
- {filteredFileStubs.map((stub) => { const workbenchFileId = state.files.ids.find( (id) => (id as string) === (stub.id as string), diff --git a/frontend/editor/src/core/components/shared/FileSidebarFileItem.css b/frontend/editor/src/core/components/shared/FileSidebarFileItem.css index cab9f589f2..af6d9e06cc 100644 --- a/frontend/editor/src/core/components/shared/FileSidebarFileItem.css +++ b/frontend/editor/src/core/components/shared/FileSidebarFileItem.css @@ -91,7 +91,7 @@ width: 20px; height: 20px; border-radius: 5px; - border: 1.5px solid var(--border-hover, #52525b); + border: 1.5px solid var(--border-hover, var(--border-strong)); } .file-sidebar-file-item:hover .file-sidebar-file-checkbox-hover { diff --git a/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx b/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx index 58a318e0d8..ff48a9704d 100644 --- a/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx +++ b/frontend/editor/src/core/components/shared/FileSidebarFileItem.tsx @@ -1,6 +1,7 @@ import { useState, useCallback, useRef } from "react"; import { createPortal } from "react-dom"; import { Menu, Tooltip } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined"; import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined"; @@ -369,14 +370,15 @@ export function FileItem({ )}
- - + {(onDelete || onSaveToCloud || (hasVersionHistory && onVersionHistory)) && ( - + e.stopPropagation()}> {hasVersionHistory && onVersionHistory && ( diff --git a/frontend/editor/src/core/components/shared/FileUploadButton.tsx b/frontend/editor/src/core/components/shared/FileUploadButton.tsx index 000639f09c..b07fbd0271 100644 --- a/frontend/editor/src/core/components/shared/FileUploadButton.tsx +++ b/frontend/editor/src/core/components/shared/FileUploadButton.tsx @@ -1,6 +1,32 @@ import { useRef } from "react"; -import { FileButton, Button } from "@mantine/core"; import { useTranslation } from "react-i18next"; +import { FilePicker } from "@app/ui/FilePicker"; +import type { ButtonVariant } from "@app/ui/Button"; + +// Accept both shared DS variants and the legacy Mantine variant names that +// existing callers still pass, mapping the latter onto the DS equivalents. +type LegacyVariant = + | "outline" + | "filled" + | "light" + | "default" + | "subtle" + | "gradient"; + +const VARIANT_MAP: Record = { + filled: "primary", + outline: "secondary", + default: "secondary", + light: "tertiary", + subtle: "tertiary", + gradient: "primary", +}; + +function resolveVariant(variant: ButtonVariant | LegacyVariant): ButtonVariant { + return variant in VARIANT_MAP + ? VARIANT_MAP[variant as LegacyVariant] + : (variant as ButtonVariant); +} interface FileUploadButtonProps { file?: File; @@ -8,7 +34,7 @@ interface FileUploadButtonProps { accept?: string; disabled?: boolean; placeholder?: string; - variant?: "outline" | "filled" | "light" | "default" | "subtle" | "gradient"; + variant?: ButtonVariant | LegacyVariant; fullWidth?: boolean; } @@ -18,7 +44,7 @@ const FileUploadButton = ({ accept, disabled = false, placeholder, - variant = "outline", + variant = "secondary", fullWidth = true, }: FileUploadButtonProps) => { const { t } = useTranslation(); @@ -27,18 +53,16 @@ const FileUploadButton = ({ const defaultPlaceholder = t("chooseFile", "Choose File"); return ( - - {(props) => ( - - )} - + {file ? file.name : placeholder || defaultPlaceholder} + ); }; diff --git a/frontend/editor/src/core/components/shared/FirstLoginModal.tsx b/frontend/editor/src/core/components/shared/FirstLoginModal.tsx index 4d7764f91d..be91ccc03d 100644 --- a/frontend/editor/src/core/components/shared/FirstLoginModal.tsx +++ b/frontend/editor/src/core/components/shared/FirstLoginModal.tsx @@ -1,12 +1,6 @@ import { useState } from "react"; -import { - Modal, - Stack, - Text, - PasswordInput, - Button, - Alert, -} from "@mantine/core"; +import { Modal, Stack, Text, PasswordInput, Alert } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import LocalIcon from "@app/components/shared/LocalIcon"; import { accountService } from "@app/services/accountService"; @@ -195,8 +189,8 @@ export default function FirstLoginModal({ /> diff --git a/frontend/editor/src/core/components/shared/Footer.tsx b/frontend/editor/src/core/components/shared/Footer.tsx index e73a48fd2a..2fb7312fba 100644 --- a/frontend/editor/src/core/components/shared/Footer.tsx +++ b/frontend/editor/src/core/components/shared/Footer.tsx @@ -2,6 +2,7 @@ import { Flex } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { useCookieConsent } from "@app/hooks/useCookieConsent"; import { useFooterInfo } from "@app/hooks/useFooterInfo"; +import { Button } from "@app/ui/Button"; interface FooterProps { privacyPolicy?: string; @@ -53,8 +54,8 @@ export default function Footer({
)} {finalAnalyticsEnabled && ( - + )}
diff --git a/frontend/editor/src/core/components/shared/HoverActionMenu.tsx b/frontend/editor/src/core/components/shared/HoverActionMenu.tsx index fafebdf8f2..a6b827bb1f 100644 --- a/frontend/editor/src/core/components/shared/HoverActionMenu.tsx +++ b/frontend/editor/src/core/components/shared/HoverActionMenu.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ActionIcon, Tooltip } from "@mantine/core"; +import { Tooltip } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import styles from "@app/components/shared/HoverActionMenu.module.css"; import { Z_INDEX_HOVER_ACTION_MENU } from "@app/styles/zIndex"; @@ -60,10 +61,9 @@ const HoverActionMenu: React.FC = ({ = ({ const iconSize = compact ? "1rem" : "1.2rem"; const textSize = compact ? "xs" : "sm"; - const buttonSize = compact ? "xs" : "xs"; return ( = ({ {buttonText && onButtonClick && ( )} {dismissible && ( diff --git a/frontend/editor/src/core/components/shared/LoginAgreementModal.tsx b/frontend/editor/src/core/components/shared/LoginAgreementModal.tsx index 8d419e7cc0..9fb7f7c925 100644 --- a/frontend/editor/src/core/components/shared/LoginAgreementModal.tsx +++ b/frontend/editor/src/core/components/shared/LoginAgreementModal.tsx @@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from "react"; import { useLocation } from "react-router-dom"; import { Box, - Button, Divider, Group, Modal, @@ -10,6 +9,7 @@ import { Stack, Text, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import Markdown, { type Components } from "react-markdown"; import remarkGfm from "remark-gfm"; @@ -188,10 +188,10 @@ export default function LoginAgreementModal() { )} - - diff --git a/frontend/editor/src/core/components/shared/MultiSelectControls.tsx b/frontend/editor/src/core/components/shared/MultiSelectControls.tsx index 447662e9dd..160346dd1b 100644 --- a/frontend/editor/src/core/components/shared/MultiSelectControls.tsx +++ b/frontend/editor/src/core/components/shared/MultiSelectControls.tsx @@ -1,4 +1,5 @@ -import { Box, Group, Text, Button } from "@mantine/core"; +import { Box, Group, Text } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; interface MultiSelectControlsProps { @@ -36,20 +37,20 @@ const MultiSelectControls = ({ {selectedCount} {t("fileManager.filesSelected", "files")} - {onAddToUpload && ( - )} {onOpenInFileEditor && ( )} diff --git a/frontend/editor/src/core/components/shared/NavigationWarningModal.tsx b/frontend/editor/src/core/components/shared/NavigationWarningModal.tsx index 9917f37ac5..7e3c675f3b 100644 --- a/frontend/editor/src/core/components/shared/NavigationWarningModal.tsx +++ b/frontend/editor/src/core/components/shared/NavigationWarningModal.tsx @@ -1,5 +1,6 @@ import { useRef, useEffect } from "react"; -import { Modal, Text, Button, Group, Stack } from "@mantine/core"; +import { Modal, Text, Group, Stack } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useNavigationGuard } from "@app/contexts/NavigationContext"; import { useTranslation } from "react-i18next"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; @@ -103,10 +104,12 @@ const NavigationWarningModal = () => { {hasApply && ( {hasApply && ( + )}
diff --git a/frontend/editor/src/core/components/shared/ShareFileModal.tsx b/frontend/editor/src/core/components/shared/ShareFileModal.tsx index 2f205326e3..1430f9df20 100644 --- a/frontend/editor/src/core/components/shared/ShareFileModal.tsx +++ b/frontend/editor/src/core/components/shared/ShareFileModal.tsx @@ -3,13 +3,13 @@ import { Modal, Stack, Text, - Button, Group, Alert, TextInput, Paper, Select, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import LinkIcon from "@mui/icons-material/Link"; import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded"; import { useTranslation } from "react-i18next"; @@ -253,8 +253,8 @@ const ShareFileModal: React.FC = ({ label={t("storageShare.linkLabel", "Share link")} rightSection={ + )}
); diff --git a/frontend/editor/src/core/components/shared/ToolPanelHeader.tsx b/frontend/editor/src/core/components/shared/ToolPanelHeader.tsx index e34ca4c6c2..9d5f921bec 100644 --- a/frontend/editor/src/core/components/shared/ToolPanelHeader.tsx +++ b/frontend/editor/src/core/components/shared/ToolPanelHeader.tsx @@ -1,5 +1,5 @@ import type { ReactNode } from "react"; -import { ActionIcon } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import CloseIcon from "@mui/icons-material/Close"; import "@app/components/shared/ToolPanelHeader.css"; @@ -38,12 +38,12 @@ export function ToolPanelHeader({ {onClose && ( diff --git a/frontend/editor/src/core/components/shared/Tooltip.tsx b/frontend/editor/src/core/components/shared/Tooltip.tsx index 12232effc1..9c94bc4726 100644 --- a/frontend/editor/src/core/components/shared/Tooltip.tsx +++ b/frontend/editor/src/core/components/shared/Tooltip.tsx @@ -7,6 +7,7 @@ import React, { } from "react"; import { createPortal } from "react-dom"; import { useTranslation } from "react-i18next"; +import { ActionIcon } from "@app/ui/ActionIcon"; import LocalIcon from "@app/components/shared/LocalIcon"; import { addEventListenerWithCleanup } from "@app/utils/genericUtils"; import { useTooltipPosition } from "@app/hooks/useTooltipPosition"; @@ -396,7 +397,8 @@ export const Tooltip: React.FC = ({ } > {shouldShowCloseButton && ( - + )} {arrow && !sidebarTooltip && (
diff --git a/frontend/editor/src/core/components/shared/UpdateModal.tsx b/frontend/editor/src/core/components/shared/UpdateModal.tsx index c18549360c..4a5e5b2404 100644 --- a/frontend/editor/src/core/components/shared/UpdateModal.tsx +++ b/frontend/editor/src/core/components/shared/UpdateModal.tsx @@ -4,7 +4,6 @@ import { Stack, Text, Badge, - Button, Group, Loader, Center, @@ -13,9 +12,11 @@ import { Progress, Alert, Divider, - CloseButton, Anchor, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; +import LocalIcon from "@app/components/shared/LocalIcon"; import { useTranslation } from "react-i18next"; import { updateService, @@ -271,12 +272,14 @@ const UpdateModal: React.FC = ({ {canClose && ( - + > + + )} @@ -520,12 +523,12 @@ const UpdateModal: React.FC = ({ )} +
)} - {(hasFiles || isCustomView) && - viewOptions.map((opt) => ( - - ))} + {(hasFiles || isCustomView) && ( + + className="workbench-bar-views" + size="sm" + value={currentView} + onChange={setCurrentView} + variant="secondary" + options={viewOptions.map((opt) => ({ + value: opt.value, + label: ( + <> + {opt.icon} + {opt.label} + + ), + }))} + /> + )}
{/* Tool buttons - second row, only rendered when buttons exist */} @@ -493,8 +499,8 @@ export default function WorkbenchBar({ {currentView === "viewer" && renderWithTooltip( handleExportAll()} disabled={ disableForFullscreen || totalItems === 0 || allButtonsDisabled } + aria-label={downloadTooltip} > handleExportAll(true)} disabled={ disableForFullscreen || totalItems === 0 || allButtonsDisabled } + aria-label={t("workbenchBar.saveAs", "Save As")} > @@ -77,20 +80,22 @@ const ZipWarningModal = ({ {/* Mobile layout: vertical stack */} diff --git a/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.tsx b/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.tsx index af96918154..f4e9c47b0a 100644 --- a/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.tsx +++ b/frontend/editor/src/core/components/shared/config/RestartConfirmationModal.tsx @@ -1,4 +1,5 @@ -import { Modal, Text, Group, Button, Stack } from "@mantine/core"; +import { Modal, Text, Group, Stack } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import RefreshIcon from "@mui/icons-material/Refresh"; import ScheduleIcon from "@mui/icons-material/Schedule"; @@ -48,14 +49,13 @@ export default function RestartConfirmationModal({ diff --git a/frontend/editor/src/core/components/shared/signing/steps/SelectDocumentStep.tsx b/frontend/editor/src/core/components/shared/signing/steps/SelectDocumentStep.tsx index aaedc076d3..14bd56f75c 100644 --- a/frontend/editor/src/core/components/shared/signing/steps/SelectDocumentStep.tsx +++ b/frontend/editor/src/core/components/shared/signing/steps/SelectDocumentStep.tsx @@ -1,4 +1,5 @@ -import { Button, Stack, Text } from "@mantine/core"; +import { Stack, Text } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf"; import type { FileState } from "@app/types/file"; diff --git a/frontend/editor/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx b/frontend/editor/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx index 3baa15b7ba..99c0801519 100644 --- a/frontend/editor/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx +++ b/frontend/editor/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx @@ -1,4 +1,5 @@ -import { Button, Stack, Text, Group } from "@mantine/core"; +import { Stack, Text, Group } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import UserSelector from "@app/components/shared/UserSelector"; @@ -53,7 +54,7 @@ export const SelectParticipantsStep: React.FC = ({ + )} - + × + {/* Progress bar - always show when present */} @@ -142,12 +146,12 @@ export default function ToastRenderer() { {/* Button - always show when present, positioned below body */} {t.buttonText && t.buttonCallback && (
- +
)} diff --git a/frontend/editor/src/core/components/tools/RightSidebar.tsx b/frontend/editor/src/core/components/tools/RightSidebar.tsx index 7e3aa04629..4333e263f1 100644 --- a/frontend/editor/src/core/components/tools/RightSidebar.tsx +++ b/frontend/editor/src/core/components/tools/RightSidebar.tsx @@ -1,5 +1,4 @@ import { useMemo, useState } from "react"; -import { ActionIcon } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext"; import { useSidebarContext } from "@app/contexts/SidebarContext"; @@ -21,6 +20,7 @@ import type { SubcategoryGroup } from "@app/hooks/useToolSections"; import { ToolIcon } from "@app/components/shared/ToolIcon"; import { ToolPanelHeader } from "@app/components/shared/ToolPanelHeader"; import { Tooltip as AppTooltip } from "@app/components/shared/Tooltip"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { withViewTransition } from "@app/utils/viewTransition"; import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; @@ -224,13 +224,13 @@ export default function RightSidebar() {
@@ -248,18 +248,18 @@ export default function RightSidebar() { arrow delay={300} > - + ))}
@@ -322,10 +322,9 @@ export default function RightSidebar() { ) : null} {showCloseButton ? ( ) : ( diff --git a/frontend/editor/src/core/components/tools/ToolPanel.css b/frontend/editor/src/core/components/tools/ToolPanel.css index e5949e365a..a8ad41588f 100644 --- a/frontend/editor/src/core/components/tools/ToolPanel.css +++ b/frontend/editor/src/core/components/tools/ToolPanel.css @@ -130,6 +130,7 @@ width 0.3s ease, max-width 0.3s ease; view-transition-name: tool-rail; + user-select: none; } .tool-panel__collapsed-strip { diff --git a/frontend/editor/src/core/components/tools/ToolPanelModePrompt.tsx b/frontend/editor/src/core/components/tools/ToolPanelModePrompt.tsx index 3e3f072b69..f7f69ad2e7 100644 --- a/frontend/editor/src/core/components/tools/ToolPanelModePrompt.tsx +++ b/frontend/editor/src/core/components/tools/ToolPanelModePrompt.tsx @@ -1,6 +1,7 @@ import { useEffect, useState } from "react"; -import { Badge, Button, Card, Group, Modal, Stack, Text } from "@mantine/core"; +import { Badge, Card, Group, Modal, Stack, Text } from "@mantine/core"; import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui/Button"; import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext"; import { usePreferences } from "@app/contexts/PreferencesContext"; import "@app/components/tools/ToolPanelModePrompt.css"; @@ -122,9 +123,6 @@ const ToolPanelModePrompt = ({
+ {parameters.attachments?.length > 0 && ( @@ -120,10 +110,17 @@ const AddAttachmentsSettings = ({ ({(file.size / 1024).toFixed(1)} KB) - + } + aria-label={t( + "AddAttachmentsRequest.removeFile", + "Remove file", + )} size="sm" - variant="subtle" - color="red" + variant="tertiary" + accent="danger" style={{ flexShrink: 0 }} onClick={() => { const newAttachments = ( @@ -132,9 +129,7 @@ const AddAttachmentsSettings = ({ onParameterChange("attachments", newAttachments); }} disabled={disabled} - > - - + /> ))} diff --git a/frontend/editor/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx b/frontend/editor/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx index 37247c863f..fe92d1ff42 100644 --- a/frontend/editor/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx +++ b/frontend/editor/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx @@ -5,6 +5,7 @@ import { pdfWorkerManager } from "@app/services/pdfWorkerManager"; import { useThumbnailGeneration } from "@app/hooks/useThumbnailGeneration"; import styles from "@app/components/tools/addPageNumbers/PageNumberPreview.module.css"; import { PrivateContent } from "@app/components/shared/PrivateContent"; +import { Button } from "@app/ui/Button"; // Simple utilities for page numbers (adapted from stamp) const A4_ASPECT_RATIO = 0.707; @@ -256,9 +257,9 @@ export default function PageNumberPreview({ const idx = (i + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; const selected = parameters.position === idx; return ( - + ); })} diff --git a/frontend/editor/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx b/frontend/editor/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx index 7912cd0bcd..76f8be4109 100644 --- a/frontend/editor/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx +++ b/frontend/editor/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx @@ -4,7 +4,6 @@ import { Select, Stack, ColorInput, - Button, Slider, Text, NumberInput, @@ -13,6 +12,8 @@ import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampPa import LocalIcon from "@app/components/shared/LocalIcon"; import styles from "@app/components/tools/addStamp/StampPreview.module.css"; import { Tooltip } from "@app/components/shared/Tooltip"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex"; interface StampPositionFormattingSettingsProps { @@ -55,7 +56,7 @@ const StampPositionFormattingSettings = ({ return ( + - + - + diff --git a/frontend/editor/src/core/components/tools/addStamp/StampPreview.tsx b/frontend/editor/src/core/components/tools/addStamp/StampPreview.tsx index 9659c4317a..88f2d72f6c 100644 --- a/frontend/editor/src/core/components/tools/addStamp/StampPreview.tsx +++ b/frontend/editor/src/core/components/tools/addStamp/StampPreview.tsx @@ -11,6 +11,7 @@ import { } from "@app/components/tools/addStamp/StampPreviewUtils"; import styles from "@app/components/tools/addStamp/StampPreview.module.css"; import { PrivateContent } from "@app/components/shared/PrivateContent"; +import { Button } from "@app/ui/Button"; type Props = { parameters: AddStampParameters; @@ -429,9 +430,9 @@ export default function StampPreview({ parameters.position === idx && (parameters.overrideX < 0 || parameters.overrideY < 0); return ( - + ); })} diff --git a/frontend/editor/src/core/components/tools/addStamp/StampSetupSettings.tsx b/frontend/editor/src/core/components/tools/addStamp/StampSetupSettings.tsx index 1625affa59..4c7ee96c5b 100644 --- a/frontend/editor/src/core/components/tools/addStamp/StampSetupSettings.tsx +++ b/frontend/editor/src/core/components/tools/addStamp/StampSetupSettings.tsx @@ -5,7 +5,6 @@ import { Textarea, TextInput, Select, - Button, Text, Divider, Accordion, @@ -15,6 +14,7 @@ import { Box, Paper, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters"; import ButtonSelector from "@app/components/shared/ButtonSelector"; import styles from "@app/components/tools/addStamp/StampPreview.module.css"; @@ -236,7 +236,6 @@ const StampSetupSettings = ({ { value: "image", label: t("watermark.type.2", "Image") }, ]} disabled={disabled} - buttonClassName={styles.modeToggleButton} textClassName={styles.modeToggleButtonText} /> @@ -673,8 +672,8 @@ const StampSetupSettings = ({ id="stamp-image-input" /> - diff --git a/frontend/editor/src/core/components/tools/automate/AutomationEntry.tsx b/frontend/editor/src/core/components/tools/automate/AutomationEntry.tsx index de8c82d449..322d2d87fc 100644 --- a/frontend/editor/src/core/components/tools/automate/AutomationEntry.tsx +++ b/frontend/editor/src/core/components/tools/automate/AutomationEntry.tsx @@ -1,6 +1,7 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { Group, Text, ActionIcon, Menu, Button, Box } from "@mantine/core"; +import { Group, Text, Menu, Box } from "@mantine/core"; +import { Button as SharedButton } from "@app/ui/Button"; import MoreVertIcon from "@mui/icons-material/MoreVert"; import EditIcon from "@mui/icons-material/Edit"; import DeleteIcon from "@mui/icons-material/Delete"; @@ -181,31 +182,24 @@ export default function AutomationEntry({ onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > - + {showMenu && ( setIsMenuOpen(false)} > - } + variant="tertiary" + accent="neutral" size="md" aria-label={t( "automate.entryMenu.label", @@ -234,9 +229,7 @@ export default function AutomationEntry({ transition: "opacity 0.2s ease", pointerEvents: shouldShowMenu ? "auto" : "none", }} - > - - + /> diff --git a/frontend/editor/src/core/components/tools/automate/AutomationImportModal.tsx b/frontend/editor/src/core/components/tools/automate/AutomationImportModal.tsx index 95e85e8026..c8c20cf607 100644 --- a/frontend/editor/src/core/components/tools/automate/AutomationImportModal.tsx +++ b/frontend/editor/src/core/components/tools/automate/AutomationImportModal.tsx @@ -3,13 +3,13 @@ import { useTranslation } from "react-i18next"; import { Alert, Badge, - Button, Group, Modal, Stack, Text, Textarea, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { Dropzone } from "@mantine/dropzone"; import UploadFileIcon from "@mui/icons-material/UploadFile"; import { Z_INDEX_AUTOMATE_MODAL } from "@app/styles/zIndex"; @@ -218,7 +218,7 @@ export default function AutomationImportModal({ )} - )} diff --git a/frontend/editor/src/core/components/tools/automate/IconSelector.tsx b/frontend/editor/src/core/components/tools/automate/IconSelector.tsx index cd67d1487f..1b0909cbc0 100644 --- a/frontend/editor/src/core/components/tools/automate/IconSelector.tsx +++ b/frontend/editor/src/core/components/tools/automate/IconSelector.tsx @@ -1,14 +1,7 @@ import React, { useState } from "react"; import { useTranslation } from "react-i18next"; -import { - Box, - Text, - Stack, - Button, - SimpleGrid, - Tooltip, - Popover, -} from "@mantine/core"; +import { Box, Text, Stack, SimpleGrid, Tooltip, Popover } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import { iconMap, iconOptions } from "@app/components/tools/automate/iconMap"; import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex"; @@ -58,12 +51,13 @@ export default function IconSelector({ zIndex={Z_INDEX_AUTOMATE_DROPDOWN} > - + diff --git a/frontend/editor/src/core/components/tools/automate/ToolConfigurationModal.tsx b/frontend/editor/src/core/components/tools/automate/ToolConfigurationModal.tsx index b70f6b925e..93631e087c 100644 --- a/frontend/editor/src/core/components/tools/automate/ToolConfigurationModal.tsx +++ b/frontend/editor/src/core/components/tools/automate/ToolConfigurationModal.tsx @@ -1,15 +1,7 @@ import { Suspense, useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; -import { - Modal, - Title, - Button, - Group, - Stack, - Text, - Alert, - Loader, -} from "@mantine/core"; +import { Modal, Title, Group, Stack, Text, Alert, Loader } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { Z_INDEX_AUTOMATE_MODAL } from "@app/styles/zIndex"; import SettingsIcon from "@mui/icons-material/Settings"; import CheckIcon from "@mui/icons-material/Check"; @@ -125,7 +117,7 @@ export default function ToolConfigurationModal({ {isServerCertificateEnabled && ( )} {isHardwareAvailable && ( diff --git a/frontend/editor/src/core/components/tools/certSign/HardwareCertificateSettings.tsx b/frontend/editor/src/core/components/tools/certSign/HardwareCertificateSettings.tsx index 820636af35..b384ce8d5c 100644 --- a/frontend/editor/src/core/components/tools/certSign/HardwareCertificateSettings.tsx +++ b/frontend/editor/src/core/components/tools/certSign/HardwareCertificateSettings.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useState } from "react"; import { Alert, - Button, Group, Loader, NumberInput, @@ -10,6 +9,7 @@ import { Text, TextInput, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import { CertSignParameters } from "@app/hooks/tools/certSign/useCertSignParameters"; import { @@ -284,22 +284,34 @@ const HardwareCertificateSettings = ({ {supported.windows && supported.pkcs11 && (
@@ -332,7 +344,7 @@ const HardwareCertificateSettings = ({ )} />
removeSignature(sig.id)} aria-label={t( @@ -177,7 +172,7 @@ export const SelectSignatureModal: React.FC = ({ - diff --git a/frontend/editor/src/core/components/tools/certSign/panels/SignControlsPanel.tsx b/frontend/editor/src/core/components/tools/certSign/panels/SignControlsPanel.tsx index 7945c697f4..15fe50eb90 100644 --- a/frontend/editor/src/core/components/tools/certSign/panels/SignControlsPanel.tsx +++ b/frontend/editor/src/core/components/tools/certSign/panels/SignControlsPanel.tsx @@ -1,15 +1,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { - ActionIcon, - Box, - Button, - Group, - Menu, - Modal, - SegmentedControl, - Stack, - Text, -} from "@mantine/core"; +import { Box, Group, Menu, Modal, Stack, Text } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; +import { Button } from "@app/ui/Button"; +import { SegmentedControl } from "@app/ui/SegmentedControl"; import { useTranslation } from "react-i18next"; import DrawIcon from "@mui/icons-material/Draw"; import OpenWithIcon from "@mui/icons-material/OpenWith"; @@ -363,11 +356,10 @@ export default function SignControlsPanel({ ) : ( ) : ( - setDropdownOpened(!dropdownOpened)} @@ -106,7 +108,7 @@ const GroupedFormatDropdown = ({ : "var(--dropdown-trigger-text)", }} > - + {selectedLabel} @@ -119,7 +121,7 @@ const GroupedFormatDropdown = ({ }} /> - + handleOptionSelect(option.value)} disabled={option.enabled === false} + rightSection={ + option.usesCloud ? ( + + ) : undefined + } style={{ fontSize: "0.75rem", height: "2rem", @@ -160,15 +173,6 @@ const GroupedFormatDropdown = ({ }} > {option.label} - {option.usesCloud && ( - - )} ))} diff --git a/frontend/editor/src/core/components/tools/crop/CropSettings.tsx b/frontend/editor/src/core/components/tools/crop/CropSettings.tsx index 65b0e8f0fe..710391dd6c 100644 --- a/frontend/editor/src/core/components/tools/crop/CropSettings.tsx +++ b/frontend/editor/src/core/components/tools/crop/CropSettings.tsx @@ -4,11 +4,11 @@ import { Text, Box, Group, - ActionIcon, Center, Alert, Checkbox, } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import RestartAltIcon from "@mui/icons-material/RestartAlt"; import { CropParametersHook } from "@app/hooks/tools/crop/useCropParameters"; @@ -193,7 +193,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => { {t("crop.preview.title", "Crop Area Selection")} { e.preventDefault(); if (hasChildren) handleToggle(bookmark.id); @@ -272,13 +271,17 @@ export default function BookmarkEditor({ )} > { e.preventDefault(); handleAddChild(bookmark.id); }} disabled={disabled} + aria-label={t( + "editTableOfContents.editor.actions.addChild", + "Add child bookmark", + )} > @@ -290,13 +293,16 @@ export default function BookmarkEditor({ )} > { e.preventDefault(); handleAddSibling(bookmark.id); }} disabled={disabled} + aria-label={t( + "editTableOfContents.editor.actions.addSibling", + "Add sibling bookmark", + )} > @@ -308,13 +314,17 @@ export default function BookmarkEditor({ )} > { e.preventDefault(); handleRemove(bookmark.id); }} disabled={disabled} + aria-label={t( + "editTableOfContents.editor.actions.remove", + "Remove bookmark", + )} > @@ -399,8 +409,7 @@ export default function BookmarkEditor({ - + - + - - file && onImportJson(file)} accept="application/json" disabled={disabled} + variant="secondary" + leftSection={} + fullWidth > - {(props) => ( - - )} - - + {t("editTableOfContents.actions.importJson", "Import JSON")} + - + @@ -184,16 +167,15 @@ export default function EditTableOfContentsSettings({ - - + - + diff --git a/frontend/editor/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx b/frontend/editor/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx index 43702d5c65..148917dba6 100644 --- a/frontend/editor/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx +++ b/frontend/editor/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx @@ -1,6 +1,7 @@ import { useMemo } from "react"; import { useTranslation } from "react-i18next"; -import { Box, Button, Card, Divider, Group, Stack, Text } from "@mantine/core"; +import { Box, Card, Divider, Group, Stack, Text } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import LocalIcon from "@app/components/shared/LocalIcon"; import { BookmarkNode } from "@app/utils/editTableOfContents"; import ErrorNotification from "@app/components/tools/shared/ErrorNotification"; @@ -150,7 +151,6 @@ const EditTableOfContentsWorkbenchView = ({ )} + ); const { key: disabledKey, fallback: disabledFallback } = diff --git a/frontend/editor/src/core/components/tools/fullscreen/DetailedToolItem.tsx b/frontend/editor/src/core/components/tools/fullscreen/DetailedToolItem.tsx index 32fa181a16..464403e286 100644 --- a/frontend/editor/src/core/components/tools/fullscreen/DetailedToolItem.tsx +++ b/frontend/editor/src/core/components/tools/fullscreen/DetailedToolItem.tsx @@ -14,6 +14,7 @@ import { useToolMeta, getDisabledLabel, } from "@app/components/tools/fullscreen/shared"; +import { Button } from "@app/ui/Button"; interface DetailedToolItemProps { id: string; @@ -56,8 +57,8 @@ const DetailedToolItem: React.FC = ({ const disabledMessage = t(disabledKey, disabledFallback); return ( - + ); }; diff --git a/frontend/editor/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx b/frontend/editor/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx index 7c1c5fe423..487252ae81 100644 --- a/frontend/editor/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx +++ b/frontend/editor/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx @@ -1,5 +1,6 @@ import { useCallback, useMemo } from "react"; -import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core"; +import { Alert, Group, Loader, Stack, Text } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import type { GetPdfInfoOperationHook } from "@app/hooks/tools/getPdfInfo/useGetPdfInfoOperation"; import { downloadFile } from "@app/services/downloadService"; @@ -72,7 +73,6 @@ const GetPdfInfoResults = ({ {t("getPdfInfo.downloads", "Downloads")} - diff --git a/frontend/editor/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx b/frontend/editor/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx index cc6389845a..0cbd88e619 100644 --- a/frontend/editor/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx +++ b/frontend/editor/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx @@ -7,11 +7,9 @@ import React, { useState, } from "react"; import { - ActionIcon, Alert, Badge, Box, - Button, Card, Divider, Group, @@ -24,6 +22,8 @@ import { Text, Tooltip, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { Dropzone } from "@mantine/dropzone"; import { useTranslation } from "react-i18next"; import AutorenewIcon from "@mui/icons-material/Autorenew"; @@ -1553,10 +1553,10 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => { {resizeHandle} {activeGroupId === groupId && ( { + ) : ( )} diff --git a/frontend/editor/src/core/components/tools/sign/SavedSignaturesSection.tsx b/frontend/editor/src/core/components/tools/sign/SavedSignaturesSection.tsx index 8b40b8721a..50cc3d2fe2 100644 --- a/frontend/editor/src/core/components/tools/sign/SavedSignaturesSection.tsx +++ b/frontend/editor/src/core/components/tools/sign/SavedSignaturesSection.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import { - ActionIcon, Alert, Badge, Box, @@ -13,6 +12,7 @@ import { Tooltip, } from "@mantine/core"; import { LocalIcon } from "@app/components/shared/LocalIcon"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { SavedSignature, SavedSignatureType, @@ -301,7 +301,7 @@ export const SavedSignaturesSection = ({ setActivePersonalIndex((prev) => Math.max(0, prev - 1)) @@ -315,7 +315,7 @@ export const SavedSignaturesSection = ({ /> setActivePersonalIndex((prev) => @@ -351,8 +351,7 @@ export const SavedSignaturesSection = ({ onUseSignature(activePersonalSignature)} disabled={disabled} @@ -365,8 +364,8 @@ export const SavedSignaturesSection = ({ onDeleteSignature(activePersonalSignature) @@ -432,7 +431,7 @@ export const SavedSignaturesSection = ({ setActiveSharedIndex((prev) => Math.max(0, prev - 1)) @@ -446,7 +445,7 @@ export const SavedSignaturesSection = ({ /> setActiveSharedIndex((prev) => @@ -478,8 +477,7 @@ export const SavedSignaturesSection = ({ onUseSignature(activeSharedSignature)} disabled={disabled} @@ -493,8 +491,8 @@ export const SavedSignaturesSection = ({ {isAdmin && ( onDeleteSignature(activeSharedSignature) @@ -564,7 +562,7 @@ export const SavedSignaturesSection = ({ setActiveLocalStorageIndex((prev) => @@ -580,7 +578,7 @@ export const SavedSignaturesSection = ({ /> setActiveLocalStorageIndex((prev) => @@ -616,8 +614,7 @@ export const SavedSignaturesSection = ({ onUseSignature(activeLocalStorageSignature) @@ -632,8 +629,8 @@ export const SavedSignaturesSection = ({ onDeleteSignature(activeLocalStorageSignature) diff --git a/frontend/editor/src/core/components/tools/sign/SignSettings.tsx b/frontend/editor/src/core/components/tools/sign/SignSettings.tsx index de7a410b0d..648ada1c47 100644 --- a/frontend/editor/src/core/components/tools/sign/SignSettings.tsx +++ b/frontend/editor/src/core/components/tools/sign/SignSettings.tsx @@ -2,16 +2,15 @@ import { useTranslation } from "react-i18next"; import { Stack, - Button, Text, Alert, - SegmentedControl, Divider, - ActionIcon, Tooltip, Group, Box, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { SegmentedControl } from "@app/ui/SegmentedControl"; import { SignParameters } from "@app/hooks/tools/sign/useSignParameters"; import { useSignature } from "@app/contexts/SignatureContext"; import { useViewer } from "@app/contexts/ViewerContext"; @@ -437,9 +436,9 @@ const SignSettings = ({ const button = ( ) : ( - + } > - - - {translate("mode.resume", "Resume placement")} - - + {translate("mode.resume", "Resume placement")} + ) ) : null; @@ -1185,7 +1168,7 @@ const SignSettings = ({ onChange={(value) => handleSignatureSourceChange(value as SignatureSource) } - data={sourceOptions} + options={sourceOptions} /> )} {renderSignatureBuilder()} @@ -1228,7 +1211,7 @@ const SignSettings = ({ /> {onSave && ( - )} diff --git a/frontend/editor/src/core/components/tools/toolPicker/FavoriteStar.tsx b/frontend/editor/src/core/components/tools/toolPicker/FavoriteStar.tsx index d951951421..10bd556df9 100644 --- a/frontend/editor/src/core/components/tools/toolPicker/FavoriteStar.tsx +++ b/frontend/editor/src/core/components/tools/toolPicker/FavoriteStar.tsx @@ -1,31 +1,38 @@ import React from "react"; -import { ActionIcon } from "@mantine/core"; -import type { MantineSize } from "@mantine/core"; import { useTranslation } from "react-i18next"; import StarRoundedIcon from "@mui/icons-material/StarRounded"; import StarBorderRoundedIcon from "@mui/icons-material/StarBorderRounded"; - +import { ActionIcon } from "@app/ui/ActionIcon"; +import type { ActionIconSize } from "@app/ui/ActionIcon"; +type FavoriteStarSize = "xs" | ActionIconSize; +const SIZE_MAP: Record = { + xs: "sm", + sm: "sm", + md: "md", + lg: "lg", + xl: "xl", +}; interface FavoriteStarProps { isFavorite: boolean; onToggle: () => void; className?: string; - size?: MantineSize; + size?: FavoriteStarSize; } const FavoriteStar: React.FC = ({ isFavorite, onToggle, className, - size = "xs", + size = "sm", }) => { const { t } = useTranslation(); return ( { e.stopPropagation(); onToggle(); diff --git a/frontend/editor/src/core/components/tools/toolPicker/ToolButton.tsx b/frontend/editor/src/core/components/tools/toolPicker/ToolButton.tsx index e184ae6d58..efbe3bb2cb 100644 --- a/frontend/editor/src/core/components/tools/toolPicker/ToolButton.tsx +++ b/frontend/editor/src/core/components/tools/toolPicker/ToolButton.tsx @@ -1,5 +1,6 @@ import React, { memo } from "react"; -import { Button, Badge } from "@mantine/core"; +import { Badge } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { useTranslation } from "react-i18next"; import { Tooltip } from "@app/components/shared/Tooltip"; import { ToolIcon } from "@app/components/shared/ToolIcon"; @@ -143,84 +144,83 @@ const ToolButton: React.FC = ({ ); - + const buttonIcon = ( + + ); const buttonContent = ( - <> - +
-
+ {tool.versionStatus === "alpha" && ( + + {t("toolPanel.alpha", "Alpha")} + + )} + {typeof badgeCount === "number" && badgeCount > 0 && ( + + {badgeCount} + + )} + {usesCloud && !visuallyUnavailable && } +
+ {showDescription && tool.description && ( + + {tool.description} + + )} + {matchedSynonym && ( + - - {tool.versionStatus === "alpha" && ( - - {t("toolPanel.alpha", "Alpha")} - - )} - {typeof badgeCount === "number" && badgeCount > 0 && ( - - {badgeCount} - - )} - {usesCloud && !visuallyUnavailable && } -
- {showDescription && tool.description && ( - - {tool.description} - - )} - {matchedSynonym && ( - - {matchedSynonym} - - )} -
- + {matchedSynonym} + + )} + ); const handleExternalClick = (e: React.MouseEvent) => { @@ -234,24 +234,21 @@ const ToolButton: React.FC = ({ const buttonElement = navProps ? ( // For internal tools with URLs, render Button as an anchor for proper link behavior diff --git a/frontend/editor/src/core/components/viewer/BookmarkSidebar.tsx b/frontend/editor/src/core/components/viewer/BookmarkSidebar.tsx index 40bd9d3045..e9ae53183e 100644 --- a/frontend/editor/src/core/components/viewer/BookmarkSidebar.tsx +++ b/frontend/editor/src/core/components/viewer/BookmarkSidebar.tsx @@ -3,16 +3,15 @@ import { Box, ScrollArea, Text, - ActionIcon, Loader, Stack, TextInput, NumberInput, - Button, Group, - UnstyledButton, } from "@mantine/core"; import LocalIcon from "@app/components/shared/LocalIcon"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useViewer } from "@app/contexts/ViewerContext"; import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext"; import { useFileContext } from "@app/contexts/FileContext"; @@ -20,6 +19,7 @@ import { isStirlingFile, type FileId } from "@app/types/fileContext"; import { createStirlingFilesAndStubs } from "@app/services/fileStubHelpers"; import apiClient from "@app/services/apiClient"; import { PdfBookmarkObject, PdfActionType } from "@embedpdf/models"; +import { useTranslation } from "react-i18next"; import BookmarksIcon from "@mui/icons-material/BookmarksRounded"; import "@app/components/viewer/SidebarBase.css"; import "@app/components/viewer/BookmarkSidebar.css"; @@ -93,6 +93,7 @@ export const BookmarkSidebar = ({ getScrollState, toggleBookmarkSidebar, } = useViewer(); + const { t } = useTranslation(); const { handleToolSelectForced } = useToolWorkflow(); const { selectors, actions: fileActions } = useFileContext(); const [expanded, setExpanded] = useState>({}); @@ -475,6 +476,34 @@ export const BookmarkSidebar = ({ })); }; + const expandAll = useCallback(() => { + const allExpanded: Record = {}; + const expandRecursive = (nodes: BookmarkNode[]) => { + nodes.forEach((node) => { + if (node.children && node.children.length > 0) { + allExpanded[node.id] = true; + expandRecursive(node.children as BookmarkNode[]); + } + }); + }; + expandRecursive(bookmarksWithIds); + setExpanded(allExpanded); + }, [bookmarksWithIds]); + + const collapseAll = useCallback(() => { + const allCollapsed: Record = {}; + const collapseRecursive = (nodes: BookmarkNode[]) => { + nodes.forEach((node) => { + if (node.children && node.children.length > 0) { + allCollapsed[node.id] = false; + collapseRecursive(node.children as BookmarkNode[]); + } + }); + }; + collapseRecursive(bookmarksWithIds); + setExpanded(allCollapsed); + }, [bookmarksWithIds]); + const handleBookmarkClick = ( bookmark: PdfBookmarkObject, event: React.MouseEvent, @@ -569,9 +598,10 @@ export const BookmarkSidebar = ({ > {hasChildren ? ( { event.stopPropagation(); toggleNode(node.id); @@ -654,12 +684,54 @@ export const BookmarkSidebar = ({ + {bookmarkSupport && bookmarksWithIds.length > 0 && ( + <> + {Object.values(expanded).some((val) => val === false) ? ( + + + + ) : ( + + + + )} + + )} @@ -706,7 +778,7 @@ export const BookmarkSidebar = ({ {currentError} - @@ -726,7 +798,6 @@ export const BookmarkSidebar = ({ )} - {showEmptyState && !isAddingBookmark && ( @@ -862,9 +930,12 @@ export const BookmarkSidebar = ({ flexShrink: 0, }} > - @@ -883,7 +954,7 @@ export const BookmarkSidebar = ({ Need to reorder or nest? Open the Bookmark Editor - + )} diff --git a/frontend/editor/src/core/components/viewer/CommentsSidebar.tsx b/frontend/editor/src/core/components/viewer/CommentsSidebar.tsx index cc470b3ea6..e25f9671d9 100644 --- a/frontend/editor/src/core/components/viewer/CommentsSidebar.tsx +++ b/frontend/editor/src/core/components/viewer/CommentsSidebar.tsx @@ -5,16 +5,15 @@ import { Text, Textarea, Stack, - ActionIcon, Group, Tooltip, TextInput, Menu, Modal, - Button, - UnstyledButton, } from "@mantine/core"; import { useTranslation } from "react-i18next"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import DeleteIcon from "@mui/icons-material/Delete"; import CheckIcon from "@mui/icons-material/CheckRounded"; import MoreHorizIcon from "@mui/icons-material/MoreHoriz"; @@ -120,7 +119,6 @@ function getCommentDisplayContent(entry: { /** Placeholder authors we never show; use current user's name from context instead. */ const PLACEHOLDER_AUTHORS = new Set(["Guest", "Digital Signature", ""]); - function getAuthorName( obj: Pick, currentDisplayName: string, @@ -188,7 +186,6 @@ function getIconByType(type: number | undefined): string { if (type === 15) return "edit"; return "comment"; } - function isCommentAnnotation(ann: PdfAnnotationObject): boolean { const customData = getStirlingAnnotationMetadata(ann).customData; const toolId = customData?.toolId ?? customData?.annotationToolId; @@ -252,7 +249,6 @@ function getAnnotationToolId(ann: PdfAnnotationObject): string { const customData = getStirlingAnnotationMetadata(ann).customData; return customData?.toolId ?? customData?.annotationToolId ?? ""; } - function getAnnotationTypeLabel( ann: PdfAnnotationObject, t: (key: string, fallback: string) => string, @@ -285,7 +281,6 @@ function getAnnotationTypeLabel( if (type === 1) return t("viewer.comments.typeComment", "Comment"); return t("viewer.comments.typeComment", "Comment"); } - function AnnotationTypeIcon({ ann }: { ann: PdfAnnotationObject }) { const toolId = getAnnotationToolId(ann); const iconName = TOOL_ICON_MAP[toolId] ?? getIconByType(ann?.type); @@ -714,9 +709,10 @@ export function CommentsSidebar({ @@ -727,7 +723,15 @@ export function CommentsSidebar({ - + @@ -746,11 +750,14 @@ export function CommentsSidebar({ )} {toggleCommentsSidebar && ( @@ -775,9 +782,9 @@ export function CommentsSidebar({ {isPlacingComment ? ( ) : ( @@ -943,9 +942,13 @@ export function CommentsSidebar({ )} > handleLocateAnnotation(pageIndex, ann) } @@ -962,9 +965,13 @@ export function CommentsSidebar({ )} > { handleSendMainComment( pageIndex, @@ -1043,9 +1053,7 @@ export function CommentsSidebar({ }} disabled={!(draft ?? "").trim()} > - + @@ -1112,7 +1120,9 @@ export function CommentsSidebar({ > {canEditReply && !isEditingReply ? ( - { setEditingReplyKey( @@ -1135,7 +1145,7 @@ export function CommentsSidebar({ "Edit", )} - + ) : null} {rTimestamp ? ( @@ -1178,9 +1188,12 @@ export function CommentsSidebar({ )} > handleSaveReplyEdit( replyEditKey, @@ -1196,7 +1209,6 @@ export function CommentsSidebar({ @@ -1252,13 +1264,12 @@ export function CommentsSidebar({ )} > handleSendReply( pageIndex, @@ -1268,9 +1279,7 @@ export function CommentsSidebar({ } disabled={!replyDraft.trim()} > - + @@ -1305,10 +1314,10 @@ export function CommentsSidebar({ )} - - - diff --git a/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx b/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx index 24bc42b02e..555f93df9d 100644 --- a/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx +++ b/frontend/editor/src/core/components/viewer/EmbedPdfViewer.tsx @@ -6,7 +6,9 @@ import React, { useState, } from "react"; import { useTranslation } from "react-i18next"; -import { Box, Center, Text, ActionIcon, Button, Stack } from "@mantine/core"; +import { Box, Center, Text, Stack } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import CloseIcon from "@mui/icons-material/Close"; import LockIcon from "@mui/icons-material/Lock"; @@ -1225,15 +1227,14 @@ const EmbedPdfViewerContent = ({ {/* Close Button - Only show in preview mode */} {onClose && previewFile && ( @@ -1261,7 +1262,6 @@ const EmbedPdfViewerContent = ({ )} - + {/* Navigate / Open */} - + ); }, diff --git a/frontend/editor/src/core/components/viewer/NonPdfViewer.tsx b/frontend/editor/src/core/components/viewer/NonPdfViewer.tsx index 1b54fa1680..ed4a2e2263 100644 --- a/frontend/editor/src/core/components/viewer/NonPdfViewer.tsx +++ b/frontend/editor/src/core/components/viewer/NonPdfViewer.tsx @@ -1,5 +1,6 @@ import { useCallback, useMemo } from "react"; -import { Box, Button, Center, Stack, Text } from "@mantine/core"; +import { Box, Center, Stack, Text } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import ArticleIcon from "@mui/icons-material/Article"; import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf"; @@ -81,8 +82,8 @@ export function NonPdfViewer({ file }: NonPdfViewerProps) { {isConvertAvailable && ( + )} {/* Previous Page Button */} - + {/* Page Input */} {/* Next Page Button */} - + {/* Last Page Button */} {!isPhone && ( - + )} {/* Dual Page Toggle */} @@ -261,21 +246,24 @@ export function PdfViewerToolbar({ position="top" arrow > - + )} @@ -292,11 +280,9 @@ export function PdfViewerToolbar({ position="top" arrow > - + )} @@ -323,9 +309,7 @@ export function PdfViewerToolbar({ style={{ marginLeft: 16, flexShrink: 0 }} > @@ -346,9 +330,7 @@ export function PdfViewerToolbar({ label={null} /> @@ -376,9 +358,7 @@ export function PdfViewerToolbar({ > @@ -172,14 +162,11 @@ function RedactionSelectionMenuInner({ position="top" > diff --git a/frontend/editor/src/core/components/viewer/SearchInterface.tsx b/frontend/editor/src/core/components/viewer/SearchInterface.tsx index f111837860..2c93aff17c 100644 --- a/frontend/editor/src/core/components/viewer/SearchInterface.tsx +++ b/frontend/editor/src/core/components/viewer/SearchInterface.tsx @@ -1,7 +1,8 @@ import React, { useState, useEffect, useRef } from "react"; -import { Box, TextInput, ActionIcon, Text, Group } from "@mantine/core"; +import { Box, TextInput, Text, Group } from "@mantine/core"; import { useTranslation } from "react-i18next"; import { LocalIcon } from "@app/components/shared/LocalIcon"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { ViewerContext } from "@app/contexts/ViewerContext"; interface SearchInterfaceProps { @@ -200,7 +201,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) { {t("search.title", "Search PDF")} @@ -275,7 +276,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) { diff --git a/frontend/editor/src/core/components/viewer/ThumbnailSidebar.tsx b/frontend/editor/src/core/components/viewer/ThumbnailSidebar.tsx index 94919eb4f2..3fb62df970 100644 --- a/frontend/editor/src/core/components/viewer/ThumbnailSidebar.tsx +++ b/frontend/editor/src/core/components/viewer/ThumbnailSidebar.tsx @@ -1,5 +1,7 @@ import { useState, useEffect, useRef } from "react"; -import { Box, ScrollArea, Text, ActionIcon } from "@mantine/core"; +import { Box, ScrollArea, Text } from "@mantine/core"; +import { ActionIcon } from "@app/ui/ActionIcon"; +import { useTranslation } from "react-i18next"; import { useViewer } from "@app/contexts/ViewerContext"; import { PrivateContent } from "@app/components/shared/PrivateContent"; import LocalIcon from "@app/components/shared/LocalIcon"; @@ -17,6 +19,7 @@ export function ThumbnailSidebar({ onToggle, activeFileId, }: ThumbnailSidebarProps) { + const { t } = useTranslation(); const { getScrollState, scrollActions, getThumbnailAPI } = useViewer(); const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({}); @@ -182,11 +185,14 @@ export function ThumbnailSidebar({ diff --git a/frontend/editor/src/core/components/viewer/ViewerAnnotationControls.tsx b/frontend/editor/src/core/components/viewer/ViewerAnnotationControls.tsx index 78888f4188..32b4b1ce11 100644 --- a/frontend/editor/src/core/components/viewer/ViewerAnnotationControls.tsx +++ b/frontend/editor/src/core/components/viewer/ViewerAnnotationControls.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from "react"; -import { ActionIcon } from "@mantine/core"; import { useTranslation } from "react-i18next"; import LocalIcon from "@app/components/shared/LocalIcon"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { Tooltip } from "@app/components/shared/Tooltip"; import { ViewerContext } from "@app/contexts/ViewerContext"; import { useSignature } from "@app/contexts/SignatureContext"; @@ -186,12 +186,15 @@ export default function ViewerAnnotationControls({ portalTarget={document.body} >
+ ); } diff --git a/frontend/editor/src/core/components/viewer/nonpdf/NonPdfBanner.tsx b/frontend/editor/src/core/components/viewer/nonpdf/NonPdfBanner.tsx index e1f169b85b..2d73a0f558 100644 --- a/frontend/editor/src/core/components/viewer/nonpdf/NonPdfBanner.tsx +++ b/frontend/editor/src/core/components/viewer/nonpdf/NonPdfBanner.tsx @@ -1,4 +1,4 @@ -import { Button } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf"; import { useTranslation } from "react-i18next"; @@ -13,9 +13,9 @@ export function NonPdfBanner({ onConvertToPdf }: NonPdfBannerProps) { return ( {!deletePromptIsServerOnly && ( {!deletePromptIsServerOnly && ( - diff --git a/frontend/editor/src/core/pages/HomePage.tsx b/frontend/editor/src/core/pages/HomePage.tsx index 2e5d2aa08d..c1b4f572bc 100644 --- a/frontend/editor/src/core/pages/HomePage.tsx +++ b/frontend/editor/src/core/pages/HomePage.tsx @@ -38,6 +38,7 @@ import { useFileHandler } from "@app/hooks/useFileHandler"; import { FolderTreePanel } from "@app/components/filesPage/FolderTreePanel"; import type { FileSidebarProps } from "@app/components/shared/FileSidebar"; +import { Button } from "@app/ui/Button"; import "@app/pages/HomePage.css"; const SIDEBAR_COLLAPSED_STORAGE_KEY = "stirling.fileSidebarCollapsed"; @@ -404,7 +405,8 @@ export default function HomePage() {
)}
- + {toolAvailability["automate"]?.available !== false && ( - + )} - - +
{/* Back button - floating top left */} - - + {/* Video feed - fills available space */} {/* Capture button */} - + @@ -1291,15 +1289,14 @@ export default function MobileScannerPage() { align="center" style={{ maxWidth: "500px", margin: "0 auto" }} > - - + - + @@ -1383,23 +1379,22 @@ export default function MobileScannerPage() { > - - + - + @@ -1413,17 +1408,22 @@ export default function MobileScannerPage() { ) - - + { }); const attachments = doc.getAttachments(); expect(attachments.length).toBeGreaterThan(0); - expect(attachments.map((a) => a.name)).toContain(attachmentName); + expect(attachments.map((a: { name?: string }) => a.name)).toContain( + attachmentName, + ); }); test("Add bookmark from viewer sidebar adds the bookmark to the produced PDF outline", async ({ diff --git a/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts b/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts index f72d642a8e..9b66fec1d9 100644 --- a/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/cert-sign-wizard.spec.ts @@ -59,7 +59,7 @@ async function mockHardwareEndpoints(page: Page) { } test.describe("CertSign tool - certificate source model", () => { - test("renders, accepts a PDF, and exposes the Upload source", async ({ + test("renders, accepts a PDF, and defaults to upload when no other sources exist", async ({ page, }) => { await page.route("**/api/v1/security/cert-sign", (route) => @@ -76,10 +76,14 @@ test.describe("CertSign tool - certificate source model", () => { await uploadFiles(page, SAMPLE_PDF); await expect(page).toHaveURL(/\/cert-sign/); - // Source step always offers "Upload" (the former "Manual" mode). + // With no server/hardware sources, the picker collapses to a hint and the + // flow proceeds in the default MANUAL (upload) mode — no lone Upload CTA. await expect( - page.getByRole("button", { name: /^upload$/i }).first(), - ).toBeAttached({ timeout: 10_000 }); + page.getByText(/no other certificate sources are available/i).first(), + ).toBeVisible({ timeout: 10_000 }); + await expect(page.getByRole("button", { name: /^upload$/i })).toHaveCount( + 0, + ); }); test("does NOT offer 'This device' when not running as desktop", async ({ @@ -89,9 +93,10 @@ test.describe("CertSign tool - certificate source model", () => { await page.waitForLoadState("domcontentloaded"); await uploadFiles(page, SAMPLE_PDF); + // No alternative sources: the picker is a hint, and hardware is never offered. await expect( - page.getByRole("button", { name: /^upload$/i }).first(), - ).toBeAttached({ timeout: 10_000 }); + page.getByText(/no other certificate sources are available/i).first(), + ).toBeVisible({ timeout: 10_000 }); await expect( page.getByRole("button", { name: /this device/i }), ).toHaveCount(0); diff --git a/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts b/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts index aeb6eb0de2..f24e13f312 100644 --- a/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/page-editor-rotation.spec.ts @@ -93,7 +93,11 @@ test.describe("PageEditor (multitool) rotation save", () => { // 4. The exported /Rotate must match what the editor showed: page 3 upright // (0), the untouched pages keeping their source rotation. const outDoc = await PDFDocument.load(fs.readFileSync(tmpOut)); - const outRotations = outDoc.getPages().map((p) => p.getRotation().angle); + const outRotations = outDoc + .getPages() + .map( + (p: { getRotation: () => { angle: number } }) => p.getRotation().angle, + ); fs.rmSync(tmpOut, { force: true }); expect(outRotations).toEqual([0, 90, 0, 180]); }); diff --git a/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts b/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts index e2d3ffcb71..c72fbadba0 100644 --- a/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts +++ b/frontend/editor/src/core/tests/stubbed/watermark-tool.spec.ts @@ -33,11 +33,11 @@ test.describe("Watermark tool — mode selection after upload", () => { test("post-upload UI renders mode cards or settings (whatever the chooser is)", async ({ page, }) => { - // The chooser may render as Mantine cards or buttons depending on the build. - // Either flavour is fine; what we want to catch is "post-upload watermark - // page is empty / errored". + // The chooser may render as Mantine cards, buttons, or a segmented control + // depending on the build. Either flavour is fine; what we want to catch is + // "post-upload watermark page is empty / errored". const choices = page.locator( - '.mantine-Card-root, button:has-text("Text"), button:has-text("Image"), button:has-text("File")', + '.mantine-Card-root, .mantine-SegmentedControl-root label, button:has-text("Text"), button:has-text("Image"), button:has-text("File")', ); await expect .poll(async () => choices.count(), { timeout: 10_000 }) diff --git a/frontend/editor/src/core/theme/mantineTheme.ts b/frontend/editor/src/core/theme/mantineTheme.ts index 061ac0e819..374c3c1a79 100644 --- a/frontend/editor/src/core/theme/mantineTheme.ts +++ b/frontend/editor/src/core/theme/mantineTheme.ts @@ -58,6 +58,23 @@ const gray: MantineColorsTuple = [ "var(--color-gray-900)", ]; +// Navy-indigo dark scale — replaces Mantine's neutral gray defaults so all +// dark-mode components (SegmentedControl, inputs, dropdowns, etc.) use the +// portal palette automatically via --mantine-color-dark-*. +// dark-0..3 = text/icon shades, dark-4..7 = surface elevations, dark-8..9 = deepest bg. +const dark: MantineColorsTuple = [ + "#c2c8e0", // dark-0 — primary text on dark bg + "#9299b0", // dark-1 — secondary text + "#6e7898", // dark-2 — muted text / icons + "#4a5282", // dark-3 — subtle text / dividers + "#1c2340", // dark-4 — elevated surface / selected bg (e.g. SegmentedControl indicator) + "#131729", // dark-5 — card / panel surface + "#0d1020", // dark-6 — toolbar / sidebar bg (e.g. SegmentedControl root) + "#090b18", // dark-7 — page background (deepest reachable surface) + "#07091a", // dark-8 + "#050714", // dark-9 +]; + export const mantineTheme = createTheme({ // Primary color primaryColor: "primary", @@ -68,6 +85,7 @@ export const mantineTheme = createTheme({ green, yellow, gray, + dark, }, // Spacing system - uses CSS variables diff --git a/frontend/editor/src/core/tokens/tokens.css b/frontend/editor/src/core/tokens/tokens.css index c8ba2171a0..189b88cb8e 100644 --- a/frontend/editor/src/core/tokens/tokens.css +++ b/frontend/editor/src/core/tokens/tokens.css @@ -117,6 +117,8 @@ --color-toggle-off: #cbd5e1; --color-badge-red: #ef4444; + /* Segmented control — semantic tokens so dark mode can decouple from blue surfaces */ + /* Shadows */ --shadow-sm: inset 0 0 0 1px #e3e8ee; --shadow-md: inset 0 0 0 1px #e3e8ee, 0 1px 2px rgba(15, 23, 42, 0.04); @@ -241,6 +243,8 @@ --color-toggle-off: #3d4f6a; + /* Segmented control — blue-toned dark to match app surface colors */ + --shadow-sm: inset 0 0 0 1px #283248; --shadow-md: inset 0 0 0 1px #283248, 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-lg: inset 0 0 0 1px #283248, 0 8px 24px rgba(0, 0, 0, 0.4); @@ -405,6 +409,15 @@ } } +/* Default transition set (avoids text-colour transitions); not !important so components can override. */ +*, +*::before, +*::after { + transition-property: + background, background-color, border, border-color, box-shadow, opacity, + transform, fill, stroke, outline-color; +} + /* Visually-hidden utility for content meant only for screen readers. */ .sr-only { position: absolute; diff --git a/frontend/editor/src/core/tools/AddStamp.tsx b/frontend/editor/src/core/tools/AddStamp.tsx index 9a7422188e..6070ae5e89 100644 --- a/frontend/editor/src/core/tools/AddStamp.tsx +++ b/frontend/editor/src/core/tools/AddStamp.tsx @@ -126,7 +126,6 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => { }, ]} disabled={endpointLoading} - buttonClassName={styles.modeToggleButton} textClassName={styles.modeToggleButtonText} /> )} diff --git a/frontend/editor/src/core/tools/Compare.tsx b/frontend/editor/src/core/tools/Compare.tsx index 81cf263ded..b555ecfb9b 100644 --- a/frontend/editor/src/core/tools/Compare.tsx +++ b/frontend/editor/src/core/tools/Compare.tsx @@ -2,15 +2,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; import CompareRoundedIcon from "@mui/icons-material/CompareRounded"; import CloseIcon from "@mui/icons-material/Close"; -import { - Box, - Group, - Stack, - Text, - Button, - Modal, - ActionIcon, -} from "@mantine/core"; +import { Box, Group, Stack, Text, Modal } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import SwapVertRoundedIcon from "@mui/icons-material/SwapVertRounded"; import { createToolFlow } from "@app/components/tools/shared/createToolFlow"; import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool"; @@ -33,7 +27,7 @@ import type { CompareWorkbenchData } from "@app/types/compare"; import { getDefaultWorkbench } from "@app/types/workbench"; import { truncateCenter } from "@app/utils/textUtils"; import { - FileSelectorPicker, + FileSelectorPicker as PopoverFileSelector, FileSelectorResult, } from "@app/components/shared/FileSelectorPicker"; import "@app/components/tools/compare/compareView.css"; @@ -373,9 +367,14 @@ const Compare = (props: BaseToolProps) => { }} > clearSlot(role)} aria-label={t("compare.clearSlot", "Remove file")} > @@ -421,7 +420,7 @@ const Compare = (props: BaseToolProps) => { data-slot-state="empty" style={{ width: "100%" }} > - {
+ )}
@@ -543,13 +541,12 @@ const Compare = (props: BaseToolProps) => { {idx < CHAPTERS.length - 1 && } ))} diff --git a/frontend/editor/src/core/tools/Merge.tsx b/frontend/editor/src/core/tools/Merge.tsx index 9138dfa4f0..ae2bed26fe 100644 --- a/frontend/editor/src/core/tools/Merge.tsx +++ b/frontend/editor/src/core/tools/Merge.tsx @@ -1,6 +1,7 @@ import { useCallback, useEffect, useRef } from "react"; import { useTranslation } from "react-i18next"; -import { Button, Stack, Text } from "@mantine/core"; +import { Stack, Text } from "@mantine/core"; +import { Button } from "@app/ui/Button"; import { createToolFlow } from "@app/components/tools/shared/createToolFlow"; import MergeSettings from "@app/components/tools/merge/MergeSettings"; import MergeFileSorter from "@app/components/tools/merge/MergeFileSorter"; @@ -181,8 +182,8 @@ const Merge = (props: BaseToolProps) => { )} - - - {filterOptions.map((f) => ( - + + {filterOptions.map((f) => { + const active = filters.includes(f.key); + return ( + + setFilters((prev) => + prev.includes(f.key) + ? prev.filter((k) => k !== f.key) + : [...prev, f.key], + ) + } + > {f.label} - ))} - - + ); + })} + {controller.loading && items.length === 0 ? (
diff --git a/frontend/editor/src/core/tools/annotate/AnnotationPanel.tsx b/frontend/editor/src/core/tools/annotate/AnnotationPanel.tsx index 17f2e028c0..6986f4d7e4 100644 --- a/frontend/editor/src/core/tools/annotate/AnnotationPanel.tsx +++ b/frontend/editor/src/core/tools/annotate/AnnotationPanel.tsx @@ -4,17 +4,17 @@ import { useTranslation } from "react-i18next"; import { Text, Group, - ActionIcon, Stack, Slider, Box, Tooltip as MantineTooltip, - Button, Tooltip, Paper, Menu, Modal, } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import LocalIcon from "@app/components/shared/LocalIcon"; import { ColorPicker, @@ -365,12 +365,10 @@ export function AnnotationPanel(props: AnnotationPanelProps) { activateAnnotationTool(tool.id)} disabled={!annotationsVisible} aria-label={tool.label} @@ -641,9 +639,12 @@ export function AnnotationPanel(props: AnnotationPanelProps) { setTextAlignment("left")} size="md" + aria-label={t("annotation.alignLeft", "Align left")} > setTextAlignment("center")} size="md" + aria-label={t("annotation.alignCenter", "Align center")} > setTextAlignment("right")} size="md" + aria-label={t("annotation.alignRight", "Align right")} > void handleApplyChangesClick()} + style={{ marginTop: "0.75rem" }} > {t("annotation.saveChanges", "Save Changes")} @@ -1324,14 +1318,13 @@ export function AnnotationPanel(props: AnnotationPanelProps) { diff --git a/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx b/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx index d6186af566..da8cfc785a 100644 --- a/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx +++ b/frontend/editor/src/core/tools/formFill/FormSaveBar.tsx @@ -10,20 +10,14 @@ * save UX that users expect from browser PDF viewers. */ import React, { useCallback, useState } from "react"; -import { - Stack, - Group, - Text, - Button, - Transition, - CloseButton, - Paper, - Badge, -} from "@mantine/core"; +import { Stack, Group, Text, Transition, Paper, Badge } from "@mantine/core"; +import { Button } from "@app/ui/Button"; +import { ActionIcon } from "@app/ui/ActionIcon"; import { useTranslation } from "react-i18next"; import DownloadIcon from "@mui/icons-material/Download"; import SaveIcon from "@mui/icons-material/Save"; import EditNoteIcon from "@mui/icons-material/EditNote"; +import CloseIcon from "@mui/icons-material/Close"; import { useFormFill } from "@app/tools/formFill/FormFillContext"; import { downloadFileWithPolicy } from "@app/services/exportWithPolicy"; @@ -160,37 +154,36 @@ export function FormSaveBar({ - setDismissed(true)} aria-label={t("viewer.formBar.dismiss", "Dismiss")} - /> + > + + {isDirty && ( diff --git a/frontend/editor/src/core/ui/ActionIcon.css b/frontend/editor/src/core/ui/ActionIcon.css new file mode 100644 index 0000000000..1a56a484e2 --- /dev/null +++ b/frontend/editor/src/core/ui/ActionIcon.css @@ -0,0 +1,21 @@ +/* Mantine ActionIcon-backed — colour driven by the shared accent palette (accents.css). */ +@import "./accents.css"; + +/* ---- shape ---- */ +.sui-ai--circle.mantine-ActionIcon-root { + --ai-radius: 50%; +} +.sui-ai--pill.mantine-ActionIcon-root { + --ai-radius: 9999px; +} + +/* ---- gradient accents: brighten on hover instead of a hard bg swap ---- */ +.sui-acc-ai.sui-ai--primary:not([data-disabled]):hover, +.sui-acc-premium.sui-ai--primary:not([data-disabled]):hover { + filter: brightness(1.06); +} + +/* no-hover: !important to beat Mantine's own :hover background rule. */ +.sui-ai--no-hover:not([data-disabled]):hover { + background: var(--ai-bg, transparent) !important; +} diff --git a/frontend/editor/src/core/ui/ActionIcon.stories.tsx b/frontend/editor/src/core/ui/ActionIcon.stories.tsx new file mode 100644 index 0000000000..a4df1359dc --- /dev/null +++ b/frontend/editor/src/core/ui/ActionIcon.stories.tsx @@ -0,0 +1,132 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { ActionIcon } from "@app/ui/ActionIcon"; + +const Plus = () => ( + + + +); +const Trash = () => ( + + + +); + +const ACCENTS = [ + "default", + "neutral", + "brand", + "ai", + "premium", + "danger", + "success", + "warning", +] as const; + +const meta: Meta = { + title: "Primitives/ActionIcon", + component: ActionIcon, + parameters: { layout: "centered" }, + args: { + variant: "primary", + accent: "default", + size: "md", + "aria-label": "Add", + }, + argTypes: { + variant: { + control: "inline-radio", + options: ["primary", "secondary", "tertiary", "quiet"], + }, + accent: { control: "inline-radio", options: ACCENTS }, + size: { control: "inline-radio", options: ["sm", "md", "lg", "xl"] }, + shape: { control: "inline-radio", options: ["default", "circle", "pill"] }, + }, +}; +export default meta; +type Story = StoryObj; + +const Wrap = ({ children }: { children: React.ReactNode }) => ( +
+ {children} +
+); + +export const Playground: Story = { + render: (args) => ( + + + + ), +}; + +/** The three variants × every accent. */ +export const Accents: Story = { + render: () => ( +
+ {(["primary", "secondary", "tertiary"] as const).flatMap((variant) => + ACCENTS.map((accent) => ( + + + + )), + )} +
+ ), +}; + +/** Square at every size; the icon scales with `1em`. */ +export const Sizes: Story = { + render: () => ( + + {(["sm", "md", "lg", "xl"] as const).map((size) => ( + + + + ))} + + ), +}; + +export const Shapes: Story = { + render: () => ( + + + + + + + + + + + + ), +}; diff --git a/frontend/editor/src/core/ui/ActionIcon.tsx b/frontend/editor/src/core/ui/ActionIcon.tsx new file mode 100644 index 0000000000..44584be569 --- /dev/null +++ b/frontend/editor/src/core/ui/ActionIcon.tsx @@ -0,0 +1,140 @@ +import { ActionIcon as MantineActionIcon } from "@mantine/core"; +import { forwardRef } from "react"; +import type { + ComponentPropsWithoutRef, + CSSProperties, + ElementType, + ReactNode, +} from "react"; +import { CONTROL_HEIGHT } from "@app/ui/controlSizes"; +import "@app/ui/ActionIcon.css"; + +/** Icon-only button (square) — same variant/accent dials as Button. */ +export type ActionIconVariant = "primary" | "secondary" | "tertiary" | "quiet"; +export type ActionIconAccent = + | "default" + | "neutral" + | "brand" + | "ai" + | "premium" + | "danger" + | "success" + | "warning"; +export type ActionIconSize = "sm" | "md" | "lg" | "xl"; +export type ActionIconShape = "default" | "circle" | "pill"; + +type ActionIconOwnProps = { + variant?: ActionIconVariant; + accent?: ActionIconAccent; + size?: ActionIconSize; + shape?: ActionIconShape; + /** Required — an icon-only control must have an accessible name. */ + "aria-label": string; + loading?: boolean; + /** false = no hover background change. */ + hover?: boolean; + /** Polymorphic root element (e.g. `"a"` or a router Link). */ + as?: ElementType; + style?: CSSProperties; + /** The icon. */ + children?: ReactNode; +}; + +export type ActionIconProps = ActionIconOwnProps & + Omit< + ComponentPropsWithoutRef<"button">, + keyof ActionIconOwnProps | "color" + > & { + href?: string; + target?: string; + rel?: string; + }; + +const MANTINE_VARIANT: Record = { + primary: "filled", + secondary: "outline", + tertiary: "subtle", + quiet: "subtle", +}; + +export const ActionIcon = forwardRef( + function ActionIcon( + { + variant = "primary", + accent = "default", + size = "md", + shape = "default", + loading = false, + hover = true, + as, + disabled, + className, + style, + children, + ...rest + }, + ref, + ) { + const classes = [ + "sui-ai", + `sui-acc-${accent}`, + `sui-ai--${variant}`, + shape !== "default" ? `sui-ai--${shape}` : "", + !hover ? "sui-ai--no-hover" : "", + className ?? "", + ] + .filter(Boolean) + .join(" "); + + // Accent palette → Mantine ActionIcon vars (inline to win). --ai-bd is a full `border` shorthand. + const accentVars = + variant === "primary" + ? { + "--ai-bg": "var(--_solid)", + "--ai-hover": "var(--_solid-hover)", + "--ai-color": "var(--_on)", + "--ai-bd": "1px solid transparent", + } + : variant === "quiet" + ? { + "--ai-bg": "transparent", + "--ai-hover": "transparent", + "--ai-color": "var(--_text)", + "--ai-hover-color": "var(--color-text-1)", + "--ai-bd": "1px solid transparent", + } + : { + "--ai-bg": "transparent", + "--ai-hover": "var(--_tint)", + "--ai-color": "var(--_text)", + "--ai-bd": + variant === "secondary" + ? "1px solid var(--_bd)" + : "1px solid transparent", + }; + + // Loosely-typed alias so the polymorphic `component={as}` doesn't fight Mantine's typing. + const Comp = MantineActionIcon as ElementType; + + return ( + + {children} + + ); + }, +); diff --git a/frontend/editor/src/proprietary/ui/Avatar.css b/frontend/editor/src/core/ui/Avatar.css similarity index 100% rename from frontend/editor/src/proprietary/ui/Avatar.css rename to frontend/editor/src/core/ui/Avatar.css diff --git a/frontend/editor/src/proprietary/ui/Avatar.stories.tsx b/frontend/editor/src/core/ui/Avatar.stories.tsx similarity index 100% rename from frontend/editor/src/proprietary/ui/Avatar.stories.tsx rename to frontend/editor/src/core/ui/Avatar.stories.tsx diff --git a/frontend/editor/src/proprietary/ui/Avatar.tsx b/frontend/editor/src/core/ui/Avatar.tsx similarity index 100% rename from frontend/editor/src/proprietary/ui/Avatar.tsx rename to frontend/editor/src/core/ui/Avatar.tsx diff --git a/frontend/editor/src/proprietary/ui/Banner.css b/frontend/editor/src/core/ui/Banner.css similarity index 85% rename from frontend/editor/src/proprietary/ui/Banner.css rename to frontend/editor/src/core/ui/Banner.css index 7d249295b4..937905a915 100644 --- a/frontend/editor/src/proprietary/ui/Banner.css +++ b/frontend/editor/src/core/ui/Banner.css @@ -76,19 +76,10 @@ align-items: center; } +/* Sizing/background/hover are owned by the ActionIcon; this just keeps it from + * stretching and sizes the × glyph. */ .sui-banner__close { flex: 0 0 auto; - width: 1.5rem; - height: 1.5rem; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: var(--radius-sm); - color: var(--color-text-4); - font-size: 1rem; + font-size: 1.125rem; line-height: 1; } -.sui-banner__close:hover { - background: rgba(0, 0, 0, 0.06); - color: var(--color-text-1); -} diff --git a/frontend/editor/src/proprietary/ui/Banner.stories.tsx b/frontend/editor/src/core/ui/Banner.stories.tsx similarity index 96% rename from frontend/editor/src/proprietary/ui/Banner.stories.tsx rename to frontend/editor/src/core/ui/Banner.stories.tsx index c6b8ddfd1e..891cf66b78 100644 --- a/frontend/editor/src/proprietary/ui/Banner.stories.tsx +++ b/frontend/editor/src/core/ui/Banner.stories.tsx @@ -39,7 +39,7 @@ export const WithAction: Story = { title: "Approaching cap", description: "389k of 500k docs processed.", action: ( - ), diff --git a/frontend/editor/src/proprietary/ui/Banner.tsx b/frontend/editor/src/core/ui/Banner.tsx similarity index 71% rename from frontend/editor/src/proprietary/ui/Banner.tsx rename to frontend/editor/src/core/ui/Banner.tsx index b7db925740..ca89f57aab 100644 --- a/frontend/editor/src/proprietary/ui/Banner.tsx +++ b/frontend/editor/src/core/ui/Banner.tsx @@ -1,4 +1,5 @@ import type { ReactNode } from "react"; +import { ActionIcon } from "@app/ui/ActionIcon"; import "@app/ui/Banner.css"; export type BannerTone = "info" | "success" | "warning" | "danger" | "neutral"; @@ -7,21 +8,15 @@ export interface BannerProps { tone?: BannerTone; title?: ReactNode; description?: ReactNode; - /** Right-aligned action — typically a button. */ action?: ReactNode; - /** When set, shows an × button that calls this handler. */ onDismiss?: () => void; - /** Optional leading icon (caller supplies — keeps the primitive icon-set-agnostic). */ + /** Caller-supplied icon keeps this component icon-set-agnostic. */ icon?: ReactNode; className?: string; children?: ReactNode; } -/** - * Inline alert. Use `tone` to convey severity; pair with `action` for - * "Approaching cap → Upgrade" style flows. Use `Toast` (separate primitive) - * for transient/dismissible notifications layered over the UI. - */ +/** Inline alert. Use Toast for transient overlay notifications instead. */ export function Banner({ tone = "info", title, @@ -51,14 +46,17 @@ export function Banner({ {action &&
{action}
} {onDismiss && ( - + × + )} ); diff --git a/frontend/editor/src/core/ui/Button.css b/frontend/editor/src/core/ui/Button.css new file mode 100644 index 0000000000..5592711979 --- /dev/null +++ b/frontend/editor/src/core/ui/Button.css @@ -0,0 +1,41 @@ +/* Mantine-backed Button — colour driven by the shared accent palette (accents.css). */ +@import "./accents.css"; + +/* ---- icon-only: square, no horizontal padding ---- */ +.sui-btn--icon.mantine-Button-root { + --button-padding-x: 0; + width: var(--button-height); + min-width: var(--button-height); +} +/* Zero the section margin / hide the empty label so the lone icon centres. */ +.sui-btn--icon .mantine-Button-section { + margin-inline: 0; +} +.sui-btn--icon .mantine-Button-label { + display: none; +} + +/* ---- shape ---- */ +.sui-btn--circle.mantine-Button-root { + --button-radius: 50%; +} +.sui-btn--pill.mantine-Button-root { + --button-radius: 9999px; +} + +/* ---- gradient accents: brighten on hover instead of a hard bg swap ---- */ +/* [data-disabled] too: :disabled never matches polymorphic (as="a") roots. */ +.sui-acc-ai.sui-btn--primary:not(:disabled):not([data-disabled]):hover, +.sui-acc-premium.sui-btn--primary:not(:disabled):not([data-disabled]):hover { + filter: brightness(1.06); +} + +/* ---- overflow: default wraps the label; Mantine's label is nowrap ---- */ +.sui-btn--wrap .mantine-Button-label { + white-space: normal; +} + +/* no-hover: !important to beat Mantine's own :hover background rule. */ +.sui-btn--no-hover:not(:disabled):not([data-disabled]):hover { + background: var(--button-bg, transparent) !important; +} diff --git a/frontend/editor/src/core/ui/Button.stories.tsx b/frontend/editor/src/core/ui/Button.stories.tsx new file mode 100644 index 0000000000..2def9e099f --- /dev/null +++ b/frontend/editor/src/core/ui/Button.stories.tsx @@ -0,0 +1,293 @@ +import type { ReactNode } from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { Button } from "@app/ui/Button"; + +/* tiny inline icons for the demos */ +const Plus = () => ( + + + +); +const Arrow = () => ( + + + +); +const Trash = () => ( + + + +); +const Sparkle = () => ( + + + + +); + +const meta: Meta = { + title: "Primitives/Button", + component: Button, + parameters: { layout: "centered" }, + args: { text: "Button", variant: "primary", accent: "default", size: "md" }, + argTypes: { + variant: { + control: "inline-radio", + options: ["primary", "secondary", "tertiary", "quiet"], + }, + accent: { + control: "inline-radio", + options: [ + "default", + "neutral", + "brand", + "ai", + "premium", + "danger", + "success", + "warning", + ], + }, + size: { control: "inline-radio", options: ["sm", "md", "lg", "xl"] }, + justify: { + control: "inline-radio", + options: ["center", "start", "end", "between"], + }, + shape: { control: "inline-radio", options: ["default", "circle", "pill"] }, + text: { control: "text" }, + }, +}; +export default meta; +type Story = StoryObj; + +const Wrap = ({ children }: { children: ReactNode }) => ( +
+ {children} +
+); + +/** Tweak every prop live with the controls. */ +export const Playground: Story = {}; + +/** The three fill treatments. */ +export const Variants: Story = { + render: (args) => ( + + - +
Compose document workflows from typed operations.

- - +

Agents

Wire your agent via MCP, REST, or tool definitions.

- diff --git a/frontend/editor/src/proprietary/ui/Card.tsx b/frontend/editor/src/core/ui/Card.tsx similarity index 86% rename from frontend/editor/src/proprietary/ui/Card.tsx rename to frontend/editor/src/core/ui/Card.tsx index 27eb7aed62..dbdb1a393a 100644 --- a/frontend/editor/src/proprietary/ui/Card.tsx +++ b/frontend/editor/src/core/ui/Card.tsx @@ -1,9 +1,17 @@ import type { HTMLAttributes, ReactNode } from "react"; import "@app/ui/Card.css"; +/** Subset of the shared accent dial that has a styled strip (see Card.css). */ +export type CardAccent = + | "default" + | "premium" + | "danger" + | "success" + | "warning"; + export interface CardProps extends HTMLAttributes { /** Adds an accent strip on the left edge of the card. */ - accent?: "blue" | "purple" | "green" | "amber" | "red"; + accent?: CardAccent; /** * Padding profile. `tight` = 0.75rem, `default` = 1.125rem, `loose` = 1.5rem. * `none` removes padding so the card surface can host edge-to-edge content diff --git a/frontend/editor/src/proprietary/ui/ChatFABButton.css b/frontend/editor/src/core/ui/ChatFABButton.css similarity index 100% rename from frontend/editor/src/proprietary/ui/ChatFABButton.css rename to frontend/editor/src/core/ui/ChatFABButton.css diff --git a/frontend/editor/src/proprietary/ui/ChatFABButton.stories.tsx b/frontend/editor/src/core/ui/ChatFABButton.stories.tsx similarity index 90% rename from frontend/editor/src/proprietary/ui/ChatFABButton.stories.tsx rename to frontend/editor/src/core/ui/ChatFABButton.stories.tsx index c6986dad14..5e85738b57 100644 --- a/frontend/editor/src/proprietary/ui/ChatFABButton.stories.tsx +++ b/frontend/editor/src/core/ui/ChatFABButton.stories.tsx @@ -6,7 +6,7 @@ const meta: Meta = { component: ChatFABButton, parameters: { layout: "centered" }, argTypes: { - isLoading: { control: "boolean" }, + loading: { control: "boolean" }, showTick: { control: "boolean" }, onClick: { action: "clicked" }, }, @@ -19,7 +19,7 @@ export const Default: Story = {}; /** Agent is actively working — the logo paths animate and a green pulse dot appears. */ export const Loading: Story = { - args: { isLoading: true }, + args: { loading: true }, }; /** Agent finished while the panel was closed — tick badge pops in to signal an unread result. */ @@ -33,5 +33,5 @@ export const Tick: Story = { * In practice this transition is handled by the parent via `hasUnviewedResult`. */ export const TickWhileLoading: Story = { - args: { isLoading: true, showTick: true }, + args: { loading: true, showTick: true }, }; diff --git a/frontend/editor/src/proprietary/ui/ChatFABButton.tsx b/frontend/editor/src/core/ui/ChatFABButton.tsx similarity index 84% rename from frontend/editor/src/proprietary/ui/ChatFABButton.tsx rename to frontend/editor/src/core/ui/ChatFABButton.tsx index 8ee8e74d7a..5ba3c8113b 100644 --- a/frontend/editor/src/proprietary/ui/ChatFABButton.tsx +++ b/frontend/editor/src/core/ui/ChatFABButton.tsx @@ -2,21 +2,21 @@ import type { ButtonHTMLAttributes } from "react"; import "@app/ui/ChatFABButton.css"; export interface ChatFABButtonProps extends ButtonHTMLAttributes { - /** Shows a green pulse dot to indicate the agent is actively working. */ - isLoading?: boolean; - /** Shows a green tick badge to indicate an unread result is waiting. */ + /** Green pulse dot — agent is working. */ + loading?: boolean; + /** Green tick badge — unread result waiting. */ showTick?: boolean; } export function ChatFABButton({ - isLoading = false, + loading = false, showTick = false, className, ...rest }: ChatFABButtonProps) { const classes = [ "chat-fab-btn", - isLoading ? "chat-fab-btn--loading" : "", + loading ? "chat-fab-btn--loading" : "", showTick ? "chat-fab-btn--tick" : "", className ?? "", ] @@ -39,7 +39,7 @@ export function ChatFABButton({ /> - {isLoading && !showTick && ( + {loading && !showTick && ( 
diff --git a/frontend/editor/src/proprietary/ui/Collapsible.css b/frontend/editor/src/core/ui/Collapsible.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Collapsible.css
rename to frontend/editor/src/core/ui/Collapsible.css
diff --git a/frontend/editor/src/proprietary/ui/Collapsible.stories.tsx b/frontend/editor/src/core/ui/Collapsible.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Collapsible.stories.tsx
rename to frontend/editor/src/core/ui/Collapsible.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Collapsible.tsx b/frontend/editor/src/core/ui/Collapsible.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Collapsible.tsx
rename to frontend/editor/src/core/ui/Collapsible.tsx
diff --git a/frontend/editor/src/proprietary/ui/ColorInput.tsx b/frontend/editor/src/core/ui/ColorInput.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ColorInput.tsx
rename to frontend/editor/src/core/ui/ColorInput.tsx
diff --git a/frontend/editor/src/proprietary/ui/DataRow.css b/frontend/editor/src/core/ui/DataRow.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/DataRow.css
rename to frontend/editor/src/core/ui/DataRow.css
diff --git a/frontend/editor/src/proprietary/ui/DataRow.stories.tsx b/frontend/editor/src/core/ui/DataRow.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/DataRow.stories.tsx
rename to frontend/editor/src/core/ui/DataRow.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/DataRow.tsx b/frontend/editor/src/core/ui/DataRow.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/DataRow.tsx
rename to frontend/editor/src/core/ui/DataRow.tsx
diff --git a/frontend/editor/src/proprietary/ui/Drawer.css b/frontend/editor/src/core/ui/Drawer.css
similarity index 83%
rename from frontend/editor/src/proprietary/ui/Drawer.css
rename to frontend/editor/src/core/ui/Drawer.css
index d2b90f26a7..8972bbefc2 100644
--- a/frontend/editor/src/proprietary/ui/Drawer.css
+++ b/frontend/editor/src/core/ui/Drawer.css
@@ -75,22 +75,10 @@
   color: var(--color-text-4);
 }
 
+/* Sizing/background/hover are owned by the Button; this just keeps it from
+ * stretching. */
 .sui-drawer__close {
   flex: 0 0 auto;
-  width: 1.75rem;
-  height: 1.75rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-4);
-  transition:
-    background var(--motion-fast),
-    color var(--motion-fast);
-}
-.sui-drawer__close:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-1);
 }
 
 .sui-drawer__body {
diff --git a/frontend/editor/src/proprietary/ui/Drawer.stories.tsx b/frontend/editor/src/core/ui/Drawer.stories.tsx
similarity index 91%
rename from frontend/editor/src/proprietary/ui/Drawer.stories.tsx
rename to frontend/editor/src/core/ui/Drawer.stories.tsx
index 3600d774a2..c1df90536b 100644
--- a/frontend/editor/src/proprietary/ui/Drawer.stories.tsx
+++ b/frontend/editor/src/core/ui/Drawer.stories.tsx
@@ -71,11 +71,11 @@ export const WithFooter: Story = {
             subtitle="COI Compliance · us-east-1"
             footer={
               <>
-                
-                
-                
+                
+                
               
             }
           >
diff --git a/frontend/editor/src/proprietary/ui/Drawer.tsx b/frontend/editor/src/core/ui/Drawer.tsx
similarity index 75%
rename from frontend/editor/src/proprietary/ui/Drawer.tsx
rename to frontend/editor/src/core/ui/Drawer.tsx
index 20279c3c59..7327b854dc 100644
--- a/frontend/editor/src/proprietary/ui/Drawer.tsx
+++ b/frontend/editor/src/core/ui/Drawer.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useId, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { FocusTrap } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import "@app/ui/Drawer.css";
 
 export type DrawerSide = "right" | "left";
@@ -10,11 +11,10 @@ export interface DrawerProps {
   open: boolean;
   onClose: () => void;
   side?: DrawerSide;
-  /** Width preset. sm=22rem, md=27.5rem, lg=36rem. */
+  /** sm=22rem, md=27.5rem, lg=36rem. */
   width?: DrawerWidth;
   title?: ReactNode;
   subtitle?: ReactNode;
-  /** Sticky footer slot below the body. */
   footer?: ReactNode;
   disableBackdropClose?: boolean;
   disableEscapeClose?: boolean;
@@ -23,12 +23,7 @@ export interface DrawerProps {
   children?: ReactNode;
 }
 
-/**
- * Side drawer — sibling to {@link Modal}, with our own brand shell. Tab focus
- * trapping, initial focus, and focus restoration on close are delegated to
- * Mantine's ; we keep the slide-in chrome, scroll lock, and ESC /
- * backdrop dismissal.
- */
+/** Tab focus trapping and restoration are delegated to Mantine's FocusTrap. */
 export function Drawer({
   open,
   onClose,
@@ -104,27 +99,31 @@ export function Drawer({
                 )}
                 {subtitle && 
{subtitle}
}
               
-              
+                leftSection={
+                  
+                    
+                    
+                  
+                }
+              />
             
           )}
           
{children}

diff --git a/frontend/editor/src/proprietary/ui/Dropdown.css b/frontend/editor/src/core/ui/Dropdown.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Dropdown.css
rename to frontend/editor/src/core/ui/Dropdown.css
diff --git a/frontend/editor/src/proprietary/ui/Dropdown.stories.tsx b/frontend/editor/src/core/ui/Dropdown.stories.tsx
similarity index 90%
rename from frontend/editor/src/proprietary/ui/Dropdown.stories.tsx
rename to frontend/editor/src/core/ui/Dropdown.stories.tsx
index 7e05785ee6..ad84a09fb1 100644
--- a/frontend/editor/src/proprietary/ui/Dropdown.stories.tsx
+++ b/frontend/editor/src/core/ui/Dropdown.stories.tsx
@@ -20,7 +20,7 @@ export const Basic: Story = {
   render: () => (
     
       
-        
+        
       
       
          console.log("a")}>Item A
@@ -37,7 +37,7 @@ export const WithDivider: Story = {
   render: () => (
     
       
-        
+        
       
       
         Profile
@@ -53,7 +53,7 @@ export const WithTrailingHints: Story = {
   render: () => (
     
       
-        
+        
       
       
         Search
@@ -71,7 +71,7 @@ export const AlignStart: Story = {
   render: () => (
     
       
-        
+        
       
       
         One
diff --git a/frontend/editor/src/proprietary/ui/Dropdown.tsx b/frontend/editor/src/core/ui/Dropdown.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Dropdown.tsx
rename to frontend/editor/src/core/ui/Dropdown.tsx
diff --git a/frontend/editor/src/proprietary/ui/EmptyState.css b/frontend/editor/src/core/ui/EmptyState.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/EmptyState.css
rename to frontend/editor/src/core/ui/EmptyState.css
diff --git a/frontend/editor/src/proprietary/ui/EmptyState.stories.tsx b/frontend/editor/src/core/ui/EmptyState.stories.tsx
similarity index 90%
rename from frontend/editor/src/proprietary/ui/EmptyState.stories.tsx
rename to frontend/editor/src/core/ui/EmptyState.stories.tsx
index ac153ec0b0..859b498c5f 100644
--- a/frontend/editor/src/proprietary/ui/EmptyState.stories.tsx
+++ b/frontend/editor/src/core/ui/EmptyState.stories.tsx
@@ -31,10 +31,10 @@ export const WithCTAs: Story = {
       "The fastest way in is forking a pre-bundled pipeline like PII Sweep or Compliance Pack.",
     actions: (
       <>
-        
-        
+        
       
     ),
   },
diff --git a/frontend/editor/src/proprietary/ui/EmptyState.tsx b/frontend/editor/src/core/ui/EmptyState.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/EmptyState.tsx
rename to frontend/editor/src/core/ui/EmptyState.tsx
diff --git a/frontend/editor/src/core/ui/FilePicker.tsx b/frontend/editor/src/core/ui/FilePicker.tsx
new file mode 100644
index 0000000000..3e33b20e46
--- /dev/null
+++ b/frontend/editor/src/core/ui/FilePicker.tsx
@@ -0,0 +1,55 @@
+import { FileButton as MantineFileButton } from "@mantine/core";
+import type { ForwardedRef, ReactNode } from "react";
+import { Button } from "@app/ui/Button";
+import type { ButtonProps } from "@app/ui/Button";
+
+type TriggerButtonProps = Omit<
+  ButtonProps,
+  "onClick" | "onChange" | "children"
+>;
+
+export interface FilePickerProps<
+  Multiple extends boolean = false,
+> extends TriggerButtonProps {
+  /** Called with the picked file(s); null when the dialog is dismissed. */
+  onChange: (payload: Multiple extends true ? File[] : File | null) => void;
+  accept?: string;
+  multiple?: Multiple;
+  /** Ref to a function that clears the current selection (Mantine resetRef). */
+  resetRef?: ForwardedRef<() => void>;
+  name?: string;
+  capture?: boolean | "user" | "environment";
+  /** Trigger label. */
+  children?: ReactNode;
+}
+
+/** File-picker button: a shared Button trigger over a hidden file input (Mantine FileButton). */
+export function FilePicker({
+  onChange,
+  accept,
+  multiple,
+  resetRef,
+  name,
+  capture,
+  disabled,
+  children,
+  ...buttonProps
+}: FilePickerProps) {
+  return (
+    
+      onChange={onChange}
+      accept={accept}
+      multiple={multiple}
+      resetRef={resetRef}
+      name={name}
+      capture={capture}
+      disabled={disabled}
+    >
+      {(props) => (
+        
+      )}
+    
+  );
+}
diff --git a/frontend/editor/src/proprietary/ui/FormField.css b/frontend/editor/src/core/ui/FormField.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/FormField.css
rename to frontend/editor/src/core/ui/FormField.css
diff --git a/frontend/editor/src/proprietary/ui/FormField.tsx b/frontend/editor/src/core/ui/FormField.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/FormField.tsx
rename to frontend/editor/src/core/ui/FormField.tsx
diff --git a/frontend/editor/src/proprietary/ui/Forms.stories.tsx b/frontend/editor/src/core/ui/Forms.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Forms.stories.tsx
rename to frontend/editor/src/core/ui/Forms.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/IconBadge.css b/frontend/editor/src/core/ui/IconBadge.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/IconBadge.css
rename to frontend/editor/src/core/ui/IconBadge.css
diff --git a/frontend/editor/src/proprietary/ui/IconBadge.stories.tsx b/frontend/editor/src/core/ui/IconBadge.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/IconBadge.stories.tsx
rename to frontend/editor/src/core/ui/IconBadge.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/IconBadge.tsx b/frontend/editor/src/core/ui/IconBadge.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/IconBadge.tsx
rename to frontend/editor/src/core/ui/IconBadge.tsx
diff --git a/frontend/editor/src/proprietary/ui/Inline.css b/frontend/editor/src/core/ui/Inline.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Inline.css
rename to frontend/editor/src/core/ui/Inline.css
diff --git a/frontend/editor/src/proprietary/ui/Inline.stories.tsx b/frontend/editor/src/core/ui/Inline.stories.tsx
similarity index 88%
rename from frontend/editor/src/proprietary/ui/Inline.stories.tsx
rename to frontend/editor/src/core/ui/Inline.stories.tsx
index b6e4ed54eb..10233e1371 100644
--- a/frontend/editor/src/proprietary/ui/Inline.stories.tsx
+++ b/frontend/editor/src/core/ui/Inline.stories.tsx
@@ -15,9 +15,9 @@ type Story = StoryObj;
 export const Default: Story = {
   render: () => (
     
-      
-      
-      
+      
+      
+      
     
   ),
 };
diff --git a/frontend/editor/src/proprietary/ui/Inline.tsx b/frontend/editor/src/core/ui/Inline.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Inline.tsx
rename to frontend/editor/src/core/ui/Inline.tsx
diff --git a/frontend/editor/src/proprietary/ui/Input.css b/frontend/editor/src/core/ui/Input.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Input.css
rename to frontend/editor/src/core/ui/Input.css
diff --git a/frontend/editor/src/proprietary/ui/Input.tsx b/frontend/editor/src/core/ui/Input.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Input.tsx
rename to frontend/editor/src/core/ui/Input.tsx
diff --git a/frontend/editor/src/proprietary/ui/ListRow.css b/frontend/editor/src/core/ui/ListRow.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ListRow.css
rename to frontend/editor/src/core/ui/ListRow.css
diff --git a/frontend/editor/src/proprietary/ui/ListRow.stories.tsx b/frontend/editor/src/core/ui/ListRow.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ListRow.stories.tsx
rename to frontend/editor/src/core/ui/ListRow.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/ListRow.tsx b/frontend/editor/src/core/ui/ListRow.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ListRow.tsx
rename to frontend/editor/src/core/ui/ListRow.tsx
diff --git a/frontend/editor/src/proprietary/ui/MantineForms.css b/frontend/editor/src/core/ui/MantineForms.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MantineForms.css
rename to frontend/editor/src/core/ui/MantineForms.css
diff --git a/frontend/editor/src/proprietary/ui/MantineForms.stories.tsx b/frontend/editor/src/core/ui/MantineForms.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MantineForms.stories.tsx
rename to frontend/editor/src/core/ui/MantineForms.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/MethodBadge.css b/frontend/editor/src/core/ui/MethodBadge.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MethodBadge.css
rename to frontend/editor/src/core/ui/MethodBadge.css
diff --git a/frontend/editor/src/proprietary/ui/MethodBadge.stories.tsx b/frontend/editor/src/core/ui/MethodBadge.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MethodBadge.stories.tsx
rename to frontend/editor/src/core/ui/MethodBadge.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/MethodBadge.tsx b/frontend/editor/src/core/ui/MethodBadge.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MethodBadge.tsx
rename to frontend/editor/src/core/ui/MethodBadge.tsx
diff --git a/frontend/editor/src/proprietary/ui/MetricCard.css b/frontend/editor/src/core/ui/MetricCard.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MetricCard.css
rename to frontend/editor/src/core/ui/MetricCard.css
diff --git a/frontend/editor/src/proprietary/ui/MetricCard.stories.tsx b/frontend/editor/src/core/ui/MetricCard.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MetricCard.stories.tsx
rename to frontend/editor/src/core/ui/MetricCard.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/MetricCard.tsx b/frontend/editor/src/core/ui/MetricCard.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MetricCard.tsx
rename to frontend/editor/src/core/ui/MetricCard.tsx
diff --git a/frontend/editor/src/proprietary/ui/MetricStrip.css b/frontend/editor/src/core/ui/MetricStrip.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MetricStrip.css
rename to frontend/editor/src/core/ui/MetricStrip.css
diff --git a/frontend/editor/src/proprietary/ui/MetricStrip.stories.tsx b/frontend/editor/src/core/ui/MetricStrip.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MetricStrip.stories.tsx
rename to frontend/editor/src/core/ui/MetricStrip.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/MetricStrip.tsx b/frontend/editor/src/core/ui/MetricStrip.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MetricStrip.tsx
rename to frontend/editor/src/core/ui/MetricStrip.tsx
diff --git a/frontend/editor/src/proprietary/ui/Modal.css b/frontend/editor/src/core/ui/Modal.css
similarity index 83%
rename from frontend/editor/src/proprietary/ui/Modal.css
rename to frontend/editor/src/core/ui/Modal.css
index d63985d97d..7d9ef68746 100644
--- a/frontend/editor/src/proprietary/ui/Modal.css
+++ b/frontend/editor/src/core/ui/Modal.css
@@ -67,23 +67,10 @@
   color: var(--color-text-4);
 }
 
+/* Sizing/background/hover are owned by the Button; this just keeps it from
+ * stretching. */
 .sui-modal__close {
   flex: 0 0 auto;
-  width: 1.75rem;
-  height: 1.75rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-4);
-  transition:
-    background var(--motion-fast),
-    color var(--motion-fast);
-}
-
-.sui-modal__close:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-1);
 }
 
 .sui-modal__body {
diff --git a/frontend/editor/src/proprietary/ui/Modal.tsx b/frontend/editor/src/core/ui/Modal.tsx
similarity index 66%
rename from frontend/editor/src/proprietary/ui/Modal.tsx
rename to frontend/editor/src/core/ui/Modal.tsx
index c0de1d475c..09b019e0ef 100644
--- a/frontend/editor/src/proprietary/ui/Modal.tsx
+++ b/frontend/editor/src/core/ui/Modal.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useId, type ReactNode } from "react";
 import { createPortal } from "react-dom";
 import { FocusTrap } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import "@app/ui/Modal.css";
 
 export type ModalWidth = "sm" | "md" | "lg" | "xl";
@@ -8,31 +9,20 @@ export type ModalWidth = "sm" | "md" | "lg" | "xl";
 export interface ModalProps {
   open: boolean;
   onClose: () => void;
-  /** Optional heading slot rendered above the body. */
   title?: ReactNode;
-  /** Optional sub-heading rendered under the title. */
   subtitle?: ReactNode;
-  /** Optional footer slot rendered below the body. */
   footer?: ReactNode;
-  /** Width preset. sm=24rem, md=32rem, lg=48rem, xl=64rem. Defaults to md. */
+  /** sm=24rem, md=32rem, lg=48rem, xl=64rem. */
   width?: ModalWidth;
-  /** Disable click-on-backdrop dismissal. Defaults to false. */
   disableBackdropClose?: boolean;
-  /** Disable Escape-key dismissal. Defaults to false. */
   disableEscapeClose?: boolean;
-  /** Accessible name when no visible `title` is provided. */
+  /** Accessible name when no visible title is provided. */
   ariaLabel?: string;
   className?: string;
   children?: ReactNode;
 }
 
-/**
- * Portal-rendered modal with our own brand shell (header / body / footer,
- * width presets, backdrop). The hard part — trapping Tab focus inside the
- * dialog, initial focus, and restoring focus to the opener on close — is
- * delegated to Mantine's  rather than hand-rolled. ESC and
- * backdrop click close by default; the caller owns the open state.
- */
+/** Tab focus trapping and restoration are delegated to Mantine's FocusTrap. */
 export function Modal({
   open,
   onClose,
@@ -102,27 +92,31 @@ export function Modal({
                 )}
                 {subtitle && 
{subtitle}
}
               
-              
+                leftSection={
+                  
+                    
+                    
+                  
+                }
+              />
             
           )}
           
{children}

diff --git a/frontend/editor/src/proprietary/ui/MultiSelect.tsx b/frontend/editor/src/core/ui/MultiSelect.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/MultiSelect.tsx
rename to frontend/editor/src/core/ui/MultiSelect.tsx
diff --git a/frontend/editor/src/proprietary/ui/NavItem.css b/frontend/editor/src/core/ui/NavItem.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/NavItem.css
rename to frontend/editor/src/core/ui/NavItem.css
diff --git a/frontend/editor/src/proprietary/ui/NavItem.stories.tsx b/frontend/editor/src/core/ui/NavItem.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/NavItem.stories.tsx
rename to frontend/editor/src/core/ui/NavItem.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/NavItem.tsx b/frontend/editor/src/core/ui/NavItem.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/NavItem.tsx
rename to frontend/editor/src/core/ui/NavItem.tsx
diff --git a/frontend/editor/src/proprietary/ui/NumberInput.tsx b/frontend/editor/src/core/ui/NumberInput.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/NumberInput.tsx
rename to frontend/editor/src/core/ui/NumberInput.tsx
diff --git a/frontend/editor/src/proprietary/ui/PanelHeader.css b/frontend/editor/src/core/ui/PanelHeader.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/PanelHeader.css
rename to frontend/editor/src/core/ui/PanelHeader.css
diff --git a/frontend/editor/src/proprietary/ui/PanelHeader.stories.tsx b/frontend/editor/src/core/ui/PanelHeader.stories.tsx
similarity index 75%
rename from frontend/editor/src/proprietary/ui/PanelHeader.stories.tsx
rename to frontend/editor/src/core/ui/PanelHeader.stories.tsx
index 36f193e1d8..715adbab65 100644
--- a/frontend/editor/src/proprietary/ui/PanelHeader.stories.tsx
+++ b/frontend/editor/src/core/ui/PanelHeader.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
-import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
 import { PanelHeader } from "@app/ui/PanelHeader";
 import { StatusBadge } from "@app/ui/StatusBadge";
+import { Button } from "@app/ui/Button";
 
 const meta: Meta = {
   title: "Primitives/PanelHeader",
@@ -31,16 +31,11 @@ export const Accented: Story = {
  *  the menu (e.g. the chat header's "Clear chat"). */
 export const WithMenu: Story = {
   args: {
-    title: "Stirling",
-    menuLabel: "Stirling agent options",
     menuItems: [
-      {
-        key: "clear",
-        icon: ,
-        label: "Clear chat",
-        onClick: () => {},
-      },
+      { label: "Clear chat", onClick: () => {} },
+      { label: "Export history", onClick: () => {} },
     ],
+    menuLabel: "Chat options",
   },
 };
 
@@ -54,9 +49,17 @@ export const WithActions: Story = {
   args: {
     accent: "purple",
     actions: (
-      
-        Active
-      
+      <>
+        
+          Healthy
+        
+        
+        
+      
     ),
   },
 };
diff --git a/frontend/editor/src/proprietary/ui/PanelHeader.tsx b/frontend/editor/src/core/ui/PanelHeader.tsx
similarity index 94%
rename from frontend/editor/src/proprietary/ui/PanelHeader.tsx
rename to frontend/editor/src/core/ui/PanelHeader.tsx
index 26ba1b738c..3d9a0383ba 100644
--- a/frontend/editor/src/proprietary/ui/PanelHeader.tsx
+++ b/frontend/editor/src/core/ui/PanelHeader.tsx
@@ -69,9 +69,6 @@ export function PanelHeader({
 }: PanelHeaderProps) {
   const hasMenu = menuItems != null && menuItems.length > 0;
 
-  // Tint the icon badge with the category colour when an accent is given. Inline
-  // so it wins over the default blue treatment in both light and dark mode; the
-  // --color-* tokens are theme-aware and match the badge tint used elsewhere.
   const iconStyle: CSSProperties | undefined = accent
     ? {
         color: `var(--color-${accent})`,
diff --git a/frontend/editor/src/proprietary/ui/ProgressBar.css b/frontend/editor/src/core/ui/ProgressBar.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ProgressBar.css
rename to frontend/editor/src/core/ui/ProgressBar.css
diff --git a/frontend/editor/src/proprietary/ui/ProgressBar.stories.tsx b/frontend/editor/src/core/ui/ProgressBar.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ProgressBar.stories.tsx
rename to frontend/editor/src/core/ui/ProgressBar.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/ProgressBar.tsx b/frontend/editor/src/core/ui/ProgressBar.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ProgressBar.tsx
rename to frontend/editor/src/core/ui/ProgressBar.tsx
diff --git a/frontend/editor/src/proprietary/ui/Radio.css b/frontend/editor/src/core/ui/Radio.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Radio.css
rename to frontend/editor/src/core/ui/Radio.css
diff --git a/frontend/editor/src/proprietary/ui/Radio.tsx b/frontend/editor/src/core/ui/Radio.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Radio.tsx
rename to frontend/editor/src/core/ui/Radio.tsx
diff --git a/frontend/editor/src/proprietary/ui/SectionDivider.css b/frontend/editor/src/core/ui/SectionDivider.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SectionDivider.css
rename to frontend/editor/src/core/ui/SectionDivider.css
diff --git a/frontend/editor/src/proprietary/ui/SectionDivider.stories.tsx b/frontend/editor/src/core/ui/SectionDivider.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SectionDivider.stories.tsx
rename to frontend/editor/src/core/ui/SectionDivider.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/SectionDivider.tsx b/frontend/editor/src/core/ui/SectionDivider.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SectionDivider.tsx
rename to frontend/editor/src/core/ui/SectionDivider.tsx
diff --git a/frontend/editor/src/proprietary/ui/SectionHeader.css b/frontend/editor/src/core/ui/SectionHeader.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SectionHeader.css
rename to frontend/editor/src/core/ui/SectionHeader.css
diff --git a/frontend/editor/src/proprietary/ui/SectionHeader.stories.tsx b/frontend/editor/src/core/ui/SectionHeader.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SectionHeader.stories.tsx
rename to frontend/editor/src/core/ui/SectionHeader.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/SectionHeader.tsx b/frontend/editor/src/core/ui/SectionHeader.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SectionHeader.tsx
rename to frontend/editor/src/core/ui/SectionHeader.tsx
diff --git a/frontend/editor/src/core/ui/SegmentedControl.css b/frontend/editor/src/core/ui/SegmentedControl.css
new file mode 100644
index 0000000000..62e05c1941
--- /dev/null
+++ b/frontend/editor/src/core/ui/SegmentedControl.css
@@ -0,0 +1,38 @@
+/* Mantine-backed SegmentedControl — colour from the shared accent palette (accents.css). */
+@import "./accents.css";
+
+/* Compact the track and let labels fill the fixed height (matches Button/ActionIcon). */
+.sui-seg.mantine-SegmentedControl-root {
+  --sc-padding: 0.1875rem; /* 3px track inset */
+  align-items: stretch;
+}
+.sui-seg .mantine-SegmentedControl-control {
+  display: flex;
+}
+.sui-seg .mantine-SegmentedControl-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding-block: 0;
+}
+/* Mantine wraps label content in .innerLabel; flex it so an icon + text sit
+ * centered together with a consistent gap. Without this the inline-block icon
+ * aligns to the text baseline and rides ~3px high. */
+.sui-seg .mantine-SegmentedControl-innerLabel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+}
+
+/* secondary: strip the boxed track AND the inter-segment separators so only the
+ * tinted active pill reads — no track chrome at all. */
+.sui-seg--secondary.mantine-SegmentedControl-root {
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.sui-seg--secondary .mantine-SegmentedControl-control::before {
+  background-color: transparent !important;
+}
diff --git a/frontend/editor/src/core/ui/SegmentedControl.stories.tsx b/frontend/editor/src/core/ui/SegmentedControl.stories.tsx
new file mode 100644
index 0000000000..0f16141a5a
--- /dev/null
+++ b/frontend/editor/src/core/ui/SegmentedControl.stories.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
+import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
+import { SegmentedControl } from "@app/ui/SegmentedControl";
+
+const meta: Meta = {
+  title: "Primitives/SegmentedControl",
+  component: SegmentedControl,
+  parameters: { layout: "centered" },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => {
+    const [v, setV] = useState("medium");
+    return (
+      
+    );
+  },
+};
+
+export const FullWidth: Story = {
+  render: () => {
+    const [v, setV] = useState("pdf");
+    return (
+      

+        
+      

+    );
+  },
+};
+
+/** `primary` (default) shows an accent-filled active pill; `secondary` drops the
+ * track chrome and tints the active pill + label in the accent colour. The
+ * highlight slides between segments. */
+export const Variants: Story = {
+  render: () => {
+    const [a, setA] = useState("viewer");
+    const [b, setB] = useState("viewer");
+    const options = [
+      { label: "Viewer", value: "viewer" },
+      { label: "Page Editor", value: "pages" },
+      { label: "Active Files", value: "files" },
+    ];
+    return (
+      

+        
+        
+      

+    );
+  },
+};
+
+export const Small: Story = {
+  render: () => {
+    const [v, setV] = useState("pages");
+    return (
+      
+    );
+  },
+};
+
+/** Icon + label per segment (mirrors the workbench view switcher). Icons and
+ * labels should sit centered together in each segment. */
+export const WithIcons: Story = {
+  render: () => {
+    const [v, setV] = useState("viewer");
+    return (
+      
+                
+                Viewer
+              
+            ),
+          },
+          {
+            value: "files",
+            label: (
+              <>
+                
+                Active Files
+              
+            ),
+          },
+        ]}
+      />
+    );
+  },
+};
diff --git a/frontend/editor/src/core/ui/SegmentedControl.tsx b/frontend/editor/src/core/ui/SegmentedControl.tsx
new file mode 100644
index 0000000000..a82874cc45
--- /dev/null
+++ b/frontend/editor/src/core/ui/SegmentedControl.tsx
@@ -0,0 +1,103 @@
+import { SegmentedControl as MantineSegmentedControl } from "@mantine/core";
+import type { CSSProperties, ReactNode } from "react";
+import { CONTROL_HEIGHT } from "@app/ui/controlSizes";
+import "@app/ui/SegmentedControl.css";
+
+/** Same accent dial as Button. Only the active segment is accented. */
+export type SegmentedAccent =
+  | "default"
+  | "neutral"
+  | "brand"
+  | "ai"
+  | "premium"
+  | "danger"
+  | "success"
+  | "warning";
+export type SegmentedSize = "xs" | "sm" | "md" | "lg";
+/** primary = accent-filled active pill; secondary = subtle tinted pill, no track chrome. */
+export type SegmentedVariant = "primary" | "secondary";
+
+// Overall height, in sync with Button/ActionIcon via CONTROL_HEIGHT (xs is segmented-only).
+const SEG_HEIGHT: Record = {
+  xs: "26px",
+  sm: CONTROL_HEIGHT.sm,
+  md: CONTROL_HEIGHT.md,
+  lg: CONTROL_HEIGHT.lg,
+};
+
+export interface SegmentedOption {
+  label: ReactNode;
+  value: T;
+  disabled?: boolean;
+}
+
+export interface SegmentedControlProps {
+  options: SegmentedOption[];
+  value: T;
+  onChange: (value: T) => void;
+  accent?: SegmentedAccent;
+  size?: SegmentedSize;
+  variant?: SegmentedVariant;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  /** Alias of `disabled`; also disables the control. */
+  loading?: boolean;
+  /** Accessible name for the radiogroup. */
+  ariaLabel?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** Single-select control with a sliding highlight (Mantine-backed). */
+export function SegmentedControl({
+  options,
+  value,
+  onChange,
+  accent = "default",
+  size = "md",
+  variant = "primary",
+  fullWidth = false,
+  disabled = false,
+  loading = false,
+  ariaLabel,
+  className,
+  style,
+}: SegmentedControlProps) {
+  const classes = [
+    "sui-seg",
+    `sui-acc-${accent}`,
+    `sui-seg--${variant}`,
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  // Drive Mantine's indicator/label colour vars from the accent palette.
+  const accentVars =
+    variant === "primary"
+      ? { "--sc-color": "var(--_solid)", "--sc-label-color": "var(--_on)" }
+      : { "--sc-color": "var(--_tint)", "--sc-label-color": "var(--_text)" };
+
+  return (
+     ({
+        label: o.label,
+        value: o.value,
+        disabled: o.disabled,
+      }))}
+      value={value}
+      onChange={(v) => onChange(v as T)}
+      size={size}
+      fullWidth={fullWidth}
+      disabled={disabled || loading}
+      aria-label={ariaLabel}
+    />
+  );
+}
diff --git a/frontend/editor/src/proprietary/ui/Select.css b/frontend/editor/src/core/ui/Select.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Select.css
rename to frontend/editor/src/core/ui/Select.css
diff --git a/frontend/editor/src/proprietary/ui/Select.tsx b/frontend/editor/src/core/ui/Select.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Select.tsx
rename to frontend/editor/src/core/ui/Select.tsx
diff --git a/frontend/editor/src/proprietary/ui/SettingsRow.css b/frontend/editor/src/core/ui/SettingsRow.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SettingsRow.css
rename to frontend/editor/src/core/ui/SettingsRow.css
diff --git a/frontend/editor/src/proprietary/ui/SettingsRow.stories.tsx b/frontend/editor/src/core/ui/SettingsRow.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SettingsRow.stories.tsx
rename to frontend/editor/src/core/ui/SettingsRow.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/SettingsRow.tsx b/frontend/editor/src/core/ui/SettingsRow.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/SettingsRow.tsx
rename to frontend/editor/src/core/ui/SettingsRow.tsx
diff --git a/frontend/editor/src/proprietary/ui/SettingsShell.css b/frontend/editor/src/core/ui/SettingsShell.css
similarity index 88%
rename from frontend/editor/src/proprietary/ui/SettingsShell.css
rename to frontend/editor/src/core/ui/SettingsShell.css
index 5e56a7934e..5d0e591c8b 100644
--- a/frontend/editor/src/proprietary/ui/SettingsShell.css
+++ b/frontend/editor/src/core/ui/SettingsShell.css
@@ -109,24 +109,10 @@
   align-items: center;
   gap: 0.5rem;
 }
+/* Sizing/background/hover are owned by the Button; this just keeps it from
+ * stretching. */
 .sui-settings-shell__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: none;
-  border-radius: var(--radius-sm);
-  background: none;
-  color: var(--color-text-3);
-  cursor: pointer;
-  transition:
-    background var(--motion-fast),
-    color var(--motion-fast);
-}
-.sui-settings-shell__close:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-1);
+  flex: 0 0 auto;
 }
 
 .sui-settings-shell__body {
diff --git a/frontend/editor/src/proprietary/ui/SettingsShell.stories.tsx b/frontend/editor/src/core/ui/SettingsShell.stories.tsx
similarity index 94%
rename from frontend/editor/src/proprietary/ui/SettingsShell.stories.tsx
rename to frontend/editor/src/core/ui/SettingsShell.stories.tsx
index 4d14cd98c9..cd266c95a1 100644
--- a/frontend/editor/src/proprietary/ui/SettingsShell.stories.tsx
+++ b/frontend/editor/src/core/ui/SettingsShell.stories.tsx
@@ -58,8 +58,8 @@ export const Default: Story = {
           onClose={() => {}}
           footer={
             <>
-              
-              
+              
+              
             
           }
         >
diff --git a/frontend/editor/src/proprietary/ui/SettingsShell.tsx b/frontend/editor/src/core/ui/SettingsShell.tsx
similarity index 65%
rename from frontend/editor/src/proprietary/ui/SettingsShell.tsx
rename to frontend/editor/src/core/ui/SettingsShell.tsx
index 77dd36e2ca..8e86715d80 100644
--- a/frontend/editor/src/proprietary/ui/SettingsShell.tsx
+++ b/frontend/editor/src/core/ui/SettingsShell.tsx
@@ -1,18 +1,17 @@
 import type { ReactNode } from "react";
+import { Button } from "@app/ui/Button";
 import "@app/ui/SettingsShell.css";
 
 export interface SettingsNavItem {
   key: string;
   label: string;
-  /** Optional leading glyph. */
   icon?: ReactNode;
-  /** Optional trailing badge (e.g. a plan gate or count). */
+  /** Trailing badge (e.g. plan gate or count). */
   badge?: ReactNode;
   disabled?: boolean;
 }
 
 export interface SettingsNavSection {
-  /** Uppercase group heading above its items. */
   title: string;
   items: SettingsNavItem[];
 }
@@ -21,28 +20,17 @@ export interface SettingsShellProps {
   sections: SettingsNavSection[];
   activeKey: string;
   onSelect: (key: string) => void;
-  /** Heading for the content pane — usually the active item's label. */
   title: ReactNode;
-  /** Renders a close button at the top-right of the content header. */
   onClose?: () => void;
-  /** Extra header controls (e.g. a search field) left of the close button. */
+  /** Rendered left of the close button. */
   headerActions?: ReactNode;
-  /** Sticky footer, e.g. Save / Cancel. */
+  /** Sticky footer (e.g. Save / Cancel). */
   footer?: ReactNode;
-  /** Active section content. */
   children: ReactNode;
   className?: string;
 }
 
-/**
- * Two-pane settings layout: a grouped left navigation rail and a content pane
- * with a sticky header (active title + actions) and an optional sticky footer.
- *
- * Layout chrome only — the caller owns section state and renders the active
- * panel as `children`. Host it inside any modal/dialog frame (it fills its
- * container's height and scrolls the two panes independently). Shared so the
- * portal and the editor can present account settings the same way.
- */
+/** Two-pane settings layout. Fills its container; both panes scroll independently. */
 export function SettingsShell({
   sections,
   activeKey,
@@ -103,27 +91,31 @@ export function SettingsShell({
           

             {headerActions}
             {onClose && (
-              
+                leftSection={
+                  
+                    
+                    
+                  
+                }
+              />
             )}
           

         
diff --git a/frontend/editor/src/proprietary/ui/Skeleton.css b/frontend/editor/src/core/ui/Skeleton.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Skeleton.css
rename to frontend/editor/src/core/ui/Skeleton.css
diff --git a/frontend/editor/src/proprietary/ui/Skeleton.stories.tsx b/frontend/editor/src/core/ui/Skeleton.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Skeleton.stories.tsx
rename to frontend/editor/src/core/ui/Skeleton.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Skeleton.tsx b/frontend/editor/src/core/ui/Skeleton.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Skeleton.tsx
rename to frontend/editor/src/core/ui/Skeleton.tsx
diff --git a/frontend/editor/src/proprietary/ui/Slider.css b/frontend/editor/src/core/ui/Slider.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Slider.css
rename to frontend/editor/src/core/ui/Slider.css
diff --git a/frontend/editor/src/proprietary/ui/Slider.tsx b/frontend/editor/src/core/ui/Slider.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Slider.tsx
rename to frontend/editor/src/core/ui/Slider.tsx
diff --git a/frontend/editor/src/proprietary/ui/Spinner.css b/frontend/editor/src/core/ui/Spinner.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Spinner.css
rename to frontend/editor/src/core/ui/Spinner.css
diff --git a/frontend/editor/src/proprietary/ui/Spinner.stories.tsx b/frontend/editor/src/core/ui/Spinner.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Spinner.stories.tsx
rename to frontend/editor/src/core/ui/Spinner.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Spinner.tsx b/frontend/editor/src/core/ui/Spinner.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Spinner.tsx
rename to frontend/editor/src/core/ui/Spinner.tsx
diff --git a/frontend/editor/src/proprietary/ui/Stack.css b/frontend/editor/src/core/ui/Stack.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Stack.css
rename to frontend/editor/src/core/ui/Stack.css
diff --git a/frontend/editor/src/proprietary/ui/Stack.stories.tsx b/frontend/editor/src/core/ui/Stack.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Stack.stories.tsx
rename to frontend/editor/src/core/ui/Stack.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Stack.tsx b/frontend/editor/src/core/ui/Stack.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Stack.tsx
rename to frontend/editor/src/core/ui/Stack.tsx
diff --git a/frontend/editor/src/proprietary/ui/StatTile.css b/frontend/editor/src/core/ui/StatTile.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StatTile.css
rename to frontend/editor/src/core/ui/StatTile.css
diff --git a/frontend/editor/src/proprietary/ui/StatTile.stories.tsx b/frontend/editor/src/core/ui/StatTile.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StatTile.stories.tsx
rename to frontend/editor/src/core/ui/StatTile.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/StatTile.tsx b/frontend/editor/src/core/ui/StatTile.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StatTile.tsx
rename to frontend/editor/src/core/ui/StatTile.tsx
diff --git a/frontend/editor/src/proprietary/ui/StatusBadge.css b/frontend/editor/src/core/ui/StatusBadge.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StatusBadge.css
rename to frontend/editor/src/core/ui/StatusBadge.css
diff --git a/frontend/editor/src/proprietary/ui/StatusBadge.stories.tsx b/frontend/editor/src/core/ui/StatusBadge.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StatusBadge.stories.tsx
rename to frontend/editor/src/core/ui/StatusBadge.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/StatusBadge.tsx b/frontend/editor/src/core/ui/StatusBadge.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StatusBadge.tsx
rename to frontend/editor/src/core/ui/StatusBadge.tsx
diff --git a/frontend/editor/src/proprietary/ui/StepIndicator.css b/frontend/editor/src/core/ui/StepIndicator.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StepIndicator.css
rename to frontend/editor/src/core/ui/StepIndicator.css
diff --git a/frontend/editor/src/proprietary/ui/StepIndicator.stories.tsx b/frontend/editor/src/core/ui/StepIndicator.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StepIndicator.stories.tsx
rename to frontend/editor/src/core/ui/StepIndicator.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/StepIndicator.tsx b/frontend/editor/src/core/ui/StepIndicator.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/StepIndicator.tsx
rename to frontend/editor/src/core/ui/StepIndicator.tsx
diff --git a/frontend/editor/src/proprietary/ui/Table.css b/frontend/editor/src/core/ui/Table.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Table.css
rename to frontend/editor/src/core/ui/Table.css
diff --git a/frontend/editor/src/proprietary/ui/Table.stories.tsx b/frontend/editor/src/core/ui/Table.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Table.stories.tsx
rename to frontend/editor/src/core/ui/Table.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Table.tsx b/frontend/editor/src/core/ui/Table.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Table.tsx
rename to frontend/editor/src/core/ui/Table.tsx
diff --git a/frontend/editor/src/proprietary/ui/Tabs.css b/frontend/editor/src/core/ui/Tabs.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Tabs.css
rename to frontend/editor/src/core/ui/Tabs.css
diff --git a/frontend/editor/src/proprietary/ui/Tabs.stories.tsx b/frontend/editor/src/core/ui/Tabs.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Tabs.stories.tsx
rename to frontend/editor/src/core/ui/Tabs.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Tabs.tsx b/frontend/editor/src/core/ui/Tabs.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Tabs.tsx
rename to frontend/editor/src/core/ui/Tabs.tsx
diff --git a/frontend/editor/src/proprietary/ui/Toast.css b/frontend/editor/src/core/ui/Toast.css
similarity index 81%
rename from frontend/editor/src/proprietary/ui/Toast.css
rename to frontend/editor/src/core/ui/Toast.css
index ab52d37d3e..a1ca3a67bf 100644
--- a/frontend/editor/src/proprietary/ui/Toast.css
+++ b/frontend/editor/src/core/ui/Toast.css
@@ -52,19 +52,10 @@
   line-height: 1.45;
 }
 
+/* Sizing/background/hover are owned by the Button; this just keeps it from
+ * stretching and sizes the × glyph. */
 .sui-toast__close {
   flex: 0 0 auto;
-  width: 1.25rem;
-  height: 1.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-4);
   font-size: 1rem;
   line-height: 1;
 }
-.sui-toast__close:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-1);
-}
diff --git a/frontend/editor/src/proprietary/ui/Toast.stories.tsx b/frontend/editor/src/core/ui/Toast.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/Toast.stories.tsx
rename to frontend/editor/src/core/ui/Toast.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/Toast.tsx b/frontend/editor/src/core/ui/Toast.tsx
similarity index 90%
rename from frontend/editor/src/proprietary/ui/Toast.tsx
rename to frontend/editor/src/core/ui/Toast.tsx
index 055f5ec08d..12dcc16990 100644
--- a/frontend/editor/src/proprietary/ui/Toast.tsx
+++ b/frontend/editor/src/core/ui/Toast.tsx
@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from "react";
 import { createPortal } from "react-dom";
+import { Button } from "@app/ui/Button";
 import "@app/ui/Toast.css";
 
 export type ToastTone = "info" | "success" | "warning" | "danger";
@@ -84,8 +85,7 @@ function ToastViewport({
   entries: ToastEntry[];
   onDismiss: (id: number) => void;
 }) {
-  // Render through a portal so toasts always sit above any in-flow stacking
-  // context. SSR-safe by checking for document existence.
+  // Portal keeps toasts above any stacking context; document check is SSR safety.
   if (typeof document === "undefined") return null;
   return createPortal(
     
 void;
 }) {
   useEffect(() => {
-    // Allow Escape to dismiss the most recently focused toast.
+    // Escape dismisses the focused toast.
     function onKey(e: KeyboardEvent) {
       if (e.key === "Escape") onDismiss(entry.id);
     }
@@ -128,14 +128,16 @@ function ToastItem({
           
{entry.description}

         )}
       

-      
+        leftSection={×}
+      />
     
   );
 }
diff --git a/frontend/editor/src/proprietary/ui/ToggleSwitch.css b/frontend/editor/src/core/ui/ToggleSwitch.css
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ToggleSwitch.css
rename to frontend/editor/src/core/ui/ToggleSwitch.css
diff --git a/frontend/editor/src/proprietary/ui/ToggleSwitch.stories.tsx b/frontend/editor/src/core/ui/ToggleSwitch.stories.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ToggleSwitch.stories.tsx
rename to frontend/editor/src/core/ui/ToggleSwitch.stories.tsx
diff --git a/frontend/editor/src/proprietary/ui/ToggleSwitch.tsx b/frontend/editor/src/core/ui/ToggleSwitch.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ToggleSwitch.tsx
rename to frontend/editor/src/core/ui/ToggleSwitch.tsx
diff --git a/frontend/editor/src/core/ui/accents.css b/frontend/editor/src/core/ui/accents.css
new file mode 100644
index 0000000000..75001f6777
--- /dev/null
+++ b/frontend/editor/src/core/ui/accents.css
@@ -0,0 +1,101 @@
+/* Shared accent palette for Button/ActionIcon/SegmentedControl/Chip; standard
+ * accents derive from --color-* tokens (auto dark), neutral/brand/ai are explicit. */
+
+.sui-acc-default {
+  --_solid: var(--color-blue);
+  --_solid-hover: var(--color-blue-dark);
+  --_on: #ffffff;
+  --_text: var(--color-blue-dark);
+  --_bd: var(--color-blue-border);
+  --_tint: color-mix(in srgb, var(--color-blue) 12%, transparent);
+}
+.sui-acc-danger {
+  --_solid: var(--color-red);
+  --_solid-hover: var(--color-red-dark);
+  --_on: #ffffff;
+  --_text: var(--color-red-dark);
+  --_bd: var(--color-red-border);
+  --_tint: color-mix(in srgb, var(--color-red) 12%, transparent);
+}
+.sui-acc-success {
+  --_solid: var(--color-green);
+  --_solid-hover: var(--color-green-dark);
+  --_on: #ffffff;
+  --_text: var(--color-green-dark);
+  --_bd: var(--color-green-border);
+  --_tint: color-mix(in srgb, var(--color-green) 12%, transparent);
+}
+.sui-acc-warning {
+  --_solid: var(--color-amber);
+  --_solid-hover: var(--color-amber-dark);
+  --_on: #ffffff;
+  --_text: var(--color-amber-dark);
+  --_bd: var(--color-amber-border);
+  --_tint: color-mix(in srgb, var(--color-amber) 12%, transparent);
+}
+/* premium: purple upgrade CTA — gradient fill (token), violet text/border. */
+.sui-acc-premium {
+  --_solid: var(--grad-purple-btn);
+  --_solid-hover: var(--grad-purple-btn);
+  --_on: #ffffff;
+  --_text: var(--color-purple-dark);
+  --_bd: var(--color-purple-border);
+  --_tint: color-mix(in srgb, var(--color-purple) 12%, transparent);
+}
+
+/* neutral: low-emphasis grey — no palette token, so explicit. */
+.sui-acc-neutral {
+  --_solid: #475569;
+  --_solid-hover: #334155;
+  --_on: #ffffff;
+  --_text: #475569;
+  --_bd: #cbd5e1;
+  --_tint: rgba(71, 85, 105, 0.1);
+}
+[data-theme="dark"] .sui-acc-neutral {
+  --_solid: #64748b;
+  --_solid-hover: #475569;
+  --_text: #cbd5e1;
+  --_bd: #334155;
+  --_tint: rgba(148, 163, 184, 0.16);
+}
+/* brand: Stirling red — a bespoke brand colour, not part of the token palette. */
+.sui-acc-brand {
+  --_solid: #8e3131;
+  --_solid-hover: #7a2929;
+  --_on: #ffffff;
+  --_text: #8e3131;
+  --_bd: #d9a8a8;
+  --_tint: rgba(142, 49, 49, 0.09);
+}
+[data-theme="dark"] .sui-acc-brand {
+  --_text: #d98a8a;
+  --_bd: #5a2424;
+  --_tint: rgba(217, 138, 138, 0.16);
+}
+/* ai: multi-hue gradient for AI features — no single-colour token. */
+.sui-acc-ai {
+  --_solid: linear-gradient(
+    135deg,
+    #8b5cf6 0%,
+    #6366f1 38%,
+    #3b82f6 72%,
+    #22d3ee 100%
+  );
+  --_solid-hover: linear-gradient(
+    135deg,
+    #8b5cf6 0%,
+    #6366f1 38%,
+    #3b82f6 72%,
+    #22d3ee 100%
+  );
+  --_on: #ffffff;
+  --_text: #6366f1;
+  --_bd: #c7d2fe;
+  --_tint: rgba(99, 102, 241, 0.1);
+}
+[data-theme="dark"] .sui-acc-ai {
+  --_text: #a5b4fc;
+  --_bd: #3730a3;
+  --_tint: rgba(129, 140, 248, 0.18);
+}
diff --git a/frontend/editor/src/proprietary/ui/ariaForwarding.test.tsx b/frontend/editor/src/core/ui/ariaForwarding.test.tsx
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ariaForwarding.test.tsx
rename to frontend/editor/src/core/ui/ariaForwarding.test.tsx
diff --git a/frontend/editor/src/proprietary/ui/ariaForwarding.ts b/frontend/editor/src/core/ui/ariaForwarding.ts
similarity index 100%
rename from frontend/editor/src/proprietary/ui/ariaForwarding.ts
rename to frontend/editor/src/core/ui/ariaForwarding.ts
diff --git a/frontend/editor/src/core/ui/controlSizes.ts b/frontend/editor/src/core/ui/controlSizes.ts
new file mode 100644
index 0000000000..44347ce99d
--- /dev/null
+++ b/frontend/editor/src/core/ui/controlSizes.ts
@@ -0,0 +1,9 @@
+/** Shared control height scale (px) — Button, ActionIcon and SegmentedControl all use it. */
+export const CONTROL_HEIGHT = {
+  sm: "30px",
+  md: "36px",
+  lg: "42px",
+  xl: "48px",
+} as const;
+
+export type ControlSize = keyof typeof CONTROL_HEIGHT;
diff --git a/frontend/editor/src/proprietary/ui/index.ts b/frontend/editor/src/core/ui/index.ts
similarity index 92%
rename from frontend/editor/src/proprietary/ui/index.ts
rename to frontend/editor/src/core/ui/index.ts
index e6c4864c52..39b305f358 100644
--- a/frontend/editor/src/proprietary/ui/index.ts
+++ b/frontend/editor/src/core/ui/index.ts
@@ -1,4 +1,7 @@
 export * from "@app/ui/Button";
+export * from "@app/ui/ActionIcon";
+export * from "@app/ui/FilePicker";
+export * from "@app/ui/SegmentedControl";
 export * from "@app/ui/StatusBadge";
 export * from "@app/ui/MethodBadge";
 export * from "@app/ui/ToggleSwitch";
diff --git a/frontend/editor/src/desktop/components/ConnectionSettings.tsx b/frontend/editor/src/desktop/components/ConnectionSettings.tsx
index aec2d2bad6..746af00b25 100644
--- a/frontend/editor/src/desktop/components/ConnectionSettings.tsx
+++ b/frontend/editor/src/desktop/components/ConnectionSettings.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Stack, Card, Badge, Button, Text, Group } from "@mantine/core";
+import { Stack, Card, Badge, Text, Group } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import {
   connectionModeService,
@@ -153,14 +154,14 @@ export const ConnectionSettings: React.FC = () => {
 
           
             {config.mode === "local" ? (
-              
             ) : (
               
                 
diff --git a/frontend/editor/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx b/frontend/editor/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx
index c9813d818e..6d4940e178 100644
--- a/frontend/editor/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx
+++ b/frontend/editor/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx
@@ -4,6 +4,7 @@ import { authService, UserInfo } from "@app/services/authService";
 import { buildOAuthCallbackHtml } from "@app/utils/oauthCallbackHtml";
 import { oauthIconUrl } from "@app/auth/ui/oauthIcons";
 import { STIRLING_SAAS_URL } from "@app/constants/connection";
+import { Button } from "@app/ui/Button";
 import "@app/components/SetupWizard/desktopOAuth.css";
 
 type KnownProviderId =
@@ -149,7 +150,8 @@ export const DesktopOAuthButtons: React.FC = ({
                 providerEntry.id.slice(1)
               : t("setup.login.sso", "Single Sign-On"));
           return (
-            
+            
           );
         })}
       {oauthLoading && (
diff --git a/frontend/editor/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx b/frontend/editor/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx
index dc346ef9ac..a698611d52 100644
--- a/frontend/editor/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx
+++ b/frontend/editor/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx
@@ -7,6 +7,7 @@ import DividerWithText from "@app/components/shared/DividerWithText";
 import { DesktopOAuthButtons } from "@app/components/SetupWizard/DesktopOAuthButtons";
 import { SelfHostedLink } from "@app/components/SetupWizard/SelfHostedLink";
 import { UserInfo } from "@app/services/authService";
+import { Button } from "@app/ui/Button";
 import "@app/auth/ui/auth.css";
 
 interface SaaSLoginScreenProps {
@@ -107,8 +108,8 @@ export const SaaSLoginScreen: React.FC = ({
         className="navigation-link-container"
         style={{ marginTop: "0.5rem", textAlign: "right" }}
       >
-        
+        
       
 
       
@@ -127,14 +128,14 @@ export const SaaSLoginScreen: React.FC = ({
           className="navigation-link-container"
           style={{ marginTop: "0.5rem", textAlign: "center" }}
         >
-          
+          
         
       )}
     
diff --git a/frontend/editor/src/desktop/components/SetupWizard/SelfHostedLink.tsx b/frontend/editor/src/desktop/components/SetupWizard/SelfHostedLink.tsx
index 8d5c98fe6e..4d3f688179 100644
--- a/frontend/editor/src/desktop/components/SetupWizard/SelfHostedLink.tsx
+++ b/frontend/editor/src/desktop/components/SetupWizard/SelfHostedLink.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { Button } from "@app/ui/Button";
 import "@app/auth/ui/auth.css";
 
 interface SelfHostedLinkProps {
@@ -15,14 +16,14 @@ export const SelfHostedLink: React.FC = ({
 
   return (
     

-      
+      
     

   );
 };
diff --git a/frontend/editor/src/desktop/components/SetupWizard/ServerSelection.tsx b/frontend/editor/src/desktop/components/SetupWizard/ServerSelection.tsx
index 10746a66ea..cda4f2f4fc 100644
--- a/frontend/editor/src/desktop/components/SetupWizard/ServerSelection.tsx
+++ b/frontend/editor/src/desktop/components/SetupWizard/ServerSelection.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { Stack, Button, TextInput, Alert, Text } from "@mantine/core";
+import { Stack, TextInput, Alert, Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import {
   ServerConfig,
@@ -316,8 +317,8 @@ export const ServerSelection: React.FC = ({
 
         {serverUrl && (
           

-            
+            
           

         )}
 
@@ -339,9 +340,11 @@ export const ServerSelection: React.FC = ({
           type="submit"
           loading={testing || loading}
           disabled={loading}
-          mt="md"
           fullWidth
-          color="#AF3434"
+          accent="danger"
+          style={{
+            marginTop: "var(--mantine-spacing-md)",
+          }}
         >
           {testing
             ? t("setup.server.testing", "Testing connection...")
diff --git a/frontend/editor/src/desktop/components/SetupWizard/index.tsx b/frontend/editor/src/desktop/components/SetupWizard/index.tsx
index 2f6ddaba2b..b0779e6b78 100644
--- a/frontend/editor/src/desktop/components/SetupWizard/index.tsx
+++ b/frontend/editor/src/desktop/components/SetupWizard/index.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Stack, Text, Button, Alert, Loader, Center } from "@mantine/core";
+import { Stack, Text, Alert, Loader, Center } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { DesktopAuthLayout } from "@app/components/SetupWizard/DesktopAuthLayout";
 import { SaaSLoginScreen } from "@app/components/SetupWizard/SaaSLoginScreen";
 import { SaaSSignupScreen } from "@app/components/SetupWizard/SaaSSignupScreen";
@@ -476,8 +477,6 @@ export const SetupWizard: React.FC = ({
               
             
             
             )}
             
+              
             
           
         )}
@@ -565,13 +563,13 @@ export const SetupWizard: React.FC = ({
           className="navigation-link-container"
           style={{ marginTop: "1.5rem" }}
         >
-          
+          
         
       )}
     
diff --git a/frontend/editor/src/desktop/components/shared/SelfHostedOfflineBanner.tsx b/frontend/editor/src/desktop/components/shared/SelfHostedOfflineBanner.tsx
index ca75b03ec9..9f11296b56 100644
--- a/frontend/editor/src/desktop/components/shared/SelfHostedOfflineBanner.tsx
+++ b/frontend/editor/src/desktop/components/shared/SelfHostedOfflineBanner.tsx
@@ -1,14 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
-import {
-  Paper,
-  Group,
-  Text,
-  ActionIcon,
-  UnstyledButton,
-  Popover,
-  List,
-  ScrollArea,
-} from "@mantine/core";
+import { Paper, Group, Text, Popover, List, ScrollArea } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
@@ -260,7 +253,8 @@ export function SelfHostedOfflineBanner() {
             width={260}
           >
             
-               setExpanded((e) => !e)}
                 style={{
                   color: BANNER_LINK,
@@ -279,7 +273,7 @@ export function SelfHostedOfflineBanner() {
                       "selfHosted.offline.showTools",
                       "View unavailable tools ▾",
                     )}
-              
+              
             
             
               
@@ -293,8 +287,8 @@ export function SelfHostedOfflineBanner() {
           
         )}
          setDismissed(true)}
           aria-label={t("close", "Close")}
           style={{ color: BANNER_TEXT }}
diff --git a/frontend/editor/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx b/frontend/editor/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx
index f4ca397032..247fda74d3 100644
--- a/frontend/editor/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx
+++ b/frontend/editor/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Paper, Text, Button, Group } from "@mantine/core";
+import { Paper, Text, Group } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { useDefaultApp } from "@app/hooks/useDefaultApp";
 
@@ -29,8 +30,7 @@ export const DefaultAppSettings: React.FC = () => {
           
         
         
+    
   );
 }
diff --git a/frontend/editor/src/portal/components/AssistantPanel.tsx b/frontend/editor/src/portal/components/AssistantPanel.tsx
index 521f46f621..b31e6bec86 100644
--- a/frontend/editor/src/portal/components/AssistantPanel.tsx
+++ b/frontend/editor/src/portal/components/AssistantPanel.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { ActionIcon, Button } from "@app/ui";
 import { useTranslation } from "react-i18next";
 import { useUI } from "@portal/contexts/UIContext";
 import { useAsync } from "@portal/hooks/useAsync";
@@ -95,14 +96,14 @@ export function AssistantPanel() {
             {t("portal.assistant.title")}
           
         
-        
+        
       
 
       

@@ -113,15 +114,16 @@ export function AssistantPanel() {
             

             

               {suggestions.map((s) => (
-                
+                
               ))}
             

           
@@ -166,14 +168,14 @@ export function AssistantPanel() {
           className="portal-assistant__input"
           disabled={typing}
         />
-        
+        
       
     
   );
diff --git a/frontend/editor/src/portal/components/ChatFABWidget.stories.tsx b/frontend/editor/src/portal/components/ChatFABWidget.stories.tsx
index db9b006173..b6124bbd25 100644
--- a/frontend/editor/src/portal/components/ChatFABWidget.stories.tsx
+++ b/frontend/editor/src/portal/components/ChatFABWidget.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useRef, useState } from "react";
+import { Button } from "@app/ui/Button";
 import { ChatFABButton } from "@app/ui/ChatFABButton";
 import { ChatFABWindow } from "@app/ui/ChatFABWindow";
 
@@ -59,21 +60,15 @@ function MockChatContent({
         }}
       >
         Stirling
-        
+        
       
 
       {/* Messages */}
@@ -158,8 +153,10 @@ function ChatFABWidgetDemo({
       }}
     >
       {/* FAB button */}
-      
+      />
 
       {/* Chat panel */}
       

         ))}
-        
+        
       

 
       {/* FAB button */}
-      
+      />
 
       {/* Chat panel */}
       
[0],
+  options?: Parameters[1],
+) => baseRender(ui, { wrapper: MantineProvider, ...options });
+
 // Deterministic i18n: return the key so assertions don't depend on the async
 // TOML backend ever loading. Mirrors the editor's test setup convention.
 vi.mock("react-i18next", () => ({
diff --git a/frontend/editor/src/portal/components/Header.tsx b/frontend/editor/src/portal/components/Header.tsx
index 7194094171..6ba062e577 100644
--- a/frontend/editor/src/portal/components/Header.tsx
+++ b/frontend/editor/src/portal/components/Header.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next";
-import { Avatar, Dropdown } from "@app/ui";
+import { ActionIcon, Avatar, Button, Dropdown } from "@app/ui";
 import { useAuth } from "@app/auth";
 import { useTheme } from "@portal/contexts/ThemeContext";
 import { useTier, TIER_INFO, type Tier } from "@portal/contexts/TierContext";
@@ -19,8 +19,9 @@ function ThemeToggle() {
   const { theme, toggle } = useTheme();
   const { t } = useTranslation();
   return (
-    
+    
   );
 }
 
@@ -49,7 +50,11 @@ function TierSwitcher() {
   return (
     
       
-        
+        
       
       
         {(Object.keys(TIER_INFO) as Tier[]).map((id) => (
@@ -89,14 +94,15 @@ function UserMenu() {
   return (
     
       
-        
+        
       
       
         {name}
@@ -120,8 +126,9 @@ export function Header() {
         
       

 
-      
+      
 
       

         
diff --git a/frontend/editor/src/portal/components/MocksToggle.tsx b/frontend/editor/src/portal/components/MocksToggle.tsx
index 83fce02c21..a0a12d062e 100644
--- a/frontend/editor/src/portal/components/MocksToggle.tsx
+++ b/frontend/editor/src/portal/components/MocksToggle.tsx
@@ -6,6 +6,7 @@ import {
   writeMocksPreference,
 } from "@portal/mocks/preference";
 import "@portal/components/MocksToggle.css";
+import { Button } from "@app/ui/Button";
 
 /**
  * Dev-only header chip that flips MSW interception on and off. Persists the
@@ -32,8 +33,8 @@ export function MocksToggle() {
   }
 
   return (
-    
+    
   );
 }
diff --git a/frontend/editor/src/portal/components/NotificationsDropdown.tsx b/frontend/editor/src/portal/components/NotificationsDropdown.tsx
index 4a0d84d5c3..1401837e53 100644
--- a/frontend/editor/src/portal/components/NotificationsDropdown.tsx
+++ b/frontend/editor/src/portal/components/NotificationsDropdown.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Dropdown, EmptyState, Skeleton } from "@app/ui";
+import { ActionIcon, Button, Dropdown, EmptyState, Skeleton } from "@app/ui";
 import { BellIcon } from "@portal/components/icons";
 import { useAsync, useSectionFlags } from "@portal/hooks/useAsync";
 import {
@@ -45,8 +45,9 @@ export function NotificationsDropdown() {
   return (
     
       
-        
+        
       
       
         

@@ -115,17 +116,22 @@ export function NotificationsDropdown() {
           
         )}
         

-          
-          
+          
+          
         

       
     
diff --git a/frontend/editor/src/portal/components/PipelineForkWizard.tsx b/frontend/editor/src/portal/components/PipelineForkWizard.tsx
index 838afda3db..3a27b5984a 100644
--- a/frontend/editor/src/portal/components/PipelineForkWizard.tsx
+++ b/frontend/editor/src/portal/components/PipelineForkWizard.tsx
@@ -85,9 +85,9 @@ export function PipelineForkWizard() {
       {phase === "pick" && (
         

           {PIPELINE_TEMPLATES.map((t) => (
-            
+            
           ))}
         

       )}
@@ -139,17 +139,16 @@ export function PipelineForkWizard() {
           
 
           

-            
             
           );
@@ -113,7 +113,7 @@ export function PolicySummary() {
         return (
           
+        
       
       

         {USE_CASES.map((uc) => (
@@ -70,7 +71,8 @@ export function PopularUseCases() {
             

               {t(`portal.useCases.items.${uc.key}.blurb`)}
             

-            
+            
           
         ))}
       

diff --git a/frontend/editor/src/portal/components/ProcessingStatusStrip.tsx b/frontend/editor/src/portal/components/ProcessingStatusStrip.tsx
index 9aa3025f98..1ef41f5e0f 100644
--- a/frontend/editor/src/portal/components/ProcessingStatusStrip.tsx
+++ b/frontend/editor/src/portal/components/ProcessingStatusStrip.tsx
@@ -57,7 +57,7 @@ export function ProcessingStatusStrip() {
           nearCap ? (
             
+        
       
 
       {isLoading && (
diff --git a/frontend/editor/src/portal/components/SearchModal.tsx b/frontend/editor/src/portal/components/SearchModal.tsx
index ca66f9365e..6aac7e99d4 100644
--- a/frontend/editor/src/portal/components/SearchModal.tsx
+++ b/frontend/editor/src/portal/components/SearchModal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, EmptyState, Modal, Skeleton } from "@app/ui";
 import { useTranslation } from "react-i18next";
-import { EmptyState, Modal, Skeleton } from "@app/ui";
 import { useUI } from "@portal/contexts/UIContext";
 import { useAsync, useSectionFlags } from "@portal/hooks/useAsync";
 import { fetchQuickActions, type QuickAction } from "@portal/api/search";
@@ -100,9 +100,11 @@ export function SearchModal() {
               

                 
{group}

                 {items.map((item) => (
-                  
+                  
                 ))}
               

             ))}
diff --git a/frontend/editor/src/portal/components/SettingsModal.tsx b/frontend/editor/src/portal/components/SettingsModal.tsx
index c6a40f3389..3073d243f0 100644
--- a/frontend/editor/src/portal/components/SettingsModal.tsx
+++ b/frontend/editor/src/portal/components/SettingsModal.tsx
@@ -260,10 +260,10 @@ export function SettingsModal({
             
               {t("portal.settings.footerNote")}
             
-            
-            
           
@@ -401,7 +401,7 @@ function ProfilePanel({
           

           {email}
         

-        
       

@@ -458,9 +458,10 @@ function AppearancePanel({
           aria-label={t("portal.settings.appearance.themeTitle")}
         >
           {THEME_OPTIONS.map((opt) => (
-            
+            
           ))}
         
       
@@ -639,7 +640,7 @@ function WorkspacePanel({
             
           
         )}
-        
       
@@ -811,7 +812,7 @@ function SessionsPanel({
                 
               ) : (
                 // TODO(backend): DELETE /v1/settings/sessions/{id}
-                
               )}
diff --git a/frontend/editor/src/portal/components/Sidebar.tsx b/frontend/editor/src/portal/components/Sidebar.tsx
index 0deb3c0dda..675e48561f 100644
--- a/frontend/editor/src/portal/components/Sidebar.tsx
+++ b/frontend/editor/src/portal/components/Sidebar.tsx
@@ -1,5 +1,5 @@
+import { Button, Dropdown, NavItem } from "@app/ui";
 import { useTranslation } from "react-i18next";
-import { Dropdown, NavItem } from "@app/ui";
 import { useView, type ViewId } from "@portal/contexts/ViewContext";
 import { useTier } from "@portal/contexts/TierContext";
 import { useTheme } from "@portal/contexts/ThemeContext";
@@ -172,13 +172,13 @@ export function Sidebar() {
 
         
           
-            
+            
           
           
             
             )}
           
-          
           {phase === "done" ? (
             <>
-              
               
             
           ) : (
             
+            
           
 
           

@@ -269,9 +270,10 @@ export function SingleOpRunner({
                 />
               )}
               {ops?.map((op) => (
-                
+                
               ))}
             

           
diff --git a/frontend/editor/src/portal/components/WelcomeCarousel.tsx b/frontend/editor/src/portal/components/WelcomeCarousel.tsx
index d0b01708e6..42af5a6abb 100644
--- a/frontend/editor/src/portal/components/WelcomeCarousel.tsx
+++ b/frontend/editor/src/portal/components/WelcomeCarousel.tsx
@@ -185,14 +185,13 @@ export function WelcomeCarousel({ onTryOp }: WelcomeCarouselProps) {
           

           

             
             
+        
       ))}
     
   );
diff --git a/frontend/editor/src/portal/components/agent-builder/BootstrapDialog.tsx b/frontend/editor/src/portal/components/agent-builder/BootstrapDialog.tsx
index 24bf1205f7..a6b28688e6 100644
--- a/frontend/editor/src/portal/components/agent-builder/BootstrapDialog.tsx
+++ b/frontend/editor/src/portal/components/agent-builder/BootstrapDialog.tsx
@@ -37,7 +37,7 @@ export function BootstrapDialog({ open, onClose }: BootstrapDialogProps) {
       subtitle={t("portal.agentBuilder.bootstrap.subtitle")}
       footer={
         

-          
           

-        
       

diff --git a/frontend/editor/src/portal/components/agent-builder/ScenariosPanel.tsx b/frontend/editor/src/portal/components/agent-builder/ScenariosPanel.tsx
index f4057ea2b6..d3a2822838 100644
--- a/frontend/editor/src/portal/components/agent-builder/ScenariosPanel.tsx
+++ b/frontend/editor/src/portal/components/agent-builder/ScenariosPanel.tsx
@@ -68,7 +68,7 @@ export function ScenariosPanel({ agent }: ScenariosPanelProps) {
             
             
         }
diff --git a/frontend/editor/src/portal/components/billing/PaymentMethodCard.tsx b/frontend/editor/src/portal/components/billing/PaymentMethodCard.tsx
index cd3b094a5e..4904e8364b 100644
--- a/frontend/editor/src/portal/components/billing/PaymentMethodCard.tsx
+++ b/frontend/editor/src/portal/components/billing/PaymentMethodCard.tsx
@@ -96,7 +96,7 @@ export function PaymentMethodCard({ onManage, managing }: Props) {
           )}
         
         
+          
         )}
 
         

@@ -184,13 +185,13 @@ export function SpendLimitCard({
 
         

           
-          
         

@@ -223,7 +224,7 @@ export function SpendLimitCard({
         

         {isLeader && (
           
     
diff --git a/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx b/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx
index 07d3af75c1..2e19223ce8 100644
--- a/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx
+++ b/frontend/editor/src/portal/components/catalogue/ComponentCard.tsx
@@ -69,7 +69,7 @@ export function ComponentCard({
 
       

         {component.frameworks.map((fw) => (
-          
+          
             {fw}
           
         ))}
diff --git a/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx b/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx
index 1959e10b1d..b2d8a3f173 100644
--- a/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx
+++ b/frontend/editor/src/portal/components/catalogue/ComponentDetailModal.tsx
@@ -98,7 +98,7 @@ export function ComponentDetailModal({
         ) : (
           
+                  
                 
               );
             })}
diff --git a/frontend/editor/src/portal/components/docs/GettingStartedSection.tsx b/frontend/editor/src/portal/components/docs/GettingStartedSection.tsx
index 1f94361380..b28929005a 100644
--- a/frontend/editor/src/portal/components/docs/GettingStartedSection.tsx
+++ b/frontend/editor/src/portal/components/docs/GettingStartedSection.tsx
@@ -56,7 +56,7 @@ export function GettingStartedSection({
         
       
 
-      
+      
         {t("portal.docs.quickstart.callout.label")}{" "}
         {t("portal.docs.quickstart.callout.bodyBeforeLink")}{" "}
         {t("portal.docs.quickstart.callout.link")}{" "}
diff --git a/frontend/editor/src/portal/components/docs/PlaybooksSection.tsx b/frontend/editor/src/portal/components/docs/PlaybooksSection.tsx
index f48c90a251..10c5cdc7f6 100644
--- a/frontend/editor/src/portal/components/docs/PlaybooksSection.tsx
+++ b/frontend/editor/src/portal/components/docs/PlaybooksSection.tsx
@@ -20,7 +20,7 @@ export function PlaybooksSection({ playbooks }: { playbooks: Playbook[] }) {
             

               {p.steps.map((step, i) => (
                 
-                  
+                  
                     {step}
                   
                   {i < p.steps.length - 1 && (
@@ -33,7 +33,7 @@ export function PlaybooksSection({ playbooks }: { playbooks: Playbook[] }) {
             

             {/* TODO(backend): POST /v1/pipelines/clone-from-playbook to seed a
                 draft pipeline from this recipe, then route to the composer. */}
-            
           
diff --git a/frontend/editor/src/portal/components/docs/WebhooksSection.tsx b/frontend/editor/src/portal/components/docs/WebhooksSection.tsx
index ee50704a2f..84ec30a6e0 100644
--- a/frontend/editor/src/portal/components/docs/WebhooksSection.tsx
+++ b/frontend/editor/src/portal/components/docs/WebhooksSection.tsx
@@ -25,7 +25,7 @@ export function WebhooksSection() {
   }
 }`}
       />
-      
+      
         {t("portal.docs.webhooks.callout.beforeSignature")}{" "}
         Stirling-Signature{" "}
         {t("portal.docs.webhooks.callout.beforeHelper")}{" "}
diff --git a/frontend/editor/src/portal/components/editor-admin/CredentialRotationCard.tsx b/frontend/editor/src/portal/components/editor-admin/CredentialRotationCard.tsx
index a3351b0d28..c4e80c1db1 100644
--- a/frontend/editor/src/portal/components/editor-admin/CredentialRotationCard.tsx
+++ b/frontend/editor/src/portal/components/editor-admin/CredentialRotationCard.tsx
@@ -64,8 +64,8 @@ export function CredentialRotationCard({ serviceToken }: Props) {
 
       

         
+      
 
       {open && (
         

@@ -71,7 +71,7 @@ export function ApiKeyCard({ apiKey }: { apiKey: ApiKey }) {
               
{t("portal.infrastructure.apiKeys.card.permissions")}

               

                 {apiKey.permissions.map((p) => (
-                  
+                  
                     {p}
                   
                 ))}
@@ -86,7 +86,7 @@ export function ApiKeyCard({ apiKey }: { apiKey: ApiKey }) {
                   
                 ) : (
                   apiKey.allowedIps.map((ip) => (
-                    
+                    
                       {ip}
                     
                   ))
diff --git a/frontend/editor/src/portal/components/infrastructure/ApiKeysTab.tsx b/frontend/editor/src/portal/components/infrastructure/ApiKeysTab.tsx
index a41dca0d20..a93b2c0c56 100644
--- a/frontend/editor/src/portal/components/infrastructure/ApiKeysTab.tsx
+++ b/frontend/editor/src/portal/components/infrastructure/ApiKeysTab.tsx
@@ -24,10 +24,9 @@ export function ApiKeysTab() {
           sub={t("portal.infrastructure.apiKeys.subheading")}
         />
         
diff --git a/frontend/editor/src/portal/components/infrastructure/CreateKeyModal.tsx b/frontend/editor/src/portal/components/infrastructure/CreateKeyModal.tsx
index 7e4fc0b723..613eb97377 100644
--- a/frontend/editor/src/portal/components/infrastructure/CreateKeyModal.tsx
+++ b/frontend/editor/src/portal/components/infrastructure/CreateKeyModal.tsx
@@ -72,16 +72,17 @@ export function CreateKeyModal({
       }
       footer={
         created ? (
-          
         ) : (
           

-            
             

-              
-                {a.framework}
-              
+              {a.framework}
               
{a.detail}

               {a.reportUrl ? (
                 
+                  
                 )}
diff --git a/frontend/editor/src/portal/components/infrastructure/infraFormat.ts b/frontend/editor/src/portal/components/infrastructure/infraFormat.ts
index 43980b4dba..2cf7c2e028 100644
--- a/frontend/editor/src/portal/components/infrastructure/infraFormat.ts
+++ b/frontend/editor/src/portal/components/infrastructure/infraFormat.ts
@@ -1,4 +1,4 @@
-import type { ChipTone, StatusTone } from "@app/ui";
+import type { ChipAccent, StatusTone } from "@app/ui";
 import type {
   ApiKeyStatus,
   AttestationStatus,
@@ -135,11 +135,11 @@ export const MODEL_TYPE_LABEL: Record = {
   llm: "LLM",
 };
 
-export const MODEL_TYPE_TONE: Record = {
-  extraction: "blue",
-  classification: "purple",
-  ocr: "green",
-  llm: "amber",
+export const MODEL_TYPE_TONE: Record = {
+  extraction: "default",
+  classification: "premium",
+  ocr: "success",
+  llm: "warning",
 };
 
 export const MODEL_PROVIDER_LABEL: Record = {
diff --git a/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx b/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx
index 5040a97ac0..fe0546a606 100644
--- a/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx
+++ b/frontend/editor/src/portal/components/pipelines/PipelineComposer.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
+  ActionIcon,
   Banner,
   Button,
   Checkbox,
@@ -280,7 +281,7 @@ export function PipelineComposer({
       footer={
         

           
-                    
-                    
+                    
                   

                 
               ))}
@@ -429,7 +430,7 @@ export function PipelineComposer({
             {PIPELINE_OPERATIONS.map((op) => (
                addStep(op.operation, op.parameters)}
               >
diff --git a/frontend/editor/src/portal/components/pipelines/PipelineDetailCard.tsx b/frontend/editor/src/portal/components/pipelines/PipelineDetailCard.tsx
index 6bfc39d510..ea72ddfc53 100644
--- a/frontend/editor/src/portal/components/pipelines/PipelineDetailCard.tsx
+++ b/frontend/editor/src/portal/components/pipelines/PipelineDetailCard.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Banner, Button, Chip } from "@app/ui";
+import { ActionIcon, Banner, Button, Chip } from "@app/ui";
 import { errorMessage } from "@portal/api/http";
 import {
   fetchRun,
@@ -116,14 +116,14 @@ export function PipelineDetailCard({
             })}
           
         

-        
+        
       
 
       

@@ -138,7 +138,7 @@ export function PipelineDetailCard({
           ) : (
             

               {pipeline.steps.map((step, i) => (
-                
+                
                   {`${i + 1}. ${humanizeOperation(step)}`}
                 
               ))}
@@ -157,7 +157,7 @@ export function PipelineDetailCard({
           ) : (
             

               {pipeline.sources.map((source) => (
-                
+                
                   {source.name}
                 
               ))}
@@ -169,7 +169,7 @@ export function PipelineDetailCard({
           
             {t("portal.pipelines.detail.output")}
           
-          
+          
             {t(`portal.pipelines.output.${pipeline.output}`, {
               defaultValue: pipeline.output,
             })}
@@ -186,14 +186,14 @@ export function PipelineDetailCard({
           {t("portal.pipelines.detail.run")}
         
         
         
         

       ) : (
-        
+        
           {t("portal.policies.card.notSetUp")}
         
       )}
diff --git a/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx b/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx
index fd10a0a8d6..d638cc4b7a 100644
--- a/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx
+++ b/frontend/editor/src/portal/components/policies/PolicyDetailPanel.tsx
@@ -84,15 +84,16 @@ function ActivityError({ message }: { message: string }) {
       >
         {message}
       
-      
+      
     
   );
 }
@@ -139,8 +140,8 @@ export function PolicyDetailPanel({
         

           {canDelete && (
             
+                
               )}
             

           ))}
diff --git a/frontend/editor/src/portal/components/policies/PolicyFieldRow.tsx b/frontend/editor/src/portal/components/policies/PolicyFieldRow.tsx
index 4024cce5e3..bad56b0541 100644
--- a/frontend/editor/src/portal/components/policies/PolicyFieldRow.tsx
+++ b/frontend/editor/src/portal/components/policies/PolicyFieldRow.tsx
@@ -45,7 +45,7 @@ export function PolicyFieldRow({
           {(field.options ?? []).map((opt) => (
              toggle(opt)}
             >
diff --git a/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx b/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx
index 96a9d377f2..13f0dab8ac 100644
--- a/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx
+++ b/frontend/editor/src/portal/components/policies/PolicySetupWizard.tsx
@@ -251,7 +251,7 @@ function PolicySetupWizardBody({
       subtitle={config.summary}
       footer={
         

-          
           {step === "workflow" ? (
@@ -265,7 +265,7 @@ function PolicySetupWizardBody({
           ) : (
             <>
               
+                
               ))
             )}
           

@@ -413,22 +414,23 @@ function PolicySetupWizardBody({
                         count: scopeTypes.length,
                       })}
                 
-                
+                
               

               {scopeNarrow && (
                 

                   {POLICY_DOC_TYPES.map((dt) => (
                      toggleScopeType(dt)}
                     >
diff --git a/frontend/editor/src/portal/components/procurement/ActionModal.tsx b/frontend/editor/src/portal/components/procurement/ActionModal.tsx
index e05ee15fbf..0a74f71370 100644
--- a/frontend/editor/src/portal/components/procurement/ActionModal.tsx
+++ b/frontend/editor/src/portal/components/procurement/ActionModal.tsx
@@ -124,12 +124,12 @@ export function ActionModal({
       subtitle={copy.subtitle}
       footer={
         

-          
           

         {!isTerminal && currentStep && (
           
         }
diff --git a/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx b/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx
index bd00a93904..640fcdb2e3 100644
--- a/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx
+++ b/frontend/editor/src/portal/components/procurement/ProcurementAgreement.tsx
@@ -112,8 +112,8 @@ export function ProcurementAgreement({
 
       

         

         
-          
+          
         

       
     ),
diff --git a/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx b/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx
index fdebad61f6..174ed91154 100644
--- a/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx
+++ b/frontend/editor/src/portal/components/procurement/ProcurementStages.tsx
@@ -72,17 +72,17 @@ export function QuoteMilestoneCard({
       

       

         
-        
-        
       

@@ -115,8 +115,8 @@ export function PaymentStageCard({
         

           {invoiceUrl && (
             
           )}
           {step === 0 && (
             
+            
           ))}
         

       )}
diff --git a/frontend/editor/src/portal/components/sources/SourceDetailCard.tsx b/frontend/editor/src/portal/components/sources/SourceDetailCard.tsx
index e1ab6a3503..ca659ec9d5 100644
--- a/frontend/editor/src/portal/components/sources/SourceDetailCard.tsx
+++ b/frontend/editor/src/portal/components/sources/SourceDetailCard.tsx
@@ -1,9 +1,10 @@
 import { useTranslation } from "react-i18next";
-import { Button } from "@app/ui";
+import { ActionIcon, Button } from "@app/ui";
 import type { SourceView } from "@portal/api/sources";
 import { SourceDetailPanel } from "@portal/components/sources/SourceDetailPanel";
 import { sourceTypeMeta } from "@portal/components/sources/sourceTypes";
 import "@portal/views/Sources.css";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface SourceDetailCardProps {
   source: SourceView;
@@ -33,7 +34,7 @@ export function SourceDetailCard({
     

       

         
           {meta.icon}
@@ -47,28 +48,28 @@ export function SourceDetailCard({
             })}
           
         

-        
+          
+        
       
 
       
 
       

         
         
         
           
@@ -188,7 +188,7 @@ export function AccessControls({ access }: AccessControlsProps) {
           title={t("portal.users.access.upgrade.title")}
           description={access.upgradeHint}
           action={
-            
           }
diff --git a/frontend/editor/src/portal/components/users/InviteMemberModal.tsx b/frontend/editor/src/portal/components/users/InviteMemberModal.tsx
index ad98077ba4..fe90105cf5 100644
--- a/frontend/editor/src/portal/components/users/InviteMemberModal.tsx
+++ b/frontend/editor/src/portal/components/users/InviteMemberModal.tsx
@@ -60,7 +60,7 @@ export function InviteMemberModal({ open, onClose }: InviteMemberModalProps) {
       subtitle={t("portal.users.invite.subtitle")}
       footer={
         

-          
           
+              
             
             
               {t("portal.users.table.changeRole")}
diff --git a/frontend/editor/src/portal/components/users/RolesGrid.tsx b/frontend/editor/src/portal/components/users/RolesGrid.tsx
index 522c264e82..24527f35be 100644
--- a/frontend/editor/src/portal/components/users/RolesGrid.tsx
+++ b/frontend/editor/src/portal/components/users/RolesGrid.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { Card, Chip } from "@app/ui";
 import type { Role } from "@portal/api/users";
+import { chipAccentForRole } from "@portal/components/users/format";
 import "@portal/views/Users.css";
 
 interface RolesGridProps {
@@ -24,7 +25,7 @@ export function RolesGrid({ roles }: RolesGridProps) {
         {roles.map((role) => (
           
             

-              
+              
                 {role.label}
               
             

diff --git a/frontend/editor/src/portal/components/users/format.ts b/frontend/editor/src/portal/components/users/format.ts
index 4dff015986..3308a6441d 100644
--- a/frontend/editor/src/portal/components/users/format.ts
+++ b/frontend/editor/src/portal/components/users/format.ts
@@ -1,7 +1,24 @@
-import type { AvatarTone } from "@app/ui";
+import type { AvatarTone, ChipAccent } from "@app/ui";
 import type { RoleId } from "@portal/api/users";
 import { ROLE_TONE } from "@portal/api/users";
 
+/** Map the role palette onto the shared Chip accent set. */
+const ROLE_CHIP_ACCENT: Record<
+  "purple" | "blue" | "green" | "amber" | "neutral",
+  ChipAccent
+> = {
+  purple: "premium",
+  blue: "default",
+  green: "success",
+  amber: "warning",
+  neutral: "neutral",
+};
+
+/** Chip accent for a role, derived from its palette tone. */
+export function chipAccentForRole(role: RoleId): ChipAccent {
+  return ROLE_CHIP_ACCENT[ROLE_TONE[role] ?? "neutral"];
+}
+
 /** Seats used / limit as display copy; null limit → "Unlimited". */
 export function seatsLabel(used: number, limit: number | null): string {
   return limit === null ? `${used} · Unlimited` : `${used} / ${limit}`;
diff --git a/frontend/editor/src/portal/mocks/docs.ts b/frontend/editor/src/portal/mocks/docs.ts
index 18a1084c06..2b54d0c17c 100644
--- a/frontend/editor/src/portal/mocks/docs.ts
+++ b/frontend/editor/src/portal/mocks/docs.ts
@@ -17,6 +17,7 @@
  * fixtures can be deleted (or kept as test seeds).
  */
 
+import type { CardAccent } from "@app/ui";
 import type { Tier } from "@portal/contexts/TierContext";
 import type { CodeLang } from "@app/ui";
 
@@ -145,7 +146,7 @@ export interface Playbook {
   blurb: string;
   /** Ordered stages rendered as a chip flow. */
   steps: string[];
-  accent: "blue" | "purple" | "green";
+  accent: CardAccent;
 }
 
 /** A bundled, named agent capability — a deterministic op chain. */
@@ -337,28 +338,28 @@ const PLAYBOOKS: Playbook[] = [
       "Three-way match",
       "POST to ERP",
     ],
-    accent: "blue",
+    accent: "default",
   },
   {
     title: "PII redaction at scale",
     blurb:
       "Sweep a document set for PII and write redacted copies to cold storage.",
     steps: ["S3 source", "Detect PII", "Redact", "Store to bucket"],
-    accent: "purple",
+    accent: "premium",
   },
   {
     title: "Compliance evidence pack",
     blurb:
       "Bundle SOC 2 and audit reports into a verified, timestamped archive.",
     steps: ["Batch upload", "Classify", "Validate schema", "Sign & archive"],
-    accent: "green",
+    accent: "success",
   },
   {
     title: "Agent document tool",
     blurb:
       "Expose extraction as an MCP tool your agent can call deterministically.",
     steps: ["Define tool", "Bind endpoint", "Run evals", "Ship to agent"],
-    accent: "purple",
+    accent: "premium",
   },
 ];
 
diff --git a/frontend/editor/src/portal/views/AgentBuilder.tsx b/frontend/editor/src/portal/views/AgentBuilder.tsx
index cd7638ee40..efa319c146 100644
--- a/frontend/editor/src/portal/views/AgentBuilder.tsx
+++ b/frontend/editor/src/portal/views/AgentBuilder.tsx
@@ -41,7 +41,7 @@ export function AgentBuilder() {
         

         
diff --git a/frontend/editor/src/portal/views/Home.tsx b/frontend/editor/src/portal/views/Home.tsx
index 92d7f69318..fef96810e1 100644
--- a/frontend/editor/src/portal/views/Home.tsx
+++ b/frontend/editor/src/portal/views/Home.tsx
@@ -38,7 +38,7 @@ import "@portal/views/Home.css";
 /* ──────────────────────────────────────────────────────────────────────── */
 
 interface ProductCardProps {
-  accent: "blue" | "purple";
+  accent: "default" | "premium";
   badge?: string;
   title: string;
   blurb: string;
@@ -60,18 +60,21 @@ function ProductCard({
       

         
{title}

         {badge && (
-          
+          
             {badge}
           
         )}
       

       
{blurb}

       
@@ -87,14 +90,14 @@ function ProductGrid() {
       aria-label={t("portal.home.productGrid.ariaLabel")}
     >
       
       
        void }) {
         
       

       

-        
-        
-        
-        
+        
       

     
   );
@@ -243,7 +250,7 @@ function FreeOnboarding({ onTryOp }: { onTryOp: () => void }) {
   function renderCta(step: OnboardingStep) {
     if (step.done) {
       return (
-        
       );
@@ -251,7 +258,7 @@ function FreeOnboarding({ onTryOp }: { onTryOp: () => void }) {
     if (!step.cta) return null;
     if (step.cta.kind === "try-op") {
       return (
-        
       );
@@ -260,7 +267,7 @@ function FreeOnboarding({ onTryOp }: { onTryOp: () => void }) {
     return (
       

         
       
@@ -179,7 +179,7 @@ export function Pipelines() {
         footer={
           

             
             
           }
diff --git a/frontend/editor/src/portal/views/Sources.css b/frontend/editor/src/portal/views/Sources.css
index d265a17135..d8cc6897af 100644
--- a/frontend/editor/src/portal/views/Sources.css
+++ b/frontend/editor/src/portal/views/Sources.css
@@ -74,23 +74,23 @@
   background: var(--color-bg-subtle);
   color: var(--color-text-3);
 }
-.portal-sources__type-dot--blue {
+.portal-sources__type-dot--default {
   background: var(--color-blue-light);
   color: var(--color-blue);
 }
-.portal-sources__type-dot--purple {
+.portal-sources__type-dot--premium {
   background: var(--color-purple-light);
   color: var(--color-purple);
 }
-.portal-sources__type-dot--green {
+.portal-sources__type-dot--success {
   background: var(--color-green-light);
   color: var(--color-green-dark);
 }
-.portal-sources__type-dot--amber {
+.portal-sources__type-dot--warning {
   background: var(--color-amber-light);
   color: var(--color-amber-dark);
 }
-.portal-sources__type-dot--red {
+.portal-sources__type-dot--danger {
   background: var(--color-red-light);
   color: var(--color-red);
 }
diff --git a/frontend/editor/src/portal/views/Sources.test.tsx b/frontend/editor/src/portal/views/Sources.test.tsx
index a68399d588..7226c2e017 100644
--- a/frontend/editor/src/portal/views/Sources.test.tsx
+++ b/frontend/editor/src/portal/views/Sources.test.tsx
@@ -1,7 +1,18 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  fireEvent,
+  render as baseRender,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
 import { MemoryRouter } from "react-router-dom";
 import { HttpError } from "@portal/api/http";
+
+const render = (
+  ui: Parameters[0],
+  options?: Parameters[1],
+) => baseRender(ui, { wrapper: MantineProvider, ...options });
 import type { SourcesResponse } from "@portal/api/sources";
 import { Sources } from "@portal/views/Sources";
 
diff --git a/frontend/editor/src/portal/views/Sources.tsx b/frontend/editor/src/portal/views/Sources.tsx
index b44eacb2ec..91191805ab 100644
--- a/frontend/editor/src/portal/views/Sources.tsx
+++ b/frontend/editor/src/portal/views/Sources.tsx
@@ -127,13 +127,13 @@ export function Sources() {
         

         

           
-          
         

@@ -200,7 +200,7 @@ export function Sources() {
         footer={
           

             
             

           {wallet?.status === "subscribed" && (
             
diff --git a/frontend/editor/src/proprietary/auth/ui/EmailPasswordForm.tsx b/frontend/editor/src/proprietary/auth/ui/EmailPasswordForm.tsx
index 7fa97ecc09..08236c12c4 100644
--- a/frontend/editor/src/proprietary/auth/ui/EmailPasswordForm.tsx
+++ b/frontend/editor/src/proprietary/auth/ui/EmailPasswordForm.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
+import { Button } from "@app/ui/Button";
 import "@app/auth/ui/auth.css";
-import { TextInput, PasswordInput, Button } from "@mantine/core";
+import { TextInput, PasswordInput } from "@mantine/core";
 
 // Force light mode styles for auth inputs
 const authInputStyles = {
@@ -128,18 +129,11 @@ export default function EmailPasswordForm({
           (showPasswordField && !password) ||
           (requiresMfa && !mfaCode.trim())
         }
-        className="auth-button"
         fullWidth
         loading={isSubmitting}
-        styles={{
-          // Own the brand colour inline so the host app's Mantine primaryColor
-          // can't win over .auth-button (editor vs portal Mantine themes
-          // differ). The fallback keeps it red even if auth-theme.css is absent.
-          root: {
-            backgroundColor: "var(--auth-button-bg-light-only, #af3434)",
-            color: "var(--auth-button-text-light-only, #ffffff)",
-          },
-        }}
+        // Stirling-red brand CTA; the brand accent sets the colour inline so the
+        // host app's Mantine primaryColor can't win (editor vs portal differ).
+        accent="brand"
       >
         {submitButtonText}
       
diff --git a/frontend/editor/src/proprietary/auth/ui/LoginRightCarousel.tsx b/frontend/editor/src/proprietary/auth/ui/LoginRightCarousel.tsx
index 7a2d76d129..f6ad17ec7e 100644
--- a/frontend/editor/src/proprietary/auth/ui/LoginRightCarousel.tsx
+++ b/frontend/editor/src/proprietary/auth/ui/LoginRightCarousel.tsx
@@ -1,4 +1,5 @@
 import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "@app/ui/Button";
 import bgDefault from "@app/assets/login/LoginBackgroundPanel.png";
 
 export type ImageSlide = {
@@ -208,13 +209,14 @@ function LoginRightCarousel({
         }}
       >
         {Array.from({ length: totalSlides }).map((_, i) => (
-          
+            
           
         ))}
       
     );
   }
-
-  if (layout === "fullwidth") {
-    // Mirrors the SaaS editor login: rounded pill buttons stacked vertically,
-    // each with the provider's icon + "Sign in with X" label.
-    return (
-      

-        {providers.map((p) => (
-          
-        ))}
-      

-    );
-  }
-
   if (layout === "grid") {
     return (
       

@@ -167,24 +133,55 @@ export default function OAuthButtons({
             key={p.id}
             title={`${t("login.signInWith", "Sign in with")} ${p.label}`}
           >
-            
+            
           

         ))}
       
     );
   }
+  if (layout === "fullwidth") {
+    // Mirrors the SaaS editor login: rounded pill buttons stacked vertically,
+    // each with the provider's icon + "Sign in with X" label.
+    return (
+      

+        {providers.map((p) => (
+           onProviderClick(p.id)}
+            disabled={isSubmitting}
+            className="oauth-button-fullwidth"
+            title={p.label}
+            aria-label={ctaPrefix ? `${ctaPrefix} ${p.label}` : p.label}
+          >
+            
+              {p.label}
+              
+                {ctaPrefix ? `${ctaPrefix} ${p.label}` : p.label}
+              
+            
+          
+        ))}
+      

+    );
+  }
 
   return (
     

-          
+          
         

       ))}
     
diff --git a/frontend/editor/src/proprietary/auth/ui/SpringLoginForm.tsx b/frontend/editor/src/proprietary/auth/ui/SpringLoginForm.tsx
index f6c616fd77..ca8deb3c32 100644
--- a/frontend/editor/src/proprietary/auth/ui/SpringLoginForm.tsx
+++ b/frontend/editor/src/proprietary/auth/ui/SpringLoginForm.tsx
@@ -102,11 +102,10 @@ export default function SpringLoginForm({
         
       )}
 
diff --git a/frontend/editor/src/proprietary/auth/ui/auth-theme.css b/frontend/editor/src/proprietary/auth/ui/auth-theme.css
index 79c7ec6acd..f62691f518 100644
--- a/frontend/editor/src/proprietary/auth/ui/auth-theme.css
+++ b/frontend/editor/src/proprietary/auth/ui/auth-theme.css
@@ -39,8 +39,8 @@
   --auth-magic-button-text-light-only: var(--text-primary);
   --auth-text-primary-light-only: var(--text-primary);
   --auth-text-secondary-light-only: var(--text-secondary);
-  --text-divider-rule-rgb-light: 58, 64, 71;
-  --text-divider-label-rgb-light: 107, 114, 128;
+  --text-divider-rule-rgb-light: 28, 35, 64;
+  --text-divider-label-rgb-light: 91, 98, 128;
   --tool-subcategory-rule-color-light: var(--border-default);
   --tool-subcategory-text-color-light: var(--text-secondary);
 }
diff --git a/frontend/editor/src/proprietary/auth/ui/auth.css b/frontend/editor/src/proprietary/auth/ui/auth.css
index 3fce26f7ce..249d6cdda5 100644
--- a/frontend/editor/src/proprietary/auth/ui/auth.css
+++ b/frontend/editor/src/proprietary/auth/ui/auth.css
@@ -707,6 +707,61 @@
   min-height: 0;
 }
 
+.oauth-container-fullwidth {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.oauth-button-fullwidth {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 100px;
+  background-color: #ffffff;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #000000;
+  cursor: pointer;
+  gap: 0.5rem;
+  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04);
+  transition:
+    background-color 150ms ease,
+    box-shadow 150ms ease,
+    border-color 150ms ease;
+}
+
+.oauth-button-fullwidth:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.oauth-button-fullwidth:hover:not(:disabled) {
+  background-color: #fafafa;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+[data-mantine-color-scheme="dark"] .oauth-button-fullwidth {
+  background-color: var(--bg-surface);
+  color: var(--text-primary);
+  border-color: var(--border-default);
+  box-shadow: none;
+}
+
+[data-mantine-color-scheme="dark"]
+  .oauth-button-fullwidth:hover:not(:disabled) {
+  background-color: var(--bg-raised);
+  box-shadow: none;
+}
+
+/* ── Dark-mode icon inversion for monochrome OAuth logos ────────────── */
+[data-mantine-color-scheme="dark"] .oauth-icon--github {
+  filter: invert(1);
+}
+
 /* ── Icon+label group — keeps icons vertically aligned across buttons ── */
 .oauth-btn-group {
   display: inline-flex;
diff --git a/frontend/editor/src/proprietary/billing/SpendCapControl.tsx b/frontend/editor/src/proprietary/billing/SpendCapControl.tsx
index c5589133f3..d6c267a099 100644
--- a/frontend/editor/src/proprietary/billing/SpendCapControl.tsx
+++ b/frontend/editor/src/proprietary/billing/SpendCapControl.tsx
@@ -123,8 +123,9 @@ export function SpendCapControl({
     

       

         {presets.map((preset) => (
-          
+          
         ))}
 
         
 
-        
+        
 
         {onSave && (
           

             
       
         
    
           {toolSteps.map((step, i) => {
@@ -333,14 +336,16 @@ function ChatMessageBubble({
 
   const actions = (
     
    
-      
+      
       
         {formatRelativeTime(timestamp, t)}
       
@@ -551,9 +556,6 @@ export function ChatPanel({ onBack, backLabel }: ChatPanelProps) {
       
    
          handleSend()}
           disabled={!input.trim() || isLoading}
diff --git a/frontend/editor/src/proprietary/components/chat/ChatQuickActions.tsx b/frontend/editor/src/proprietary/components/chat/ChatQuickActions.tsx
index 1905433037..f650c953fd 100644
--- a/frontend/editor/src/proprietary/components/chat/ChatQuickActions.tsx
+++ b/frontend/editor/src/proprietary/components/chat/ChatQuickActions.tsx
@@ -1,6 +1,8 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Box, Group, Stack, Text, UnstyledButton } from "@mantine/core";
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import CloseIcon from "@mui/icons-material/Close";
 import CompressIcon from "@mui/icons-material/Compress";
 import ContentCutIcon from "@mui/icons-material/ContentCut";
@@ -26,7 +28,10 @@ interface QuickAction {
 
 function QuickActionCard({ action }: { action: QuickAction }) {
   return (
-    
       
-    
+    
   );
 }
 
@@ -81,23 +86,27 @@ function WorkbenchFilePills({
           
             {stub.name}
           
-          
+          
         
       ))}
       {overflow > 0 && (
-        
           {moreLabel(overflow)}
-        
+        
       )}
     
    
   );
diff --git a/frontend/editor/src/proprietary/components/policies/Policies.css b/frontend/editor/src/proprietary/components/policies/Policies.css
index 7785702a98..37b92a5830 100644
--- a/frontend/editor/src/proprietary/components/policies/Policies.css
+++ b/frontend/editor/src/proprietary/components/policies/Policies.css
@@ -178,6 +178,11 @@
   color: var(--color-text-4);
   text-decoration: none;
   white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--motion-fast);
+}
+.pol-row-upgrade:hover {
+  color: var(--color-text-1);
 }
 .pol-row-upgrade:hover {
   text-decoration: underline;
diff --git a/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx b/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx
index 2a3616bafd..15b494c3f6 100644
--- a/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx
+++ b/frontend/editor/src/proprietary/components/policies/PoliciesSidebar.tsx
@@ -33,6 +33,8 @@ import type {
 import type { WatchedFolder } from "@app/types/watchedFolders";
 import { POLICIES_ENABLED } from "@app/constants/featureFlags";
 import { Tooltip as AppTooltip } from "@app/components/shared/Tooltip";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import { IconBadge } from "@app/ui/IconBadge";
 import {
   deriveRowStatus,
@@ -167,8 +169,9 @@ export function PoliciesSection({
           sidebarTooltip
           pinOnClick
         >
-          
+          
         
       
    
 
@@ -199,26 +202,34 @@ export function PoliciesSection({
                       {t(`policies.catalog.${cat.id}`, cat.label)}
                     
                     
-                          
+                          window.open(
+                            "https://stirling.com/contact",
+                            "_blank",
+                            "noopener,noreferrer",
+                          )
+                        }
                       >
                         {t(
                           "policies.sidebar.upgradeToEnterprise",
                           "Upgrade to enterprise",
                         )}
-                      
+                      
                     
                   

                 );
               }
               const status = deriveRowStatus(pol.policies[cat.id]);
               return (
-                
+                
               );
             })}
           

@@ -508,8 +519,10 @@ export function PoliciesCollapsedButton({
               arrow
               delay={300}
             >
-              
+              
             
           );
         })}
diff --git a/frontend/editor/src/proprietary/components/policies/PolicyDeleteConfirmModal.tsx b/frontend/editor/src/proprietary/components/policies/PolicyDeleteConfirmModal.tsx
index 0d40660d19..89d3dde57a 100644
--- a/frontend/editor/src/proprietary/components/policies/PolicyDeleteConfirmModal.tsx
+++ b/frontend/editor/src/proprietary/components/policies/PolicyDeleteConfirmModal.tsx
@@ -1,5 +1,6 @@
-import { Modal, Text, Button, Stack, Group } from "@mantine/core";
+import { Modal, Text, Stack, Group } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import { Button } from "@app/ui/Button";
 
 interface PolicyDeleteConfirmModalProps {
   opened: boolean;
@@ -35,10 +36,10 @@ export function PolicyDeleteConfirmModal({
           )}
         
         
-          
-          
         
diff --git a/frontend/editor/src/proprietary/components/policies/PolicyDetailPanel.tsx b/frontend/editor/src/proprietary/components/policies/PolicyDetailPanel.tsx
index 1193111c8a..4afcf5891c 100644
--- a/frontend/editor/src/proprietary/components/policies/PolicyDetailPanel.tsx
+++ b/frontend/editor/src/proprietary/components/policies/PolicyDetailPanel.tsx
@@ -84,15 +84,15 @@ function ActivityError({
       >
         {message}
       
-      
+      
     
   );
 }
@@ -221,7 +221,7 @@ export function PolicyDetailPanel({
                   trailing={
                     item.status === "flagged" && onRetry ? (
                       
           )}
-          
-          
         

diff --git a/frontend/editor/src/proprietary/components/policies/PolicyFieldRow.tsx b/frontend/editor/src/proprietary/components/policies/PolicyFieldRow.tsx
index 4049533290..1210b997ca 100644
--- a/frontend/editor/src/proprietary/components/policies/PolicyFieldRow.tsx
+++ b/frontend/editor/src/proprietary/components/policies/PolicyFieldRow.tsx
@@ -51,12 +51,7 @@ export function PolicyFieldRow({
         
         

           {(field.options ?? []).map((opt) => (
-             toggle(opt)}
-            >
+             toggle(opt)}>
               {t(`policies.fieldOption.${field.key}.${opt}`, opt)}
             
           ))}
diff --git a/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx b/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx
index abd1f6d8df..d096b8327e 100644
--- a/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx
+++ b/frontend/editor/src/proprietary/components/policies/PolicySetupWizard.tsx
@@ -630,7 +630,7 @@ export function PolicySetupWizard({
                 )}
                 action={
                   
+                  
                 

                 {scopeNarrow && (
                   

@@ -690,12 +691,11 @@ export function PolicySetupWizard({
       

 
       

-        
         {step < TOTAL_STEPS ? (
           
         ) : (
           
+                  
                 
               )}
               
       

-        
+        >
+          
+        
         
           
             
                     
@@ -425,7 +431,7 @@ export default function ChangeUserPasswordModal({
             fullWidth
             size="md"
             disabled={disabled}
-            mt="md"
+            style={{ marginTop: "var(--mantine-spacing-md)" }}
           >
             {t("workspace.people.changePassword.submit", "Update password")}
           
diff --git a/frontend/editor/src/proprietary/components/shared/InviteMembersModal.tsx b/frontend/editor/src/proprietary/components/shared/InviteMembersModal.tsx
index 6e2f503fa3..e57f60395f 100644
--- a/frontend/editor/src/proprietary/components/shared/InviteMembersModal.tsx
+++ b/frontend/editor/src/proprietary/components/shared/InviteMembersModal.tsx
@@ -5,18 +5,18 @@ import {
   Modal,
   Stack,
   Text,
-  Button,
   TextInput,
   Select,
   Paper,
   Checkbox,
   Textarea,
-  SegmentedControl,
   Tooltip,
-  CloseButton,
   Box,
   Group,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
+import { SegmentedControl } from "@app/ui/SegmentedControl";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { alert } from "@app/components/toast";
 import { userManagementService } from "@app/services/userManagementService";
@@ -362,7 +362,9 @@ export default function InviteMembersModal({
       withCloseButton={false}
     >
       
-        
+        >
+          
+        
         
           {/* Header with Icon */}
           
@@ -421,7 +425,11 @@ export default function InviteMembersModal({
                     
                   
                   {licenseInfo.availableSlots === 0 && (
-                    
                   )}
@@ -455,7 +463,7 @@ export default function InviteMembersModal({
                   setInviteMode(value as "email" | "direct" | "link");
                   setGeneratedInviteLink(null);
                 }}
-                data={[
+                options={[
                   {
                     label: t(
                       "workspace.people.inviteMode.username",
@@ -587,7 +595,7 @@ export default function InviteMembersModal({
                         style={{ flex: 1 }}
                       />
                       
   );
diff --git a/frontend/editor/src/proprietary/components/shared/UpdateSeatsButton.tsx b/frontend/editor/src/proprietary/components/shared/UpdateSeatsButton.tsx
index f950495a5d..d46b566a1f 100644
--- a/frontend/editor/src/proprietary/components/shared/UpdateSeatsButton.tsx
+++ b/frontend/editor/src/proprietary/components/shared/UpdateSeatsButton.tsx
@@ -1,11 +1,11 @@
 import React from "react";
-import { Button, ButtonProps } from "@mantine/core";
+import { Button, type ButtonProps } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { useUpdateSeats } from "@app/contexts/UpdateSeatsContext";
 
 interface UpdateSeatsButtonProps extends Omit<
   ButtonProps,
-  "onClick" | "loading"
+  "onClick" | "loading" | "onError" | "onSuccess"
 > {
   onSuccess?: () => void;
   onError?: (error: string) => void;
@@ -28,7 +28,7 @@ export const UpdateSeatsButton: React.FC = ({
 
   return (
     
           

         {user && (
-          
         )}
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/AccountSection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/AccountSection.tsx
index 40d16cfc56..457a02fef1 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/AccountSection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/AccountSection.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Alert,
-  Button,
   Box,
   Group,
   Modal,
@@ -11,6 +10,7 @@ import {
   Text,
   TextInput,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { alert as showToast } from "@app/components/toast";
@@ -391,7 +391,7 @@ const AccountSection: React.FC = () => {
 
               {!isSsoUser && (
                 
               ) : (
                 
               
-              
             
@@ -760,7 +760,7 @@ const AccountSection: React.FC = () => {
 
             
               
               
               
               
         
       
@@ -783,7 +782,11 @@ export default function PeopleSection() {
                       withArrow
                       zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
                     >
-                      
+                      
                         
                       
                     
@@ -792,7 +795,14 @@ export default function PeopleSection() {
                     {!isCurrentUser(user) && (
                       
                         
-                          
+                          
                             
         
-          
+          >
+            
+          
           
             {/* Header with Icon */}
             
@@ -1077,7 +1091,7 @@ export default function PeopleSection() {
               loading={processing}
               fullWidth
               size="md"
-              mt="md"
+              style={{ marginTop: "var(--mantine-spacing-md)" }}
             >
               {t("workspace.people.editMember.submit")}
             
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx
index 90f4fda9e0..cabdfb642c 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx
@@ -4,20 +4,19 @@ import { useTranslation } from "react-i18next";
 import {
   Stack,
   Text,
-  Button,
   Table,
-  ActionIcon,
   Badge,
   Loader,
   Group,
   Modal,
   Select,
-  CloseButton,
   Tooltip,
   Menu,
   Avatar,
   Box,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { alert } from "@app/components/toast";
 import { teamService, Team } from "@app/services/teamService";
@@ -354,7 +353,7 @@ export default function TeamDetailsSection({
         
           {t("workspace.teams.teamNotFound", "Team not found")}
         
-        
       
@@ -365,7 +364,11 @@ export default function TeamDetailsSection({
     
       {/* Header with back button */}
       
-        
+        
           
         
         

@@ -562,7 +565,14 @@ export default function TeamDetailsSection({
                         withArrow
                         zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
                       >
-                        
+                        
                           
                         
                       
@@ -570,7 +580,13 @@ export default function TeamDetailsSection({
                       {/* Actions menu */}
                       
                         
-                          
+                          
                             
         

-           setAddMemberModalOpened(false)}
             size="lg"
+            variant="tertiary"
+            aria-label={t("common.close", "Close")}
             style={{
               position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
             }}
-          />
+          >
+            
+          
           
             {/* Header with Icon */}
             
@@ -755,7 +775,7 @@ export default function TeamDetailsSection({
               loading={processing}
               fullWidth
               size="md"
-              mt="md"
+              style={{ marginTop: "var(--mantine-spacing-md)" }}
             >
               {t("workspace.teams.addMemberToTeam.submit")}
             
@@ -774,16 +794,20 @@ export default function TeamDetailsSection({
         withCloseButton={false}
       >
         

-           setChangeTeamModalOpened(false)}
             size="lg"
+            variant="tertiary"
+            aria-label={t("common.close", "Close")}
             style={{
               position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
             }}
-          />
+          >
+            
+          
           
             {/* Header with Icon */}
             
@@ -828,7 +852,7 @@ export default function TeamDetailsSection({
               loading={processing}
               fullWidth
               size="md"
-              mt="md"
+              style={{ marginTop: "var(--mantine-spacing-md)" }}
             >
               {t("workspace.teams.changeTeam.submit", "Change Team")}
             
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/TeamsSection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/TeamsSection.tsx
index e3cd79be02..4559296afe 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/TeamsSection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/TeamsSection.tsx
@@ -4,19 +4,18 @@ import { useTranslation } from "react-i18next";
 import {
   Stack,
   Text,
-  Button,
   TextInput,
   Table,
-  ActionIcon,
   Menu,
   Badge,
   Loader,
   Group,
   Modal,
   Select,
-  CloseButton,
   Tooltip,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { alert } from "@app/components/toast";
 import { teamService, Team } from "@app/services/teamService";
@@ -380,9 +379,12 @@ export default function TeamsSection() {
                   
                     
                       
                         
         

-           setCreateModalOpened(false)}
             size="lg"
+            variant="tertiary"
+            aria-label={t("close", "Close")}
             style={{
               position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
             }}
-          />
+          >
+            
+          
           
             {/* Header with Icon */}
             
@@ -493,7 +499,7 @@ export default function TeamsSection() {
               loading={processing}
               fullWidth
               size="md"
-              mt="md"
+              style={{ marginTop: "var(--mantine-spacing-md)" }}
             >
               {t("workspace.teams.createTeam.submit")}
             
@@ -512,16 +518,20 @@ export default function TeamsSection() {
         withCloseButton={false}
       >
         

-           setRenameModalOpened(false)}
             size="lg"
+            variant="tertiary"
+            aria-label={t("close", "Close")}
             style={{
               position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
             }}
-          />
+          >
+            
+          
           
             {/* Header with Icon */}
             
@@ -555,7 +565,7 @@ export default function TeamsSection() {
               loading={processing}
               fullWidth
               size="md"
-              mt="md"
+              style={{ marginTop: "var(--mantine-spacing-md)" }}
             >
               {t("workspace.teams.renameTeam.submit")}
             
@@ -574,16 +584,20 @@ export default function TeamsSection() {
         withCloseButton={false}
       >
         

-           setAddMemberModalOpened(false)}
             size="lg"
+            variant="tertiary"
+            aria-label={t("close", "Close")}
             style={{
               position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
             }}
-          />
+          >
+            
+          
           
             {/* Header with Icon */}
             
@@ -634,7 +648,7 @@ export default function TeamsSection() {
               loading={processing}
               fullWidth
               size="md"
-              mt="md"
+              style={{ marginTop: "var(--mantine-spacing-md)" }}
             >
               {t("workspace.teams.addMemberToTeam.submit")}
             
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx
index 8fc8b6cdd4..f05817a957 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Box, Button, Group, Paper } from "@mantine/core";
+import { Box, Group, Paper } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import FitText from "@app/components/shared/FitText";
 import { useTranslation } from "react-i18next";
@@ -56,18 +57,14 @@ export default function ApiKeySection({
           
           
           
-          
         
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx
index 742c0ceb21..cf205a9ccc 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx
@@ -4,12 +4,12 @@ import {
   Text,
   Group,
   Stack,
-  SegmentedControl,
   Loader,
   Alert,
   Box,
   SimpleGrid,
 } from "@mantine/core";
+import { SegmentedControl } from "@app/ui/SegmentedControl";
 import {
   AreaChart,
   Area,
@@ -161,13 +161,24 @@ const AuditChartsSection: React.FC = ({
          {
-            onTimePeriodChange?.(value as "day" | "week" | "month");
+            onTimePeriodChange?.(value);
           }}
-          disabled={!loginEnabled}
-          data={[
-            { label: t("audit.charts.day", "Day"), value: "day" },
-            { label: t("audit.charts.week", "Week"), value: "week" },
-            { label: t("audit.charts.month", "Month"), value: "month" },
+          options={[
+            {
+              label: t("audit.charts.day", "Day"),
+              value: "day",
+              disabled: !loginEnabled,
+            },
+            {
+              label: t("audit.charts.week", "Week"),
+              value: "week",
+              disabled: !loginEnabled,
+            },
+            {
+              label: t("audit.charts.month", "Month"),
+              value: "month",
+              disabled: !loginEnabled,
+            },
           ]}
         />
       
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx
index a2d26aecf0..c166e2fc5b 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx
@@ -4,12 +4,12 @@ import {
   Stack,
   Text,
   PasswordInput,
-  Button,
   Group,
   Alert,
   Code,
   Badge,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import auditService from "@app/services/auditService";
 import LocalIcon from "@app/components/shared/LocalIcon";
@@ -172,11 +172,15 @@ const AuditClearDataSection: React.FC = ({
             )}
 
             
-              
               
                     
                      = ({
                       }}
                       fz="sm"
                     >
-                       toggleSort("eventType")}
                         style={{
                           display: "flex",
@@ -318,7 +323,7 @@ const AuditEventsTable: React.FC = ({
                           width="0.9rem"
                           height="0.9rem"
                         />
-                      
+                      
                     
                      = ({
                       }}
                       fz="sm"
                     >
-                       toggleSort("username")}
                         style={{
                           display: "flex",
@@ -344,7 +352,7 @@ const AuditEventsTable: React.FC = ({
                           width="0.9rem"
                           height="0.9rem"
                         />
-                      
+                      
                     
                      = ({
                           )}
                           
                             

diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx
index da7c46ec59..5cc4313dbf 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx
@@ -1,12 +1,6 @@
 import React from "react";
-import {
-  Group,
-  MultiSelect,
-  Button,
-  Stack,
-  SimpleGrid,
-  Text,
-} from "@mantine/core";
+import { Group, MultiSelect, Stack, SimpleGrid, Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { DateInput } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
 import { AuditFilters } from "@app/services/auditService";
@@ -102,32 +96,32 @@ const AuditFiltersForm: React.FC = ({
         
         
           
           
           
           
-                    )}
-                  
+                    {licenseFile
+                      ? licenseFile.name
+                      : t(
+                          "admin.settings.premium.file.choose",
+                          "Choose License File",
+                        )}
+                  
                   {licenseFile && (
                     
                       {t(
diff --git a/frontend/editor/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx b/frontend/editor/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx
index 84a8abe5e5..747448f913 100644
--- a/frontend/editor/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx
+++ b/frontend/editor/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Button, Card, Text, Stack, Divider, Tooltip } from "@mantine/core";
+import { Card, Text, Stack, Divider, Tooltip } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { PlanTierGroup, LicenseInfo } from "@app/services/licenseService";
 import { PricingBadge } from "@app/components/shared/stripeCheckout/components/PricingBadge";
@@ -78,7 +79,7 @@ const PlanCard: React.FC = ({
 
           

 
-          
     
diff --git a/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx b/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx
index 3881ab25fa..fc31369079 100644
--- a/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx
+++ b/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx
@@ -1,5 +1,6 @@
 import React from "react";
-import { Alert, Stack, Text, Button } from "@mantine/core";
+import { Alert, Stack, Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 
 interface ErrorStageProps {
@@ -14,7 +15,7 @@ export const ErrorStage: React.FC = ({ error, onClose }) => {
     
       
         {error}
-        
       
diff --git a/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx b/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx
index 4928ee4fa8..d74afc4d99 100644
--- a/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx
+++ b/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx
@@ -1,13 +1,6 @@
 import React from "react";
-import {
-  Stack,
-  Button,
-  Text,
-  Grid,
-  Paper,
-  Alert,
-  Divider,
-} from "@mantine/core";
+import { Stack, Text, Grid, Paper, Alert, Divider } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { PlanTierGroup } from "@app/services/licenseService";
 import { SavingsCalculation } from "@app/components/shared/stripeCheckout/types/checkout";
@@ -87,7 +80,7 @@ export const PlanSelectionStage: React.FC = ({
                 )}
 
                 

-                  
                 

@@ -200,7 +193,7 @@ export const PlanSelectionStage: React.FC = ({
                 )}
 
                 

-                  
                 

diff --git a/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx b/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx
index 9f0bff06df..a25f2d9705 100644
--- a/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx
+++ b/frontend/editor/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx
@@ -1,14 +1,6 @@
 import React from "react";
-import {
-  Alert,
-  Stack,
-  Text,
-  Paper,
-  Code,
-  Button,
-  Group,
-  Loader,
-} from "@mantine/core";
+import { Alert, Stack, Text, Paper, Code, Group, Loader } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { PollingStatus } from "@app/components/shared/stripeCheckout/types/checkout";
 
@@ -63,7 +55,7 @@ export const SuccessStage: React.FC = ({
               
               {licenseKey}
               
       
diff --git a/frontend/editor/src/proprietary/components/watchedFolders/CardExpansionModal.tsx b/frontend/editor/src/proprietary/components/watchedFolders/CardExpansionModal.tsx
index dd4bfa41fe..f5fc841689 100644
--- a/frontend/editor/src/proprietary/components/watchedFolders/CardExpansionModal.tsx
+++ b/frontend/editor/src/proprietary/components/watchedFolders/CardExpansionModal.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
-import { Text, ActionIcon, ScrollArea } from "@mantine/core";
+import { Text, ScrollArea } from "@mantine/core";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import CloseIcon from "@mui/icons-material/Close";
 import {
   CardModalPhase,
@@ -198,9 +199,8 @@ export function CardExpansionModal({
             

 
             
         
-          
-          
         
diff --git a/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderCard.tsx b/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderCard.tsx
index 0e1612f447..44b2b0c657 100644
--- a/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderCard.tsx
+++ b/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderCard.tsx
@@ -1,5 +1,7 @@
 import { useState } from "react";
-import { Box, Button, Text, ActionIcon, Group, Loader } from "@mantine/core";
+import { Box, Text, Group, Loader } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import { useTranslation } from "react-i18next";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -83,11 +85,17 @@ export function WatchedFolderCard({
       }
     >
       
diff --git a/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderManagementModal.tsx b/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderManagementModal.tsx
index daba774bfb..362d4cf7b0 100644
--- a/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderManagementModal.tsx
+++ b/frontend/editor/src/proprietary/components/watchedFolders/WatchedFolderManagementModal.tsx
@@ -1,6 +1,5 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import {
-  Button,
   Stack,
   Group,
   TextInput,
@@ -15,6 +14,7 @@ import {
   Tooltip,
   Modal,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { WatchedFolder } from "@app/types/watchedFolders";
 import { AutomationConfig, AutomationMode } from "@app/types/automation";
@@ -478,8 +478,8 @@ export function WatchedFolderManagementModal({
                             
                           
                           
                           {inputDirName && (
                             
+                
 
                 
                   
@@ -828,15 +826,11 @@ export function WatchedFolderManagementModal({
               
             )}
             
-              
               
             ) : (
               
             )}
             
                   
                       
                    setSelectedActivityIds(new Set())}
                     aria-label={t(
                       "watchedFolders.workbench.clearSelection",
@@ -1536,9 +1533,8 @@ export function WatchedFolderWorkbenchView({
                           }
                         >
                            {
                               e.stopPropagation();
@@ -1666,9 +1662,8 @@ export function WatchedFolderWorkbenchView({
                             >
                               {!isExpanded && primaryFile && (
                                  {
                                     e.stopPropagation();
                                     handleView(primaryFile);
@@ -1685,9 +1680,8 @@ export function WatchedFolderWorkbenchView({
                               )}
                               {!isExpanded && primaryFile && (
                                  {
                                     e.stopPropagation();
                                     void handleDownload(
@@ -1706,9 +1700,8 @@ export function WatchedFolderWorkbenchView({
                                 
                               )}
                                {
                                   e.stopPropagation();
                                   void handleDeleteOne(fileId);
@@ -1777,9 +1770,8 @@ export function WatchedFolderWorkbenchView({
                                   {formatBytes(inputFile.size)}
                                 
                                  {
                                     e.stopPropagation();
                                     handleView(inputFile);
@@ -1794,9 +1786,8 @@ export function WatchedFolderWorkbenchView({
                                   />
                                 
                                  {
                                     e.stopPropagation();
                                     handleDownload(inputFile, inputFile.name);
@@ -1852,9 +1843,8 @@ export function WatchedFolderWorkbenchView({
                                   {formatBytes(out.size)}
                                 
                                  {
                                     e.stopPropagation();
                                     handleView(out);
@@ -1869,9 +1859,8 @@ export function WatchedFolderWorkbenchView({
                                   />
                                 
                                  {
                                     e.stopPropagation();
                                     handleDownload(out, out.name);
@@ -1915,8 +1904,8 @@ export function WatchedFolderWorkbenchView({
                                 )}
                                 {inputFile && (
                                   
             
             
@@ -489,7 +489,7 @@ const ParticipantView: React.FC = ({ token }) => {
                 disabled={
                   isSubmitting || certValidation.status === "validating"
                 }
-                color="green"
+                accent="success"
                 data-testid="submit-signature-button"
               >
                 {t("workflow.participant.submitSignature", "Submit Signature")}
@@ -498,8 +498,8 @@ const ParticipantView: React.FC = ({ token }) => {
               
+          
         

       
     );
@@ -259,7 +259,7 @@ export default function InviteAccept() {
           />
 
           

-            
           

         
       
diff --git a/frontend/editor/src/proprietary/routes/Landing.tsx b/frontend/editor/src/proprietary/routes/Landing.tsx
index 91b79bbf8a..d22acbba56 100644
--- a/frontend/editor/src/proprietary/routes/Landing.tsx
+++ b/frontend/editor/src/proprietary/routes/Landing.tsx
@@ -7,6 +7,7 @@ import { useBackendProbe } from "@app/hooks/useBackendProbe";
 import AuthLayout from "@app/routes/authShared/AuthLayout";
 import LoginHeader from "@app/routes/login/LoginHeader";
 import { useTranslation } from "react-i18next";
+import { Button } from "@app/ui/Button";
 
 /**
  * Landing component - Smart router based on authentication status
@@ -149,14 +150,14 @@ export default function Landing() {
               "The application cannot currently connect to the backend. Verify the backend status and network connectivity, then try again.",
             )}
           

-          
+          
         

       
     );
diff --git a/frontend/editor/src/proprietary/routes/Login.test.tsx b/frontend/editor/src/proprietary/routes/Login.test.tsx
index 0360da737c..7a232d0fde 100644
--- a/frontend/editor/src/proprietary/routes/Login.test.tsx
+++ b/frontend/editor/src/proprietary/routes/Login.test.tsx
@@ -326,13 +326,13 @@ describe("Login", () => {
     // Wait for OAuth button to appear
     await waitFor(
       () => {
-        const button = screen.queryByText("Authentik");
+        const button = screen.queryByText(/Authentik/);
         expect(button).toBeTruthy();
       },
       { timeout: 3000 },
     );
 
-    const oauthButton = screen.getByText("Authentik");
+    const oauthButton = screen.getByText(/Authentik/);
     await user.click(oauthButton);
 
     await waitFor(() => {
@@ -372,13 +372,13 @@ describe("Login", () => {
     // Wait for OAuth button to appear (will show 'Mycompany' as label)
     await waitFor(
       () => {
-        const button = screen.queryByText("Mycompany");
+        const button = screen.queryByText(/Mycompany/);
         expect(button).toBeTruthy();
       },
       { timeout: 3000 },
     );
 
-    const oauthButton = screen.getByText("Mycompany");
+    const oauthButton = screen.getByText(/Mycompany/);
     await user.click(oauthButton);
 
     await waitFor(() => {
@@ -419,13 +419,13 @@ describe("Login", () => {
     // Wait for OAuth button to appear
     await waitFor(
       () => {
-        const button = screen.queryByText("OIDC");
+        const button = screen.queryByText(/OIDC/);
         expect(button).toBeTruthy();
       },
       { timeout: 3000 },
     );
 
-    const oauthButton = screen.getByText("OIDC");
+    const oauthButton = screen.getByText(/OIDC/);
     await user.click(oauthButton);
 
     await waitFor(() => {
@@ -761,12 +761,12 @@ describe("Login", () => {
 
     await waitFor(
       () => {
-        expect(screen.getByText("Authentik")).toBeTruthy();
+        expect(screen.getByText(/Authentik/)).toBeTruthy();
       },
       { timeout: 3000 },
     );
 
-    await user.click(screen.getByText("Authentik"));
+    await user.click(screen.getByText(/Authentik/));
 
     await waitFor(() => {
       expect(springAuth.signInWithOAuth).toHaveBeenCalled();
diff --git a/frontend/editor/src/proprietary/routes/Login.tsx b/frontend/editor/src/proprietary/routes/Login.tsx
index 1e12f73e89..47920f6c62 100644
--- a/frontend/editor/src/proprietary/routes/Login.tsx
+++ b/frontend/editor/src/proprietary/routes/Login.tsx
@@ -6,6 +6,7 @@ import {
   useSearchParams,
 } from "react-router-dom";
 import { Text, Stack, Alert } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { setPostLoginRedirectPath } from "@app/auth/spring/springAuthClient";
 import { useAuth } from "@app/auth/UseSession";
 import { useAppConfig } from "@app/contexts/AppConfigContext";
@@ -435,14 +436,14 @@ export default function Login() {
               "The application cannot currently connect to the backend. Verify the backend status and network connectivity, then try again.",
             )}
           

-          
+          
         

       
     );
@@ -486,14 +487,16 @@ export default function Login() {
         beforeEmailForm={
           hasSSOProviders && !showEmailForm && isUserPassAllowed ? (
             

-              
+              
             

           ) : undefined
         }
diff --git a/frontend/editor/src/proprietary/routes/ShareLinkPage.tsx b/frontend/editor/src/proprietary/routes/ShareLinkPage.tsx
index 915ec3c07d..aef9b6f4f7 100644
--- a/frontend/editor/src/proprietary/routes/ShareLinkPage.tsx
+++ b/frontend/editor/src/proprietary/routes/ShareLinkPage.tsx
@@ -4,7 +4,6 @@ import { useNavigate, useParams } from "react-router-dom";
 import {
   Alert,
   Badge,
-  Button,
   Group,
   Loader,
   Paper,
@@ -13,6 +12,7 @@ import {
   Title,
 } from "@mantine/core";
 import { useTranslation } from "react-i18next";
+import { Button } from "@app/ui/Button";
 import DownloadIcon from "@mui/icons-material/Download";
 import LoginIcon from "@mui/icons-material/Login";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -232,7 +232,7 @@ export default function ShareLinkPage() {
                   {t("storageShare.openInApp", "Open in Stirling PDF")}
                 
                 
+        
       

     
   );
diff --git a/frontend/editor/src/proprietary/routes/login/NavigationLink.tsx b/frontend/editor/src/proprietary/routes/login/NavigationLink.tsx
index dcb5bd9380..0ca283af2d 100644
--- a/frontend/editor/src/proprietary/routes/login/NavigationLink.tsx
+++ b/frontend/editor/src/proprietary/routes/login/NavigationLink.tsx
@@ -1,5 +1,4 @@
-import { Button } from "@mantine/core";
-
+import { Button } from "@app/ui/Button";
 interface NavigationLinkProps {
   onClick: () => void;
   text: string;
@@ -17,7 +16,7 @@ export default function NavigationLink({
         onClick={onClick}
         disabled={isDisabled}
         className="navigation-link-button"
-        variant="subtle"
+        variant="tertiary"
       >
         {text}
       
diff --git a/frontend/editor/src/proprietary/routes/login/OAuthButtons.stories.tsx b/frontend/editor/src/proprietary/routes/login/OAuthButtons.stories.tsx
new file mode 100644
index 0000000000..c60ce89feb
--- /dev/null
+++ b/frontend/editor/src/proprietary/routes/login/OAuthButtons.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import OAuthButtons from "@app/auth/ui/OAuthButtons";
+import "@app/auth/ui/auth.css";
+
+/**
+ * The OAuth provider buttons the login page renders
+ */
+const meta: Meta = {
+  title: "Auth/OAuth Buttons",
+  component: OAuthButtons,
+  parameters: { layout: "centered" },
+  args: {
+    onProviderClick: () => {},
+    isSubmitting: false,
+    enabledProviders: ["google", "github", "apple", "azure"],
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Vertical: Story = {
+  render: (args) => (
+    

+      
+    

+  ),
+};
+export const Grid: Story = {
+  render: (args) => ,
+};
+export const Icons: Story = {
+  render: (args) => ,
+};
diff --git a/frontend/editor/src/proprietary/routes/signup/SignupForm.tsx b/frontend/editor/src/proprietary/routes/signup/SignupForm.tsx
index a47d6e6600..8b6ef3d272 100644
--- a/frontend/editor/src/proprietary/routes/signup/SignupForm.tsx
+++ b/frontend/editor/src/proprietary/routes/signup/SignupForm.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import "@app/auth/ui/auth.css";
 import { useTranslation } from "react-i18next";
-import { Checkbox, TextInput, PasswordInput, Button } from "@mantine/core";
+import { Checkbox, TextInput, PasswordInput } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { SignupFieldErrors } from "@app/routes/signup/SignupFormValidation";
 
 interface SignupFormProps {
diff --git a/frontend/editor/src/proprietary/ui/Button.css b/frontend/editor/src/proprietary/ui/Button.css
deleted file mode 100644
index 8b474e7f42..0000000000
--- a/frontend/editor/src/proprietary/ui/Button.css
+++ /dev/null
@@ -1,118 +0,0 @@
-.sui-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: 1px solid transparent;
-  border-radius: var(--radius-md);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  cursor: pointer;
-  transition:
-    transform var(--motion-fast),
-    box-shadow var(--motion-fast),
-    background var(--motion-fast),
-    color var(--motion-fast),
-    border-color var(--motion-fast);
-  white-space: nowrap;
-  user-select: none;
-}
-.sui-btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-.sui-btn:focus-visible {
-  outline: 2px solid var(--color-blue);
-  outline-offset: 2px;
-}
-
-/* sizes */
-.sui-btn--md {
-  font-size: 0.8125rem;
-  padding: 0.4375rem 0.875rem;
-  min-height: 2rem;
-}
-.sui-btn--sm {
-  font-size: 0.75rem;
-  padding: 0.3125rem 0.625rem;
-  min-height: 1.625rem;
-  border-radius: var(--radius-sm);
-}
-
-.sui-btn--full {
-  width: 100%;
-  justify-content: center;
-}
-
-/* gradient (primary) */
-.sui-btn--gradient {
-  color: var(--color-text-on-accent);
-  background: var(--grad-blue-btn);
-  box-shadow: var(--shadow-blue);
-}
-.sui-btn--gradient.sui-btn--purple {
-  background: var(--grad-purple-btn);
-}
-.sui-btn--gradient.sui-btn--green {
-  background: var(--grad-green-btn);
-}
-.sui-btn--gradient:hover:not(:disabled) {
-  box-shadow: var(--shadow-blue-hover);
-  transform: translateY(-0.0625rem);
-}
-.sui-btn--gradient:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-/* outline (secondary) */
-.sui-btn--outline {
-  color: var(--color-text-2);
-  background: var(--color-surface);
-  border-color: var(--color-border);
-}
-.sui-btn--outline.sui-btn--blue {
-  color: var(--color-blue);
-  border-color: var(--color-blue-border);
-}
-.sui-btn--outline.sui-btn--purple {
-  color: var(--color-purple);
-  border-color: var(--color-purple-border);
-}
-.sui-btn--outline.sui-btn--green {
-  color: var(--color-green);
-  border-color: var(--color-green-border);
-}
-.sui-btn--outline.sui-btn--amber {
-  color: var(--color-amber);
-  border-color: var(--color-amber-border);
-}
-.sui-btn--outline.sui-btn--red {
-  color: var(--color-red);
-  border-color: var(--color-red-border);
-}
-.sui-btn--outline:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  border-color: var(--color-border-hover);
-}
-
-/* ghost (tertiary) */
-.sui-btn--ghost {
-  color: var(--color-text-3);
-  background: transparent;
-}
-.sui-btn--ghost:hover:not(:disabled) {
-  color: var(--color-text-1);
-  background: var(--color-bg-hover);
-}
-
-/* spinner */
-.sui-btn__spinner {
-  width: 0.875rem;
-  height: 0.875rem;
-  border-radius: 50%;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  animation: spin 0.7s linear infinite;
-}
-.sui-btn__label {
-  display: inline-block;
-}
diff --git a/frontend/editor/src/proprietary/ui/Button.stories.tsx b/frontend/editor/src/proprietary/ui/Button.stories.tsx
deleted file mode 100644
index 66b203ec3b..0000000000
--- a/frontend/editor/src/proprietary/ui/Button.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "@app/ui/Button";
-
-const meta: Meta = {
-  title: "Primitives/Button",
-  component: Button,
-  parameters: { layout: "centered" },
-  args: { children: "Connect agent" },
-  argTypes: {
-    variant: {
-      control: "inline-radio",
-      options: ["gradient", "outline", "ghost"],
-    },
-    accent: {
-      control: "inline-radio",
-      options: ["blue", "purple", "green", "amber", "red"],
-    },
-    size: { control: "inline-radio", options: ["sm", "md"] },
-  },
-};
-export default meta;
-type Story = StoryObj;
-
-export const Gradient: Story = { args: { variant: "gradient" } };
-export const Outline: Story = { args: { variant: "outline" } };
-export const Ghost: Story = { args: { variant: "ghost" } };
-
-export const WithTrailingArrow: Story = {
-  args: {
-    variant: "gradient",
-    children: "Build a pipeline",
-    trailingIcon: →,
-  },
-};
-
-export const Loading: Story = { args: { variant: "gradient", loading: true } };
-export const Disabled: Story = {
-  args: { variant: "gradient", disabled: true },
-};
-
-export const AccentMatrix: Story = {
-  render: () => (
-    

-      {(["gradient", "outline"] as const).flatMap((variant) =>
-        (["blue", "purple", "green", "amber", "red"] as const).map((accent) => (
-          
-        )),
-      )}
-    

-  ),
-};
diff --git a/frontend/editor/src/proprietary/ui/Button.tsx b/frontend/editor/src/proprietary/ui/Button.tsx
deleted file mode 100644
index f3dc73e933..0000000000
--- a/frontend/editor/src/proprietary/ui/Button.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
-import "@app/ui/Button.css";
-
-export type ButtonVariant = "gradient" | "outline" | "ghost";
-export type ButtonSize = "sm" | "md";
-export type ButtonAccent = "blue" | "purple" | "green" | "amber" | "red";
-
-export interface ButtonProps extends ButtonHTMLAttributes {
-  /** Visual variant. `gradient` is the primary CTA; `outline` is secondary; `ghost` is tertiary/text. */
-  variant?: ButtonVariant;
-  /** Optional accent colour. Currently affects `gradient` and `outline` variants. */
-  accent?: ButtonAccent;
-  size?: ButtonSize;
-  /** Icon node rendered before the label. */
-  leadingIcon?: ReactNode;
-  /** Icon node rendered after the label (arrow → for "next" CTAs). */
-  trailingIcon?: ReactNode;
-  /** Show a spinner and disable interactivity. */
-  loading?: boolean;
-  /** Stretches to fill its parent container. */
-  fullWidth?: boolean;
-  children?: ReactNode;
-}
-
-/**
- * Stirling's two-button system: a gradient primary CTA and an outlined
- * secondary action. Ghost is reserved for tertiary links inside a row.
- *
- * Buttons compose with the existing CSS variables — they re-skin cleanly in
- * dark mode without per-variant overrides.
- */
-export function Button({
-  variant = "gradient",
-  accent = "blue",
-  size = "md",
-  leadingIcon,
-  trailingIcon,
-  loading = false,
-  fullWidth = false,
-  disabled,
-  className,
-  children,
-  ...rest
-}: ButtonProps) {
-  const classes = [
-    "sui-btn",
-    `sui-btn--${variant}`,
-    `sui-btn--${accent}`,
-    `sui-btn--${size}`,
-    fullWidth ? "sui-btn--full" : "",
-    loading ? "sui-btn--loading" : "",
-    className ?? "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-
-  return (
-    
-  );
-}
diff --git a/frontend/editor/src/proprietary/ui/Chip.css b/frontend/editor/src/proprietary/ui/Chip.css
deleted file mode 100644
index 78c18800e8..0000000000
--- a/frontend/editor/src/proprietary/ui/Chip.css
+++ /dev/null
@@ -1,96 +0,0 @@
-.sui-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-1_5);
-  border-radius: var(--radius-pill);
-  font-family: var(--font-sans);
-  font-weight: 500;
-  white-space: nowrap;
-  border: 1px solid transparent;
-  transition:
-    background var(--motion-fast),
-    border-color var(--motion-fast),
-    transform var(--motion-fast);
-}
-
-.sui-chip--sm {
-  padding: var(--space-0_5) var(--space-2);
-  font-size: 0.6875rem;
-}
-.sui-chip--md {
-  padding: var(--space-1) var(--space-2_5, 0.5rem);
-  font-size: 0.75rem;
-}
-.sui-chip--md {
-  padding: var(--space-1) 0.625rem;
-  font-size: 0.75rem;
-}
-
-.sui-chip--neutral {
-  background: var(--color-bg-muted);
-  color: var(--color-text-2);
-  border-color: var(--color-border);
-}
-.sui-chip--blue {
-  background: var(--color-blue-light);
-  color: var(--color-blue);
-  border-color: var(--color-blue-border);
-}
-.sui-chip--purple {
-  background: var(--color-purple-light);
-  color: var(--color-purple);
-  border-color: var(--color-purple-border);
-}
-.sui-chip--green {
-  background: var(--color-green-light);
-  color: var(--color-green);
-  border-color: var(--color-green-border);
-}
-.sui-chip--amber {
-  background: var(--color-amber-light);
-  color: var(--color-amber-dark);
-  border-color: var(--color-amber-border);
-}
-.sui-chip--red {
-  background: var(--color-red-light);
-  color: var(--color-red);
-  border-color: var(--color-red-border);
-}
-
-.sui-chip--interactive {
-  cursor: pointer;
-}
-.sui-chip--interactive:hover {
-  transform: translateY(-0.0625rem);
-  filter: brightness(1.05);
-}
-
-.sui-chip__dot {
-  width: 0.4375rem;
-  height: 0.4375rem;
-  border-radius: 50%;
-  background: currentColor;
-  opacity: 0.85;
-}
-
-.sui-chip__icon {
-  display: inline-flex;
-  line-height: 1;
-}
-
-.sui-chip__remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  color: inherit;
-  opacity: 0.6;
-  font-size: 0.875rem;
-  line-height: 1;
-}
-.sui-chip__remove:hover {
-  opacity: 1;
-  background: rgba(0, 0, 0, 0.08);
-}
diff --git a/frontend/editor/src/proprietary/ui/Chip.stories.tsx b/frontend/editor/src/proprietary/ui/Chip.stories.tsx
deleted file mode 100644
index a19e0eff96..0000000000
--- a/frontend/editor/src/proprietary/ui/Chip.stories.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Chip } from "@app/ui/Chip";
-
-const meta: Meta = {
-  title: "Primitives/Chip",
-  component: Chip,
-  tags: ["autodocs"],
-  parameters: { layout: "centered" },
-  args: {
-    children: "us-east-1",
-    tone: "neutral",
-    size: "md",
-    showDot: false,
-  },
-  argTypes: {
-    tone: {
-      control: "inline-radio",
-      options: ["neutral", "blue", "purple", "green", "amber", "red"],
-    },
-    size: { control: "inline-radio", options: ["sm", "md"] },
-    showDot: { control: "boolean" },
-    onClick: { action: "clicked" },
-    onRemove: { action: "removed" },
-  },
-};
-export default meta;
-type Story = StoryObj;
-
-/** Flip tone / size / dot / interactive / removable in controls. */
-export const Playground: Story = {};
-
-export const ToneRow: Story = {
-  render: () => (
-    

-      {(["neutral", "blue", "purple", "green", "amber", "red"] as const).map(
-        (t) => (
-          
-            {t}
-          
-        ),
-      )}
-    

-  ),
-};
-
-export const InContext_OpChain: Story = {
-  render: () => (
-    

-      
-        ocr
-      
-      
-        classify
-      
-      
-        extract
-      
-      
-        validate
-      
-      
-        redact
-      
-      
-        encrypt-rest
-      
-      
-        store-primary
-      
-    

-  ),
-};
diff --git a/frontend/editor/src/proprietary/ui/Chip.tsx b/frontend/editor/src/proprietary/ui/Chip.tsx
deleted file mode 100644
index 340b4a493d..0000000000
--- a/frontend/editor/src/proprietary/ui/Chip.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { ReactNode } from "react";
-import "@app/ui/Chip.css";
-
-export type ChipTone =
-  | "neutral"
-  | "blue"
-  | "purple"
-  | "green"
-  | "amber"
-  | "red";
-
-export type ChipSize = "sm" | "md";
-
-export interface ChipProps {
-  tone?: ChipTone;
-  size?: ChipSize;
-  leadingIcon?: ReactNode;
-  trailingIcon?: ReactNode;
-  /** Show a `×` button. Calls `onRemove` when clicked. */
-  onRemove?: () => void;
-  /** Renders as a button when set. */
-  onClick?: () => void;
-  /** Show the leading dot affordance. Defaults to false (set true for status-style chips). */
-  showDot?: boolean;
-  children?: ReactNode;
-  className?: string;
-}
-
-/**
- * Generic chip / tag — `StatusBadge` has a fixed taxonomy (success/warning/…),
- * `MethodBadge` is HTTP-method-only; this is the open-ended one for tag rows
- * (selected ops, document regions, kbd hints, sort chips, etc).
- */
-export function Chip({
-  tone = "neutral",
-  size = "md",
-  leadingIcon,
-  trailingIcon,
-  onRemove,
-  onClick,
-  showDot,
-  children,
-  className,
-}: ChipProps) {
-  const Tag = onClick ? "button" : "span";
-  const classes = [
-    "sui-chip",
-    `sui-chip--${tone}`,
-    `sui-chip--${size}`,
-    onClick ? "sui-chip--interactive" : "",
-    className ?? "",
-  ]
-    .filter(Boolean)
-    .join(" ");
-  return (
-    
-      {showDot && }
-      {leadingIcon && (
-        
-          {leadingIcon}
-        
-      )}
-      {children}
-      {trailingIcon && !onRemove && (
-        
-          {trailingIcon}
-        
-      )}
-      {onRemove && (
-        
-      )}
-    
-  );
-}
diff --git a/frontend/editor/src/saas/components/SignupRequiredBootstrap.tsx b/frontend/editor/src/saas/components/SignupRequiredBootstrap.tsx
index 43e388587d..b9028ce22b 100644
--- a/frontend/editor/src/saas/components/SignupRequiredBootstrap.tsx
+++ b/frontend/editor/src/saas/components/SignupRequiredBootstrap.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, useMemo } from "react";
-import { Modal, Stack, Button, Text } from "@mantine/core";
+import { Modal, Stack, Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import PersonAddIcon from "@mui/icons-material/PersonAdd";
 import { useTranslation } from "react-i18next";
 import { withBasePath } from "@app/constants/app";
@@ -112,7 +113,7 @@ export default function SignupRequiredBootstrap() {
             gap: "0.5rem",
           }}
         >
-          
           

         

-          
-          
+          
         

       

     
diff --git a/frontend/editor/src/saas/components/shared/AppConfigModal.tsx b/frontend/editor/src/saas/components/shared/AppConfigModal.tsx
index 0fa14721d7..b691244e68 100644
--- a/frontend/editor/src/saas/components/shared/AppConfigModal.tsx
+++ b/frontend/editor/src/saas/components/shared/AppConfigModal.tsx
@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo, useState, useEffect } from "react";
-import { Modal, Button, Text, ActionIcon } from "@mantine/core";
+import { Modal, Text } from "@mantine/core";
+import { Button } from "@app/ui/Button";
+import { ActionIcon } from "@app/ui/ActionIcon";
 import { useMediaQuery } from "@mantine/hooks";
 import { useAuth } from "@app/auth/UseSession";
 import { isUserAnonymous } from "@app/auth/supabase";
@@ -253,9 +255,9 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => {
                   ) : null}
                 
                 
                   
                 
@@ -276,11 +278,11 @@ const AppConfigModal: React.FC = ({ opened, onClose }) => {
         

           Are you sure you want to sign out?
           

-            
             
           

-          
+          
         

       
 
@@ -434,8 +434,8 @@ const Overview: React.FC = ({ onLogoutClick }) => {
                   },
                 )}
               
-              
+              
             
           
         ) : (
@@ -464,24 +464,21 @@ const Overview: React.FC = ({ onLogoutClick }) => {
               }}
             >
               
-                
-                  {(props) => (
-                    
-                  )}
-                
-                
+                
               
               
                 {t(
@@ -559,8 +556,8 @@ const Overview: React.FC = ({ onLogoutClick }) => {
                     key={provider.id}
                     content={`${t("config.account.upgrade.linkWith", "Link with")} ${provider.label}`}
                   >
-                    
+                    
                   
                 ))}
             
@@ -624,9 +621,9 @@ const Overview: React.FC = ({ onLogoutClick }) => {
                   )}
                   style={{ flex: 1 }}
                 />
-                
+                
               
             
           
@@ -644,13 +641,13 @@ const Overview: React.FC = ({ onLogoutClick }) => {
             borderTop: "1px solid var(--mantine-color-default-border)",
           }}
         >
-          
+          
         
       )}
 
@@ -693,11 +690,16 @@ const Overview: React.FC = ({ onLogoutClick }) => {
             mb="md"
           />
           
-            
-            
+            
           
         
       
diff --git a/frontend/editor/src/saas/components/shared/config/configSections/PasswordSecurity.tsx b/frontend/editor/src/saas/components/shared/config/configSections/PasswordSecurity.tsx
index 8010b5482a..d38e46e1a7 100644
--- a/frontend/editor/src/saas/components/shared/config/configSections/PasswordSecurity.tsx
+++ b/frontend/editor/src/saas/components/shared/config/configSections/PasswordSecurity.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import {
-  Button,
   PasswordInput,
   Group,
   Alert,
@@ -8,6 +7,7 @@ import {
   Modal,
   Divider,
 } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "react-i18next";
 import { useAuth } from "@app/auth/UseSession";
 import { supabase } from "@app/auth/supabase";
@@ -116,7 +116,7 @@ const PasswordSecurity: React.FC = () => {
             )}
           

         
-        
       
@@ -166,7 +166,7 @@ const PasswordSecurity: React.FC = () => {
             
               
         
       ) : (
         
-          
+            }
           >
-            
-            
-              {translate("mode.resume", "Resume placement")}
-            
-          
+            {translate("mode.resume", "Resume placement")}
+          
         
       )
     ) : null;
@@ -1217,7 +1200,7 @@ const SignSettings = ({
             onChange={(value) =>
               handleSignatureSourceChange(value as SignatureSource)
             }
-            data={sourceOptions}
+            options={sourceOptions}
           />
         )}
         {renderSignatureBuilder()}
@@ -1260,7 +1243,7 @@ const SignSettings = ({
       />
 
       {onSave && (
-        
       )}
diff --git a/frontend/editor/src/saas/routes/AuthCallback.tsx b/frontend/editor/src/saas/routes/AuthCallback.tsx
index 1701163f9d..ee16d8ce36 100644
--- a/frontend/editor/src/saas/routes/AuthCallback.tsx
+++ b/frontend/editor/src/saas/routes/AuthCallback.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { supabase } from "@app/auth/supabase";
-import { Button } from "@mantine/core";
+import { Button } from "@app/ui/Button";
 import { withBasePath } from "@app/constants/app";
 
 interface CallbackState {
@@ -206,8 +206,8 @@ export default function AuthCallback() {
               if (state.status === "error") {
                 return (
                   
diff --git a/frontend/editor/src/saas/routes/Login.tsx b/frontend/editor/src/saas/routes/Login.tsx
index 4395bef998..dcf7b454a2 100644
--- a/frontend/editor/src/saas/routes/Login.tsx
+++ b/frontend/editor/src/saas/routes/Login.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { supabase, signInAnonymously } from "@app/auth/supabase";
+import { Button } from "@app/ui/Button";
 import { useAuth } from "@app/auth/UseSession";
 import { useTranslation } from "@app/hooks/useTranslation";
 import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
@@ -299,8 +300,8 @@ export default function Login() {
 
         {/* Magic link button + its expandable form as one unit */}
         

-          
+          
 
           

-                    
                   

                 )}
               

@@ -370,8 +371,8 @@ export default function Login() {
       
 
       {/* Email & Password button */}
-      
+      
 
       {/* Email form — animated expand */}
       

-            
+            
           

         
       
 
       {/* Skip */}
       

-        
+        
       

 
       {/* Bottom */}
@@ -441,8 +442,8 @@ export default function Login() {
           paddingTop: "1rem",
         }}
       >
-        
+        
       
     
   );
diff --git a/frontend/editor/src/saas/routes/OAuthConsent.tsx b/frontend/editor/src/saas/routes/OAuthConsent.tsx
index e36f4d371b..d851a91a53 100644
--- a/frontend/editor/src/saas/routes/OAuthConsent.tsx
+++ b/frontend/editor/src/saas/routes/OAuthConsent.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import { Button } from "@app/ui/Button";
 import { useAuth } from "@app/auth/UseSession";
 import { useTranslation } from "@app/hooks/useTranslation";
 import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
@@ -236,13 +237,13 @@ export default function OAuthConsent() {
             "Sign in to your Stirling PDF account to continue connecting the app.",
           )}
         

-        
+        
       
     );
   }
@@ -358,8 +359,7 @@ export default function OAuthConsent() {
       
 
       

-        
-        
+        
       

 
       {displayName && (
diff --git a/frontend/editor/src/saas/routes/ResetPassword.tsx b/frontend/editor/src/saas/routes/ResetPassword.tsx
index f17e82bd68..b0a1273199 100644
--- a/frontend/editor/src/saas/routes/ResetPassword.tsx
+++ b/frontend/editor/src/saas/routes/ResetPassword.tsx
@@ -9,6 +9,7 @@ import NavigationLink from "@app/routes/login/NavigationLink";
 import { supabase } from "@app/auth/supabase";
 import { absoluteWithBasePath } from "@app/constants/app";
 import { useTranslation } from "@app/hooks/useTranslation";
+import { Button } from "@app/ui/Button";
 
 export default function ResetPassword() {
   const { t } = useTranslation();
@@ -233,7 +234,7 @@ export default function ResetPassword() {
               />
             
           
-          
            navigate("/login")}
             text={t("login.backToSignIn", "Back to sign in")}
diff --git a/frontend/editor/src/saas/routes/Signup.tsx b/frontend/editor/src/saas/routes/Signup.tsx
index 36d162a549..3836c60ac1 100644
--- a/frontend/editor/src/saas/routes/Signup.tsx
+++ b/frontend/editor/src/saas/routes/Signup.tsx
@@ -9,6 +9,7 @@ import AuthLayout from "@app/routes/authShared/AuthLayout";
 import "@app/auth/ui/auth.css";
 import "@app/routes/authShared/saas-auth.css";
 import { alert } from "@app/components/toast";
+import { Button } from "@app/ui/Button";
 
 // Import signup components
 import ErrorMessage from "@app/auth/ui/ErrorMessage";
@@ -209,8 +210,8 @@ export default function Signup() {
       
 
       {/* Email & Password button */}
-      
+      
 
       {/* Email form — animated expand */}
       

-        
+        
       

 
       {/* Bottom */}
@@ -276,8 +277,8 @@ export default function Signup() {
           paddingTop: "1rem",
         }}
       >
-        
+        
       
     
   );
diff --git a/frontend/editor/src/saas/routes/authShared/GuestSignInButton.tsx b/frontend/editor/src/saas/routes/authShared/GuestSignInButton.tsx
index 31bbc35ca0..273bb17dfd 100644
--- a/frontend/editor/src/saas/routes/authShared/GuestSignInButton.tsx
+++ b/frontend/editor/src/saas/routes/authShared/GuestSignInButton.tsx
@@ -1,4 +1,7 @@
 import React from "react";
+import { Button } from "@app/ui/Button";
+
+// TODO: add saas-auth.css to the same location as auth.css
 import "@app/auth/ui/auth.css";
 import "@app/routes/authShared/saas-auth.css";
 
@@ -14,13 +17,13 @@ export default function GuestSignInButton({
   disabled,
 }: GuestSignInButtonProps) {
   return (
-    
+    
   );
 }
diff --git a/frontend/editor/src/saas/routes/authShared/saas-auth.css b/frontend/editor/src/saas/routes/authShared/saas-auth.css
index 535d72d3dd..96d97f695c 100644
--- a/frontend/editor/src/saas/routes/authShared/saas-auth.css
+++ b/frontend/editor/src/saas/routes/authShared/saas-auth.css
@@ -129,6 +129,11 @@
   text-align: center;
 }
 
+/* ── Dark-mode icon inversion for monochrome OAuth logos ────────────── */
+[data-mantine-color-scheme="dark"] .oauth-icon--github {
+  filter: invert(1);
+}
+
 /* ── Icon helpers inside oauth-button-fullwidth ─────────────────────── */
 .auth-at-icon {
   font-size: 1.25rem;
diff --git a/frontend/editor/src/saas/routes/login/EmailPasswordForm.tsx b/frontend/editor/src/saas/routes/login/EmailPasswordForm.tsx
index ecc8cbd209..a7435eb43b 100644
--- a/frontend/editor/src/saas/routes/login/EmailPasswordForm.tsx
+++ b/frontend/editor/src/saas/routes/login/EmailPasswordForm.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import "@app/auth/ui/auth.css";
 import "@app/routes/authShared/saas-auth.css";
+import { Button } from "@app/ui/Button";
 
 interface EmailPasswordFormProps {
   email: string;
@@ -78,13 +79,14 @@ export default function EmailPasswordForm({
         )}
       
 
-      
+      
     
   );
 }
diff --git a/frontend/editor/src/saas/routes/login/MagicLinkForm.tsx b/frontend/editor/src/saas/routes/login/MagicLinkForm.tsx
index 9833928247..2a669595de 100644
--- a/frontend/editor/src/saas/routes/login/MagicLinkForm.tsx
+++ b/frontend/editor/src/saas/routes/login/MagicLinkForm.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@app/ui/Button";
 import { useTranslation } from "@app/hooks/useTranslation";
 import "@app/auth/ui/auth.css";
 import "@app/routes/authShared/saas-auth.css";
@@ -24,7 +25,8 @@ export default function MagicLinkForm({
   if (!showMagicLink) {
     return (
       

-        
+        
       

     );
   }
@@ -47,13 +49,13 @@ export default function MagicLinkForm({
         onKeyPress={(e) => e.key === "Enter" && !isSubmitting && onSubmit()}
         className="auth-input"
       />
-      
+      
     
   );
 }
diff --git a/frontend/editor/src/saas/routes/login/OAuthButtons.tsx b/frontend/editor/src/saas/routes/login/OAuthButtons.tsx
index 21e76348f9..202a1c9d3c 100644
--- a/frontend/editor/src/saas/routes/login/OAuthButtons.tsx
+++ b/frontend/editor/src/saas/routes/login/OAuthButtons.tsx
@@ -1,6 +1,7 @@
 import { oauthProviders } from "@app/constants/authProviders";
 import { useTranslation } from "@app/hooks/useTranslation";
 import { Tooltip } from "@app/components/shared/Tooltip";
+import { Button } from "@app/ui/Button";
 import { oauthIconUrl } from "@app/auth/ui/oauthIcons";
 
 // Exports for compatibility with proprietary code
@@ -38,7 +39,8 @@ export default function OAuthButtons({
             content={`${t("login.signInWith", "Sign in with")} ${p.label}`}
             position="top"
           >
-            
+            
           
         ))}
       
@@ -65,7 +67,8 @@ export default function OAuthButtons({
             content={`${t("login.signInWith", "Sign in with")} ${p.label}`}
             position="top"
           >
-            
+            
           
         ))}
       
@@ -87,8 +90,9 @@ export default function OAuthButtons({
     return (
       

         {oauthProviders.map((p) => (
-          
+          
         ))}
       

     );
@@ -115,8 +119,9 @@ export default function OAuthButtons({
   return (
     

       {oauthProviders.map((p) => (
-        
+        
       ))}
     

   );
diff --git a/frontend/editor/src/saas/styles/saas-theme.css b/frontend/editor/src/saas/styles/saas-theme.css
index 3cbce19761..654fe5fe17 100644
--- a/frontend/editor/src/saas/styles/saas-theme.css
+++ b/frontend/editor/src/saas/styles/saas-theme.css
@@ -76,8 +76,6 @@
   --api-keys-card-shadow: rgba(0, 0, 0, 0.06);
   --api-keys-input-bg: #f8f8f8;
   --api-keys-input-border: #e0e0e0;
-  --api-keys-button-bg: #f5f5f5;
-  --api-keys-button-color: #333333;
 }
 
 [data-mantine-color-scheme="dark"] {
@@ -90,8 +88,8 @@
   --spdf-compare-added-badge-fg: var(--color-green-500);
   --spdf-compare-inline-removed-bg: rgba(255, 59, 48, 0.25);
   --spdf-compare-inline-added-bg: rgba(52, 199, 89, 0.25);
-  --compare-page-label-bg: #2a2f36;
-  --compare-page-label-fg: #d0d6dc;
+  --compare-page-label-bg: #0d1020;
+  --compare-page-label-fg: #c2c8e0;
 
   /* Orange scale (dark mode mirrors light values to match UI) */
   --color-orange-50: #fff4ed;
@@ -122,29 +120,27 @@
   --tool-subcategory-text-color-light: #9ca3af;
 
   /* API usage progress bar colors (dark mode) */
-  --usage-weekly-active: #60a5fa;
+  --usage-weekly-active: #4f8ef5;
   --usage-bought-active: #34d399;
-  --usage-total-used: #ffffff;
-  --usage-inactive: #43464b;
+  --usage-total-used: #e8eaf6;
+  --usage-inactive: #1c2340;
 
   /* API Keys section colors (dark mode) */
-  --api-keys-card-bg: #2a2f36;
-  --api-keys-card-border: #3a4047;
+  --api-keys-card-bg: #131729;
+  --api-keys-card-border: #1c2340;
   --api-keys-card-shadow: none;
-  --api-keys-input-bg: #1f2329;
-  --api-keys-input-border: #3a4047;
-  --api-keys-button-bg: #3a4047;
-  --api-keys-button-color: #d0d6dc;
+  --api-keys-input-bg: #0d1020;
+  --api-keys-input-border: #1c2340;
 
   --text-divider-rule-color: var(--tool-subcategory-rule-color);
   --text-divider-label-color: var(--text-muted);
 
   /* App Config Modal colors (dark mode) */
-  --modal-nav-bg: #1f2329;
-  --modal-nav-section-title: #9ca3af;
-  --modal-nav-item: #d0d6dc;
-  --modal-nav-item-active: #0a8bff;
-  --modal-nav-item-active-bg: rgba(10, 139, 255, 0.15);
-  --modal-content-bg: #2a2f36;
-  --modal-header-border: rgba(255, 255, 255, 0.08);
+  --modal-nav-bg: #0d1020;
+  --modal-nav-section-title: #5b6280;
+  --modal-nav-item: #c2c8e0;
+  --modal-nav-item-active: #4f8ef5;
+  --modal-nav-item-active-bg: rgba(79, 142, 245, 0.15);
+  --modal-content-bg: #131729;
+  --modal-header-border: rgba(255, 255, 255, 0.05);
 }
diff --git a/frontend/editor/tsconfig.portal.vite.json b/frontend/editor/tsconfig.portal.vite.json
index 8a63033eb6..93337d1dcc 100644
--- a/frontend/editor/tsconfig.portal.vite.json
+++ b/frontend/editor/tsconfig.portal.vite.json
@@ -1,6 +1,6 @@
 {
   "extends": "./tsconfig.json",
-  "comment": "Path resolution for the portal's vitest project (referenced by vitest.config.ts). Broad include ('src', via the base) so vite-tsconfig-paths rewrites @app/* in every editor/src file the portal tests pull in (e.g. proprietary/ui), not just the portal layer. The portal's own typecheck uses src/portal/tsconfig.json.",
+  "comment": "Path resolution for the portal's vitest project (referenced by vitest.config.ts). Broad include ('src', via the base) so vite-tsconfig-paths rewrites @app/* in every editor/src file the portal tests pull in (e.g. core/ui), not just the portal layer. The portal's own typecheck uses src/portal/tsconfig.json.",
   "compilerOptions": {
     "paths": {
       "@app/*": [
diff --git a/frontend/editor/vitest.config.ts b/frontend/editor/vitest.config.ts
index 5a0fc50651..e4dfd76277 100644
--- a/frontend/editor/vitest.config.ts
+++ b/frontend/editor/vitest.config.ts
@@ -57,7 +57,7 @@ export default defineConfig({
           react(),
           tsconfigPaths({
             // Broad project so @app/@portal resolve in every editor file the
-            // portal tests pull in (proprietary/ui, core, ...).
+            // portal tests pull in (core/ui, core, ...).
             projects: ["./tsconfig.portal.vite.json"],
           }),
         ],
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 81698ddde6..02f1c68132 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -30,6 +30,42 @@ const baseRestrictedImportPatterns = [
   },
 ];
 
+// Button/SegmentedControl/Chip must come from the shared DS (@app/ui), not Mantine.
+// If no variant fits, extend @app/ui — that layer (editor/src/core/ui) is exempt below.
+const mantineComponentImportRestrictions = [
+  {
+    selector:
+      "ImportDeclaration[source.value='@mantine/core'] > ImportSpecifier[imported.name=/^(Button|ActionIcon|UnstyledButton|CloseButton|FileButton)$/]",
+    message:
+      'Use the shared Button (@app/ui/Button) instead of the Mantine button family. variant=primary|secondary|tertiary, accent=default|neutral|brand|ai|premium|danger|success|warning; an icon-only button is `
+    
+  
+  

+  
+
+
+

+  
+  

+    

+      
+      
+      

+      
+    

+    

+      

+      

+      
    
+    
    
+  
    
+
    
+
+
    
+
+
+
+
+

From 8df49ac053dbc464b00d2dbd64774f6a69628f59 Mon Sep 17 00:00:00 2001
From: ConnorYoh <40631091+ConnorYoh@users.noreply.github.com>
Date: Wed, 8 Jul 2026 13:07:54 +0100
Subject: [PATCH 16/27] feat(portal): build portal for SaaS and self-hosted via
 file-override layer (#6900)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## What

Ground-work so the admin portal can build for the **SaaS flavor**
alongside self-hosted, using the editor's existing **build-time
file-override** mechanism — no runtime flavor flags. This PR
demonstrates SaaS end-to-end (single-login + Usage page loading via the
inherited Supabase session) without changing self-hosted behaviour.

This is intentionally scoped as foundations, not the whole feature.

## How

**Build hook**
- `tsconfig.saas.vite.json`: `@portal/*` now cascades
(`src/saas/portal/*` → `src/portal/*`); added `@portalCore/*` for the
explicit base path.
- New `src/portal-saas/` layer (sibling of `src/portal`) holds SaaS-only
overrides, so `@app/*` resolves only editor layers and `@portal/*` only
portal layers. Self-hosted builds never import it (tree-shaken).

**Seams live in the api-client + composition layers — never in page
components**
- `saasApiBase` — base URL source (self-hosted: `VITE_SAAS_API_URL`;
SaaS reuses the single `VITE_API_BASE_URL` backend).
- `portalSaasSession` — flavor-agnostic token from the shared Supabase
client.
- `PortalAuthBoundary` — self-hosted: Spring `AuthProvider` +
`AuthGate`; SaaS: Supabase `AuthProvider` + session-only gate (inherits
the SaaS session, so no second login).

**Link concept pulled out of the Usage page (one clean cut)**
- `Usage` is now a link-free wallet renderer with generic
`onWalletLoaded` / `onReauth` callbacks; it always loads the wallet and
has zero flavor awareness.
- `PortalBillingGate` is the single flavor seam: self-hosted gates on
link (prompt when unlinked; wires the callbacks onto link/tier +
re-auth), SaaS is a passthrough that renders `Usage` directly.
- Keeps the flavor switch out of the page entirely (no per-flavor code
in `Usage`).

## Testing
Green locally and in CI (CI runs the umbrella `task
frontend:check:all`):
- `task frontend:typecheck:all` — clean across all 7 build variants
- `task frontend:test` — vitest suites pass (portal + saas cover this
change; 146 tests)
- `task frontend:build:saas` and `task frontend:build:proprietary` —
both green
- `task frontend:lint` and `task frontend:format:check` — clean

## Also in this PR (added after the initial foundations)
- **Tier from wallet + full link-layer excision on SaaS.** `TierContext`
no longer reads `LinkContext` (via a `usePlanTier` seam: self-hosted
from link state, SaaS from `wallet.status`), and the SaaS
`PortalProviders` drops `LinkProvider` / `AccountLinkProvider` /
`LinkModalHost` entirely — the link machinery is *absent* from the SaaS
bundle, not mounted-but-inert.

## Deliberately out of scope (follow-ups)
- SaaS-only read-only "connected servers" settings view.
- Shared wallet source so the SaaS tier badge and the Usage page don't
both fetch `/payg/wallet` (harmless double-fetch today).
---
 frontend/.storybook/main.ts                   |   5 +
 frontend/.storybook/preview.tsx               |   8 +-
 frontend/editor/.env.proprietary              |   7 -
 .../src/portal-saas/PortalProviders.tsx       |  20 +++
 .../src/portal-saas/api/saasApiBase.test.ts   |  21 +++
 .../editor/src/portal-saas/api/saasApiBase.ts |  13 ++
 .../auth/PortalAuthBoundary.test.tsx          |  60 ++++++++
 .../portal-saas/auth/PortalAuthBoundary.tsx   |  61 ++++++++
 .../components/LinkAccountFooterItem.test.tsx |  10 ++
 .../components/LinkAccountFooterItem.tsx      |   7 +
 .../billing/PortalBillingGate.test.tsx        |  15 ++
 .../components/billing/PortalBillingGate.tsx  |  20 +++
 .../settings/accountLinkSettings.test.ts      |   8 ++
 .../settings/accountLinkSettings.tsx          |   9 ++
 .../portal-saas/contexts/usePlanTier.test.tsx |  35 +++++
 .../src/portal-saas/contexts/usePlanTier.ts   |  14 ++
 .../contexts/usePortalLinked.test.tsx         |  16 +++
 .../portal-saas/contexts/usePortalLinked.ts   |   9 ++
 frontend/editor/src/portal/PortalApp.tsx      | 133 ++----------------
 .../editor/src/portal/PortalProviders.tsx     |  63 +++++++++
 frontend/editor/src/portal/ViewRouter.tsx     |   4 +-
 frontend/editor/src/portal/api/http.ts        |  32 ++---
 frontend/editor/src/portal/api/saasApiBase.ts |  18 +++
 .../src/portal/auth/PortalAuthBoundary.tsx    |  19 +++
 .../src/portal/auth/portalSaasSession.test.ts |  43 ++++++
 .../src/portal/auth/portalSaasSession.ts      |  19 +++
 .../src/portal/auth/saasSupabase.test.ts      |  45 ++++++
 .../editor/src/portal/auth/saasSupabase.ts    |  17 ++-
 frontend/editor/src/portal/billing/stripe.ts  |   2 +-
 .../components/LinkAccountFooterItem.tsx      |  27 ++++
 .../src/portal/components/PortalChrome.tsx    |  84 +++++++++++
 .../src/portal/components/SettingsModal.tsx   |  23 +--
 .../editor/src/portal/components/Sidebar.tsx  |  24 +---
 .../account-link/LinkAccountCard.tsx          |   2 +-
 .../account-link/LinkAccountModal.tsx         |   4 +-
 .../billing/PortalBillingGate.test.tsx        |  39 +++++
 .../components/billing/PortalBillingGate.tsx  |  32 +++++
 .../procurement/ProcurementHome.tsx           |   4 +-
 .../settings/accountLinkSettings.tsx          |  26 ++++
 .../src/portal/contexts/TierContext.tsx       |  31 ++--
 .../src/portal/contexts/usePlanTier.test.tsx  |  28 ++++
 .../editor/src/portal/contexts/usePlanTier.ts |  24 ++++
 .../portal/contexts/usePortalLinked.test.tsx  |  28 ++++
 .../src/portal/contexts/usePortalLinked.ts    |  12 ++
 frontend/editor/src/portal/tsconfig.json      |   1 -
 .../editor/src/portal/views/Usage.test.tsx    |  67 +++++++++
 frontend/editor/src/portal/views/Usage.tsx    | 100 +++++++------
 frontend/editor/src/portal/vite-env.d.ts      |   8 +-
 frontend/editor/src/saas/auth/supabase.ts     |  18 +--
 frontend/editor/src/saas/tsconfig.json        |  12 +-
 frontend/editor/tsconfig.portal.vite.json     |   7 +-
 frontend/editor/tsconfig.saas.vite.json       |   3 +-
 frontend/editor/vitest.config.ts              |   8 +-
 frontend/eslint.config.mjs                    |   3 +-
 54 files changed, 1045 insertions(+), 303 deletions(-)
 create mode 100644 frontend/editor/src/portal-saas/PortalProviders.tsx
 create mode 100644 frontend/editor/src/portal-saas/api/saasApiBase.test.ts
 create mode 100644 frontend/editor/src/portal-saas/api/saasApiBase.ts
 create mode 100644 frontend/editor/src/portal-saas/auth/PortalAuthBoundary.test.tsx
 create mode 100644 frontend/editor/src/portal-saas/auth/PortalAuthBoundary.tsx
 create mode 100644 frontend/editor/src/portal-saas/components/LinkAccountFooterItem.test.tsx
 create mode 100644 frontend/editor/src/portal-saas/components/LinkAccountFooterItem.tsx
 create mode 100644 frontend/editor/src/portal-saas/components/billing/PortalBillingGate.test.tsx
 create mode 100644 frontend/editor/src/portal-saas/components/billing/PortalBillingGate.tsx
 create mode 100644 frontend/editor/src/portal-saas/components/settings/accountLinkSettings.test.ts
 create mode 100644 frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx
 create mode 100644 frontend/editor/src/portal-saas/contexts/usePlanTier.test.tsx
 create mode 100644 frontend/editor/src/portal-saas/contexts/usePlanTier.ts
 create mode 100644 frontend/editor/src/portal-saas/contexts/usePortalLinked.test.tsx
 create mode 100644 frontend/editor/src/portal-saas/contexts/usePortalLinked.ts
 create mode 100644 frontend/editor/src/portal/PortalProviders.tsx
 create mode 100644 frontend/editor/src/portal/api/saasApiBase.ts
 create mode 100644 frontend/editor/src/portal/auth/PortalAuthBoundary.tsx
 create mode 100644 frontend/editor/src/portal/auth/portalSaasSession.test.ts
 create mode 100644 frontend/editor/src/portal/auth/portalSaasSession.ts
 create mode 100644 frontend/editor/src/portal/auth/saasSupabase.test.ts
 create mode 100644 frontend/editor/src/portal/components/LinkAccountFooterItem.tsx
 create mode 100644 frontend/editor/src/portal/components/PortalChrome.tsx
 create mode 100644 frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx
 create mode 100644 frontend/editor/src/portal/components/billing/PortalBillingGate.tsx
 create mode 100644 frontend/editor/src/portal/components/settings/accountLinkSettings.tsx
 create mode 100644 frontend/editor/src/portal/contexts/usePlanTier.test.tsx
 create mode 100644 frontend/editor/src/portal/contexts/usePlanTier.ts
 create mode 100644 frontend/editor/src/portal/contexts/usePortalLinked.test.tsx
 create mode 100644 frontend/editor/src/portal/contexts/usePortalLinked.ts
 create mode 100644 frontend/editor/src/portal/views/Usage.test.tsx

diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts
index 4d4aadc8f8..8547e9092a 100644
--- a/frontend/.storybook/main.ts
+++ b/frontend/.storybook/main.ts
@@ -61,6 +61,11 @@ const config: StorybookConfig = {
     config.define = {
       ...(config.define ?? {}),
       "import.meta.env.VITE_SAAS_API_URL": JSON.stringify("http://saas.mock"),
+      // Keep the Supabase auth env empty so ensureSaasSupabase() is a no-op and
+      // never replaces the mock SaaS client stubbed in preview.tsx.
+      "import.meta.env.VITE_SUPABASE_URL": JSON.stringify(""),
+      "import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY":
+        JSON.stringify(""),
     };
     return config;
   },
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
index bab413a0e8..76463001fe 100644
--- a/frontend/.storybook/preview.tsx
+++ b/frontend/.storybook/preview.tsx
@@ -29,10 +29,10 @@ initialize({ onUnhandledRequest: "bypass" }, handlers);
 
 // Storybook-only: stub a SaaS session so apiClient.saas reads (invoices, payment
 // method, wallet) clear the session check and reach the MSW handlers instead of
-// failing with "No SaaS session". VITE_SAAS_SUPABASE_URL/KEY are intentionally
-// unset, so ensureSaasSupabase() is a no-op and never replaces this client; only
-// VITE_SAAS_API_URL (a mock origin MSW matches) is configured — injected via
-// .storybook/main.ts's viteFinal define, not a frontend/.env file.
+// failing with "No SaaS session". VITE_SUPABASE_URL/KEY are defined empty (see
+// .storybook/main.ts), so ensureSaasSupabase() is a no-op and never replaces this
+// client; only VITE_SAAS_API_URL (a mock origin MSW matches) is configured —
+// injected via .storybook/main.ts's viteFinal define, not a frontend/.env file.
 const saasStub = configureSupabase({
   url: "http://saas.mock",
   key: "storybook-anon-key",
diff --git a/frontend/editor/.env.proprietary b/frontend/editor/.env.proprietary
index ed5498ba3a..0ee7e66bc9 100644
--- a/frontend/editor/.env.proprietary
+++ b/frontend/editor/.env.proprietary
@@ -18,13 +18,6 @@ VITE_EDITOR_URL=/
 # backend.
 VITE_PORTAL_MOCKS=
 
-# Hosted SaaS Supabase project for the self-hosted portal's IN-APP account
-# linking (both values are public). Set per deploy; absent -> the account-link
-# UI shows a "configure" state. For local e2e, point these at the SaaS Supabase
-# project the local backend links against.
-VITE_SAAS_SUPABASE_URL=
-VITE_SAAS_SUPABASE_ANON_KEY=
-
 # Hosted SaaS Java backend base URL (e.g. https://api.stirlingpdf.com). Used for
 # ATTENDED portal -> SaaS reads (wallet, billing, plans, checkout) with the
 # admin's Supabase JWT. Distinct from the local backend (reached same-origin via
diff --git a/frontend/editor/src/portal-saas/PortalProviders.tsx b/frontend/editor/src/portal-saas/PortalProviders.tsx
new file mode 100644
index 0000000000..161b942582
--- /dev/null
+++ b/frontend/editor/src/portal-saas/PortalProviders.tsx
@@ -0,0 +1,20 @@
+import { TierProvider } from "@portal/contexts/TierContext";
+import { UIProvider } from "@portal/contexts/UIContext";
+import { PortalChrome } from "@portal/components/PortalChrome";
+
+/**
+ * SaaS provider stack. There is no account-link layer: the signed-in account IS
+ * the SaaS account (auth is handled upstream by PortalAuthBoundary) and the tier
+ * comes from the wallet (see portal-saas/contexts/usePlanTier). Dropping
+ * LinkProvider / AccountLinkProvider / the login modal here keeps the link
+ * machinery out of the SaaS bundle entirely.
+ */
+export function PortalProviders() {
+  return (
+    
+      
+        
+      
+    
+  );
+}
diff --git a/frontend/editor/src/portal-saas/api/saasApiBase.test.ts b/frontend/editor/src/portal-saas/api/saasApiBase.test.ts
new file mode 100644
index 0000000000..6330ea4755
--- /dev/null
+++ b/frontend/editor/src/portal-saas/api/saasApiBase.test.ts
@@ -0,0 +1,21 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { saasApiBase } from "@portal/api/saasApiBase";
+
+describe("saasApiBase — SaaS build (one backend, VITE_API_BASE_URL)", () => {
+  afterEach(() => vi.unstubAllEnvs());
+
+  it("reuses the editor's single backend base", () => {
+    vi.stubEnv("VITE_API_BASE_URL", "http://localhost:8080");
+    expect(saasApiBase()).toBe("http://localhost:8080");
+  });
+
+  it("trims a trailing slash", () => {
+    vi.stubEnv("VITE_API_BASE_URL", "https://app.stirling.com/");
+    expect(saasApiBase()).toBe("https://app.stirling.com");
+  });
+
+  it("maps same-origin '/' to '' — a valid (non-null) base, never 'unconfigured'", () => {
+    vi.stubEnv("VITE_API_BASE_URL", "/");
+    expect(saasApiBase()).toBe("");
+  });
+});
diff --git a/frontend/editor/src/portal-saas/api/saasApiBase.ts b/frontend/editor/src/portal-saas/api/saasApiBase.ts
new file mode 100644
index 0000000000..e669dbf898
--- /dev/null
+++ b/frontend/editor/src/portal-saas/api/saasApiBase.ts
@@ -0,0 +1,13 @@
+/**
+ * SaaS build: everything is the SaaS backend, so portal→SaaS reads target the
+ * SAME base URL the editor uses ({@code VITE_API_BASE_URL}) rather than a separate
+ * {@code VITE_SAAS_API_URL}. Default {@code "/"} → same-origin (the dev proxy /
+ * deployment forwards to the SaaS backend); the Supabase JWT is the one credential.
+ *
+ * 
    Never null — same-origin is always a valid base — so {@code apiClient.saas}
+ * never enters the self-hosted "SaaS not configured" state.
+ */
+export function saasApiBase(): string {
+  const raw = import.meta.env.VITE_API_BASE_URL ?? "/";
+  return raw.replace(/\/+$/, "");
+}
diff --git a/frontend/editor/src/portal-saas/auth/PortalAuthBoundary.test.tsx b/frontend/editor/src/portal-saas/auth/PortalAuthBoundary.test.tsx
new file mode 100644
index 0000000000..271fbbfa50
--- /dev/null
+++ b/frontend/editor/src/portal-saas/auth/PortalAuthBoundary.test.tsx
@@ -0,0 +1,60 @@
+import { type ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { allowConsole } from "@app/tests/failOnConsole";
+
+// Controllable auth state for the mocked provider.
+const authState: { session: unknown; loading: boolean } = {
+  session: null,
+  loading: false,
+};
+
+vi.mock("@app/auth", () => ({
+  // Passthrough — we drive gating via the mocked useAuth below.
+  AuthProvider: ({ children }: { children: ReactNode }) => children,
+}));
+vi.mock("@app/auth/context", () => ({ useAuth: () => authState }));
+vi.mock("@app/ui", () => ({ Spinner: () => null }));
+vi.mock("@portal/auth/saasSupabase", () => ({ ensureSaasSupabase: vi.fn() }));
+
+import { PortalAuthBoundary } from "@portal/auth/PortalAuthBoundary";
+
+describe("PortalAuthBoundary — SaaS", () => {
+  beforeEach(() => {
+    authState.session = null;
+    authState.loading = false;
+  });
+
+  it("renders the portal when a Supabase session is present (no login)", () => {
+    authState.session = { user: { id: "u1" }, access_token: "tok" };
+    render(
+      
+        
    PORTAL
    
+      ,
+    );
+    expect(screen.getByTestId("portal")).toBeInTheDocument();
+  });
+
+  it("gates (does not render the portal) when there is no session", () => {
+    authState.session = null;
+    // The gate bounces to /login; jsdom doesn't implement navigation, so absorb
+    // that incidental warning rather than fail the console guard.
+    allowConsole.error(/not implemented|navigation/i);
+    render(
+      
+        
    PORTAL
    
+          ,
+    );
+    expect(screen.queryByTestId("portal")).not.toBeInTheDocument();
+  });
+
+  it("gates while the session is still resolving", () => {
+    authState.loading = true;
+    render(
+      
+        
    PORTAL
    
+          ,
+    );
+    expect(screen.queryByTestId("portal")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/editor/src/portal-saas/auth/PortalAuthBoundary.tsx b/frontend/editor/src/portal-saas/auth/PortalAuthBoundary.tsx
new file mode 100644
index 0000000000..b97d57de4e
--- /dev/null
+++ b/frontend/editor/src/portal-saas/auth/PortalAuthBoundary.tsx
@@ -0,0 +1,61 @@
+import { useEffect, type ReactNode } from "react";
+import { AuthProvider } from "@app/auth";
+import { useAuth } from "@app/auth/context";
+import { Spinner } from "@app/ui";
+import { ensureSaasSupabase } from "@portal/auth/saasSupabase";
+
+function FullScreen({ children }: { children: ReactNode }) {
+  return (
+    
    
+      {children}
+    
    
+  );
+}
+
+/**
+ * SaaS gate: viewing your own usage is not admin-gated, so require only a session
+ * (not portalAccess). No session → bounce to the editor's Supabase login, which
+ * returns here signed in. This is deliberately laxer than the self-hosted
+ * RequirePortalAccess admin gate.
+ */
+function SaasPortalGate({ children }: { children: ReactNode }) {
+  const { session, loading } = useAuth();
+  useEffect(() => {
+    if (!loading && !session) {
+      window.location.href = "/login";
+    }
+  }, [loading, session]);
+  if (loading || !session) {
+    return (
+      
+        
+      
+    );
+  }
+  return <>{children};
+}
+
+/**
+ * SaaS override of the portal auth boundary: authenticate against the SaaS Supabase
+ * project (inheriting the editor's session) instead of the self-hosted Spring login.
+ */
+export function PortalAuthBoundary({ children }: { children: ReactNode }) {
+  // Configure the shared Supabase client (SaaS project) synchronously here, before
+  // the AuthProvider below reads it — a useEffect would run too late for the first
+  // render, leaving the provider with a null client. Idempotent; the portal mounts
+  // outside the editor's AppProviders but against the SAME project, so a user already
+  // signed into the editor is picked up from the persisted session (no second login).
+  ensureSaasSupabase();
+  return (
+    
+      {children}
+    
+  );
+}
diff --git a/frontend/editor/src/portal-saas/components/LinkAccountFooterItem.test.tsx b/frontend/editor/src/portal-saas/components/LinkAccountFooterItem.test.tsx
new file mode 100644
index 0000000000..6f324b4cd4
--- /dev/null
+++ b/frontend/editor/src/portal-saas/components/LinkAccountFooterItem.test.tsx
@@ -0,0 +1,10 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { LinkAccountFooterItem } from "@portal/components/LinkAccountFooterItem";
+
+describe("LinkAccountFooterItem (SaaS)", () => {
+  it("renders nothing — SaaS has no account to link", () => {
+    const { container } = render();
+    expect(container).toBeEmptyDOMElement();
+  });
+});
diff --git a/frontend/editor/src/portal-saas/components/LinkAccountFooterItem.tsx b/frontend/editor/src/portal-saas/components/LinkAccountFooterItem.tsx
new file mode 100644
index 0000000000..be05e58bd6
--- /dev/null
+++ b/frontend/editor/src/portal-saas/components/LinkAccountFooterItem.tsx
@@ -0,0 +1,7 @@
+/**
+ * SaaS has no account-link concept — the signed-in account IS the SaaS account,
+ * so there is nothing to link and no footer CTA to show.
+ */
+export function LinkAccountFooterItem() {
+  return null;
+}
diff --git a/frontend/editor/src/portal-saas/components/billing/PortalBillingGate.test.tsx b/frontend/editor/src/portal-saas/components/billing/PortalBillingGate.test.tsx
new file mode 100644
index 0000000000..fa88c342c2
--- /dev/null
+++ b/frontend/editor/src/portal-saas/components/billing/PortalBillingGate.test.tsx
@@ -0,0 +1,15 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+vi.mock("@portal/views/Usage", () => ({
+  Usage: () => 
    ,
+}));
+
+import { PortalBillingGate } from "@portal/components/billing/PortalBillingGate";
+
+describe("PortalBillingGate — SaaS", () => {
+  it("renders the Usage page directly, with no link concept", () => {
+    render();
+    expect(screen.getByTestId("usage")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/editor/src/portal-saas/components/billing/PortalBillingGate.tsx b/frontend/editor/src/portal-saas/components/billing/PortalBillingGate.tsx
new file mode 100644
index 0000000000..b02c485581
--- /dev/null
+++ b/frontend/editor/src/portal-saas/components/billing/PortalBillingGate.tsx
@@ -0,0 +1,20 @@
+import { Usage } from "@portal/views/Usage";
+
+/**
+ * SaaS billing gate: there is no link concept — the signed-in account IS the SaaS
+ * account (auth is handled upstream by PortalAuthBoundary), so render the Usage
+ * page directly. No link state, no prompt.
+ *
+ * onReauth sends the user back to the editor's Supabase login if the session
+ * lapses mid-view: PortalAuthBoundary only re-gates on mount / session change, so
+ * without this a "Session expired" notice would dead-end until a manual reload.
+ */
+export function PortalBillingGate() {
+  return (
+     {
+        window.location.href = "/login";
+      }}
+    />
+  );
+}
diff --git a/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.test.ts b/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.test.ts
new file mode 100644
index 0000000000..5cc64727a1
--- /dev/null
+++ b/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.test.ts
@@ -0,0 +1,8 @@
+import { describe, expect, it } from "vitest";
+import { accountLinkSettings } from "@portal/components/settings/accountLinkSettings";
+
+describe("accountLinkSettings (SaaS)", () => {
+  it("is null — Settings has no account-link section on SaaS", () => {
+    expect(accountLinkSettings).toBeNull();
+  });
+});
diff --git a/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx b/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx
new file mode 100644
index 0000000000..6fc0af735b
--- /dev/null
+++ b/frontend/editor/src/portal-saas/components/settings/accountLinkSettings.tsx
@@ -0,0 +1,9 @@
+import type { AccountLinkSettingsSeam } from "@portal-proprietary/components/settings/accountLinkSettings";
+
+/**
+ * SaaS has no account-link concept — the signed-in account IS the SaaS account.
+ * Null drops the "Account link" nav item and its panel from Settings (the shared
+ * SettingsModal treats the seam as optional), so the link-only AccountLinkPanel
+ * is never imported into the SaaS bundle.
+ */
+export const accountLinkSettings: AccountLinkSettingsSeam | null = null;
diff --git a/frontend/editor/src/portal-saas/contexts/usePlanTier.test.tsx b/frontend/editor/src/portal-saas/contexts/usePlanTier.test.tsx
new file mode 100644
index 0000000000..d2a9666bff
--- /dev/null
+++ b/frontend/editor/src/portal-saas/contexts/usePlanTier.test.tsx
@@ -0,0 +1,35 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+
+const fetchWallet = vi.fn();
+vi.mock("@portal/api/billing", () => ({
+  fetchWallet: () => fetchWallet(),
+}));
+
+// Resolves to the SaaS override (src/portal-saas/contexts) via the @portal cascade.
+import { usePlanTier } from "@portal/contexts/usePlanTier";
+
+function Probe() {
+  return {usePlanTier()};
+}
+
+describe("usePlanTier (SaaS) — tier from wallet", () => {
+  beforeEach(() => {
+    fetchWallet.mockReset();
+  });
+
+  it("subscribed wallet → pro", async () => {
+    fetchWallet.mockResolvedValue({ status: "subscribed" });
+    const { getByTestId } = render();
+    await waitFor(() => expect(getByTestId("tier").textContent).toBe("pro"));
+  });
+
+  it("free wallet → free (also the loading default)", async () => {
+    fetchWallet.mockResolvedValue({ status: "free" });
+    const { getByTestId } = render();
+    // Free before the fetch resolves and after — it never flips to pro.
+    expect(getByTestId("tier").textContent).toBe("free");
+    await waitFor(() => expect(fetchWallet).toHaveBeenCalledTimes(1));
+    expect(getByTestId("tier").textContent).toBe("free");
+  });
+});
diff --git a/frontend/editor/src/portal-saas/contexts/usePlanTier.ts b/frontend/editor/src/portal-saas/contexts/usePlanTier.ts
new file mode 100644
index 0000000000..6b877c3640
--- /dev/null
+++ b/frontend/editor/src/portal-saas/contexts/usePlanTier.ts
@@ -0,0 +1,14 @@
+import { useAsync } from "@portal/hooks/useAsync";
+import { fetchWallet } from "@portal/api/billing";
+import type { Tier } from "@portal/contexts/TierContext";
+
+/**
+ * The plan tier the portal runs on, SaaS flavor: the signed-in account IS the
+ * SaaS account, so the tier comes straight from the wallet — no link concept.
+ * `subscribed` → the metered Processor tier; anything else (including while the
+ * wallet is still loading) → free. Enterprise stays a mocks-only tier.
+ */
+export function usePlanTier(): Tier {
+  const { data: wallet } = useAsync(() => fetchWallet(), []);
+  return wallet?.status === "subscribed" ? "pro" : "free";
+}
diff --git a/frontend/editor/src/portal-saas/contexts/usePortalLinked.test.tsx b/frontend/editor/src/portal-saas/contexts/usePortalLinked.test.tsx
new file mode 100644
index 0000000000..1368b27a4b
--- /dev/null
+++ b/frontend/editor/src/portal-saas/contexts/usePortalLinked.test.tsx
@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+// Resolves to the SaaS override (src/portal-saas/contexts) via the @portal cascade.
+import { usePortalLinked } from "@portal/contexts/usePortalLinked";
+
+function Probe() {
+  return {String(usePortalLinked())};
+}
+
+describe("usePortalLinked (SaaS)", () => {
+  it("is always true — no account-link step, no LinkProvider needed", () => {
+    // Renders with no LinkProvider in the tree: the SaaS override must not read it.
+    const { getByTestId } = render();
+    expect(getByTestId("linked").textContent).toBe("true");
+  });
+});
diff --git a/frontend/editor/src/portal-saas/contexts/usePortalLinked.ts b/frontend/editor/src/portal-saas/contexts/usePortalLinked.ts
new file mode 100644
index 0000000000..4a5355f1d9
--- /dev/null
+++ b/frontend/editor/src/portal-saas/contexts/usePortalLinked.ts
@@ -0,0 +1,9 @@
+/**
+ * SaaS flavor: the signed-in account IS the SaaS account, so the portal is always
+ * authorized — there is no account-link step. Procurement/checkout treats this as
+ * "linked" and proceeds straight to the flow. No LinkContext dependency, so the
+ * link machinery stays out of the SaaS bundle.
+ */
+export function usePortalLinked(): boolean {
+  return true;
+}
diff --git a/frontend/editor/src/portal/PortalApp.tsx b/frontend/editor/src/portal/PortalApp.tsx
index 629a8ac57a..d14892363e 100644
--- a/frontend/editor/src/portal/PortalApp.tsx
+++ b/frontend/editor/src/portal/PortalApp.tsx
@@ -1,25 +1,8 @@
-import { useEffect, type ReactNode } from "react";
-import { useLocation } from "react-router-dom";
-import { AuthProvider } from "@app/auth";
-import { ErrorBoundary } from "@portal/components/ErrorBoundary";
+import { type ReactNode } from "react";
+import { PortalAuthBoundary } from "@portal/auth/PortalAuthBoundary";
 import { ThemeProvider, useTheme } from "@portal/contexts/ThemeContext";
-import { TierProvider } from "@portal/contexts/TierContext";
-import { LinkProvider, useLink } from "@portal/contexts/LinkContext";
-import type { SupabaseLoginSession } from "@app/auth/ui/useSupabaseLogin";
-import { UIProvider, useUI } from "@portal/contexts/UIContext";
 import { SuiProvider } from "@portal/theme/SuiProvider";
-import { AppShell } from "@portal/components/AppShell";
-import { AuthGate } from "@portal/components/AuthGate";
-import { AssistantButton } from "@portal/components/AssistantButton";
-import { AssistantPanel } from "@portal/components/AssistantPanel";
-import { SearchModal } from "@portal/components/SearchModal";
-import { SettingsModal } from "@portal/components/SettingsModal";
-import { LinkAccountModal } from "@portal/components/account-link/LinkAccountModal";
-import {
-  AccountLinkProvider,
-  useAccountLinkContext,
-} from "@portal/contexts/AccountLinkContext";
-import { ViewRouter } from "@portal/ViewRouter";
+import { PortalProviders } from "@portal/PortalProviders";
 // Reset + typography, scoped to .portal-scope below.
 import "@portal/theme/base.css";
 
@@ -33,93 +16,15 @@ function ThemedSuiProvider({ children }: { children: ReactNode }) {
   return {children};
 }
 
-/**
- * Global keyboard shortcuts. Lives below the UIProvider so it can dispatch
- * into the overlay state. Currently just ⌘K / Ctrl+K to toggle the search
- * palette.
- */
-function GlobalShortcuts() {
-  const { toggleSearch, closeSearch } = useUI();
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
-      if (isCmdK) {
-        e.preventDefault();
-        toggleSearch();
-        return;
-      }
-      if (e.key === "Escape") {
-        closeSearch();
-      }
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [toggleSearch, closeSearch]);
-
-  return null;
-}
-
-/** Bridges the Settings modal's open/close props to UIContext state. */
-function SettingsHost() {
-  const { settingsOpen, settingsInitialSection, closeSettings } = useUI();
-  return (
-    
-  );
-}
-
-/**
- * The one and only account-link login modal. Mounted at the app root (never
- * nested in another overlay) and driven by UIContext, so any "Link account" CTA
- * — sidebar, billing prompt, feature gate, Settings panel — opens this exact
- * instance. Linking is finished by the shared {@link useAccountLinkContext}
- * orchestration.
- */
-function LinkModalHost() {
-  const { linkModalOpen, linkModalMode, closeLinkModal } = useUI();
-  const { markSaasSessionChanged } = useLink();
-  const link = useAccountLinkContext();
-  // "reauth" only refreshes the browser SaaS session for attended reads — the
-  // sign-in already applied it to the Supabase client, so we just signal a
-  // refetch. It must NOT call completeLink (that re-registers → duplicate row).
-  const onLinked =
-    linkModalMode === "reauth"
-      ? () => markSaasSessionChanged()
-      : (session: SupabaseLoginSession) => link.completeLink(session);
-  return (
-    
-  );
-}
-
-/**
- * The routed view, wrapped in an error boundary so a single view crashing can't
- * white-screen the portal (the shell + nav stay alive). Keyed by route so
- * navigating to another section clears any error from the previous one.
- */
-function RoutedContent() {
-  const { pathname } = useLocation();
-  return (
-    
-      
-    
-  );
-}
-
 /**
  * The portal, mounted as a route-set under /portal/* inside the editor app (via
  * the admin-route seam). It supplies its own providers and its own i18next
  * instance (the `portal` namespace), but NOT a router — the editor's
  *  is the one and only router; the portal's routes are relative
  * to the /portal mount (see ViewRouter).
+ *
+ * The provider stack itself is a per-flavor seam (see {@link PortalProviders}):
+ * self-hosted mounts the account-link layer, SaaS does not.
  */
 export function PortalApp() {
   return (
@@ -127,29 +32,9 @@ export function PortalApp() {
       
         {/* Scopes base.css to the portal so it doesn't restyle the host editor. */}
         
    
-          
-            
-              {/* TierProvider sits INSIDE LinkProvider so it can derive the tier
-                from the real link/subscription state when MSW mocks are off. */}
-              
-                
-                  
-                  
-                    
-                      
-                        
-                      
-                      
-                      
-                      
-                      
-                      
-                    
-                  
-                
-              
-            
-          
+          
+            
+          
         
    
           
     
diff --git a/frontend/editor/src/portal/PortalProviders.tsx b/frontend/editor/src/portal/PortalProviders.tsx
new file mode 100644
index 0000000000..f03092fde8
--- /dev/null
+++ b/frontend/editor/src/portal/PortalProviders.tsx
@@ -0,0 +1,63 @@
+import { TierProvider } from "@portal/contexts/TierContext";
+import { LinkProvider, useLink } from "@portal/contexts/LinkContext";
+import { UIProvider, useUI } from "@portal/contexts/UIContext";
+import type { SupabaseLoginSession } from "@app/auth/ui/useSupabaseLogin";
+import { LinkAccountModal } from "@portal/components/account-link/LinkAccountModal";
+import {
+  AccountLinkProvider,
+  useAccountLinkContext,
+} from "@portal/contexts/AccountLinkContext";
+import { PortalChrome } from "@portal/components/PortalChrome";
+
+/**
+ * The one and only account-link login modal. Mounted at the app root (never
+ * nested in another overlay) and driven by UIContext, so any "Link account" CTA
+ * — sidebar, billing prompt, feature gate, Settings panel — opens this exact
+ * instance. Linking is finished by the shared {@link useAccountLinkContext}
+ * orchestration.
+ */
+function LinkModalHost() {
+  const { linkModalOpen, linkModalMode, closeLinkModal } = useUI();
+  const { markSaasSessionChanged } = useLink();
+  const link = useAccountLinkContext();
+  // "reauth" only refreshes the browser SaaS session for attended reads — the
+  // sign-in already applied it to the Supabase client, so we just signal a
+  // refetch. It must NOT call completeLink (that re-registers → duplicate row).
+  const onLinked =
+    linkModalMode === "reauth"
+      ? () => markSaasSessionChanged()
+      : (session: SupabaseLoginSession) => link.completeLink(session);
+  return (
+    
+  );
+}
+
+/**
+ * Self-hosted provider stack. The account-link layer (LinkProvider +
+ * AccountLinkProvider + the login modal) wraps the shared chrome; the tier is
+ * derived from the link/subscription state (see usePlanTier). TierProvider sits
+ * inside LinkProvider because the self-hosted usePlanTier reads useLink.
+ *
+ * The SaaS build shadows this file to drop the account-link layer entirely — the
+ * signed-in account IS the SaaS account, so there is nothing to link and the
+ * tier comes from the wallet.
+ */
+export function PortalProviders() {
+  return (
+    
+      
+        
+          
+            
+            
+          
+        
+      
+    
+  );
+}
diff --git a/frontend/editor/src/portal/ViewRouter.tsx b/frontend/editor/src/portal/ViewRouter.tsx
index 2b09a24507..62502e6c67 100644
--- a/frontend/editor/src/portal/ViewRouter.tsx
+++ b/frontend/editor/src/portal/ViewRouter.tsx
@@ -9,7 +9,7 @@ import { Policies } from "@portal/views/Policies";
 import { Components } from "@portal/views/Components";
 import { EditorAdmin } from "@portal/views/EditorAdmin";
 import { Infrastructure } from "@portal/views/Infrastructure";
-import { Usage } from "@portal/views/Usage";
+import { PortalBillingGate } from "@portal/components/billing/PortalBillingGate";
 import { DeveloperDocs } from "@portal/views/DeveloperDocs";
 import { Procurement } from "@portal/views/Procurement";
 import { VIEW_PATHS, toPortalPath } from "@portal/contexts/ViewContext";
@@ -39,7 +39,7 @@ export function ViewRouter() {
         path={rel(VIEW_PATHS.infrastructure)}
         element={}
       />
-      } />
+      } />
       } />
       } />
       {/* Account-link is now a Settings panel; redirect legacy bookmarks home. */}
diff --git a/frontend/editor/src/portal/api/http.ts b/frontend/editor/src/portal/api/http.ts
index 9f7b28da03..2dfa914890 100644
--- a/frontend/editor/src/portal/api/http.ts
+++ b/frontend/editor/src/portal/api/http.ts
@@ -40,14 +40,17 @@
  * admin and uses the Supabase JWT for SaaS reads. Don't add it here.
  */
 import { clearStoredToken, getStoredToken } from "@app/auth";
-import { getSupabaseClient } from "@app/auth/supabase/supabaseClient";
-import { ensureSaasSupabase } from "@portal/auth/saasSupabase";
+import { getPortalSaasToken } from "@portal/auth/portalSaasSession";
+import { saasApiBase } from "@portal/api/saasApiBase";
 
-/** Read the SaaS base URL at call time so tests can stub it via vi.stubEnv. */
+/**
+ * SaaS base URL via the flavor seam: self-hosted reads VITE_SAAS_API_URL (a
+ * separate cloud backend); the SaaS build reuses the editor's single
+ * VITE_API_BASE_URL (in SaaS everything is the SaaS backend). {@code null} means
+ * not configured — a self-hosted-only state; the SaaS seam never returns null.
+ */
 function saasBaseUrl(): string | null {
-  const raw = import.meta.env.VITE_SAAS_API_URL;
-  if (!raw) return null;
-  return raw.replace(/\/+$/, "");
+  return saasApiBase();
 }
 
 export interface HttpRequestOptions {
@@ -169,21 +172,14 @@ async function localJson(
 // saas — hosted SaaS Java, admin's Supabase JWT
 // ────────────────────────────────────────────────────────────────────────────
 
-async function getSaasAccessToken(): Promise {
-  ensureSaasSupabase();
-  const supabase = getSupabaseClient();
-  if (!supabase) return null;
-  const { data } = await supabase.auth.getSession();
-  return data.session?.access_token ?? null;
-}
-
 async function saasJson(
   path: string,
   options: HttpRequestOptions = {},
 ): Promise {
   const base = saasBaseUrl();
-  if (!base) throw new SaasUnconfiguredError();
-  const token = await getSaasAccessToken();
+  // null = unset (self-hosted, no VITE_SAAS_API_URL). "" is same-origin (SaaS) — valid.
+  if (base === null) throw new SaasUnconfiguredError();
+  const token = await getPortalSaasToken();
   if (!token) throw new SaasNotLinkedError();
   const res = await fetch(`${base}${path}`, {
     method: options.method ?? "GET",
@@ -213,7 +209,7 @@ export const apiClient = {
   /** Hosted SaaS Java. Admin's Supabase JWT auto-attached. */
   saas: {
     json: saasJson,
-    /** True when VITE_SAAS_API_URL is set. Doesn't check session liveness. */
-    isConfigured: (): boolean => Boolean(saasBaseUrl()),
+    /** True when a SaaS base URL is resolvable. Doesn't check session liveness. */
+    isConfigured: (): boolean => saasBaseUrl() !== null,
   },
 } as const;
diff --git a/frontend/editor/src/portal/api/saasApiBase.ts b/frontend/editor/src/portal/api/saasApiBase.ts
new file mode 100644
index 0000000000..3514ac3c79
--- /dev/null
+++ b/frontend/editor/src/portal/api/saasApiBase.ts
@@ -0,0 +1,18 @@
+/**
+ * Base URL for attended portal→SaaS reads ({@code apiClient.saas}) — the seam the
+ * SaaS build overrides.
+ *
+ * 
    Self-hosted (this base): the SaaS cloud is a separate backend from
+ * this instance's local one, configured via {@code VITE_SAAS_API_URL}. Returns
+ * {@code null} when unset so {@code apiClient.saas} can surface a clear
+ * "configure" state. A set value has any trailing slash trimmed.
+ *
+ * 
    The SaaS build shadows this to reuse the editor's single backend
+ * ({@code VITE_API_BASE_URL}) — in SaaS everything is the SaaS backend, so there
+ * is no separate SaaS URL.
+ */
+export function saasApiBase(): string | null {
+  const raw = import.meta.env.VITE_SAAS_API_URL;
+  if (!raw) return null;
+  return raw.replace(/\/+$/, "");
+}
diff --git a/frontend/editor/src/portal/auth/PortalAuthBoundary.tsx b/frontend/editor/src/portal/auth/PortalAuthBoundary.tsx
new file mode 100644
index 0000000000..df24718eda
--- /dev/null
+++ b/frontend/editor/src/portal/auth/PortalAuthBoundary.tsx
@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { AuthProvider } from "@app/auth";
+import { AuthGate } from "@portal/components/AuthGate";
+
+/**
+ * Portal auth wiring — the seam the SaaS build overrides.
+ *
+ * 
    Self-hosted (this base): the portal is its own standalone app, so it owns a
+ * Spring {@link AuthProvider} and a Spring login gate ({@link AuthGate}). The SaaS
+ * build shadows this file to authenticate against the SaaS Supabase project (the
+ * same session the editor uses) with no Spring login and no account-link step.
+ */
+export function PortalAuthBoundary({ children }: { children: ReactNode }) {
+  return (
+    
+      {children}
+    
+  );
+}
diff --git a/frontend/editor/src/portal/auth/portalSaasSession.test.ts b/frontend/editor/src/portal/auth/portalSaasSession.test.ts
new file mode 100644
index 0000000000..1b12358b38
--- /dev/null
+++ b/frontend/editor/src/portal/auth/portalSaasSession.test.ts
@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Hoisted so the vi.mock factories can reference it before the import runs.
+const { state } = vi.hoisted(() => ({
+  state: { client: null as { auth: { getSession: () => unknown } } | null },
+}));
+
+vi.mock("@app/auth/supabase/supabaseClient", () => ({
+  getSupabaseClient: () => state.client,
+}));
+vi.mock("@portal/auth/saasSupabase", () => ({
+  ensureSaasSupabase: vi.fn(),
+}));
+
+import { getPortalSaasToken } from "@portal/auth/portalSaasSession";
+
+describe("getPortalSaasToken — self-hosted (account-link login)", () => {
+  beforeEach(() => {
+    state.client = null;
+  });
+
+  it("returns null when the SaaS client isn't configured (not signed in)", async () => {
+    expect(await getPortalSaasToken()).toBeNull();
+  });
+
+  it("returns the access token from the current session", async () => {
+    state.client = {
+      auth: {
+        getSession: async () => ({
+          data: { session: { access_token: "tok-123" } },
+        }),
+      },
+    };
+    expect(await getPortalSaasToken()).toBe("tok-123");
+  });
+
+  it("returns null when there is a client but no active session", async () => {
+    state.client = {
+      auth: { getSession: async () => ({ data: { session: null } }) },
+    };
+    expect(await getPortalSaasToken()).toBeNull();
+  });
+});
diff --git a/frontend/editor/src/portal/auth/portalSaasSession.ts b/frontend/editor/src/portal/auth/portalSaasSession.ts
new file mode 100644
index 0000000000..eb75cc7650
--- /dev/null
+++ b/frontend/editor/src/portal/auth/portalSaasSession.ts
@@ -0,0 +1,19 @@
+import { getSupabaseClient } from "@app/auth/supabase/supabaseClient";
+import { ensureSaasSupabase } from "@portal/auth/saasSupabase";
+
+/**
+ * SaaS access token for attended portal→SaaS reads. Reads the shared Supabase
+ * client, which {@link ensureSaasSupabase} configures against the one Stirling
+ * Supabase project (VITE_SUPABASE_*) both flavors talk to: self-hosted mints a
+ * SaaS JWT in-app for account-linking (alongside its own Spring session); SaaS is
+ * already signed into that same project, so the editor session is inherited.
+ * Flavor-agnostic — no per-flavor override needed. Returns null until a session
+ * exists.
+ */
+export async function getPortalSaasToken(): Promise {
+  ensureSaasSupabase();
+  const supabase = getSupabaseClient();
+  if (!supabase) return null;
+  const { data } = await supabase.auth.getSession();
+  return data.session?.access_token ?? null;
+}
diff --git a/frontend/editor/src/portal/auth/saasSupabase.test.ts b/frontend/editor/src/portal/auth/saasSupabase.test.ts
new file mode 100644
index 0000000000..b748cdd150
--- /dev/null
+++ b/frontend/editor/src/portal/auth/saasSupabase.test.ts
@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// Mock only the low-level client factory — NOT ensureSaasSupabase itself — so this
+// exercises the real configurator and proves it wires the shared client from the
+// one Stirling Supabase env (VITE_SUPABASE_*), shared by every flavor.
+const configureSupabase = vi.fn();
+const getSupabaseClient = vi.fn(() => ({ __client: true }));
+vi.mock("@app/auth/supabase/supabaseClient", () => ({
+  configureSupabase,
+  getSupabaseClient,
+}));
+
+describe("ensureSaasSupabase — configures the shared client from VITE_SUPABASE_*", () => {
+  afterEach(() => {
+    vi.resetModules();
+    vi.unstubAllEnvs();
+    configureSupabase.mockClear();
+    getSupabaseClient.mockClear();
+  });
+
+  it("configures from VITE_SUPABASE_* and returns the client", async () => {
+    vi.stubEnv("VITE_SUPABASE_URL", "https://proj.supabase.co");
+    vi.stubEnv("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY", "anon-key");
+    // Dynamic import so the module reads the stubbed env at load.
+    const { ensureSaasSupabase, isSaasSupabaseConfigured } =
+      await import("@portal/auth/saasSupabase");
+    expect(isSaasSupabaseConfigured).toBe(true);
+    const client = ensureSaasSupabase();
+    expect(configureSupabase).toHaveBeenCalledWith({
+      url: "https://proj.supabase.co",
+      key: "anon-key",
+    });
+    expect(client).not.toBeNull();
+  });
+
+  it("stays unconfigured (client null) when the Supabase env is absent", async () => {
+    vi.stubEnv("VITE_SUPABASE_URL", "");
+    vi.stubEnv("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY", "");
+    const { ensureSaasSupabase, isSaasSupabaseConfigured } =
+      await import("@portal/auth/saasSupabase");
+    expect(isSaasSupabaseConfigured).toBe(false);
+    expect(ensureSaasSupabase()).toBeNull();
+    expect(configureSupabase).not.toHaveBeenCalled();
+  });
+});
diff --git a/frontend/editor/src/portal/auth/saasSupabase.ts b/frontend/editor/src/portal/auth/saasSupabase.ts
index 813a2f7cad..ff3ad71b8b 100644
--- a/frontend/editor/src/portal/auth/saasSupabase.ts
+++ b/frontend/editor/src/portal/auth/saasSupabase.ts
@@ -4,18 +4,21 @@ import {
 } from "@app/auth/supabase/supabaseClient";
 
 /**
- * Configures the shared Supabase client against the hosted SaaS project so the
- * portal can mint a SaaS JWT IN-APP for account linking (no popup). This is a
+ * Configures the shared Supabase client against the Stirling Supabase project so
+ * the portal can mint a SaaS JWT IN-APP for account linking (no popup). This is a
  * separate, transient SaaS auth — the portal's own session stays Spring (the
  * local instance admin); calls to the local backend still carry the Spring
  * bearer, and the SaaS JWT is passed only in the link request body.
  *
- * Config: VITE_SAAS_SUPABASE_URL + VITE_SAAS_SUPABASE_ANON_KEY (both public).
- * Absent → {@link isSaasSupabaseConfigured} is false and the link UI degrades to
- * a "configure the SaaS Supabase URL" state.
+ * Config: VITE_SUPABASE_URL + VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY (both public)
+ * — the one Stirling Supabase project every flavor talks to (same vars the editor
+ * and proprietary billing client use; there is no separate SaaS project). SaaS
+ * needs no per-flavor override: the signed-in editor session is on this same
+ * project, so the client picks it up. Absent → {@link isSaasSupabaseConfigured}
+ * is false and the link UI degrades to a "configure Supabase" state.
  */
-const url = import.meta.env.VITE_SAAS_SUPABASE_URL;
-const key = import.meta.env.VITE_SAAS_SUPABASE_ANON_KEY;
+const url = import.meta.env.VITE_SUPABASE_URL;
+const key = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
 
 export const isSaasSupabaseConfigured = Boolean(url && key);
 
diff --git a/frontend/editor/src/portal/billing/stripe.ts b/frontend/editor/src/portal/billing/stripe.ts
index 91e0290d72..930ed3fef3 100644
--- a/frontend/editor/src/portal/billing/stripe.ts
+++ b/frontend/editor/src/portal/billing/stripe.ts
@@ -71,7 +71,7 @@ async function invoke(
   const supabase = getSupabaseClient();
   if (!supabase) {
     throw new StripeFunctionError(
-      "SaaS Supabase not configured — set VITE_SAAS_SUPABASE_URL.",
+      "SaaS Supabase not configured — set VITE_SUPABASE_URL.",
       "unconfigured",
     );
   }
diff --git a/frontend/editor/src/portal/components/LinkAccountFooterItem.tsx b/frontend/editor/src/portal/components/LinkAccountFooterItem.tsx
new file mode 100644
index 0000000000..fd3e9d96a0
--- /dev/null
+++ b/frontend/editor/src/portal/components/LinkAccountFooterItem.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+import { NavItem } from "@app/ui";
+import { useUI } from "@portal/contexts/UIContext";
+import { useLink } from "@portal/contexts/LinkContext";
+import { LinkIcon } from "@portal/components/icons";
+
+/**
+ * Sidebar-footer link-account CTA. Only visible when the org is unlinked — once
+ * linked, the linked-instances row + plan badge already communicate the state,
+ * so a permanent footer button would be noise. Click → opens the login modal
+ * directly. The SaaS build shadows this file with a no-op: the signed-in account
+ * IS the SaaS account, so there is nothing to link.
+ */
+export function LinkAccountFooterItem() {
+  const { t } = useTranslation();
+  const { openLinkModal } = useUI();
+  const { linkState } = useLink();
+  if (linkState !== "unlinked") return null;
+  return (
+    }
+      onClick={() => openLinkModal()}
+    />
+  );
+}
diff --git a/frontend/editor/src/portal/components/PortalChrome.tsx b/frontend/editor/src/portal/components/PortalChrome.tsx
new file mode 100644
index 0000000000..9e2ed8d359
--- /dev/null
+++ b/frontend/editor/src/portal/components/PortalChrome.tsx
@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { ErrorBoundary } from "@portal/components/ErrorBoundary";
+import { useUI } from "@portal/contexts/UIContext";
+import { AppShell } from "@portal/components/AppShell";
+import { AssistantButton } from "@portal/components/AssistantButton";
+import { AssistantPanel } from "@portal/components/AssistantPanel";
+import { SearchModal } from "@portal/components/SearchModal";
+import { SettingsModal } from "@portal/components/SettingsModal";
+import { ViewRouter } from "@portal/ViewRouter";
+
+/**
+ * Global keyboard shortcuts. Lives below the UIProvider so it can dispatch into
+ * the overlay state. Currently just ⌘K / Ctrl+K to toggle the search palette.
+ */
+function GlobalShortcuts() {
+  const { toggleSearch, closeSearch } = useUI();
+
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      const isCmdK = (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k";
+      if (isCmdK) {
+        e.preventDefault();
+        toggleSearch();
+        return;
+      }
+      if (e.key === "Escape") {
+        closeSearch();
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [toggleSearch, closeSearch]);
+
+  return null;
+}
+
+/** Bridges the Settings modal's open/close props to UIContext state. */
+function SettingsHost() {
+  const { settingsOpen, settingsInitialSection, closeSettings } = useUI();
+  return (
+    
+  );
+}
+
+/**
+ * The routed view, wrapped in an error boundary so a single view crashing can't
+ * white-screen the portal (the shell + nav stay alive). Keyed by route so
+ * navigating to another section clears any error from the previous one.
+ */
+function RoutedContent() {
+  const { pathname } = useLocation();
+  return (
+    
+      
+    
+  );
+}
+
+/**
+ * The flavor-agnostic portal chrome: the shell (sidebar + header + routed view)
+ * plus the global overlays that every flavor shares. Requires only the Tier and
+ * UI contexts above it — both flavors provide those. Flavor-specific overlays
+ * (e.g. the self-hosted account-link modal) are mounted by PortalProviders, not
+ * here.
+ */
+export function PortalChrome() {
+  return (
+    <>
+      
+      
+        
+      
+      
+      
+      
+      
+    
+  );
+}
diff --git a/frontend/editor/src/portal/components/SettingsModal.tsx b/frontend/editor/src/portal/components/SettingsModal.tsx
index 3073d243f0..eb2380a9a9 100644
--- a/frontend/editor/src/portal/components/SettingsModal.tsx
+++ b/frontend/editor/src/portal/components/SettingsModal.tsx
@@ -31,9 +31,8 @@ import {
   PoliciesIcon,
   InfrastructureIcon,
   SparklesIcon,
-  LinkIcon,
 } from "@portal/components/icons";
-import { AccountLinkPanel } from "@portal/components/account-link/AccountLinkPanel";
+import { accountLinkSettings } from "@portal/components/settings/accountLinkSettings";
 import "@portal/components/SettingsModal.css";
 
 type SettingsSection =
@@ -150,11 +149,17 @@ export function SettingsModal({
       {
         title: t("portal.settings.groups.admin"),
         items: [
-          {
-            key: "account-link",
-            label: t("portal.settings.sections.account-link"),
-            icon: ,
-          },
+          // Account-link is a self-hosted-only section; the SaaS build shadows
+          // the seam to null, dropping the item entirely.
+          ...(accountLinkSettings
+            ? [
+                {
+                  key: accountLinkSettings.navKey,
+                  label: t(accountLinkSettings.labelKey),
+                  icon: accountLinkSettings.icon,
+                },
+              ]
+            : []),
           {
             key: "authentication",
             label: t("portal.settings.sections.authentication"),
@@ -337,7 +342,9 @@ export function SettingsModal({
           />
         )}
 
-        {section === "account-link" && }
+        {section === "account-link" && accountLinkSettings && (
+          
+        )}
       
     
   );
diff --git a/frontend/editor/src/portal/components/Sidebar.tsx b/frontend/editor/src/portal/components/Sidebar.tsx
index 675e48561f..486611248b 100644
--- a/frontend/editor/src/portal/components/Sidebar.tsx
+++ b/frontend/editor/src/portal/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { useView, type ViewId } from "@portal/contexts/ViewContext";
 import { useTier } from "@portal/contexts/TierContext";
 import { useTheme } from "@portal/contexts/ThemeContext";
 import { useUI } from "@portal/contexts/UIContext";
-import { useLink } from "@portal/contexts/LinkContext";
+import { LinkAccountFooterItem } from "@portal/components/LinkAccountFooterItem";
 import { useAsync } from "@portal/hooks/useAsync";
 import { fetchHomeKpis, type KpiEntry } from "@portal/api/home";
 import { EDITOR_URL } from "@portal/auth/editorUrl";
@@ -20,7 +20,6 @@ import {
   ComponentsIcon,
   InfrastructureIcon,
   UsageIcon,
-  LinkIcon,
   DocsIcon,
   SettingsIcon,
   ChevronDownIcon,
@@ -49,27 +48,6 @@ const GROUP_PLATFORM: NavEntry[] = [
   { id: "docs", icon:  },
 ];
 
-/**
- * Sidebar-footer link-account CTA. Only visible when the org is unlinked — once
- * linked, the linked-instances row + plan badge already communicate the state,
- * so a permanent footer button would be noise. Click → opens the login modal
- * directly.
- */
-function LinkAccountFooterItem() {
-  const { t } = useTranslation();
-  const { openLinkModal } = useUI();
-  const { linkState } = useLink();
-  if (linkState !== "unlinked") return null;
-  return (
-    }
-      onClick={() => openLinkModal()}
-    />
-  );
-}
-
 function UsageFooter() {
   const { tier } = useTier();
   const { t } = useTranslation();
diff --git a/frontend/editor/src/portal/components/account-link/LinkAccountCard.tsx b/frontend/editor/src/portal/components/account-link/LinkAccountCard.tsx
index fa79ed2c72..af43640905 100644
--- a/frontend/editor/src/portal/components/account-link/LinkAccountCard.tsx
+++ b/frontend/editor/src/portal/components/account-link/LinkAccountCard.tsx
@@ -49,7 +49,7 @@ export function LinkAccountCard({ link }: Props) {
           )}
         >
           {t("portal.accountLink.card.loginNotConfigured.before", "Set")}{" "}
-          VITE_SAAS_SUPABASE_URL{" "}
+          VITE_SUPABASE_URL{" "}
           {t(
             "portal.accountLink.card.loginNotConfigured.after",
             "to enable account linking against the hosted Stirling account. In dev you can simulate sign-in from the link dialog.",
diff --git a/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx b/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx
index 3f8da872c8..e46504d309 100644
--- a/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx
+++ b/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx
@@ -96,9 +96,9 @@ export function LinkAccountModal({
             )}
           >
             {t("portal.accountLink.modal.loginNotConfigured.before", "Set")}{" "}
-            VITE_SAAS_SUPABASE_URL{" "}
+            VITE_SUPABASE_URL{" "}
             {t("portal.accountLink.modal.loginNotConfigured.and", "and")}{" "}
-            VITE_SAAS_SUPABASE_ANON_KEY{" "}
+            VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY{" "}
             {t(
               "portal.accountLink.modal.loginNotConfigured.after",
               "to enable in-app linking against the hosted Stirling account.",
diff --git a/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx b/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx
new file mode 100644
index 0000000000..f15d8ade51
--- /dev/null
+++ b/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx
@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+const linkState = { isLinked: false };
+vi.mock("@portal/contexts/LinkContext", () => ({
+  useLink: () => linkState,
+  useApplyLinkFacts: () => vi.fn(),
+}));
+vi.mock("@portal/contexts/UIContext", () => ({
+  useUI: () => ({ openLinkModal: vi.fn() }),
+}));
+vi.mock("@portal/components/billing/LinkAccountPrompt", () => ({
+  LinkAccountPrompt: () => 
    ,
+}));
+vi.mock("@portal/views/Usage", () => ({
+  Usage: () => 
    ,
+}));
+
+import { PortalBillingGate } from "@portal/components/billing/PortalBillingGate";
+
+describe("PortalBillingGate — self-hosted", () => {
+  beforeEach(() => {
+    linkState.isLinked = false;
+  });
+
+  it("shows the link prompt when unlinked (billing gated on link)", () => {
+    linkState.isLinked = false;
+    render();
+    expect(screen.getByTestId("link-prompt")).toBeInTheDocument();
+    expect(screen.queryByTestId("usage")).not.toBeInTheDocument();
+  });
+
+  it("renders the Usage page once linked", () => {
+    linkState.isLinked = true;
+    render();
+    expect(screen.getByTestId("usage")).toBeInTheDocument();
+    expect(screen.queryByTestId("link-prompt")).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/editor/src/portal/components/billing/PortalBillingGate.tsx b/frontend/editor/src/portal/components/billing/PortalBillingGate.tsx
new file mode 100644
index 0000000000..e448cfb93a
--- /dev/null
+++ b/frontend/editor/src/portal/components/billing/PortalBillingGate.tsx
@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+import { useApplyLinkFacts, useLink } from "@portal/contexts/LinkContext";
+import { useUI } from "@portal/contexts/UIContext";
+import { LinkAccountPrompt } from "@portal/components/billing/LinkAccountPrompt";
+import { Usage } from "@portal/views/Usage";
+import type { Wallet } from "@portal/api/billing";
+
+/**
+ * Billing access gate — the seam the SaaS build overrides.
+ *
+ * 
    Self-hosted (this base): billing only makes sense once the instance has
+ * linked its SaaS account, so gate on link state — unlinked shows the link prompt;
+ * linked renders the (flavor-agnostic) Usage page and maps its callbacks onto the
+ * link/tier dimension: the wallet's subscription status refines the plan/tier
+ * badge, and a lapsed SaaS session re-opens the account-link re-auth. This keeps
+ * the "link" concept entirely out of the Usage page. The SaaS build shadows this
+ * with a passthrough — there is no linking there.
+ */
+export function PortalBillingGate() {
+  const { isLinked } = useLink();
+  const applyLinkFacts = useApplyLinkFacts();
+  const { openLinkModal } = useUI();
+
+  const onWalletLoaded = useCallback(
+    (w: Wallet) => applyLinkFacts(true, w.status === "subscribed"),
+    [applyLinkFacts],
+  );
+  const onReauth = useCallback(() => openLinkModal("reauth"), [openLinkModal]);
+
+  if (!isLinked) return ;
+  return ;
+}
diff --git a/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx b/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx
index 3c0498b71b..641bd55599 100644
--- a/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx
+++ b/frontend/editor/src/portal/components/procurement/ProcurementHome.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Banner, Button, Card, EmptyState, Skeleton } from "@app/ui";
-import { useLink } from "@portal/contexts/LinkContext";
+import { usePortalLinked } from "@portal/contexts/usePortalLinked";
 import { useUI } from "@portal/contexts/UIContext";
 import { useView } from "@portal/contexts/ViewContext";
 import { useAsync } from "@portal/hooks/useAsync";
@@ -46,7 +46,7 @@ import "@portal/views/Procurement.css";
  */
 export function ProcurementHome({ autoOpen = false }: { autoOpen?: boolean }) {
   const { t } = useTranslation();
-  const { isLinked } = useLink();
+  const isLinked = usePortalLinked();
   const { openLinkModal } = useUI();
   const { setActiveView } = useView();
 
diff --git a/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx b/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx
new file mode 100644
index 0000000000..8e769672d7
--- /dev/null
+++ b/frontend/editor/src/portal/components/settings/accountLinkSettings.tsx
@@ -0,0 +1,26 @@
+import type { ComponentType, ReactNode } from "react";
+import { LinkIcon } from "@portal/components/icons";
+import { AccountLinkPanel } from "@portal/components/account-link/AccountLinkPanel";
+
+export interface AccountLinkSettingsSeam {
+  /** Section key in the Settings nav + body switch. */
+  navKey: string;
+  /** i18n key for the nav label; resolved with `t()` at the call site. */
+  labelKey: string;
+  icon: ReactNode;
+  /** The section body — the account-link panel. */
+  Body: ComponentType;
+}
+
+/**
+ * The admin "Account link" section of Settings (self-hosted only). The SaaS
+ * build shadows this file with `null`: the signed-in account IS the SaaS
+ * account, so there is no instance to link — the nav item and its panel both
+ * drop out, and nothing imports the link-only AccountLinkPanel.
+ */
+export const accountLinkSettings: AccountLinkSettingsSeam | null = {
+  navKey: "account-link",
+  labelKey: "portal.settings.sections.account-link",
+  icon: ,
+  Body: AccountLinkPanel,
+};
diff --git a/frontend/editor/src/portal/contexts/TierContext.tsx b/frontend/editor/src/portal/contexts/TierContext.tsx
index 5f83159758..1b4742447b 100644
--- a/frontend/editor/src/portal/contexts/TierContext.tsx
+++ b/frontend/editor/src/portal/contexts/TierContext.tsx
@@ -7,7 +7,7 @@ import {
   type ReactNode,
 } from "react";
 import { readMocksPreference } from "@portal/mocks/preference";
-import { useLink, type LinkState } from "@portal/contexts/LinkContext";
+import { usePlanTier } from "@portal/contexts/usePlanTier";
 
 export type Tier = "free" | "pro" | "enterprise";
 
@@ -34,17 +34,6 @@ interface TierContextValue {
 
 const TierContext = createContext(null);
 
-/** Maps the real link/subscription state onto the tier the rest of the portal reads. */
-function tierFromLinkState(linkState: LinkState): Tier {
-  switch (linkState) {
-    case "linked-subscribed":
-      return "pro";
-    case "linked-free":
-    case "unlinked":
-      return "free";
-  }
-}
-
 export function TierProvider({
   children,
   initialTier = "pro",
@@ -55,28 +44,30 @@ export function TierProvider({
   // Mocks toggling reloads the page (see MocksToggle), so a single read at mount
   // is correct — the preference can't change without us remounting.
   const mocksOn = useMemo(() => readMocksPreference(), []);
-  const { linkState } = useLink();
+  // Real derived tier. Its source is a per-flavor seam: self-hosted derives it
+  // from the link/subscription state, SaaS from the wallet (see usePlanTier).
+  const derivedTier = usePlanTier();
 
   const [mockTier, setMockTier] = useState(initialTier);
 
-  // When mocks are off, mirror the real link state into the tier so any
-  // component still keyed on `tier` (sidebar plan badge, gated panels) stays
-  // consistent with the wallet. When mocks are on, the dropdown wins.
+  // When mocks are off, mirror the derived tier so any component keyed on `tier`
+  // (sidebar plan badge, gated panels) stays consistent. When mocks are on, the
+  // dropdown wins.
   useEffect(() => {
     if (!mocksOn) {
-      setMockTier(tierFromLinkState(linkState));
+      setMockTier(derivedTier);
     }
-  }, [mocksOn, linkState]);
+  }, [mocksOn, derivedTier]);
 
   const value = useMemo(
     () => ({
-      tier: mocksOn ? mockTier : tierFromLinkState(linkState),
+      tier: mocksOn ? mockTier : derivedTier,
       // Setter is a no-op when mocks are off — UI controls can disable themselves
       // via `isDerived`, but even if one slips through, it has no effect.
       setTier: mocksOn ? setMockTier : () => {},
       isDerived: !mocksOn,
     }),
-    [mocksOn, mockTier, linkState],
+    [mocksOn, mockTier, derivedTier],
   );
 
   return {children};
diff --git a/frontend/editor/src/portal/contexts/usePlanTier.test.tsx b/frontend/editor/src/portal/contexts/usePlanTier.test.tsx
new file mode 100644
index 0000000000..b89022ff92
--- /dev/null
+++ b/frontend/editor/src/portal/contexts/usePlanTier.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { LinkProvider, type LinkState } from "@portal/contexts/LinkContext";
+import { usePlanTier } from "@portal/contexts/usePlanTier";
+
+function Probe() {
+  return {usePlanTier()};
+}
+
+function renderTierFor(initialState: LinkState) {
+  return render(
+    
+      
+    ,
+  ).getByTestId("tier").textContent;
+}
+
+describe("usePlanTier (self-hosted) — tier from link state", () => {
+  it("unlinked → free", () => {
+    expect(renderTierFor("unlinked")).toBe("free");
+  });
+  it("linked-free → free", () => {
+    expect(renderTierFor("linked-free")).toBe("free");
+  });
+  it("linked-subscribed → pro", () => {
+    expect(renderTierFor("linked-subscribed")).toBe("pro");
+  });
+});
diff --git a/frontend/editor/src/portal/contexts/usePlanTier.ts b/frontend/editor/src/portal/contexts/usePlanTier.ts
new file mode 100644
index 0000000000..47598f12c3
--- /dev/null
+++ b/frontend/editor/src/portal/contexts/usePlanTier.ts
@@ -0,0 +1,24 @@
+import { useLink, type LinkState } from "@portal/contexts/LinkContext";
+import type { Tier } from "@portal/contexts/TierContext";
+
+/** Maps the self-hosted link/subscription state onto the portal tier. */
+function tierFromLinkState(linkState: LinkState): Tier {
+  switch (linkState) {
+    case "linked-subscribed":
+      return "pro";
+    case "linked-free":
+    case "unlinked":
+      return "free";
+  }
+}
+
+/**
+ * The plan tier the portal runs on, self-hosted flavor: derived from whether the
+ * org has linked its SaaS account and carries a live subscription. The SaaS
+ * build shadows this file to derive the tier from the wallet instead — there is
+ * no link concept there (see portal-saas/contexts/usePlanTier).
+ */
+export function usePlanTier(): Tier {
+  const { linkState } = useLink();
+  return tierFromLinkState(linkState);
+}
diff --git a/frontend/editor/src/portal/contexts/usePortalLinked.test.tsx b/frontend/editor/src/portal/contexts/usePortalLinked.test.tsx
new file mode 100644
index 0000000000..37f7f799b3
--- /dev/null
+++ b/frontend/editor/src/portal/contexts/usePortalLinked.test.tsx
@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { LinkProvider, type LinkState } from "@portal/contexts/LinkContext";
+import { usePortalLinked } from "@portal/contexts/usePortalLinked";
+
+function Probe() {
+  return {String(usePortalLinked())};
+}
+
+function renderLinkedFor(initialState: LinkState) {
+  return render(
+    
+      
+    ,
+  ).getByTestId("linked").textContent;
+}
+
+describe("usePortalLinked (self-hosted) — gated on the account link", () => {
+  it("unlinked → false", () => {
+    expect(renderLinkedFor("unlinked")).toBe("false");
+  });
+  it("linked-free → true", () => {
+    expect(renderLinkedFor("linked-free")).toBe("true");
+  });
+  it("linked-subscribed → true", () => {
+    expect(renderLinkedFor("linked-subscribed")).toBe("true");
+  });
+});
diff --git a/frontend/editor/src/portal/contexts/usePortalLinked.ts b/frontend/editor/src/portal/contexts/usePortalLinked.ts
new file mode 100644
index 0000000000..b7501ad128
--- /dev/null
+++ b/frontend/editor/src/portal/contexts/usePortalLinked.ts
@@ -0,0 +1,12 @@
+import { useLink } from "@portal/contexts/LinkContext";
+
+/**
+ * Whether the portal is authorized against a SaaS billing account — the gate the
+ * procurement/checkout flow uses. Self-hosted flavor: true once the instance has
+ * linked its SaaS account. The SaaS build shadows this file to return true
+ * unconditionally: the signed-in account IS the SaaS account, so there is no link
+ * step and nothing to gate on.
+ */
+export function usePortalLinked(): boolean {
+  return useLink().isLinked;
+}
diff --git a/frontend/editor/src/portal/tsconfig.json b/frontend/editor/src/portal/tsconfig.json
index 2eaab73a90..64fef64f42 100644
--- a/frontend/editor/src/portal/tsconfig.json
+++ b/frontend/editor/src/portal/tsconfig.json
@@ -3,7 +3,6 @@
   "compilerOptions": {
     "paths": {
       "@app/*": [
-        "../../src/portal/*",
         "../../src/cloud/*",
         "../../src/proprietary/*",
         "../../src/core/*"
diff --git a/frontend/editor/src/portal/views/Usage.test.tsx b/frontend/editor/src/portal/views/Usage.test.tsx
new file mode 100644
index 0000000000..1df8b0525e
--- /dev/null
+++ b/frontend/editor/src/portal/views/Usage.test.tsx
@@ -0,0 +1,67 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import type { ReactElement } from "react";
+
+// Usage renders Mantine-backed @app/ui components (e.g. the "Manage Payment"
+// Button in the subscribed header), which need a MantineProvider in the tree.
+const renderUsage = (ui: ReactElement) =>
+  render({ui});
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string, def?: string) => def ?? key,
+    i18n: { changeLanguage: vi.fn() },
+  }),
+}));
+
+const fetchWallet = vi.fn();
+const refreshWalletCache = vi.fn();
+vi.mock("@portal/api/billing", () => ({
+  fetchWallet: () => fetchWallet(),
+  refreshWalletCache: () => refreshWalletCache(),
+}));
+vi.mock("@portal/api/link", () => ({
+  fetchLocalUsage: () => Promise.resolve(null),
+  triggerLocalSync: () => Promise.resolve(),
+}));
+vi.mock("@portal/hooks/useStripePortal", () => ({
+  useStripePortal: () => ({ opening: false, open: vi.fn(), error: null }),
+}));
+// Stub the plan views so the test doesn't depend on the full wallet shape.
+vi.mock("@portal/components/billing/FreePlanView", () => ({
+  FreePlanView: () => null,
+}));
+vi.mock("@portal/components/billing/SubscribedPlanView", () => ({
+  SubscribedPlanView: () => null,
+}));
+
+import { Usage } from "@portal/views/Usage";
+
+describe("Usage — link-free wallet renderer", () => {
+  beforeEach(() => {
+    fetchWallet.mockReset();
+    refreshWalletCache.mockReset();
+  });
+
+  it("loads the wallet on mount and reports it via onWalletLoaded (no link gate)", async () => {
+    fetchWallet.mockResolvedValue({ status: "free" });
+    const onWalletLoaded = vi.fn();
+
+    renderUsage();
+
+    // Renders immediately (no link prompt / login) and loads unconditionally.
+    expect(screen.getByText("Usage & billing")).toBeInTheDocument();
+    await waitFor(() =>
+      expect(onWalletLoaded).toHaveBeenCalledWith({ status: "free" }),
+    );
+  });
+
+  it("works with no callbacks (SaaS passes none)", async () => {
+    fetchWallet.mockResolvedValue({ status: "subscribed" });
+
+    renderUsage();
+
+    await waitFor(() => expect(fetchWallet).toHaveBeenCalledTimes(1));
+  });
+});
diff --git a/frontend/editor/src/portal/views/Usage.tsx b/frontend/editor/src/portal/views/Usage.tsx
index 4a4493aa2c..776b210951 100644
--- a/frontend/editor/src/portal/views/Usage.tsx
+++ b/frontend/editor/src/portal/views/Usage.tsx
@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Banner, Button, Skeleton } from "@app/ui";
-import { useLink } from "@portal/contexts/LinkContext";
-import { useUI } from "@portal/contexts/UIContext";
 import {
   fetchWallet,
   refreshWalletCache,
@@ -14,7 +12,6 @@ import {
   type LocalUsage,
 } from "@portal/api/link";
 import { useStripePortal } from "@portal/hooks/useStripePortal";
-import { LinkAccountPrompt } from "@portal/components/billing/LinkAccountPrompt";
 import { FreePlanView } from "@portal/components/billing/FreePlanView";
 import { SubscribedPlanView } from "@portal/components/billing/SubscribedPlanView";
 import {
@@ -25,33 +22,44 @@ import {
 import "@portal/views/Usage.css";
 import "@portal/components/billing/billing.css";
 
+export interface UsageProps {
+  /**
+   * Called with the wallet whenever it loads (initial fetch + post-checkout
+   * flip). A flavor-agnostic hook the composition uses for cross-cutting state —
+   * self-hosted maps it onto the link/tier dimension; SaaS ignores it.
+   */
+  onWalletLoaded?: (wallet: Wallet) => void;
+  /**
+   * Invoked when the SaaS session has lapsed and the user chooses to re-sign-in.
+   * When omitted, the "session expired" notice shows without a sign-in action.
+   * Self-hosted wires this to its re-auth flow; SaaS leaves it unset (its session
+   * is owned by the app, so this path never triggers).
+   */
+  onReauth?: () => void;
+}
+
 /**
- * Billing & usage page. State-driven by the link/subscription dimension —
- * NOT by the legacy {@code tier} prop:
+ * Billing & usage page — a flavor-agnostic wallet renderer. Whether it should be
+ * shown at all (self-hosted only renders it once the instance is linked) is
+ * decided upstream by the billing gate; this component always loads the wallet
+ * and dispatches on {@code wallet.status}:
  *
- *   unlinked          → LinkAccountPrompt
- *   linked-free       → FreePlanView (free meter + PAYG explainer)
- *   linked-subscribed → SubscribedPlanView (period meter, cap, members,
- *                       invoices, Stripe portal)
+ *   free       → FreePlanView (free meter + PAYG explainer)
+ *   subscribed → SubscribedPlanView (period meter, cap, members, invoices)
  *
  * Wallet comes from {@code GET /api/v1/payg/wallet} (apiClient.saas). After a
- * subscription flip via Stripe checkout / cancel via the portal, the
- * onWalletChange refresh re-reads and the view re-dispatches on the new
- * status.
+ * checkout / cancel, the refresh re-reads and the view re-dispatches on status.
  */
-export function Usage() {
+export function Usage({ onWalletLoaded, onReauth }: UsageProps = {}) {
   const { t } = useTranslation();
-  const { isLinked, setLinkState, saasSessionNonce } = useLink();
-  const { openLinkModal } = useUI();
   const [wallet, setWallet] = useState(null);
   // Locally-accrued usage SaaS hasn't billed yet; added to the synced figure so
   // "current usage" reflects work since the last daily sync. Best-effort.
   const [localUsage, setLocalUsage] = useState(null);
-  const [loading, setLoading] = useState(isLinked);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
-  // The instance is linked but the browser's SaaS session has lapsed — needs a
-  // re-sign-in, NOT a re-link.
-  const [needsReauth, setNeedsReauth] = useState(false);
+  // The SaaS session has lapsed and needs a re-sign-in (self-hosted only).
+  const [sessionExpired, setSessionExpired] = useState(false);
   const [refreshKey, setRefreshKey] = useState(0);
   // Stripe customer portal — the subscribed header's "Manage Payment" action.
   const portal = useStripePortal(wallet);
@@ -65,20 +73,10 @@ export function Usage() {
   }, []);
 
   useEffect(() => {
-    // Only fetch the wallet when the instance is linked. Unlinked → render the
-    // link prompt; no SaaS call needed.
-    if (!isLinked) {
-      setWallet(null);
-      setLocalUsage(null);
-      setLoading(false);
-      setError(null);
-      setNeedsReauth(false);
-      return;
-    }
     let cancelled = false;
     setLoading(true);
     setError(null);
-    setNeedsReauth(false);
+    setSessionExpired(false);
     // Independent of the wallet load — a local-usage failure must not break the
     // page; it just means no unsynced delta is shown.
     fetchLocalUsage()
@@ -92,18 +90,13 @@ export function Usage() {
       .then((w) => {
         if (cancelled) return;
         setWallet(w);
-        // Derive the linked-free / linked-subscribed dimension from the live
-        // wallet. Only refines a `linked-*` state; never flips unlinked → linked.
-        setLinkState(
-          w.status === "subscribed" ? "linked-subscribed" : "linked-free",
-        );
+        onWalletLoaded?.(w);
       })
       .catch((e) => {
         if (cancelled) return;
         if (e instanceof SaasNotLinkedError) {
-          // Reached only when the instance IS linked (we don't fetch otherwise),
-          // so this means the attended SaaS session expired — prompt re-sign-in.
-          setNeedsReauth(true);
+          // The attended SaaS session expired — offer a re-sign-in.
+          setSessionExpired(true);
         } else if (e instanceof SaasUnconfiguredError) {
           setError(e.message);
         } else if (e instanceof HttpError) {
@@ -127,7 +120,7 @@ export function Usage() {
     return () => {
       cancelled = true;
     };
-  }, [isLinked, refreshKey, saasSessionNonce, setLinkState]);
+  }, [refreshKey, onWalletLoaded, t]);
 
   const refresh = useCallback(() => setRefreshKey((k) => k + 1), []);
 
@@ -146,9 +139,10 @@ export function Usage() {
         if (!mounted.current) return false;
         if (w.status === "subscribed") {
           setWallet(w);
-          setLinkState("linked-subscribed");
+          onWalletLoaded?.(w);
           // Nudge the local instance to refresh its gate now so billable work
-          // unblocks immediately rather than on its next poll. Fire-and-forget.
+          // unblocks immediately rather than on its next poll. Fire-and-forget;
+          // a no-op on SaaS (no local instance to sync).
           triggerLocalSync().catch(() => {});
           return true;
         }
@@ -162,7 +156,7 @@ export function Usage() {
     // shows its "almost there" notice rather than the page silently self-healing.
     setRefreshKey((k) => k + 1);
     return false;
-  }, [setLinkState]);
+  }, [onWalletLoaded]);
 
   return (
     
    
@@ -193,23 +187,23 @@ export function Usage() {
       
 
       
    
-        {!isLinked && }
-
-        {isLinked && loading && (
+        {loading && (
           
    
             
             
           
    
         )}
 
-        {isLinked && needsReauth && (
+        {sessionExpired && (
            openLinkModal("reauth")}>
-                {t("portal.usage.sessionExpired.action", "Sign in again")}
-              
+              onReauth ? (
+                
+              ) : undefined
             }
           >
             {t(
@@ -219,7 +213,7 @@ export function Usage() {
           
         )}
 
-        {isLinked && error && (
+        {error && (
           
         )}
 
-        {isLinked && portal.error && (
+        {portal.error && (
           
         )}
 
-        {isLinked && wallet && wallet.status === "free" && (
+        {wallet && wallet.status === "free" && (
           
         )}
 
-        {isLinked && wallet && wallet.status === "subscribed" && (
+        {wallet && wallet.status === "subscribed" && (
           
 
 interface ImportMetaEnv {
-  /** Hosted SaaS Supabase project URL — in-app account-link login. Empty → link UI shows a configure state. */
-  readonly VITE_SAAS_SUPABASE_URL: string;
-  /** Hosted SaaS Supabase anon/publishable key (public). */
-  readonly VITE_SAAS_SUPABASE_ANON_KEY: string;
+  /** Stirling Supabase project URL — in-app account-link login (same project every flavor uses). Empty → link UI shows a configure state. */
+  readonly VITE_SUPABASE_URL: string;
+  /** Stirling Supabase publishable/anon key (public). */
+  readonly VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY: string;
   /** Hosted SaaS Java backend base URL — attended portal→SaaS reads (wallet, invoices, …) via apiClient.saas with the admin's JWT. */
   readonly VITE_SAAS_API_URL: string;
   /** Stripe publishable key (pk_live_… / pk_test_…) used by embedded Checkout. */
diff --git a/frontend/editor/src/saas/auth/supabase.ts b/frontend/editor/src/saas/auth/supabase.ts
index ad32cfa58d..1ea68e077e 100644
--- a/frontend/editor/src/saas/auth/supabase.ts
+++ b/frontend/editor/src/saas/auth/supabase.ts
@@ -1,22 +1,10 @@
 import { createClient } from "@supabase/supabase-js";
 
-// Debug helper to log Supabase configuration
-const debugConfig = () => {
-  const url = import.meta.env.VITE_SUPABASE_URL;
-  const key = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
-
-  console.log("[Supabase Debug] Configuration:", {
-    url: url ? "✓ URL configured" : "✗ URL missing",
-    key: key ? "✓ Key configured" : "✗ Key missing",
-    urlValue: url || "undefined",
-    keyValue: key ? `${key.substring(0, 20)}...` : "undefined",
-  });
-
-  return { url, key };
+const config = {
+  url: import.meta.env.VITE_SUPABASE_URL,
+  key: import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY,
 };
 
-const config = debugConfig();
-
 if (!config.url) {
   throw new Error("Missing VITE_SUPABASE_URL environment variable");
 }
diff --git a/frontend/editor/src/saas/tsconfig.json b/frontend/editor/src/saas/tsconfig.json
index 08beefbb77..a887c3c5c5 100644
--- a/frontend/editor/src/saas/tsconfig.json
+++ b/frontend/editor/src/saas/tsconfig.json
@@ -8,11 +8,19 @@
         "../../src/proprietary/*",
         "../../src/core/*"
       ],
-      "@portal/*": ["../../src/portal/*"],
+      "@portal/*": ["../../src/portal-saas/*", "../../src/portal/*"],
+      "@portal-proprietary/*": ["../../src/portal/*"],
       "@cloud/*": ["../../src/cloud/*"],
       "@proprietary/*": ["../../src/proprietary/*"],
       "@core/*": ["../../src/core/*"]
     }
   },
-  "include": ["../global.d.ts", "../*.js", "../*.ts", "../*.tsx", "."]
+  "include": [
+    "../global.d.ts",
+    "../*.js",
+    "../*.ts",
+    "../*.tsx",
+    ".",
+    "../portal-saas"
+  ]
 }
diff --git a/frontend/editor/tsconfig.portal.vite.json b/frontend/editor/tsconfig.portal.vite.json
index 93337d1dcc..924d616019 100644
--- a/frontend/editor/tsconfig.portal.vite.json
+++ b/frontend/editor/tsconfig.portal.vite.json
@@ -3,12 +3,7 @@
   "comment": "Path resolution for the portal's vitest project (referenced by vitest.config.ts). Broad include ('src', via the base) so vite-tsconfig-paths rewrites @app/* in every editor/src file the portal tests pull in (e.g. core/ui), not just the portal layer. The portal's own typecheck uses src/portal/tsconfig.json.",
   "compilerOptions": {
     "paths": {
-      "@app/*": [
-        "./src/portal/*",
-        "./src/cloud/*",
-        "./src/proprietary/*",
-        "./src/core/*"
-      ],
+      "@app/*": ["./src/cloud/*", "./src/proprietary/*", "./src/core/*"],
       "@portal/*": ["./src/portal/*"],
       "@cloud/*": ["./src/cloud/*"],
       "@proprietary/*": ["./src/proprietary/*"],
diff --git a/frontend/editor/tsconfig.saas.vite.json b/frontend/editor/tsconfig.saas.vite.json
index c7d2c03eb2..f31279fac3 100644
--- a/frontend/editor/tsconfig.saas.vite.json
+++ b/frontend/editor/tsconfig.saas.vite.json
@@ -8,7 +8,8 @@
         "./src/proprietary/*",
         "./src/core/*"
       ],
-      "@portal/*": ["./src/portal/*"],
+      "@portal/*": ["./src/portal-saas/*", "./src/portal/*"],
+      "@portal-proprietary/*": ["./src/portal/*"],
       "@cloud/*": ["./src/cloud/*"],
       "@proprietary/*": ["./src/proprietary/*"],
       "@core/*": ["./src/core/*"]
diff --git a/frontend/editor/vitest.config.ts b/frontend/editor/vitest.config.ts
index e4dfd76277..5d7a00bccf 100644
--- a/frontend/editor/vitest.config.ts
+++ b/frontend/editor/vitest.config.ts
@@ -104,7 +104,13 @@ export default defineConfig({
       {
         test: {
           name: "saas",
-          include: ["src/saas/**/*.test.{ts,tsx}"],
+          // src/saas = editor-saas layer; src/portal-saas = the portal's saas
+          // overrides (sibling to src/portal). Both build under the saas flavor,
+          // so both resolve @portal via the saas cascade (tsconfig.saas.vite.json).
+          include: [
+            "src/saas/**/*.test.{ts,tsx}",
+            "src/portal-saas/**/*.test.{ts,tsx}",
+          ],
           environment: "jsdom",
           globals: true,
           setupFiles: ["./src/saas/setupTests.ts"],
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 02f1c68132..707c411d14 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -6,7 +6,8 @@ import { defineConfig } from "eslint/config";
 import tseslint from "typescript-eslint";
 
 const srcGlobs = [
-  // The portal layer lives under editor/src/portal, so editor/src/** covers it.
+  // The portal layers live under editor/src/portal (base) and
+  // editor/src/portal-saas (saas override), so editor/src/** covers them.
   "editor/src/**/*.{js,mjs,jsx,ts,tsx}",
 ];
 const nodeGlobs = [

From c8f238ae601f71cd3bea194aed93d3818e225e3e Mon Sep 17 00:00:00 2001
From: Reece Browne <74901996+reecebrowne@users.noreply.github.com>
Date: Wed, 8 Jul 2026 13:17:00 +0100
Subject: [PATCH 17/27] Portal/editor switcher (#6907)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the portal's top-left app switcher to the editor sidebar, so you
can jump between the two apps from either side.

- Both sidebars render the same shared `AppSwitch` component (sui
dropdown).
- Switching is client-side (no page reload); portal→editor no longer
breaks when `VITE_EDITOR_URL` is unset.
- Editor side is admin-gated (`portalAccess`) and only exists in flavors
that ship the portal — core/desktop stub it out, same seam pattern as
the portal routes.
- Fixes en route: dropdown menu stacking in the editor sidebar, sui
dropdown item button reset, stale `dist-portal` ESLint ignore.
---
 .../src/core/components/shared/AppSwitch.css  | 27 ++++++
 .../src/core/components/shared/AppSwitch.tsx  | 82 +++++++++++++++++++
 .../core/components/shared/AppSwitcher.tsx    |  8 ++
 .../core/components/shared/FileSidebar.css    | 12 +++
 .../core/components/shared/FileSidebar.tsx    | 12 +++
 .../editor/src/core/routes/portalBasename.ts  |  7 ++
 frontend/editor/src/core/ui/Dropdown.css      |  6 ++
 .../desktop/components/shared/AppSwitcher.tsx |  9 ++
 frontend/editor/src/portal/auth/editorUrl.ts  | 15 +++-
 .../editor/src/portal/components/Sidebar.css  | 27 +-----
 .../editor/src/portal/components/Sidebar.tsx  | 61 +++++---------
 .../src/portal/contexts/ViewContext.tsx       |  6 +-
 .../components/shared/AppSwitcher.tsx         | 28 +++++++
 frontend/eslint.config.mjs                    |  1 +
 14 files changed, 228 insertions(+), 73 deletions(-)
 create mode 100644 frontend/editor/src/core/components/shared/AppSwitch.css
 create mode 100644 frontend/editor/src/core/components/shared/AppSwitch.tsx
 create mode 100644 frontend/editor/src/core/components/shared/AppSwitcher.tsx
 create mode 100644 frontend/editor/src/core/routes/portalBasename.ts
 create mode 100644 frontend/editor/src/desktop/components/shared/AppSwitcher.tsx
 create mode 100644 frontend/editor/src/proprietary/components/shared/AppSwitcher.tsx

diff --git a/frontend/editor/src/core/components/shared/AppSwitch.css b/frontend/editor/src/core/components/shared/AppSwitch.css
new file mode 100644
index 0000000000..c40080b1e9
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/AppSwitch.css
@@ -0,0 +1,27 @@
+/* Trigger: bare square icon button that blends into either sidebar's header. */
+.app-switch-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-4);
+  transition:
+    background var(--motion-fast),
+    color var(--motion-fast);
+}
+
+.app-switch-btn:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-2);
+}
+
+.app-switch-icon {
+  width: 1rem;
+  height: 1.0625rem;
+  display: block;
+}
diff --git a/frontend/editor/src/core/components/shared/AppSwitch.tsx b/frontend/editor/src/core/components/shared/AppSwitch.tsx
new file mode 100644
index 0000000000..b713e75e7c
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/AppSwitch.tsx
@@ -0,0 +1,82 @@
+import { useTranslation } from "react-i18next";
+import { Button, Dropdown } from "@app/ui";
+import markLight from "@app/assets/brand/modern-logo/StirlingPDFLogoNoTextLight.svg";
+import markDark from "@app/assets/brand/modern-logo/StirlingPDFLogoNoTextDark.svg";
+import "@app/components/shared/AppSwitch.css";
+
+export type AppSwitchTarget = "editor" | "processor";
+
+function ChevronDownIcon() {
+  return (
+    
+      
+    
+  );
+}
+
+interface AppSwitchProps {
+  /** The app this switcher is rendered in (shown as active in the menu). */
+  current: AppSwitchTarget;
+  /** Resolved color scheme; picks the brand mark for the menu items. */
+  theme: "light" | "dark";
+  /** Invoked with the selected app; only called for apps other than `current`. */
+  onSwitch: (app: AppSwitchTarget) => void;
+  className?: string;
+}
+
+/**
+ * The editor ⇄ processor app switcher (chevron button → app menu). The editor
+ * and portal sidebars render this same element so the two apps present one
+ * identical switcher; each host supplies its own theme source and navigation.
+ */
+export function AppSwitch({
+  current,
+  theme,
+  onSwitch,
+  className,
+}: AppSwitchProps) {
+  const { t } = useTranslation();
+  const mark = theme === "dark" ? markDark : markLight;
+  const apps: Array<{ id: AppSwitchTarget; label: string }> = [
+    {
+      id: "processor",
+      label: t("portal.shell.sidebar.appProcessor", "Processor"),
+    },
+    { id: "editor", label: t("portal.shell.sidebar.appEditor", "Editor") },
+  ];
+  return (
+    
+      
+        
+      
+      
+        {apps.map((app) => (
+           onSwitch(app.id)}
+            leading={}
+          >
+            {app.label}
+          
+        ))}
+      
+    
+  );
+}
diff --git a/frontend/editor/src/core/components/shared/AppSwitcher.tsx b/frontend/editor/src/core/components/shared/AppSwitcher.tsx
new file mode 100644
index 0000000000..298a46e1ac
--- /dev/null
+++ b/frontend/editor/src/core/components/shared/AppSwitcher.tsx
@@ -0,0 +1,8 @@
+/**
+ * Core stub for the sidebar app switcher. Builds that bundle the admin portal
+ * (proprietary/saas) shadow this with a real switcher; core has no portal, so
+ * there is nothing to switch to.
+ */
+export function AppSwitcher() {
+  return null;
+}
diff --git a/frontend/editor/src/core/components/shared/FileSidebar.css b/frontend/editor/src/core/components/shared/FileSidebar.css
index d06982179e..0b495d723b 100644
--- a/frontend/editor/src/core/components/shared/FileSidebar.css
+++ b/frontend/editor/src/core/components/shared/FileSidebar.css
@@ -102,6 +102,18 @@
   flex-shrink: 0;
 }
 
+/* App switcher (portal builds only) sits at the far end of the header row.
+   The content-fade animation makes this span a stacking context, which would
+   trap the menu's z-index below later sidebar rows — elevate the span so the
+   open menu paints above them. */
+.file-sidebar-app-switch {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: var(--z-dropdown);
+}
+
 /* ---- Search row ---- */
 .file-sidebar-search-row {
   display: flex;
diff --git a/frontend/editor/src/core/components/shared/FileSidebar.tsx b/frontend/editor/src/core/components/shared/FileSidebar.tsx
index db3820350e..f6fb7f0ce9 100644
--- a/frontend/editor/src/core/components/shared/FileSidebar.tsx
+++ b/frontend/editor/src/core/components/shared/FileSidebar.tsx
@@ -29,6 +29,7 @@ import {
 import { accountService } from "@app/services/accountService";
 import { GoogleDriveIcon } from "@app/components/shared/CloudStorageIcons";
 import { Wordmark } from "@app/components/shared/Wordmark";
+import { AppSwitcher } from "@app/components/shared/AppSwitcher";
 import type { StirlingFileStub } from "@app/types/fileContext";
 import MenuIcon from "@mui/icons-material/Menu";
 import SearchIcon from "@mui/icons-material/Search";
@@ -679,6 +680,17 @@ const FileSidebar = forwardRef(
                   className="file-sidebar-brand-text sidebar-content-fade"
                 />
               )}
+              {!collapsed && (
+                // The header row itself toggles collapse; stop the switcher's
+                // clicks and key presses from reaching it.
+                 e.stopPropagation()}
+                  onKeyDown={(e) => e.stopPropagation()}
+                >
+                  
+                
+              )}
             
    
           
 
diff --git a/frontend/editor/src/core/routes/portalBasename.ts b/frontend/editor/src/core/routes/portalBasename.ts
new file mode 100644
index 0000000000..70f05f6a27
--- /dev/null
+++ b/frontend/editor/src/core/routes/portalBasename.ts
@@ -0,0 +1,7 @@
+/**
+ * Base path where the admin portal route-set mounts inside the editor app
+ * (see adminRouteExtensions). Lives in core so any layer can reference the
+ * mount point without importing portal code — build flavors that ship no
+ * portal (core, desktop, prototypes) must never resolve @portal.
+ */
+export const PORTAL_BASENAME = "/portal";
diff --git a/frontend/editor/src/core/ui/Dropdown.css b/frontend/editor/src/core/ui/Dropdown.css
index c96aec1672..736371e6ae 100644
--- a/frontend/editor/src/core/ui/Dropdown.css
+++ b/frontend/editor/src/core/ui/Dropdown.css
@@ -36,6 +36,12 @@
   font-size: 0.8125rem;
   color: var(--color-text-2);
   border-radius: var(--radius-sm);
+  /* Explicit button reset: hosts without a global button reset (e.g. the
+     editor) would otherwise show the UA's buttonface background and border. */
+  background: none;
+  border: none;
+  font-family: inherit;
+  cursor: pointer;
   transition:
     background var(--motion-fast),
     color var(--motion-fast);
diff --git a/frontend/editor/src/desktop/components/shared/AppSwitcher.tsx b/frontend/editor/src/desktop/components/shared/AppSwitcher.tsx
new file mode 100644
index 0000000000..9d7c2c095e
--- /dev/null
+++ b/frontend/editor/src/desktop/components/shared/AppSwitcher.tsx
@@ -0,0 +1,9 @@
+/**
+ * Desktop inherits proprietary's layers but does not ship the portal (see
+ * desktop/routes/adminRouteExtensions), so shadow the switcher back to empty —
+ * otherwise the desktop bundle would reference @portal via the proprietary
+ * switcher's imports.
+ */
+export function AppSwitcher() {
+  return null;
+}
diff --git a/frontend/editor/src/portal/auth/editorUrl.ts b/frontend/editor/src/portal/auth/editorUrl.ts
index 43eb466cb7..8f60292331 100644
--- a/frontend/editor/src/portal/auth/editorUrl.ts
+++ b/frontend/editor/src/portal/auth/editorUrl.ts
@@ -3,8 +3,15 @@
  * bouncing non-admins out).
  *
  * Sourced from VITE_EDITOR_URL so it's configurable per deploy rather than
- * hardcoded. The committed default is "/" (production serves the editor at the
- * root on the same origin as the portal). For dev cross-app navigation to a
- * separately-running editor, set VITE_EDITOR_URL in editor/.env.local.
+ * hardcoded, falling back to "/" (the editor serves the portal at /portal on
+ * the same origin, so the root is the editor). For dev cross-app navigation to
+ * a separately-running editor, set VITE_EDITOR_URL in editor/.env.local.
  */
-export const EDITOR_URL = import.meta.env.VITE_EDITOR_URL;
+export const EDITOR_URL = import.meta.env.VITE_EDITOR_URL || "/";
+
+/**
+ * When the editor is at the root of this origin, the portal and editor are
+ * route-sets of one SPA — switching apps can be a client-side navigation
+ * instead of a full page load.
+ */
+export const EDITOR_IS_SAME_APP = EDITOR_URL === "/";
diff --git a/frontend/editor/src/portal/components/Sidebar.css b/frontend/editor/src/portal/components/Sidebar.css
index c12b6debb0..fcc8c7e6a8 100644
--- a/frontend/editor/src/portal/components/Sidebar.css
+++ b/frontend/editor/src/portal/components/Sidebar.css
@@ -40,35 +40,12 @@
   white-space: nowrap;
 }
 
-/* App switcher (down-arrow → Portal / Editor) */
+/* App switcher (down-arrow → Portal / Editor); button and menu styling live
+   with the shared AppSwitch element. */
 .portal-sidebar__app-switch {
   margin-left: auto;
   display: flex;
 }
-.portal-sidebar__app-switch-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  color: var(--color-text-4);
-  transition:
-    background var(--motion-fast),
-    color var(--motion-fast);
-}
-.portal-sidebar__app-switch-btn:hover {
-  background: var(--color-bg-hover);
-  color: var(--color-text-2);
-}
-.portal-sidebar__app-icon {
-  width: 1rem;
-  height: 1.0625rem;
-  display: block;
-}
 
 /* Nav body */
 .portal-sidebar__nav {
diff --git a/frontend/editor/src/portal/components/Sidebar.tsx b/frontend/editor/src/portal/components/Sidebar.tsx
index 486611248b..fed5d7f68e 100644
--- a/frontend/editor/src/portal/components/Sidebar.tsx
+++ b/frontend/editor/src/portal/components/Sidebar.tsx
@@ -1,5 +1,7 @@
-import { Button, Dropdown, NavItem } from "@app/ui";
+import { NavItem } from "@app/ui";
+import { AppSwitch } from "@app/components/shared/AppSwitch";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import { useView, type ViewId } from "@portal/contexts/ViewContext";
 import { useTier } from "@portal/contexts/TierContext";
 import { useTheme } from "@portal/contexts/ThemeContext";
@@ -7,7 +9,7 @@ import { useUI } from "@portal/contexts/UIContext";
 import { LinkAccountFooterItem } from "@portal/components/LinkAccountFooterItem";
 import { useAsync } from "@portal/hooks/useAsync";
 import { fetchHomeKpis, type KpiEntry } from "@portal/api/home";
-import { EDITOR_URL } from "@portal/auth/editorUrl";
+import { EDITOR_URL, EDITOR_IS_SAME_APP } from "@portal/auth/editorUrl";
 import markLight from "@app/assets/brand/modern-logo/StirlingPDFLogoNoTextLight.svg";
 import markDark from "@app/assets/brand/modern-logo/StirlingPDFLogoNoTextDark.svg";
 import {
@@ -22,7 +24,6 @@ import {
   UsageIcon,
   DocsIcon,
   SettingsIcon,
-  ChevronDownIcon,
 } from "@portal/components/icons";
 import "@portal/components/Sidebar.css";
 
@@ -114,6 +115,15 @@ export function Sidebar() {
   const { theme } = useTheme();
   const { openSettings } = useUI();
   const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  // Editor and portal are one SPA when the editor serves this origin's root, so
+  // the switch stays client-side; an absolute EDITOR_URL (dev cross-app setup)
+  // needs a full page load.
+  const goToEditor = () => {
+    if (EDITOR_IS_SAME_APP) navigate("/");
+    else window.location.href = EDITOR_URL;
+  };
 
   // Procurement is no longer a nav tab — it lives on Home as the deal-status hero and expands into
   // a takeover modal (matching the marketing prototype).
@@ -148,45 +158,12 @@ export function Sidebar() {
           
         
 
-        
-          
-            
-          
-          
-            
-              }
-            >
-              {t("portal.shell.sidebar.appProcessor")}
-            
-             {
-                window.location.href = EDITOR_URL;
-              }}
-              leading={
-                
-              }
-            >
-              {t("portal.shell.sidebar.appEditor")}
-            
-          
-        
+