@papervault/core 0.1.0

package/src/templates/styles.js

@@ -0,0 +1,282 @@
+// Shared CSS for vault + key pages.
+// Designed for A4 print output. Single page per HTML document.
+// @page rule sets the print size; @media print hides any browser chrome.
+
+export const SHARED_CSS = `
+@page {
+    size: A4;
+    margin: 15mm;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+    margin: 0;
+    padding: 0;
+    background: #fff;
+    color: #2c3e50;
+    font-family: Helvetica, Arial, sans-serif;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+body {
+    padding: 20px;
+    max-width: 210mm;
+    margin: 0 auto;
+}
+
+@media print {
+    body { padding: 0; max-width: none; }
+}
+
+.layout {
+    display: flex;
+    flex-direction: row;
+    gap: 30px;
+    align-items: flex-start;
+}
+
+.qr-column {
+    flex: 0 0 280px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.qr-box {
+    width: 280px;
+    height: 280px;
+    border: 1px dotted #ccc;
+    border-radius: 8px;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+}
+
+.qr-box img { width: 100%; height: 100%; object-fit: contain; }
+
+.qr-label {
+    font-size: 11px;
+    font-weight: bold;
+    color: #495057;
+    text-align: center;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.do-not-fold {
+    font-size: 14px;
+    font-weight: bold;
+    font-style: italic;
+    color: #dc3545;
+    text-align: center;
+    margin-top: 15px;
+}
+
+.info-column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.header-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.page-title {
+    font-size: 20px;
+    font-weight: bold;
+    font-family: Helvetica, Arial, sans-serif;
+    margin: 0;
+    color: #2c3e50;
+}
+
+.color-strip {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+}
+
+.color-swatch {
+    width: 28px;
+    height: 28px;
+    border: 1px solid #333;
+    border-radius: 4px;
+}
+
+.ascii-art {
+    font-family: 'Courier New', monospace;
+    font-size: 11px;
+    line-height: 1.1;
+    white-space: pre;
+    text-align: center;
+    color: #2c3e50;
+    margin: 0;
+}
+
+.key-alias-display {
+    font-size: 22px;
+    font-weight: bold;
+    color: #0d6efd;
+    text-align: center;
+    margin-top: 8px;
+    letter-spacing: 0.5px;
+}
+
+.panel {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 16px;
+}
+
+.panel-white {
+    background: #fff;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 16px;
+}
+
+.panel-warning {
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 8px;
+    padding: 14px;
+}
+
+.panel h3 {
+    font-size: 16px;
+    margin: 0 0 8px 0;
+    color: #2c3e50;
+}
+
+.panel ol {
+    font-size: 13px;
+    margin: 0;
+    padding-left: 20px;
+    color: #495057;
+    line-height: 1.5;
+}
+
+.panel p {
+    font-size: 13px;
+    margin: 8px 0 0 0;
+    color: #495057;
+    line-height: 1.5;
+}
+
+.detail-row {
+    font-size: 13px;
+    color: #495057;
+    line-height: 1.7;
+}
+
+.detail-row strong { color: #2c3e50; }
+
+.key-pill {
+    display: inline-block;
+    padding: 2px 8px;
+    margin: 2px 4px 2px 0;
+    background: #e9ecef;
+    border: 1px solid #ced4da;
+    border-radius: 12px;
+    font-size: 12px;
+    color: #495057;
+}
+
+.warning-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #856404;
+    margin-bottom: 4px;
+}
+
+.warning-body {
+    font-size: 13px;
+    color: #856404;
+}
+
+.toolbar {
+    /* Hidden in print. Shown only in browser, used by selector iframe. */
+    display: none;
+}
+
+@media screen {
+    .auto-print-notice {
+        position: fixed;
+        top: 12px;
+        right: 12px;
+        background: #2c3e50;
+        color: #fff;
+        padding: 8px 14px;
+        border-radius: 6px;
+        font-size: 13px;
+        font-family: Helvetica, Arial, sans-serif;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
+        z-index: 1000;
+    }
+}
+
+@media print {
+    .auto-print-notice { display: none !important; }
+}
+`;
+
+// ASCII art reused from the React PDFVaultBackup + PDFKeyBackup components.
+// Each line is right-padded to the widest line so `text-align: center` plus
+// `white-space: pre` doesn't center each row independently — otherwise the
+// columns drift. Editors that strip trailing whitespace would silently break
+// the alignment, so we compute the padding at runtime instead of relying on
+// the source-file spaces being preserved.
+
+function rightPadBlock(lines) {
+    const width = Math.max(...lines.map(l => l.length));
+    return lines.map(l => l.padEnd(width)).join('\n');
+}
+
+export const VAULT_ASCII = rightPadBlock([
+    ' ██╗   ██╗ █████╗ ██╗   ██╗██╗  ████████╗',
+    ' ██║   ██║██╔══██╗██║   ██║██║  ╚══██╔══╝',
+    ' ██║   ██║███████║██║   ██║██║     ██║',
+    ' ╚██╗ ██╔╝██╔══██║██║   ██║██║     ██║',
+    '  ╚████╔╝ ██║  ██║╚██████╔╝███████╗██║',
+    '   ╚═══╝  ╚═╝  ╚═╝ ╚═════╝ ╚══════╝╚═╝',
+]);
+
+export const KEY_ASCII = rightPadBlock([
+    ' ██╗  ██╗███████╗██╗   ██╗',
+    ' ██║ ██╔╝██╔════╝╚██╗ ██╔╝',
+    ' █████╔╝ █████╗   ╚████╔╝',
+    ' ██╔═██╗ ██╔══╝    ╚██╔╝',
+    ' ██║  ██╗███████╗   ██║',
+    ' ╚═╝  ╚═╝╚══════╝   ╚═╝',
+]);
+
+// Default 3-color identifier strip — matches the web app's defaults.
+export const DEFAULT_COLORS = ['#FF0000', '#0000FF', '#008000'];
+
+/** Basic HTML escape. Used for any user-supplied string. */
+export function esc(s) {
+    return String(s ?? '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+/** Format a unix-seconds timestamp as YYYY-MM-DD HH:mm:ss in local time. */
+export function formatTime(unixSeconds) {
+    const d = new Date(unixSeconds * 1000);
+    const pad = (n) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ` +
+        `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+}

package/src/templates/vault.js

@@ -0,0 +1,144 @@
+import QRCode from 'qrcode';
+import { SHARED_CSS, VAULT_ASCII, DEFAULT_COLORS, esc, formatTime } from './styles.js';
+import { VAULT_IDENT, VAULT_VERSION } from '../constants.js';
+
+// Match PDFVaultBackup.jsx: payloads ≤420 bytes go in one QR; larger payloads
+// split into a metadata QR + a data-only QR. Web-app unlock supports both.
+const SINGLE_QR_BYTE_THRESHOLD = 420;
+
+async function qrDataUrl(payload) {
+    return QRCode.toDataURL(payload, {
+        errorCorrectionLevel: 'M',
+        width: 280,
+        margin: 2,
+    });
+}
+
+/**
+ * Build the inner content for a vault page (the `<div class="layout">…</div>`
+ * block, without any `<html>/<head>/<body>` wrapper). Reused by both
+ * generateVaultPage (standalone preview) and generatePrintAllPage (kit).
+ */
+export async function buildVaultBody(opts) {
+    const {
+        vaultName,
+        cipherText,
+        cipherIV,
+        threshold,
+        keyAliases,
+        createdAt,
+        colors = DEFAULT_COLORS,
+    } = opts;
+
+    const shares = keyAliases.length;
+
+    const combined = JSON.stringify({
+        id: 1,
+        vault: VAULT_IDENT,
+        version: VAULT_VERSION,
+        name: vaultName,
+        shares,
+        threshold,
+        cipherIV,
+        keys: keyAliases,
+        data: cipherText,
+    });
+    const combinedBytes = new TextEncoder().encode(combined).length;
+
+    let qrs;
+    if (combinedBytes <= SINGLE_QR_BYTE_THRESHOLD) {
+        qrs = [{ label: null, dataUrl: await qrDataUrl(combined) }];
+    } else {
+        const metadataPayload = JSON.stringify({
+            id: 1,
+            vault: VAULT_IDENT,
+            version: VAULT_VERSION,
+            name: vaultName,
+            shares,
+            threshold,
+            cipherIV,
+            keys: keyAliases,
+            qrcodes: 2,
+        });
+        const dataPayload = JSON.stringify({ id: 2, data: cipherText });
+        qrs = [
+            { label: 'Vault QR 1 of 2', dataUrl: await qrDataUrl(metadataPayload) },
+            { label: 'Vault QR 2 of 2', dataUrl: await qrDataUrl(dataPayload) },
+        ];
+    }
+
+    const qrBlocks = qrs.map(qr => `
+        ${qr.label ? `<div class="qr-label">${esc(qr.label)}</div>` : ''}
+        <div class="qr-box"><img src="${qr.dataUrl}" alt="Vault QR"></div>
+    `).join('');
+
+    const colorStrip = colors.map(c => `<span class="color-swatch" style="background:${esc(c)}"></span>`).join('');
+    const keyPills = keyAliases.map(k => `<span class="key-pill">${esc(k)}</span>`).join(' ');
+
+    return `<div class="layout">
+    <div class="qr-column">
+        ${qrBlocks}
+        <div class="do-not-fold">DO NOT FOLD</div>
+    </div>
+    <div class="info-column">
+        <div class="header-row">
+            <h1 class="page-title">PAPERVAULT.XYZ VAULT</h1>
+            <div class="color-strip">${colorStrip}</div>
+        </div>
+        <pre class="ascii-art">${VAULT_ASCII}</pre>
+        <div class="panel">
+            <h3>How to Unlock</h3>
+            <ol>
+                <li>Go to <strong>papervault.xyz/unlock</strong></li>
+                <li>Go offline</li>
+                <li>Scan your vault QR code${qrs.length > 1 ? 's' : ''} (this page)</li>
+                <li>Scan ${threshold} key${threshold > 1 ? 's' : ''}</li>
+            </ol>
+            <p>The unlock utility is open source: https://github.com/boazeb/papervault</p>
+        </div>
+        <div class="panel-white">
+            <h3>Vault Details</h3>
+            <div class="detail-row"><strong>Name:</strong> ${esc(vaultName)}</div>
+            <div class="detail-row"><strong>Keys Required:</strong> ${threshold} of ${shares}</div>
+            <div class="detail-row"><strong>Created:</strong> ${esc(formatTime(createdAt))}</div>
+            <div class="detail-row" style="margin-top:8px;"><strong>Key Names:</strong></div>
+            <div style="margin-top:4px;">${keyPills}</div>
+        </div>
+        <div class="panel-warning">
+            <div class="warning-title">🔒 KEEP SECURE</div>
+            <div class="warning-body">Store this vault in a safe private location.</div>
+        </div>
+    </div>
+</div>`;
+}
+
+/**
+ * Standalone vault page (full HTML document). Used for individual previews.
+ *
+ * @param {object} opts                   See buildVaultBody, plus:
+ * @param {boolean} [opts.autoPrint]      Trigger window.print() on load
+ * @returns {Promise<string>}             Complete HTML document
+ */
+export async function generateVaultPage(opts) {
+    const body = await buildVaultBody(opts);
+    const autoPrintScript = opts.autoPrint
+        ? `<script>window.addEventListener('load', () => { setTimeout(() => window.print(), 200); });</script>`
+        : '';
+    const notice = opts.autoPrint
+        ? '<div class="auto-print-notice">Opening print dialog…</div>'
+        : '';
+
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>PaperVault — ${esc(opts.vaultName)}</title>
+<style>${SHARED_CSS}</style>
+</head>
+<body>
+${notice}
+${body}
+${autoPrintScript}
+</body>
+</html>`;
+}