pxengine 0.1.133 → 0.1.135

package/dist/index.cjs

@@ -16376,6 +16376,40 @@ function formatTemplateLabel(templateId) {
   if (!templateId) return null;
   return templateId.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
 }
+var DECK_CANVAS = { w: 1280, h: 720 };
+function useDeckFitScale(canvasW = DECK_CANVAS.w, canvasH = DECK_CANVAS.h) {
+  const containerRef = (0, import_react80.useRef)(null);
+  const [scale, setScale] = (0, import_react80.useState)(1);
+  (0, import_react80.useLayoutEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const update = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      if (w <= 0 || h <= 0) return;
+      setScale(Math.min(w / canvasW, h / canvasH));
+    };
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [canvasW, canvasH]);
+  return { containerRef, scale, canvasW, canvasH };
+}
+function hideDeckChrome(iframe) {
+  try {
+    const doc = iframe?.contentDocument;
+    if (!doc) return;
+    let style = doc.getElementById("pxe-embed-chrome");
+    if (!style) {
+      style = doc.createElement("style");
+      style.id = "pxe-embed-chrome";
+      (doc.head || doc.documentElement).appendChild(style);
+    }
+    style.textContent = ".nav,.progress-bar,.dots{display:none!important}";
+  } catch {
+  }
+}
 function deriveJobStatusUrl(newJobId, pollUrl, regenerateUrl) {
   const base = pollUrl?.replace(/\/api\/jobs\/[^/]+\/status.*$/, "") ?? regenerateUrl?.replace(/\/api\/presentations\/[^/]+\/regenerate.*$/, "") ?? "";
   return `${base}/api/jobs/${newJobId}/status`;
@@ -16480,6 +16514,7 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
   const [currentSlide, setCurrentSlide] = (0, import_react80.useState)(initialSlide);
   const [iframeReady, setIframeReady] = (0, import_react80.useState)(false);
   const iframeRef = (0, import_react80.useRef)(null);
+  const { containerRef, scale, canvasW, canvasH } = useDeckFitScale();
   (0, import_react80.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -16515,7 +16550,7 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
       newSlide = currentSlide <= 1 ? totalSlides : currentSlide - 1;
     }
     setCurrentSlide(newSlide);
-    iframe.contentWindow.postMessage({ type: command }, "*");
+    iframe.contentWindow.postMessage({ type: "goToSlide", slide: newSlide }, "*");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "fixed inset-0 z-50 bg-black flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime151.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: [
@@ -16562,19 +16597,33 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { className: "flex-1 relative", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-      "iframe",
+    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { ref: containerRef, className: "flex-1 relative flex items-center justify-center overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+      "div",
       {
-        ref: iframeRef,
-        src: url,
-        title,
-        onLoad: () => {
-          setIframeReady(true);
-          iframeRef.current?.contentWindow?.postMessage({ type: "goToSlide", slide: initialSlide }, "*");
-        },
-        sandbox: "allow-same-origin allow-scripts",
-        allow: "fullscreen",
-        className: "absolute inset-0 w-full h-full border-0"
+        className: "relative",
+        style: { width: canvasW * scale, height: canvasH * scale },
+        children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+          "iframe",
+          {
+            ref: iframeRef,
+            src: url,
+            title,
+            onLoad: () => {
+              setIframeReady(true);
+              hideDeckChrome(iframeRef.current);
+              iframeRef.current?.contentWindow?.postMessage({ type: "goToSlide", slide: initialSlide }, "*");
+            },
+            sandbox: "allow-same-origin allow-scripts",
+            allow: "fullscreen",
+            className: "absolute top-0 left-0 border-0",
+            style: {
+              width: canvasW,
+              height: canvasH,
+              transform: `scale(${scale})`,
+              transformOrigin: "top left"
+            }
+          }
+        )
       }
     ) })
   ] });
@@ -16639,6 +16688,7 @@ var PresentationJobCard = ({
   const [currentSlide, setCurrentSlide] = (0, import_react80.useState)(1);
   const [iframeReady, setIframeReady] = (0, import_react80.useState)(false);
   const iframeRef = (0, import_react80.useRef)(null);
+  const { containerRef: previewFitRef, scale: previewScale, canvasW, canvasH } = useDeckFitScale();
   (0, import_react80.useEffect)(() => {
     setStatus(initialStatus);
   }, [initialStatus]);
@@ -16728,7 +16778,7 @@ var PresentationJobCard = ({
       newSlide = currentSlide <= 1 ? totalSlides : currentSlide - 1;
     }
     setCurrentSlide(newSlide);
-    iframe.contentWindow.postMessage({ type: command }, "*");
+    iframe.contentWindow.postMessage({ type: "goToSlide", slide: newSlide }, "*");
   };
   const isTerminal = status === "complete" || status === "failed";
   const building = Boolean(outlineWritePollUrl) || approvingOutline;
@@ -17499,19 +17549,36 @@ var PresentationJobCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(
             "div",
             {
+              ref: previewFitRef,
               onClick: () => setShowFullscreen(true),
-              className: "group relative aspect-video w-full overflow-hidden rounded-xl bg-zinc-950 border border-zinc-800/50 cursor-pointer",
+              className: "group relative aspect-video w-full overflow-hidden rounded-xl bg-zinc-950 border border-zinc-800/50 cursor-pointer flex items-center justify-center",
               title: "Click to open fullscreen",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-                  "iframe",
+                  "div",
                   {
-                    ref: iframeRef,
-                    src: formats.html_url,
-                    title,
-                    sandbox: "allow-same-origin allow-scripts",
-                    onLoad: () => setIframeReady(true),
-                    className: "absolute inset-0 block h-full w-full border-0 pointer-events-none"
+                    className: "relative",
+                    style: { width: canvasW * previewScale, height: canvasH * previewScale },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+                      "iframe",
+                      {
+                        ref: iframeRef,
+                        src: formats.html_url,
+                        title,
+                        sandbox: "allow-same-origin allow-scripts",
+                        onLoad: () => {
+                          setIframeReady(true);
+                          hideDeckChrome(iframeRef.current);
+                        },
+                        className: "absolute top-0 left-0 border-0 pointer-events-none",
+                        style: {
+                          width: canvasW,
+                          height: canvasH,
+                          transform: `scale(${previewScale})`,
+                          transformOrigin: "top left"
+                        }
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime151.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_runtime151.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: [