/* 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 } = React; const CFG = window.MOSTLYPDF || {}; const e = React.createElement; // 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', }; 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 }))); } 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'), soon: true }, ] }, { 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, soon: true }, { slug: 'pdf-to-jpg', icon: 'image2', title: tr('mp.tool.pdf-to-jpg.title'), answer: tr('mp.tool.pdf-to-jpg.answer'), soon: true }, { slug: 'word-to-pdf', icon: 'fileType', title: tr('mp.tool.word-to-pdf.title'), answer: tr('mp.tool.word-to-pdf.answer'), soon: true }, { slug: 'ocr-pdf', icon: 'scan', title: tr('mp.tool.ocr-pdf.title'), answer: tr('mp.tool.ocr-pdf.answer'), pro: true, soon: 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'), soon: true }, { slug: 'unlock-pdf', icon: 'unlock', title: tr('mp.tool.unlock-pdf.title'), answer: tr('mp.tool.unlock-pdf.answer'), soon: true }, { slug: 'sign-pdf', icon: 'pen', title: tr('mp.tool.sign-pdf.title'), answer: tr('mp.tool.sign-pdf.answer'), pro: true, soon: 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') }, }; 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'); // ── shared chrome ── function Nav({ go }) { return (
go('landing')} style={S('display:inline-flex;align-items:center;gap:10px;cursor:pointer;')}> {Logo(30)} MostlyPDF
EN {PUBLIC_APP_OPEN ? ( <> ) : ( {tr('mp.nav.inDevelopment')} )}
); } // The ONE shared portfolio footer template (window.ForgeKit.Footer) — same component as every // other Mostly Tiny product, so the footer can't drift between products. Legal links go to the // canonical /legal/mostlypdf/ path; the Tools/Product/Company links stay in-app placeholders. function Footer() { const LEGAL = 'https://mostlyprivacy.com/legal/mostlypdf/'; const brand = ( e.preventDefault()} style={S('display:inline-flex;align-items:center;gap:9px;text-decoration:none;')}> {Logo(26)} MostlyPDF ); const columns = [ { heading: tr('mp.footer.tools'), links: [ { label: tr('mp.tool.merge-pdf.title'), href: '#' }, { label: tr('mp.tool.split-pdf.title'), href: '#' }, { label: tr('mp.tool.compress-pdf.title'), href: '#' }, { label: tr('mp.tool.pdf-to-word.title'), href: '#' }, ] }, { heading: tr('mp.footer.product'), links: [ { label: tr('mp.nav.pricing'), href: '#/pricing' }, { label: tr('mp.footer.apiDocs'), href: '/docs' }, { label: tr('mp.footer.apiKeys'), href: '#/keys' }, // subtle, team-only entry while in private beta { label: tr('mp.nav.compare'), href: '#/compare' }, ] }, { heading: tr('mp.footer.company'), links: [ { label: tr('mp.footer.about'), href: '#' }, { label: tr('mp.footer.support'), href: '#' }, ] }, { heading: tr('mp.footer.legal'), links: [ { label: tr('mp.footer.terms'), href: LEGAL + 'terms' }, { label: tr('mp.footer.privacy'), href: LEGAL + 'privacy' }, { label: tr('mp.footer.cookies'), href: LEGAL + 'cookie' }, ] }, ]; return ( ); } const check = (stroke, w) => ; // ── LANDING ── function Landing({ go, open }) { const trust = [tr('mp.landing.trust.free'), tr('mp.landing.trust.noSignup'), tr('mp.landing.trust.noWatermark'), tr('mp.landing.trust.noLimit'), tr('mp.landing.trust.noAds')]; const why = [ { icon: 'zap', title: tr('mp.landing.why.free.title'), body: tr('mp.landing.why.free.body') }, { icon: 'fileText', title: tr('mp.landing.why.convert.title'), body: tr('mp.landing.why.convert.body') }, { icon: 'code', title: tr('mp.landing.why.api.title'), body: tr('mp.landing.why.api.body') }, ]; // Fuzzy tool search: as the visitor types, match across title/answer/slug and show a // ranked result grid in place of the category sections (empty query = browse by category). const [q, setQ] = useState(''); const query = q.trim(); const allTools = CATS.flatMap((c) => c.tools); const results = query ? allTools .map((tool) => ({ tool, s: Math.max( fuzzyScore(query, tool.title), fuzzyScore(query, tool.answer), fuzzyScore(query, tool.slug.replace(/-/g, ' ')), ), })) .filter((x) => x.s > 0) .sort((a, b) => b.s - a.s) .map((x) => x.tool) : null; const ToolCard = (tool) => (
open(tool.slug)} className="forge-card forge-card--interactive" style={S('padding:18px;cursor:pointer;display:flex;flex-direction:column;')}>
{ic(tool.icon, 22)}
{tool.pro && {tr('mp.badge.pro')}} {tool.soon && {tr('mp.badge.soon')}}
{tool.title}
{tool.answer}
); return (
{tr('mp.landing.eyebrow')}

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

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

{trust.map((t) => {check('var(--good)')}{t})}
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 meta = 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') }; const multi = meta.inputs === 'multi'; const minFiles = meta.min || 1; const [files, setFiles] = useState([]); const [phase, setPhase] = useState('idle'); // idle | files | working | success | error const [dragOn, setDragOn] = useState(false); const [errMsg, setErrMsg] = useState(meta.errorMsg); const [result, setResult] = useState(null); const [faqOpen, setFaqOpen] = useState(0); 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 [orderVal, setOrderVal] = useState(''); useEffect(() => { setFiles([]); setPhase('idle'); setResult(null); setErrMsg(meta.errorMsg); }, [slug]); 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; }); } 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 {}; default: return {}; } } async function run() { if (files.length < minFiles) { setErrMsg(meta.errorMsg); 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' }, body: JSON.stringify({ tool: slug, options: collectOptions(), files: b64 }) }); const j = await res.json().catch(() => ({})); 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 url = URL.createObjectURL(new Blob([u], { type: j.contentType || 'application/pdf' })); return { name: (j.filenames && j.filenames[i]) || (slug + '.pdf'), size: fmtSize(u.length), url }; }); setResult({ downloads: dls }); setPhase('success'); } catch (err) { setErrMsg(err.message + (/Failed to fetch|NetworkError/i.test(err.message) ? tr('mp.runner.networkHint') : '')); setPhase('error'); } } 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;'; const faqList = [ { 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'; const showDrop = phase === 'idle' || phase === 'error'; 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}
{tr('mp.runner.processing')}
)} {phase === 'success' && result && (
{check('currentColor', 28)}
{meta.successTitle}
{tr('mp.runner.filesReady', { count: result.downloads.length })}
{result.downloads.map((dl, i) => (
{dl.name}
{dl.size}
{tr('mp.runner.download')}
))}
)} {twoCol && (
{showDrop ? (
inputRef.current && inputRef.current.click()} onDragOver={(ev) => { ev.preventDefault(); setDragOn(true); }} onDragLeave={() => setDragOn(false)} onDrop={(ev) => { ev.preventDefault(); setDragOn(false); addFiles(ev.dataTransfer.files); }} style={S(dropStyle)}>
{dragOn ? tr('mp.runner.dropActive') : tr('mp.runner.dropIdle')}
{tr('mp.runner.orBrowsePre')}{tr('mp.runner.browseFiles')}
{tr('mp.runner.acceptsLimit', { accepts: meta.accepts })}
{phase === 'error' && (
{errMsg}
)}
) : (
{tr('mp.runner.fileCount', { count: files.length })}
{files.map((f, i) => (
{(f.name.split('.').pop() || 'PDF').toUpperCase().slice(0, 4)}
{f.name}
{fmtSize(f.size)}
))}
{multi && ( )}
{tr('mp.runner.encryptionNote')}
)}
{tr('mp.opt.options')}
{meta.opt === 'merge' &&

{tr('mp.opt.mergeNote')}

} {meta.opt === 'split' && (
{tr('mp.opt.splitMode')}
{splitMode === 'ranges' && (
{tr('mp.opt.pageRanges')} setSplitRanges(ev.target.value)} className="forge-input" placeholder="1-3, 5, 8-12" /> {tr('mp.opt.separateRanges')}
)} {splitMode === 'every' && (
{tr('mp.opt.pagesPerFile')} setSplitEvery(ev.target.value)} type="number" className="forge-input" />
)}
)} {meta.opt === 'pages' && (
{meta.pagesLabel} setPagesVal(ev.target.value)} className="forge-input" placeholder={meta.placeholder} /> {tr('mp.opt.pagesHint', { example: meta.placeholder })}
)} {meta.opt === 'order' && (
{tr('mp.opt.newOrder')} setOrderVal(ev.target.value)} className="forge-input" placeholder="3, 1, 2, 4" /> {tr('mp.opt.newOrderHint')}
)} {meta.opt === 'rotate' && (
{tr('mp.opt.rotation')}
{[90, 180, 270].map((a) => )}
{tr('mp.opt.rotatePreview', { deg: rotation })}
)} {meta.opt === 'watermark' && (
{tr('mp.opt.watermarkText')} setWmText(ev.target.value)} className="forge-input" />
{tr('mp.opt.opacity')}{Math.round(wmOpacity * 100)}%
setWmOpacity(ev.target.value / 100)} style={S('width:100%;accent-color:var(--accent);')} />
{wmText}
)} {meta.opt === 'pagenum' && (
{tr('mp.opt.position')}
{POS.map((k) => )}
{tr('mp.opt.startAt')} setPnStart(ev.target.value)} type="number" className="forge-input" />
)} {(meta.opt === 'images' || meta.opt === 'generic') &&

{meta.genericNote || tr('mp.runner.default.genericNote')}

}
)} addFiles(ev.target.files)} />
{tr('mp.runner.goodToKnow')}

{tr('mp.runner.questionsHeading', { tool: tool.title })}

{faqList.map((f, i) => (
{faqOpen === i &&

{f.a}

}
))}
); } // ── PRICING ── function Pricing() { const [annual, setAnnual] = useState(true); const seg = 'border:none;background:transparent;padding:8px 18px;border-radius:999px;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--fg-muted);cursor:pointer;'; const segSel = 'background:var(--bg-elev);padding:8px 18px;border:none;border-radius:999px;font-family:var(--font-sans);font-size:13px;font-weight:600;color:var(--fg);box-shadow:var(--shadow-xs);cursor:pointer;'; const planCard = 'position:relative;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:var(--shadow-soft);padding:26px;display:flex;flex-direction:column;'; const planCardFeat = 'position:relative;background:var(--bg-elev);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:var(--radius-card);box-shadow:0 1px 3px rgba(10,10,26,.04),0 18px 44px color-mix(in srgb,var(--accent) 16%,transparent);padding:26px;display:flex;flex-direction:column;'; const ctaPrimary = 'margin-top:18px;height:42px;border:1px solid transparent;border-radius:999px;background:var(--accent);color:var(--accent-fg);font-family:var(--font-sans);font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 28%,transparent);'; const ctaSecondary = 'margin-top:18px;height:42px;border:1px solid var(--border-strong);border-radius:999px;background:var(--bg-elev);color:var(--fg);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;'; const plans = [ { name: tr('mp.pricing.free.name'), amt: '$0', per: tr('mp.pricing.free.per'), desc: tr('mp.pricing.free.desc'), cta: tr('mp.pricing.free.cta'), feat: false, feats: [tr('mp.pricing.free.feat.0'), tr('mp.pricing.free.feat.1'), tr('mp.pricing.free.feat.2'), tr('mp.pricing.free.feat.3'), tr('mp.pricing.free.feat.4'), tr('mp.pricing.free.feat.5')] }, { name: tr('mp.pricing.pro.name'), amt: annual ? '$36' : '$5', per: annual ? tr('mp.pricing.perYear') : tr('mp.pricing.perMonth'), desc: tr('mp.pricing.pro.desc'), cta: tr('mp.pricing.pro.cta'), feat: true, feats: [tr('mp.pricing.pro.feat.0'), tr('mp.pricing.pro.feat.1'), tr('mp.pricing.pro.feat.2'), tr('mp.pricing.pro.feat.3'), tr('mp.pricing.pro.feat.4'), tr('mp.pricing.pro.feat.5')] }, { name: tr('mp.pricing.business.name'), amt: '$4', per: tr('mp.pricing.perUserMonth'), desc: tr('mp.pricing.business.desc'), cta: tr('mp.pricing.business.cta'), feat: false, feats: [tr('mp.pricing.business.feat.0'), tr('mp.pricing.business.feat.1'), tr('mp.pricing.business.feat.2'), tr('mp.pricing.business.feat.3'), tr('mp.pricing.business.feat.4')] }, { name: tr('mp.pricing.api.name'), amt: tr('mp.pricing.api.amt'), per: tr('mp.pricing.api.per'), desc: tr('mp.pricing.api.desc'), cta: tr('mp.pricing.api.cta'), feat: false, feats: [tr('mp.pricing.api.feat.0'), tr('mp.pricing.api.feat.1'), tr('mp.pricing.api.feat.2'), tr('mp.pricing.api.feat.3'), tr('mp.pricing.api.feat.4')] }, ]; const entFeats = [tr('mp.pricing.ent.feat.0'), tr('mp.pricing.ent.feat.1'), tr('mp.pricing.ent.feat.2'), tr('mp.pricing.ent.feat.3')]; const noTricks = [tr('mp.pricing.noTricks.0'), tr('mp.pricing.noTricks.1'), tr('mp.pricing.noTricks.2')]; return (
{tr('mp.nav.pricing')}

{tr('mp.pricing.title')}

{tr('mp.pricing.subtitle')}

{plans.map((p) => (
{p.feat && {tr('mp.pricing.mostPopular')}}
{p.name}
{p.amt} {p.per}
{p.desc}
    {p.feats.map((ft) =>
  • {check('var(--accent)')}{ft}
    • )}
))}
{tr('mp.pricing.enterprise')}
{tr('mp.pricing.entTitle')}

{tr('mp.pricing.entBody')}

{entFeats.map((ef) => {check('var(--good)')}{ef})}
{tr('mp.pricing.noTricksLabel')} {noTricks.map((nt) => {check('currentColor', 14)}{nt})}
); } // ── COMPARE ── function Compare() { const cmpRows = [ { feat: tr('mp.compare.row.freeTier.feat'), us: tr('mp.compare.row.freeTier.us'), them: tr('mp.compare.row.freeTier.them') }, { feat: tr('mp.compare.row.wall.feat'), us: tr('mp.compare.row.wall.us'), them: tr('mp.compare.row.wall.them') }, { feat: tr('mp.compare.row.watermark.feat'), us: tr('mp.compare.row.watermark.us'), them: tr('mp.compare.row.watermark.them') }, { feat: tr('mp.compare.row.quality.feat'), us: tr('mp.compare.row.quality.us'), them: tr('mp.compare.row.quality.them') }, { feat: tr('mp.compare.row.pricing.feat'), us: tr('mp.compare.row.pricing.us'), them: tr('mp.compare.row.pricing.them') }, { feat: tr('mp.compare.row.api.feat'), us: tr('mp.compare.row.api.us'), them: tr('mp.compare.row.api.them') }, { feat: tr('mp.compare.row.signup.feat'), us: tr('mp.compare.row.signup.us'), them: tr('mp.compare.row.signup.them') }, ]; const cmpMore = [ { letter: 'S', title: 'vs Smallpdf', tag: tr('mp.compare.more.smallpdf') }, { letter: 'P', title: 'vs PDF24', tag: tr('mp.compare.more.pdf24') }, { letter: 'S', title: 'vs Sejda', tag: tr('mp.compare.more.sejda') }, { letter: 'S', title: 'vs Stirling PDF', tag: tr('mp.compare.more.stirling') }, ]; const rowBase = 'display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center;padding:13px 22px;border-bottom:1px solid var(--hairline);font-size:13.5px;'; return (
{tr('mp.nav.compare')}

{tr('mp.compare.title')}

{tr('mp.compare.subtitle')}

{check('currentColor', 20)}
{tr('mp.compare.leaderTitle')}

{tr('mp.compare.leaderBody')}

{tr('mp.compare.proLabel')}
$5/mo

{tr('mp.compare.proBody')}

{tr('mp.compare.freeLabel')}
{tr('mp.compare.noWall')}

{tr('mp.compare.freeBody')}

{Logo(16)} MostlyPDF iLovePDF
{cmpRows.map((r, i) => (
{r.feat} {check('var(--accent)')}{r.us} {r.them}
))}
{tr('mp.compare.theyWinTitle')}

{tr('mp.compare.theyWinBody')}

{tr('mp.compare.moreComparisons')}
{cmpMore.map((cm, i) => (
{cm.letter} {cm.title}

{cm.tag}

))}
); } // ── API-KEYS DASHBOARD (#/keys) ── // Team-only while PUBLIC_APP_OPEN is false: not advertised in the public Nav (a subtle footer- // style link from the dashboard itself is enough); the team navigates directly to #/keys. // // SSR-SAFE: this whole component is only rendered for the #/keys route, but even then it never // touches window/firebase at render time — all firebase/auth work happens inside useEffect, so // the i18n prerender (no DOM) renders the static "loading" shell without throwing. // Lazy-initialise the compat Firebase app + auth + functions, reading window.MOSTLYPDF.firebase. // Returns { auth, fns } or null if firebase/config isn't available. Idempotent (reuses the app). function initFirebase() { if (typeof window === 'undefined') return null; const fb = window.firebase; const conf = (window.MOSTLYPDF || {}).firebase; if (!fb || !fb.initializeApp || !conf) return null; try { const app = fb.apps && fb.apps.length ? fb.app() : fb.initializeApp(conf); return { auth: app.auth(), fns: app.functions('europe-west2') }; } catch (err) { return null; } } function Keys({ go }) { const [ready, setReady] = useState(false); // firebase initialised? const [user, setUser] = useState(null); // signed-in user | null const [authPhase, setAuthPhase] = useState('idle'); // idle | sending | sent | completing | closed | error const [email, setEmail] = useState(''); const [authErr, setAuthErr] = useState(''); const [keys, setKeys] = useState(null); // null = not loaded; [] = loaded empty const [keysErr, setKeysErr] = useState(''); const [newName, setNewName] = useState(''); const [creating, setCreating] = useState(false); const [createErr, setCreateErr] = useState(''); const [secret, setSecret] = useState(null); // the one-time-shown new secret const [copied, setCopied] = useState(false); const [busyId, setBusyId] = useState(''); // id being revoked const fbRef = useRef(null); // { auth, fns } // Init firebase + subscribe to auth, and complete a magic-link landing if present. // All of this is DOM/firebase work → inside useEffect (never at module/render top-level). useEffect(() => { const fb = initFirebase(); fbRef.current = fb; if (!fb) { setReady(true); return; } let unsub = function () {}; try { unsub = window.MostlyAuth.onAuth(fb.auth, (u) => { setUser(u); setReady(true); }); } catch (err) { setReady(true); } // Returning from a magic-link email lands here with the sign-in link in the URL. try { if (window.MostlyAuth.isMagicLinkLanding(fb.auth)) { setAuthPhase('completing'); window.MostlyAuth.completeMagicLink({ auth: fb.auth }).catch((err) => { if (window.MostlyAuth.isClosedBetaError(err)) setAuthPhase('closed'); else { setAuthErr(String((err && err.message) || err)); setAuthPhase('error'); } }); } } catch (err) { /* not a landing */ } return () => { try { unsub(); } catch (e) { /* ignore */ } }; }, []); // Load the key list once signed in. useEffect(() => { const fb = fbRef.current; if (!user || !fb) return; setKeysErr(''); fb.fns.httpsCallable('listApiKeys')({}) .then((res) => setKeys((res && res.data && res.data.keys) || [])) .catch((err) => setKeysErr(String((err && err.message) || err))); }, [user]); function sendLink(ev) { ev.preventDefault(); const fb = fbRef.current; const addr = email.trim(); if (!addr || !fb) return; setAuthPhase('sending'); setAuthErr(''); window.MostlyAuth.requestMagicLink({ fns: fb.fns, email: addr, continueUrl: window.location.href }) .then(() => setAuthPhase('sent')) .catch((err) => { if (window.MostlyAuth.isClosedBetaError(err)) setAuthPhase('closed'); else { setAuthErr(String((err && err.message) || err)); setAuthPhase('error'); } }); } function signOut() { const fb = fbRef.current; if (!fb) return; window.MostlyAuth.signOut(fb.auth).then(() => { setKeys(null); setSecret(null); }); } function createKey(ev) { ev.preventDefault(); const fb = fbRef.current; if (!fb) return; setCreating(true); setCreateErr(''); setCopied(false); fb.fns.httpsCallable('createApiKey')({ name: newName.trim() || 'API key', scopes: ['pdf:run'] }) .then((res) => { const d = (res && res.data) || {}; setSecret(d.secret || ''); setNewName(''); // Optimistically add the new key to the table (revoked:false), then refresh. setKeys((prev) => [{ id: d.id, name: d.name, last4: d.last4, prefix: 'sk', scopes: d.scopes || ['pdf:run'], revoked: false }].concat(prev || [])); }) .catch((err) => setCreateErr(String((err && err.message) || err))) .finally(() => setCreating(false)); } function revoke(id) { const fb = fbRef.current; if (!fb) return; setBusyId(id); fb.fns.httpsCallable('revokeApiKey')({ id }) .then(() => setKeys((prev) => (prev || []).map((k) => (k.id === id ? Object.assign({}, k, { revoked: true }) : k)))) .catch((err) => setKeysErr(String((err && err.message) || err))) .finally(() => setBusyId('')); } function copySecret() { try { if (navigator.clipboard && secret) { navigator.clipboard.writeText(secret).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1800); }); } } catch (err) { /* clipboard blocked */ } } const wrap = 'max-width:860px;margin:0 auto;padding:42px 28px 8px;'; const headBlock = (
{tr('mp.keys.developers')}

{tr('mp.keys.title')}

{tr('mp.keys.introPre')} {tr('mp.keys.apiReference')} {tr('mp.keys.introPost')}

); // 1) Booting firebase (also the SSR/prerender render: ready=false, no DOM touched). if (!ready) { return (
{headBlock}
{tr('mp.keys.loading')}
); } // 2) Firebase unavailable (misconfigured / SDK blocked). if (!fbRef.current) { return (
{headBlock}
{tr('mp.keys.unavailableTitle')}

{tr('mp.keys.unavailablePre')} {tr('mp.keys.apiDocs')} {tr('mp.keys.unavailablePost')}

); } // 3) Signed out → sign-in panel (magic link), with the private-beta case handled calmly. if (!user) { const card = 'forge-card'; const cardStyle = S('padding:30px;max-width:460px;margin:0 auto;'); let inner; if (authPhase === 'completing') { inner = (
{tr('mp.keys.signingIn')}

{tr('mp.keys.signingInBody')}

); } else if (authPhase === 'closed') { inner = (
{ic('lock', 22)}
{tr('mp.keys.betaTitle')}

{tr('mp.keys.betaBody')}

); } else if (authPhase === 'sent') { inner = (
{check('currentColor', 24)}
{tr('mp.keys.inboxTitle')}

{tr('mp.keys.inboxPre')} {email}{tr('mp.keys.inboxPost')}

); } else { inner = (
{tr('mp.keys.signInTitle')}

{tr('mp.keys.signInBody')}

setEmail(ev.target.value)} placeholder="you@company.com" className="forge-input" autoFocus /> {authPhase === 'error' &&
{authErr || tr('mp.keys.genericError')}
}
); } return (
{headBlock}
{inner}
); } // 4) Signed in → keys table + create form. const monoChip = 'font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:12.5px;'; return (
{headBlock}
{/* Create-key form */}
{tr('mp.keys.createKey')}
{tr('mp.keys.keyName')} setNewName(ev.target.value)} className="forge-input" placeholder={tr('mp.keys.keyNamePlaceholder')} />
{tr('mp.keys.scope')} pdf:run
{createErr &&
{createErr}
}
{/* One-time secret reveal */} {secret && (
{ic('lock', 18)}
{tr('mp.keys.secretTitle')}

{tr('mp.keys.secretWarnLead')} {tr('mp.keys.secretWarnBody')}

{secret}
)} {/* Key list */}
{tr('mp.keys.yourKeys')}
{keysErr &&
{keysErr}
} {keys === null ? (
{tr('mp.keys.loadingKeys')}
) : keys.length === 0 ? (
{tr('mp.keys.noKeys')}
) : (
{tr('mp.keys.colName')}{tr('mp.keys.colKey')}{tr('mp.keys.colScopes')}{tr('mp.keys.colStatus')}
{keys.map((k) => (
{k.name || tr('mp.keys.defaultKeyName')} {(k.prefix || 'sk')}_•••{k.last4 || '????'} {(k.scopes || []).map((sc) => {sc})} {k.revoked ? ( {tr('mp.keys.revoked')} ) : ( )}
))}
)}
go('landing')} style={S('color:var(--fg-muted);font-weight:500;')}>{tr('mp.keys.backToTools')}
); } // ── root: hash router ── function App() { const parse = () => { if (typeof location === 'undefined') return { screen: 'landing', slug: null }; // SSR/no-DOM safe const h = (location.hash || '').replace(/^#\/?/, ''); if (h === 'pricing' || h === 'compare') return { screen: h, slug: null }; // The team's API-keys dashboard. Not advertised in the public Nav while PUBLIC_APP_OPEN is // false — reachable directly at #/keys (and #/dashboard as an alias). if (h === 'keys' || h === 'dashboard') return { screen: 'keys', slug: null }; if (h && TM[h]) return { screen: 'runner', slug: h }; return { screen: 'landing', slug: null }; }; const [route, setRoute] = useState(parse()); useEffect(() => { const f = () => { setRoute(parse()); window.scrollTo(0, 0); }; window.addEventListener('hashchange', f); return () => window.removeEventListener('hashchange', f); }, []); const go = (screen) => { location.hash = screen === 'landing' ? '#/' : '#/' + screen; }; const open = (slug) => { location.hash = '#/' + slug; }; let body; if (route.screen === 'runner') body = ; else if (route.screen === 'pricing') body = ; else if (route.screen === 'compare') body = ; else if (route.screen === 'keys') body = ; else body = ; // Flex column so the footer is pinned to the bottom of the viewport on short pages // (the body region grows to fill); on long pages it just sits after the content. return (
); } // Hydrate the prerendered SSR markup when present; client-render if the shell is empty. const _root = document.getElementById('mostlypdf-app'); if (_root) { if (_root.hasChildNodes()) ReactDOM.hydrateRoot(_root, ); else ReactDOM.createRoot(_root).render(); } })();