@loafmarkets/ui 0.1.88 → 0.1.90

package/dist/index.js

@@ -1796,6 +1796,11 @@ function useViewportCompact(breakpoint) {
   return isCompact;
 }
 var formatNumber = (value, precision) => value.toFixed(precision);
+var formatTradeTime = (time) => {
+  const d = new Date(time);
+  if (Number.isNaN(d.getTime())) return time;
+  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
+};
 var FLASH_DURATION_MS = 450;
 var FLASH_UP_COLOR = "rgba(14, 203, 129, 0.35)";
 var FLASH_DOWN_COLOR = "rgba(246, 70, 93, 0.35)";
@@ -1865,14 +1870,12 @@ function TradeRow({
       {
         ref: rowRef,
         className: "grid items-center",
-        style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
+        style: { gridTemplateColumns: "1fr 1fr 1fr", padding: "0.2rem 0", fontSize: "0.8rem" },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 }, children: [
-            "$",
-            formatNumber(trade.price, precision)
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right", paddingRight: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "4px" }, children: [
-            formatNumber(trade.amount, amountPrecision),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d" }, className: "tabular-nums", children: formatNumber(trade.price, precision) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "right" }, className: "tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right", paddingRight: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end", gap: "4px" }, className: "tabular-nums text-white/50", children: [
+            trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTradeTime(trade.time) }),
             explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
@@ -1893,24 +1896,22 @@ function TradeRow({
     "div",
     {
       ref: rowRef,
-      className: "grid grid-cols-3 items-center gap-3 px-3 py-1.5",
+      className: "relative grid grid-cols-3 items-center gap-3 px-3 text-[0.8rem]",
+      style: { height: `${DEPTH_ROW_HEIGHT_PX}px` },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
               "tabular-nums",
               trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
             ),
-            children: [
-              "$",
-              formatNumber(trade.price, precision)
-            ]
+            children: formatNumber(trade.price, precision)
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
-          trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums text-white/50 text-xs", children: trade.time }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1.5 tabular-nums text-white/50", children: [
+          trade.time != null && /* @__PURE__ */ jsxRuntime.jsx("span", { children: trade.time }),
           explorerUrl && /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
@@ -1978,8 +1979,8 @@ function DepthRow({
   );
 }
 var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
-var LEVEL_ROWS_VISIBLE = 6;
-var DEPTH_ROW_HEIGHT_PX = 26;
+var LEVEL_ROWS_VISIBLE = 5;
+var DEPTH_ROW_HEIGHT_PX = 28;
 var COMPACT_ROWS_VISIBLE = 5;
 var COMPACT_ROW_HEIGHT_PX = 30;
 var COMPACT_BREAKPOINT_PX = 1024;
@@ -2003,6 +2004,7 @@ var Orderbook = React5__namespace.forwardRef(
     onPriceClick,
     onLoafLiquidityClick,
     tradeExplorerUrl,
+    maxLevels,
     className,
     ...props
   }, ref) => {
@@ -2047,8 +2049,10 @@ var Orderbook = React5__namespace.forwardRef(
       onTabChange?.(next);
     };
     const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
-    const sectionHeight = isCompact ? COMPACT_ROWS_VISIBLE * COMPACT_ROW_HEIGHT_PX : LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
-    const rowCount = isCompact ? COMPACT_ROWS_VISIBLE : LEVEL_ROWS_VISIBLE;
+    const effectiveLevels = maxLevels ?? LEVEL_ROWS_VISIBLE;
+    const effectiveCompactLevels = maxLevels ?? COMPACT_ROWS_VISIBLE;
+    const sectionHeight = isCompact ? effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX : effectiveLevels * DEPTH_ROW_HEIGHT_PX;
+    const rowCount = isCompact ? effectiveCompactLevels : effectiveLevels;
     const askVisibleLevels = asks.slice(-rowCount);
     const bidVisibleLevels = bids.slice(0, rowCount);
     const askCumDepths = new Array(askVisibleLevels.length);
@@ -2067,7 +2071,8 @@ var Orderbook = React5__namespace.forwardRef(
         bidCumDepths[i] = acc;
       }
     }
-    const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
+    const askMaxCumDepth = Math.max(1, ...askCumDepths);
+    const bidMaxCumDepth = Math.max(1, ...bidCumDepths);
     const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
     const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
     const layoutProps = {
@@ -2087,7 +2092,8 @@ var Orderbook = React5__namespace.forwardRef(
       bidVisibleLevels,
       askCumDepths,
       bidCumDepths,
-      combinedMaxCumDepth,
+      askMaxCumDepth,
+      bidMaxCumDepth,
       midPrice,
       midChangePercent,
       midClass,
@@ -2097,14 +2103,16 @@ var Orderbook = React5__namespace.forwardRef(
       isLoading,
       seenTradeKeysRef,
       tradeExplorerUrl,
-      onPriceClick
+      onPriceClick,
+      levelCount: effectiveLevels,
+      compactLevelCount: effectiveCompactLevels
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
       {
         ref,
         className: cn(
-          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col h-full",
+          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col",
           isCompact && "max-w-none",
           className
         ),
@@ -2154,7 +2162,8 @@ function DesktopOrderbookLayout({
   bidVisibleLevels,
   askCumDepths,
   bidCumDepths,
-  combinedMaxCumDepth,
+  askMaxCumDepth,
+  bidMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2164,7 +2173,9 @@ function DesktopOrderbookLayout({
   isLoading,
   seenTradeKeysRef,
   tradeExplorerUrl,
-  onPriceClick
+  onPriceClick,
+  levelCount: effectiveLevels,
+  compactLevelCount: _compactLevelCount
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2252,7 +2263,7 @@ function DesktopOrderbookLayout({
         {
           className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
           style: { scrollbarGutter: "stable" },
-          children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => {
+          children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: tradeFiltered.map((trade, i) => {
             const tradeKey = getTradeKey(trade, i);
             const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
             return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2269,20 +2280,20 @@ function DesktopOrderbookLayout({
             );
           }) })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-h-0 overflow-hidden", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex flex-col justify-end divide-y divide-white/5 overflow-hidden",
+            className: "flex flex-col justify-end overflow-hidden flex-shrink-0",
             style: { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "ask",
                 price: l.price,
                 amount: l.amount,
                 cumDepth: askCumDepths[i],
-                depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
+                depthPct: askCumDepths[i] / askMaxCumDepth * 100,
                 precision,
                 amountPrecision,
                 hasUserOrder: userAskPrices.has(l.price),
@@ -2296,7 +2307,7 @@ function DesktopOrderbookLayout({
           "div",
           {
             ref: midRef,
-            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2",
+            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2 flex-shrink-0",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 "$",
@@ -2314,16 +2325,16 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "divide-y divide-white/5 overflow-hidden",
+            className: "flex flex-col overflow-hidden flex-shrink-0",
             style: { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "bid",
                 price: l.price,
                 amount: l.amount,
                 cumDepth: bidCumDepths[i],
-                depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
+                depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
                 precision,
                 amountPrecision,
                 hasUserOrder: userBidPrices.has(l.price),
@@ -2352,7 +2363,8 @@ function MobileOrderbookLayout({
   bidVisibleLevels: visibleBids,
   askCumDepths,
   bidCumDepths,
-  combinedMaxCumDepth,
+  askMaxCumDepth,
+  bidMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2362,7 +2374,9 @@ function MobileOrderbookLayout({
   isLoading,
   seenTradeKeysRef,
   tradeExplorerUrl,
-  onPriceClick
+  onPriceClick,
+  levelCount: _levelCount,
+  compactLevelCount: effectiveCompactLevels
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
@@ -2434,13 +2448,13 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No asks" }) : visibleAsks.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", height: `${effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX}px`, justifyContent: "flex-end", overflow: "hidden" }, children: isLoading ? Array.from({ length: effectiveCompactLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No asks" }) : visibleAsks.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
         MobileDepthRow,
         {
           side: "ask",
           price: l.price,
           amount: l.amount,
-          depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
+          depthPct: askCumDepths[i] / askMaxCumDepth * 100,
           precision,
           amountPrecision,
           hasUserOrder: userAskPrices.has(l.price),
@@ -2481,13 +2495,13 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No bids" }) : visibleBids.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", height: `${effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX}px`, overflow: "hidden" }, children: isLoading ? Array.from({ length: effectiveCompactLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0.75rem 0", textAlign: "center", color: "rgba(255,255,255,0.4)", fontSize: "0.72rem" }, children: "No bids" }) : visibleBids.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
         MobileDepthRow,
         {
           side: "bid",
           price: l.price,
           amount: l.amount,
-          depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
+          depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
           precision,
           amountPrecision,
           hasUserOrder: userBidPrices.has(l.price),
@@ -2507,7 +2521,7 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: effectiveCompactLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => {
         const tradeKey = getTradeKey(trade, i);
         const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2547,7 +2561,8 @@ function MobileDepthRow({
       style: {
         display: "grid",
         gridTemplateColumns: "1.2fr 0.8fr",
-        padding: "0.2rem 0",
+        height: `${COMPACT_ROW_HEIGHT_PX}px`,
+        alignItems: "center",
         fontSize: "0.8rem",
         position: "relative",
         cursor: onPriceClick ? "pointer" : void 0
@@ -2690,7 +2705,7 @@ var PropertyTour = React5__namespace.forwardRef(
   }
 );
 PropertyTour.displayName = "PropertyTour";
-var ITEMS_PER_PAGE = 4;
+var ITEMS_PER_PAGE = 6;
 var ensureAnimationsInjected = () => {
   if (typeof document === "undefined") return;
   if (document.getElementById("property-news-updates-animations")) return;
@@ -2735,6 +2750,21 @@ var formatDate = (value) => {
   if (!(value instanceof Date) || Number.isNaN(value.getTime())) return "";
   return value.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
 };
+var formatDateShort = (value) => {
+  const d = typeof value === "string" ? new Date(value) : value;
+  if (!(d instanceof Date) || Number.isNaN(d.getTime())) {
+    if (typeof value === "string") {
+      return value.replace(/\s*\d{4}\s*$/, "");
+    }
+    return "";
+  }
+  const diffMs = Date.now() - d.getTime();
+  const diffS = diffMs / 1e3;
+  if (diffS < 60) return "Just now";
+  if (diffS < 3600) return `${Math.floor(diffS / 60)}m ago`;
+  if (diffS < 86400) return `${Math.floor(diffS / 3600)}h ago`;
+  return d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+};
 var formatTimeAgo = (timestamp) => {
   const diff = (Date.now() - new Date(timestamp).getTime()) / 1e3;
   if (diff < 60) return `${Math.floor(diff)}s ago`;
@@ -2745,7 +2775,7 @@ 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" };
+  return { arrow: "", label: "Neutral", color: "#848e9c" };
 }
 function NewsArticleModal({ item, onClose }) {
   const sentimentInfo = getSentimentInfo(item.sentimentScore);
@@ -2827,8 +2857,7 @@ function NewsArticleModal({ item, onClose }) {
                   border: `1px solid ${sentimentInfo.color}40`
                 },
                 children: [
-                  sentimentInfo.arrow,
-                  " ",
+                  sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
                   sentimentInfo.label
                 ]
               }
@@ -2868,7 +2897,35 @@ function NewsArticleModal({ item, onClose }) {
               )
             ] }),
             /* @__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." })
+            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." }),
+            item.url && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: "1.25rem", paddingTop: "1rem", borderTop: "1px solid rgba(255,255,255,0.08)" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "a",
+              {
+                href: item.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "0.4rem",
+                  fontSize: "0.8rem",
+                  fontWeight: 600,
+                  color: "var(--color-accent, #f0b90b)",
+                  textDecoration: "none",
+                  transition: "opacity 0.15s"
+                },
+                onMouseEnter: (e) => {
+                  e.currentTarget.style.opacity = "0.8";
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.opacity = "1";
+                },
+                children: [
+                  "Read full article",
+                  /* @__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: "M19 19H5V5h7V3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" }) })
+                ]
+              }
+            ) })
           ]
         }
       )
@@ -2938,10 +2995,10 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
         children: [
           /* @__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" }) }),
+              isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", style: { color: "var(--color-text, #fff)", flexShrink: 0, display: "block" }, 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" } }),
               /* @__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 }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", style: { margin: 0 }, children: resolvedHeading }),
                 subheading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
               ] })
             ] }),
@@ -2956,7 +3013,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "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(
+          isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "1.5rem", marginTop: "0.75rem", marginBottom: "0.5rem", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", paddingBottom: "0.5rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -2965,7 +3022,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 background: "transparent",
                 border: "none",
                 borderBottom: homeTab === tab ? "2px solid var(--color-accent, #f0b90b)" : "2px solid transparent",
-                padding: "0.5rem 0.75rem",
+                padding: "0 0 0.5rem 0",
+                marginBottom: "-1px",
                 fontSize: "0.75rem",
                 fontWeight: homeTab === tab ? 600 : 400,
                 color: homeTab === tab ? "var(--color-text, #fff)" : "var(--color-text-secondary, #848e9c)",
@@ -2979,7 +3037,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: "mt-4 flex flex-1 flex-col gap-3 overflow-hidden",
+              className: cn("flex flex-1 flex-col overflow-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
               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;
@@ -3018,7 +3076,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                     style: {
                       width: "100%",
                       textAlign: "left",
-                      background: "transparent",
+                      backgroundColor: "transparent",
                       border: "none",
                       cursor: "pointer",
                       padding: "0.75rem 0",
@@ -3027,18 +3085,28 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                       justifyContent: "space-between",
                       alignItems: "flex-start",
                       gap: "0.5rem",
-                      color: "inherit"
+                      color: "inherit",
+                      transition: "background-color 0.15s"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
+                      const title = e.currentTarget.querySelector("h3");
+                      if (title) title.style.color = "var(--color-accent, #E6C87E)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                      const title = e.currentTarget.querySelector("h3");
+                      if (title) title.style.color = "#f8f9fa";
                     },
                     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.jsx("h3", { style: { fontSize: "0.95rem", fontWeight: 500, marginBottom: "0.35rem", color: "#f8f9fa", lineHeight: 1.45, transition: "color 0.15s" }, 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) }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: formatDateShort(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.arrow ? `${sentimentInfo.arrow} ` : "",
                             sentimentInfo.label
                           ] })
                         ] })
@@ -3095,8 +3163,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                             ] }),
                             /* @__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.arrow ? `${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" })
@@ -3121,8 +3188,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 type: "button",
                 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)" },
-                children: "Prev"
+                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "50%", width: "28px", height: "28px", display: "flex", alignItems: "center", justifyContent: "center", padding: 0, cursor: homePage === 0 ? "not-allowed" : "pointer", opacity: homePage === 0 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
+                children: /* @__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: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.5)" }, children: [
@@ -3136,8 +3203,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 type: "button",
                 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)" },
-                children: "Next"
+                style: { background: "transparent", border: "1px solid rgba(255,255,255,0.15)", borderRadius: "50%", width: "28px", height: "28px", display: "flex", alignItems: "center", justifyContent: "center", padding: 0, cursor: homePage >= homeTotalPages - 1 ? "not-allowed" : "pointer", opacity: homePage >= homeTotalPages - 1 ? 0.4 : 1, color: "rgba(255,255,255,0.6)" },
+                children: /* @__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" }) })
               }
             )
           ] }),
@@ -3148,8 +3215,9 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 type: "button",
                 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"),
-                children: "Prev"
+                className: cn("rounded-full border border-white/15 flex items-center justify-center", page === 0 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
+                style: { width: "28px", height: "28px", padding: 0, background: "transparent", color: "rgba(255,255,255,0.6)" },
+                children: /* @__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: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-white/70", children: [
@@ -3164,8 +3232,9 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                 type: "button",
                 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"),
-                children: "Next"
+                className: cn("rounded-full border border-white/15 flex items-center justify-center", page >= totalPages - 1 ? "opacity-40 cursor-not-allowed" : "hover:border-white/40"),
+                style: { width: "28px", height: "28px", padding: 0, background: "transparent", color: "rgba(255,255,255,0.6)" },
+                children: /* @__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" }) })
               }
             )
           ] }),
@@ -4668,14 +4737,16 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     imageUrl,
     imageAlt,
     name,
+    address,
     location,
     price,
     currencySymbol = "$",
     changePercent,
-    beds,
-    baths,
-    cars,
-    propertyTypeLabel,
+    priceChange,
+    beds: _beds,
+    baths: _baths,
+    cars: _cars,
+    propertyTypeLabel: _propertyTypeLabel,
     onTrade,
     onMakeOffer,
     tradeButtonLabel = "Trade",
@@ -4691,7 +4762,6 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const tradeHoverColor = "#f5dd9a";
     const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
     const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
-    const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
     const isTradeDisabled = !onTrade;
     const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
     const showMakeOfferButton = !hideMakeOfferButton;
@@ -4704,201 +4774,112 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
       setIsOfferInteracting(state);
     };
     const headingStyle = {
-      fontSize: "clamp(1.6rem, 4vw, 2.5rem)",
-      marginBottom: "0.5rem",
+      fontSize: "clamp(1.3rem, 3vw, 1.8rem)",
+      marginBottom: "0",
       color: "#ffffff",
       textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
       fontWeight: 600,
       lineHeight: 1.2
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(OuterWrapper, { ref, className: cn(className), ...props, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(HeroContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          HeroImage,
-          {
-            src: imageUrl,
-            alt: imageAlt ?? name
-          }
-        ),
-        statusBadge ? /* @__PURE__ */ jsxRuntime.jsxs(StatusBadge, { $isLive: statusBadge.variant === "live", children: [
-          statusBadge.variant === "live" ? /* @__PURE__ */ jsxRuntime.jsx(PulsingDot, {}) : null,
-          statusBadge.label
-        ] }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(HeroGradient, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[1800px] flex-wrap items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(InfoCard, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
-              /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { className: "mb-3 max-[768px]:mb-[0.6rem] max-[480px]:mb-[0.5rem]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(LocationText, { children: location }),
-                isLoading ? /* @__PURE__ */ jsxRuntime.jsx(PriceBlock, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 18 }) }) : price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock, { children: [
-                  formatPrice3(price, currencySymbol),
-                  changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
-                    "span",
-                    {
-                      className: cn(
-                        "ml-2 flex items-center text-[0.875rem] font-medium",
-                        isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
-                      ),
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          "svg",
-                          {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "12",
-                            height: "12",
-                            viewBox: "0 0 24 24",
-                            fill: "currentColor",
-                            className: "mr-[0.15rem]",
-                            children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
-                          }
-                        ),
-                        Math.abs(changePercent).toFixed(2),
-                        "%"
-                      ]
-                    }
-                  )
-                ] })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 52, height: 14 })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 56, height: 14 })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 50, height: 14 })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 60, height: 14 })
-            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "mr-2 h-[18px] w-[18px]" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  beds,
-                  " Beds"
-                ] })
-              ] }),
-              baths == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "mr-2 h-[18px] w-[18px]" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  baths,
-                  " Baths"
-                ] })
+    return /* @__PURE__ */ jsxRuntime.jsx(OuterWrapper, { ref, className: cn(className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(HeroContainer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        HeroImage,
+        {
+          src: imageUrl,
+          alt: imageAlt ?? name
+        }
+      ),
+      statusBadge ? /* @__PURE__ */ jsxRuntime.jsxs(StatusBadge, { $isLive: statusBadge.variant === "live", children: [
+        statusBadge.variant === "live" ? /* @__PURE__ */ jsxRuntime.jsx(PulsingDot, {}) : null,
+        statusBadge.label
+      ] }) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-center", style: { background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[1800px] flex-wrap items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardLayout, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { src: imageUrl, alt: imageAlt ?? name }),
+          /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(NameGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.75rem", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
+                location ? /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { children: location }) : null
               ] }),
-              cars == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "mr-2 h-[18px] w-[18px]" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  cars,
-                  " Cars"
-                ] })
+              address ? /* @__PURE__ */ jsxRuntime.jsx(AddressText, { children: address }) : null
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PriceGroup, { children: [
+              isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 24 }) : price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(PriceRow, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CurrencyLabel, { children: "USD" }),
+                changePercent != null ? /* @__PURE__ */ jsxRuntime.jsx(PriceArrow, { $isPositive: isPositive, children: isPositive ? "\u25B2" : "\u25BC" }) : null,
+                formatPrice3(price, "")
               ] }),
-              propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyTypeLabel })
-            ] }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: isTradeDisabled ? void 0 : onTrade,
-                className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
-                style: {
-                  backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
-                  color: "black",
-                  padding: "0.75rem 1.5rem",
-                  borderColor: isTradeInteracting ? accentColor : "transparent",
-                  boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
-                  opacity: isTradeDisabled ? 0.5 : 1,
-                  cursor: isTradeDisabled ? "not-allowed" : "pointer"
-                },
-                onMouseEnter: () => setTradeInteraction(true),
-                onMouseLeave: () => setTradeInteraction(false),
-                onMouseDown: () => setTradeInteraction(true),
-                onMouseUp: () => setTradeInteraction(false),
-                onFocus: () => setTradeInteraction(true),
-                onBlur: () => setTradeInteraction(false),
-                onTouchStart: () => setTradeInteraction(true),
-                onTouchEnd: () => setTradeInteraction(false),
-                disabled: isTradeDisabled,
-                "aria-disabled": isTradeDisabled,
-                children: tradeButtonLabel
-              }
-            ),
-            showMakeOfferButton ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
-                className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
-                style: {
-                  backgroundColor: isOfferInteracting ? accentColor : "transparent",
-                  borderColor: accentColor,
-                  color: isOfferInteracting ? "black" : accentColor,
-                  padding: "0.75rem 1.5rem",
-                  boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
-                  opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
-                  cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
-                },
-                onMouseEnter: () => setOfferInteraction(true),
-                onMouseLeave: () => setOfferInteraction(false),
-                onMouseDown: () => setOfferInteraction(true),
-                onMouseUp: () => setOfferInteraction(false),
-                onFocus: () => setOfferInteraction(true),
-                onBlur: () => setOfferInteraction(false),
-                onTouchStart: () => setOfferInteraction(true),
-                onTouchEnd: () => setOfferInteraction(false),
-                disabled: isMakeOfferButtonDisabled,
-                "aria-disabled": isMakeOfferButtonDisabled,
-                children: makeOfferButtonLabel
-              }
-            ) : null
-          ] })
-        ] }) })
-      ] }),
-      hasAmenities ? /* @__PURE__ */ jsxRuntime.jsx(MobileAmenities, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "h-4 w-4 opacity-60" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 40, height: 12 })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "h-4 w-4 opacity-60" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 44, height: 12 })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "h-4 w-4 opacity-60" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 42, height: 12 })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(MobileAmenity, { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 52, height: 12 }) })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BedDouble, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            beds,
-            " Beds"
-          ] })
-        ] }),
-        baths == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bath, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            baths,
-            " Baths"
-          ] })
-        ] }),
-        cars == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenity, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CarFront, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            cars,
-            " Cars"
-          ] })
-        ] }),
-        propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx(MobileAmenity, { children: propertyTypeLabel })
-      ] }) }) : null
-    ] });
+              changePercent != null ? /* @__PURE__ */ jsxRuntime.jsxs(PriceChangeRow, { $isPositive: isPositive, children: [
+                priceChange != null ? `${isPositive ? "+" : ""}${priceChange.toFixed(2)} ` : null,
+                "(",
+                isPositive ? "+" : "",
+                Math.abs(changePercent).toFixed(2),
+                "%)"
+              ] }) : null
+            ] })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: isTradeDisabled ? void 0 : onTrade,
+              className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+              style: {
+                backgroundColor: isTradeInteracting ? tradeHoverColor : accentColor,
+                color: "black",
+                padding: "0.75rem 1.5rem",
+                borderColor: isTradeInteracting ? accentColor : "transparent",
+                boxShadow: isTradeInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                opacity: isTradeDisabled ? 0.5 : 1,
+                cursor: isTradeDisabled ? "not-allowed" : "pointer"
+              },
+              onMouseEnter: () => setTradeInteraction(true),
+              onMouseLeave: () => setTradeInteraction(false),
+              onMouseDown: () => setTradeInteraction(true),
+              onMouseUp: () => setTradeInteraction(false),
+              onFocus: () => setTradeInteraction(true),
+              onBlur: () => setTradeInteraction(false),
+              onTouchStart: () => setTradeInteraction(true),
+              onTouchEnd: () => setTradeInteraction(false),
+              disabled: isTradeDisabled,
+              "aria-disabled": isTradeDisabled,
+              children: tradeButtonLabel
+            }
+          ),
+          showMakeOfferButton ? /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: isMakeOfferButtonDisabled ? void 0 : onMakeOffer,
+              className: "flex items-center justify-center rounded border font-semibold transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_4px_8px_rgba(0,0,0,0.2)] active:translate-y-0 active:shadow-[0_2px_4px_rgba(0,0,0,0.1)] text-[0.95rem] max-[480px]:text-[0.9rem]",
+              style: {
+                backgroundColor: isOfferInteracting ? accentColor : "transparent",
+                borderColor: accentColor,
+                color: isOfferInteracting ? "black" : accentColor,
+                padding: "0.75rem 1.5rem",
+                boxShadow: isOfferInteracting ? `0 0 0 2px rgba(0,0,0,0.4), 0 0 0 4px ${accentColor}` : "none",
+                opacity: isMakeOfferButtonDisabled ? 0.5 : 1,
+                cursor: isMakeOfferButtonDisabled ? "not-allowed" : "pointer"
+              },
+              onMouseEnter: () => setOfferInteraction(true),
+              onMouseLeave: () => setOfferInteraction(false),
+              onMouseDown: () => setOfferInteraction(true),
+              onMouseUp: () => setOfferInteraction(false),
+              onFocus: () => setOfferInteraction(true),
+              onBlur: () => setOfferInteraction(false),
+              onTouchStart: () => setOfferInteraction(true),
+              onTouchEnd: () => setOfferInteraction(false),
+              disabled: isMakeOfferButtonDisabled,
+              "aria-disabled": isMakeOfferButtonDisabled,
+              children: makeOfferButtonLabel
+            }
+          ) : null
+        ] })
+      ] }) })
+    ] }) });
   }
 );
 PropertyHeroHeader.displayName = "PropertyHeroHeader";
@@ -4941,32 +4922,6 @@ var HeroContainer = styled25__default.default.div`
     border-radius: 6px;
   }
 `;
-var MobileAmenities = styled25__default.default.div`
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: rgba(8, 8, 12, 0.85);
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  color: rgba(255, 255, 255, 0.85);
-  font-size: 0.85rem;
-
-  @media (max-width: 768px) {
-    display: flex;
-    flex-wrap: wrap;
-  }
-`;
-var MobileAmenity = styled25__default.default.span`
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.35rem 0.5rem;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.08);
-  font-weight: 500;
-`;
 var HeroImage = styled25__default.default.img`
   width: 100%;
   height: 100%;
@@ -4981,15 +4936,6 @@ var HeroImage = styled25__default.default.img`
   transform: scale(1.0);
   transform-origin: center;
 `;
-var HeroGradient = styled25__default.default.div`
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  z-index: 1;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
-`;
 var ActionButtons = styled25__default.default.div`
   display: flex;
   flex-wrap: wrap;
@@ -5005,13 +4951,42 @@ var ActionButtons = styled25__default.default.div`
     display: none;
   }
 `;
+var CardLayout = styled25__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  @media (max-width: 480px) {
+    gap: 0.75rem;
+  }
+`;
+var Thumbnail = styled25__default.default.img`
+  width: 72px;
+  height: 72px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+
+  @media (max-width: 768px) {
+    width: 56px;
+    height: 56px;
+    border-radius: 6px;
+  }
+
+  @media (max-width: 480px) {
+    width: 48px;
+    height: 48px;
+  }
+`;
+var CardContent2 = styled25__default.default.div`
+  min-width: 0;
+  flex: 1;
+`;
 var InfoCard = styled25__default.default.div`
-  display: inline-block;
-  width: fit-content;
-  max-width: 70%;
   border-radius: 12px;
-  background: rgba(0, 0, 0, 0.12);
-  padding: 0.75rem 1rem;
+  background: rgba(0, 0, 0, 0.15);
+  padding: 1rem 1.5rem;
   color: #fff;
   backdrop-filter: blur(6px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
@@ -5019,45 +4994,92 @@ var InfoCard = styled25__default.default.div`
   min-width: 0;
 
   @media (max-width: 768px) {
-    max-width: 85%;
-  }
-
-  @media (max-width: 640px) {
-    max-width: 92%;
+    padding: 0.85rem 1.15rem;
   }
 
   @media (max-width: 480px) {
-    max-width: 95%;
+    padding: 0.65rem 0.85rem;
   }
 `;
-var InfoRow = styled25__default.default.div`
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
+var NameGroup = styled25__default.default.div`
+  display: flex;
   align-items: center;
   gap: 0.75rem;
-  width: 100%;
-
-  @media (max-width: 640px) {
-    gap: 0.5rem;
-  }
+  min-width: 0;
+  flex-wrap: wrap;
 `;
-var LocationText = styled25__default.default.span`
-  font-size: clamp(1rem, 2.6vw, 1.25rem);
-  color: rgba(255, 255, 255, 0.9);
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
+var TypeBadge = styled25__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  line-height: 1;
+  color: #E6C87E;
+  background: rgba(230, 200, 126, 0.12);
   white-space: nowrap;
+  flex-shrink: 0;
 `;
-var PriceBlock = styled25__default.default.span`
+var InfoRow = styled25__default.default.div`
   display: flex;
-  align-items: center;
-  font-size: clamp(1rem, 2.2vw, 1.25rem);
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
+`;
+var PriceGroup = styled25__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+`;
+var PriceRow = styled25__default.default.span`
+  display: inline-flex;
+  align-items: baseline;
+  font-size: clamp(1.3rem, 3vw, 1.8rem);
   font-weight: 600;
-  color: var(--color-accent, #f0b90b);
-  padding-left: 1rem;
-  border-left: 1px solid rgba(255, 255, 255, 0.25);
-  min-height: 1.5rem;
+  color: #fff;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+`;
+var CurrencyLabel = styled25__default.default.span`
+  font-size: 0.55em;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.4);
+  margin-right: 0.3em;
+`;
+var PriceArrow = styled25__default.default.span`
+  color: ${({ $isPositive }) => $isPositive ? "#0ecb81" : "#f6465d"};
+  font-size: 0.65em;
+  margin: 0 0.1em;
+`;
+var AddressText = styled25__default.default.p`
+  font-size: 1.1rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 400;
+  margin: 0.1rem 0 0;
+
+  @media (max-width: 768px) {
+    font-size: 1rem;
+  }
+
+  @media (max-width: 480px) {
+    font-size: 0.9rem;
+  }
+`;
+var PriceChangeRow = styled25__default.default.span`
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  flex-shrink: 0;
+  font-size: 0.85rem;
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
+  font-variant-numeric: tabular-nums;
+  color: ${({ $isPositive }) => $isPositive ? "#0ecb81" : "#f6465d"};
 `;
 var StatusBadge = styled25__default.default.div`
   position: absolute;
@@ -5134,13 +5156,45 @@ var Header = ({
   onProfileNavigate: _onProfileNavigate,
   onOrdersNavigate: _onOrdersNavigate,
   onWalletNavigate: _onWalletNavigate,
-  showTradeTab = true
+  showTradeTab = true,
+  portfolioSummary
 }) => {
   const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
   const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
   const [showLoginPopup, setShowLoginPopup] = React5.useState(false);
   const [loginPopupInitialView, setLoginPopupInitialView] = React5.useState(void 0);
+  const [isPortfolioBarVisible, setIsPortfolioBarVisible] = React5.useState(() => {
+    if (typeof localStorage === "undefined") return false;
+    return localStorage.getItem("portfolioBarVisible") !== "false";
+  });
+  const portfolioPillRef = React5.useRef(null);
+  const [portfolioArrowLeft, setPortfolioArrowLeft] = React5.useState(null);
+  const togglePortfolioBar = React5.useCallback(() => {
+    setIsPortfolioBarVisible((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem("portfolioBarVisible", String(next));
+      } catch {
+      }
+      return next;
+    });
+  }, []);
+  const updatePortfolioArrow = React5.useCallback(() => {
+    const eye = document.getElementById("portfolio-eye-toggle");
+    const pill = portfolioPillRef.current;
+    if (!eye || !pill) return;
+    const eyeRect = eye.getBoundingClientRect();
+    const pillRect = pill.getBoundingClientRect();
+    const offset = eyeRect.left + eyeRect.width / 2 - pillRect.left - 7;
+    setPortfolioArrowLeft(offset);
+  }, []);
+  React5.useEffect(() => {
+    if (!isPortfolioBarVisible || !portfolioSummary) return;
+    updatePortfolioArrow();
+    window.addEventListener("resize", updatePortfolioArrow);
+    return () => window.removeEventListener("resize", updatePortfolioArrow);
+  }, [isPortfolioBarVisible, portfolioSummary, updatePortfolioArrow]);
   React5.useEffect(() => {
     if (typeof window === "undefined") return;
     const ua = navigator.userAgent;
@@ -5518,6 +5572,17 @@ var Header = ({
         }
       ),
       isAuthenticated ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        portfolioSummary && /* @__PURE__ */ jsxRuntime.jsx(
+          PortfolioEyeButton,
+          {
+            id: "portfolio-eye-toggle",
+            type: "button",
+            onClick: togglePortfolioBar,
+            $active: isPortfolioBarVisible,
+            title: isPortfolioBarVisible ? "Hide portfolio" : "Show portfolio",
+            children: isPortfolioBarVisible ? /* @__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: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }) : /* @__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: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46A11.804 11.804 0 001 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z" }) })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs(UserMenu, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
             UserButton,
@@ -5589,6 +5654,51 @@ var Header = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(HeaderSpacer, {}),
+    isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
+      const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+      const isPLPositive = portfolioSummary.pnl >= 0;
+      return /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(PortfolioBarPill, { ref: portfolioPillRef, children: [
+        portfolioArrowLeft !== null && /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarArrow, { style: { left: `${portfolioArrowLeft}px` } }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Holdings" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
+            "$",
+            fmt(portfolioSummary.holdings)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PBOperator, { children: "+" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Cash" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
+            "$",
+            fmt(portfolioSummary.cash)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PBOperator, { children: "=" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Portfolio" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#D4AF37", fontWeight: 700 }, children: [
+            "$",
+            fmt(portfolioSummary.portfolioValue)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
+            isPLPositive ? "+" : "",
+            "$",
+            fmt(Math.abs(portfolioSummary.pnl)),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.6rem", marginLeft: "2px", opacity: 0.7 }, children: [
+              "(",
+              isPLPositive ? "+" : "",
+              portfolioSummary.pnlPercent.toFixed(2),
+              "%)"
+            ] })
+          ] })
+        ] })
+      ] }) });
+    })(),
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsxRuntime.jsx(
       LoginPopupComponent,
       {
@@ -5674,8 +5784,19 @@ var HeaderContainer = styled25__default.default.header`
   box-sizing: border-box;
 
   @media (max-width: 768px) {
-    padding: 0 1rem;
-    padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
+    top: 0.5rem;
+    left: 0.75rem;
+    right: 0.75rem;
+    width: calc(100% - 1.5rem);
+    height: 46px;
+    min-height: 46px;
+    padding: 0 0.75rem;
+    border-radius: 12px;
+    background-color: rgba(13, 17, 23, 0.92);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   }
 `;
 var HeaderSpacer = styled25__default.default.div`
@@ -5683,6 +5804,10 @@ var HeaderSpacer = styled25__default.default.div`
   min-height: 56px;
   min-height: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
   flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    min-height: calc(46px + 0.5rem);
+  }
 `;
 var Logo = styled25__default.default.div`
   display: flex;
@@ -6016,6 +6141,151 @@ var MobileNavItem = styled25__default.default.div`
     padding-left: 24px;
   }
 `;
+var pbShimmer = styled25.keyframes`
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+`;
+var PortfolioEyeButton = styled25__default.default.button`
+  background: ${(p) => p.$active ? "rgba(212, 175, 55, 0.15)" : "transparent"};
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.5)"};
+  transition: all 0.2s ease;
+  margin-right: 4px;
+
+  &:hover {
+    background: rgba(212, 175, 55, 0.2);
+    color: #D4AF37;
+  }
+
+  @media (max-width: 768px) {
+    padding: 4px;
+    margin-right: 2px;
+  }
+`;
+var PortfolioBarContainer = styled25__default.default.div`
+  position: fixed;
+  top: 56px;
+  top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
+  left: 0;
+  right: 0;
+  z-index: 999;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+  padding: 0 5%;
+  pointer-events: none;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 40%;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.25) 100%);
+    pointer-events: none;
+  }
+
+  @media (max-width: 768px) {
+    top: calc(46px + 0.5rem);
+    padding: 0 0.75rem;
+    justify-content: center;
+
+    &::before {
+      left: 0;
+      right: 0;
+      background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.4) 30%, rgba(212, 175, 55, 0.4) 70%, transparent 100%);
+    }
+  }
+`;
+var PortfolioBarPill = styled25__default.default.div`
+  pointer-events: auto;
+  display: flex;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0 0 20px 20px;
+  background: linear-gradient(135deg, rgba(24, 26, 34, 0.98) 0%, rgba(32, 34, 42, 0.97) 100%);
+  backdrop-filter: blur(16px);
+  border: 1px solid rgba(212, 175, 55, 0.25);
+  border-top: none;
+  box-shadow:
+    0 4px 16px rgba(0, 0, 0, 0.3),
+    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
+    0 1px 0 rgba(212, 175, 55, 0.06) inset;
+  position: relative;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
+    background-size: 200% 100%;
+    animation: ${pbShimmer} 4s linear infinite;
+  }
+
+  @media (max-width: 768px) {
+    gap: 0.75rem;
+    padding: 0.4rem 1rem;
+    border-radius: 0 0 16px 16px;
+  }
+`;
+var PortfolioBarArrow = styled25__default.default.div`
+  position: absolute;
+  top: -7px;
+  width: 14px;
+  height: 14px;
+  background: linear-gradient(135deg, rgba(26, 28, 36, 1) 0%, rgba(30, 32, 40, 1) 100%);
+  border-left: 1px solid rgba(212, 175, 55, 0.3);
+  border-top: 1px solid rgba(212, 175, 55, 0.3);
+  transform: rotate(45deg);
+  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.25);
+  pointer-events: none;
+`;
+var PBMetric = styled25__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  white-space: nowrap;
+`;
+var PBMetricLabel = styled25__default.default.span`
+  font-size: 0.55rem;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 500;
+`;
+var PBMetricValue = styled25__default.default.span`
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: ${(p) => p.$positive ? "#0ecb81" : p.$negative ? "#f6465d" : "#eaecef"};
+  font-variant-numeric: tabular-nums;
+`;
+var PBDot = styled25__default.default.div`
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: rgba(212, 175, 55, 0.25);
+  flex-shrink: 0;
+`;
+var PBOperator = styled25__default.default.span`
+  font-size: 0.7rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.35);
+  flex-shrink: 0;
+`;
 var PropertySubheader = React5__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
     const tabsContainerRef = React5__namespace.useRef(null);
@@ -6181,11 +6451,6 @@ var LoginPopup = ({
       setView(initialView);
     }
   }, [initialView]);
-  React5.useEffect(() => {
-    if (view === "kyc" && renderKycWidget) {
-      setShowKycWidget(true);
-    }
-  }, [view, renderKycWidget]);
   React5.useEffect(() => {
     if (!transakWidgetUrl) return;
     const handleTransakMessage = (event) => {
@@ -6698,7 +6963,7 @@ var LoginPopup = ({
     ] }) });
   }
   if (view === "funding") {
-    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { children: /* @__PURE__ */ jsxRuntime.jsxs(
       FundingPopupContainer,
       {
         onClick: (event) => event.stopPropagation(),
@@ -6768,6 +7033,16 @@ var Overlay2 = styled25__default.default.div`
   justify-content: center;
   align-items: center;
   z-index: 10000;
+  animation: fadeIn 0.2s ease-in-out;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
 `;
 var PopupContainer = styled25__default.default.div`
   background-color: var(--color-background, #0a0a0a);
@@ -6777,8 +7052,20 @@ var PopupContainer = styled25__default.default.div`
   max-width: 440px;
   width: 90%;
   position: relative;
+  animation: slideUp 0.3s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
 
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
   @media (max-width: 768px) {
     padding: 2rem;
     max-width: 90%;
@@ -6792,9 +7079,21 @@ var KycPopupContainer = styled25__default.default.div`
   max-width: ${(props) => props.$expanded ? "680px" : "440px"};
   width: 90%;
   position: relative;
+  animation: slideUp 0.3s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   transition: max-width 0.3s ease;
 
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
   @media (max-width: 768px) {
     padding: 1.5rem;
     max-width: 95%;
@@ -7122,9 +7421,21 @@ var FundingPopupContainer = styled25__default.default.div`
   max-width: ${(props) => props.$hasWidget ? "900px" : "440px"};
   width: 90%;
   position: relative;
+  animation: slideUp 0.3s ease-out;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
   overflow: hidden;
 
+  @keyframes slideUp {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
   @media (max-width: 768px) {
     padding: ${(props) => props.$hasWidget ? "0" : "2rem"};
     max-width: 95%;
@@ -7413,7 +7724,7 @@ var PropertyCompareBar = React5__namespace.forwardRef(
       void 0,
       pricePercentFormat
     )}%`;
-    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock2, { $variant: propertyValueVariant, children: [
+    const priceContent = formattedPriceValue && propertyValueVariant === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock, { $variant: propertyValueVariant, children: [
       /* @__PURE__ */ jsxRuntime.jsx(PriceAmount, { children: formattedPriceValue }),
       formattedPriceChange || formattedPricePercent ? /* @__PURE__ */ jsxRuntime.jsxs(
         PriceChange,
@@ -7726,7 +8037,7 @@ var PropertyValueChange = styled25__default.default.span`
     font-size: 0.65rem;
   }
 `;
-var PriceBlock2 = styled25__default.default.div`
+var PriceBlock = styled25__default.default.div`
   display: none;
 
   ${({ $variant }) => $variant === "pill" && styled25.css`
@@ -7820,7 +8131,7 @@ function GalleryMapSection({
       /* @__PURE__ */ jsxRuntime.jsxs(ThumbStrip, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(ThumbScroll, { children: images.filter((img) => img.category !== "Floorplan").map((img) => {
           const actualIndex = images.indexOf(img);
-          return /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
+          return /* @__PURE__ */ jsxRuntime.jsx(Thumbnail2, { "data-active": !showVideo && carouselIndex === actualIndex, onClick: () => {
             stopAutoPlay();
             setShowVideo(false);
             setCarouselIndex(actualIndex);
@@ -7960,7 +8271,7 @@ var ThumbScroll = styled25__default.default.div`
   scrollbar-width: none;
   &::-webkit-scrollbar { display: none; }
 `;
-var Thumbnail = styled25__default.default.div`
+var Thumbnail2 = styled25__default.default.div`
   min-width: 60px; height: 45px; border-radius: 4px; overflow: hidden;
   cursor: pointer; border: 2px solid transparent; opacity: 0.6;
   transition: all 0.2s ease; flex-shrink: 0;
@@ -8491,7 +8802,7 @@ function PropertyHistory() {
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9rem] font-normal ml-3 opacity-80", children: loafListing.date.replace(/\d+,\s|\s\d+$/, "") })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(SalesTable, { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs(HistoryRow, { $isOwnershipStart: true, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: loafListing.type, children: loafListing.type === "Sale" ? "Sold" : loafListing.type }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: loafListing.type, children: loafListing.type === "Sale" ? "Sold" : loafListing.type }) }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { children: loafListing.saleType ?? "-" }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { children: loafListing.agent })
           ] }) }) }),
@@ -8553,7 +8864,7 @@ function PropertyHistory() {
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[0.9rem] font-normal ml-3 opacity-80", children: ownershipSale.date.replace(/\d+,\s|\s\d+$/, "") })
             ] }) }),
             ownershipSale && (historyFilter === "all" || historyFilter === "sales") && /* @__PURE__ */ jsxRuntime.jsx(SalesTable, { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: /* @__PURE__ */ jsxRuntime.jsxs(HistoryRow, { $isOwnershipStart: true, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: ownershipSale.type, children: ownershipSale.type === "Sale" ? "Sold" : ownershipSale.type }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: ownershipSale.type, children: ownershipSale.type === "Sale" ? "Sold" : ownershipSale.type }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: ownershipSale.saleType ?? "-" }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: ownershipSale.agent })
             ] }) }) }),
@@ -8562,7 +8873,7 @@ function PropertyHistory() {
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2", children: events.map((event) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(EventDetails, { event }) }, event.id)) })
             ] }),
             otherSales.length > 0 && (historyFilter === "all" || historyFilter === "sales") && /* @__PURE__ */ jsxRuntime.jsx(SalesTable, { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: otherSales.map((sale) => /* @__PURE__ */ jsxRuntime.jsxs(HistoryRow, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: sale.type, children: sale.type === "Sale" ? "Sold" : sale.type }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: sale.type, children: sale.type === "Sale" ? "Sold" : sale.type }) }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: sale.saleType ?? "-" }),
               /* @__PURE__ */ jsxRuntime.jsx("td", { children: sale.agent })
             ] }, sale.id)) }) })
@@ -8705,7 +9016,7 @@ function EventDetails({ event }) {
         onClick: toggleExpand,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between items-center flex-1 gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(TypeBadge, { $type: event.type, children: event.type === "Sale" ? "Sold" : event.type }),
+            /* @__PURE__ */ jsxRuntime.jsx(TypeBadge2, { $type: event.type, children: event.type === "Sale" ? "Sold" : event.type }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2", children: event.date })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-[var(--color-text-secondary)] w-6 h-6 rounded-full transition-colors duration-200 hover:bg-white/10", children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronUp, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(bi.BiChevronDown, { size: 20 }) })
@@ -8949,7 +9260,7 @@ var HistoryRow = styled25__default.default.tr`
     background-color: rgba(255, 255, 255, 0.08);
   }
 `;
-var TypeBadge = styled25__default.default.span`
+var TypeBadge2 = styled25__default.default.span`
   display: inline-block;
   padding: 0.25rem 0.5rem;
   border-radius: 4px;
@@ -9359,7 +9670,8 @@ function AssetSelectorBar({
   metrics: metricsProp,
   currentTokenName,
   selectorItems,
-  onSelect
+  onSelect,
+  trailing
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -9397,6 +9709,7 @@ function AssetSelectorBar({
         ] })
       ] })
     ] }, m.label)) }),
+    trailing,
     isDropdownOpen && hasItems && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: selectorItems.map((item) => {
       const isCurrent = item.tokenName === currentTokenName;
       const status = item.status?.toUpperCase();
@@ -9629,6 +9942,7 @@ function OfferingProgressCard({
   raisedAmount,
   targetAmount,
   isPrivateClient = false,
+  variant = "default",
   style,
   className
 }) {
@@ -9660,6 +9974,108 @@ function OfferingProgressCard({
     const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(CompactContainer, { style, className, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ProgressInfo, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ProgressSubscribers, { children: [
+          "Subscribers: ",
+          subscriberCount.toLocaleString()
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ProgressAmounts, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "target", children: [
+            " / ",
+            formatCurrency3(computedTarget)
+          ] })
+        ] })
+      ] })
+    ] });
+  }
+  if (variant === "home") {
+    const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
+          " Offering Progress"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $color: "#0ecb81", $pulse: true }),
+          "LIVE"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $color: statusColor || "#D4AF37" }),
+          statusLabel || "Preparing"
+        ] }) })
+      ] }),
+      isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
+        countdown ? /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { children: "Opens In" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsxRuntime.jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsSide, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsLabel, { children: "Units Subscribed" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsValue, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(HomeSpinner, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              " / ",
+              supplyToSell.toLocaleString()
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(LiveBody, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(LiveTopRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(LiveLabel, { children: [
+              "Offering Subscribed ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u24D8" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(LivePercent, { children: [
+              percentSold.toFixed(1),
+              "%",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arrow", children: "\u2191" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LiveLabel, { children: "Units Subscribed" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(UnitsValue, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: totalSold.toLocaleString() }),
+              /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
+                "/ ",
+                supplyToSell.toLocaleString()
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ProgressInfo, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ProgressSubscribers, { children: [
+            "Subscribers: ",
+            subscriberCount.toLocaleString()
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ProgressAmounts, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "target", children: [
+              " / ",
+              formatCurrency3(computedTarget)
+            ] })
+          ] })
+        ] })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
@@ -9728,7 +10144,7 @@ function OfferingProgressCard({
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u24D8" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(LivePercent, { children: [
-            percentSold < 0.1 && percentSold > 0 ? percentSold.toFixed(3) : percentSold.toFixed(1),
+            percentSold.toFixed(1),
             "%",
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arrow", children: "\u2191" })
           ] })
@@ -9961,6 +10377,59 @@ var ProgressAmounts = styled25__default.default.div`
   .raised { color: #D4AF37; }
   .target { color: rgba(255,255,255,0.3); }
 `;
+var CompactContainer = styled25__default.default.div`
+  width: 100%;
+  margin: 1.5rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+var HomePreLiveRow = styled25__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 1rem;
+`;
+var HomeCountdownSide = styled25__default.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+`;
+var HomeUnitsSide = styled25__default.default.div`
+  text-align: center;
+  flex-shrink: 0;
+`;
+var HomeUnitsLabel = styled25__default.default.div`
+  font-size: 0.6rem;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.2rem;
+`;
+var HomeUnitsValue = styled25__default.default.div`
+  font-size: 1.1rem;
+  font-weight: 700;
+  font-family: monospace;
+  span {
+    color: var(--color-text-secondary);
+    font-weight: 400;
+  }
+`;
+var HomeSpinner = styled25__default.default.span`
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--color-accent, #f0b90b);
+  border-radius: 50%;
+  animation: homeSpin 1s linear infinite;
+  vertical-align: middle;
+  margin-right: 0.15rem;
+  @keyframes homeSpin {
+    to { transform: rotate(360deg); }
+  }
+`;
 var MAX_DISPLAY_AMOUNT = 6e4;
 var formatCurrency4 = (amount) => {
   if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;
@@ -11638,7 +12107,14 @@ function PortfolioActivityPanel({
             formatTimestamp(trade.executedAt)
           ] })
         ] }),
-        trade.status === "SETTLEMENT_FAILED" ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: "#f6465d", $bg: "rgba(246,70,93,0.12)", children: "Failed" }) : trade.status === "SETTLED" ? /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: "#0ecb81", $bg: "rgba(14,203,129,0.12)", children: "Settled" }) : /* @__PURE__ */ jsxRuntime.jsx(ActivityTag, { $color: "#f0b90b", $bg: "rgba(240,185,11,0.15)", children: "Settling" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ActivityTag,
+          {
+            $color: trade.side === "SELL" ? "#f6465d" : "#0ecb81",
+            $bg: trade.side === "SELL" ? "rgba(246,70,93,0.12)" : "rgba(14,203,129,0.12)",
+            children: sideLabel(trade.side)
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(ActivityAmount, { children: formatCurrency5(trade.price * trade.quantity) })
       ] }, trade.tradeId))
     ] }),
@@ -13710,7 +14186,7 @@ function PropertyValuation({
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.5rem" }, children: [
             /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(PropertyDetailLabel, { children: "Last Price" }),
-              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: formatCompact(lastPrice) })
+              /* @__PURE__ */ jsxRuntime.jsx(PricingDetailValue, { children: formatCurrency6(lastPrice) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs(PricingModelDetail, { children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", width: "100%" }, children: [
@@ -13721,11 +14197,11 @@ function PropertyValuation({
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(PricingDetailValue, { style: { color: "var(--color-accent)", fontWeight: "bold" }, children: [
-                formatCompact(fairValue),
+                formatCurrency6(fairValue),
                 " ",
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.85em", fontWeight: "normal", opacity: 0.8 }, children: [
                   "(",
-                  formatCompact(fairValue * tokensOutstanding),
+                  formatCurrency6(fairValue * tokensOutstanding, { maximumFractionDigits: 0 }),
                   ")"
                 ] })
               ] })
@@ -13742,7 +14218,7 @@ function PropertyValuation({
               /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "fairValue", position: 50 }),
               /* @__PURE__ */ jsxRuntime.jsxs(GaugePriceTag, { position: gaugePosition, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Last Price" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCompact(lastPrice) })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency6(lastPrice) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx(GaugeIndicator, { type: "lastPrice", position: gaugePosition })
             ] }),
@@ -13750,36 +14226,36 @@ function PropertyValuation({
               /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#4CAF50" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "< ",
-                  formatCompact(undervaluedThreshold)
+                  formatCurrency6(undervaluedThreshold)
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
                   "(",
-                  formatCompact(undervaluedThreshold * tokensOutstanding),
+                  formatMillions(undervaluedThreshold * tokensOutstanding),
                   ")"
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "var(--color-accent)" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCompact(fairValue) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatCurrency6(fairValue) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
                   "(",
-                  formatCompact(fairValue * tokensOutstanding),
+                  formatMillions(fairValue * tokensOutstanding),
                   ")"
                 ] })
               ] }) }),
               /* @__PURE__ */ jsxRuntime.jsx(ValuationItem, { children: /* @__PURE__ */ jsxRuntime.jsxs(ValuationValue, { style: { color: "#F44336" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "> ",
-                  formatCompact(overvaluedThreshold)
+                  formatCurrency6(overvaluedThreshold)
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "valuation-amount-span", style: { fontSize: "0.8rem", fontWeight: "normal" }, children: [
                   "(",
-                  formatCompact(overvaluedThreshold * tokensOutstanding),
+                  formatMillions(overvaluedThreshold * tokensOutstanding),
                   ")"
                 ] })
               ] }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(HiddenMobileChart, { children: [
             /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
             /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(ChartBackground, { children: [
               axisLabels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
@@ -13898,7 +14374,15 @@ function PropertyValuation({
               ] })
             ] }) })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "desktop-only-historical-chart", style: { marginBottom: "1rem", fontSize: "1.1rem", color: "#fff" }, children: "Historical Valuation" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { className: "desktop-only-historical-chart", children: /* @__PURE__ */ jsxRuntime.jsxs(ChartBackground, { children: [
+          axisLabels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsx(YAxisLabel, { style: { top: `${10 + index * 22}%` }, children: label }, `${label}-${index}`)),
+          /* @__PURE__ */ jsxRuntime.jsxs(ValuationSvg, { viewBox: `0 0 ${CHART_WIDTH} ${CHART_HEIGHT}`, preserveAspectRatio: "none", children: [
+            valuationPath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: valuationPath, fill: "none", stroke: "#D4AF37", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null,
+            fairValuePath ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: fairValuePath, fill: "none", stroke: "#FFFFFF", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" }) : null
+          ] })
+        ] }) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(RecentSalesSection, { children: [
@@ -13972,14 +14456,6 @@ function formatMillions(value) {
   }
   return `$${(value / 1e6).toFixed(2)}m`;
 }
-function formatCompact(value) {
-  if (value == null || !Number.isFinite(value)) return "\u2014";
-  const abs = Math.abs(value);
-  if (abs >= 1e9) return `$${(value / 1e9).toFixed(2)}B`;
-  if (abs >= 1e6) return `$${(value / 1e6).toFixed(2)}M`;
-  if (abs >= 1e3) return `$${(value / 1e3).toFixed(1)}K`;
-  return formatCurrency6(value);
-}
 function formatBedroomLabel(bedrooms) {
   if (!Number.isFinite(bedrooms)) return "\u2014";
   return `${bedrooms} Bed`;
@@ -14103,6 +14579,12 @@ var GaugePriceTag = styled25__default.default.div`
     color: var(--color-accent);
   }
 `;
+var HiddenMobileChart = styled25__default.default.div`
+  display: none;
+  @media (max-width: 480px) {
+    display: block;
+  }
+`;
 var ValuationWrapper = styled25__default.default.div`
   display: flex;
   flex-direction: column;
@@ -14154,10 +14636,9 @@ var PricingModelCard = styled25__default.default.div`
 var PricingModelHeader = styled25__default.default.div`
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
   margin-bottom: 1.5rem;
   gap: 1rem;
-  flex-wrap: wrap;
 
   .valuation-info {
     display: flex;
@@ -14165,7 +14646,6 @@ var PricingModelHeader = styled25__default.default.div`
     gap: 0.25rem;
     font-size: 0.85rem;
     color: rgba(255, 255, 255, 0.75);
-    flex-shrink: 0;
   }
 `;
 var PricingModelTitle = styled25__default.default.h3`
@@ -14232,31 +14712,15 @@ var ValuationDetails = styled25__default.default.div`
   display: flex;
   justify-content: space-between;
   margin-top: 1rem;
-  gap: 0.25rem;
 `;
 var ValuationItem = styled25__default.default.div`
   display: flex;
   flex-direction: column;
-  min-width: 0;
-  overflow: hidden;
 `;
 var ValuationValue = styled25__default.default.div`
   font-size: 1rem;
   font-weight: 600;
   color: #fff;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow-wrap: break-word;
-  word-break: break-word;
-
-  @media (max-width: 480px) {
-    font-size: 0.72rem;
-
-    .valuation-amount-span {
-      display: none;
-    }
-  }
 `;
 var ChartContainer = styled25__default.default.div`
   width: 100%;
@@ -14669,7 +15133,7 @@ var ThumbnailStrip = styled25__default.default.div`
     display: none;
   }
 `;
-var Thumbnail2 = styled25__default.default.button`
+var Thumbnail3 = styled25__default.default.button`
   width: 86px;
   height: 64px;
   border-radius: 6px;
@@ -15005,7 +15469,7 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(Thumbnail2, { $active: idx === currentIndex, onClick: () => setCurrentIndex(idx), "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.src, alt: image.alt }) }, image.alt)) })
+        /* @__PURE__ */ jsxRuntime.jsx(ThumbnailStrip, { onClick: (event) => event.stopPropagation(), children: galleryImages.map((image, idx) => /* @__PURE__ */ jsxRuntime.jsx(Thumbnail3, { $active: idx === currentIndex, onClick: () => setCurrentIndex(idx), "aria-label": `Preview ${image.label}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image.src, alt: image.alt }) }, image.alt)) })
       ]
     }
   );