/* MostlyPDF web app — React (via Babel), ported faithfully from the Claude Design handoff (MostlyPDF.dc.html) onto the Forge/Mostly Tiny _ds + _kit. Four screens: Landing · Runner · Pricing · Compare, coral accent. The runner is wired to the real pdfProcess endpoint (window.MOSTLYPDF.endpoint) + the generated tool registry (window.PDF_TOOLS), replacing the design's mock data. Style strings are kept verbatim from the design via S(). */ (function () { 'use strict'; const { useState, useEffect, useRef, useMemo } = React; const CFG = window.MOSTLYPDF || {}; const e = React.createElement; // MostlySign is its own product (ADR 0048, full move) — this sender app ships only under // the MostlySign brand. (It began as a copy of the MostlyPDF SPA; the marketing surfaces // are the static web/index.html + /trust + /verify, and the /sign signer page.) const BRAND = { name: 'MostlySign', word: 'Mostly', mark: 'Sign', site: 'https://mostlysign.com' }; // i18n runtime (the @mostly-tiny/i18n window.ForgeI18n global, installed by the // forge-i18n-core.js + _i18n_bundle.js script tags before this babel module evals — // and re-installed per-locale during the SSR prerender). The identity fallback keeps // the page rendering if the bundle is absent (e.g. raw dev server). SSR-safe: the // prerender re-evaluates THIS module once per locale with ForgeI18n forced to that // locale's server translator, so module-scope tr('…') calls localize correctly. const I18N = (typeof window !== 'undefined' && window.ForgeI18n) || { t: (k) => k, has: () => false, locale: 'en', dir: 'ltr', fmt: { number: (n) => String(n ?? ''), currency: (n) => String(n ?? ''), percent: (n) => String(n ?? ''), date: (d) => String(d ?? ''), time: (d) => String(d ?? ''), relative: (d) => String(d ?? '') }, }; const tr = I18N.t, fmt = I18N.fmt; // Public sign-up/sign-in gate. FALSE = closed beta (team-only): the header hides the // Sign in / Get started buttons and shows an "In development" pill. Flip to true at public // launch (alongside auth.config publicSignup:true + opening the IdP). Mirrors the backend // gate — magic-link send already refuses non-team emails while publicSignup is false. const PUBLIC_APP_OPEN = false; // Lightweight fuzzy matcher for the tool search: a contiguous substring wins (ranked by // how early it appears); otherwise an in-order subsequence match. Returns a score // (higher = better) or -1 for no match. function fuzzyScore(query, text) { const q = (query || '').toLowerCase().trim(); const t = (text || '').toLowerCase(); if (!q) return 0; const idx = t.indexOf(q); if (idx >= 0) return 1000 - idx; let qi = 0; for (let i = 0; i < t.length && qi < q.length; i++) if (t[i] === q[qi]) qi++; return qi === q.length ? 1 : -1; } // Parse a design inline-style string ("a:b;c:d") into a React style object, // preserving --custom-properties verbatim. function S(str) { const o = {}; (str || '').split(';').forEach((decl) => { const i = decl.indexOf(':'); if (i < 0) return; let k = decl.slice(0, i).trim(); const v = decl.slice(i + 1).trim(); if (!k) return; if (!k.startsWith('--')) k = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); o[k] = v; }); return o; } // ── icon paths (verbatim from the design) ── const P = { layers: 'M12 2 2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5', scissors: 'M6 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M6 21a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M20 4 8.12 15.88 M14.47 14.48 20 20 M8.12 8.12 12 12', fileMinus: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z M14 2v7h7 M9 15h6', copy: 'M9 9h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z M5 15H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1', grid: 'M3 3h7v7H3z M14 3h7v7h-7z M14 14h7v7h-7z M3 14h7v7H3z', rotate: 'M21 2v6h-6 M21 13a9 9 0 1 1-3-7.7L21 8', shrink: 'M15 3h6v6 M9 21H3v-6 M21 3l-7 7 M3 21l7-7', image: 'M3 3h18v18H3z M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M21 15l-5-5L5 21', image2: 'M3 3h18v18H3z M9 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z M21 14l-4-4L7 20', fileText: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z M14 2v7h7 M16 13H8 M16 17H8 M10 9H8', fileType: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z M14 2v7h7 M9 13v5 M7 13h4', scan: 'M3 7V5a2 2 0 0 1 2-2h2 M17 3h2a2 2 0 0 1 2 2v2 M21 17v2a2 2 0 0 1-2 2h-2 M7 21H5a2 2 0 0 1-2-2v-2 M7 8h8 M7 12h10 M7 16h6', hash: 'M4 9h16 M4 15h16 M10 3 8 21 M16 3l-2 18', droplet: 'M12 2.7 6.3 8.4a8 8 0 1 0 11.4 0z M9.5 14a2.5 2.5 0 0 0 2.5 2.5', lock: 'M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4', unlock: 'M5 11h14v10H5z M8 11V7a4 4 0 0 1 7.9-1', pen: 'M2 22s4-1 7-4l9.5-9.5a2.1 2.1 0 0 0-3-3L6 15c-3 3-4 7-4 7z M15 5l4 4', zap: 'M13 2 3 14h7l-1 8 10-12h-7z', code: 'M16 18l6-6-6-6 M8 6l-6 6 6 6', link: 'M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7 M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7', shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z M9 12l2 2 4-4', send: 'M22 2 11 13 M22 2 15 22l-4-9-9-4z', }; function ic(name, size, sw) { const d = P[name] || ''; return e('svg', { width: size || 20, height: size || 20, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: sw || 2, strokeLinecap: 'round', strokeLinejoin: 'round' }, d.split(' M').map((p, i) => e('path', { key: i, d: (i ? 'M' : '') + p }))); } // Render-engine tool UI (F147): the HTML→PDF / URL→PDF tools use a text/URL form (not a file // drop) and receive a hosted PDF URL back. Built in mp/render-runner.jsx and eval'd via the // prerender `shared` list; if that module is absent (bare dev), fall back to null so the app // still renders the rest of the grid. const RenderRunner = (typeof window !== 'undefined' && window.MostlyPDFRenderRunner) ? window.MostlyPDFRenderRunner({ React, useState, useEffect, S, ic, endpoint: CFG.endpoint }) : null; const RENDER_SLUGS = { 'html-to-pdf': true, 'url-to-pdf': true }; // E-sign kit (F184/F185): signature capture + click-to-place + the request-signature // screens, from mp/sign-kit.jsx (prerender `shared`). The authed screens get this app's // firebase/auth helpers (function declarations — hoisted, resolved at call time). const SignKit = (typeof window !== 'undefined' && window.MostlyPDFSignKit) ? window.MostlyPDFSignKit({ React }) : null; // Sender screens (F185/F190) live in mp/esign-screens.jsx (multi-signer + templates). const SignScreens = (SignKit && typeof window !== 'undefined' && window.MostlyPDFEsignScreens) ? window.MostlyPDFEsignScreens({ React, SignKit, initFirebase, authUser, idpLoginUrl: CFG.idpLoginUrl }) : null; const Logo = (sz) => ( ); // ── tool catalog: the design's display copy, reconciled with the live registry. // engine 'pure' tools are wired to pdfProcess; 'container' tools render as Soon. ── // Tool display copy is keyed by slug (mp.tool..title/answer); category names/notes by // mp.cat..name/note. Slugs/icons/flags are NOT translated (they're code/registry-driven). const CATS = [ { key: 'organize', name: tr('mp.cat.organize.name'), note: tr('mp.cat.organize.note'), tools: [ { slug: 'merge-pdf', icon: 'layers', title: tr('mp.tool.merge-pdf.title'), answer: tr('mp.tool.merge-pdf.answer') }, { slug: 'split-pdf', icon: 'scissors', title: tr('mp.tool.split-pdf.title'), answer: tr('mp.tool.split-pdf.answer') }, { slug: 'remove-pages', icon: 'fileMinus', title: tr('mp.tool.remove-pages.title'), answer: tr('mp.tool.remove-pages.answer') }, { slug: 'extract-pages', icon: 'copy', title: tr('mp.tool.extract-pages.title'), answer: tr('mp.tool.extract-pages.answer') }, { slug: 'organize-pdf', icon: 'grid', title: tr('mp.tool.organize-pdf.title'), answer: tr('mp.tool.organize-pdf.answer') }, { slug: 'rotate-pdf', icon: 'rotate', title: tr('mp.tool.rotate-pdf.title'), answer: tr('mp.tool.rotate-pdf.answer') }, ] }, { key: 'optimize', name: tr('mp.cat.optimize.name'), note: tr('mp.cat.optimize.note'), tools: [ { slug: 'compress-pdf', icon: 'shrink', title: tr('mp.tool.compress-pdf.title'), answer: tr('mp.tool.compress-pdf.answer') }, ] }, { key: 'convert', name: tr('mp.cat.convert.name'), note: tr('mp.cat.convert.note'), tools: [ { slug: 'jpg-to-pdf', icon: 'image', title: tr('mp.tool.jpg-to-pdf.title'), answer: tr('mp.tool.jpg-to-pdf.answer') }, { slug: 'pdf-to-word', icon: 'fileText', title: tr('mp.tool.pdf-to-word.title'), answer: tr('mp.tool.pdf-to-word.answer'), pro: true }, { slug: 'pdf-to-jpg', icon: 'image2', title: tr('mp.tool.pdf-to-jpg.title'), answer: tr('mp.tool.pdf-to-jpg.answer') }, { slug: 'word-to-pdf', icon: 'fileType', title: tr('mp.tool.word-to-pdf.title'), answer: tr('mp.tool.word-to-pdf.answer') }, { slug: 'ocr-pdf', icon: 'scan', title: tr('mp.tool.ocr-pdf.title'), answer: tr('mp.tool.ocr-pdf.answer'), pro: true }, // Render-engine tools (F147, MostlyRender). Copy is plain strings (like F145's DocWizard) // so the feature ships without adding a translation key per locale — render is the wedge. { slug: 'html-to-pdf', icon: 'code', title: 'HTML to PDF', answer: 'Paste HTML and render it to a clean, paginated A4 PDF — also on the API.', render: true }, { slug: 'url-to-pdf', icon: 'link', title: 'Webpage to PDF', answer: 'Enter a public URL and capture the whole page as a paginated A4 PDF.', render: true }, ] }, { key: 'edit', name: tr('mp.cat.edit.name'), note: tr('mp.cat.edit.note'), tools: [ { slug: 'page-numbers', icon: 'hash', title: tr('mp.tool.page-numbers.title'), answer: tr('mp.tool.page-numbers.answer') }, { slug: 'watermark-pdf', icon: 'droplet', title: tr('mp.tool.watermark-pdf.title'), answer: tr('mp.tool.watermark-pdf.answer') }, ] }, { key: 'security', name: tr('mp.cat.security.name'), note: tr('mp.cat.security.note'), tools: [ { slug: 'protect-pdf', icon: 'lock', title: tr('mp.tool.protect-pdf.title'), answer: tr('mp.tool.protect-pdf.answer') }, { slug: 'unlock-pdf', icon: 'unlock', title: tr('mp.tool.unlock-pdf.title'), answer: tr('mp.tool.unlock-pdf.answer') }, { slug: 'sign-pdf', icon: 'pen', title: tr('mp.tool.sign-pdf.title'), answer: tr('mp.tool.sign-pdf.answer'), pro: true }, // E-sign tools (F184/F185). Copy is plain strings (render-tools precedent) so the // feature ships without a per-locale key pass; keyed localization is a follow-up. { slug: 'sign-pdf-certified', icon: 'shield', title: 'Certify PDF (digital signature)', answer: 'Apply a verifiable PKI digital signature (PAdES) using your own .p12/.pfx certificate.', pro: true }, { slug: 'request-signature', icon: 'send', title: 'Request Signature', answer: 'Email someone a secure signing link — you both get the signed PDF back with an audit certificate, digitally sealed. One envelope a month free; unlimited on Pro.', esign: true, pro: true }, ] }, ]; // Per-tool runner copy. Prose (runLabel/workingLabel/successTitle/errorMsg/doMore.label/verb/howto/ // genericNote/pagesLabel) is keyed mp.runner..*; opt/accepts/min/placeholder stay as code/format. const META = { 'merge-pdf': { inputs: 'multi', reorder: true, opt: 'merge', accepts: 'PDF', min: 2, runLabel: tr('mp.runner.merge-pdf.runLabel'), workingLabel: tr('mp.runner.merge-pdf.workingLabel'), successTitle: tr('mp.runner.merge-pdf.successTitle'), errorMsg: tr('mp.runner.merge-pdf.errorMsg'), doMore: { slug: 'compress-pdf', label: tr('mp.runner.merge-pdf.doMore') }, verb: tr('mp.runner.merge-pdf.verb'), howto: tr('mp.runner.merge-pdf.howto') }, 'split-pdf': { inputs: 'single', opt: 'split', accepts: 'PDF', runLabel: tr('mp.runner.split-pdf.runLabel'), workingLabel: tr('mp.runner.split-pdf.workingLabel'), successTitle: tr('mp.runner.split-pdf.successTitle'), errorMsg: tr('mp.runner.split-pdf.errorMsg'), doMore: { slug: 'merge-pdf', label: tr('mp.runner.split-pdf.doMore') }, verb: tr('mp.runner.split-pdf.verb'), howto: tr('mp.runner.split-pdf.howto') }, 'remove-pages': { inputs: 'single', opt: 'pages', pagesLabel: tr('mp.runner.remove-pages.pagesLabel'), placeholder: '2, 5-7', accepts: 'PDF', runLabel: tr('mp.runner.remove-pages.runLabel'), workingLabel: tr('mp.runner.remove-pages.workingLabel'), successTitle: tr('mp.runner.remove-pages.successTitle'), errorMsg: tr('mp.runner.remove-pages.errorMsg'), doMore: { slug: 'organize-pdf', label: tr('mp.runner.remove-pages.doMore') }, verb: tr('mp.runner.remove-pages.verb'), howto: tr('mp.runner.remove-pages.howto') }, 'extract-pages': { inputs: 'single', opt: 'pages', pagesLabel: tr('mp.runner.extract-pages.pagesLabel'), placeholder: '1, 3-4', accepts: 'PDF', runLabel: tr('mp.runner.extract-pages.runLabel'), workingLabel: tr('mp.runner.extract-pages.workingLabel'), successTitle: tr('mp.runner.extract-pages.successTitle'), errorMsg: tr('mp.runner.extract-pages.errorMsg'), doMore: { slug: 'merge-pdf', label: tr('mp.runner.extract-pages.doMore') }, verb: tr('mp.runner.extract-pages.verb'), howto: tr('mp.runner.extract-pages.howto') }, 'organize-pdf': { inputs: 'single', opt: 'order', accepts: 'PDF', runLabel: tr('mp.runner.organize-pdf.runLabel'), workingLabel: tr('mp.runner.organize-pdf.workingLabel'), successTitle: tr('mp.runner.organize-pdf.successTitle'), errorMsg: tr('mp.runner.organize-pdf.errorMsg'), doMore: { slug: 'page-numbers', label: tr('mp.runner.organize-pdf.doMore') }, verb: tr('mp.runner.organize-pdf.verb'), howto: tr('mp.runner.organize-pdf.howto') }, 'rotate-pdf': { inputs: 'single', opt: 'rotate', accepts: 'PDF', runLabel: tr('mp.runner.rotate-pdf.runLabel'), workingLabel: tr('mp.runner.rotate-pdf.workingLabel'), successTitle: tr('mp.runner.rotate-pdf.successTitle'), errorMsg: tr('mp.runner.rotate-pdf.errorMsg'), doMore: { slug: 'page-numbers', label: tr('mp.runner.rotate-pdf.doMore') }, verb: tr('mp.runner.rotate-pdf.verb'), howto: tr('mp.runner.rotate-pdf.howto') }, 'watermark-pdf': { inputs: 'single', opt: 'watermark', accepts: 'PDF', runLabel: tr('mp.runner.watermark-pdf.runLabel'), workingLabel: tr('mp.runner.watermark-pdf.workingLabel'), successTitle: tr('mp.runner.watermark-pdf.successTitle'), errorMsg: tr('mp.runner.watermark-pdf.errorMsg'), doMore: { slug: 'page-numbers', label: tr('mp.runner.watermark-pdf.doMore') }, verb: tr('mp.runner.watermark-pdf.verb'), howto: tr('mp.runner.watermark-pdf.howto') }, 'page-numbers': { inputs: 'single', opt: 'pagenum', accepts: 'PDF', runLabel: tr('mp.runner.page-numbers.runLabel'), workingLabel: tr('mp.runner.page-numbers.workingLabel'), successTitle: tr('mp.runner.page-numbers.successTitle'), errorMsg: tr('mp.runner.page-numbers.errorMsg'), doMore: { slug: 'watermark-pdf', label: tr('mp.runner.page-numbers.doMore') }, verb: tr('mp.runner.page-numbers.verb'), howto: tr('mp.runner.page-numbers.howto') }, 'jpg-to-pdf': { inputs: 'multi', opt: 'images', accepts: 'JPG, PNG', min: 1, runLabel: tr('mp.runner.jpg-to-pdf.runLabel'), workingLabel: tr('mp.runner.jpg-to-pdf.workingLabel'), successTitle: tr('mp.runner.jpg-to-pdf.successTitle'), errorMsg: tr('mp.runner.jpg-to-pdf.errorMsg'), doMore: { slug: 'merge-pdf', label: tr('mp.runner.jpg-to-pdf.doMore') }, verb: tr('mp.runner.jpg-to-pdf.verb'), howto: tr('mp.runner.jpg-to-pdf.howto'), genericNote: tr('mp.runner.jpg-to-pdf.genericNote') }, // E-sign runners (F184). Plain-string copy, same shipping precedent as the render tools. 'sign-pdf': { inputs: 'single', opt: 'sign', accepts: 'PDF', runLabel: 'Sign PDF', workingLabel: 'Signing your PDF…', successTitle: 'Your PDF is signed', errorMsg: 'Could not sign this PDF. Check the file and try again.', doMore: { slug: 'protect-pdf', label: 'Protect the signed PDF' }, verb: 'sign a pdf', howto: 'draw, type or upload your signature, click where it should sit on the page' }, 'sign-pdf-certified': { inputs: 'single', opt: 'signcert', accepts: 'PDF', runLabel: 'Certify PDF', workingLabel: 'Applying the digital signature…', successTitle: 'Your PDF is certified', errorMsg: 'Could not apply the digital signature. Check the certificate and passphrase.', doMore: { slug: 'sign-pdf', label: 'Add a visual signature' }, verb: 'digitally sign a pdf', howto: 'upload your .p12/.pfx certificate, enter its passphrase, and certify' }, }; const toolMap = () => { const m = {}; CATS.forEach((c) => c.tools.forEach((t) => { m[t.slug] = Object.assign({ category: c.name, categoryKey: c.key }, t); })); return m; }; const TM = toolMap(); const RUNNER_TABS = ['merge-pdf', 'split-pdf', 'rotate-pdf', 'watermark-pdf']; const POS = ['top-left', 'top-center', 'top-right', 'center-left', 'center', 'center-right', 'bottom-left', 'bottom-center', 'bottom-right']; const placeMap = { 'top-left': 'start start', 'top-center': 'start center', 'top-right': 'start end', 'center-left': 'center start', center: 'center center', 'center-right': 'center end', 'bottom-left': 'end start', 'bottom-center': 'end center', 'bottom-right': 'end end' }; const fileToB64 = (f) => new Promise((res, rej) => { const r = new FileReader(); r.onload = () => res(String(r.result).split(',')[1]); r.onerror = rej; r.readAsDataURL(f); }); const fmtSize = (n) => (n < 1024 ? n + ' B' : n < 1048576 ? (n / 1024).toFixed(0) + ' KB' : (n / 1048576).toFixed(1) + ' MB'); // Derive a PDF's page aspect ratio ("w / h", CSS-ready) straight from its bytes — the first // /MediaBox gives the page box; a /Rotate of 90/270 swaps the axes. `bin` is the latin1 byte // string from atob(). Returns null (→ A4 fallback) if no MediaBox is found. Cheap: no renderer. function pdfAspect(bin) { try { const m = /\/MediaBox\s*\[\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)\s*\]/.exec(bin || ''); if (!m) return null; let w = Math.abs(parseFloat(m[3]) - parseFloat(m[1])); let h = Math.abs(parseFloat(m[4]) - parseFloat(m[2])); if (!(w > 0 && h > 0)) return null; const r = /\/Rotate\s+(-?\d+)/.exec(bin); if (r) { const deg = ((parseInt(r[1], 10) % 360) + 360) % 360; if (deg === 90 || deg === 270) { const t = w; w = h; h = t; } } return w + ' / ' + h; } catch (e) { return null; } } // Tool-chaining handoff: when the user picks "do more" on a result, we stash the result // file(s) here and navigate to the target tool. Because REMOUNTS on a // route change, this module-scoped box survives the hop; the target Runner's mount effect // consumes it (seeds `files`) so the result becomes the next tool's input — no re-download. let pendingChain = null; // { slug, files: [File] } | null // Cross-REDIRECT handoff: "Sign in with Mostly Tiny" is a full-page redirect, so pendingChain // (module state) is wiped. To return the user to the SAME tool with their file still loaded — // no re-upload — we stash { slug, files } in IndexedDB before the redirect (File objects are // structured-cloneable) and the target Runner restores it on return. Best-effort: any IDB // failure just falls back to re-upload. const PENDING_KEY = 'pending-run'; function idbKV(run) { return new Promise((resolve) => { try { if (typeof indexedDB === 'undefined') return resolve(undefined); const req = indexedDB.open('mpdf', 1); req.onupgradeneeded = () => { try { req.result.createObjectStore('kv'); } catch (e) {} }; req.onerror = () => resolve(undefined); req.onsuccess = () => { try { run(req.result, resolve); } catch (e) { resolve(undefined); } }; } catch (e) { resolve(undefined); } }); } function idbPut(key, val) { return idbKV((d, done) => { const tx = d.transaction('kv', 'readwrite'); tx.objectStore('kv').put(val, key); tx.oncomplete = () => done(true); tx.onerror = () => done(false); }); } function idbGet(key) { return idbKV((d, done) => { const r = d.transaction('kv', 'readonly').objectStore('kv').get(key); r.onsuccess = () => done(r.result); r.onerror = () => done(undefined); }); } function idbDel(key) { return idbKV((d, done) => { const tx = d.transaction('kv', 'readwrite'); tx.objectStore('kv').delete(key); tx.oncomplete = () => done(true); tx.onerror = () => done(false); }); } // ── shared chrome ── // Dark-theme toggle. Bright stays the default: dark is opt-in, stored as mp.theme='dark' // (absent = light), applied by the boot script in the shell before first paint. // Both icons are always rendered — the shell CSS ([data-theme] rules) shows one — so the // SSR-prerendered markup is theme-independent and hydrates without a mismatch (#418). function themeFlip() { const el = document.documentElement; const toDark = el.getAttribute('data-theme') !== 'dark'; try { toDark ? localStorage.setItem('mp.theme', 'dark') : localStorage.removeItem('mp.theme'); } catch (e) { /* private mode: theme still flips for this page */ } if (toDark) el.setAttribute('data-theme', 'dark'); else el.removeAttribute('data-theme'); } function ThemeToggle() { return ( ); } function Nav({ go, onSearch }) { // Per-product org context switcher (F203). Once the user is signed in, read their org // memberships + active selection (getOrgContext) and let the shared kit mount a Personal/org // setQ(ev.target.value)} placeholder={tr('mp.landing.searchPlaceholder')} style={S('width:100%;height:52px;padding:0 18px 0 46px;font-family:var(--font-sans);font-size:15px;background:var(--bg-elev);color:var(--fg);border:1px solid var(--border);border-radius:999px;box-shadow:var(--shadow-soft);outline:none;')} />
{results ? ( results.length ? (
{tr('mp.landing.resultsCount', { count: results.length, query })}
{results.map((tool) => ToolCard(tool))}
) : (
{tr('mp.landing.noResults', { query })}

{tr('mp.landing.noResultsHint')}

) ) : ( CATS.map((cat) => (

{cat.name}

{cat.note}
{cat.tools.map((tool) => ToolCard(tool))}
)) )}
{tr('mp.landing.whyEyebrow')}

{tr('mp.landing.whyTitle')}

{why.map((w) => (
{ic(w.icon, 22)}
{w.title}

{w.body}

))}
{tr('mp.landing.ctaTitle')}

{tr('mp.landing.ctaBody')}

); } // ── RUNNER (wired to pdfProcess) ── function Runner({ slug, go, open }) { const tool = TM[slug] || {}; const _baseMeta = META[slug] || { inputs: 'single', opt: 'generic', accepts: 'PDF', runLabel: tr('mp.runner.default.runLabel', { tool: tool.title || '' }), workingLabel: tr('mp.runner.default.workingLabel'), successTitle: tr('mp.runner.default.successTitle'), errorMsg: tr('mp.runner.default.errorMsg'), doMore: { slug: 'merge-pdf', label: tr('mp.runner.default.doMore') }, verb: (tool.title || '').toLowerCase(), howto: tr('mp.runner.default.howto'), genericNote: tr('mp.runner.default.genericNote') }; // Container tools have no hand-written META entry — layer their input shape (option // type + accepted upload types) onto the generic default so they're actually usable. const OFFICE_ACCEPT = '.doc,.docx,.xls,.xlsx,.ppt,.pptx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation'; const CONTAINER_META = { 'compress-pdf': { opt: 'quality', accepts: 'PDF' }, 'pdf-to-jpg': { opt: 'generic', accepts: 'PDF' }, 'word-to-pdf': { opt: 'generic', accepts: 'DOC, DOCX, XLS, PPT', accept: OFFICE_ACCEPT }, 'protect-pdf': { opt: 'password', accepts: 'PDF' }, 'unlock-pdf': { opt: 'password', accepts: 'PDF' }, }; const meta = Object.assign({}, _baseMeta, CONTAINER_META[slug] || {}); const multi = meta.inputs === 'multi'; const minFiles = meta.min || 1; const [files, setFiles] = useState([]); const [phase, setPhase] = useState('idle'); // idle | files | working | success | error | paywall const [slow, setSlow] = useState(false); // still working after a few seconds → reassure (cold start) const [dragOn, setDragOn] = useState(false); const [errMsg, setErrMsg] = useState(meta.errorMsg); const [result, setResult] = useState(null); const [faqOpen, setFaqOpen] = useState(0); const [preview, setPreview] = useState(null); // { url, name, size, kind:'pdf'|'image', download?, revoke? } const [resultSel, setResultSel] = useState(0); // which output is shown in the big inline preview const [chainQuery, setChainQuery] = useState(''); // "do more with this file" tool search const [authGate, setAuthGate] = useState(false); // pro-tool "sign in required" popup const [resume, setResume] = useState(false); // restored a file after SSO → auto-continue once signed in const inputRef = useRef(null); // options const [rotation, setRotation] = useState(90); const [wmText, setWmText] = useState('CONFIDENTIAL'); const [wmOpacity, setWmOpacity] = useState(0.18); const [wmPos, setWmPos] = useState('center'); const [pnPos, setPnPos] = useState('bottom-center'); const [pnStart, setPnStart] = useState(1); const [splitMode, setSplitMode] = useState('ranges'); const [splitRanges, setSplitRanges] = useState('1-3, 5, 8-12'); const [splitEvery, setSplitEvery] = useState(2); const [pagesVal, setPagesVal] = useState(''); const [compressQuality, setCompressQuality] = useState('ebook'); const [pw, setPw] = useState(''); const [orderVal, setOrderVal] = useState(''); // e-sign options (F184) const [sigVal, setSigVal] = useState(null); // SignatureInput value const [sigPlace, setSigPlace] = useState([]); // one placement box (normalized coords) const [sigSizes, setSigSizes] = useState({}); // {page: {w,h}} in PDF points const [p12, setP12] = useState(null); // { name, base64 } const [p12Pass, setP12Pass] = useState(''); const [certReason, setCertReason] = useState(''); const [certName, setCertName] = useState(''); useEffect(() => { // Chained from another tool? Seed this tool's input with the handed-off result file(s). if (pendingChain && pendingChain.slug === slug && pendingChain.files && pendingChain.files.length) { setFiles(pendingChain.files); setPhase('files'); setResult(null); setResultSel(0); setChainQuery(''); setErrMsg(meta.errorMsg); setAuthGate(false); closePreview(); pendingChain = null; // consume once return; } setFiles([]); setPhase('idle'); setResult(null); setResultSel(0); setChainQuery(''); setErrMsg(meta.errorMsg); setAuthGate(false); closePreview(); // Returning from "Sign in with Mostly Tiny"? Restore the file we stashed before the redirect // so the user continues this tool without re-uploading, then auto-run once the SSO exchange // has signed them in (a Pro subscriber runs; a signed-in free user gets the upgrade prompt). let cancelled = false; let unsub = null; (async () => { const p = await idbGet(PENDING_KEY); if (cancelled || !p || p.slug !== slug || !p.files || !p.files.length) return; await idbDel(PENDING_KEY); if (cancelled) return; setFiles(p.files); setPhase('files'); const fb = initFirebase(); if (fb && fb.auth) { try { unsub = fb.auth.onAuthStateChanged((u) => { if (u && !cancelled) setResume(true); }); } catch (e) {} } })(); return () => { cancelled = true; try { if (unsub) unsub(); } catch (e) {} }; }, [slug]); // Auto-continue a restored run once we're both signed in (resume) and the file is loaded. useEffect(() => { if (resume && files.length && phase === 'files') { setResume(false); run(); } }, [resume, files, phase]); // After ~3.5s still processing, show a reassurance line — the conversion engine can // cold-start on the first run (Cloud Run scale-to-zero), so a longer wait is normal, // not stuck. Fast (pure) ops finish well before this fires and never show it. useEffect(() => { if (phase !== 'working') { setSlow(false); return; } const t = setTimeout(() => setSlow(true), 3500); return () => clearTimeout(t); }, [phase]); function addFiles(list) { const arr = Array.prototype.slice.call(list || []); if (!arr.length) return; setFiles((prev) => (multi ? prev.concat(arr) : arr.slice(0, 1))); setPhase('files'); } function removeAt(i) { setFiles((prev) => { const n = prev.filter((_, j) => j !== i); if (!n.length) setPhase('idle'); return n; }); } // Preview an added input file — object URL is created here and revoked in closePreview. function previewFile(f) { setPreview({ url: URL.createObjectURL(f), name: f.name, size: fmtSize(f.size), kind: isImageInput(f) ? 'image' : 'pdf', revoke: true }); } // Preview a processed result — reuses the download's existing object URL (don't revoke it). function previewResult(dl) { const isImg = /\.(png|jpe?g|webp|gif|bmp|avif)$/i.test(dl.name || ''); setPreview({ url: dl.url, name: dl.name, size: dl.size, kind: isImg ? 'image' : 'pdf', download: true, revoke: false }); } function closePreview() { setPreview((p) => { if (p && p.revoke) { try { URL.revokeObjectURL(p.url); } catch (e) { /* ignore */ } } return null; }); } function collectOptions() { switch (meta.opt) { case 'split': return splitMode === 'ranges' ? { ranges: splitRanges.split(',').map((s) => s.trim()).filter(Boolean) } : splitMode === 'every' ? { everyN: Number(splitEvery) } : {}; case 'rotate': return { degrees: rotation }; case 'watermark': return { text: wmText, opacity: Number(wmOpacity) }; case 'pagenum': return { position: pnPos, start: Number(pnStart) }; case 'pages': return { pages: pagesVal }; case 'order': return { order: orderVal.split(',').map((s) => parseInt(s.trim(), 10)).filter((n) => !isNaN(n)) }; case 'images': return {}; case 'quality': return { quality: compressQuality }; case 'password': return { password: pw }; case 'sign': { // Convert the placed box (fractions from top-left) into the engine's point // coords (origin bottom-left) using the real page size from the preview; // A4 fallback if the preview couldn't load. const p = sigPlace[0]; const ps = (p && sigSizes[p.page]) || { w: 595.28, h: 841.89 }; const base = { page: p ? p.page : 1, x: p ? p.x * ps.w : 56, y: p ? (1 - p.y - p.h) * ps.h : 64 }; if (sigVal && sigVal.imageBase64) { return { ...base, type: 'image', image: { base64: sigVal.imageBase64, type: sigVal.imageType }, width: p ? p.w * ps.w : 180 }; } return { ...base, type: 'text', text: (sigVal && sigVal.text) || '', fontSize: p ? Math.max(8, Math.round(p.h * ps.h * 0.6)) : 18 }; } case 'signcert': return { p12: p12 && p12.base64, passphrase: p12Pass, reason: certReason || undefined, name: certName || undefined }; default: return {}; } } async function run() { // Pro tools: a signed-in Pro user runs them straight from the web (server checks the plan). // Only when NOT signed in do we pop the calm "sign in with Mostly Tiny" gate up front. if (tool.pro) { const u = await authUser(); if (!u) { setAuthGate('signin'); return; } } if (files.length < minFiles) { setErrMsg(meta.errorMsg); setPhase('error'); return; } if (meta.opt === 'password' && !pw.trim()) { setErrMsg(tr('mp.opt.passwordRequired')); setPhase('error'); return; } // Never submit an unsignable request (empty options would 400 server-side — P7). if (meta.opt === 'sign' && !(sigVal && (sigVal.imageBase64 || (sigVal.text || '').trim()))) { setErrMsg('Add your signature first — draw, type or upload it.'); setPhase('error'); return; } if (meta.opt === 'signcert' && !(p12 && p12.base64)) { setErrMsg('Upload your .p12/.pfx certificate first.'); setPhase('error'); return; } setPhase('working'); try { const b64 = await Promise.all(files.map(fileToB64)); const res = await fetch(CFG.endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json', ...(await appCheckHeader()), ...(await authHeader()) }, body: JSON.stringify({ tool: slug, options: collectOptions(), files: b64 }) }); const j = await res.json().catch(() => ({})); // A forbidden response (paid/entitlement) → same sign-in popup, not a red error. // 403 after passing the sign-in check → a signed-in FREE user on a Pro tool: prompt upgrade. if (res.status === 403) { setPhase(files.length ? 'files' : 'idle'); setAuthGate(tool.pro ? 'upgrade' : 'signin'); return; } if (!res.ok) throw new Error(j.error || 'Processing failed'); const dls = j.outputs.map((b, i) => { const bin = atob(b); const u = new Uint8Array(bin.length); for (let k = 0; k < bin.length; k++) u[k] = bin.charCodeAt(k); const name = (j.filenames && j.filenames[i]) || (slug + '.pdf'); const isPdf = /pdf/i.test(j.contentType || '') || /\.pdf$/i.test(name); const url = URL.createObjectURL(new Blob([u], { type: j.contentType || 'application/pdf' })); return { name, size: fmtSize(u.length), url, ar: isPdf ? pdfAspect(bin) : null }; }); setResult({ downloads: dls }); setResultSel(0); setPhase('success'); // Funnel top (free→paid contract): which tool delivered value, pre-signup/anonymous. try { if (window.MPAnalytics) window.MPAnalytics.track(window.MPAnalytics.EVENTS.TOOL_USED, { tool: slug, type: meta.opt }); } catch (e) {} } catch (err) { setErrMsg(err.message + (/Failed to fetch|NetworkError/i.test(err.message) ? tr('mp.runner.networkHint') : '')); setPhase('error'); } } // Start the UNIFIED "Sign in with Mostly Tiny" flow (MostlyID SSO, identitySSO:true) — the same // path as the #/keys dashboard. Redirects to the IdP and returns to #/keys, where the mount // effect exchanges the identity token for a session. Falls back to routing to #/keys (which // hosts the same button) if the auth kit isn't present. async function startProSignIn() { // Stash the current file + tool so we return HERE with progress intact (no re-upload), then // redirect back to THIS tool route (…/#/), not the keys dashboard. try { if (files && files.length) await idbPut(PENDING_KEY, { slug, files }); } catch (e) {} try { const cur = (typeof window !== 'undefined' ? window.location.href : ''); window.MostlyAuth.redirectToIdentitySignIn({ idpLoginUrl: CFG.idpLoginUrl || 'https://id.mostlytiny.io/login', product: 'mostlysign', // Hashless — the IdP appends `#token=…`; a hash route in the continue collides with it. continueUrl: cur.split('#')[0], }); } catch (e) { go('keys'); } } const accentChip = 'display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid transparent;cursor:pointer;'; const onChip = accentChip + 'background:var(--accent-bg-soft);color:var(--accent);'; const offChip = accentChip + 'background:var(--bg-chip);color:var(--fg-muted);'; const dropStyle = 'display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;border-radius:var(--radius-xl);border:2px dashed ' + (dragOn ? 'var(--accent)' : 'var(--border-strong)') + ';background:' + (dragOn ? 'var(--accent-bg-soft)' : 'var(--bg-elev)') + ';cursor:pointer;transition:border-color .15s,background .15s,transform .15s;transform:' + (dragOn ? 'scale(1.01)' : 'none') + ';'; const cellBase = 'height:26px;border-radius:6px;border:1px solid var(--border);background:var(--bg);cursor:pointer;'; const cellOn = 'height:26px;border-radius:6px;border:1px solid var(--accent);background:var(--accent-bg-soft);cursor:pointer;'; // The "is it free?" FAQ must match the tool's tier — a paid tool answering "completely // free" directly contradicts its own Pro paywall (QA finding). Paid tools get the Pro answer. const faqList = [ tool.pro ? { q: tr('mp.runner.faq.pro.q', { tool: tool.title }), a: tr('mp.runner.faq.pro.a', { tool: tool.title }) } : { q: tr('mp.runner.faq.free.q', { tool: tool.title }), a: tr('mp.runner.faq.free.a', { tool: tool.title }) }, { q: tr('mp.runner.faq.how.q', { verb: meta.verb }), a: tr('mp.runner.faq.how.a', { howto: meta.howto, runLabel: meta.runLabel }) }, { q: tr('mp.runner.faq.safe.q'), a: tr('mp.runner.faq.safe.a') }, ]; const twoCol = phase === 'idle' || phase === 'files' || phase === 'error' || phase === 'paywall'; const showDrop = phase === 'idle' || phase === 'error' || phase === 'paywall'; return (
go('landing')} style={S('display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-muted);cursor:pointer;margin-bottom:18px;')}> {tr('mp.nav.allTools')} / {tool.category}
{ic(tool.icon, 26)}

{tool.title}

{tool.pro && {tr('mp.badge.pro')}} {tool.soon && {tr('mp.badge.soon')}}

{tool.answer}

{tr('mp.runner.toolLabel')} {RUNNER_TABS.map((rt) => )}
{tool.soon && (
{tr('mp.runner.soonBannerLead')} {tr('mp.runner.soonBannerBody')}
)} {phase === 'working' && (
{meta.workingLabel}
{/* Indeterminate bar: a segment sliding across, forever — never fills-and-freezes, so a slow cold-start conversion reads as "working", not "stuck". */}
{slow ? tr('mp.runner.processingSlow') : tr('mp.runner.processing')}
)} {phase === 'success' && result && (() => { const outs = result.downloads; const sel = outs[Math.min(resultSel, outs.length - 1)] || outs[0]; const selIsImg = /\.(png|jpe?g|webp|gif|bmp|avif)$/i.test(sel.name || ''); const dlIcon = ; // Preview box is always the full container width; its height follows the document's own // page ratio so the whole page is visible (PDFs → parsed /MediaBox, A4 fallback; images // size naturally). previewBox = the container style for the selected output. const previewBox = 'position:relative;width:100%;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-chip);' + (selIsImg ? '' : 'aspect-ratio:' + (sel.ar || '595 / 842') + ';'); // "Do more with this file" — chain the result straight into another tool. Candidates // are tools that can INGEST this output (PDF output → PDF-input tools; image output → // JPG to PDF). Suggested = a curated few; the search box reaches every other tool. const allTools = Object.keys(TM).map((k) => TM[k]); const PDF_INPUT_BLOCK = { 'jpg-to-pdf': 1, 'word-to-pdf': 1, 'html-to-pdf': 1, 'url-to-pdf': 1 }; const chainTools = allTools.filter((t) => t.slug !== slug && !t.soon && (selIsImg ? t.slug === 'jpg-to-pdf' : !PDF_INPUT_BLOCK[t.slug])); const CHAIN_PRIORITY = ['compress-pdf', 'merge-pdf', 'split-pdf', 'rotate-pdf', 'watermark-pdf', 'page-numbers', 'organize-pdf', 'protect-pdf', 'extract-pages', 'remove-pages']; const suggested = [meta.doMore && meta.doMore.slug].concat(CHAIN_PRIORITY) .filter((s, i, a) => s && a.indexOf(s) === i) .map((s) => TM[s]).filter((t) => t && chainTools.indexOf(t) >= 0).slice(0, 5); const baseList = suggested.length ? suggested : chainTools.slice(0, 6); const cq = chainQuery.trim(); const chainList = cq ? chainTools.map((t) => ({ t, s: Math.max(fuzzyScore(cq, t.title), fuzzyScore(cq, t.slug.replace(/-/g, ' ')), fuzzyScore(cq, t.answer || '')) })) .filter((x) => x.s > 0).sort((a, b) => b.s - a.s).map((x) => x.t) : baseList; // Pipe the result blob(s) back into a File and hand off. A multi-input target (merge) // with several outputs (split) receives them ALL; otherwise just the selected output. const useInTool = async (targetSlug) => { try { const targetMulti = (META[targetSlug] || {}).inputs === 'multi'; const picks = (targetMulti && outs.length > 1) ? outs : [sel]; const files = await Promise.all(picks.map(async (d) => { const blob = await fetch(d.url).then((r) => r.blob()); return new File([blob], d.name, { type: blob.type || 'application/pdf' }); })); pendingChain = { slug: targetSlug, files }; } catch (e) { pendingChain = null; } open(targetSlug); }; return (
{check('currentColor', 22)}
{meta.successTitle}
{tr('mp.runner.filesReady', { count: outs.length })}
{/* Large interactive preview of the (selected) output, rendered right in the container. PDFs use the browser's native