fix(BUG-006,007,008): copy feedback, invoice data unwrap, zero margins

BUG-007: Unwrap req.body.data for template endpoint (docs show wrapped format)
BUG-008: Default PDF margins set to 0 (user can override via request body)
BUG-006: Copy button shows Copied! for 2s then reverts

public/app.js

@@ -66,8 +66,8 @@ async function submitSignup() {
 function copyKey() {
   var key = document.getElementById('apiKeyDisplay').textContent;
   navigator.clipboard.writeText(key).then(function() {
-    document.querySelector('.copy-hint').textContent = '✓ Copied!';
+    var btn = document.getElementById('apiKeyDisplay'); var origText = btn.textContent; btn.textContent = 'Copied!'; document.querySelector('.copy-hint').textContent = '✓ Copied!';
-    setTimeout(function() { document.querySelector('.copy-hint').textContent = 'Click to copy'; }, 2000);
+    setTimeout(function() { btn.textContent = origText; document.querySelector('.copy-hint').textContent = 'Click to copy';
   });
 }
 
@@ -81,3 +81,13 @@ async function checkout() {
     alert('Something went wrong. Please try again.');
   }
 }
+
+// BUG-005 fix: attach all click handlers via JS instead of inline onclick
+document.addEventListener('DOMContentLoaded', function() {
+  document.getElementById('btn-signup').addEventListener('click', openSignup);
+  document.getElementById('btn-signup-2').addEventListener('click', openSignup);
+  document.getElementById('btn-checkout').addEventListener('click', checkout);
+  document.getElementById('btn-close-signup').addEventListener('click', closeSignup);
+  document.getElementById('signupBtn').addEventListener('click', submitSignup);
+  document.getElementById('apiKeyDisplay').addEventListener('click', copyKey);
+});

public/index.html

@@ -91,7 +91,7 @@ footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.
     <h1>HTML & Markdown to <span>PDF</span></h1>
     <p>One API call. Beautiful PDFs. Built-in invoice templates. No headless browser setup, no dependencies, no hassle.</p>
     <div class="hero-actions">
-      <button class="btn btn-primary" onclick="openSignup()">Get Free API Key</button>
+      <button class="btn btn-primary" id="btn-signup">Get Free API Key</button>
       <a href="/docs" class="btn btn-secondary">View Docs</a>
     </div>
     <div class="code-hero">
@@ -193,7 +193,7 @@ footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.
           <li>All templates</li>
           <li>Community support</li>
         </ul>
-        <button class="btn btn-secondary" style="width:100%" onclick="openSignup()">Get Free Key</button>
+        <button class="btn btn-secondary" style="width:100%" id="btn-signup-2">Get Free Key</button>
       </div>
       <div class="price-card featured">
         <h3>Pro</h3>
@@ -205,7 +205,7 @@ footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.
           <li>Priority support</li>
           <li>Custom templates</li>
         </ul>
-        <button class="btn btn-primary" style="width:100%" onclick="checkout()">Get Started</button>
+        <button class="btn btn-primary" style="width:100%" id="btn-checkout">Get Started</button>
       </div>
     </div>
   </div>
@@ -220,18 +220,18 @@ footer { padding: 40px 0; text-align: center; color: var(--muted); font-size: 0.
 <!-- Signup Modal -->
 <div class="modal-overlay" id="signupModal">
   <div class="modal" style="position:relative">
-    <button class="close" onclick="closeSignup()">&times;</button>
+    <button class="close" id="btn-close-signup">&times;</button>
     <div id="signupForm">
       <h2>Get Your Free API Key</h2>
       <p>Enter your email and get an API key instantly. No credit card required.</p>
       <div class="error" id="signupError"></div>
       <input type="email" id="signupEmail" placeholder="you@example.com" autofocus>
-      <button class="btn btn-primary" style="width:100%" onclick="submitSignup()" id="signupBtn">Get API Key</button>
+      <button class="btn btn-primary" style="width:100%" id="signupBtn">Get API Key</button>
     </div>
     <div class="key-result" id="keyResult">
       <h2>🚀 You're in!</h2>
       <p>Here's your API key. <strong>Save it now</strong> — it won't be shown again.</p>
-      <div class="key-box" id="apiKeyDisplay" onclick="copyKey()" title="Click to copy"></div>
+      <div class="key-box" id="apiKeyDisplay" title="Click to copy"></div>
       <div class="copy-hint">Click to copy</div>
       <p style="margin-top:24px;color:var(--muted);font-size:0.9rem;">100 free PDFs/month • All endpoints • <a href="/docs">View docs →</a></p>
     </div>

src/routes/templates.ts

@@ -25,7 +25,7 @@ templatesRouter.post("/:id/render", async (req: Request, res: Response) => {
       return;
     }
 
-    const data = req.body;
+    const data = req.body.data || req.body;
     const html = renderTemplate(id, data);
     const pdf = await renderPdf(html, {
       format: data._format || "A4",

src/services/browser.ts

@@ -39,10 +39,10 @@ export async function renderPdf(
       landscape: options.landscape || false,
       printBackground: options.printBackground !== false,
       margin: options.margin || {
-        top: "20mm",
+        top: "0",
-        right: "15mm",
+        right: "0",
-        bottom: "20mm",
+        bottom: "0",
-        left: "15mm",
+        left: "0",
       },
       headerTemplate: options.headerTemplate,
       footerTemplate: options.footerTemplate,
@@ -79,10 +79,10 @@ export async function renderUrlPdf(
       landscape: options.landscape || false,
       printBackground: options.printBackground !== false,
       margin: options.margin || {
-        top: "20mm",
+        top: "0",
-        right: "15mm",
+        right: "0",
-        bottom: "20mm",
+        bottom: "0",
-        left: "15mm",
+        left: "0",
       },
     });