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

@@ -0,0 +1,93 @@
+function openSignup() {
+  document.getElementById('signupModal').classList.add('active');
+  document.getElementById('signupForm').style.display = 'block';
+  document.getElementById('keyResult').style.display = 'none';
+  document.getElementById('signupEmail').value = '';
+  document.getElementById('signupError').style.display = 'none';
+  setTimeout(function() { document.getElementById('signupEmail').focus(); }, 100);
+}
+
+function closeSignup() {
+  document.getElementById('signupModal').classList.remove('active');
+}
+
+// Close on overlay click
+document.getElementById('signupModal').addEventListener('click', function(e) {
+  if (e.target === this) closeSignup();
+});
+
+// Submit on Enter
+document.getElementById('signupEmail').addEventListener('keydown', function(e) {
+  if (e.key === 'Enter') submitSignup();
+});
+
+async function submitSignup() {
+  var email = document.getElementById('signupEmail').value.trim();
+  var errEl = document.getElementById('signupError');
+  var btn = document.getElementById('signupBtn');
+
+  if (!email) {
+    errEl.textContent = 'Please enter your email.';
+    errEl.style.display = 'block';
+    return;
+  }
+
+  btn.textContent = 'Creating...';
+  btn.disabled = true;
+
+  try {
+    var res = await fetch('/v1/signup/free', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ email: email })
+    });
+    var data = await res.json();
+
+    if (!res.ok) {
+      errEl.textContent = data.error || 'Something went wrong.';
+      errEl.style.display = 'block';
+      btn.textContent = 'Get API Key';
+      btn.disabled = false;
+      return;
+    }
+
+    // Show key
+    document.getElementById('signupForm').style.display = 'none';
+    document.getElementById('keyResult').style.display = 'block';
+    document.getElementById('apiKeyDisplay').textContent = data.apiKey;
+  } catch (err) {
+    errEl.textContent = 'Network error. Please try again.';
+    errEl.style.display = 'block';
+    btn.textContent = 'Get API Key';
+    btn.disabled = false;
+  }
+}
+
+function copyKey() {
+  var key = document.getElementById('apiKeyDisplay').textContent;
+  navigator.clipboard.writeText(key).then(function() {
+    var btn = document.getElementById('apiKeyDisplay'); var origText = btn.textContent; btn.textContent = 'Copied!'; document.querySelector('.copy-hint').textContent = '✓ Copied!';
+    setTimeout(function() { btn.textContent = origText; document.querySelector('.copy-hint').textContent = 'Click to copy';
+  });
+}
+
+async function checkout() {
+  try {
+    var res = await fetch('/v1/billing/checkout', { method: 'POST' });
+    var data = await res.json();
+    if (data.url) window.location.href = data.url;
+    else alert('Something went wrong. Please try again.');
+  } catch (err) {
+    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,108 +220,24 @@ 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>
   </div>
 </div>
 
-<script>
+<script src="/app.js"></script>
-function openSignup() {
-  document.getElementById('signupModal').classList.add('active');
-  document.getElementById('signupForm').style.display = 'block';
-  document.getElementById('keyResult').style.display = 'none';
-  document.getElementById('signupEmail').value = '';
-  document.getElementById('signupError').style.display = 'none';
-  setTimeout(() => document.getElementById('signupEmail').focus(), 100);
-}
-
-function closeSignup() {
-  document.getElementById('signupModal').classList.remove('active');
-}
-
-// Close on overlay click
-document.getElementById('signupModal').addEventListener('click', function(e) {
-  if (e.target === this) closeSignup();
-});
-
-// Submit on Enter
-document.getElementById('signupEmail').addEventListener('keydown', function(e) {
-  if (e.key === 'Enter') submitSignup();
-});
-
-async function submitSignup() {
-  const email = document.getElementById('signupEmail').value.trim();
-  const errEl = document.getElementById('signupError');
-  const btn = document.getElementById('signupBtn');
-
-  if (!email) {
-    errEl.textContent = 'Please enter your email.';
-    errEl.style.display = 'block';
-    return;
-  }
-
-  btn.textContent = 'Creating...';
-  btn.disabled = true;
-
-  try {
-    const res = await fetch('/v1/signup/free', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ email })
-    });
-    const data = await res.json();
-
-    if (!res.ok) {
-      errEl.textContent = data.error || 'Something went wrong.';
-      errEl.style.display = 'block';
-      btn.textContent = 'Get API Key';
-      btn.disabled = false;
-      return;
-    }
-
-    // Show key
-    document.getElementById('signupForm').style.display = 'none';
-    document.getElementById('keyResult').style.display = 'block';
-    document.getElementById('apiKeyDisplay').textContent = data.apiKey;
-  } catch (err) {
-    errEl.textContent = 'Network error. Please try again.';
-    errEl.style.display = 'block';
-    btn.textContent = 'Get API Key';
-    btn.disabled = false;
-  }
-}
-
-function copyKey() {
-  const key = document.getElementById('apiKeyDisplay').textContent;
-  navigator.clipboard.writeText(key).then(() => {
-    document.querySelector('.copy-hint').textContent = '✓ Copied!';
-    setTimeout(() => document.querySelector('.copy-hint').textContent = 'Click to copy', 2000);
-  });
-}
-
-async function checkout() {
-  try {
-    const res = await fetch('/v1/billing/checkout', { method: 'POST' });
-    const data = await res.json();
-    if (data.url) window.location.href = data.url;
-    else alert('Something went wrong. Please try again.');
-  } catch (err) {
-    alert('Something went wrong. Please try again.');
-  }
-}
-</script>
 </body>
 </html>

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",
       },
     });