pxengine 0.1.142 → 0.1.144

package/README.md

@@ -2,7 +2,7 @@
 
 > **Shadcn-based UI component library for agent-driven interfaces**
 
-A premium UI component library built on top of shadcn/ui, designed specifically for agent-driven user interfaces and creator discovery platforms. Components follow Atomic Design principles and are optimized for schema-driven rendering.
+A UI component library built on top of shadcn/ui, published to npm as **`pxengine`**, designed specifically for agent-driven interfaces: LLM agents emit a JSON schema, and `PXEngineRenderer` maps it to a React component. Components follow Atomic Design principles and are optimized for schema-driven rendering. Primary consumer is `pxengine-builder`, which links it locally (`"pxengine": "file:../@pxengine-ui"`).
 
 ---
 
@@ -11,10 +11,10 @@ A premium UI component library built on top of shadcn/ui, designed specifically
 `@pxengine-ui` provides a robust foundation for building modern dashboard and AI-integrated applications:
 
 - **Built on shadcn/ui** - Industry-standard base layer using Radix UI primitives.
-- **Vibrant & Premium** - Custom design system with glassmorphism, smooth gradients, and rich micro-interactions.
-- **Agent-First** - Fully schema-driven atoms ready for AI generation.
-- **Atomic Design** - 40+ Atoms and 18+ Composed Molecules.
-- **Zero Configuration** - Inherits Tailwind config and CSS variables from the host application.
+- **Themeable via CSS variables** - No hardcoded palette. Components read `--px-*`/host CSS custom properties at render time (falling back to internal purple/indigo defaults when a consumer doesn't supply them), so a dark-gold host app (like `pxengine-builder`) and a light one render the same components on entirely different themes with zero component changes.
+- **Agent-First** - Fully schema-driven atoms and molecules ready for AI generation via `PXEngineRenderer`.
+- **Atomic Design** - 52 Atoms and 60+ Composed Molecules across two domains (generic dashboard + creator discovery).
+- **Zero Configuration** - Inherits Tailwind config and CSS variables from the host application; the host just needs `"node_modules/pxengine/**/*.{js,ts,jsx,tsx}"` in its Tailwind `content` array or production builds purge all pxengine classes.
 
 ---
 
@@ -23,13 +23,17 @@ A premium UI component library built on top of shadcn/ui, designed specifically
 ```
 @pxengine-ui/
 ├── src/
-│   ├── atoms/               # Foundation UI (Button, Input, Slider, etc.)
+│   ├── atoms/               # Foundation UI (Button, Input, Slider, etc.) — 52 components
 │   ├── molecules/           # Composed Patterns
-│   │   ├── generic/         # Cross-domain dashboard widgets
-│   │   └── creator-discovery/ # Niche-specific for creator search
+│   │   ├── generic/         # Cross-domain dashboard widgets (~48 components)
+│   │   └── creator-discovery/ # Niche-specific for creator search (~16 components)
 │   ├── types/               # Schema & Component definitions
 │   └── lib/                 # Shared utilities
-└── dist/                    # Compiled assets & Registry
+├── scripts/
+│   ├── generate-metadata.ts          # Builds dist/registry.json (component catalog for agents)
+│   └── generate-molecule-registry.ts # Builds the molecule-only registry
+├── tailwind-preset.js        # Shared Tailwind preset re-exported for consumers
+└── dist/                    # Compiled assets (tsup: CJS + ESM + DTS) & Registry
 ```
 
 ---
@@ -38,7 +42,7 @@ A premium UI component library built on top of shadcn/ui, designed specifically
 
 ### Atoms (Foundation Primitives)
 
-40+ accessible atoms wrapping Radix-based shadcn components:
+52 accessible atoms wrapping Radix-based shadcn components:
 
 - **Forms**: Input, Checkbox, RadioGroup, Select, Switch, Slider, Textarea, Toggle.
 - **Navigation**: DropdownMenu, ContextMenu, Pagination, Breadcrumb, Tabs, Command.
@@ -48,25 +52,25 @@ A premium UI component library built on top of shadcn/ui, designed specifically
 
 ### Molecules (High-Level Patterns)
 
-#### Generic Dashboard
+#### Generic Dashboard (`src/molecules/generic/`)
 
-- **StatsGrid**: Data visualization with trends & icons.
-- **EmptyState**: Premium placeholder for empty results.
-- **LoadingOverlay**: Glassmorphism backdrop with progress.
-- **FilterBar**: Search + Multi-chip filtering.
-- **FileUpload**: Drag-and-drop zone.
-- **TagCloud**: Interactive interest clusters.
-- **FormCard**: Schema-driven editable forms.
+Cross-domain widgets, including job-card families for long-running agent work (`ResearchReportJobCard`, `PresentationJobCard`, `WebSearchJobCard` — share layout/state conventions via `job-card-shared/`), data/table components (`DataGrid`, `DataTableCard`, `TablePagination`), integration cards (`GitHubConnectCard`, `GitHubRepoHealthCard`, `GoogleSheetsCard`, `GoogleSheetsConnectCard`), and general dashboard primitives:
 
-#### Creator Discovery
+- **StatsGrid** / **KPIStatsCard**: Data visualization with trends & icons.
+- **EmptyState**, **LoadingOverlay**: Placeholder/loading states.
+- **FilterBar**, **FileUpload**, **TagCloud**, **FormCard**, **DynamicFormCard**, **EditableField**: Input & filtering patterns.
+- **ChecklistCard**, **ApprovalCard**, **ConfirmationCard**, **PollCard**: Decision/workflow patterns.
+- **CampaignBriefCard**, **ChannelPlanCard**, **BudgetAllocCard**, **CalendarEventCard**: Campaign-planning widgets.
+
+#### Creator Discovery (`src/molecules/creator-discovery/`)
 
 - **CreatorGridCard**: Detailed discovery card with banner and metrics.
-- **AudienceMetricCard**: Specialized progress-based demographics.
+- **AudienceMetricCard** / **AudienceDemographicsCard**: Progress-based demographics.
 - **BrandAffinityGroup**: Visual recently associated brand logos.
 - **ContentPreviewGallery**: Video/Image thumbnail grids.
-- **CreatorProfileSummary**: Compact info row for list views.
-- **PlatformIconGroup**: Social platform reach summary.
-- **SearchSpecCard**: Advanced filter criteria summary.
+- **CreatorProfileSummary**, **CreatorSearchBox**, **CreatorWidget**, **CreatorActionHeader**: Search & profile patterns.
+- **PlatformIconGroup**, **GrowthChartCard**, **TopPostsGrid**: Reach & performance summaries.
+- **SearchSpecCard**, **MCQCard**, **CampaignSeedCard**, **CampaignConceptCard**: Agent-driven intake/spec patterns.
 
 ---
 
@@ -74,10 +78,10 @@ A premium UI component library built on top of shadcn/ui, designed specifically
 
 ### Registry-Driven Rendering
 
-The library generates a `registry.json` that includes component metadata and schemas, allowing agents to understand what they can render.
+`npm run build` runs `generate-metadata` automatically (`tsup.config.ts`'s `onSuccess` hook), producing `dist/registry.json` — component metadata + schemas so agents (the server's `ui_generator`/`widget_builder` agents) know what they can render. **Never hand-edit `dist/registry.json`** — it's derived output; if a new molecule isn't showing up in agent suggestions, rebuild and confirm the registry picked it up. `PXEngineRenderer` (exported from the package root) maps a schema's `type` field to a React component via a discriminated-union registry — adding a new molecule requires registering its `type` string there or it silently won't render.
 
 ```tsx
-import { PXEngineRenderer } from "@/components/PXEngineRenderer";
+import { PXEngineRenderer } from "pxengine";
 
 const schema = {
   type: "stats-grid",
@@ -113,20 +117,20 @@ import { CreatorGridCard } from "pxengine";
 
 ## Design System
 
-The library uses a specific high-end aesthetic:
+Components are **theme-agnostic by design** — they read CSS custom properties (`--px-*`, plus the host's own tokens) at render time rather than hardcoding a palette, so `cn()` (re-exported from `pxengine`, not `clsx`, for consumers) composes host classes on top of component defaults. A few atoms (e.g. `AvatarAtom`) fall back to internal indigo/purple/slate defaults (`var(--px-bg-color, var(--purple50))`) when a host doesn't supply theme vars — that fallback palette is NOT what most consumers actually see. `pxengine-builder`, the primary consumer, supplies a dark, gold-accented theme (`--gold: #C0AE82`, `surface.chat #0A0A0A` → `surface.elevated #1E1E1F`, see its README) via `globals.css`, and every pxengine component renders on that theme with zero component-level changes.
 
-- **Colors**: Indigo, Purple, and Slate primary hues.
 - **Border Radius**: Generous `rounded-3xl` and `rounded-[32px]` for major components.
-- **Backdrop**: Heavy use of `backdrop-blur-md` and `bg-white/60`.
+- **Backdrop**: Uses `backdrop-blur-md` for overlay/glass surfaces where the host theme calls for it.
 - **Shadows**: Subtle, layered soft shadows for depth.
 
 ---
 
 ## Tech Stack
 
-- **Framework**: React 18+ (Vite/tsup build)
-- **Styling**: Tailwind CSS + `class-variance-authority`
-- **Primitives**: Radix UI
-- **Animations**: Framer Motion
-- **Icons**: Lucide React
-- **Data**: Recharts / Zod
+- **Framework**: React (peer dep `^18.0.0 || ^19.0.0`; primary consumer runs 19) — built with **tsup** (CJS + ESM + `.d.ts`), not Vite
+- **Styling**: Tailwind CSS + `class-variance-authority` + `tailwind-preset.js` (shared preset re-exported for consumers)
+- **Primitives**: Radix UI (via shadcn/ui)
+- **Animations**: Framer Motion (peer dep, external — not bundled)
+- **Icons**: Lucide React (bundled into the build via `tsup`'s `noExternal`, along with `date-fns`, `@date-fns/tz`, `react-day-picker`)
+- **Charts**: Highcharts + `highcharts-react-official`, and Recharts — all peer deps, external
+- **Data/validation**: Zod

package/dist/index.cjs

@@ -16779,6 +16779,25 @@ var EditIcon = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("svg", { wi
 ] });
 var ChevronUpIcon = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("polyline", { points: "18 15 12 9 6 15" }) });
 var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("polyline", { points: "6 9 12 15 18 9" }) });
+var PptxIcon = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("rect", { x: "3", y: "4", width: "18", height: "13", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M7 21h10M12 17v4" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M8 13v-2M12 13V9M16 13v-3" })
+] });
+var PdfIcon = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M14 3v5h5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M9 13h6M9 17h4" })
+] });
+var HtmlIcon = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("rect", { x: "3", y: "4", width: "18", height: "16", rx: "2" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M3 9h18" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M6.5 6.5h.01M9.5 6.5h.01" })
+] });
+var Spinner2 = () => /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("svg", { className: "animate-spin", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: "0.25", strokeWidth: "3" }),
+  /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+] });
 
 // src/molecules/generic/PresentationJobCard/PresentationJobCard.tsx
 var import_jsx_runtime152 = require("react/jsx-runtime");
@@ -16837,31 +16856,34 @@ var FORMATS = [
     key: "pptx_url",
     label: "PowerPoint",
     ext: ".pptx",
-    emoji: "\u{1F4CA}",
+    Icon: PptxIcon,
     desc: "Editable slides \u2014 open in PowerPoint, Keynote, or Google Slides",
-    accent: { text: "text-orange-400", bg: "bg-orange-500/10 border-orange-500/20" }
+    // Hue lives on the icon tile only; the row itself stays neutral so three
+    // stacked formats don't read as three competing status colours.
+    accent: { icon: "text-orange-300", tile: "bg-orange-500/10 ring-orange-500/20" }
   },
   {
     key: "pdf_url",
     label: "PDF",
     ext: ".pdf",
-    emoji: "\u{1F4C4}",
+    Icon: PdfIcon,
     desc: "Print-ready, fixed layout \u2014 open in any PDF viewer",
-    accent: { text: "text-red-400", bg: "bg-red-500/10 border-red-500/20" }
+    accent: { icon: "text-red-300", tile: "bg-red-500/10 ring-red-500/20" }
   },
   {
     key: "html_url",
     label: "HTML",
     ext: ".html",
-    emoji: "\u{1F310}",
+    Icon: HtmlIcon,
     desc: "Interactive web presentation \u2014 download and open in browser",
-    accent: { text: "text-sky-400", bg: "bg-sky-500/10 border-sky-500/20" }
+    accent: { icon: "text-sky-300", tile: "bg-sky-500/10 ring-sky-500/20" }
   }
 ];
 var ExportModal = ({ formats, title, onClose }) => {
   const available = FORMATS.filter((f) => (formats ?? {})[f.key]);
   const filename = (title ?? "").replace(/[^a-z0-9]/gi, "-").toLowerCase();
   const [downloadingKey, setDownloadingKey] = (0, import_react82.useState)(null);
+  const panelRef = (0, import_react82.useRef)(null);
   const handleDownload = async (fmtKey, url, ext) => {
     if (downloadingKey) return;
     const downloadName = `${filename}${ext}`;
@@ -16879,55 +16901,120 @@ var ExportModal = ({ formats, title, onClose }) => {
       anchor.click();
       anchor.remove();
       window.URL.revokeObjectURL(objectUrl);
+      onClose();
     } catch {
-      window.open(href, "_blank", "noopener,noreferrer");
+      const popup = window.open(href, "_blank", "noopener,noreferrer");
+      if (popup) onClose();
     } finally {
       setDownloadingKey(null);
     }
   };
+  (0, import_react82.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose]);
+  (0, import_react82.useEffect)(() => {
+    document.body.style.overflow = "hidden";
+    panelRef.current?.focus();
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
   return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "fixed inset-0 z-[100] flex items-center justify-center p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "absolute inset-0 bg-black/70 backdrop-blur-sm", onClick: onClose }),
-      /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "relative z-10 bg-zinc-900 border border-zinc-800 rounded-2xl w-full max-w-sm p-6 shadow-2xl", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "flex items-start justify-between mb-5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "min-w-0 pr-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("h3", { className: "text-sm font-semibold text-zinc-100", children: "Export Presentation" }),
-            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 truncate", children: title })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("button", { onClick: onClose, className: "text-zinc-500 hover:text-zinc-200 transition-colors flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(CloseIcon, {}) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "space-y-2.5", children: [
-          available.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-sm text-zinc-500 text-center py-6", children: "No formats available yet" }),
-          available.map((fmt) => {
-            const url = formats[fmt.key];
-            const isDownloading = downloadingKey === fmt.key;
-            return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
-              "button",
-              {
-                type: "button",
-                disabled: Boolean(downloadingKey),
-                onClick: () => handleDownload(fmt.key, url, fmt.ext),
-                className: cn(
-                  "flex w-full items-center gap-3.5 p-3.5 rounded-xl border transition-all text-left",
-                  "hover:brightness-110 disabled:opacity-60 disabled:cursor-not-allowed",
-                  fmt.accent.bg
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "text-xl flex-shrink-0", children: fmt.emoji }),
-                  /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: cn("text-sm font-semibold", fmt.accent.text), children: isDownloading ? `Downloading ${fmt.label}...` : fmt.label }),
-                    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 leading-relaxed", children: isDownloading ? "Please wait while the file is being prepared." : fmt.desc })
+    /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+      "div",
+      {
+        className: "fixed inset-0 z-[100] flex items-center justify-center p-4",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "pxe-export-title",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "absolute inset-0 bg-black/70 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+            "div",
+            {
+              ref: panelRef,
+              tabIndex: -1,
+              className: "relative z-10 w-full max-w-md overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900 shadow-2xl outline-none",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "flex items-start gap-3 border-b border-zinc-800/80 px-5 py-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[#C0AE82]/10 text-[#DCC99B] ring-1 ring-[#C0AE82]/20", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(SlidesIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("h3", { id: "pxe-export-title", className: "text-sm font-semibold text-zinc-100", children: "Export presentation" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "mt-0.5 truncate text-xs text-zinc-500", children: title })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: cn("flex-shrink-0", fmt.accent.text), children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DownloadIcon, {}) })
-                ]
-              },
-              fmt.key
-            );
-          })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-xs text-zinc-600 mt-4 text-center", children: "Download links expire in 90 days" })
-      ] })
-    ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      "aria-label": "Close export dialog",
+                      className: "-mr-1 mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-200",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(CloseIcon, {})
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "space-y-2 p-4", children: available.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "py-8 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-sm text-zinc-400", children: "No formats available yet" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "mt-1 text-xs text-zinc-600", children: "Exports appear here once the deck finishes generating." })
+                ] }) : available.map((fmt) => {
+                  const url = formats[fmt.key];
+                  const isDownloading = downloadingKey === fmt.key;
+                  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: Boolean(downloadingKey),
+                      onClick: () => handleDownload(fmt.key, url, fmt.ext),
+                      className: cn(
+                        "group flex w-full items-center gap-3 rounded-xl border border-zinc-800 bg-zinc-800/40 p-3 text-left transition-all",
+                        "hover:border-[#C0AE82]/40 hover:bg-zinc-800/70",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C0AE82]/50",
+                        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-zinc-800 disabled:hover:bg-zinc-800/40"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ring-1",
+                              fmt.accent.tile,
+                              fmt.accent.icon
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(fmt.Icon, {})
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-sm font-semibold text-zinc-100", children: fmt.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500 ring-1 ring-zinc-700/60", children: fmt.ext })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "mt-0.5 text-xs leading-relaxed text-zinc-500", children: isDownloading ? "Preparing your file\u2026" : fmt.desc })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "flex-shrink-0 transition-colors",
+                              isDownloading ? "text-[#DCC99B]" : "text-zinc-600 group-hover:text-[#DCC99B]"
+                            ),
+                            children: isDownloading ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Spinner2, {}) : /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(DownloadIcon, {})
+                          }
+                        )
+                      ]
+                    },
+                    fmt.key
+                  );
+                }) }),
+                available.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "border-t border-zinc-800/80 px-5 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("p", { className: "text-center text-[11px] text-zinc-600", children: "Download links expire in 90 days" }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
     document.body
   );
 };
@@ -18081,6 +18168,7 @@ var PresentationJobCard = ({
 
 // src/molecules/generic/ResearchReportJobCard/ResearchReportJobCard.tsx
 var import_react83 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime153 = require("react/jsx-runtime");
 var DEFAULT_THEME = {
   primary: "#C0AE82",
@@ -18167,17 +18255,19 @@ var REPORT_FORMATS = [
     key: "pdf",
     label: "PDF",
     ext: ".pdf",
-    emoji: "\u{1F4C4}",
+    Icon: PdfIcon,
     desc: "Print-ready, fixed layout \u2014 open in any PDF viewer",
-    accent: { text: "text-red-400", bg: "bg-red-500/10 border-red-500/20" }
+    // Hue lives on the icon tile only; the rows themselves stay neutral so
+    // stacked formats don't read as competing status colours.
+    accent: { icon: "text-red-300", tile: "bg-red-500/10 ring-red-500/20" }
   },
   {
     key: "html",
     label: "HTML",
     ext: ".html",
-    emoji: "\u{1F310}",
+    Icon: HtmlIcon,
     desc: "Interactive web page \u2014 download and open in a browser",
-    accent: { text: "text-sky-400", bg: "bg-sky-500/10 border-sky-500/20" }
+    accent: { icon: "text-sky-300", tile: "bg-sky-500/10 ring-sky-500/20" }
   }
 ];
 var ReportExportModal = ({ htmlUrl, pdfUrl, title, onClose }) => {
@@ -18185,6 +18275,7 @@ var ReportExportModal = ({ htmlUrl, pdfUrl, title, onClose }) => {
   const available = REPORT_FORMATS.filter((f) => urls[f.key]);
   const filename = (title ?? "").replace(/[^a-z0-9]/gi, "-").toLowerCase();
   const [downloadingKey, setDownloadingKey] = (0, import_react83.useState)(null);
+  const panelRef = (0, import_react83.useRef)(null);
   (0, import_react83.useEffect)(() => {
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -18192,6 +18283,13 @@ var ReportExportModal = ({ htmlUrl, pdfUrl, title, onClose }) => {
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [onClose]);
+  (0, import_react83.useEffect)(() => {
+    document.body.style.overflow = "hidden";
+    panelRef.current?.focus();
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
   const handleDownload = async (key, url, ext) => {
     if (downloadingKey) return;
     const downloadName = `${filename}${ext}`;
@@ -18209,53 +18307,107 @@ var ReportExportModal = ({ htmlUrl, pdfUrl, title, onClose }) => {
       anchor.click();
       anchor.remove();
       window.URL.revokeObjectURL(objectUrl);
+      onClose();
     } catch {
-      window.open(url, "_blank", "noopener,noreferrer");
+      const popup = window.open(url, "_blank", "noopener,noreferrer");
+      if (popup) onClose();
     } finally {
       setDownloadingKey(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "absolute inset-0 bg-black/70 backdrop-blur-sm", onClick: onClose }),
-    /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "relative z-10 bg-zinc-900 border border-zinc-800 rounded-2xl w-full max-w-sm p-6 shadow-2xl", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-start justify-between mb-5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "min-w-0 pr-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("h3", { className: "text-sm font-semibold text-zinc-100", children: "Download report" }),
-          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 truncate", children: title })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("button", { onClick: onClose, className: "text-zinc-500 hover:text-zinc-200 transition-colors flex-shrink-0 mt-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(CloseIcon, {}) })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "space-y-2.5", children: [
-        available.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-sm text-zinc-500 text-center py-6", children: "No formats available yet" }),
-        available.map((fmt) => {
-          const url = urls[fmt.key];
-          const isDownloading = downloadingKey === fmt.key;
-          return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
-            "button",
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
+      "div",
+      {
+        className: "fixed inset-0 z-[100] flex items-center justify-center p-4",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "pxe-report-export-title",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "absolute inset-0 bg-black/70 backdrop-blur-sm", onClick: onClose }),
+          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
+            "div",
             {
-              type: "button",
-              disabled: Boolean(downloadingKey),
-              onClick: () => handleDownload(fmt.key, url, fmt.ext),
-              className: cn(
-                "flex w-full items-center gap-3.5 p-3.5 rounded-xl border transition-all text-left",
-                "hover:brightness-110 disabled:opacity-60 disabled:cursor-not-allowed",
-                fmt.accent.bg
-              ),
+              ref: panelRef,
+              tabIndex: -1,
+              className: "relative z-10 w-full max-w-md overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-900 shadow-2xl outline-none",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-xl flex-shrink-0", children: fmt.emoji }),
-                /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: cn("text-sm font-semibold", fmt.accent.text), children: isDownloading ? `Downloading ${fmt.label}...` : fmt.label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-xs text-zinc-500 mt-0.5 leading-relaxed", children: isDownloading ? "Please wait while the file is being prepared." : fmt.desc })
+                /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-start gap-3 border-b border-zinc-800/80 px-5 py-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-[#C0AE82]/10 text-[#DCC99B] ring-1 ring-[#C0AE82]/20", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DocumentIcon, {}) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("h3", { id: "pxe-report-export-title", className: "text-sm font-semibold text-zinc-100", children: "Download report" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "mt-0.5 truncate text-xs text-zinc-500", children: title })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      "aria-label": "Close download dialog",
+                      className: "-mr-1 mt-0.5 flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-200",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(CloseIcon, {})
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: cn("flex-shrink-0", fmt.accent.text), children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DownloadIcon, {}) })
+                /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "space-y-2 p-4", children: available.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "py-8 text-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-sm text-zinc-400", children: "No formats available yet" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "mt-1 text-xs text-zinc-600", children: "Downloads appear here once the report finishes generating." })
+                ] }) : available.map((fmt) => {
+                  const url = urls[fmt.key];
+                  const isDownloading = downloadingKey === fmt.key;
+                  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: Boolean(downloadingKey),
+                      onClick: () => handleDownload(fmt.key, url, fmt.ext),
+                      className: cn(
+                        "group flex w-full items-center gap-3 rounded-xl border border-zinc-800 bg-zinc-800/40 p-3 text-left transition-all",
+                        "hover:border-[#C0AE82]/40 hover:bg-zinc-800/70",
+                        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[#C0AE82]/50",
+                        "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-zinc-800 disabled:hover:bg-zinc-800/40"
+                      ),
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ring-1",
+                              fmt.accent.tile,
+                              fmt.accent.icon
+                            ),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(fmt.Icon, {})
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-center gap-2", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-sm font-semibold text-zinc-100", children: fmt.label }),
+                            /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-[10px] text-zinc-500 ring-1 ring-zinc-700/60", children: fmt.ext })
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "mt-0.5 text-xs leading-relaxed text-zinc-500", children: isDownloading ? "Preparing your file\u2026" : fmt.desc })
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
+                          "span",
+                          {
+                            className: cn(
+                              "flex-shrink-0 transition-colors",
+                              isDownloading ? "text-[#DCC99B]" : "text-zinc-600 group-hover:text-[#DCC99B]"
+                            ),
+                            children: isDownloading ? /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(Spinner2, {}) : /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DownloadIcon, {})
+                          }
+                        )
+                      ]
+                    },
+                    fmt.key
+                  );
+                }) })
               ]
-            },
-            fmt.key
-          );
-        })
-      ] })
-    ] })
-  ] });
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
 };
 function deriveJobStatusUrl2(newJobId, pollUrl, regenerateUrl) {
   const base = pollUrl?.replace(/\/api\/jobs\/[^/]+\/status.*$/, "") ?? regenerateUrl?.replace(/\/api\/reports\/[^/]+\/regenerate.*$/, "") ?? "";
@@ -22057,7 +22209,7 @@ function CreatorCompactView({
 
 // src/molecules/creator-discovery/CreatorWidget/CreatorExpandedPanel.tsx
 var import_react96 = require("react");
-var import_react_dom3 = __toESM(require("react-dom"), 1);
+var import_react_dom4 = __toESM(require("react-dom"), 1);
 var import_framer_motion5 = require("framer-motion");
 
 // src/molecules/creator-discovery/CreatorWidget/defaultFetchers.ts
@@ -22756,7 +22908,7 @@ function PlatformPostsSection({
 
 // src/molecules/creator-discovery/CreatorWidget/BrandCollaborationsList.tsx
 var import_react94 = require("react");
-var import_react_dom2 = __toESM(require("react-dom"), 1);
+var import_react_dom3 = __toESM(require("react-dom"), 1);
 var import_framer_motion3 = require("framer-motion");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 var getSentimentRank = (score) => {
@@ -22802,7 +22954,7 @@ function BrandMentionDetails({
     (m) => m.normalizedBrand?.toLowerCase() === selectedBrand?.toLowerCase() || m.brand?.toLowerCase() === selectedBrand?.toLowerCase()
   ) || [];
   if (typeof window === "undefined") return null;
-  return import_react_dom2.default.createPortal(
+  return import_react_dom3.default.createPortal(
     /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_framer_motion3.AnimatePresence, { mode: "sync", children: open && /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_jsx_runtime179.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
         import_framer_motion3.motion.div,
@@ -23777,7 +23929,7 @@ function CreatorExpandedPanel({
     }
   }, [isOpen, loadCreators]);
   if (typeof window === "undefined") return null;
-  return import_react_dom3.default.createPortal(
+  return import_react_dom4.default.createPortal(
     /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_framer_motion5.AnimatePresence, { mode: "sync", children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(import_jsx_runtime181.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
         import_framer_motion5.motion.div,