pxengine 0.1.77 → 0.1.78

package/dist/index.cjs

@@ -38998,7 +38998,6 @@ var ShareIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("svg", { w
   /* @__PURE__ */ (0, import_jsx_runtime147.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_runtime147.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_runtime147.jsx)("polyline", { points: "20 6 9 17 4 12" }) });
-var Skel = ({ className, style }) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: cn("animate-pulse rounded-md bg-zinc-800/60", className), style });
 var FORMATS = [
   {
     key: "pdf_url",
@@ -39168,6 +39167,23 @@ var FullscreenModal = ({ url, title, slideCount, onClose }) => {
     ) })
   ] });
 };
+var PROCESSING_STAGES = [
+  { minProgress: 0, message: "Initializing..." },
+  { minProgress: 12, message: "Analyzing request..." },
+  { minProgress: 25, message: "Generating content..." },
+  { minProgress: 45, message: "Building slides..." },
+  { minProgress: 65, message: "Applying design..." },
+  { minProgress: 80, message: "Rendering outputs..." },
+  { minProgress: 92, message: "Finalizing..." }
+];
+function getStageMessage(progress) {
+  for (let i = PROCESSING_STAGES.length - 1; i >= 0; i--) {
+    if (progress >= PROCESSING_STAGES[i].minProgress) {
+      return PROCESSING_STAGES[i].message;
+    }
+  }
+  return PROCESSING_STAGES[0].message;
+}
 var PresentationJobCard = ({
   job_id: _job_id,
   title: initialTitle,
@@ -39176,8 +39192,11 @@ var PresentationJobCard = ({
   formats: initialFormats = {},
   error: initialError,
   pollUrl,
+  authToken,
   shareUrl,
-  className
+  className,
+  onComplete,
+  onFailed
 }) => {
   const [status, setStatus] = (0, import_react75.useState)(initialStatus);
   const [title, setTitle] = (0, import_react75.useState)(initialTitle);
@@ -39191,9 +39210,40 @@ var PresentationJobCard = ({
   const [previewScale, setPreviewScale] = (0, import_react75.useState)(1);
   const [iframeReady, setIframeReady] = (0, import_react75.useState)(false);
   const [pendingSlide, setPendingSlide] = (0, import_react75.useState)(null);
+  const [progress, setProgress] = (0, import_react75.useState)(0);
+  const startTimeRef = (0, import_react75.useRef)(Date.now());
   const intervalRef = (0, import_react75.useRef)(null);
+  const progressIntervalRef = (0, import_react75.useRef)(null);
   const previewRef = (0, import_react75.useRef)(null);
   const iframeRef = (0, import_react75.useRef)(null);
+  (0, import_react75.useEffect)(() => {
+    const isLoading = status === "pending" || status === "running";
+    if (!isLoading) {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+      if (status === "complete") setProgress(100);
+      return;
+    }
+    startTimeRef.current = Date.now();
+    progressIntervalRef.current = setInterval(() => {
+      const elapsed = (Date.now() - startTimeRef.current) / 1e3;
+      const estimated = Math.min(90, 90 * (1 - Math.exp(-elapsed / 60)));
+      setProgress((prev) => Math.max(prev, Math.round(estimated)));
+    }, 500);
+    return () => {
+      if (progressIntervalRef.current) {
+        clearInterval(progressIntervalRef.current);
+        progressIntervalRef.current = null;
+      }
+    };
+  }, [status]);
+  (0, import_react75.useEffect)(() => {
+    if (status === "running") {
+      setProgress((prev) => Math.max(prev, 15));
+    }
+  }, [status]);
   const updateScale = (0, import_react75.useCallback)(() => {
     if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
@@ -39238,21 +39288,48 @@ var PresentationJobCard = ({
     setPendingSlide(target);
   };
   const isTerminal = status === "complete" || status === "failed";
+  const onCompleteRef = (0, import_react75.useRef)(onComplete);
+  const onFailedRef = (0, import_react75.useRef)(onFailed);
+  const hasNotifiedRef = (0, import_react75.useRef)(false);
+  onCompleteRef.current = onComplete;
+  onFailedRef.current = onFailed;
   (0, import_react75.useEffect)(() => {
     if (isTerminal || !pollUrl) return;
     const poll = async () => {
       try {
-        const res = await fetch(pollUrl);
+        const headers = {};
+        if (authToken) {
+          headers["Authorization"] = `Bearer ${authToken}`;
+        }
+        const res = await fetch(pollUrl, { headers });
         if (!res.ok) return;
         const data = await res.json();
         const newStatus = data.status;
         setStatus(newStatus);
         if (newStatus === "complete" && data.output) {
-          if (data.output.title) setTitle(data.output.title);
-          if (data.output.slide_count) setSlideCount(data.output.slide_count);
-          if (data.output.formats) setFormats(data.output.formats);
+          const newTitle = data.output.title || initialTitle;
+          const newSlideCount = data.output.slide_count || 0;
+          const newFormats = data.output.formats || {};
+          setTitle(newTitle);
+          setSlideCount(newSlideCount);
+          setFormats(newFormats);
+          if (!hasNotifiedRef.current && onCompleteRef.current) {
+            hasNotifiedRef.current = true;
+            onCompleteRef.current({
+              title: newTitle,
+              slide_count: newSlideCount,
+              formats: newFormats
+            });
+          }
+        }
+        if (newStatus === "failed") {
+          const errorMsg = data.error || "Job failed";
+          setError(errorMsg);
+          if (!hasNotifiedRef.current && onFailedRef.current) {
+            hasNotifiedRef.current = true;
+            onFailedRef.current(errorMsg);
+          }
         }
-        if (newStatus === "failed" && data.error) setError(data.error);
       } catch {
       }
     };
@@ -39261,7 +39338,7 @@ var PresentationJobCard = ({
     return () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
-  }, [isTerminal, pollUrl]);
+  }, [isTerminal, pollUrl, authToken, initialTitle]);
   (0, import_react75.useEffect)(() => {
     if (isTerminal && intervalRef.current) {
       clearInterval(intervalRef.current);
@@ -39280,18 +39357,63 @@ var PresentationJobCard = ({
     }
   };
   if (status === "pending" || status === "running") {
-    return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl p-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-3 mb-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Skel, { className: "w-10 h-10 rounded-xl flex-shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex-1 space-y-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Skel, { className: "h-3.5 w-44" }),
-          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Skel, { className: "h-3 w-28" })
+    const stageMessage = getStageMessage(progress);
+    return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: cn("w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-1 bg-zinc-800", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+        "div",
+        {
+          className: "h-full bg-gradient-to-r from-indigo-500 via-violet-500 to-purple-500 transition-all duration-500 ease-out",
+          style: { width: `${progress}%` }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "p-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-3 mb-5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "w-10 h-10 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlidesIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Generating presentation..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Creating slides..." })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "rounded-2xl border border-zinc-800/70 bg-zinc-950/80 p-3 sm:p-4 mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "relative overflow-hidden rounded-xl bg-zinc-900 shadow-[0_0_0_1px_rgba(255,255,255,0.02)] aspect-[16/9] min-h-[320px] sm:min-h-[420px] lg:min-h-[500px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_14%_16%,rgba(99,102,241,0.18),transparent_30%),radial-gradient(circle_at_86%_84%,rgba(168,85,247,0.16),transparent_28%),linear-gradient(135deg,rgba(50,54,86,0.96),rgba(18,18,30,0.98))]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute left-0 top-0 h-full w-[64%] bg-gradient-to-br from-indigo-500/90 via-violet-600/85 to-purple-700/90" }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute right-0 top-0 h-full w-[36%] bg-zinc-950/95" }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute left-[6%] top-[10%] h-24 w-24 rounded-full bg-white/8 blur-2xl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute right-[7%] bottom-[10%] h-28 w-28 rounded-full bg-white/6 blur-2xl" }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute left-[5%] top-[14%] h-5 w-32 rounded-full bg-white/10 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute left-[5%] top-[33%] h-4 w-[42%] rounded-full bg-white/12 animate-pulse", style: { animationDelay: "120ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute left-[5%] top-[40%] h-4 w-[35%] rounded-full bg-white/12 animate-pulse", style: { animationDelay: "220ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute left-[5%] bottom-[24%] h-5 w-[18%] rounded-full bg-white/12 animate-pulse", style: { animationDelay: "320ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute right-[6%] top-[14%] h-3 w-28 rounded-full bg-amber-300/70 animate-pulse", style: { animationDelay: "150ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute right-[6%] top-[28%] h-[84px] w-[72%] rounded-xl border border-amber-300/15 bg-white/5 animate-pulse", style: { animationDelay: "220ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute right-[6%] top-[50%] h-[84px] w-[72%] rounded-xl border border-violet-300/15 bg-white/5 animate-pulse", style: { animationDelay: "320ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute right-[6%] top-[72%] h-[84px] w-[72%] rounded-xl border border-purple-300/15 bg-white/5 animate-pulse", style: { animationDelay: "420ms" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "absolute inset-x-0 bottom-0 flex items-center justify-between px-4 py-3 bg-gradient-to-t from-black/30 to-transparent", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "h-8 w-8 rounded-full border border-zinc-600 bg-zinc-800/70 flex items-center justify-center text-zinc-400", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ChevronLeft2, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-sm text-zinc-300 font-medium tabular-nums", children: "1 / 1" }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "h-8 w-8 rounded-full border border-zinc-700 bg-zinc-800/50 flex items-center justify-center text-zinc-500 opacity-70", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ChevronRight2, {}) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2 text-xs text-zinc-400", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "inline-flex h-2 w-2 rounded-full bg-indigo-400 animate-pulse" }),
+              "Building preview"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "absolute inset-0 -translate-x-full animate-[shimmer_2s_infinite] bg-gradient-to-r from-transparent via-white/8 to-transparent" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center justify-between pt-4 border-t border-zinc-800/60", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("span", { className: "relative flex h-2 w-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-500 opacity-75" }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-indigo-500" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-xs text-indigo-400/80 font-medium", children: stageMessage })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("span", { className: "text-xs text-zinc-500 tabular-nums font-medium", children: [
+            progress,
+            "%"
+          ] })
         ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "grid grid-cols-3 gap-3", children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Skel, { className: "aspect-video rounded-lg", style: { animationDelay: `${i * 150}ms` } }, i)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2.5 mt-4 pt-4 border-t border-zinc-800/60", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "w-2 h-2 rounded-full bg-indigo-500 animate-pulse flex-shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(Skel, { className: "h-3 w-36" })
       ] })
     ] }) });
   }
@@ -45694,11 +45816,14 @@ var PXEngineRenderer = ({
       props = {},
       children = [],
       id,
+      key: _extractedKey,
+      // Extract key to prevent React warning about spreading key prop
       ...remainingProps
     } = component;
     const componentName = name || type || componentType;
     if (!componentName || typeof componentName !== "string") return null;
     const rawProps = { ...remainingProps, ...props };
+    delete rawProps.key;
     if (disabled !== void 0 && rawProps.disabled === void 0) {
       rawProps.disabled = disabled;
     }