pxengine 0.1.88 → 0.1.90

package/dist/index.mjs

@@ -33639,14 +33639,22 @@ __export(molecules_exports, {
   TimelineCard: () => TimelineCard,
   TopPostsGrid: () => TopPostsGrid,
   WebSearchJobCard: () => WebSearchJobCard,
+  WidgetThemeContext: () => WidgetThemeContext,
   defaultFetchSelections: () => defaultFetchSelections,
   defaultPersistSelection: () => defaultPersistSelection,
   th: () => th,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling,
+  useWidgetTheme: () => useWidgetTheme,
   withAlpha: () => withAlpha
 });
 
 // src/molecules/generic/widgetTheme.ts
+import { createContext as createContext5, useContext as useContext6 } from "react";
+var WidgetThemeContext = createContext5(void 0);
+function useWidgetTheme(explicit) {
+  const ctx = useContext6(WidgetThemeContext);
+  return explicit ?? ctx;
+}
 function withAlpha(color, alpha) {
   const hex = color.replace("#", "");
   if (hex.length === 6) {
@@ -33659,13 +33667,22 @@ function withAlpha(color, alpha) {
 }
 function th(theme) {
   const T = theme ?? {};
+  const shape = {
+    ...typeof T.borderWidth === "number" && { borderWidth: T.borderWidth },
+    ...typeof T.radius === "number" && { borderRadius: T.radius },
+    ...T.shadow && { boxShadow: T.shadow },
+    ...T.fontFamily && { fontFamily: T.fontFamily }
+  };
   const root = {
     ...T.background && { backgroundColor: T.background },
-    ...T.border && { borderColor: T.border }
+    ...T.border && { borderColor: T.border },
+    ...shape
   };
   const surface = {
     ...T.surface && { backgroundColor: T.surface },
-    ...T.border && { borderColor: T.border }
+    ...T.border && { borderColor: T.border },
+    ...typeof T.borderWidth === "number" && { borderWidth: T.borderWidth },
+    ...typeof T.radius === "number" && { borderRadius: Math.max(0, T.radius - 4) }
   };
   const text = {
     ...T.text && { color: T.text }
@@ -33682,10 +33699,31 @@ function th(theme) {
   const accentBorder = {
     ...T.accent && { borderColor: T.accent }
   };
+  const accentText = {
+    ...T.accentForeground && { color: T.accentForeground }
+  };
   const accentSubtle = (alpha = 0.12) => ({
     ...T.accent && { backgroundColor: withAlpha(T.accent, alpha) }
   });
-  return { root, surface, text, muted, accent, accentBg, accentBorder, accentSubtle };
+  const semantic = (kind) => ({
+    ...T[kind] && { color: T[kind] }
+  });
+  const gradientBg = {
+    ...T.gradient && { backgroundImage: T.gradient }
+  };
+  return {
+    root,
+    surface,
+    text,
+    muted,
+    accent,
+    accentBg,
+    accentBorder,
+    accentText,
+    accentSubtle,
+    semantic,
+    gradientBg
+  };
 }
 
 // src/molecules/generic/EditableField/EditableField.tsx
@@ -38882,6 +38920,7 @@ var PresentationJobCard = ({
   slide_count: initialSlideCount,
   formats: initialFormats = {},
   error: initialError,
+  progress: initialProgress,
   pollUrl,
   authToken,
   shareUrl,
@@ -38894,6 +38933,7 @@ var PresentationJobCard = ({
   const [slideCount, setSlideCount] = useState10(initialSlideCount ?? 0);
   const [formats, setFormats] = useState10(initialFormats);
   const [error, setError] = useState10(initialError);
+  const [progress, setProgress] = useState10(initialProgress);
   const [showExport, setShowExport] = useState10(false);
   const [showFullscreen, setShowFullscreen] = useState10(false);
   const [copied, setCopied] = useState10(false);
@@ -38903,6 +38943,27 @@ var PresentationJobCard = ({
   const intervalRef = useRef5(null);
   const previewRef = useRef5(null);
   const iframeRef = useRef5(null);
+  useEffect6(() => {
+    setStatus(initialStatus);
+  }, [initialStatus]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  useEffect6(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
+  useEffect6(() => {
+    if (initialError) setError(initialError);
+  }, [initialError]);
+  useEffect6(() => {
+    if (initialSlideCount !== void 0) setSlideCount(initialSlideCount);
+  }, [initialSlideCount]);
+  const htmlUrl = initialFormats?.html_url;
+  useEffect6(() => {
+    if (initialFormats) setFormats(initialFormats);
+  }, [htmlUrl]);
+  useEffect6(() => {
+    if (initialTitle) setTitle(initialTitle);
+  }, [initialTitle]);
   const updateScale = useCallback4(() => {
     if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
@@ -38957,6 +39018,9 @@ var PresentationJobCard = ({
         const data = await res.json();
         const newStatus = data.status;
         setStatus(newStatus);
+        if (data.progress) {
+          setProgress(data.progress);
+        }
         if (newStatus === "complete" && data.output) {
           const newTitle = data.output.title || initialTitle;
           const newSlideCount = data.output.slide_count || 0;
@@ -39008,14 +39072,93 @@ var PresentationJobCard = ({
     }
   };
   if (status === "pending" || status === "running") {
-    return /* @__PURE__ */ jsx147("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs108("div", { className: "relative overflow-hidden rounded-xl border border-zinc-200/70 dark:border-zinc-800/70 bg-zinc-100 dark:bg-zinc-900 aspect-[16/9]", children: [
-      /* @__PURE__ */ jsxs108("div", { className: "absolute inset-0 p-[8%] flex flex-col justify-center", children: [
-        /* @__PURE__ */ jsx147("div", { className: "h-[18px] w-[42%] rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse mb-3" }),
-        /* @__PURE__ */ jsx147("div", { className: "h-[11px] w-[65%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse mb-2", style: { animationDelay: "120ms" } }),
-        /* @__PURE__ */ jsx147("div", { className: "h-[11px] w-[52%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "240ms" } })
+    const pct = progress?.percentage ?? 0;
+    const step = progress?.current_step ?? "Starting...";
+    const details = progress?.details;
+    const slidesCompleted = details?.slides_completed ?? 0;
+    const slidesTotal = details?.slides_total ?? 0;
+    const phase = details?.phase ?? progress?.step_type ?? "initializing";
+    const getPhaseIcon = () => {
+      switch (phase) {
+        case "ai_generation":
+          return "\u{1F3A8}";
+        case "processing":
+          return "\u2699\uFE0F";
+        case "uploading":
+          return "\u2601\uFE0F";
+        default:
+          return "\u2728";
+      }
+    };
+    return /* @__PURE__ */ jsxs108("div", { className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsxs108("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+        /* @__PURE__ */ jsx147(
+          "div",
+          {
+            className: "h-[3px] bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 bg-[length:200%_100%] animate-[gradient-shift_2s_ease-in-out_infinite]",
+            style: {
+              backgroundSize: "200% 100%",
+              animation: "gradient-shift 2s ease-in-out infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs108("div", { className: "p-5", children: [
+          /* @__PURE__ */ jsxs108("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx147("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__ */ jsx147("span", { className: "text-lg", children: getPhaseIcon() }) }),
+            /* @__PURE__ */ jsxs108("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx147("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Creating Presentation" }),
+              /* @__PURE__ */ jsxs108("p", { className: "text-xs text-zinc-500 mt-0.5", children: [
+                slidesTotal > 0 ? `${slidesTotal} slides` : "Presentation",
+                " \xB7 In progress"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs108("div", { className: "mt-4 space-y-3", children: [
+            /* @__PURE__ */ jsxs108("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx147("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx147(
+                "div",
+                {
+                  className: "h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-500 ease-out",
+                  style: { width: `${Math.max(pct, 2)}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs108("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
+                pct,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs108("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx147("div", { className: "w-2 h-2 rounded-full bg-indigo-500 animate-pulse" }),
+              /* @__PURE__ */ jsx147("span", { className: "text-xs text-zinc-400", children: step })
+            ] }),
+            phase === "ai_generation" && slidesTotal > 0 && /* @__PURE__ */ jsxs108("div", { className: "flex items-center gap-2 pt-1", children: [
+              /* @__PURE__ */ jsx147("div", { className: "flex gap-1", children: Array.from({ length: slidesTotal }).map((_, i) => /* @__PURE__ */ jsx147(
+                "div",
+                {
+                  className: cn(
+                    "w-6 h-1.5 rounded-full transition-all duration-300",
+                    i < slidesCompleted ? "bg-indigo-500" : i === slidesCompleted ? "bg-indigo-500/50 animate-pulse" : "bg-zinc-700"
+                  )
+                },
+                i
+              )) }),
+              /* @__PURE__ */ jsxs108("span", { className: "text-xs text-zinc-500 ml-1", children: [
+                slidesCompleted,
+                "/",
+                slidesTotal,
+                " slides"
+              ] })
+            ] })
+          ] })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx147("div", { className: "absolute inset-0 -translate-x-full animate-[shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" })
-    ] }) });
+      /* @__PURE__ */ jsx147("style", { children: `
+          @keyframes gradient-shift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+        ` })
+    ] });
   }
   if (status === "failed") {
     return /* @__PURE__ */ jsx147("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx147("div", { className: "bg-red-950/20 border border-red-800/25 rounded-2xl p-5", children: /* @__PURE__ */ jsxs108("div", { className: "flex items-start gap-3", children: [
@@ -39256,6 +39399,7 @@ var ResearchReportJobCard = (props) => {
     html_url: initialHtmlUrl,
     theme: initialTheme,
     error: initialError,
+    progress: initialProgress,
     pollUrl,
     authToken,
     className,
@@ -39274,6 +39418,7 @@ var ResearchReportJobCard = (props) => {
   const [htmlUrl, setHtmlUrl] = useState11(initialHtmlUrl || "");
   const [theme, setTheme] = useState11(initialTheme || DEFAULT_THEME);
   const [error, setError] = useState11(initialError);
+  const [progress, setProgress] = useState11(initialProgress);
   const [showPreview, setShowPreview] = useState11(false);
   const [previewScale, setPreviewScale] = useState11(1);
   const previewRef = useRef6(null);
@@ -39308,12 +39453,18 @@ var ResearchReportJobCard = (props) => {
   useEffect7(() => {
     if (initialSummary) setSummary(initialSummary);
   }, [initialSummary]);
+  const themePrimary = initialTheme?.primary;
   useEffect7(() => {
     if (initialTheme) setTheme(initialTheme);
-  }, [initialTheme]);
+  }, [themePrimary]);
   useEffect7(() => {
     if (initialError) setError(initialError);
   }, [initialError]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  useEffect7(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
   const isTerminal = status === "complete" || status === "failed";
   const primaryColor = theme?.primary || DEFAULT_THEME.primary;
   const hasHTML = Boolean(htmlUrl);
@@ -39342,6 +39493,9 @@ var ResearchReportJobCard = (props) => {
         const data = await res.json();
         const newStatus = data.status;
         setStatus(newStatus);
+        if (data.progress) {
+          setProgress(data.progress);
+        }
         if (newStatus === "complete" && data.output) {
           const output = data.output;
           setTitle(output.title || initialTitle);
@@ -39387,27 +39541,96 @@ var ResearchReportJobCard = (props) => {
     return count.toString();
   };
   if (!status || status === "pending" || status === "running") {
-    return /* @__PURE__ */ jsx148("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs109("div", { className: "relative overflow-hidden rounded-2xl border border-zinc-200/70 dark:border-zinc-800 bg-zinc-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ jsx148("div", { className: "h-[3px] bg-gradient-to-r from-zinc-300 dark:from-zinc-700 via-zinc-200 dark:via-zinc-600 to-zinc-300 dark:to-zinc-700 animate-pulse" }),
-      /* @__PURE__ */ jsxs109("div", { className: "p-5", children: [
-        /* @__PURE__ */ jsxs109("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx148("div", { className: "w-10 h-10 rounded-xl bg-zinc-200 dark:bg-zinc-800 animate-pulse flex-shrink-0" }),
-          /* @__PURE__ */ jsxs109("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx148("div", { className: "h-[14px] w-[65%] rounded bg-zinc-200 dark:bg-zinc-700 animate-pulse" }),
-            /* @__PURE__ */ jsx148("div", { className: "h-[10px] w-[45%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse mt-2", style: { animationDelay: "80ms" } })
+    const pct = progress?.percentage ?? 0;
+    const step = progress?.current_step ?? "Starting...";
+    const details = progress?.details;
+    const searchesCompleted = details?.searches_completed ?? 0;
+    const searchesTotal = details?.searches_total ?? 0;
+    const phase = details?.phase ?? progress?.step_type ?? "initializing";
+    const getPhaseIcon = () => {
+      switch (phase) {
+        case "ai_generation":
+          return "\u{1F50D}";
+        case "processing":
+          return "\u{1F4DD}";
+        case "uploading":
+          return "\u2601\uFE0F";
+        default:
+          return "\u2728";
+      }
+    };
+    return /* @__PURE__ */ jsxs109("div", { className: cn("w-full", className), children: [
+      /* @__PURE__ */ jsxs109("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+        /* @__PURE__ */ jsx148(
+          "div",
+          {
+            className: "h-[3px] bg-gradient-to-r from-violet-500 via-purple-500 to-violet-500",
+            style: {
+              backgroundSize: "200% 100%",
+              animation: "gradient-shift 2s ease-in-out infinite"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs109("div", { className: "p-5", children: [
+          /* @__PURE__ */ jsxs109("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx148("div", { className: "w-10 h-10 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx148("span", { className: "text-lg", children: getPhaseIcon() }) }),
+            /* @__PURE__ */ jsxs109("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx148("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Generating Research Report" }),
+              /* @__PURE__ */ jsxs109("p", { className: "text-xs text-zinc-500 mt-0.5", children: [
+                depth && /* @__PURE__ */ jsx148("span", { className: "capitalize", children: depth }),
+                depth && " \xB7 ",
+                "In progress"
+              ] })
+            ] })
           ] }),
-          /* @__PURE__ */ jsxs109("div", { className: "flex items-center gap-1.5 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx148("div", { className: "w-[72px] h-7 rounded-lg bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "120ms" } }),
-            /* @__PURE__ */ jsx148("div", { className: "w-[88px] h-7 rounded-lg bg-zinc-200 dark:bg-zinc-700 animate-pulse", style: { animationDelay: "160ms" } })
+          /* @__PURE__ */ jsxs109("div", { className: "mt-4 space-y-3", children: [
+            /* @__PURE__ */ jsxs109("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx148("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx148(
+                "div",
+                {
+                  className: "h-full bg-gradient-to-r from-violet-500 to-purple-500 rounded-full transition-all duration-500 ease-out",
+                  style: { width: `${Math.max(pct, 2)}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxs109("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
+                pct,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs109("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx148("div", { className: "w-2 h-2 rounded-full bg-violet-500 animate-pulse" }),
+              /* @__PURE__ */ jsx148("span", { className: "text-xs text-zinc-400", children: step })
+            ] }),
+            phase === "ai_generation" && searchesTotal > 0 && /* @__PURE__ */ jsxs109("div", { className: "pt-1", children: [
+              /* @__PURE__ */ jsxs109("div", { className: "flex items-center justify-between mb-1.5", children: [
+                /* @__PURE__ */ jsx148("span", { className: "text-xs text-zinc-500", children: "Web searches" }),
+                /* @__PURE__ */ jsxs109("span", { className: "text-xs text-zinc-500 tabular-nums", children: [
+                  searchesCompleted,
+                  "/",
+                  searchesTotal
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx148("div", { className: "flex gap-1", children: Array.from({ length: Math.min(searchesTotal, 20) }).map((_, i) => /* @__PURE__ */ jsx148(
+                "div",
+                {
+                  className: cn(
+                    "flex-1 h-1 rounded-full transition-all duration-300",
+                    i < searchesCompleted ? "bg-violet-500" : i === searchesCompleted ? "bg-violet-500/50 animate-pulse" : "bg-zinc-700"
+                  )
+                },
+                i
+              )) })
+            ] })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs109("div", { className: "mt-4 flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx148("div", { className: "w-2 h-2 rounded-full bg-amber-500/60 animate-pulse" }),
-          /* @__PURE__ */ jsx148("div", { className: "h-[10px] w-[120px] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "200ms" } })
         ] })
       ] }),
-      /* @__PURE__ */ jsx148("div", { className: "absolute inset-0 -translate-x-full animate-[shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" })
-    ] }) });
+      /* @__PURE__ */ jsx148("style", { children: `
+          @keyframes gradient-shift {
+            0%, 100% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+          }
+        ` })
+    ] });
   }
   if (status === "failed") {
     return /* @__PURE__ */ jsx148("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx148("div", { className: "bg-red-950/20 border border-red-800/25 rounded-2xl p-5", children: /* @__PURE__ */ jsxs109("div", { className: "flex items-start gap-3", children: [
@@ -39599,6 +39822,7 @@ var WebSearchJobCard = ({
   summary: initialSummary,
   results: initialResults,
   error: initialError,
+  progress: initialProgress,
   pollUrl,
   authToken,
   className,
@@ -39613,6 +39837,7 @@ var WebSearchJobCard = ({
   const [summary, setSummary] = useState12(initialSummary || "");
   const [results, setResults] = useState12(initialResults || []);
   const [error, setError] = useState12(initialError);
+  const [progress, setProgress] = useState12(initialProgress);
   const intervalRef = useRef7(null);
   const onCompleteRef = useRef7(onComplete);
   const onFailedRef = useRef7(onFailed);
@@ -39643,6 +39868,11 @@ var WebSearchJobCard = ({
   useEffect8(() => {
     if (initialError) setError(initialError);
   }, [initialError]);
+  const progressPct = initialProgress?.percentage;
+  const progressStep = initialProgress?.current_step;
+  useEffect8(() => {
+    if (initialProgress) setProgress(initialProgress);
+  }, [progressPct, progressStep]);
   const isTerminal = status === "complete" || status === "failed";
   useEffect8(() => {
     if (isTerminal || !pollUrl) return;
@@ -39655,6 +39885,9 @@ var WebSearchJobCard = ({
         const data = await res.json();
         const newStatus = data.status;
         setStatus(newStatus);
+        if (data.progress) {
+          setProgress(data.progress);
+        }
         if (newStatus === "complete" && data.output) {
           const output = data.output;
           setQuery(output.query || "");
@@ -39691,31 +39924,87 @@ var WebSearchJobCard = ({
     }
   }, [isTerminal]);
   if (status === "pending" || status === "running") {
-    return /* @__PURE__ */ jsx149("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs110("div", { className: "relative overflow-hidden rounded-xl border border-zinc-200/70 dark:border-zinc-800/70 bg-zinc-100 dark:bg-zinc-900", children: [
-      /* @__PURE__ */ jsxs110("div", { className: "p-5 space-y-3", children: [
-        /* @__PURE__ */ jsxs110("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx149("div", { className: "w-10 h-10 rounded-xl bg-zinc-300 dark:bg-zinc-700 animate-pulse flex-shrink-0" }),
-          /* @__PURE__ */ jsxs110("div", { className: "flex-1 space-y-2", children: [
-            /* @__PURE__ */ jsx149("div", { className: "h-[13px] w-[60%] rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" }),
-            /* @__PURE__ */ jsx149("div", { className: "h-[10px] w-[25%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "80ms" } })
+    const pct = progress?.percentage ?? 0;
+    const step = progress?.current_step ?? "Starting web search...";
+    const details = progress?.details;
+    const searchesCompleted = details?.searches_completed ?? 0;
+    const searchesTotal = details?.searches_total ?? 0;
+    const phase = details?.phase ?? progress?.step_type ?? "initializing";
+    const getPhaseIcon = () => {
+      switch (phase) {
+        case "ai_generation":
+          return "\u{1F50D}";
+        case "processing":
+          return "\u2699\uFE0F";
+        case "uploading":
+          return "\u2601\uFE0F";
+        default:
+          return "\u2728";
+      }
+    };
+    return /* @__PURE__ */ jsx149("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxs110("div", { className: "bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden", children: [
+      /* @__PURE__ */ jsx149(
+        "div",
+        {
+          className: "h-[3px]",
+          style: {
+            background: "linear-gradient(90deg, #d97706, #f59e0b, #d97706)",
+            backgroundSize: "200% 100%",
+            animation: "gradient-shift 2s ease-in-out infinite"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs110("div", { className: "p-5", children: [
+        /* @__PURE__ */ jsxs110("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx149("div", { className: "w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx149("span", { className: "text-lg", children: getPhaseIcon() }) }),
+          /* @__PURE__ */ jsxs110("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx149("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: query || initialTitle || "Web Search" }),
+            /* @__PURE__ */ jsx149("p", { className: "text-xs text-zinc-500 mt-0.5", children: "In progress" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx149("div", { className: "h-[9px] w-[85%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "120ms" } }),
-        /* @__PURE__ */ jsx149("div", { className: "h-[9px] w-[70%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: "160ms" } }),
-        /* @__PURE__ */ jsx149("div", { className: "space-y-2 pt-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs110(
-          "div",
-          {
-            className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-3 space-y-1.5",
-            children: [
-              /* @__PURE__ */ jsx149("div", { className: "h-[10px] w-[65%] rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse", style: { animationDelay: `${200 + i * 80}ms` } }),
-              /* @__PURE__ */ jsx149("div", { className: "h-[8px] w-[18%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: `${240 + i * 80}ms` } }),
-              /* @__PURE__ */ jsx149("div", { className: "h-[8px] w-[90%] rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse", style: { animationDelay: `${280 + i * 80}ms` } })
-            ]
-          },
-          i
-        )) })
-      ] }),
-      /* @__PURE__ */ jsx149("div", { className: "absolute inset-0 -translate-x-full animate-[shimmer_2s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/10 to-transparent" })
+        /* @__PURE__ */ jsxs110("div", { className: "mt-4 space-y-3", children: [
+          /* @__PURE__ */ jsxs110("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx149("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ jsx149(
+              "div",
+              {
+                className: "h-full rounded-full transition-all duration-500 ease-out",
+                style: {
+                  width: `${Math.max(pct, 2)}%`,
+                  background: "linear-gradient(90deg, #d97706, #f59e0b)"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs110("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
+              pct,
+              "%"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs110("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx149("div", { className: "w-2 h-2 rounded-full bg-amber-500 animate-pulse flex-shrink-0" }),
+            /* @__PURE__ */ jsx149("span", { className: "text-xs text-zinc-400", children: step })
+          ] }),
+          phase === "ai_generation" && searchesTotal > 0 && /* @__PURE__ */ jsxs110("div", { className: "pt-1", children: [
+            /* @__PURE__ */ jsxs110("div", { className: "flex items-center justify-between mb-1.5", children: [
+              /* @__PURE__ */ jsx149("span", { className: "text-xs text-zinc-500", children: "Web searches" }),
+              /* @__PURE__ */ jsxs110("span", { className: "text-xs text-zinc-500 tabular-nums", children: [
+                searchesCompleted,
+                "/",
+                searchesTotal
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx149("div", { className: "flex gap-1", children: Array.from({ length: Math.min(searchesTotal, 20) }).map((_, i) => /* @__PURE__ */ jsx149(
+              "div",
+              {
+                className: cn(
+                  "flex-1 h-1 rounded-full transition-all duration-300",
+                  i < searchesCompleted ? "bg-amber-500" : i === searchesCompleted ? "bg-amber-500/50 animate-pulse" : "bg-zinc-700"
+                )
+              },
+              i
+            )) })
+          ] })
+        ] })
+      ] })
     ] }) });
   }
   if (status === "failed") {
@@ -42784,7 +43073,7 @@ function PlatformMetricsBanner({
   return /* @__PURE__ */ jsxs132(
     "div",
     {
-      className: "\r\n        grid grid-cols-1 gap-3 rounded-xl py-4 px-4 shadow-sm\r\n        md:flex md:overflow-x-auto md:gap-6 md:rounded-l-xl md:py-4 md:px-4 md:items-center md:gap-0 md:px-0 md:ml-8\r\n      ",
+      className: "\n        grid grid-cols-1 gap-3 rounded-xl py-4 px-4 shadow-sm\n        md:flex md:overflow-x-auto md:gap-6 md:rounded-l-xl md:py-4 md:px-4 md:items-center md:gap-0 md:px-0 md:ml-8\n      ",
       style: { backgroundColor: bgColor },
       children: [
         /* @__PURE__ */ jsxs132("div", { className: "flex flex-col items-center md:min-w-0", children: [
@@ -45830,6 +46119,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
 import { jsx as jsx187, jsxs as jsxs139 } from "react/jsx-runtime";
+var MOLECULE_REFS = new Set(Object.values(molecules_exports));
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -46023,8 +46313,11 @@ var normalizeProps = (props) => {
 var PXEngineRenderer = ({
   schema,
   onAction,
-  disabled
+  disabled,
+  theme
 }) => {
+  const contextTheme = React117.useContext(WidgetThemeContext);
+  const effectiveTheme = theme ?? contextTheme;
   if (!schema) return null;
   const root = schema.root || schema;
   const renderRecursive = (component, index) => {
@@ -46114,6 +46407,9 @@ var PXEngineRenderer = ({
       "ResizableAtom"
     ]);
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
+    if (effectiveTheme && finalProps.theme === void 0 && MOLECULE_REFS.has(TargetComponent)) {
+      finalProps.theme = effectiveTheme;
+    }
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
       return /* @__PURE__ */ jsx187(
@@ -46140,7 +46436,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ jsx187("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ jsx187(WidgetThemeContext.Provider, { value: effectiveTheme, children: /* @__PURE__ */ jsx187("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) }) });
 };
 export {
   Accordion,
@@ -46449,6 +46745,7 @@ export {
   TopPostsGrid,
   VideoAtom,
   WebSearchJobCard,
+  WidgetThemeContext,
   cn,
   defaultFetchSelections,
   defaultPersistSelection,
@@ -46460,6 +46757,7 @@ export {
   submitWidgetToAgent,
   th,
   useCreatorWidgetPolling,
+  useWidgetTheme,
   withAlpha
 };
 /*! Bundled license information: