@loafmarkets/ui 0.1.63 → 0.1.65

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled25, { keyframes, css } from 'styled-components';
+import * as ReactDOM from 'react-dom';
 import { Newspaper, BedDouble, Bath, CarFront } from 'lucide-react';
 import * as LightweightCharts from 'lightweight-charts';
 import { BiChevronUp, BiChevronDown, BiX, BiCoin, BiWallet, BiCreditCard, BiCalendar, BiInfoCircle, BiPencil, BiImages, BiVideo, BiMap } from 'react-icons/bi';
@@ -2675,15 +2676,17 @@ 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 propertyNewsModalIn {
+      from { opacity: 0; transform: translateY(12px) scale(0.98); }
+      to   { opacity: 1; transform: translateY(0)   scale(1); }
+    }
   `;
   document.head.appendChild(style);
 };
@@ -2704,11 +2707,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;
@@ -2716,6 +2715,144 @@ var formatTimeAgo = (timestamp) => {
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   return `${Math.floor(diff / 3600)}h ago`;
 };
+function getSentimentInfo(score) {
+  if (score == null) return null;
+  if (score > 0.15) return { arrow: "\u25B2", label: "Bullish", color: "#0ecb81" };
+  if (score < -0.15) return { arrow: "\u25BC", label: "Bearish", color: "#f6465d" };
+  return { arrow: "\u2014", label: "Neutral", color: "#848e9c" };
+}
+function NewsArticleModal({ item, onClose }) {
+  const sentimentInfo = getSentimentInfo(item.sentimentScore);
+  const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
+  React5.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__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.72)",
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "1rem"
+      },
+      onClick: onClose,
+      children: /* @__PURE__ */ 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__ */ jsx("div", { style: { display: "flex", justifyContent: "flex-end", marginBottom: "0.75rem" }, children: /* @__PURE__ */ 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__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ 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__ */ jsx("div", { style: { marginBottom: "0.6rem" }, children: /* @__PURE__ */ 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__ */ jsx("h2", { style: { fontSize: "1rem", fontWeight: 600, color: "#fff", lineHeight: 1.5, margin: "0 0 1rem" }, children: item.title }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap", marginBottom: "1.25rem" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.72rem", color: "#848e9c" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
+              item.source && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { style: { height: "1px", background: "rgba(255,255,255,0.08)", marginBottom: "1.25rem" } }),
+            item.summary ? /* @__PURE__ */ jsx("p", { style: { fontSize: "0.875rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.75, margin: 0 }, children: item.summary }) : /* @__PURE__ */ 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.createPortal(modal, document.body);
+  }
+  return modal;
+}
 var PropertyNewsUpdates = React5.forwardRef(
   ({
     className,
@@ -2738,6 +2875,8 @@ var PropertyNewsUpdates = React5.forwardRef(
     const [homePage, setHomePage] = React5.useState(0);
     const purchaseItems = purchasesProp ?? [];
     const [page, setPage] = React5.useState(0);
+    const [expandedId, setExpandedId] = React5.useState(null);
+    const [selectedItem, setSelectedItem] = React5.useState(null);
     React5.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
@@ -2745,7 +2884,10 @@ var PropertyNewsUpdates = React5.forwardRef(
       setHomePage(0);
     }, [homeTab]);
     const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React5.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    const totalPages = React5.useMemo(
+      () => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1,
+      [hasItems, items.length]
+    );
     React5.useEffect(() => {
       setPage((prev) => Math.min(prev, totalPages - 1));
     }, [totalPages]);
@@ -2759,6 +2901,9 @@ var PropertyNewsUpdates = React5.forwardRef(
       [homeFilteredItems.length]
     );
     const homePaginatedItems = homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
+    const toggleExpand = React5.useCallback((key) => {
+      setExpandedId((prev) => prev === key ? null : key);
+    }, []);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -2772,89 +2917,22 @@ var PropertyNewsUpdates = React5.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
               isHomeVariant && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { children: [
                 /* @__PURE__ */ jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", children: resolvedHeading }),
                 subheading ? /* @__PURE__ */ jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
               ] })
             ] }),
-            isHomeVariant && viewAllHref ? /* @__PURE__ */ 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__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
-                ]
-              }
-            ) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "inline-flex items-center font-semibold uppercase",
-                style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" },
-                children: [
-                  /* @__PURE__ */ 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__ */ 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__ */ jsx(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-block",
-                        width: "6px",
-                        height: "6px",
-                        borderRadius: "50%",
-                        backgroundColor: "#34d399",
-                        animation: "propertyNewsPulse 2s infinite"
-                      }
-                    }
-                  ),
-                  "LIVE"
-                ]
-              }
-            ) : null
+            isHomeVariant && viewAllHref ? /* @__PURE__ */ 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__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
+            ] }) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center font-semibold uppercase", style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" }, children: [
+              /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { style: { display: "inline-block", width: "6px", height: "6px", borderRadius: "50%", backgroundColor: "#34d399", animation: "propertyNewsPulse 2s infinite" } }),
+              "LIVE"
+            ] }) : null
           ] }),
           isHomeVariant && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 0, marginTop: "0.75rem", marginBottom: "0.25rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsx(
             "button",
@@ -2879,8 +2957,8 @@ var PropertyNewsUpdates = React5.forwardRef(
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: "mt-4 flex flex-1 flex-col gap-3 overflow-visible",
-              style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 88}px` } : void 0,
+              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));
@@ -2888,31 +2966,9 @@ var PropertyNewsUpdates = React5.forwardRef(
                 return /* @__PURE__ */ 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"
-                    },
+                    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__ */ 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__ */ 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
                         /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, fontSize: "0.875rem", color: "#fff", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: purchase.name }),
                         /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: "var(--color-text-secondary, #848e9c)", marginTop: "0.125rem" }, children: formatTimeAgo(purchase.timestamp) })
@@ -2926,77 +2982,43 @@ var PropertyNewsUpdates = React5.forwardRef(
                   purchase.id
                 );
               }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "3rem 0", gap: "0.75rem" }, children: [
-                /* @__PURE__ */ 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__ */ 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__ */ 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 isProperty = item.type === "property";
+                const sentimentInfo = getSentimentInfo(item.sentimentScore);
+                const isExpanded = expandedId === key;
                 return /* @__PURE__ */ jsxs(
-                  "a",
+                  "div",
                   {
-                    href: item.url ?? "#",
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    style: {
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      padding: "0.75rem 0",
-                      borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
-                      cursor: "pointer",
-                      textDecoration: "none",
-                      color: "inherit"
-                    },
+                    style: { padding: "0.75rem 0", borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none" },
                     children: [
-                      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
-                        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
-                          /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
-                          item.source && /* @__PURE__ */ 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__ */ 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"
-                            }
-                          )
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", color: "#848e9c", marginLeft: "0.5rem" }, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) }) })
+                      /* @__PURE__ */ 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__ */ jsxs("div", { style: { flex: 1 }, children: [
+                              /* @__PURE__ */ jsx("h3", { style: { fontSize: "0.85rem", fontWeight: 400, marginBottom: "0.25rem", color: "#f8f9fa", lineHeight: 1.4 }, children: item.title }),
+                              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
+                                /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: typeof item.date === "string" ? item.date : formatDate(item.date) }),
+                                item.source && /* @__PURE__ */ 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__ */ 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__ */ jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
+                                  sentimentInfo.arrow,
+                                  " ",
+                                  sentimentInfo.label
+                                ] })
+                              ] })
+                            ] }),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", color: "#848e9c", marginLeft: "0.5rem", paddingTop: "2px" }, children: /* @__PURE__ */ 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__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) }) })
+                          ]
+                        }
+                      ),
+                      isExpanded && /* @__PURE__ */ 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__ */ jsx("p", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.72)", lineHeight: 1.65, margin: 0 }, children: item.summary }) : /* @__PURE__ */ jsx("p", { style: { fontSize: "0.78rem", color: "rgba(255,255,255,0.35)", fontStyle: "italic", margin: 0 }, children: "Summary not available." }) })
                     ]
                   },
                   key
@@ -3004,92 +3026,60 @@ var PropertyNewsUpdates = React5.forwardRef(
               }) : emptyState ?? /* @__PURE__ */ 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 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);
-                return /* @__PURE__ */ jsxs(
-                  "div",
+                const sentimentInfo = getSentimentInfo(item.sentimentScore);
+                return /* @__PURE__ */ jsx(
+                  "button",
                   {
+                    type: "button",
+                    onClick: () => setSelectedItem(item),
                     style: {
-                      padding: "0.75rem",
-                      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
+                      display: "block",
+                      width: "100%",
+                      textAlign: "left",
+                      background: "transparent",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 0,
+                      color: "inherit"
                     },
-                    children: [
-                      /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.35rem", color: "#fff" }, children: item.url ? /* @__PURE__ */ jsx(
-                        "a",
-                        {
-                          href: item.url,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          style: { color: "inherit", textDecoration: "none" },
-                          onMouseEnter: (e) => {
-                            e.currentTarget.style.textDecoration = "underline";
-                          },
-                          onMouseLeave: (e) => {
-                            e.currentTarget.style.textDecoration = "none";
-                          },
-                          children: item.title
-                        }
-                      ) : item.title }),
-                      /* @__PURE__ */ jsxs(
-                        "div",
-                        {
-                          style: {
-                            display: "flex",
-                            justifyContent: "space-between",
-                            alignItems: "center",
-                            fontSize: "0.75rem",
-                            color: "#b5b8c5",
-                            gap: "0.5rem"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0 }, children: [
-                              /* @__PURE__ */ jsx("span", { style: { color: isHighlighted ? "#0ecb81" : "inherit", whiteSpace: "nowrap" }, children: dateLabel }),
-                              item.source && /* @__PURE__ */ 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
-                                }
-                              )
+                    children: /* @__PURE__ */ 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__ */ jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.4rem", color: "#fff", lineHeight: 1.4 }, children: item.title }),
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "0.5rem" }, children: [
+                            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: [
+                              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: isHighlighted ? "#0ecb81" : "#b5b8c5", whiteSpace: "nowrap" }, children: dateLabel }),
+                              item.source && /* @__PURE__ */ 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__ */ 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"
-                              }
-                            )
-                          ]
-                        }
-                      )
-                    ]
+                            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
+                              sentimentInfo && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: [
+                                sentimentInfo.arrow,
+                                " ",
+                                sentimentInfo.label
+                              ] }),
+                              /* @__PURE__ */ 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
                 );
@@ -3099,25 +3089,14 @@ var PropertyNewsUpdates = React5.forwardRef(
               ] })
             }
           ),
-          isHomeVariant && homeTotalPages > 1 ? /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
+          isHomeVariant && homeTotalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between text-xs text-white/60", children: [
             /* @__PURE__ */ 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"
               }
             ),
@@ -3130,35 +3109,21 @@ var PropertyNewsUpdates = React5.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__ */ jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
+          ] }),
+          !isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
             /* @__PURE__ */ 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"
               }
             ),
@@ -3172,16 +3137,14 @@ var PropertyNewsUpdates = React5.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__ */ jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) })
         ]
       }
     );