@loafmarkets/ui 0.1.428 → 0.1.430

package/dist/index.mjs

@@ -3318,6 +3318,47 @@ var formatTimeAgo = (timestamp) => {
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   return `${Math.floor(diff / 3600)}h ago`;
 };
+function freshnessNote(freshness) {
+  if (freshness === "catching_up") return { label: "Catching up", title: "Reported promptly; we picked it up late" };
+  if (freshness === "retrospective") return { label: "Older event", title: "The event is materially older than this report" };
+  return null;
+}
+function NewsMetaNotes({ item, fontSize }) {
+  const note = freshnessNote(item.freshness);
+  const outlets = typeof item.reportedByCount === "number" && item.reportedByCount > 1 ? item.reportedByCount : null;
+  if (!note && outlets === null) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    note && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-testid": "news-freshness",
+        title: note.title,
+        style: {
+          fontSize,
+          fontWeight: 500,
+          color: "rgba(255,255,255,0.5)",
+          border: "1px solid rgba(255,255,255,0.14)",
+          borderRadius: "3px",
+          padding: "0.1rem 0.35rem",
+          whiteSpace: "nowrap"
+        },
+        children: note.label
+      }
+    ),
+    outlets !== null && /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "data-testid": "news-outlets",
+        title: `Reported by ${outlets} publishers`,
+        style: { fontSize, fontWeight: 500, color: "rgba(255,255,255,0.5)", whiteSpace: "nowrap" },
+        children: [
+          outlets,
+          " outlets"
+        ]
+      }
+    )
+  ] });
+}
 function getSentimentInfo(score) {
   if (score == null) return null;
   if (score > 0.15) return { arrow: "\u25B2", label: "Bullish", color: "#0ecb81" };
@@ -3380,9 +3421,27 @@ function SentimentBar({ score, color }) {
     }
   );
 }
-function NewsArticleModal({ item, onClose }) {
+function NewsArticleModal({
+  item,
+  onClose,
+  fetchStory
+}) {
   const sentimentInfo = getSentimentInfo(item.sentimentScore);
   const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
+  const [thread, setThread] = React9.useState(null);
+  const threadEntries = thread ? thread.timeline.filter((entry) => entry.id !== item.id) : [];
+  const storyId = item.storyId;
+  const threaded = storyId !== void 0 && (typeof item.reportedByCount === "number" && item.reportedByCount > 1 || storyId !== item.id);
+  React9.useEffect(() => {
+    if (!fetchStory || !threaded || storyId === void 0) return;
+    let dropped = false;
+    void fetchStory(storyId).then((t) => {
+      if (!dropped) setThread(t);
+    });
+    return () => {
+      dropped = true;
+    };
+  }, [fetchStory, threaded, storyId]);
   React9.useEffect(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
@@ -3504,10 +3563,45 @@ function NewsArticleModal({ item, onClose }) {
                   },
                   children: item.type === "property" ? catStyle.label : "Market News"
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx(NewsMetaNotes, { item, fontSize: "0.65rem" })
             ] }),
             /* @__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." }),
+            thread && threadEntries.length > 0 && // Lands after the popup is already open, so it is announced rather than silent.
+            /* @__PURE__ */ jsxs("div", { "aria-live": "polite", style: { marginTop: "1.25rem", paddingTop: "1rem", borderTop: "1px solid rgba(255,255,255,0.08)" }, children: [
+              /* @__PURE__ */ jsxs("p", { style: { fontSize: "0.75rem", fontWeight: 600, color: "rgba(255,255,255,0.75)", margin: "0 0 0.75rem" }, children: [
+                "Reported by ",
+                thread.reportedBy.length > 0 ? thread.reportedBy.length : threadEntries.length + 1,
+                " outlets"
+              ] }),
+              /* @__PURE__ */ jsx("ol", { style: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "0.6rem" }, children: threadEntries.map((entry) => /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  "data-testid": "news-story-entry",
+                  "data-entry-id": entry.id,
+                  "data-relation": entry.relation,
+                  style: { borderLeft: "1px solid rgba(255,255,255,0.14)", paddingLeft: "0.7rem" },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.4rem", alignItems: "baseline", flexWrap: "wrap", marginBottom: "0.15rem" }, children: [
+                      /* @__PURE__ */ jsx("span", { style: { fontSize: "0.65rem", color: "#848e9c" }, children: formatDateShort(entry.publishedAt) }),
+                      entry.source && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.65rem", color: "rgba(255,255,255,0.5)" }, children: entry.source })
+                    ] }),
+                    entry.url && isSafeUrl(entry.url) ? /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: entry.url,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.8)", textDecoration: "none", lineHeight: 1.5, overflowWrap: "anywhere" },
+                        children: entry.title
+                      }
+                    ) : /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.8)", lineHeight: 1.5, overflowWrap: "anywhere" }, children: entry.title })
+                  ]
+                },
+                entry.id
+              )) })
+            ] }),
             item.url && isSafeUrl(item.url) && /* @__PURE__ */ jsx("div", { style: { marginTop: "1.25rem", paddingTop: "1rem", borderTop: "1px solid rgba(255,255,255,0.08)" }, children: /* @__PURE__ */ jsxs(
               "a",
               {
@@ -3567,6 +3661,7 @@ var PropertyNewsUpdates = React9.forwardRef(
     pinBreaking = false,
     onAssetOpen,
     showAssetBadges = true,
+    fetchStory,
     ...props
   }, ref) => {
     const isPurchaseVariant = variant === "purchases";
@@ -4103,6 +4198,7 @@ var PropertyNewsUpdates = React9.forwardRef(
                             },
                             badgeAsset.ticker
                           )),
+                          /* @__PURE__ */ jsx(NewsMetaNotes, { item, fontSize: isMobile ? "0.52rem" : "0.62rem" }),
                           /* @__PURE__ */ jsx("span", { style: { padding: isMobile ? "0.1rem 0.35rem" : "0.15rem 0.4rem", borderRadius: "2px", fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#E6C87E" }, children: isProperty ? "Property Update" : "Market News" }),
                           sentimentInfo && /* @__PURE__ */ jsx("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                             sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
@@ -4157,7 +4253,10 @@ var PropertyNewsUpdates = React9.forwardRef(
                         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__ */ jsx("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 }) }),
+                            /* @__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 }),
+                              /* @__PURE__ */ jsx(NewsMetaNotes, { item, fontSize: "0.65rem" })
+                            ] }),
                             /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
                               sentimentInfo && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                                 sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
@@ -4236,7 +4335,7 @@ var PropertyNewsUpdates = React9.forwardRef(
               }
             )
           ] }),
-          selectedItem && !isPurchaseVariant && /* @__PURE__ */ jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) }),
+          selectedItem && !isPurchaseVariant && /* @__PURE__ */ jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null), fetchStory }),
           badgeTip && ReactDOM.createPortal(
             /* @__PURE__ */ jsx(
               "span",
@@ -22045,6 +22144,6 @@ var SparklineChart = React9__default.memo(function SparklineChart2({ data, width
   );
 });
 
-export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HlsVideo, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, OnboardingGuide, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SentimentBar, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, __reloadBreakingMemory, __resetDismissedBreaking, badgeVariants, buttonVariants, extractSparkline, formatAge, hasPendingActivity, matchesTab, rowAgeLabel, useAdaptivePolling, useToast };
+export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HlsVideo, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, OnboardingGuide, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SentimentBar, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, __reloadBreakingMemory, __resetDismissedBreaking, badgeVariants, buttonVariants, extractSparkline, formatAge, freshnessNote, hasPendingActivity, matchesTab, rowAgeLabel, useAdaptivePolling, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map