@loafmarkets/ui 0.1.64 → 0.1.65

package/dist/index.js

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var styled25 = require('styled-components');
+var ReactDOM = require('react-dom');
 var lucideReact = require('lucide-react');
 var LightweightCharts = require('lightweight-charts');
 var bi = require('react-icons/bi');
@@ -35,6 +36,7 @@ function _interopNamespace(e) {
 
 var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
 var styled25__default = /*#__PURE__*/_interopDefault(styled25);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var LightweightCharts__namespace = /*#__PURE__*/_interopNamespace(LightweightCharts);
 
 // src/components/button.tsx
@@ -2700,19 +2702,16 @@ var ensureAnimationsInjected = () => {
       50% { opacity: 1; transform: scale(1); }
       100% { opacity: 0.6; transform: scale(0.9); }
     }
-
     @keyframes propertyNewsSlideIn {
       from { transform: translateY(-6px); opacity: 0; }
       to { transform: translateY(0); opacity: 1; }
     }
-
     @keyframes propertyNewsSpin {
       to { transform: rotate(360deg); }
     }
-
-    @keyframes propertyNewsFadeIn {
-      from { opacity: 0; max-height: 0; }
-      to { opacity: 1; max-height: 300px; }
+    @keyframes propertyNewsModalIn {
+      from { opacity: 0; transform: translateY(12px) scale(0.98); }
+      to   { opacity: 1; transform: translateY(0)   scale(1); }
     }
   `;
   document.head.appendChild(style);
@@ -2734,11 +2733,7 @@ var categoryStyles = {
 var formatDate = (value) => {
   if (typeof value === "string") return value;
   if (!(value instanceof Date) || Number.isNaN(value.getTime())) return "";
-  return value.toLocaleDateString(void 0, {
-    month: "short",
-    day: "numeric",
-    year: "numeric"
-  });
+  return value.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
 };
 var formatTimeAgo = (timestamp) => {
   const diff = (Date.now() - new Date(timestamp).getTime()) / 1e3;
@@ -2752,24 +2747,137 @@ function getSentimentInfo(score) {
   if (score < -0.15) return { arrow: "\u25BC", label: "Bearish", color: "#f6465d" };
   return { arrow: "\u2014", label: "Neutral", color: "#848e9c" };
 }
-function ChevronIcon({ isOpen }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+function NewsArticleModal({ item, onClose }) {
+  const sentimentInfo = getSentimentInfo(item.sentimentScore);
+  const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
+  React5__namespace.useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handler);
+      document.body.style.overflow = "";
+    };
+  }, [onClose]);
+  const modal = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "14",
-      height: "14",
-      viewBox: "0 0 24 24",
-      fill: "currentColor",
       style: {
-        color: "rgba(255,255,255,0.4)",
-        transition: "transform 0.2s",
-        transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
-        flexShrink: 0
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.72)",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem"
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" })
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            background: "#1c1c1c",
+            border: "1px solid rgba(255,255,255,0.12)",
+            borderRadius: "14px",
+            padding: "1.5rem",
+            maxWidth: "540px",
+            width: "100%",
+            maxHeight: "80vh",
+            overflowY: "auto",
+            boxShadow: "0 24px 64px rgba(0,0,0,0.6)",
+            animation: "propertyNewsModalIn 0.22s ease-out"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: "0.75rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                style: {
+                  background: "rgba(255,255,255,0.07)",
+                  border: "none",
+                  borderRadius: "6px",
+                  cursor: "pointer",
+                  color: "rgba(255,255,255,0.6)",
+                  padding: "0.3rem 0.5rem",
+                  lineHeight: 1,
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
+              }
+            ) }),
+            sentimentInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "0.6rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "0.3rem",
+                  fontSize: "0.7rem",
+                  fontWeight: 700,
+                  color: sentimentInfo.color,
+                  padding: "0.2rem 0.55rem",
+                  borderRadius: "4px",
+                  background: `${sentimentInfo.color}1a`,
+                  border: `1px solid ${sentimentInfo.color}40`
+                },
+                children: [
+                  sentimentInfo.arrow,
+                  " ",
+                  sentimentInfo.label
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "1rem", fontWeight: 600, color: "#fff", lineHeight: 1.5, margin: "0 0 1rem" }, children: item.title }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap", marginBottom: "1.25rem" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.72rem", color: "#848e9c" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
+              item.source && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    padding: "0.15rem 0.45rem",
+                    borderRadius: "3px",
+                    fontSize: "0.65rem",
+                    fontWeight: 500,
+                    background: "rgba(255,255,255,0.07)",
+                    color: "#848e9c"
+                  },
+                  children: item.source
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    padding: "0.2rem 0.55rem",
+                    borderRadius: "4px",
+                    border: `1px solid ${catStyle.borderColor}`,
+                    background: catStyle.backgroundColor,
+                    color: catStyle.color,
+                    fontSize: "0.65rem",
+                    fontWeight: 600,
+                    textTransform: "uppercase"
+                  },
+                  children: item.type === "property" ? catStyle.label : "Market News"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "1px", background: "rgba(255,255,255,0.08)", marginBottom: "1.25rem" } }),
+            item.summary ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.875rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.75, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
+          ]
+        }
+      )
     }
   );
+  if (typeof document !== "undefined") {
+    return ReactDOM__namespace.createPortal(modal, document.body);
+  }
+  return modal;
 }
 var PropertyNewsUpdates = React5__namespace.forwardRef(
   ({
@@ -2794,6 +2902,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
     const purchaseItems = purchasesProp ?? [];
     const [page, setPage] = React5__namespace.useState(0);
     const [expandedId, setExpandedId] = React5__namespace.useState(null);
+    const [selectedItem, setSelectedItem] = React5__namespace.useState(null);
     React5__namespace.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
@@ -2801,7 +2910,10 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
       setHomePage(0);
     }, [homeTab]);
     const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React5__namespace.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    const totalPages = React5__namespace.useMemo(
+      () => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1,
+      [hasItems, items.length]
+    );
     React5__namespace.useEffect(() => {
       setPage((prev) => Math.min(prev, totalPages - 1));
     }, [totalPages]);
@@ -2831,89 +2943,22 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
               isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", style: { color: "var(--color-text, #fff)" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" }) }),
-              isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  style: {
-                    display: "inline-block",
-                    width: "8px",
-                    height: "8px",
-                    borderRadius: "50%",
-                    backgroundColor: "#0ecb81",
-                    boxShadow: "0 0 8px rgba(14,203,129,0.8)",
-                    animation: "propertyNewsPulse 1.5s infinite"
-                  }
-                }
-              ),
+              isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#0ecb81", boxShadow: "0 0 8px rgba(14,203,129,0.8)", animation: "propertyNewsPulse 1.5s infinite" } }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", children: resolvedHeading }),
                 subheading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
               ] })
             ] }),
-            isHomeVariant && viewAllHref ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "a",
-              {
-                href: viewAllHref,
-                style: {
-                  color: "var(--color-accent, #f0b90b)",
-                  fontWeight: 500,
-                  fontSize: "0.8rem",
-                  textDecoration: "none",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: "0.25rem"
-                },
-                children: [
-                  viewAllLabel,
-                  /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
-                ]
-              }
-            ) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "inline-flex items-center font-semibold uppercase",
-                style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-block",
-                        width: "10px",
-                        height: "10px",
-                        borderRadius: "50%",
-                        border: "2px solid rgba(249,115,22,0.3)",
-                        borderTopColor: "#f97316",
-                        animation: "propertyNewsSpin 0.8s linear infinite"
-                      }
-                    }
-                  ),
-                  "CONNECTING"
-                ]
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: "inline-flex items-center font-semibold uppercase text-emerald-300",
-                style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-block",
-                        width: "6px",
-                        height: "6px",
-                        borderRadius: "50%",
-                        backgroundColor: "#34d399",
-                        animation: "propertyNewsPulse 2s infinite"
-                      }
-                    }
-                  ),
-                  "LIVE"
-                ]
-              }
-            ) : null
+            isHomeVariant && viewAllHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: viewAllHref, style: { color: "var(--color-accent, #f0b90b)", fontWeight: 500, fontSize: "0.8rem", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
+              viewAllLabel,
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
+            ] }) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center font-semibold uppercase", style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "10px", height: "10px", borderRadius: "50%", border: "2px solid rgba(249,115,22,0.3)", borderTopColor: "#f97316", animation: "propertyNewsSpin 0.8s linear infinite" } }),
+              "CONNECTING"
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center font-semibold uppercase text-emerald-300", style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "#34d399", animation: "propertyNewsPulse 2s infinite" } }),
+              "LIVE"
+            ] }) : null
           ] }),
           isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 0, marginTop: "0.75rem", marginBottom: "0.25rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -2935,343 +2980,149 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
             },
             tab
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-1 flex-col gap-3 overflow-visible", children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
-            const maxAmount = 6e4;
-            const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
-            const isAlternate = index % 2 === 1;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  padding: "0.625rem 0.75rem",
-                  borderBottom: "1px solid rgba(255,255,255,0.05)",
-                  position: "relative",
-                  overflow: "hidden",
-                  backgroundColor: isAlternate ? "rgba(255,255,255,0.03)" : "transparent"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        position: "absolute",
-                        top: 0,
-                        right: 0,
-                        bottom: 0,
-                        width: `${barPercent}%`,
-                        background: "linear-gradient(90deg, transparent 0%, rgba(14,203,129,0.15) 100%)",
-                        pointerEvents: "none"
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: purchase.name }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7rem", color: "var(--color-text-secondary, #848e9c)", marginTop: "0.125rem" }, children: formatTimeAgo(purchase.timestamp) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", marginLeft: "1rem", position: "relative" }, children: [
-                    "$",
-                    purchase.amount >= 1e6 ? `${(purchase.amount / 1e6).toFixed(2)}M` : Math.round(purchase.amount).toLocaleString()
-                  ] })
-                ]
-              },
-              purchase.id
-            );
-          }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem 0", gap: "0.75rem" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                style: {
-                  width: "28px",
-                  height: "28px",
-                  border: "3px solid rgba(255,255,255,0.1)",
-                  borderTopColor: "var(--color-accent, #f0b90b)",
-                  borderRadius: "50%",
-                  animation: "propertyNewsSpin 1s linear infinite"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }, children: "Awaiting offering..." })
-          ] }) : isHomeVariant ? hasItems ? homePaginatedItems.map((item, index) => {
-            const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
-            const tagType = item.type;
-            const isProperty = tagType === "property";
-            const sentimentInfo = getSentimentInfo(item.sentimentScore);
-            const isExpanded = expandedId === key;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  padding: "0.75rem 0",
-                  borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none"
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => toggleExpand(key),
-                      style: {
-                        width: "100%",
-                        textAlign: "left",
-                        background: "transparent",
-                        border: "none",
-                        cursor: "pointer",
-                        padding: 0,
-                        display: "flex",
-                        justifyContent: "space-between",
-                        alignItems: "flex-start",
-                        gap: "0.5rem",
-                        color: "inherit"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
-                            item.source && /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                style: {
-                                  padding: "0.1rem 0.4rem",
-                                  borderRadius: "3px",
-                                  fontSize: "0.62rem",
-                                  fontWeight: 500,
-                                  backgroundColor: "rgba(255,255,255,0.07)",
-                                  color: "#848e9c",
-                                  whiteSpace: "nowrap"
-                                },
-                                children: item.source
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "span",
-                              {
-                                style: {
-                                  padding: "0.15rem 0.4rem",
-                                  borderRadius: "2px",
-                                  fontSize: "0.65rem",
-                                  fontWeight: 500,
-                                  backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)",
-                                  color: isProperty ? "#0ecb81" : "#f0b90b"
-                                },
-                                children: isProperty ? "Property Update" : "Market News"
-                              }
-                            ),
-                            sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs(
-                              "span",
-                              {
-                                style: {
-                                  fontSize: "0.65rem",
-                                  fontWeight: 600,
-                                  color: sentimentInfo.color
-                                },
-                                children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "mt-4 flex flex-1 flex-col gap-3 overflow-hidden",
+              style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
+              children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
+                const maxAmount = 6e4;
+                const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
+                const isAlternate = index % 2 === 1;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: { display: "flex", justifyContent: "space-between", alignItems: "center", padding: "0.625rem 0.75rem", borderBottom: "1px solid rgba(255,255,255,0.05)", position: "relative", overflow: "hidden", backgroundColor: isAlternate ? "rgba(255,255,255,0.03)" : "transparent" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", top: 0, right: 0, bottom: 0, width: `${barPercent}%`, background: "linear-gradient(90deg, transparent 0%, rgba(14,203,129,0.15) 100%)", pointerEvents: "none" } }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: purchase.name }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.7rem", color: "var(--color-text-secondary, #848e9c)", marginTop: "0.125rem" }, children: formatTimeAgo(purchase.timestamp) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", marginLeft: "1rem", position: "relative" }, children: [
+                        "$",
+                        purchase.amount >= 1e6 ? `${(purchase.amount / 1e6).toFixed(2)}M` : Math.round(purchase.amount).toLocaleString()
+                      ] })
+                    ]
+                  },
+                  purchase.id
+                );
+              }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem 0", gap: "0.75rem" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "28px", height: "28px", border: "3px solid rgba(255,255,255,0.1)", borderTopColor: "var(--color-accent, #f0b90b)", borderRadius: "50%", animation: "propertyNewsSpin 1s linear infinite" } }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.4)" }, children: "Awaiting offering..." })
+              ] }) : isHomeVariant ? hasItems ? homePaginatedItems.map((item, index) => {
+                const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
+                const isProperty = item.type === "property";
+                const sentimentInfo = getSentimentInfo(item.sentimentScore);
+                const isExpanded = expandedId === key;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: { padding: "0.75rem 0", borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none" },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => toggleExpand(key),
+                          style: { width: "100%", textAlign: "left", background: "transparent", border: "none", cursor: "pointer", padding: 0, display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "0.5rem", color: "inherit" },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
+                                item.source && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.1rem 0.4rem", borderRadius: "3px", fontSize: "0.62rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap" }, children: item.source }),
+                                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.15rem 0.4rem", borderRadius: "2px", fontSize: "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#f0b90b" }, children: isProperty ? "Property Update" : "Market News" }),
+                                sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
                                   sentimentInfo.arrow,
                                   " ",
                                   sentimentInfo.label
-                                ]
-                              }
-                            )
-                          ] })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", color: "#848e9c", marginLeft: "0.5rem", paddingTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen: isExpanded }) })
-                      ]
-                    }
-                  ),
-                  isExpanded && item.summary && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        marginTop: "0.625rem",
-                        padding: "0.75rem",
-                        background: "rgba(255,255,255,0.04)",
-                        borderRadius: "6px",
-                        borderLeft: `3px solid ${sentimentInfo?.color ?? "rgba(255,255,255,0.15)"}`,
-                        animation: "propertyNewsSlideIn 0.2s ease-out"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.72)", lineHeight: 1.65, margin: 0 }, children: item.summary })
-                    }
-                  ),
-                  isExpanded && !item.summary && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        marginTop: "0.625rem",
-                        padding: "0.6rem 0.75rem",
-                        background: "rgba(255,255,255,0.03)",
-                        borderRadius: "6px",
-                        animation: "propertyNewsSlideIn 0.2s ease-out"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.78rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
-                    }
-                  )
-                ]
-              },
-              key
-            );
-          }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? paginatedItems.map((item, index) => {
-            const absoluteIndex = page * ITEMS_PER_PAGE + index;
-            const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
-            const styles2 = categoryStyles[item.type] ?? categoryStyles.market;
-            const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
-            const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
-            const sentimentInfo = getSentimentInfo(item.sentimentScore);
-            const isExpanded = expandedId === key;
-            return /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                style: {
-                  borderRadius: "6px",
-                  backgroundColor: isHighlighted ? "rgba(14, 203, 129, 0.1)" : "transparent",
-                  border: "1px solid transparent",
-                  transition: "background-color 0.2s",
-                  animation: item.isNew ? "propertyNewsSlideIn 0.5s ease-out" : void 0
-                },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => toggleExpand(key),
-                      style: {
-                        width: "100%",
-                        textAlign: "left",
-                        background: "transparent",
-                        border: "none",
-                        cursor: "pointer",
-                        padding: "0.75rem",
-                        display: "block",
-                        color: "inherit"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: "0.5rem", marginBottom: "0.35rem" }, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, color: "#fff", margin: 0, flex: 1, lineHeight: 1.4 }, children: item.title }),
-                          /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { isOpen: isExpanded })
-                        ] }),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          "div",
-                          {
-                            style: {
-                              display: "flex",
-                              justifyContent: "space-between",
-                              alignItems: "center",
-                              fontSize: "0.75rem",
-                              color: "#b5b8c5",
-                              gap: "0.5rem"
-                            },
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: [
-                                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit", whiteSpace: "nowrap" }, children: dateLabel }),
-                                item.source && /* @__PURE__ */ jsxRuntime.jsx(
-                                  "span",
-                                  {
-                                    style: {
-                                      padding: "0.15rem 0.45rem",
-                                      borderRadius: "3px",
-                                      fontSize: "0.65rem",
-                                      fontWeight: 500,
-                                      backgroundColor: "rgba(255,255,255,0.07)",
-                                      color: "#848e9c",
-                                      whiteSpace: "nowrap",
-                                      overflow: "hidden",
-                                      textOverflow: "ellipsis",
-                                      maxWidth: "120px"
-                                    },
-                                    children: item.source
-                                  }
-                                ),
-                                sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs(
-                                  "span",
-                                  {
-                                    style: {
-                                      fontSize: "0.65rem",
-                                      fontWeight: 700,
-                                      color: sentimentInfo.color,
-                                      whiteSpace: "nowrap"
-                                    },
-                                    children: [
-                                      sentimentInfo.arrow,
-                                      " ",
-                                      sentimentInfo.label
-                                    ]
-                                  }
-                                )
-                              ] }),
-                              /* @__PURE__ */ jsxRuntime.jsx(
-                                "span",
-                                {
-                                  style: {
-                                    padding: "0.25rem 0.6rem",
-                                    borderRadius: "4px",
-                                    border: `1px solid ${styles2.borderColor}`,
-                                    backgroundColor: styles2.backgroundColor,
-                                    color: styles2.color,
-                                    fontSize: "0.68rem",
-                                    fontWeight: 600,
-                                    textTransform: "uppercase",
-                                    whiteSpace: "nowrap",
-                                    flexShrink: 0
-                                  },
-                                  children: item.type === "property" ? styles2.label : "Market News"
-                                }
-                              )
-                            ]
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      style: {
-                        padding: "0 0.75rem 0.75rem",
-                        animation: "propertyNewsSlideIn 0.2s ease-out"
-                      },
-                      children: item.summary ? /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: {
-                            padding: "0.75rem",
-                            background: "rgba(255,255,255,0.04)",
-                            borderRadius: "6px",
-                            borderLeft: `3px solid ${sentimentInfo?.color ?? "rgba(255,255,255,0.15)"}`
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.85rem", color: "rgba(255,255,255,0.78)", lineHeight: 1.65, margin: 0 }, children: item.summary })
+                                ] })
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", color: "#848e9c", marginLeft: "0.5rem", paddingTop: "2px" }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", style: { transition: "transform 0.2s", transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) }) })
+                          ]
                         }
-                      ) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.78rem", color: "rgba(255,255,255,0.3)", fontStyle: "italic", margin: 0 }, children: "Summary not available for this article." })
-                    }
-                  )
-                ]
-              },
-              key
-            );
-          }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
-            "No property news yet. Updates will land here as soon as we receive new intelligence."
-          ] }) }),
-          isHomeVariant && homeTotalPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
+                      ),
+                      isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "0.625rem", padding: "0.75rem", background: "rgba(255,255,255,0.04)", borderRadius: "6px", borderLeft: `3px solid ${sentimentInfo?.color ?? "rgba(255,255,255,0.15)"}`, animation: "propertyNewsSlideIn 0.2s ease-out" }, children: item.summary ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.72)", lineHeight: 1.65, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.78rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available." }) })
+                    ]
+                  },
+                  key
+                );
+              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? paginatedItems.map((item, index) => {
+                const absoluteIndex = page * ITEMS_PER_PAGE + index;
+                const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
+                const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
+                const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
+                const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
+                const sentimentInfo = getSentimentInfo(item.sentimentScore);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setSelectedItem(item),
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      textAlign: "left",
+                      background: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 0,
+                      color: "inherit"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          padding: "0.75rem",
+                          borderRadius: "6px",
+                          backgroundColor: isHighlighted ? "rgba(14, 203, 129, 0.1)" : "transparent",
+                          transition: "background-color 0.15s",
+                          animation: item.isNew ? "propertyNewsSlideIn 0.5s ease-out" : void 0
+                        },
+                        onMouseEnter: (e) => {
+                          if (!isHighlighted) e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
+                        },
+                        onMouseLeave: (e) => {
+                          if (!isHighlighted) e.currentTarget.style.backgroundColor = "transparent";
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.4rem", color: "#fff", lineHeight: 1.4 }, children: item.title }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "0.5rem" }, children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: isHighlighted ? "#0ecb81" : "#b5b8c5", whiteSpace: "nowrap" }, children: dateLabel }),
+                              item.source && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.15rem 0.45rem", borderRadius: "3px", fontSize: "0.65rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "120px" }, children: item.source })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
+                              sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: [
+                                sentimentInfo.arrow,
+                                " ",
+                                sentimentInfo.label
+                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.25rem 0.6rem", borderRadius: "4px", border: `1px solid ${catStyle.borderColor}`, backgroundColor: catStyle.backgroundColor, color: catStyle.color, fontSize: "0.68rem", fontWeight: 600, textTransform: "uppercase", whiteSpace: "nowrap" }, children: item.type === "property" ? catStyle.label : "Market News" })
+                            ] })
+                          ] })
+                        ]
+                      }
+                    )
+                  },
+                  key
+                );
+              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
+                "No property news yet. Updates will land here as soon as we receive new intelligence."
+              ] })
+            }
+          ),
+          isHomeVariant && homeTotalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                onClick: () => setHomePage((prev) => Math.max(0, prev - 1)),
+                onClick: () => setHomePage((p) => Math.max(0, p - 1)),
                 disabled: homePage === 0,
-                style: {
-                  background: "transparent",
-                  border: "1px solid rgba(255,255,255,0.15)",
-                  borderRadius: "999px",
-                  padding: "0.2rem 0.75rem",
-                  fontSize: "0.7rem",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.15em",
-                  cursor: homePage === 0 ? "not-allowed" : "pointer",
-                  opacity: homePage === 0 ? 0.4 : 1,
-                  color: "rgba(255,255,255,0.6)"
-                },
+                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "999px", padding: "0.2rem 0.75rem", fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.15em", cursor: homePage === 0 ? "not-allowed" : "pointer", opacity: homePage === 0 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
                 children: "Prev"
               }
             ),
@@ -3284,35 +3135,21 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "button",
               {
                 type: "button",
-                onClick: () => setHomePage((prev) => Math.min(homeTotalPages - 1, prev + 1)),
+                onClick: () => setHomePage((p) => Math.min(homeTotalPages - 1, p + 1)),
                 disabled: homePage >= homeTotalPages - 1,
-                style: {
-                  background: "transparent",
-                  border: "1px solid rgba(255,255,255,0.15)",
-                  borderRadius: "999px",
-                  padding: "0.2rem 0.75rem",
-                  fontSize: "0.7rem",
-                  textTransform: "uppercase",
-                  letterSpacing: "0.15em",
-                  cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer",
-                  opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1,
-                  color: "rgba(255,255,255,0.6)"
-                },
+                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "999px", padding: "0.2rem 0.75rem", fontSize: "0.7rem", textTransform: "uppercase", letterSpacing: "0.15em", cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer", opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
                 children: "Next"
               }
             )
-          ] }) : null,
-          !isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
+          ] }),
+          !isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                onClick: () => setPage((prev) => Math.max(0, prev - 1)),
+                onClick: () => setPage((p) => Math.max(0, p - 1)),
                 disabled: page === 0,
-                className: cn(
-                  "rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]",
-                  page === 0 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"
-                ),
+                className: cn("rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]", page === 0 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
                 children: "Prev"
               }
             ),
@@ -3326,16 +3163,14 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "button",
               {
                 type: "button",
-                onClick: () => setPage((prev) => Math.min(totalPages - 1, prev + 1)),
+                onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
                 disabled: page >= totalPages - 1,
-                className: cn(
-                  "rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]",
-                  page >= totalPages - 1 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"
-                ),
+                className: cn("rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]", page >= totalPages - 1 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
                 children: "Next"
               }
             )
-          ] }) : null
+          ] }),
+          selectedItem && !isHomeVariant && !isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) })
         ]
       }
     );