From 63078612b1907a35079cf53433636fc0c0b1ebfe Mon Sep 17 00:00:00 2001
From: Mark Randall Havens <mark.r.havens@gmail.com>
Date: Sun, 9 Nov 2025 20:17:11 +0000
Subject: [PATCH] update

---
 package.json      |  2 +-
 public/app.js     | 25 +++++++++++++++++++++----
 public/styles.css | 22 ++++++++++++++++++++++
 3 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 64b5031..e1bfa08 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "the-fold-within",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "dependencies": {
     "pdf-parse": "^1.1.1"
   }
diff --git a/public/app.js b/public/app.js
index cee598a..93c8638 100755
--- a/public/app.js
+++ b/public/app.js
@@ -256,23 +256,40 @@ async function renderMarkdown(rel) {
 }
 
 function renderIframe(rel) {
+  const viewer = els.viewer;
+  const container = document.createElement("div");
+  container.className = "preview-wrapper";
+
+  const header = document.createElement("div");
+  header.className = "preview-header";
+  header.innerHTML = `<button class="popout-btn" data-src="${rel}">Open Full View ↗</button>`;
+
   const iframe = document.createElement("iframe");
   iframe.src = "/" + rel;
   iframe.loading = "eager";
   iframe.setAttribute("sandbox", "allow-same-origin allow-scripts allow-forms");
-  els.viewer.appendChild(iframe);
+
+  container.appendChild(header);
+  container.appendChild(iframe);
+  viewer.appendChild(container);
+
+  header.querySelector(".popout-btn").addEventListener("click", e => {
+    const url = e.target.dataset.src.startsWith("/") ? e.target.dataset.src : "/" + e.target.dataset.src;
+    window.open(url, "_blank", "noopener,noreferrer");
+  });
 
   iframe.onload = () => {
     try {
       const doc = iframe.contentDocument;
       const style = doc.createElement("style");
       style.textContent = `
-        html,body{background:#0b0b0b;color:#e6e3d7;font-family:Inter,sans-serif;margin:0;padding:2rem;}
+        html,body{background:#0b0b0b;color:#e6e3d7;font-family:Inter,sans-serif;
+                  margin:0;padding:2rem;}
         *{max-width:720px;margin:auto;}
-        img, video, iframe {max-width:100%;height:auto;}
+        img,video,iframe{max-width:100%;height:auto;}
       `;
       doc.head.appendChild(style);
-    } catch (e) {}
+    } catch {}
   };
 }
 
diff --git a/public/styles.css b/public/styles.css
index 2e0363b..0499fed 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -195,3 +195,25 @@ body.sidebar-open #sidebar { transform: translateX(0); }
   border: 0; border-radius: var(--radius); background: transparent;
   display: block;
 }
+
+/* === POP-OUT PREVIEW === */
+.preview-header {
+  text-align: right;
+  background: rgba(224,184,75,0.08);
+  border-bottom: 1px solid #333;
+  padding: .4rem 1rem;
+}
+.popout-btn {
+  background: none;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  border-radius: 6px;
+  padding: .25rem .6rem;
+  font-size: .85rem;
+  cursor: pointer;
+  transition: all .25s ease;
+}
+.popout-btn:hover {
+  background: var(--accent);
+  color: var(--bg);
+}