@loafmarkets/ui 0.1.102 → 0.1.103

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,8 @@ var Orderbook = React5__namespace.forwardRef(
     onPriceClick,
     onLoafLiquidityClick,
     tradeExplorerUrl,
+    maxLevels,
+    fillHeight = false,
     className,
     ...props
   }, ref) => {
@@ -2047,8 +2050,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 +2072,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 +2093,8 @@ var Orderbook = React5__namespace.forwardRef(
       bidVisibleLevels,
       askCumDepths,
       bidCumDepths,
-      combinedMaxCumDepth,
+      askMaxCumDepth,
+      bidMaxCumDepth,
       midPrice,
       midChangePercent,
       midClass,
@@ -2097,15 +2104,19 @@ var Orderbook = React5__namespace.forwardRef(
       isLoading,
       seenTradeKeysRef,
       tradeExplorerUrl,
-      onPriceClick
+      onPriceClick,
+      levelCount: effectiveLevels,
+      compactLevelCount: effectiveCompactLevels,
+      fillHeight
     };
     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",
+          fillHeight && "h-full",
           className
         ),
         ...props,
@@ -2154,7 +2165,8 @@ function DesktopOrderbookLayout({
   bidVisibleLevels,
   askCumDepths,
   bidCumDepths,
-  combinedMaxCumDepth,
+  askMaxCumDepth,
+  bidMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2164,7 +2176,10 @@ function DesktopOrderbookLayout({
   isLoading,
   seenTradeKeysRef,
   tradeExplorerUrl,
-  onPriceClick
+  onPriceClick,
+  levelCount: effectiveLevels,
+  compactLevelCount: _compactLevelCount,
+  fillHeight
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
@@ -2252,7 +2267,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 +2284,20 @@ function DesktopOrderbookLayout({
             );
           }) })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
+      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "flex flex-col justify-end divide-y divide-white/5 overflow-hidden",
-            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(
+            className: cn("flex flex-col justify-end overflow-hidden", !fillHeight && "flex-shrink-0"),
+            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
+            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 +2311,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 +2329,16 @@ function DesktopOrderbookLayout({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "divide-y divide-white/5 overflow-hidden",
-            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(
+            className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
+            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
+            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 +2367,8 @@ function MobileOrderbookLayout({
   bidVisibleLevels: visibleBids,
   askCumDepths,
   bidCumDepths,
-  combinedMaxCumDepth,
+  askMaxCumDepth,
+  bidMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2362,7 +2378,9 @@ function MobileOrderbookLayout({
   isLoading,
   seenTradeKeysRef,
   tradeExplorerUrl,
-  onPriceClick
+  onPriceClick,
+  levelCount: _levelCount,
+  compactLevelCount: effectiveCompactLevels
 }) {
   const midRef = React5__namespace.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
@@ -2434,13 +2452,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 +2499,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 +2525,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 +2565,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 +2709,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 +2754,22 @@ 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`;
+  const time = d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", hour12: true });
+  return `${time} \xB7 ${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 +2780,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 +2862,7 @@ function NewsArticleModal({ item, onClose }) {
                   border: `1px solid ${sentimentInfo.color}40`
                 },
                 children: [
-                  sentimentInfo.arrow,
-                  " ",
+                  sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
                   sentimentInfo.label
                 ]
               }
@@ -2868,7 +2902,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" }) })
+                ]
+              }
+            ) })
           ]
         }
       )
@@ -2900,6 +2962,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
     const [homeTab, setHomeTab] = React5__namespace.useState("all");
     const [homePage, setHomePage] = React5__namespace.useState(0);
     const purchaseItems = purchasesProp ?? [];
+    const [page, setPage] = React5__namespace.useState(0);
     const [selectedItem, setSelectedItem] = React5__namespace.useState(null);
     React5__namespace.useEffect(() => {
       ensureAnimationsInjected();
@@ -2908,6 +2971,14 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
       setHomePage(0);
     }, [homeTab]);
     const hasItems = Array.isArray(items) && items.length > 0;
+    const totalPages = React5__namespace.useMemo(
+      () => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1,
+      [hasItems, items.length]
+    );
+    React5__namespace.useEffect(() => {
+      setPage((prev) => Math.min(prev, totalPages - 1));
+    }, [totalPages]);
+    const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
     const homeFilteredItems = React5__namespace.useMemo(
       () => hasItems ? items.filter((it) => homeTab === "all" || it.type === homeTab) : [],
       [hasItems, items, homeTab]
@@ -2929,10 +3000,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
               ] })
             ] }),
@@ -2947,7 +3018,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",
@@ -2956,7 +3027,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)",
@@ -2970,7 +3042,8 @@ 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;
                 const barPercent = Math.min(85, Math.max(15, purchase.amount / maxAmount * 100));
@@ -3008,7 +3081,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                     style: {
                       width: "100%",
                       textAlign: "left",
-                      background: "transparent",
+                      backgroundColor: "transparent",
                       border: "none",
                       cursor: "pointer",
                       padding: "0.75rem 0",
@@ -3017,18 +3090,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
                           ] })
                         ] })
@@ -3038,11 +3121,12 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                   },
                   key
                 );
-              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { overflowY: "auto", maxHeight: "520px", display: "flex", flexDirection: "column", gap: "0" }, children: items.map((item, index) => {
-                const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
+              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center py-10 text-center text-sm text-white/60", children: "No property news yet." }) : hasItems ? paginatedItems.map((item, index) => {
+                const absoluteIndex = page * ITEMS_PER_PAGE + index;
+                const key = item.displayId ?? item.id ?? `${item.title}-${absoluteIndex}`;
                 const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
-                const dateLabel = item.isNew ?? (highlightFirst && index === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
-                const isHighlighted = item.isNew ?? (highlightFirst && index === 0);
+                const dateLabel = item.isNew ?? (highlightFirst && absoluteIndex === 0) ? "Just now" : typeof item.date === "string" && item.date.trim().length > 0 ? item.date : formatDate(item.date);
+                const isHighlighted = item.isNew ?? (highlightFirst && absoluteIndex === 0);
                 const sentimentInfo = getSentimentInfo(item.sentimentScore);
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -3084,8 +3168,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" })
@@ -3097,7 +3180,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                   },
                   key
                 );
-              }) }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
+              }) : emptyState ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center rounded-2xl border border-dashed border-white/20 px-6 py-10 text-center text-sm text-white/60", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Newspaper, { className: "mb-3 h-8 w-8 text-white/40" }),
                 "No property news yet. Updates will land here as soon as we receive new intelligence."
               ] })
@@ -3110,8 +3193,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: [
@@ -3125,8 +3208,38 @@ 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" }) })
+              }
+            )
+          ] }),
+          !isPurchaseVariant && !isHomeVariant && hasItems && totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between text-xs text-white/60", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage((p) => Math.max(0, p - 1)),
+                disabled: page === 0,
+                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: [
+              "Page ",
+              page + 1,
+              " / ",
+              totalPages
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)),
+                disabled: page >= totalPages - 1,
+                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" }) })
               }
             )
           ] }),
@@ -4629,14 +4742,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",
@@ -4652,7 +4767,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;
@@ -4665,201 +4779,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";
@@ -4902,32 +4927,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%;
@@ -4942,15 +4941,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;
@@ -4966,13 +4956,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);
@@ -4980,66 +4999,113 @@ 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);
-  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;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 1rem;
 `;
-var StatusBadge = styled25__default.default.div`
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
+var PriceGroup = styled25__default.default.div`
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background-color: ${({ $isLive }) => $isLive ? "rgba(20, 20, 20, 0.85)" : "rgba(240, 185, 11, 0.9)"};
-  color: ${({ $isLive }) => $isLive ? "#f0b90b" : "#000"};
-  padding: 0.5rem 1rem;
-  border-radius: 6px;
+  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;
-  font-size: 0.875rem;
-  z-index: 10;
-  border: ${({ $isLive }) => $isLive ? "1px solid rgba(240, 185, 11, 0.5)" : "none"};
-  backdrop-filter: blur(8px);
+  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 PulsingDot = styled25__default.default.span`
-  display: inline-block;
-  width: 8px;
+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;
+  top: 1rem;
+  left: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: ${({ $isLive }) => $isLive ? "rgba(20, 20, 20, 0.85)" : "rgba(240, 185, 11, 0.9)"};
+  color: ${({ $isLive }) => $isLive ? "#f0b90b" : "#000"};
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  z-index: 10;
+  border: ${({ $isLive }) => $isLive ? "1px solid rgba(240, 185, 11, 0.5)" : "none"};
+  backdrop-filter: blur(8px);
+`;
+var PulsingDot = styled25__default.default.span`
+  display: inline-block;
+  width: 8px;
   height: 8px;
   background-color: #f0b90b;
   border-radius: 50%;
@@ -5095,13 +5161,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;
@@ -5479,6 +5577,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,
@@ -5550,6 +5659,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,
       {
@@ -5635,8 +5789,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`
@@ -5644,6 +5809,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;
@@ -5977,6 +6146,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);
@@ -6102,191 +6416,6 @@ var PropertySubheader = React5__namespace.forwardRef(
   }
 );
 PropertySubheader.displayName = "PropertySubheader";
-var slideIn = styled25.keyframes`
-  from { transform: translateX(110%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-`;
-var slideOut = styled25.keyframes`
-  from { transform: translateX(0);    opacity: 1; }
-  to   { transform: translateX(110%); opacity: 0; }
-`;
-var progressShrink = styled25.keyframes`
-  from { width: 100%; }
-  to   { width: 0%; }
-`;
-var VARIANT_COLORS = {
-  success: { accent: "#0ecb81", icon: "\u2713" },
-  error: { accent: "#f6465d", icon: "\u2715" },
-  info: { accent: "#E6C656", icon: "\u2139" },
-  pending: { accent: "#7EB3E6", icon: "\u25CC" }
-};
-var Wrapper = styled25__default.default.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 340px;
-  background: #0d0f1a;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 10px;
-  overflow: hidden;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
-  animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
-  pointer-events: all;
-`;
-var Body = styled25__default.default.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 14px 16px 12px;
-`;
-var IconDot = styled25__default.default.div`
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: ${({ $color }) => $color}1a;
-  border: 1px solid ${({ $color }) => $color}55;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: ${({ $color }) => $color};
-  margin-top: 1px;
-`;
-var Content = styled25__default.default.div`
-  flex: 1;
-  min-width: 0;
-`;
-var Title = styled25__default.default.p`
-  margin: 0 0 2px;
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #fff;
-  letter-spacing: 0.01em;
-`;
-var Amount = styled25__default.default.p`
-  margin: 0 0 6px;
-  font-size: 1.05rem;
-  font-weight: 700;
-  color: #E6C656;
-  letter-spacing: -0.01em;
-`;
-var TxRow = styled25__default.default.a`
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
-  font-size: 0.68rem;
-  color: rgba(255, 255, 255, 0.4);
-  text-decoration: none;
-  transition: color 0.15s;
-  &:hover {
-    color: #7EB3E6;
-  }
-`;
-var TxArrow = styled25__default.default.span`
-  font-size: 0.6rem;
-  opacity: 0.6;
-`;
-var CloseBtn = styled25__default.default.button`
-  flex-shrink: 0;
-  background: none;
-  border: none;
-  padding: 2px 4px;
-  cursor: pointer;
-  color: rgba(255, 255, 255, 0.25);
-  font-size: 0.9rem;
-  line-height: 1;
-  transition: color 0.15s;
-  &:hover { color: rgba(255, 255, 255, 0.7); }
-`;
-var ProgressBar = styled25__default.default.div`
-  height: 2px;
-  background: rgba(255, 255, 255, 0.06);
-  position: relative;
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    background: ${({ $color }) => $color};
-    animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
-  }
-`;
-var Container = styled25__default.default.div`
-  position: fixed;
-  bottom: 24px;
-  right: 24px;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 10px;
-  pointer-events: none;
-`;
-var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
-function truncateHash(hash) {
-  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
-}
-function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = React5.useState(false);
-  const timerRef = React5.useRef(null);
-  const dismiss = React5.useCallback(() => {
-    setExiting(true);
-    setTimeout(() => onDismiss(toast.id), 280);
-  }, [onDismiss, toast.id]);
-  React5.useEffect(() => {
-    const duration2 = toast.duration ?? 6e3;
-    if (duration2 > 0) {
-      timerRef.current = setTimeout(dismiss, duration2);
-    }
-    return () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [dismiss, toast.duration]);
-  const { accent, icon } = VARIANT_COLORS[toast.variant];
-  const duration = toast.duration ?? 6e3;
-  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
-  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Title, { children: toast.title }),
-        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
-        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
-          truncateHash(toast.txHash),
-          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
-    ] }),
-    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
-  ] });
-}
-var ToastContext = React5.createContext(null);
-function ToastProvider({ children }) {
-  const [toasts, setToasts] = React5.useState([]);
-  const addToast = React5.useCallback((data) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-    setToasts((prev) => [...prev, { ...data, id }]);
-    return id;
-  }, []);
-  const dismiss = React5.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
-    children,
-    /* @__PURE__ */ jsxRuntime.jsx(Container, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
-  ] });
-}
-function useToast() {
-  const ctx = React5.useContext(ToastContext);
-  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
-  return ctx;
-}
 var DEFAULT_LOGO_SRC = Loaf_logo_Banner_default;
 var DEFAULT_LOGO_ALT = "Loaf";
 var OTP_INPUT_LENGTH = 6;
@@ -6314,7 +6443,6 @@ var LoginPopup = ({
   const [error, setError] = React5.useState("");
   const [loading, setLoading] = React5.useState(false);
   const [isSignUp, setIsSignUp] = React5.useState(false);
-  const { toast } = useToast();
   const [fundingAmount] = React5.useState("");
   const [kycLoading, setKycLoading] = React5.useState(false);
   const [showKycWidget, setShowKycWidget] = React5.useState(false);
@@ -6328,11 +6456,6 @@ var LoginPopup = ({
       setView(initialView);
     }
   }, [initialView]);
-  React5.useEffect(() => {
-    if (view === "kyc" && renderKycWidget) {
-      setShowKycWidget(true);
-    }
-  }, [view, renderKycWidget]);
   React5.useEffect(() => {
     if (!transakWidgetUrl) return;
     const handleTransakMessage = (event) => {
@@ -6535,19 +6658,10 @@ var LoginPopup = ({
   };
   const handleKycWidgetResult = (result) => {
     setShowKycWidget(false);
-    onClose();
     if (result.passed) {
-      toast({
-        variant: "success",
-        title: "KYC submitted \u2014 pending review",
-        amount: "Your documents are under review. Please check back in a few minutes."
-      });
+      setView("kyc-success");
     } else {
-      toast({
-        variant: "error",
-        title: "Verification unsuccessful",
-        amount: "Your identity check didn't pass. Please contact support if you believe this is an error."
-      });
+      setView("kyc-failed");
     }
   };
   const handleKycWidgetClose = () => {
@@ -6638,7 +6752,7 @@ var LoginPopup = ({
   if (view === "main") {
     return /* @__PURE__ */ jsxRuntime.jsx(Overlay2, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(PopupContainer, { onClick: (event) => event.stopPropagation(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { onClick: onClose, "aria-label": "Close login popup", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         "Welcome to Loaf"
       ] }),
@@ -6699,7 +6813,7 @@ var LoginPopup = ({
         /* @__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: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
         "Back"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         isSignUp ? "Sign up with Email" : "Sign in with Email"
       ] }),
@@ -6738,7 +6852,7 @@ var LoginPopup = ({
         /* @__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: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) }),
         "Back"
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Title2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(LogoContainer3, { children: /* @__PURE__ */ jsxRuntime.jsx(LogoImage, { src: logoSrc, alt: logoAlt }) }),
         "Enter Verification Code"
       ] }),
@@ -6854,7 +6968,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(),
@@ -6924,6 +7038,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);
@@ -6933,8 +7057,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%;
@@ -6948,9 +7084,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%;
@@ -7009,7 +7157,7 @@ var CloseButton = styled25__default.default.button`
     color: var(--color-accent, #e6c656);
   }
 `;
-var Title2 = styled25__default.default.h2`
+var Title = styled25__default.default.h2`
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--color-text, #eaecef);
@@ -7278,9 +7426,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%;
@@ -7569,7 +7729,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,
@@ -7882,7 +8042,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`
@@ -7976,7 +8136,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);
@@ -8116,7 +8276,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;
@@ -8647,7 +8807,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 })
           ] }) }) }),
@@ -8709,7 +8869,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 })
             ] }) }) }),
@@ -8718,7 +8878,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)) }) })
@@ -8861,7 +9021,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 }) })
@@ -9105,7 +9265,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;
@@ -9515,7 +9675,9 @@ function AssetSelectorBar({
   metrics: metricsProp,
   currentTokenName,
   selectorItems,
-  onSelect
+  onSelect,
+  trailing,
+  imageUrl
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -9524,6 +9686,7 @@ function AssetSelectorBar({
     ...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
   ];
   return /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { children: [
+    imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
     /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
       propertyName,
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9544,7 +9707,7 @@ function AssetSelectorBar({
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: m.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, children: m.value })
+          /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, $secondary: !!m.secondary, children: m.value })
         ] }),
         m.change != null && /* @__PURE__ */ jsxRuntime.jsxs(MetricChange, { $positive: m.change >= 0, children: [
           m.change >= 0 ? "\u2191" : "\u2193",
@@ -9553,11 +9716,12 @@ 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();
       const statusLabel = status === "PENDING" ? "Coming Soon" : status === "CLOSED" ? "Closed" : status === "CANCELLED" ? "Cancelled" : null;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         IPOOption,
         {
           onClick: () => {
@@ -9568,16 +9732,19 @@ function AssetSelectorBar({
           },
           $selected: isCurrent,
           style: { cursor: isCurrent ? "default" : "pointer" },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
-              item.streetAddress,
-              item.ticker ? ` (${item.ticker})` : ""
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
-              item.suburb,
-              statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
+          children: /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionInner, { children: [
+            item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: item.streetAddress }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
+                item.streetAddress,
+                item.ticker ? ` (${item.ticker})` : ""
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
+                item.suburb,
+                statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
+              ] })
             ] })
-          ]
+          ] })
         },
         item.tokenName
       );
@@ -9612,6 +9779,20 @@ var IPOAssetSelector = styled25__default.default.div`
     padding: 0.6rem 0.75rem;
   }
 `;
+var AssetThumbnail = styled25__default.default.img`
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+
+  @media (max-width: 768px) {
+    width: 32px;
+    height: 32px;
+    border-radius: 6px;
+  }
+`;
 var AssetSelectorDropdown = styled25__default.default.div`
   display: flex;
   align-items: center;
@@ -9679,16 +9860,16 @@ var MetricLabel2 = styled25__default.default.span`
   }
 `;
 var MetricValue = styled25__default.default.span`
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: ${(p) => p.$accent ? "#D4AF37" : "#fff"};
+  font-size: ${(p) => p.$secondary ? "0.95rem" : "1.25rem"};
+  font-weight: ${(p) => p.$secondary ? "600" : "700"};
+  color: ${(p) => p.$accent ? "#D4AF37" : p.$secondary ? "rgba(255,255,255,0.7)" : "#fff"};
 
   @media (max-width: 768px) {
-    font-size: 1.05rem;
+    font-size: ${(p) => p.$secondary ? "0.85rem" : "1.05rem"};
   }
 
   @media (max-width: 480px) {
-    font-size: 0.95rem;
+    font-size: ${(p) => p.$secondary ? "0.8rem" : "0.95rem"};
   }
 `;
 var MetricChange = styled25__default.default.span`
@@ -9750,6 +9931,19 @@ var IPOOption = styled25__default.default.div`
   &:hover { background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, transparent 100%); }
   ${(p) => p.$selected && `background: linear-gradient(90deg, rgba(56,97,251,0.15) 0%, transparent 100%);`}
 `;
+var IPOOptionInner = styled25__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+var IPOOptionThumb = styled25__default.default.img`
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+`;
 var IPOOptionName = styled25__default.default.div`
   font-weight: 600;
   font-size: 1rem;
@@ -9785,6 +9979,7 @@ function OfferingProgressCard({
   raisedAmount,
   targetAmount,
   isPrivateClient = false,
+  variant = "default",
   style,
   className
 }) {
@@ -9816,7 +10011,109 @@ function OfferingProgressCard({
     const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { style, className, children: [
+  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: [
         /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
@@ -9884,7 +10181,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" })
           ] })
@@ -9917,7 +10214,7 @@ function OfferingProgressCard({
     ] })
   ] });
 }
-var Container2 = styled25__default.default.div`
+var Container = styled25__default.default.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;
@@ -10117,6 +10414,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`;
@@ -10406,53 +10756,238 @@ var PurchaseItem = styled25__default.default.div`
     padding: 0.4rem 0.6rem;
   }
 `;
-var PurchaseInfo = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
+var PurchaseInfo = styled25__default.default.div`
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+`;
+var PurchaseName = styled25__default.default.div`
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var PurchaseTime = styled25__default.default.div`
+  font-size: 0.7rem;
+  color: var(--color-text-secondary);
+  margin-top: 0.125rem;
+`;
+var PurchaseAmount = styled25__default.default.div`
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #fff;
+  white-space: nowrap;
+  margin-left: 1rem;
+`;
+var LiveIndicatorDot = styled25__default.default.span`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background-color: ${(p) => p.$active ? "#0ecb81" : "#848e9c"};
+  border-radius: 50%;
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: ${(p) => p.$active ? "#0ecb81" : "transparent"};
+    animation: ${(p) => p.$active ? "liveGlow 2s infinite" : "none"};
+  }
+  @keyframes liveGlow {
+    0% { box-shadow: 0 0 0 0 rgba(14,203,129,0.4); }
+    70% { box-shadow: 0 0 0 10px rgba(14,203,129,0); }
+    100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
+  }
+`;
+var slideIn = styled25.keyframes`
+  from { transform: translateX(110%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+`;
+var slideOut = styled25.keyframes`
+  from { transform: translateX(0);    opacity: 1; }
+  to   { transform: translateX(110%); opacity: 0; }
+`;
+var progressShrink = styled25.keyframes`
+  from { width: 100%; }
+  to   { width: 0%; }
+`;
+var VARIANT_COLORS = {
+  success: { accent: "#0ecb81", icon: "\u2713" },
+  error: { accent: "#f6465d", icon: "\u2715" },
+  info: { accent: "#E6C656", icon: "\u2139" },
+  pending: { accent: "#7EB3E6", icon: "\u25CC" }
+};
+var Wrapper = styled25__default.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 340px;
+  background: #0d0f1a;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
+  animation: ${({ $exiting }) => $exiting ? styled25.css`${slideOut} 0.28s cubic-bezier(0.4,0,1,1) forwards` : styled25.css`${slideIn} 0.32s cubic-bezier(0,0,0.2,1) forwards`};
+  pointer-events: all;
+`;
+var Body = styled25__default.default.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px 12px;
+`;
+var IconDot = styled25__default.default.div`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color}1a;
+  border: 1px solid ${({ $color }) => $color}55;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: ${({ $color }) => $color};
+  margin-top: 1px;
+`;
+var Content = styled25__default.default.div`
+  flex: 1;
   min-width: 0;
 `;
-var PurchaseName = styled25__default.default.div`
-  font-weight: 500;
-  font-size: 0.875rem;
+var Title2 = styled25__default.default.p`
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 600;
   color: #fff;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  letter-spacing: 0.01em;
 `;
-var PurchaseTime = styled25__default.default.div`
-  font-size: 0.7rem;
-  color: var(--color-text-secondary);
-  margin-top: 0.125rem;
+var Amount = styled25__default.default.p`
+  margin: 0 0 6px;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #E6C656;
+  letter-spacing: -0.01em;
 `;
-var PurchaseAmount = styled25__default.default.div`
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: #fff;
-  white-space: nowrap;
-  margin-left: 1rem;
+var TxRow = styled25__default.default.a`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: 'IBM Plex Mono', 'Space Mono', monospace;
+  font-size: 0.68rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-decoration: none;
+  transition: color 0.15s;
+  &:hover {
+    color: #7EB3E6;
+  }
 `;
-var LiveIndicatorDot = styled25__default.default.span`
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  background-color: ${(p) => p.$active ? "#0ecb81" : "#848e9c"};
-  border-radius: 50%;
+var TxArrow = styled25__default.default.span`
+  font-size: 0.6rem;
+  opacity: 0.6;
+`;
+var CloseBtn = styled25__default.default.button`
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  cursor: pointer;
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.9rem;
+  line-height: 1;
+  transition: color 0.15s;
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;
+var ProgressBar = styled25__default.default.div`
+  height: 2px;
+  background: rgba(255, 255, 255, 0.06);
   position: relative;
-  &:after {
+  &::after {
     content: '';
     position: absolute;
-    width: 100%;
+    left: 0;
+    top: 0;
     height: 100%;
-    border-radius: 50%;
-    background-color: ${(p) => p.$active ? "#0ecb81" : "transparent"};
-    animation: ${(p) => p.$active ? "liveGlow 2s infinite" : "none"};
-  }
-  @keyframes liveGlow {
-    0% { box-shadow: 0 0 0 0 rgba(14,203,129,0.4); }
-    70% { box-shadow: 0 0 0 10px rgba(14,203,129,0); }
-    100% { box-shadow: 0 0 0 0 rgba(14,203,129,0); }
+    background: ${({ $color }) => $color};
+    animation: ${styled25.css`${progressShrink} ${({ $duration }) => $duration}ms linear forwards`};
   }
 `;
+var Container2 = styled25__default.default.div`
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  pointer-events: none;
+`;
+var DEFAULT_EXPLORER = "https://sepolia.basescan.org/tx/";
+function truncateHash(hash) {
+  return `${hash.slice(0, 6)}\u2026${hash.slice(-4)}`;
+}
+function ToastItem({ toast, onDismiss }) {
+  const [exiting, setExiting] = React5.useState(false);
+  const timerRef = React5.useRef(null);
+  const dismiss = React5.useCallback(() => {
+    setExiting(true);
+    setTimeout(() => onDismiss(toast.id), 280);
+  }, [onDismiss, toast.id]);
+  React5.useEffect(() => {
+    const duration2 = toast.duration ?? 6e3;
+    if (duration2 > 0) {
+      timerRef.current = setTimeout(dismiss, duration2);
+    }
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [dismiss, toast.duration]);
+  const { accent, icon } = VARIANT_COLORS[toast.variant];
+  const duration = toast.duration ?? 6e3;
+  const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
+  const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: toast.title }),
+        toast.amount && /* @__PURE__ */ jsxRuntime.jsx(Amount, { children: toast.amount }),
+        toast.txHash && txUrl && /* @__PURE__ */ jsxRuntime.jsxs(TxRow, { href: txUrl, target: "_blank", rel: "noopener noreferrer", children: [
+          truncateHash(toast.txHash),
+          /* @__PURE__ */ jsxRuntime.jsx(TxArrow, { children: "\u2197" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(CloseBtn, { type: "button", onClick: dismiss, "aria-label": "Dismiss", children: "\u2715" })
+    ] }),
+    duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
+  ] });
+}
+var ToastContext = React5.createContext(null);
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = React5.useState([]);
+  const addToast = React5.useCallback((data) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+    setToasts((prev) => [...prev, { ...data, id }]);
+    return id;
+  }, []);
+  const dismiss = React5.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Container2, { children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast: t, onDismiss: dismiss }, t.id)) })
+  ] });
+}
+function useToast() {
+  const ctx = React5.useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within a ToastProvider");
+  return ctx;
+}
 function OrderPanel({
   statusLabel,
   statusColor,
@@ -11352,6 +11887,7 @@ function PortfolioActivityPanel({
   positions = [],
   showPositionsTab = false,
   onPositionClick,
+  onClosePosition,
   offeringOrders = [],
   openOrders = [],
   orderHistory = [],
@@ -11449,50 +11985,52 @@ function PortfolioActivityPanel({
     ] }),
     activeTab === "positions" && showPositionsTab && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       positions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No positions yet. Subscribe to an offering or buy on the secondary market." }),
-      positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: pageSlice(positions).map((pos) => {
-        const currentValue = pos.quantity * pos.marketPrice;
-        const costBasis = pos.quantity * pos.averageEntryPrice;
-        const pnl = pos.propertyPnl ?? currentValue - costBasis;
-        const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
-        const totalPortfolioValue = positions.reduce((sum, p) => sum + p.quantity * p.marketPrice, 0);
-        const portfolioPercent = totalPortfolioValue > 0 ? currentValue / totalPortfolioValue * 100 : 0;
-        const isPositive = pnl >= 0;
-        return /* @__PURE__ */ jsxRuntime.jsxs(HoldingsItem, { onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsLeft, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(HoldingsProperty, { children: pos.tokenName }),
-            /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPortfolio, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                portfolioPercent.toFixed(1),
-                "%"
+      positions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PositionsHeader, { $hasClose: !!onClosePosition, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { children: "Asset" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Size" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Value" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Entry Price" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Mark Price" }),
+          /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "PNL (%)" }),
+          onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsHeaderCell, { $align: "right", children: "Close" })
+        ] }),
+        pageSlice(positions).map((pos) => {
+          const currentValue = pos.quantity * pos.marketPrice;
+          const costBasis = pos.quantity * pos.averageEntryPrice;
+          const pnl = pos.propertyPnl ?? currentValue - costBasis;
+          const pnlPercent = pos.propertyPnlPercent ?? pos.percentChange ?? 0;
+          const isPositive = pnl >= 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(PositionsRow, { $hasClose: !!onClosePosition, onClick: () => onPositionClick?.(pos.tokenName, pos.isIpoAllocation), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { children: /* @__PURE__ */ jsxRuntime.jsx(HoldingsProperty, { children: pos.tokenName }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatNumber2(pos.quantity) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(currentValue) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.7)", fontSize: "0.8rem" }, children: formatCurrency5(pos.averageEntryPrice) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#fff", fontSize: "0.8rem" }, children: formatCurrency5(pos.marketPrice) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PositionsCell, { $align: "right", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(PnLAmount, { $positive: isPositive, children: [
+                isPositive ? "+" : "-",
+                formatCurrency5(Math.abs(pnl))
               ] }),
-              " of portfolio"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsQuantity, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-              pos.quantity.toFixed(2),
-              " ",
-              pos.tokenName
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(HoldingsAvgEntry, { children: [
-              "Avg ",
-              formatCurrency5(pos.averageEntryPrice)
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HoldingsPnL, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(PnLAmount, { $positive: isPositive, children: [
-              isPositive ? "+" : "-",
-              "$",
-              Math.abs(pnl).toFixed(2)
+              /* @__PURE__ */ jsxRuntime.jsxs(PnLPercentage, { $positive: isPositive, children: [
+                isPositive ? "+" : "",
+                pnlPercent.toFixed(1),
+                "%"
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(PnLPercentage, { $positive: isPositive, children: [
-              isPositive ? "+" : "",
-              pnlPercent.toFixed(1),
-              "%"
-            ] })
-          ] })
-        ] }, pos.tokenName);
-      }) })
+            onClosePosition && /* @__PURE__ */ jsxRuntime.jsx(PositionsCell, { $align: "right", children: /* @__PURE__ */ jsxRuntime.jsxs(CloseActions, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(CloseBtn2, { onClick: (e) => {
+                e.stopPropagation();
+                onClosePosition(pos.tokenName, "limit", pos.quantity, pos.marketPrice);
+              }, children: "Limit" }),
+              /* @__PURE__ */ jsxRuntime.jsx(CloseBtn2, { onClick: (e) => {
+                e.stopPropagation();
+                onClosePosition(pos.tokenName, "market", pos.quantity, pos.marketPrice);
+              }, children: "Market" })
+            ] }) })
+          ] }, pos.tokenName);
+        })
+      ] })
     ] }),
     activeTab === "subscriptions" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       offeringOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "IPO allocations will appear here once you subscribe." }),
@@ -11609,7 +12147,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))
     ] }),
@@ -11787,8 +12332,8 @@ var ActivityPrimary = styled25__default.default.span`
   font-weight: 500;
 `;
 var ActivitySecondary = styled25__default.default.span`
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.5);
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.35);
 `;
 var ActivityTag = styled25__default.default.span`
   font-size: 0.58rem;
@@ -11867,53 +12412,42 @@ var PaginationLabel = styled25__default.default.span`
   font-size: 0.8rem;
   color: rgba(255, 255, 255, 0.4);
 `;
-var HoldingsItem = styled25__default.default.div`
+var PositionsHeader = styled25__default.default.div`
+  display: grid;
+  grid-template-columns: ${(p) => p.$hasClose ? "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr auto" : "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr"};
+  gap: 0 0.5rem;
+  padding: 0.4rem 0.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+`;
+var PositionsHeaderCell = styled25__default.default.div`
+  font-size: 0.68rem;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: ${(p) => p.$align || "left"};
+  white-space: nowrap;
+`;
+var PositionsRow = styled25__default.default.div`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: ${(p) => p.$hasClose ? "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr auto" : "1.2fr 0.8fr 1fr 1fr 1fr 1.2fr"};
   align-items: center;
-  padding: 0.5rem 0;
-  min-height: 50px;
+  gap: 0 0.5rem;
+  padding: 0.5rem 0.5rem;
   cursor: pointer;
-  &:hover { background: rgba(255, 255, 255, 0.015); }
+  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  &:last-child { border-bottom: none; }
+  &:hover { background: rgba(255, 255, 255, 0.02); }
 `;
-var HoldingsLeft = styled25__default.default.div`
+var PositionsCell = styled25__default.default.div`
   display: flex;
   flex-direction: column;
-  gap: 0.15rem;
+  align-items: ${(p) => p.$align === "right" ? "flex-end" : "flex-start"};
+  gap: 0.1rem;
 `;
 var HoldingsProperty = styled25__default.default.div`
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 600;
   color: #fff;
 `;
-var HoldingsPortfolio = styled25__default.default.div`
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.5);
-  span {
-    color: var(--color-accent, #E6C87E);
-    font-weight: 500;
-  }
-`;
-var HoldingsQuantity = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.15rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: #fff;
-`;
-var HoldingsAvgEntry = styled25__default.default.div`
-  font-size: 0.7rem;
-  color: var(--color-accent, #E6C87E);
-  font-weight: 500;
-`;
-var HoldingsPnL = styled25__default.default.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 0.15rem;
-`;
 var PnLAmount = styled25__default.default.div`
   font-size: 0.85rem;
   font-weight: 600;
@@ -12017,6 +12551,28 @@ var CancelConfirmProceed = styled25__default.default.button`
     cursor: not-allowed;
   }
 `;
+var CloseActions = styled25__default.default.div`
+  display: flex;
+  gap: 0.35rem;
+  align-items: center;
+`;
+var CloseBtn2 = styled25__default.default.button`
+  background: transparent;
+  border: 1px solid rgba(246, 70, 93, 0.25);
+  border-radius: 4px;
+  padding: 0.15rem 0.5rem;
+  font-size: 0.62rem;
+  font-weight: 600;
+  color: #f6465d;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background: rgba(246, 70, 93, 0.1);
+    border-color: rgba(246, 70, 93, 0.5);
+  }
+`;
 function NewsOrdersSection({ newsItems, newsConnectionStatus, activityData }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Row2, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -13681,7 +14237,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: [
@@ -13692,11 +14248,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 }),
                   ")"
                 ] })
               ] })
@@ -13713,7 +14269,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 })
             ] }),
@@ -13721,36 +14277,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}`)),
@@ -13869,7 +14425,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: [
@@ -13943,14 +14507,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`;
@@ -14074,6 +14630,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;
@@ -14125,10 +14687,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;
@@ -14136,7 +14697,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`
@@ -14203,31 +14763,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%;
@@ -14640,7 +15184,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;
@@ -14976,7 +15520,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)) })
       ]
     }
   );