# AM PDF Convertor — Implementation & Design Plan

## Product direction

“AM PDF Convertor” aik professional, animated, responsive browser tool hai jahan users common-format files ko PDFs mein convert karke preview aur download karte hain. Latest user requirement ke mutabiq Word/Excel/PowerPoint aur OpenDocument files ka original page design/layout jahan mumkin ho preserve kiya jayega. Is liye Office files user ke action par same-origin app server ko temporary conversion ke liye bheji jayengi; unki temporary source/output files conversion ke baad delete hongi. Images, PDFs aur plain text client/browser mein hi process honge. Unsupported binary formats ke liye clear error rahega.

## Implementation approach

- React/TypeScript single-page app, existing `client/src/pages/Home.tsx` route par; current Express/Vite app server aur port 3000 jyon ka tyon.
- Server par LibreOffice headless (`writer`, `calc`, `impress`) Office document renderer ke taur par. Is se DOC/DOCX, XLS/XLSX, PPT/PPTX, ODT/ODS/ODP aur RTF ko layout-preserving PDF export milta hai; Office files ab text-extraction/reflow pipeline se nahi guzrengi. Server route raw request bodies ko 25 MB tak accept karega, sirf allow-listed Office extensions lega, alag temporary directory/profile mein isolated soffice process chalayega, timeout aur limited concurrency lagayega, PDF return karega, aur success/error/timeout har surat mein temporary files delete karega.
- Server runtime ko deployable rakhne ke liye Docker image mein LibreOffice Writer/Calc/Impress aur metric-compatible fonts install honge. No database/account/storage required; durable file storage nahin.
- Browser pipeline: `jspdf` for images and plain text/HTML, `xlsx` and `jspdf-autotable` for local CSV, `pdf-lib` for uploaded PDFs; `jszip` for completed batch download. Office parsing libraries jo ab design flatten karti thin UI flow se remove hongi. Existing `framer-motion` aur `lucide-react` interactions/UI ke liye.
- Office source files conversion request ke duran hi server par temporary rahenge; browser response PDF ko memory mein preview/download karega. Server response `Cache-Control: no-store` ke saath hoga. Page controls locally generated pages par lagu honge; Office export apni source document ki page sizing/orientation ko preserve karega; existing PDF apna original page format rakhega.
- Inputs: PNG/JPG/JPEG/WEBP/GIF/BMP/SVG images; DOC/DOCX, XLS/XLSX, PPT/PPTX, ODT/ODS/ODP, RTF; CSV, PDF, TXT, MD, JSON, XML, HTML. Image decoder support browser par depend karegi. Unknown/unrecognized formats ko reject karke format guidance di jayegi.
- Drag/drop and picker multi-file queue, max 25 MB/file and 15 files/batch, per-file validation/progress/errors, one PDF per successful source, preview/download/ZIP download, and remove/clear cleanup.
- UI desktop par asymmetric conversion workspace: left-side product rail, central upload/queue canvas, right-side conversion summary/settings; mobile par single-column flow. Preserve the Swiss-editorial palette and clear hierarchy while enhancing product/creator identity, polished card depth, upload feedback and restrained signature animations. Show the requested owner name “Abdullah Mahmood” as a legible creator credit in the workspace and footer. Honor reduced-motion preferences and retain the explicit Office temporary-server-processing privacy disclosure.

## Project structure

- `client/src/pages/Home.tsx`: upload interaction, queue, conversion state, local previews/downloads, privacy messaging and Office-conversion indicators.
- `client/src/lib/converters.ts`: browser PDF conversion, local CSV/text/image/PDF processing, Office server-request dispatch, output page count.
- `client/src/lib/file-utils.ts`: shared extension/format classification and supported-extension validation.
- `server/officeConverter.ts`: bounded raw uploads, extension allow-list, isolated LibreOffice subprocess, temporary directory lifecycle, error/timeout handling.
- `server/_core/index.ts`: register conversion endpoint ahead of static/Vite handlers.
- `Dockerfile`: install the LibreOffice components and compatible fonts required by the endpoint in the production container.
- `client/src/index.css`: design tokens, responsive dashboard, upload/dropzone, queue/result states and reduced-motion rules.
- `client/public/manus-routes.json`: single `/` page route declaration; `client/index.html` browser metadata and favicon.
- `plan.md`, `TODO.md`: design/implementation decisions and user-scope outcome tracking.

## Design exploration

1. Swiss editorial document studio — probability 0.07.
2. Bright, playful consumer utility — probability 0.04.
3. Neon glassmorphism control room — probability 0.03.

**Chosen: Swiss editorial document studio.**

- **Design Movement:** Swiss International Typographic Style translated into a warm, contemporary document workspace.
- **Core Principles:** Strong typographic hierarchy; calm surfaces with precise contrast; direct visibility of file state; useful controls before decoration.
- **Color Philosophy:** Warm paper-white and deep ink communicate care and reliability; saturated cobalt is the action color, with a restrained chartreuse detail that distinguishes AM without overwhelming document content.
- **Layout Paradigm:** An editorial split workspace—narrow identity rail, expansive upload/queue surface, and a contextual conversion panel; stacked into one clear column on phones.
- **Signature Elements:** Compact AM page-fold monogram; a fine cobalt guide-line with numbered process stages; paper-like file tiles with small animated status markers.
- **Interaction Philosophy:** Drop, select, process, preview and download are always obvious; progress is attached to each file; errors explain how to recover.
- **Animation:** Use brief spring-like entry and hover transitions, drag-over border glow, a restrained orbit on the processing mark, and smooth per-file progress/status changes; respect `prefers-reduced-motion` and never animate the PDF content itself.
- **Typography System:** Manrope for expressive headlines and navigation; Inter for utility text and file details; large compact headline, medium labels, small muted metadata with readable contrast.
- **Brand Essence:** A practical, privacy-aware PDF workspace for share-ready files—precise, calm, capable.
- **Brand Voice:** Clear, reassuring, action-oriented. Example: “Your layout goes with you.” “A temporary conversion. A polished PDF.”
- **Wordmark & Logo:** Custom folded-page outline with an AM monogram, paired with a two-line “AM / PDF CONVERTOR” wordmark.
- **Signature Brand Color:** Cobalt blue, used consistently for the convert action, key focus ring and process line.

## UI enhancement request (2026-10-28)

The user requested: “is ka UI ko enhance karo, animation add karo, or mara name bhi add karo, ‘Abdullah Mahmood’.” Keep the approved document-studio aesthetic, but raise visual polish with stronger top-bar product identity, an owner attribution that is easy to see, refined glass/paper layering and micro-interactions around the upload target, file cards and conversion status. Motion should be brief, purposeful and reduced-motion aware; do not add distracting perpetual motion or change conversion behavior.

## Portfolio link and follow-up motion request (2026-10-28)

The user requested: “is ma mara portfolio ka link do, ‘abdullahweb.com, or animation add karo”. Make the visible `abdullahweb.com` portfolio address a real external HTTPS link on the Abdullah Mahmood creator attribution, open it safely in a new tab, and add a few more subtle, purposeful hover/drag interactions. Preserve responsive behavior and `prefers-reduced-motion` handling; do not alter file conversion or privacy behavior.

## Constraints

LibreOffice preserves the source document layout far more reliably than text extraction, but it is not Microsoft Office; fonts absent from the runtime and proprietary rendering differences can still cause small visual changes. Office files are temporarily uploaded to this app's server only when the user starts conversion and are not stored durably. Images, PDFs and plain text remain client-side. Browser memory/decoder availability still bounds image handling and file size.