From 64d8fc9ce9922f38780cc677478cbfb47b21a87e Mon Sep 17 00:00:00 2001
From: Kyle Javier [kj_sh604]
Date: Mon, 16 Mar 2026 14:24:34 -0400
Subject: merge: python rewrite (#1)

* refactor: Dockerfile

* refactor: docker-compose.yml

* refactor: docker-entrypoint.sh

* refactor: src/font.php

* refactor: src/fonts.php

* refactor: src/index.php

* refactor: src/upload.php

* refactor: src/app.py

* refactor: src/index.html

* refactor: src/requirements.txt

* refactor: 24.04 vps compatibility and README re-write

* refactor: python .gitignore update

* refactor: README.md---
 src/app.py           | 188 +++++++++++++
 src/font.php         |  50 ----
 src/fonts.php        |  77 ------
 src/index.html       | 742 ++++++++++++++++++++++++++++++++++++++++++++++++++
 src/index.php        | 743 ---------------------------------------------------
 src/requirements.txt |   3 +
 src/upload.php       |  66 -----
 7 files changed, 933 insertions(+), 936 deletions(-)
 create mode 100644 src/app.py
 delete mode 100644 src/font.php
 delete mode 100644 src/fonts.php
 create mode 100644 src/index.html
 delete mode 100644 src/index.php
 create mode 100644 src/requirements.txt
 delete mode 100644 src/upload.php

(limited to 'src')

diff --git a/src/app.py b/src/app.py
new file mode 100644
index 0000000..7d75f2b
--- /dev/null
+++ b/src/app.py
@@ -0,0 +1,188 @@
+#!/usr/bin/env python3
+
+import base64
+import os
+import re
+import secrets
+import subprocess
+from pathlib import Path
+
+import magic
+from flask import Flask, Response, jsonify, request, send_file, send_from_directory
+
+app = Flask(__name__, static_folder=None)
+app.config["MAX_CONTENT_LENGTH"] = 50 * 1024 * 1024  # 50 MB upload cap
+
+UPLOAD_DIR = Path(__file__).parent / "uploads"
+UPLOAD_DIR.mkdir(mode=0o755, exist_ok=True)
+
+ALLOWED_MIME = {
+    "image/png":     "png",
+    "image/jpeg":    "jpg",
+    "image/gif":     "gif",
+    "image/webp":    "webp",
+    "image/svg+xml": "svg",
+    "image/bmp":     "bmp",
+}
+
+# build list of allowed font directories
+_FONT_DIRS: list[Path] = [
+    Path("/usr/share/fonts"),
+    Path("/usr/local/share/fonts"),
+]
+for _home in Path("/home").glob("*"):
+    _FONT_DIRS.append(_home / ".local" / "share" / "fonts")
+    _FONT_DIRS.append(_home / ".fonts")
+
+
+def _allowed_font_dirs() -> list[str]:
+    """return resolved, existent font dirs with trailing separator."""
+    out = []
+    for d in _FONT_DIRS:
+        try:
+            out.append(str(d.resolve(strict=True)) + os.sep)
+        except (OSError, RuntimeError):
+            pass
+    return out
+
+
+@app.route("/")
+def index():
+    return send_from_directory(app.root_path, "index.html")
+
+
+@app.route("/uploads/<filename>")
+def uploads(filename: str):
+    return send_from_directory(UPLOAD_DIR, filename)
+
+
+@app.route("/upload", methods=["POST"])
+def upload():
+    if "image" not in request.files:
+        return jsonify({"error": "no file provided"}), 400
+
+    f = request.files["image"]
+    if not f.filename:
+        return jsonify({"error": "empty filename"}), 400
+
+    data = f.read()
+    if not data:
+        return jsonify({"error": "empty file"}), 400
+
+    mime = magic.from_buffer(data, mime=True)
+    if mime not in ALLOWED_MIME:
+        return jsonify({"error": f"invalid file type: {mime}"}), 400
+
+    ext = ALLOWED_MIME[mime]
+    basename = re.sub(r"[^a-zA-Z0-9_-]", "_", Path(f.filename).stem)[:64]
+    filename = f"{basename}_{secrets.token_hex(4)}.{ext}"
+
+    (UPLOAD_DIR / filename).write_bytes(data)
+
+    return jsonify({"filename": filename, "url": f"uploads/{filename}"})
+
+
+@app.route("/fonts")
+def fonts():
+    try:
+        result = subprocess.run(
+            ["fc-list", "--format=%{family}|%{style}|%{file}\n"],
+            capture_output=True,
+            text=True,
+            shell=False,
+            timeout=10,
+            check=False,
+        )
+    except (FileNotFoundError, subprocess.TimeoutExpired):
+        return jsonify([])
+
+    if result.returncode != 0:
+        return jsonify([])
+
+    if not result.stdout.strip():
+        return jsonify([])
+
+    def style_score(style: str) -> int:
+        s = style.strip().lower()
+        if s in ("regular", "roman", "book", "text"):
+            return 0
+        if s == "bold":
+            return 1
+        if "italic" in s or "oblique" in s:
+            return 2
+        return 3
+
+    best: dict[str, dict] = {}
+    for line in result.stdout.splitlines():
+        parts = line.split("|", 2)
+        if len(parts) < 3:
+            continue
+        family = parts[0].split(",")[0].strip()
+        if not family:
+            continue
+        style     = parts[1].split(",")[0].strip()
+        file_path = parts[2].strip()
+        if not Path(file_path).exists():
+            continue
+        score = style_score(style)
+        if family not in best or score < best[family]["score"]:
+            best[family] = {"file": file_path, "score": score}
+
+    fmt_map = {"ttf": "truetype", "otf": "opentype", "woff": "woff", "woff2": "woff2"}
+    fonts_list = [
+        {
+            "family": family,
+            "file":   base64.b64encode(entry["file"].encode()).decode(),
+            "format": fmt_map.get(Path(entry["file"]).suffix.lstrip(".").lower(), "truetype"),
+        }
+        for family, entry in best.items()
+    ]
+    fonts_list.sort(key=lambda x: x["family"].casefold())
+
+    resp = jsonify(fonts_list)
+    resp.headers["Cache-Control"] = "public, max-age=3600"
+    return resp
+
+
+@app.route("/font")
+def font():
+    encoded = request.args.get("f", "")
+    if not encoded:
+        return Response("missing parameter", status=400)
+
+    try:
+        file_str = base64.b64decode(encoded).decode("utf-8")
+    except Exception:
+        return Response("invalid parameter", status=400)
+
+    # null byte guard
+    if "\x00" in file_str:
+        return Response("invalid parameter", status=400)
+
+    p = Path(file_str)
+    if not p.exists():
+        return Response("font not found", status=404)
+
+    try:
+        real = p.resolve(strict=True)
+    except (OSError, RuntimeError):
+        return Response("font not found", status=404)
+
+    # path traversal guard: real path must be under an allowed font dir
+    real_str = str(real) + os.sep
+    if not any(real_str.startswith(d) for d in _allowed_font_dirs()):
+        return Response("access denied", status=403)
+
+    mime_map = {
+        "ttf":   "font/ttf",
+        "otf":   "font/otf",
+        "woff":  "font/woff",
+        "woff2": "font/woff2",
+    }
+    mime = mime_map.get(real.suffix.lstrip(".").lower(), "application/octet-stream")
+
+    return send_file(real, mimetype=mime, max_age=31536000, conditional=True)
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=3000)
diff --git a/src/font.php b/src/font.php
deleted file mode 100644
index d12ceb8..0000000
--- a/src/font.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-/* font.php — serve font files from the server's font directories */
-
-$encoded = $_GET['f'] ?? '';
-if (empty($encoded)) {
-    http_response_code(400);
-    exit('Missing parameter');
-}
-
-$file = base64_decode($encoded, true);
-if ($file === false || !file_exists($file)) {
-    http_response_code(404);
-    exit('Font not found');
-}
-
-$real    = realpath($file);
-$allowed = ['/usr/share/fonts', '/usr/local/share/fonts'];
-
-foreach (glob('/home/*', GLOB_ONLYDIR) as $home) {
-    $allowed[] = $home . '/.local/share/fonts';
-    $allowed[] = $home . '/.fonts';
-}
-
-$ok = false;
-
-foreach ($allowed as $dir) {
-    if (str_starts_with($real, realpath($dir) ?: $dir)) {
-        $ok = true;
-        break;
-    }
-}
-
-if (!$ok) {
-    http_response_code(403);
-    exit('Access denied');
-}
-
-$ext  = strtolower(pathinfo($file, PATHINFO_EXTENSION));
-$mime = match ($ext) {
-    'ttf'   => 'font/ttf',
-    'otf'   => 'font/otf',
-    'woff'  => 'font/woff',
-    'woff2' => 'font/woff2',
-    default => 'application/octet-stream',
-};
-
-header("Content-Type: $mime");
-header('Cache-Control: public, max-age=31536000, immutable');
-header('Content-Length: ' . filesize($file));
-readfile($file);
diff --git a/src/fonts.php b/src/fonts.php
deleted file mode 100644
index 6d7912b..0000000
--- a/src/fonts.php
+++ /dev/null
@@ -1,77 +0,0 @@
-<?php
-// fonts.php — LIST server-side fonts via fontconfig
-
-header('Content-Type: application/json');
-header('Cache-Control: public, max-age=3600');
-
-/* get list of installed fonts using fc-list */
-$cmd  = ['fc-list', '--format=%{family}|%{style}|%{file}\n'];
-$desc = [1 => ['pipe', 'w'], 2 => ['pipe', 'w']];
-$proc = proc_open($cmd, $desc, $pipes);
-
-$output = '';
-if (is_resource($proc)) {
-    $output = stream_get_contents($pipes[1]);
-    fclose($pipes[1]);
-    fclose($pipes[2]);
-    proc_close($proc);
-}
-if (!$output) {
-    echo json_encode([]);
-    exit;
-}
-
-$lines = array_filter(explode("\n", trim($output)));
-$best  = []; // family => ['file' => ..., 'score' => ...]
-
-/* lower score = higher priority */
-$style_score = static function (string $style): int {
-    $s = strtolower(trim($style));
-    if ($s === 'regular' || $s === 'roman' || $s === 'book' || $s === 'text') return 0;
-    if ($s === 'bold')                                                        return 1;
-    if (str_contains($s, 'italic') || str_contains($s, 'oblique'))            return 2;
-    return 3;
-};
-
-foreach ($lines as $line) {
-    $parts = explode('|', $line, 3);
-    if (count($parts) < 3) continue;
-
-    /* take first family name (some entries are comma-separated) */
-    $families = explode(',', $parts[0]);
-    $family   = trim($families[0]);
-
-    if (empty($family)) continue;
-
-    $style = trim(explode(',', $parts[1])[0]);
-    $file  = trim($parts[2]);
-    if (!file_exists($file)) continue;
-
-    $score = $style_score($style);
-
-    if (!isset($best[$family]) || $score < $best[$family]['score']) {
-        $best[$family] = ['file' => $file, 'score' => $score];
-    }
-}
-
-$fonts = [];
-foreach ($best as $family => $entry) {
-    $file   = $entry['file'];
-    $ext    = strtolower(pathinfo($file, PATHINFO_EXTENSION));
-    $format = match ($ext) {
-        'ttf'   => 'truetype',
-        'otf'   => 'opentype',
-        'woff'  => 'woff',
-        'woff2' => 'woff2',
-        default => 'truetype',
-    };
-
-    $fonts[] = [
-        'family' => $family,
-        'file'   => base64_encode($file),
-        'format' => $format,
-    ];
-}
-
-usort($fonts, fn($a, $b) => strcasecmp($a['family'], $b['family']));
-echo json_encode($fonts);
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..ef2f584
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,742 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>sent-web</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kj-sh604/noir.css@latest/out/noir.min.css">
+    <style> :root { --sent-fg: #000000; --sent-bg: #ffffff; --sent-font: 'Noto Color Emoji', 'DejaVu Sans', sans-serif; } body { max-width: 960px; margin: 0 auto; padding: 1rem; } .subtitle { opacity: 0.6; font-size: 0.9em; margin-top: -0.8em; } /* ── controls ── */ #controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-radius: 4px; } #controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } #controls input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid currentColor; cursor: pointer; background: none; } #controls select { max-width: 200px; } .upload-area { display: flex; align-items: center; gap: 0.5rem; } #upload-input { display: none; } #upload-status { font-size: 0.85rem; opacity: 0.7; } /* ── editor ── */ #input { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.95rem; resize: vertical; tab-size: 4; } .btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; opacity: 0.5; margin-top: 0.25rem; } /* ── presentation overlay ── */ #presentation { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: flex-start; background: var(--sent-bg); color: var(--sent-fg); cursor: none; overflow: hidden; padding-left: 7.5%; } #presentation.active { display: flex; } #slide-content { text-align: left; white-space: pre-line; word-wrap: break-word; font-family: var(--sent-font); } #slide-content img { display: block; max-width: 85vw; max-height: 85vh; object-fit: contain; } </style>
+    <script>
+    /*
+    @licstart  The following is the entire license notice for the
+    JavaScript code in this page.
+
+    Copyright (c) 2026 kj_sh604/kj-sh604/kjsh604
+
+    SPDX-License-Identifier: MIT
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+
+    @licend  The above is the entire license notice
+    for the JavaScript code in this page.
+    */
+    </script>
+</head>
+
+<body>
+
+    <header>
+        <h1>sent-web</h1>
+        <p class="subtitle">suckless's sent tool ported to the very sucky web world</p>
+    </header>
+
+    <main>
+        <section id="controls">
+            <label>
+                fg
+                <input type="color" id="fg-color" value="#000000">
+            </label>
+            <label>
+                bg
+                <input type="color" id="bg-color" value="#ffffff">
+            </label>
+            <label>
+                font
+                <select id="font-select">
+                    <option value="">loading…</option>
+                </select>
+            </label>
+            <div class="upload-area">
+                <button type="button" onclick="document.getElementById('upload-input').click()">upload image</button>
+                <input type="file" id="upload-input" accept="image/*">
+                <span id="upload-status"></span>
+            </div>
+        </section>
+
+        <textarea id="input">
+sent-web
+
+a port of suckless sent
+for the very sucky web 🌎
+
+# this is a comment and will not appear
+# the next slide is blank slide since we escaped with \
+
+\
+
+@nyan_819cac51.png
+
+why?
+• PPTX sucks
+• LATEX sucks
+• PDF sucks
+• but everything is in 
+  the web now 😓
+
+easy to use
+
+▸ one slide per paragraph
+▸ lines starting with # are ignored
+▸ image slide: @filename
+▸ empty slide: just use \
+
+navigate with:
+← → ↑ ↓ h j k l
+space, enter, backspace
+or mouse clicks
+
+press escape to exit
+
+😀😁😂😃😄😅😆😇😈😉😊
+emoji just works™
+
+thanks.
+questions?</textarea>
+
+        <div class="btn-row">
+            <button type="button" id="btn-present" onclick="App.startPresentation()">present</button>
+            <button type="button" onclick="App.downloadSent()">download for local sent usage</button>
+            <button type="button" onclick="App.exportPDF()">export .pdf</button>
+        </div>
+        <p class="hint">F5 to present · Esc to exit · ← → h l j k space enter to navigate</p>
+    </main>
+
+    <!-- presentation overlay -->
+    <div id="presentation">
+        <div id="slide-content"></div>
+    </div>
+
+    <script>
+        // sent-web — vanilla JS presentation engine
+
+        const App = {
+            slides: [],
+            idx: 0,
+            presenting: false,
+            loadedFonts: new Set(),
+
+            settings: {
+                fg: '#000000',
+                bg: '#ffffff',
+                fontFamily: '',
+                lineSpacing: 1.25,
+                usableWidth: 0.85,
+                usableHeight: 0.85,
+            },
+
+            init() {
+                this.restoreState();
+                this.loadFonts();
+                this.bindEvents();
+                this.updateColors();
+            },
+
+            restoreState() {
+                const saved = localStorage.getItem('sent-web-content');
+                if (saved !== null) {
+                    document.getElementById('input').value = saved;
+                }
+
+                const raw = localStorage.getItem('sent-web-settings');
+                if (raw) {
+                    try {
+                        const s = JSON.parse(raw);
+                        if (s.fg) {
+                            this.settings.fg = s.fg;
+                            document.getElementById('fg-color').value = s.fg;
+                        }
+                        if (s.bg) {
+                            this.settings.bg = s.bg;
+                            document.getElementById('bg-color').value = s.bg;
+                        }
+                        if (s.fontFamily) this.settings.fontFamily = s.fontFamily;
+                    } catch (_) {}
+                }
+            },
+
+            saveSettings() {
+                localStorage.setItem('sent-web-settings', JSON.stringify({
+                    fg: this.settings.fg,
+                    bg: this.settings.bg,
+                    fontFamily: this.settings.fontFamily,
+                }));
+            },
+
+            async loadFonts() {
+                try {
+                    const res = await fetch('/fonts');
+                    const data = await res.json();
+                    const sel = document.getElementById('font-select');
+                    sel.innerHTML = '';
+
+                    // preload fallback fonts
+                    const notoEmoji = data.find(f => f.family === 'Noto Color Emoji');
+                    const dejavu = data.find(f => f.family.startsWith('DejaVu Sans') && !f.family.includes('Mono'));
+
+                    if (notoEmoji) await this.loadFont(notoEmoji);
+                    if (dejavu) await this.loadFont(dejavu);
+
+                    // populate dropdown
+                    let selectedOpt = null;
+                    data.forEach(f => {
+                        const opt = document.createElement('option');
+                        opt.value = JSON.stringify(f);
+                        opt.textContent = f.family;
+                        sel.appendChild(opt);
+
+                        // restore saved selection or default to DejaVu Sans
+                        if (this.settings.fontFamily && f.family === this.settings.fontFamily) {
+                            selectedOpt = opt;
+                        } else if (!this.settings.fontFamily && dejavu && f.family === dejavu.family) {
+                            selectedOpt = opt;
+                        }
+                    });
+
+                    if (selectedOpt) selectedOpt.selected = true;
+                    this.onFontChange();
+                } catch (e) {
+                    console.error('Failed to load fonts:', e);
+                }
+            },
+
+            async loadFont(fontData) {
+                if (this.loadedFonts.has(fontData.family)) return;
+
+                try {
+                    const url = `/font?f=${encodeURIComponent(fontData.file)}`;
+                    const src = `local('${fontData.family}'), url(${url}) format('${fontData.format}')`;
+                    const face = new FontFace(fontData.family, src, {
+                        display: 'swap'
+                    });
+                    const loaded = await face.load();
+                    document.fonts.add(loaded);
+                    this.loadedFonts.add(fontData.family);
+                } catch (e) {
+                    console.warn(`Could not load font "${fontData.family}":`, e);
+                }
+            },
+
+            async onFontChange() {
+                const sel = document.getElementById('font-select');
+                if (!sel.value) return;
+
+                const fontData = JSON.parse(sel.value);
+                this.settings.fontFamily = fontData.family;
+                await this.loadFont(fontData);
+
+                const stack = `'${fontData.family}', 'Noto Color Emoji', 'DejaVu Sans', sans-serif`;
+                document.documentElement.style.setProperty('--sent-font', stack);
+
+                this.saveSettings();
+                if (this.presenting) this.renderSlide();
+            },
+
+            bindEvents() {
+                document.getElementById('fg-color').addEventListener('input', () => this.updateColors());
+                document.getElementById('bg-color').addEventListener('input', () => this.updateColors());
+                document.getElementById('font-select').addEventListener('change', () => this.onFontChange());
+                document.getElementById('upload-input').addEventListener('change', e => this.handleUpload(e));
+
+                document.getElementById('input').addEventListener('input', () => {
+                    localStorage.setItem('sent-web-content', document.getElementById('input').value);
+                });
+
+                document.addEventListener('keydown', e => this.handleKeydown(e));
+
+                const pres = document.getElementById('presentation');
+                pres.addEventListener('click', e => {
+                    if (e.clientX < window.innerWidth / 2) this.navigate(-1);
+                    else this.navigate(1);
+                });
+                pres.addEventListener('wheel', e => {
+                    e.preventDefault();
+                    this.navigate(e.deltaY > 0 ? 1 : -1);
+                }, {
+                    passive: false
+                });
+
+                window.addEventListener('resize', () => {
+                    if (this.presenting) this.renderSlide();
+                });
+
+                // stop presentation whenever fullscreen is exited (covers browser-
+                // intercepted Escape that never reaches the keydown handler).
+                document.addEventListener('fullscreenchange', () => {
+                    if (!document.fullscreenElement && this.presenting) {
+                        this.stopPresentation();
+                    } else if (document.fullscreenElement && this.presenting) {
+                        this.renderSlide();
+                    }
+                });
+            },
+
+            updateColors() {
+                this.settings.fg = document.getElementById('fg-color').value;
+                this.settings.bg = document.getElementById('bg-color').value;
+                document.documentElement.style.setProperty('--sent-fg', this.settings.fg);
+                document.documentElement.style.setProperty('--sent-bg', this.settings.bg);
+                this.saveSettings();
+                if (this.presenting) this.renderSlide();
+            },
+
+            // sent format parser
+            parseSent(text) {
+                const slides = [];
+                const paragraphs = text.split(/\n{2,}/);
+
+                for (const para of paragraphs) {
+                    const rawLines = para.split('\n');
+                    const lines = [];
+                    let img = null;
+                    let firstContent = true;
+
+                    for (const raw of rawLines) {
+                        if (raw.trim() === '' || raw.startsWith('#')) continue;
+
+                        let line = raw;
+
+                        if (firstContent && line.startsWith('@')) {
+                            img = line.substring(1).trim();
+                            firstContent = false;
+                            continue;
+                        }
+                        firstContent = false;
+
+                        // image slides ignore remaining text lines
+                        if (img !== null) continue;
+
+                        // strip leading backslash (escape)
+                        if (line.startsWith('\\')) {
+                            line = line.substring(1);
+                        }
+
+                        lines.push(line);
+                    }
+
+                    if (img !== null || lines.length > 0) {
+                        slides.push({
+                            lines,
+                            img
+                        });
+                    }
+                }
+
+                return slides;
+            },
+
+            // presentation controls
+            startPresentation() {
+                const text = document.getElementById('input').value;
+                this.slides = this.parseSent(text);
+
+                if (this.slides.length === 0) {
+                    alert('No slides to present.');
+                    return;
+                }
+
+                this.idx = 0;
+                this.presenting = true;
+                document.getElementById('presentation').classList.add('active');
+                document.body.style.overflow = 'hidden';
+
+                const el = document.getElementById('presentation');
+                if (el.requestFullscreen) el.requestFullscreen().catch(() => {});
+
+                this.renderSlide();
+            },
+
+            stopPresentation() {
+                this.presenting = false;
+                document.getElementById('presentation').classList.remove('active');
+                document.body.style.overflow = '';
+
+                if (document.fullscreenElement) {
+                    document.exitFullscreen().catch(() => {});
+                }
+            },
+
+            navigate(dir) {
+                if (!this.presenting) return;
+                const next = this.idx + dir;
+                if (next >= 0 && next < this.slides.length) {
+                    this.idx = next;
+                    this.renderSlide();
+                }
+            },
+
+            // rendering engine
+            renderSlide() {
+                if (!this.presenting || this.slides.length === 0) return;
+
+                const slide = this.slides[this.idx];
+                const content = document.getElementById('slide-content');
+                const pres = document.getElementById('presentation');
+
+                pres.style.backgroundColor = this.settings.bg;
+                pres.style.color = this.settings.fg;
+
+                content.innerHTML = '';
+
+                if (slide.img) {
+                    // center image slides — override the text-layout defaults
+                    pres.style.justifyContent = 'center';
+                    pres.style.alignItems = 'center';
+                    pres.style.paddingLeft = '0';
+                    const img = document.createElement('img');
+                    if (slide.img.startsWith('http://') || slide.img.startsWith('https://')) {
+                        img.src = slide.img;
+                    } else {
+                        img.src = 'uploads/' + slide.img;
+                    }
+                    img.alt = slide.img;
+                    // changed to reflect the fullscreen viewport.
+                    const pw = pres.offsetWidth || window.innerWidth;
+                    const ph = pres.offsetHeight || window.innerHeight;
+                    const maxW = Math.floor(pw * this.settings.usableWidth);
+                    const maxH = Math.floor(ph * this.settings.usableHeight);
+                    img.style.width = maxW + 'px';
+                    img.style.height = maxH + 'px';
+                    img.style.maxWidth = maxW + 'px';
+                    img.style.maxHeight = maxH + 'px';
+                    img.style.objectFit = 'contain';
+                    img.style.display = 'block';
+                    content.appendChild(img);
+                } else {
+                    // restore text-layout defaults
+                    pres.style.justifyContent = 'flex-start';
+                    pres.style.alignItems = 'center';
+                    pres.style.paddingLeft = '7.5%';
+                    const fontSize = this.calcFontSize(slide.lines);
+                    content.style.fontSize = fontSize + 'px';
+                    content.style.lineHeight = String(this.settings.lineSpacing);
+
+                    slide.lines.forEach((line, i) => {
+                        if (i > 0) content.appendChild(document.createElement('br'));
+                        content.appendChild(document.createTextNode(line));
+                    });
+                }
+
+            },
+
+            calcFontSize(lines) {
+                const maxW = window.innerWidth * this.settings.usableWidth;
+                const maxH = window.innerHeight * this.settings.usableHeight;
+                const font = getComputedStyle(document.documentElement)
+                    .getPropertyValue('--sent-font').trim() || 'sans-serif';
+
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                let lo = 1,
+                    hi = 500,
+                    best = 1;
+
+                while (lo <= hi) {
+                    const mid = Math.floor((lo + hi) / 2);
+                    ctx.font = `${mid}px ${font}`;
+
+                    let fits = true;
+                    for (const line of lines) {
+                        if (ctx.measureText(line).width > maxW) {
+                            fits = false;
+                            break;
+                        }
+                    }
+
+                    // height check: line-spacing × (n-1) + 1 base height
+                    const totalH = mid * this.settings.lineSpacing * (lines.length - 1) + mid;
+                    if (totalH > maxH) fits = false;
+
+                    if (fits) {
+                        best = mid;
+                        lo = mid + 1;
+                    } else {
+                        hi = mid - 1;
+                    }
+                }
+
+                return best;
+            },
+
+            // keyboard handler
+
+            handleKeydown(e) {
+                // F5 to start presentation from editor
+                if (!this.presenting && e.key === 'F5') {
+                    e.preventDefault();
+                    this.startPresentation();
+                    return;
+                }
+
+                if (!this.presenting) return;
+
+                switch (e.key) {
+                    case 'Escape':
+                    case 'q':
+                        e.preventDefault();
+                        this.stopPresentation();
+                        break;
+                    case 'ArrowRight':
+                    case 'ArrowDown':
+                    case ' ':
+                    case 'Enter':
+                    case 'l':
+                    case 'j':
+                    case 'n':
+                    case 'PageDown':
+                        e.preventDefault();
+                        this.navigate(1);
+                        break;
+                    case 'ArrowLeft':
+                    case 'ArrowUp':
+                    case 'Backspace':
+                    case 'h':
+                    case 'k':
+                    case 'p':
+                    case 'PageUp':
+                        e.preventDefault();
+                        this.navigate(-1);
+                        break;
+                }
+            },
+
+            // image upload
+
+            async handleUpload(e) {
+                const file = e.target.files[0];
+                if (!file) return;
+
+                const status = document.getElementById('upload-status');
+                status.textContent = 'uploading…';
+
+                const fd = new FormData();
+                fd.append('image', file);
+
+                try {
+                    const res = await fetch('/upload', {
+                        method: 'POST',
+                        body: fd
+                    });
+                    const data = await res.json();
+
+                    if (data.error) {
+                        status.textContent = 'error: ' + data.error;
+                        return;
+                    }
+
+                    // insert @filename at cursor position
+                    const ta = document.getElementById('input');
+                    const pos = ta.selectionStart;
+                    const txt = ta.value;
+                    const ins = `\n@${data.filename}\n`;
+                    ta.value = txt.substring(0, pos) + ins + txt.substring(pos);
+                    ta.selectionStart = ta.selectionEnd = pos + ins.length;
+                    ta.focus();
+
+                    localStorage.setItem('sent-web-content', ta.value);
+                    status.textContent = `uploaded: ${data.filename}`;
+                    setTimeout(() => {
+                        status.textContent = '';
+                    }, 3000);
+                } catch (err) {
+                    status.textContent = 'upload failed';
+                    console.error(err);
+                }
+
+                e.target.value = '';
+            },
+
+            // download .sent file for local usage (base64-encoded to preserve unicode and avoid filename issues)
+            downloadSent() {
+                const text = document.getElementById('input').value;
+                const blob = new Blob([text], {
+                    type: 'text/plain'
+                });
+                const a = document.createElement('a');
+                a.href = URL.createObjectURL(blob);
+                a.download = 'presentation.sent';
+                a.click();
+                URL.revokeObjectURL(a.href);
+            },
+
+            // download pdf export of the presentation from canvas
+            async exportPDF() {
+                const text = document.getElementById('input').value;
+                const slides = this.parseSent(text);
+
+                if (slides.length === 0) {
+                    alert('No slides to export.');
+                    return;
+                }
+
+                const btn = document.querySelector('button[onclick="App.exportPDF()"]');
+                if (btn) {
+                    btn.textContent = 'generating pdf…';
+                    btn.disabled = true;
+                }
+
+                try {
+                    if (!window.jspdf) {
+                        await new Promise((resolve, reject) => {
+                            const s = document.createElement('script');
+                            s.src = 'https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js';
+                            s.onload = resolve;
+                            s.onerror = () => reject(new Error('Failed to load jsPDF'));
+                            document.head.appendChild(s);
+                        });
+                    }
+
+                    // 1440p canvas per slide — rasterise via browser engine
+                    // (handles fonts, unicode, emoji, images exactly as the live view does)
+                    const W = 2560;
+                    const H = 1440;
+
+                    const {
+                        jsPDF
+                    } = window.jspdf;
+                    // px unit + hotfix keeps jsPDF from rescaling our pixel-perfect canvases
+                    const pdf = new jsPDF({
+                        orientation: 'landscape',
+                        unit: 'px',
+                        format: [W, H],
+                        hotfixes: ['px_scaling'],
+                    });
+
+                    for (let i = 0; i < slides.length; i++) {
+                        const canvas = await this.renderSlideToCanvas(slides[i], W, H);
+                        const imgData = canvas.toDataURL('image/jpeg', 0.93);
+
+                        if (i > 0) pdf.addPage([W, H], 'landscape');
+                        pdf.addImage(imgData, 'JPEG', 0, 0, W, H);
+                    }
+
+                    const epoch = Math.floor(Date.now() / 1000);
+                    const uid = crypto.randomUUID().replace(/-/g, '').slice(0, 8);
+                    pdf.save(`sent-web${epoch}-${uid}.pdf`);
+
+                } catch (err) {
+                    console.error('PDF export failed:', err);
+                    alert('PDF export failed: ' + err.message);
+                } finally {
+                    if (btn) {
+                        btn.textContent = 'export .pdf';
+                        btn.disabled = false;
+                    }
+                }
+            },
+
+            // render one slide to an off-screen canvas, mirrors renderSlide() exactly
+            async renderSlideToCanvas(slide, W, H) {
+                const canvas = document.createElement('canvas');
+                canvas.width = W;
+                canvas.height = H;
+                const ctx = canvas.getContext('2d');
+
+                const usable = this.settings.usableWidth; // 0.85
+                const maxW = W * usable;
+                const maxH = H * usable;
+                const marginX = (W - maxW) / 2;
+
+                // resolve the same font stack the live view uses
+                const fontStack = getComputedStyle(document.documentElement)
+                    .getPropertyValue('--sent-font').trim() || 'sans-serif';
+
+                // background
+                ctx.fillStyle = this.settings.bg;
+                ctx.fillRect(0, 0, W, H);
+
+                if (slide.img) {
+                    // image slide — draw the actual image
+                    await new Promise((resolve) => {
+                        const img = new Image();
+                        img.crossOrigin = 'anonymous';
+                        img.onload = () => {
+                            const ratio = img.naturalWidth / img.naturalHeight;
+                            let dw = maxW,
+                                dh = maxH;
+                            if (dw / dh > ratio) dw = dh * ratio;
+                            else dh = dw / ratio;
+                            ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);
+                            resolve();
+                        };
+                        img.onerror = resolve; // still produce a page even on failure
+                        img.src = (slide.img.startsWith('http://') || slide.img.startsWith('https://')) ?
+                            slide.img :
+                            'uploads/' + slide.img;
+                    });
+                } else {
+                    // text slide — left-aligned, same sizing logic as live view
+                    const fontSize = this.calcFontSizeCanvas(ctx, slide.lines, fontStack, maxW, maxH);
+
+                    ctx.font = `${fontSize}px ${fontStack}`;
+                    ctx.fillStyle = this.settings.fg;
+                    ctx.textBaseline = 'middle';
+
+                    const lineH = fontSize * this.settings.lineSpacing;
+                    const totalH = slide.lines.length * lineH;
+                    const startX = marginX;
+                    const startY = (H - totalH) / 2;
+
+                    slide.lines.forEach((line, i) => {
+                        ctx.fillText(line, startX, startY + (i + 0.5) * lineH);
+                    });
+                }
+
+                return canvas;
+            },
+
+            // binary-search font size on a canvas context for given absolute dimensions
+            calcFontSizeCanvas(ctx, lines, fontStack, maxW, maxH) {
+                let lo = 1,
+                    hi = 600,
+                    best = 1;
+
+                while (lo <= hi) {
+                    const mid = Math.floor((lo + hi) / 2);
+                    ctx.font = `${mid}px ${fontStack}`;
+
+                    let fits = true;
+                    for (const line of lines) {
+                        if (ctx.measureText(line).width > maxW) {
+                            fits = false;
+                            break;
+                        }
+                    }
+
+                    const totalH = mid * this.settings.lineSpacing * (lines.length - 1) + mid;
+                    if (totalH > maxH) fits = false;
+
+                    if (fits) {
+                        best = mid;
+                        lo = mid + 1;
+                    } else {
+                        hi = mid - 1;
+                    }
+                }
+
+                return best;
+            },
+        };
+
+        document.addEventListener('DOMContentLoaded', () => App.init());
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/index.php b/src/index.php
deleted file mode 100644
index f855f39..0000000
--- a/src/index.php
+++ /dev/null
@@ -1,743 +0,0 @@
-<?php /* sent-web — index.php */ ?>
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>sent-web</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kj-sh604/noir.css@latest/out/noir.min.css">
-    <style> :root { --sent-fg: #000000; --sent-bg: #ffffff; --sent-font: 'Noto Color Emoji', 'DejaVu Sans', sans-serif; } body { max-width: 960px; margin: 0 auto; padding: 1rem; } .subtitle { opacity: 0.6; font-size: 0.9em; margin-top: -0.8em; } /* ── controls ── */ #controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 0.75rem; border: 1px solid currentColor; border-radius: 4px; } #controls label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; } #controls input[type="color"] { width: 2rem; height: 2rem; padding: 0; border: 1px solid currentColor; cursor: pointer; background: none; } #controls select { max-width: 200px; } .upload-area { display: flex; align-items: center; gap: 0.5rem; } #upload-input { display: none; } #upload-status { font-size: 0.85rem; opacity: 0.7; } /* ── editor ── */ #input { width: 100%; min-height: 420px; font-family: monospace; font-size: 0.95rem; resize: vertical; tab-size: 4; } .btn-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .hint { font-size: 0.8rem; opacity: 0.5; margin-top: 0.25rem; } /* ── presentation overlay ── */ #presentation { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: flex-start; background: var(--sent-bg); color: var(--sent-fg); cursor: none; overflow: hidden; padding-left: 7.5%; } #presentation.active { display: flex; } #slide-content { text-align: left; white-space: pre-line; word-wrap: break-word; font-family: var(--sent-font); } #slide-content img { display: block; max-width: 85vw; max-height: 85vh; object-fit: contain; } </style>
-    <script>
-    /*
-    @licstart  The following is the entire license notice for the
-    JavaScript code in this page.
-
-    Copyright (c) 2026 kj_sh604/kj-sh604/kjsh604
-
-    SPDX-License-Identifier: MIT
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE.
-
-    @licend  The above is the entire license notice
-    for the JavaScript code in this page.
-    */
-    </script>
-</head>
-
-<body>
-
-    <header>
-        <h1>sent-web</h1>
-        <p class="subtitle">suckless's sent tool ported to the very sucky web world</p>
-    </header>
-
-    <main>
-        <section id="controls">
-            <label>
-                fg
-                <input type="color" id="fg-color" value="#000000">
-            </label>
-            <label>
-                bg
-                <input type="color" id="bg-color" value="#ffffff">
-            </label>
-            <label>
-                font
-                <select id="font-select">
-                    <option value="">loading…</option>
-                </select>
-            </label>
-            <div class="upload-area">
-                <button type="button" onclick="document.getElementById('upload-input').click()">upload image</button>
-                <input type="file" id="upload-input" accept="image/*">
-                <span id="upload-status"></span>
-            </div>
-        </section>
-
-        <textarea id="input">
-sent-web
-
-a port of suckless sent
-for the very sucky web 🌎
-
-# this is a comment and will not appear
-# the next slide is blank slide since we escaped with \
-
-\
-
-@nyan_819cac51.png
-
-why?
-• PPTX sucks
-• LATEX sucks
-• PDF sucks
-• but everything is in 
-  the web now 😓
-
-easy to use
-
-▸ one slide per paragraph
-▸ lines starting with # are ignored
-▸ image slide: @filename
-▸ empty slide: just use \
-
-navigate with:
-← → ↑ ↓ h j k l
-space, enter, backspace
-or mouse clicks
-
-press escape to exit
-
-😀😁😂😃😄😅😆😇😈😉😊
-emoji just works™
-
-thanks.
-questions?</textarea>
-
-        <div class="btn-row">
-            <button type="button" id="btn-present" onclick="App.startPresentation()">present</button>
-            <button type="button" onclick="App.downloadSent()">download for local sent usage</button>
-            <button type="button" onclick="App.exportPDF()">export .pdf</button>
-        </div>
-        <p class="hint">F5 to present · Esc to exit · ← → h l j k space enter to navigate</p>
-    </main>
-
-    <!-- presentation overlay -->
-    <div id="presentation">
-        <div id="slide-content"></div>
-    </div>
-
-    <script>
-        // sent-web — vanilla JS presentation engine
-
-        const App = {
-            slides: [],
-            idx: 0,
-            presenting: false,
-            loadedFonts: new Set(),
-
-            settings: {
-                fg: '#000000',
-                bg: '#ffffff',
-                fontFamily: '',
-                lineSpacing: 1.25,
-                usableWidth: 0.85,
-                usableHeight: 0.85,
-            },
-
-            init() {
-                this.restoreState();
-                this.loadFonts();
-                this.bindEvents();
-                this.updateColors();
-            },
-
-            restoreState() {
-                const saved = localStorage.getItem('sent-web-content');
-                if (saved !== null) {
-                    document.getElementById('input').value = saved;
-                }
-
-                const raw = localStorage.getItem('sent-web-settings');
-                if (raw) {
-                    try {
-                        const s = JSON.parse(raw);
-                        if (s.fg) {
-                            this.settings.fg = s.fg;
-                            document.getElementById('fg-color').value = s.fg;
-                        }
-                        if (s.bg) {
-                            this.settings.bg = s.bg;
-                            document.getElementById('bg-color').value = s.bg;
-                        }
-                        if (s.fontFamily) this.settings.fontFamily = s.fontFamily;
-                    } catch (_) {}
-                }
-            },
-
-            saveSettings() {
-                localStorage.setItem('sent-web-settings', JSON.stringify({
-                    fg: this.settings.fg,
-                    bg: this.settings.bg,
-                    fontFamily: this.settings.fontFamily,
-                }));
-            },
-
-            async loadFonts() {
-                try {
-                    const res = await fetch('fonts.php');
-                    const data = await res.json();
-                    const sel = document.getElementById('font-select');
-                    sel.innerHTML = '';
-
-                    // preload fallback fonts
-                    const notoEmoji = data.find(f => f.family === 'Noto Color Emoji');
-                    const dejavu = data.find(f => f.family.startsWith('DejaVu Sans') && !f.family.includes('Mono'));
-
-                    if (notoEmoji) await this.loadFont(notoEmoji);
-                    if (dejavu) await this.loadFont(dejavu);
-
-                    // populate dropdown
-                    let selectedOpt = null;
-                    data.forEach(f => {
-                        const opt = document.createElement('option');
-                        opt.value = JSON.stringify(f);
-                        opt.textContent = f.family;
-                        sel.appendChild(opt);
-
-                        // restore saved selection or default to DejaVu Sans
-                        if (this.settings.fontFamily && f.family === this.settings.fontFamily) {
-                            selectedOpt = opt;
-                        } else if (!this.settings.fontFamily && dejavu && f.family === dejavu.family) {
-                            selectedOpt = opt;
-                        }
-                    });
-
-                    if (selectedOpt) selectedOpt.selected = true;
-                    this.onFontChange();
-                } catch (e) {
-                    console.error('Failed to load fonts:', e);
-                }
-            },
-
-            async loadFont(fontData) {
-                if (this.loadedFonts.has(fontData.family)) return;
-
-                try {
-                    const url = `font.php?f=${encodeURIComponent(fontData.file)}`;
-                    const src = `local('${fontData.family}'), url(${url}) format('${fontData.format}')`;
-                    const face = new FontFace(fontData.family, src, {
-                        display: 'swap'
-                    });
-                    const loaded = await face.load();
-                    document.fonts.add(loaded);
-                    this.loadedFonts.add(fontData.family);
-                } catch (e) {
-                    console.warn(`Could not load font "${fontData.family}":`, e);
-                }
-            },
-
-            async onFontChange() {
-                const sel = document.getElementById('font-select');
-                if (!sel.value) return;
-
-                const fontData = JSON.parse(sel.value);
-                this.settings.fontFamily = fontData.family;
-                await this.loadFont(fontData);
-
-                const stack = `'${fontData.family}', 'Noto Color Emoji', 'DejaVu Sans', sans-serif`;
-                document.documentElement.style.setProperty('--sent-font', stack);
-
-                this.saveSettings();
-                if (this.presenting) this.renderSlide();
-            },
-
-            bindEvents() {
-                document.getElementById('fg-color').addEventListener('input', () => this.updateColors());
-                document.getElementById('bg-color').addEventListener('input', () => this.updateColors());
-                document.getElementById('font-select').addEventListener('change', () => this.onFontChange());
-                document.getElementById('upload-input').addEventListener('change', e => this.handleUpload(e));
-
-                document.getElementById('input').addEventListener('input', () => {
-                    localStorage.setItem('sent-web-content', document.getElementById('input').value);
-                });
-
-                document.addEventListener('keydown', e => this.handleKeydown(e));
-
-                const pres = document.getElementById('presentation');
-                pres.addEventListener('click', e => {
-                    if (e.clientX < window.innerWidth / 2) this.navigate(-1);
-                    else this.navigate(1);
-                });
-                pres.addEventListener('wheel', e => {
-                    e.preventDefault();
-                    this.navigate(e.deltaY > 0 ? 1 : -1);
-                }, {
-                    passive: false
-                });
-
-                window.addEventListener('resize', () => {
-                    if (this.presenting) this.renderSlide();
-                });
-
-                // stop presentation whenever fullscreen is exited (covers browser-
-                // intercepted Escape that never reaches the keydown handler).
-                document.addEventListener('fullscreenchange', () => {
-                    if (!document.fullscreenElement && this.presenting) {
-                        this.stopPresentation();
-                    } else if (document.fullscreenElement && this.presenting) {
-                        this.renderSlide();
-                    }
-                });
-            },
-
-            updateColors() {
-                this.settings.fg = document.getElementById('fg-color').value;
-                this.settings.bg = document.getElementById('bg-color').value;
-                document.documentElement.style.setProperty('--sent-fg', this.settings.fg);
-                document.documentElement.style.setProperty('--sent-bg', this.settings.bg);
-                this.saveSettings();
-                if (this.presenting) this.renderSlide();
-            },
-
-            // sent format parser
-            parseSent(text) {
-                const slides = [];
-                const paragraphs = text.split(/\n{2,}/);
-
-                for (const para of paragraphs) {
-                    const rawLines = para.split('\n');
-                    const lines = [];
-                    let img = null;
-                    let firstContent = true;
-
-                    for (const raw of rawLines) {
-                        if (raw.trim() === '' || raw.startsWith('#')) continue;
-
-                        let line = raw;
-
-                        if (firstContent && line.startsWith('@')) {
-                            img = line.substring(1).trim();
-                            firstContent = false;
-                            continue;
-                        }
-                        firstContent = false;
-
-                        // image slides ignore remaining text lines
-                        if (img !== null) continue;
-
-                        // strip leading backslash (escape)
-                        if (line.startsWith('\\')) {
-                            line = line.substring(1);
-                        }
-
-                        lines.push(line);
-                    }
-
-                    if (img !== null || lines.length > 0) {
-                        slides.push({
-                            lines,
-                            img
-                        });
-                    }
-                }
-
-                return slides;
-            },
-
-            // presentation controls
-            startPresentation() {
-                const text = document.getElementById('input').value;
-                this.slides = this.parseSent(text);
-
-                if (this.slides.length === 0) {
-                    alert('No slides to present.');
-                    return;
-                }
-
-                this.idx = 0;
-                this.presenting = true;
-                document.getElementById('presentation').classList.add('active');
-                document.body.style.overflow = 'hidden';
-
-                const el = document.getElementById('presentation');
-                if (el.requestFullscreen) el.requestFullscreen().catch(() => {});
-
-                this.renderSlide();
-            },
-
-            stopPresentation() {
-                this.presenting = false;
-                document.getElementById('presentation').classList.remove('active');
-                document.body.style.overflow = '';
-
-                if (document.fullscreenElement) {
-                    document.exitFullscreen().catch(() => {});
-                }
-            },
-
-            navigate(dir) {
-                if (!this.presenting) return;
-                const next = this.idx + dir;
-                if (next >= 0 && next < this.slides.length) {
-                    this.idx = next;
-                    this.renderSlide();
-                }
-            },
-
-            // rendering engine
-            renderSlide() {
-                if (!this.presenting || this.slides.length === 0) return;
-
-                const slide = this.slides[this.idx];
-                const content = document.getElementById('slide-content');
-                const pres = document.getElementById('presentation');
-
-                pres.style.backgroundColor = this.settings.bg;
-                pres.style.color = this.settings.fg;
-
-                content.innerHTML = '';
-
-                if (slide.img) {
-                    // center image slides — override the text-layout defaults
-                    pres.style.justifyContent = 'center';
-                    pres.style.alignItems = 'center';
-                    pres.style.paddingLeft = '0';
-                    const img = document.createElement('img');
-                    if (slide.img.startsWith('http://') || slide.img.startsWith('https://')) {
-                        img.src = slide.img;
-                    } else {
-                        img.src = 'uploads/' + slide.img;
-                    }
-                    img.alt = slide.img;
-                    // changed to reflect the fullscreen viewport.
-                    const pw = pres.offsetWidth || window.innerWidth;
-                    const ph = pres.offsetHeight || window.innerHeight;
-                    const maxW = Math.floor(pw * this.settings.usableWidth);
-                    const maxH = Math.floor(ph * this.settings.usableHeight);
-                    img.style.width = maxW + 'px';
-                    img.style.height = maxH + 'px';
-                    img.style.maxWidth = maxW + 'px';
-                    img.style.maxHeight = maxH + 'px';
-                    img.style.objectFit = 'contain';
-                    img.style.display = 'block';
-                    content.appendChild(img);
-                } else {
-                    // restore text-layout defaults
-                    pres.style.justifyContent = 'flex-start';
-                    pres.style.alignItems = 'center';
-                    pres.style.paddingLeft = '7.5%';
-                    const fontSize = this.calcFontSize(slide.lines);
-                    content.style.fontSize = fontSize + 'px';
-                    content.style.lineHeight = String(this.settings.lineSpacing);
-
-                    slide.lines.forEach((line, i) => {
-                        if (i > 0) content.appendChild(document.createElement('br'));
-                        content.appendChild(document.createTextNode(line));
-                    });
-                }
-
-            },
-
-            calcFontSize(lines) {
-                const maxW = window.innerWidth * this.settings.usableWidth;
-                const maxH = window.innerHeight * this.settings.usableHeight;
-                const font = getComputedStyle(document.documentElement)
-                    .getPropertyValue('--sent-font').trim() || 'sans-serif';
-
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-
-                let lo = 1,
-                    hi = 500,
-                    best = 1;
-
-                while (lo <= hi) {
-                    const mid = Math.floor((lo + hi) / 2);
-                    ctx.font = `${mid}px ${font}`;
-
-                    let fits = true;
-                    for (const line of lines) {
-                        if (ctx.measureText(line).width > maxW) {
-                            fits = false;
-                            break;
-                        }
-                    }
-
-                    // height check: line-spacing × (n-1) + 1 base height
-                    const totalH = mid * this.settings.lineSpacing * (lines.length - 1) + mid;
-                    if (totalH > maxH) fits = false;
-
-                    if (fits) {
-                        best = mid;
-                        lo = mid + 1;
-                    } else {
-                        hi = mid - 1;
-                    }
-                }
-
-                return best;
-            },
-
-            // keyboard handler
-
-            handleKeydown(e) {
-                // F5 to start presentation from editor
-                if (!this.presenting && e.key === 'F5') {
-                    e.preventDefault();
-                    this.startPresentation();
-                    return;
-                }
-
-                if (!this.presenting) return;
-
-                switch (e.key) {
-                    case 'Escape':
-                    case 'q':
-                        e.preventDefault();
-                        this.stopPresentation();
-                        break;
-                    case 'ArrowRight':
-                    case 'ArrowDown':
-                    case ' ':
-                    case 'Enter':
-                    case 'l':
-                    case 'j':
-                    case 'n':
-                    case 'PageDown':
-                        e.preventDefault();
-                        this.navigate(1);
-                        break;
-                    case 'ArrowLeft':
-                    case 'ArrowUp':
-                    case 'Backspace':
-                    case 'h':
-                    case 'k':
-                    case 'p':
-                    case 'PageUp':
-                        e.preventDefault();
-                        this.navigate(-1);
-                        break;
-                }
-            },
-
-            // image upload
-
-            async handleUpload(e) {
-                const file = e.target.files[0];
-                if (!file) return;
-
-                const status = document.getElementById('upload-status');
-                status.textContent = 'uploading…';
-
-                const fd = new FormData();
-                fd.append('image', file);
-
-                try {
-                    const res = await fetch('upload.php', {
-                        method: 'POST',
-                        body: fd
-                    });
-                    const data = await res.json();
-
-                    if (data.error) {
-                        status.textContent = 'error: ' + data.error;
-                        return;
-                    }
-
-                    // insert @filename at cursor position
-                    const ta = document.getElementById('input');
-                    const pos = ta.selectionStart;
-                    const txt = ta.value;
-                    const ins = `\n@${data.filename}\n`;
-                    ta.value = txt.substring(0, pos) + ins + txt.substring(pos);
-                    ta.selectionStart = ta.selectionEnd = pos + ins.length;
-                    ta.focus();
-
-                    localStorage.setItem('sent-web-content', ta.value);
-                    status.textContent = `uploaded: ${data.filename}`;
-                    setTimeout(() => {
-                        status.textContent = '';
-                    }, 3000);
-                } catch (err) {
-                    status.textContent = 'upload failed';
-                    console.error(err);
-                }
-
-                e.target.value = '';
-            },
-
-            // download .sent file for local usage (base64-encoded to preserve unicode and avoid filename issues)
-            downloadSent() {
-                const text = document.getElementById('input').value;
-                const blob = new Blob([text], {
-                    type: 'text/plain'
-                });
-                const a = document.createElement('a');
-                a.href = URL.createObjectURL(blob);
-                a.download = 'presentation.sent';
-                a.click();
-                URL.revokeObjectURL(a.href);
-            },
-
-            // download pdf export of the presentation from canvas
-            async exportPDF() {
-                const text = document.getElementById('input').value;
-                const slides = this.parseSent(text);
-
-                if (slides.length === 0) {
-                    alert('No slides to export.');
-                    return;
-                }
-
-                const btn = document.querySelector('button[onclick="App.exportPDF()"]');
-                if (btn) {
-                    btn.textContent = 'generating pdf…';
-                    btn.disabled = true;
-                }
-
-                try {
-                    if (!window.jspdf) {
-                        await new Promise((resolve, reject) => {
-                            const s = document.createElement('script');
-                            s.src = 'https://cdn.jsdelivr.net/npm/jspdf@2.5.2/dist/jspdf.umd.min.js';
-                            s.onload = resolve;
-                            s.onerror = () => reject(new Error('Failed to load jsPDF'));
-                            document.head.appendChild(s);
-                        });
-                    }
-
-                    // 1440p canvas per slide — rasterise via browser engine
-                    // (handles fonts, unicode, emoji, images exactly as the live view does)
-                    const W = 2560;
-                    const H = 1440;
-
-                    const {
-                        jsPDF
-                    } = window.jspdf;
-                    // px unit + hotfix keeps jsPDF from rescaling our pixel-perfect canvases
-                    const pdf = new jsPDF({
-                        orientation: 'landscape',
-                        unit: 'px',
-                        format: [W, H],
-                        hotfixes: ['px_scaling'],
-                    });
-
-                    for (let i = 0; i < slides.length; i++) {
-                        const canvas = await this.renderSlideToCanvas(slides[i], W, H);
-                        const imgData = canvas.toDataURL('image/jpeg', 0.93);
-
-                        if (i > 0) pdf.addPage([W, H], 'landscape');
-                        pdf.addImage(imgData, 'JPEG', 0, 0, W, H);
-                    }
-
-                    const epoch = Math.floor(Date.now() / 1000);
-                    const uid = crypto.randomUUID().replace(/-/g, '').slice(0, 8);
-                    pdf.save(`sent-web${epoch}-${uid}.pdf`);
-
-                } catch (err) {
-                    console.error('PDF export failed:', err);
-                    alert('PDF export failed: ' + err.message);
-                } finally {
-                    if (btn) {
-                        btn.textContent = 'export .pdf';
-                        btn.disabled = false;
-                    }
-                }
-            },
-
-            // render one slide to an off-screen canvas, mirrors renderSlide() exactly
-            async renderSlideToCanvas(slide, W, H) {
-                const canvas = document.createElement('canvas');
-                canvas.width = W;
-                canvas.height = H;
-                const ctx = canvas.getContext('2d');
-
-                const usable = this.settings.usableWidth; // 0.85
-                const maxW = W * usable;
-                const maxH = H * usable;
-                const marginX = (W - maxW) / 2;
-
-                // resolve the same font stack the live view uses
-                const fontStack = getComputedStyle(document.documentElement)
-                    .getPropertyValue('--sent-font').trim() || 'sans-serif';
-
-                // background
-                ctx.fillStyle = this.settings.bg;
-                ctx.fillRect(0, 0, W, H);
-
-                if (slide.img) {
-                    // image slide — draw the actual image
-                    await new Promise((resolve) => {
-                        const img = new Image();
-                        img.crossOrigin = 'anonymous';
-                        img.onload = () => {
-                            const ratio = img.naturalWidth / img.naturalHeight;
-                            let dw = maxW,
-                                dh = maxH;
-                            if (dw / dh > ratio) dw = dh * ratio;
-                            else dh = dw / ratio;
-                            ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);
-                            resolve();
-                        };
-                        img.onerror = resolve; // still produce a page even on failure
-                        img.src = (slide.img.startsWith('http://') || slide.img.startsWith('https://')) ?
-                            slide.img :
-                            'uploads/' + slide.img;
-                    });
-                } else {
-                    // text slide — left-aligned, same sizing logic as live view
-                    const fontSize = this.calcFontSizeCanvas(ctx, slide.lines, fontStack, maxW, maxH);
-
-                    ctx.font = `${fontSize}px ${fontStack}`;
-                    ctx.fillStyle = this.settings.fg;
-                    ctx.textBaseline = 'middle';
-
-                    const lineH = fontSize * this.settings.lineSpacing;
-                    const totalH = slide.lines.length * lineH;
-                    const startX = marginX;
-                    const startY = (H - totalH) / 2;
-
-                    slide.lines.forEach((line, i) => {
-                        ctx.fillText(line, startX, startY + (i + 0.5) * lineH);
-                    });
-                }
-
-                return canvas;
-            },
-
-            // binary-search font size on a canvas context for given absolute dimensions
-            calcFontSizeCanvas(ctx, lines, fontStack, maxW, maxH) {
-                let lo = 1,
-                    hi = 600,
-                    best = 1;
-
-                while (lo <= hi) {
-                    const mid = Math.floor((lo + hi) / 2);
-                    ctx.font = `${mid}px ${fontStack}`;
-
-                    let fits = true;
-                    for (const line of lines) {
-                        if (ctx.measureText(line).width > maxW) {
-                            fits = false;
-                            break;
-                        }
-                    }
-
-                    const totalH = mid * this.settings.lineSpacing * (lines.length - 1) + mid;
-                    if (totalH > maxH) fits = false;
-
-                    if (fits) {
-                        best = mid;
-                        lo = mid + 1;
-                    } else {
-                        hi = mid - 1;
-                    }
-                }
-
-                return best;
-            },
-        };
-
-        document.addEventListener('DOMContentLoaded', () => App.init());
-    </script>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/src/requirements.txt b/src/requirements.txt
new file mode 100644
index 0000000..dfce493
--- /dev/null
+++ b/src/requirements.txt
@@ -0,0 +1,3 @@
+flask>=3.0,<3.2
+gunicorn>=22,<24
+python-magic>=0.4.27,<0.5
\ No newline at end of file
diff --git a/src/upload.php b/src/upload.php
deleted file mode 100644
index 62db139..0000000
--- a/src/upload.php
+++ /dev/null
@@ -1,66 +0,0 @@
-<?php
-/* upload.php — handle image uploads */
-
-header('Content-Type: application/json');
-
-if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
-    http_response_code(405);
-    echo json_encode(['error' => 'Method not allowed']);
-    exit;
-}
-
-if (!isset($_FILES['image']) || $_FILES['image']['error'] !== UPLOAD_ERR_OK) {
-    $code = $_FILES['image']['error'] ?? 'unknown';
-    http_response_code(400);
-    echo json_encode(['error' => "Upload failed (code: $code)"]);
-    exit;
-}
-
-$file    = $_FILES['image'];
-$allowed = [
-    'image/png', 'image/jpeg', 'image/gif',
-    'image/webp', 'image/svg+xml', 'image/bmp',
-];
-
-$finfo = finfo_open(FILEINFO_MIME_TYPE);
-$mime  = finfo_file($finfo, $file['tmp_name']);
-finfo_close($finfo);
-
-if (!in_array($mime, $allowed, true)) {
-    http_response_code(400);
-    echo json_encode(['error' => "Invalid file type: $mime"]);
-    exit;
-}
-
-$ext = match ($mime) {
-    'image/png'     => 'png',
-    'image/jpeg'    => 'jpg',
-    'image/gif'     => 'gif',
-    'image/webp'    => 'webp',
-    'image/svg+xml' => 'svg',
-    'image/bmp'     => 'bmp',
-    default         => 'bin',
-};
-
-/* generate safe filename */
-$basename = pathinfo($file['name'], PATHINFO_FILENAME);
-$basename = preg_replace('/[^a-zA-Z0-9_-]/', '_', $basename);
-$basename = substr($basename, 0, 64);
-$filename = $basename . '_' . bin2hex(random_bytes(4)) . '.' . $ext;
-
-$uploadDir = __DIR__ . '/uploads';
-if (!is_dir($uploadDir)) {
-    mkdir($uploadDir, 0755, true);
-}
-
-$dest = $uploadDir . '/' . $filename;
-if (!move_uploaded_file($file['tmp_name'], $dest)) {
-    http_response_code(500);
-    echo json_encode(['error' => 'Failed to save file']);
-    exit;
-}
-
-echo json_encode([
-    'filename' => $filename,
-    'url'      => 'uploads/' . $filename,
-]);
-- 
cgit v1.2.3