pxengine 0.1.116 → 0.1.118

package/dist/index.cjs

@@ -16129,6 +16129,10 @@ var RefreshIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("svg", {
   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("polyline", { points: "23 4 23 10 17 10" }),
   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
 ] });
+var EditIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.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_runtime147.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+] });
 var SlideTypeIcon = () => /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("rect", { x: "3", y: "4", width: "18", height: "14", rx: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
@@ -16166,7 +16170,7 @@ 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" }
+    accent: { text: "text-sky-400", bg: "bg-sky-500/10 border-sky-500/20" }
   }
 ];
 var ExportModal = ({ formats, title, onClose }) => {
@@ -16283,7 +16287,7 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
   return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "fixed inset-0 z-50 bg-black flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime147.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_runtime147.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-indigo-400 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlidesIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-[#DCC99B] flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlidesIcon, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-sm font-medium text-zinc-300 truncate", children: title }),
         slideCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("span", { className: "text-xs text-zinc-600 flex-shrink-0", children: [
           currentSlide,
@@ -16297,7 +16301,7 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
           {
             onClick: () => sendSlideCommand("prevSlide"),
             disabled: !iframeReady,
-            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",
+            className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-[#C0AE82] hover:text-[#DCC99B] 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_runtime147.jsx)(ChevronLeft2, {})
           }
@@ -16307,7 +16311,7 @@ var FullscreenModal = ({ url, title, slideCount, initialSlide = 1, onClose }) =>
           {
             onClick: () => sendSlideCommand("nextSlide"),
             disabled: !iframeReady,
-            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",
+            className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-[#C0AE82] hover:text-[#DCC99B] 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_runtime147.jsx)(ChevronRight2, {})
           }
@@ -16362,6 +16366,8 @@ var PresentationJobCard = ({
   approveOutlineUrl,
   reorderSlidesUrl,
   approveSlideUrl,
+  setSlideTemplateUrl,
+  templatesUrl,
   regenerateUrl,
   hideApproval = false,
   className,
@@ -16384,6 +16390,7 @@ var PresentationJobCard = ({
   const [, setTemplateVersionId] = (0, import_react78.useState)(initialTemplateVersionId || "");
   const [reviewStatus, setReviewStatus] = (0, import_react78.useState)(initialReviewStatus || "");
   const [outline, setOutline] = (0, import_react78.useState)(initialOutline);
+  const [slideTemplateOptions, setSlideTemplateOptions] = (0, import_react78.useState)(null);
   const [showExport, setShowExport] = (0, import_react78.useState)(false);
   const [showFullscreen, setShowFullscreen] = (0, import_react78.useState)(false);
   const [copied, setCopied] = (0, import_react78.useState)(false);
@@ -16438,6 +16445,33 @@ var PresentationJobCard = ({
   (0, import_react78.useEffect)(() => {
     if (initialOutline) setOutline(initialOutline);
   }, [initialOutlineSlideCount]);
+  (0, import_react78.useEffect)(() => {
+    if (reviewStatus !== "pending_outline_approval" || slideTemplateOptions !== null) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const endpoint = templatesUrl || "/api/presentations/templates";
+        const headers = {};
+        if (authToken) headers.Authorization = `Bearer ${authToken}`;
+        const res = await fetch(endpoint, { headers });
+        if (!res.ok) throw new Error(`Templates fetch failed (${res.status})`);
+        const list = await res.json();
+        if (!cancelled && Array.isArray(list)) {
+          setSlideTemplateOptions(
+            list.map((t2) => ({
+              id: t2.template_id || t2.id || "",
+              name: t2.name || t2.template_id || t2.id || ""
+            }))
+          );
+        }
+      } catch {
+        if (!cancelled) setSlideTemplateOptions([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [reviewStatus, slideTemplateOptions, templatesUrl, authToken]);
   const updateScale = (0, import_react78.useCallback)(() => {
     if (previewRef.current) setPreviewScale(previewRef.current.offsetWidth / 1280);
   }, []);
@@ -16697,6 +16731,41 @@ var PresentationJobCard = ({
       setRowBusyIndex(null);
     }
   };
+  const setSlideTemplate = async (index, templateId2) => {
+    if (!outline || !Array.isArray(outline.slides) || rowBusyIndex !== null) return;
+    const slides = outline.slides;
+    const previousOutline = outline;
+    const updated = slides.map((s, i) => {
+      if (i !== index) return s;
+      if (!templateId2) {
+        const { template_id: _drop, ...rest } = s;
+        return rest;
+      }
+      return { ...s, template_id: templateId2 };
+    });
+    setOutline({ ...outline, slides: updated });
+    setRowBusyIndex(index);
+    setRowError(null);
+    try {
+      const endpoint = setSlideTemplateUrl || `/api/presentations/${_job_id}/outline/set-slide-template`;
+      const headers = { "Content-Type": "application/json" };
+      if (authToken) headers.Authorization = `Bearer ${authToken}`;
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({ slide_index: index, template_id: templateId2 || null })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.detail || err.error || `Template update failed (${res.status})`);
+      }
+    } catch (e) {
+      setOutline(previousOutline);
+      setRowError(e instanceof Error ? e.message : "Could not update slide's template");
+    } finally {
+      setRowBusyIndex(null);
+    }
+  };
   const handleApproveOutline = async () => {
     if (!_job_id || approvingOutline) return;
     const endpoint = approveOutlineUrl || `/api/presentations/${_job_id}/approve-outline`;
@@ -16818,11 +16887,11 @@ var PresentationJobCard = ({
         /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
           "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]",
+            className: "h-[3px]",
             style: {
+              backgroundImage: accentGradient || "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B, #C0AE82, #8B7D5E)",
               backgroundSize: "200% 100%",
-              animation: "gradient-shift 2s ease-in-out infinite",
-              ...accentGradient ? { backgroundImage: accentGradient } : {}
+              animation: "gradient-shift 2s ease-in-out infinite"
             }
           }
         ),
@@ -16831,7 +16900,7 @@ var PresentationJobCard = ({
             /* @__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",
+                className: "w-10 h-10 rounded-xl bg-[#C0AE82]/10 border border-[#C0AE82]/25 flex items-center justify-center flex-shrink-0",
                 style: { ...t.accentSubtle(0.1), ...t.accentBorder },
                 children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-lg", children: getPhaseIcon() })
               }
@@ -16849,10 +16918,11 @@ var PresentationJobCard = ({
               /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
                 "div",
                 {
-                  className: "h-full bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full transition-all duration-500 ease-out",
+                  className: "h-full rounded-full transition-all duration-500 ease-out",
                   style: {
                     width: `${Math.max(pct, 2)}%`,
-                    ...accentGradient ? { backgroundImage: accentGradient } : t.accentBg
+                    backgroundImage: accentGradient || "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)",
+                    ...!accentGradient ? t.accentBg : {}
                   }
                 }
               ) }),
@@ -16862,7 +16932,7 @@ var PresentationJobCard = ({
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "w-2 h-2 rounded-full bg-indigo-500 animate-pulse", style: t.accentBg }),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "w-2 h-2 rounded-full bg-[#C0AE82] animate-pulse", style: t.accentBg }),
               /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-xs text-zinc-400", children: step })
             ] }),
             phase === "ai_generation" && slidesTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2 pt-1", children: [
@@ -16871,7 +16941,7 @@ var PresentationJobCard = ({
                 {
                   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 < slidesCompleted ? "bg-[#C0AE82]" : i === slidesCompleted ? "bg-[#C0AE82]/50 animate-pulse" : "bg-zinc-700"
                   )
                 },
                 i
@@ -16919,7 +16989,7 @@ var PresentationJobCard = ({
           /* @__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 text-indigo-400",
+              className: "w-10 h-10 rounded-xl bg-[#C0AE82]/10 border border-[#C0AE82]/25 flex items-center justify-center flex-shrink-0 text-[#DCC99B]",
               style: { ...t.accentSubtle(0.1), ...t.accentBorder, ...t.accent },
               children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlidesIcon, {})
             }
@@ -16949,13 +17019,27 @@ var PresentationJobCard = ({
                   ]
                 }
               ),
+              slideTemplateOptions && slideTemplateOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+                "select",
+                {
+                  value: s.template_id || "",
+                  onChange: (e) => setSlideTemplate(i, e.target.value),
+                  disabled: rowBusy,
+                  title: "Design template for this slide only (default: deck's template)",
+                  className: "w-24 flex-shrink-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-1.5 h-8 text-[10px] text-zinc-300 focus:border-[#C0AE82] outline-none disabled:opacity-60",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("option", { value: "", children: "Deck default" }),
+                    slideTemplateOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("option", { value: opt.id, children: opt.name }, opt.id))
+                  ]
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
                 "input",
                 {
                   value: messageEdits[i] ?? s.message ?? "",
                   onChange: (e) => setMessageEdits((prev) => ({ ...prev, [i]: e.target.value })),
                   disabled: building,
-                  className: "flex-1 min-w-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-3 h-8 text-xs text-zinc-200 focus:border-indigo-500 outline-none disabled:opacity-60"
+                  className: "flex-1 min-w-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-3 h-8 text-xs text-zinc-200 focus:border-[#C0AE82] outline-none disabled:opacity-60"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
@@ -17030,7 +17114,7 @@ var PresentationJobCard = ({
           /* @__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 text-indigo-400",
+              className: "w-10 h-10 rounded-xl bg-[#C0AE82]/10 border border-[#C0AE82]/25 flex items-center justify-center flex-shrink-0 text-[#DCC99B]",
               style: { ...t.accentSubtle(0.1), ...t.accentBorder, ...t.accent },
               children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(SlidesIcon, {})
             }
@@ -17045,19 +17129,63 @@ var PresentationJobCard = ({
             generationMode === "template" && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("p", { className: "text-xs mt-1", children: isApproved ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-emerald-400/90", children: "Approved \u2014 future decks use this format" }) : reviewStatus === "pending_review" ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "text-amber-400/90", children: "Review this deck, then approve to lock the format" }) : null })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end", children: [
-            canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
-              "button",
-              {
-                onClick: handleRegenerate,
-                disabled: regenerating || approving,
-                title: "Try another design template with the same content",
-                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-300 text-xs font-medium transition-colors disabled:opacity-50",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(RefreshIcon, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: regenerating ? "Switching..." : "Regenerate" })
-                ]
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center rounded-lg border border-zinc-700 bg-zinc-800 overflow-hidden divide-x divide-zinc-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+                "a",
+                {
+                  href: hasHtml ? `/presentations/${_job_id}/edit` : void 0,
+                  "aria-disabled": !hasHtml,
+                  title: "Edit presentation content",
+                  className: cn(
+                    "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors",
+                    !hasHtml && "pointer-events-none opacity-40"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(EditIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: "Edit" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+                "button",
+                {
+                  onClick: () => setShowFullscreen(true),
+                  disabled: !hasHtml,
+                  title: "Open fullscreen preview",
+                  className: "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ExpandIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: "Preview" })
+                  ]
+                }
+              ),
+              canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+                "button",
+                {
+                  onClick: handleRegenerate,
+                  disabled: regenerating || approving,
+                  title: "Try another design template with the same content",
+                  className: "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors disabled:opacity-40",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(RefreshIcon, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: regenerating ? "Switching\u2026" : "Regenerate" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+                "button",
+                {
+                  onClick: handleShare,
+                  disabled: !hasHtml,
+                  title: copied ? "Copied!" : "Copy shareable link",
+                  className: cn(
+                    "flex items-center justify-center w-7 h-7 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                    copied ? "text-green-400" : "text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60"
+                  ),
+                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ShareIcon, {})
+                }
+              )
+            ] }),
             canApprove && /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
               "button",
               {
@@ -17072,39 +17200,16 @@ var PresentationJobCard = ({
               }
             ),
             isApproved && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "flex items-center justify-center w-7 h-7 rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-400", title: "Format saved", children: /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(CheckIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime147.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_runtime147.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(ShareIcon, {})
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime147.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_runtime147.jsx)(ExpandIcon, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: "Preview" })
-                ]
-              }
-            ),
             /* @__PURE__ */ (0, import_jsx_runtime147.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",
-                style: { ...t.accentBg, ...t.accentText },
+                className: "flex items-center gap-1.5 px-3 h-7 text-xs font-semibold rounded-lg transition-colors",
+                style: {
+                  backgroundImage: accentGradient || "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)",
+                  color: "#0A0A0A",
+                  ...accentGradient ? t.accentText : {}
+                },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(DownloadIcon, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { children: "Export" })
@@ -17159,7 +17264,7 @@ var PresentationJobCard = ({
                   sendSlideCommand("prevSlide");
                 },
                 disabled: !hasHtml || !iframeReady,
-                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",
+                className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-[#C0AE82] hover:text-[#DCC99B] 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_runtime147.jsx)(ChevronLeft2, {})
               }
@@ -17177,7 +17282,7 @@ var PresentationJobCard = ({
                   sendSlideCommand("nextSlide");
                 },
                 disabled: !hasHtml || !iframeReady,
-                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",
+                className: "w-7 h-7 rounded-full border border-zinc-700 bg-zinc-800 hover:border-[#C0AE82] hover:text-[#DCC99B] 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_runtime147.jsx)(ChevronRight2, {})
               }
@@ -17204,10 +17309,11 @@ var PresentationJobCard = ({
 var import_react79 = require("react");
 var import_jsx_runtime148 = require("react/jsx-runtime");
 var DEFAULT_THEME = {
-  primary: "#8b5cf6",
-  secondary: "#a78bfa",
-  accent: "#c4b5fd"
+  primary: "#C0AE82",
+  secondary: "#C4AD7C",
+  accent: "#DCC99B"
 };
+var GOLD_GRADIENT = "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)";
 function readableOn(bg) {
   if (!bg || typeof bg !== "string") return "#ffffff";
   const hex = bg.replace("#", "");
@@ -17254,6 +17360,10 @@ var RefreshIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("svg",
   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("polyline", { points: "23 4 23 10 17 10" }),
   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("path", { d: "M20.49 15a9 9 0 1 1-2.12-9.36L23 10" })
 ] });
+var EditIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime148.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_runtime148.jsx)("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+] });
 function formatTemplateLabel2(templateId) {
   if (!templateId) return null;
   return templateId.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
@@ -17275,7 +17385,7 @@ var FullscreenPreviewModal = ({ url, title, onClose }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "fixed inset-0 z-50 bg-black flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime148.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_runtime148.jsxs)("div", { className: "flex items-center gap-3 min-w-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-violet-400 flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DocumentIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-[#DCC99B] flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DocumentIcon, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-sm font-medium text-zinc-300 truncate", children: title })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
@@ -17756,8 +17866,9 @@ var ResearchReportJobCard = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
           "div",
           {
-            className: "h-[3px] bg-gradient-to-r from-violet-500 via-purple-500 to-violet-500",
+            className: "h-[3px]",
             style: {
+              backgroundImage: "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B, #C0AE82, #8B7D5E)",
               backgroundSize: "200% 100%",
               animation: "gradient-shift 2s ease-in-out infinite"
             }
@@ -17765,7 +17876,7 @@ var ResearchReportJobCard = (props) => {
         ),
         /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "p-5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("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__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-lg", children: getPhaseIcon() }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[#C0AE82]/10 border border-[#C0AE82]/25 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-lg", children: getPhaseIcon() }) }),
             /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Generating Research Report" }),
               /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("p", { className: "text-xs text-zinc-500 mt-0.5", children: [
@@ -17780,8 +17891,8 @@ var ResearchReportJobCard = (props) => {
               /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "h-2 bg-zinc-800 rounded-full overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
                 "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)}%` }
+                  className: "h-full rounded-full transition-all duration-500 ease-out",
+                  style: { width: `${Math.max(pct, 2)}%`, backgroundImage: GOLD_GRADIENT }
                 }
               ) }),
               /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("span", { className: "absolute right-0 -top-5 text-xs text-zinc-500 font-medium tabular-nums", children: [
@@ -17790,7 +17901,7 @@ var ResearchReportJobCard = (props) => {
               ] })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-2 h-2 rounded-full bg-violet-500 animate-pulse" }),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-2 h-2 rounded-full bg-[#C0AE82] animate-pulse" }),
               /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-xs text-zinc-400", children: step })
             ] }),
             phase === "ai_generation" && searchesTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "pt-1", children: [
@@ -17807,7 +17918,7 @@ var ResearchReportJobCard = (props) => {
                 {
                   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 < searchesCompleted ? "bg-[#C0AE82]" : i === searchesCompleted ? "bg-[#C0AE82]/50 animate-pulse" : "bg-zinc-700"
                   )
                 },
                 i
@@ -17841,12 +17952,12 @@ var ResearchReportJobCard = (props) => {
         "div",
         {
           className: "h-[3px]",
-          style: { background: "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)" }
+          style: { backgroundImage: GOLD_GRADIENT }
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "p-5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("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 text-violet-300", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DocumentIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "w-10 h-10 rounded-xl bg-[#C0AE82]/10 border border-[#C0AE82]/25 flex items-center justify-center flex-shrink-0 text-[#DCC99B]", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DocumentIcon, {}) }),
           /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("h3", { className: "text-sm font-semibold text-zinc-100 truncate leading-tight", children: title || "Report outline" }),
             /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("p", { className: "text-xs text-amber-400/90 mt-0.5", children: [
@@ -17867,7 +17978,7 @@ var ResearchReportJobCard = (props) => {
                   value: headingEdits[i] ?? s.heading ?? "",
                   onChange: (e) => setHeadingEdits((prev) => ({ ...prev, [i]: e.target.value })),
                   disabled: building,
-                  className: "flex-1 min-w-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-3 h-8 text-xs text-zinc-200 focus:border-violet-500 outline-none disabled:opacity-60"
+                  className: "flex-1 min-w-0 bg-zinc-800/60 border border-zinc-700 rounded-lg px-3 h-8 text-xs text-zinc-200 focus:border-[#C0AE82] outline-none disabled:opacity-60"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
@@ -18129,19 +18240,75 @@ var ResearchReportJobCard = (props) => {
             generationMode === "template" && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("p", { className: "text-xs mt-1", children: isApproved ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-emerald-400/90", children: "Approved \u2014 future reports use this format" }) : reviewStatus === "pending_review" ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "text-amber-400/90", children: "Review this report, then approve to lock the layout" }) : null })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center gap-1.5 flex-shrink-0 flex-wrap justify-end", children: [
-            canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
-              "button",
-              {
-                onClick: handleRegenerate,
-                disabled: regenerating || approving,
-                title: "Try another report template with the same data",
-                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-300 text-xs font-medium transition-colors disabled:opacity-50",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(RefreshIcon2, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: regenerating ? "Switching..." : "Regenerate" })
-                ]
-              }
-            ),
+            /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { className: "flex items-center rounded-lg border border-zinc-700 bg-zinc-800 overflow-hidden divide-x divide-zinc-700", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
+                "a",
+                {
+                  href: htmlUrl ? `/reports/${job_id}/edit` : void 0,
+                  "aria-disabled": !htmlUrl,
+                  title: "Edit report content",
+                  className: cn(
+                    "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors",
+                    !htmlUrl && "pointer-events-none opacity-40"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(EditIcon2, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: "Edit" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
+                "button",
+                {
+                  onClick: () => setShowPreview(true),
+                  disabled: !hasHTML,
+                  title: "Preview report",
+                  className: "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ExpandIcon2, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: "Preview" })
+                  ]
+                }
+              ),
+              canRegenerate && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
+                "button",
+                {
+                  onClick: handleRegenerate,
+                  disabled: regenerating || approving,
+                  title: "Try another report template with the same data",
+                  className: "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors disabled:opacity-40",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(RefreshIcon2, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: regenerating ? "Switching\u2026" : "Regenerate" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+                "button",
+                {
+                  onClick: handleShare,
+                  disabled: !canShare,
+                  title: !canShare && reviewStatus === "pending_review" ? "Approve the report to enable sharing" : copied ? "Copied!" : "Copy shareable link",
+                  className: cn(
+                    "flex items-center justify-center w-7 h-7 transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
+                    copied ? "text-green-400" : "text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60"
+                  ),
+                  children: copied ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(CheckIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ShareIcon2, {})
+                }
+              ),
+              pdfUrl && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
+                "button",
+                {
+                  onClick: handleDownloadPdf,
+                  title: "Download PDF",
+                  className: "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium text-zinc-300 hover:text-zinc-100 hover:bg-zinc-700/60 transition-colors",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DownloadIcon2, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: "PDF" })
+                  ]
+                }
+              )
+            ] }),
             canApprove && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
               "button",
               {
@@ -18156,53 +18323,14 @@ var ResearchReportJobCard = (props) => {
               }
             ),
             isApproved && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "flex items-center justify-center w-7 h-7 rounded-lg border border-emerald-500/40 bg-emerald-500/10 text-emerald-400", title: "Format saved", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(CheckIcon2, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
-              "button",
-              {
-                onClick: handleShare,
-                disabled: !canShare,
-                title: !canShare && reviewStatus === "pending_review" ? "Approve the report to enable sharing" : 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_runtime148.jsx)(CheckIcon2, {}) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(ShareIcon2, {})
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
-              "button",
-              {
-                onClick: () => setShowPreview(true),
-                disabled: !hasHTML,
-                title: "Preview report",
-                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_runtime148.jsx)(ExpandIcon2, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: "Preview" })
-                ]
-              }
-            ),
-            pdfUrl && /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
-              "button",
-              {
-                onClick: handleDownloadPdf,
-                title: "Download PDF",
-                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",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DownloadIcon2, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { children: "PDF" })
-                ]
-              }
-            ),
             /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
               "button",
               {
                 onClick: handleDownload,
                 disabled: !hasHTML,
-                className: "flex items-center gap-1.5 px-2.5 h-7 text-xs font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-                style: { backgroundColor: primaryColor, color: readableOn(primaryColor) },
-                onMouseEnter: (e) => e.currentTarget.style.filter = "brightness(1.15)",
+                className: "flex items-center gap-1.5 px-3 h-7 text-xs font-semibold rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+                style: { backgroundImage: GOLD_GRADIENT, color: readableOn(primaryColor) },
+                onMouseEnter: (e) => e.currentTarget.style.filter = "brightness(1.1)",
                 onMouseLeave: (e) => e.currentTarget.style.filter = "brightness(1)",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(DownloadIcon2, {}),
@@ -18400,7 +18528,7 @@ var WebSearchJobCard = ({
         {
           className: "h-[3px]",
           style: {
-            background: "linear-gradient(90deg, #d97706, #f59e0b, #d97706)",
+            backgroundImage: "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B, #C0AE82, #8B7D5E)",
             backgroundSize: "200% 100%",
             animation: "gradient-shift 2s ease-in-out infinite"
           }
@@ -18422,7 +18550,7 @@ var WebSearchJobCard = ({
                 className: "h-full rounded-full transition-all duration-500 ease-out",
                 style: {
                   width: `${Math.max(pct, 2)}%`,
-                  background: "linear-gradient(90deg, #d97706, #f59e0b)"
+                  backgroundImage: "linear-gradient(90deg, #8B7D5E, #C0AE82, #DCC99B)"
                 }
               }
             ) }),
@@ -18432,7 +18560,7 @@ var WebSearchJobCard = ({
             ] })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "w-2 h-2 rounded-full bg-amber-500 animate-pulse flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("div", { className: "w-2 h-2 rounded-full bg-[#C0AE82] animate-pulse flex-shrink-0" }),
             /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { className: "text-xs text-zinc-400", children: step })
           ] }),
           searchesTotal > 0 && /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("div", { className: "pt-1", children: [
@@ -18449,7 +18577,7 @@ var WebSearchJobCard = ({
               {
                 className: cn(
                   "flex-1 h-1 rounded-full transition-all duration-300",
-                  i < searchesCompleted ? "bg-amber-500" : phase === "ai_generation" && i === searchesCompleted ? "bg-amber-500/50 animate-pulse" : "bg-zinc-700"
+                  i < searchesCompleted ? "bg-[#C0AE82]" : phase === "ai_generation" && i === searchesCompleted ? "bg-[#C0AE82]/50 animate-pulse" : "bg-zinc-700"
                 )
               },
               i
@@ -21689,7 +21817,7 @@ function PlatformMetricsBanner({
   return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
     "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__ */ (0, import_jsx_runtime173.jsxs)("div", { className: "flex flex-col items-center md:min-w-0", children: [