pxengine 0.1.74 → 0.1.76

package/dist/index.cjs

@@ -38864,23 +38864,26 @@ var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("svg", { w
 ] });
 var ChevronLeft2 = () => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("polyline", { points: "15 18 9 12 15 6" }) });
 var ChevronRight2 = () => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("polyline", { points: "9 18 15 12 9 6" }) });
+var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+] });
+var ShareIcon = () => /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
 var Skel = ({ className, style }) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: cn("animate-pulse rounded-md bg-zinc-800/60", className), style });
 var FORMATS = [
-  {
-    key: "pptx_url",
-    label: "PowerPoint",
-    ext: ".pptx",
-    emoji: "\u{1F4CA}",
-    desc: "Editable slides \u2014 open in Microsoft PowerPoint or Google Slides",
-    accent: { text: "text-orange-400", bg: "bg-orange-500/10 border-orange-500/20", pill: "bg-orange-500/15 text-orange-400 border-orange-500/25" }
-  },
   {
     key: "pdf_url",
     label: "PDF",
     ext: ".pdf",
     emoji: "\u{1F4C4}",
     desc: "Print-ready, fixed layout \u2014 open in any PDF viewer",
-    accent: { text: "text-red-400", bg: "bg-red-500/10 border-red-500/20", pill: "bg-red-500/15 text-red-400 border-red-500/25" }
+    accent: { text: "text-red-400", bg: "bg-red-500/10 border-red-500/20" }
   },
   {
     key: "html_url",
@@ -38888,12 +38891,36 @@ var FORMATS = [
     ext: ".html",
     emoji: "\u{1F310}",
     desc: "Interactive web presentation \u2014 download and open in browser",
-    accent: { text: "text-indigo-400", bg: "bg-indigo-500/10 border-indigo-500/20", pill: "bg-indigo-500/15 text-indigo-400 border-indigo-500/25" }
+    accent: { text: "text-indigo-400", bg: "bg-indigo-500/10 border-indigo-500/20" }
   }
 ];
 var ExportModal = ({ formats, title, onClose }) => {
   const available = FORMATS.filter((f) => formats[f.key]);
   const filename = title.replace(/[^a-z0-9]/gi, "-").toLowerCase();
+  const [downloadingKey, setDownloadingKey] = (0, import_react74.useState)(null);
+  const handleDownload = async (fmtKey, url, ext) => {
+    if (downloadingKey) return;
+    const downloadName = `${filename}${ext}`;
+    const href = `/api/download?url=${encodeURIComponent(url)}&filename=${encodeURIComponent(downloadName)}`;
+    try {
+      setDownloadingKey(fmtKey);
+      const response = await fetch(href);
+      if (!response.ok) throw new Error(`status ${response.status}`);
+      const blob = await response.blob();
+      const objectUrl = window.URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = objectUrl;
+      anchor.download = downloadName;
+      document.body.appendChild(anchor);
+      anchor.click();
+      anchor.remove();
+      window.URL.revokeObjectURL(objectUrl);
+    } catch {
+      window.open(href, "_blank", "noopener,noreferrer");
+    } finally {
+      setDownloadingKey(null);
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "absolute inset-0 bg-black/70 backdrop-blur-sm", onClick: onClose }),
     /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "relative z-10 bg-zinc-900 border border-zinc-800 rounded-2xl w-full max-w-sm p-6 shadow-2xl", children: [
@@ -38902,38 +38929,31 @@ var ExportModal = ({ formats, title, onClose }) => {
           /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("h3", { className: "text-sm font-semibold text-zinc-100", children: "Export Presentation" }),
           /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 truncate", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-          "button",
-          {
-            onClick: onClose,
-            className: "text-zinc-500 hover:text-zinc-200 transition-colors flex-shrink-0 mt-0.5",
-            "aria-label": "Close",
-            children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(CloseIcon, {})
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("button", { onClick: onClose, className: "text-zinc-500 hover:text-zinc-200 transition-colors flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(CloseIcon, {}) })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "space-y-2.5", children: [
         available.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: "text-sm text-zinc-500 text-center py-6", children: "No formats available yet" }),
         available.map((fmt) => {
           const url = formats[fmt.key];
-          const dlName = `${filename}${fmt.ext}`;
+          const isDownloading = downloadingKey === fmt.key;
           return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
-            "a",
+            "button",
             {
-              href: url,
-              download: dlName,
+              type: "button",
+              disabled: Boolean(downloadingKey),
+              onClick: () => handleDownload(fmt.key, url, fmt.ext),
               className: cn(
-                "flex items-center gap-3.5 p-3.5 rounded-xl border transition-all",
-                "hover:brightness-110 cursor-pointer no-underline group",
+                "flex w-full items-center gap-3.5 p-3.5 rounded-xl border transition-all text-left",
+                "hover:brightness-110 disabled:opacity-60 disabled:cursor-not-allowed",
                 fmt.accent.bg
               ),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "text-xl flex-shrink-0", children: fmt.emoji }),
                 /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: cn("text-sm font-semibold", fmt.accent.text), children: fmt.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 leading-relaxed", children: fmt.desc })
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: cn("text-sm font-semibold", fmt.accent.text), children: isDownloading ? `Downloading ${fmt.label}...` : fmt.label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 leading-relaxed", children: isDownloading ? "Please wait while the file is being prepared." : fmt.desc })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: cn("flex-shrink-0 transition-colors", fmt.accent.text), children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(DownloadIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: cn("flex-shrink-0", fmt.accent.text), children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(DownloadIcon, {}) })
               ]
             },
             fmt.key
@@ -38944,6 +38964,87 @@ var ExportModal = ({ formats, title, onClose }) => {
     ] })
   ] });
 };
+var FullscreenModal = ({ url, title, slideCount, onClose }) => {
+  const [currentSlide, setCurrentSlide] = (0, import_react74.useState)(1);
+  const iframeRef = (0, import_react74.useRef)(null);
+  (0, import_react74.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    const onMsg = (e) => {
+      if (e.data?.type === "presentationExit") onClose();
+      if (e.data?.type === "slideChanged") setCurrentSlide(e.data.slide);
+    };
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("message", onMsg);
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("message", onMsg);
+    };
+  }, [onClose]);
+  (0, import_react74.useEffect)(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  const send = (type) => iframeRef.current?.contentWindow?.postMessage({ type }, "*");
+  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "fixed inset-0 z-50 bg-black flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center justify-between gap-4 px-4 h-11 bg-zinc-950/90 border-b border-zinc-800/60 flex-shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "text-indigo-400 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(SlidesIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "text-sm font-medium text-zinc-300 truncate", children: title }),
+        slideCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("span", { className: "text-xs text-zinc-600 flex-shrink-0", children: [
+          currentSlide,
+          " / ",
+          slideCount
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          "button",
+          {
+            onClick: () => send("prevSlide"),
+            className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-indigo-500 hover:text-indigo-400 text-zinc-400 flex items-center justify-center transition-colors",
+            "aria-label": "Previous slide",
+            children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ChevronLeft2, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+          "button",
+          {
+            onClick: () => send("nextSlide"),
+            className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-indigo-500 hover:text-indigo-400 text-zinc-400 flex items-center justify-center transition-colors",
+            "aria-label": "Next slide",
+            children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ChevronRight2, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+          "button",
+          {
+            onClick: onClose,
+            className: "flex items-center gap-1.5 px-3 h-7 rounded-lg border border-zinc-700 bg-zinc-800 hover:border-zinc-500 text-zinc-400 hover:text-zinc-200 text-xs transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(CloseIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { children: "ESC" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "flex-1 relative", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: url,
+        title,
+        onLoad: () => iframeRef.current?.contentWindow?.postMessage({ type: "goToSlide", slide: currentSlide }, "*"),
+        sandbox: "allow-same-origin allow-scripts allow-fullscreen",
+        className: "absolute inset-0 w-full h-full border-0"
+      }
+    ) })
+  ] });
+};
 var PresentationJobCard = ({
   job_id: _job_id,
   title: initialTitle,
@@ -38952,6 +39053,7 @@ var PresentationJobCard = ({
   formats: initialFormats = {},
   error: initialError,
   pollUrl,
+  shareUrl,
   className
 }) => {
   const [status, setStatus] = (0, import_react74.useState)(initialStatus);
@@ -38959,7 +39061,9 @@ var PresentationJobCard = ({
   const [slideCount, setSlideCount] = (0, import_react74.useState)(initialSlideCount ?? 0);
   const [formats, setFormats] = (0, import_react74.useState)(initialFormats);
   const [error, setError] = (0, import_react74.useState)(initialError);
-  const [showModal, setShowModal] = (0, import_react74.useState)(false);
+  const [showExport, setShowExport] = (0, import_react74.useState)(false);
+  const [showFullscreen, setShowFullscreen] = (0, import_react74.useState)(false);
+  const [copied, setCopied] = (0, import_react74.useState)(false);
   const [currentSlide, setCurrentSlide] = (0, import_react74.useState)(1);
   const [previewScale, setPreviewScale] = (0, import_react74.useState)(1);
   const [iframeReady, setIframeReady] = (0, import_react74.useState)(false);
@@ -38968,9 +39072,7 @@ var PresentationJobCard = ({
   const previewRef = (0, import_react74.useRef)(null);
   const iframeRef = (0, import_react74.useRef)(null);
   const updateScale = (0, import_react74.useCallback)(() => {
-    if (previewRef.current) {
-      setPreviewScale(previewRef.current.offsetWidth / 1280);
-    }
+    if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
   (0, import_react74.useEffect)(() => {
     updateScale();
@@ -38987,9 +39089,7 @@ var PresentationJobCard = ({
     const handler = (e) => {
       if (e.data?.type === "slideChanged") {
         setCurrentSlide(e.data.slide);
-        if (e.data.total && !slideCount) {
-          setSlideCount(e.data.total);
-        }
+        if (e.data.total && !slideCount) setSlideCount(e.data.total);
       }
     };
     window.addEventListener("message", handler);
@@ -39000,6 +39100,10 @@ var PresentationJobCard = ({
     iframeRef.current?.contentWindow?.postMessage({ type: "goToSlide", slide: pendingSlide }, "*");
     setPendingSlide(null);
   }, [iframeReady, pendingSlide]);
+  const sendSlideCommand = (command) => {
+    if (!iframeReady) return;
+    iframeRef.current?.contentWindow?.postMessage({ type: command }, "*");
+  };
   const goToSlide = (n) => {
     const total2 = slideCount || 1;
     const target = (n - 1 + total2) % total2 + 1;
@@ -39025,9 +39129,7 @@ var PresentationJobCard = ({
           if (data.output.slide_count) setSlideCount(data.output.slide_count);
           if (data.output.formats) setFormats(data.output.formats);
         }
-        if (newStatus === "failed" && data.error) {
-          setError(data.error);
-        }
+        if (newStatus === "failed" && data.error) setError(data.error);
       } catch {
       }
     };
@@ -39043,6 +39145,17 @@ var PresentationJobCard = ({
       intervalRef.current = null;
     }
   }, [isTerminal]);
+  const handleShare = async () => {
+    const link = shareUrl ?? formats.html_url;
+    if (!link) return;
+    try {
+      await navigator.clipboard.writeText(link);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+      window.open(link, "_blank", "noopener,noreferrer");
+    }
+  };
   if (status === "pending" || status === "running") {
     return /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl p-5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center gap-3 mb-5", children: [
@@ -39068,8 +39181,8 @@ var PresentationJobCard = ({
       ] })
     ] }) }) });
   }
-  const availablePills = FORMATS.filter((f) => formats[f.key]);
   const total = slideCount || 1;
+  const hasHtml = Boolean(formats.html_url);
   return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
       /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "h-[3px] bg-gradient-to-r from-indigo-600 via-violet-500 to-purple-600" }),
@@ -39083,106 +39196,127 @@ var PresentationJobCard = ({
               " \xB7 Ready to export"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
-            "button",
-            {
-              onClick: () => setShowModal(true),
-              className: "flex items-center gap-1.5 px-3 py-1.5 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white text-xs font-medium rounded-lg transition-colors flex-shrink-0",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(DownloadIcon, {}),
-                "Export"
-              ]
-            }
-          )
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+              "button",
+              {
+                onClick: handleShare,
+                disabled: !hasHtml,
+                title: copied ? "Copied!" : "Copy shareable link",
+                className: cn(
+                  "w-7 h-7 rounded-lg border flex items-center justify-center transition-all",
+                  copied ? "border-green-500/40 bg-green-500/10 text-green-400" : "border-zinc-700 bg-zinc-800 text-zinc-400 hover:border-zinc-500 hover:text-zinc-200",
+                  "disabled:opacity-30 disabled:cursor-not-allowed"
+                ),
+                children: copied ? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ShareIcon, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+              "button",
+              {
+                onClick: () => setShowFullscreen(true),
+                disabled: !hasHtml,
+                title: "Open fullscreen preview",
+                className: "flex items-center gap-1.5 px-2.5 h-7 rounded-lg border border-zinc-700 bg-zinc-800 hover:border-zinc-500 text-zinc-400 hover:text-zinc-200 text-xs font-medium transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ExpandIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { children: "Preview" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+              "button",
+              {
+                onClick: () => setShowExport(true),
+                className: "flex items-center gap-1.5 px-2.5 h-7 bg-indigo-600 hover:bg-indigo-500 active:bg-indigo-700 text-white text-xs font-medium rounded-lg transition-colors",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(DownloadIcon, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { children: "Export" })
+                ]
+              }
+            )
+          ] })
         ] }),
-        formats.html_url && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "mt-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+        hasHtml && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "mt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
             "div",
             {
               ref: previewRef,
-              className: "relative overflow-hidden rounded-xl bg-zinc-950 border border-zinc-800/50",
+              onClick: () => setShowFullscreen(true),
+              className: "group relative overflow-hidden rounded-xl bg-zinc-950 border border-zinc-800/50 cursor-pointer",
               style: { height: Math.round(previewScale * 720) },
-              children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-                "iframe",
-                {
-                  ref: iframeRef,
-                  src: formats.html_url,
-                  title,
-                  onLoad: () => setIframeReady(true),
-                  sandbox: "allow-same-origin allow-scripts",
-                  style: {
-                    width: 1280,
-                    height: 720,
-                    transform: `scale(${previewScale})`,
-                    transformOrigin: "top left",
-                    border: "none",
-                    pointerEvents: "none",
-                    display: "block"
+              title: "Click to open fullscreen",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+                  "iframe",
+                  {
+                    ref: iframeRef,
+                    src: formats.html_url,
+                    title,
+                    onLoad: () => setIframeReady(true),
+                    sandbox: "allow-same-origin allow-scripts",
+                    style: {
+                      width: 1280,
+                      height: 720,
+                      transform: `scale(${previewScale})`,
+                      transformOrigin: "top left",
+                      border: "none",
+                      pointerEvents: "none",
+                      display: "block"
+                    }
                   }
-                }
-              )
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/0 group-hover:bg-black/30 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("span", { className: "opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-2 bg-zinc-900/80 backdrop-blur-sm border border-zinc-700 rounded-lg px-3 py-1.5 text-xs text-zinc-200 font-medium", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ExpandIcon, {}),
+                  "Open fullscreen"
+                ] }) })
+              ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center justify-between mt-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "flex items-center gap-2", children: availablePills.map((fmt) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-              "span",
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center gap-2 mt-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+              "button",
               {
-                className: cn(
-                  "text-xs px-2.5 py-0.5 rounded-md border font-medium",
-                  fmt.accent.pill
-                ),
-                children: fmt.label
-              },
-              fmt.key
-            )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-                "button",
-                {
-                  onClick: () => goToSlide(currentSlide - 1),
-                  disabled: total <= 1,
-                  className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-indigo-500 hover:text-indigo-400 text-zinc-400 flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
-                  "aria-label": "Previous slide",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ChevronLeft2, {})
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("span", { className: "text-xs text-zinc-500 font-medium tabular-nums min-w-[3rem] text-center", children: [
-                currentSlide,
-                " / ",
-                total
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-                "button",
-                {
-                  onClick: () => goToSlide(currentSlide + 1),
-                  disabled: total <= 1,
-                  className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-indigo-500 hover:text-indigo-400 text-zinc-400 flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
-                  "aria-label": "Next slide",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ChevronRight2, {})
-                }
-              )
-            ] })
-          ] })
-        ] }),
-        !formats.html_url && availablePills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "flex items-center gap-2 mt-4", children: availablePills.map((fmt) => /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-          "span",
-          {
-            className: cn(
-              "text-xs px-2.5 py-0.5 rounded-md border font-medium",
-              fmt.accent.pill
+                onClick: (e) => {
+                  e.stopPropagation();
+                  slideCount > 1 ? goToSlide(currentSlide - 1) : sendSlideCommand("prevSlide");
+                },
+                disabled: !hasHtml,
+                className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-indigo-500 hover:text-indigo-400 text-zinc-400 flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                "aria-label": "Previous slide",
+                children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ChevronLeft2, {})
+              }
             ),
-            children: fmt.label
-          },
-          fmt.key
-        )) })
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("span", { className: "text-xs text-zinc-500 font-medium tabular-nums min-w-[3rem] text-center", children: [
+              currentSlide,
+              " / ",
+              total
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  slideCount > 1 ? goToSlide(currentSlide + 1) : sendSlideCommand("nextSlide");
+                },
+                disabled: !hasHtml,
+                className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-indigo-500 hover:text-indigo-400 text-zinc-400 flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                "aria-label": "Next slide",
+                children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ChevronRight2, {})
+              }
+            )
+          ] })
+        ] })
       ] })
     ] }) }),
-    showModal && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
-      ExportModal,
+    showExport && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(ExportModal, { formats, title, onClose: () => setShowExport(false) }),
+    showFullscreen && hasHtml && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+      FullscreenModal,
       {
-        formats,
+        url: formats.html_url,
         title,
-        onClose: () => setShowModal(false)
+        slideCount,
+        onClose: () => setShowFullscreen(false)
       }
     )
   ] });