pdf_signature/docs/wireframe.md

Wireframes

This document contains the product wireframes drawn in Excalidraw. The editable sources live under docs/wireframe.assets/*.excalidraw. For easy viewing, we generate an SVG-based copy at docs/.wireframe.md.

1 Welcome / First screen

Purpose: let the user open a PDF quickly via drag & drop or file picker.
Route: root

Design notes:

• Central drop zone with hint text: “Drag a PDF here or click to select”.
• Minimal top bar with app name and a gear icon for settings.
• Clean layout encouraging first action.

Illustration:

1-Settings dialog

Purpose: provide basic configuration before/after opening a PDF.
Route: root --> settings

Design notes:

• Opened via gear icon in the top bar.
• Modal with simple sections (e.g., General, Display).
• Primary action to save, secondary to cancel.

Illustration:

PDF opened

Purpose: view and navigate the PDF; prepare for signature placement.
Route: root --> opened

Design notes:

• Main canvas shows the current page.
• Navigation: previous/next page, zoom controls near the canvas.
• Space reserved for a future “Sign” tool in the toolbar.
• drag signature onto page

Illustration:

---

How to view and export

We keep links in this file pointing to .excalidraw. To preview the SVGs and generate docs/.wireframe.md with .svg links, run from repo root:

dart run tool/gen_view_wireframe_md.dart

This will:

• Copy docs/wireframe.md to docs/.wireframe.md and rewrite image links to .svg.
• Export any *.excalidraw under docs/ to *.svg if they are new or modified.

Next wireframes (optional)

• Save/Export result dialog and success state.