@loafmarkets/ui 0.1.50 → 0.1.52

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React9 from 'react';
-import React9__default, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
+import * as React5 from 'react';
+import React5__default, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -50,7 +50,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React9.forwardRef(
+var Button = React5.forwardRef(
   ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const coercedRadius = radius ?? (variant === "onboarding" || variant === "onboardingOutline" ? "square" : void 0);
@@ -89,11 +89,11 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = React9.forwardRef(
+var Badge = React5.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
 );
 Badge.displayName = "Badge";
-var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -105,11 +105,11 @@ var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React9.forwardRef(
+var CardHeader = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React9.forwardRef(
+var CardTitle = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h3",
     {
@@ -120,15 +120,15 @@ var CardTitle = React9.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React9.forwardRef(
+var CardDescription = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React9.forwardRef(
+var CardContent = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React9.forwardRef(
+var CardFooter = React5.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -146,7 +146,7 @@ var defaultFormatSignedCurrency = (value) => {
   const sign = value >= 0 ? "+" : "-";
   return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
 };
-var PortfolioSummary = React9.forwardRef(
+var PortfolioSummary = React5.forwardRef(
   ({
     availableCash,
     portfolioValue,
@@ -296,23 +296,23 @@ function HousePositionSlider({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React9.useState("none");
-  const [buyTrackingMode, setBuyTrackingMode] = React9.useState("dollars");
-  const [deltaDollars, setDeltaDollars] = React9.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React9.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React9.useState(0);
-  const [_isDragging, setIsDragging] = React9.useState(false);
-  const [visualTargetPct, setVisualTargetPct] = React9.useState(null);
-  const [orderType, setOrderType] = React9.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React9.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React9.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React9.useState(false);
-  const [ownershipInput, setOwnershipInput] = React9.useState("");
-  const [tokenAmountInput, setTokenAmountInput] = React9.useState("");
-  const houseRef = React9.useRef(null);
+  const [orderMode, setOrderMode] = React5.useState("none");
+  const [buyTrackingMode, setBuyTrackingMode] = React5.useState("dollars");
+  const [deltaDollars, setDeltaDollars] = React5.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React5.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React5.useState(0);
+  const [_isDragging, setIsDragging] = React5.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = React5.useState(null);
+  const [orderType, setOrderType] = React5.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React5.useState(false);
+  const [ownershipInput, setOwnershipInput] = React5.useState("");
+  const [tokenAmountInput, setTokenAmountInput] = React5.useState("");
+  const houseRef = React5.useRef(null);
   const asks = orderbook?.asks ?? [];
   const bids = orderbook?.bids ?? [];
-  React9.useEffect(() => {
+  React5.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -387,7 +387,7 @@ function HousePositionSlider({
   const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
   const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
-  const resetOrder = React9.useCallback(() => {
+  const resetOrder = React5.useCallback(() => {
     setOrderMode("none");
     setBuyTrackingMode("dollars");
     setDeltaDollars(0);
@@ -395,7 +395,7 @@ function HousePositionSlider({
     setDeltaTokensSell(0);
     setVisualTargetPct(null);
   }, []);
-  const updateOrderFromTargetValue = React9.useCallback(
+  const updateOrderFromTargetValue = React5.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0) {
@@ -419,7 +419,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
   );
-  const updateOrderFromOwnership = React9.useCallback(
+  const updateOrderFromOwnership = React5.useCallback(
     (newOwnershipPercent) => {
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
@@ -428,7 +428,7 @@ function HousePositionSlider({
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
-  const updateOrderFromTokenAmount = React9.useCallback(
+  const updateOrderFromTokenAmount = React5.useCallback(
     (tokenAmountSigned) => {
       if (tokenAmountSigned > 0) {
         const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
@@ -451,7 +451,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
   );
-  const updateOrderFromSlider = React9.useCallback(
+  const updateOrderFromSlider = React5.useCallback(
     (pct) => {
       const normalized = (pct - 50) / 50;
       const magnitude = Math.min(Math.abs(normalized), 1);
@@ -495,7 +495,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
-  const handleDragAtClientY = React9.useCallback(
+  const handleDragAtClientY = React5.useCallback(
     (clientY) => {
       if (!houseRef.current) return;
       const rect = houseRef.current.getBoundingClientRect();
@@ -1011,18 +1011,18 @@ function HousePositionSliderMobile({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React9.useState("none");
-  const [deltaDollars, setDeltaDollars] = React9.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React9.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React9.useState(0);
-  const [buyTrackingMode, setBuyTrackingMode] = React9.useState("dollars");
-  const [orderType, setOrderType] = React9.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React9.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React9.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React9.useState(false);
-  const [tokenAmountInput, setTokenAmountInput] = React9.useState("");
-  const houseRef = React9.useRef(null);
-  React9.useEffect(() => {
+  const [orderMode, setOrderMode] = React5.useState("none");
+  const [deltaDollars, setDeltaDollars] = React5.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React5.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React5.useState(0);
+  const [buyTrackingMode, setBuyTrackingMode] = React5.useState("dollars");
+  const [orderType, setOrderType] = React5.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React5.useState(false);
+  const [tokenAmountInput, setTokenAmountInput] = React5.useState("");
+  const houseRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -1064,7 +1064,7 @@ function HousePositionSliderMobile({
   const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
   const targetOwnership = totalTokens > 0 ? targetTokens / totalTokens * 100 : 0;
   const estFeeTokens = effectivePrice > 0 ? Math.abs(deltaValue) * 5e-3 / effectivePrice : 0;
-  const updateOrderFromTargetValue = React9.useCallback(
+  const updateOrderFromTargetValue = React5.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0.01) {
@@ -1092,7 +1092,7 @@ function HousePositionSliderMobile({
     },
     [holdingsValue, availableCash, effectivePrice, tokensHeld]
   );
-  const updateOrderFromTokenAmount = React9.useCallback(
+  const updateOrderFromTokenAmount = React5.useCallback(
     (tokenAmount) => {
       if (tokenAmount > 0) {
         const maxTokens = effectivePrice > 0 ? availableCash / effectivePrice : 0;
@@ -1119,14 +1119,14 @@ function HousePositionSliderMobile({
     },
     [effectivePrice, availableCash, tokensHeld]
   );
-  const handleMarkerClick = React9.useCallback(
+  const handleMarkerClick = React5.useCallback(
     (pct) => {
       const newTargetValue = pct / 100 * totalCapacity;
       updateOrderFromTargetValue(newTargetValue);
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onMouseDown = React9.useCallback(
+  const onMouseDown = React5.useCallback(
     (e) => {
       e.preventDefault();
       const move = (ev) => {
@@ -1146,7 +1146,7 @@ function HousePositionSliderMobile({
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onTouchStart = React9.useCallback(
+  const onTouchStart = React5.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1704,7 +1704,7 @@ var LiquidityText = styled24.span`
     letter-spacing: 0.1px;
   }
 `;
-var LoafLiquidityBadge = React9.forwardRef(
+var LoafLiquidityBadge = React5.forwardRef(
   ({ className, isGlowing, onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       LogoContainer,
@@ -1733,7 +1733,7 @@ var LoafLiquidityBadge = React9.forwardRef(
 );
 LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
 var toSize = (v, fallback) => v == null ? fallback : typeof v === "number" ? `${v}px` : v;
-var Skeleton = React9.forwardRef(
+var Skeleton = React5.forwardRef(
   ({ width, height, radius, className, style, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1758,8 +1758,8 @@ var Skeleton = React9.forwardRef(
 );
 Skeleton.displayName = "Skeleton";
 function useViewportCompact(breakpoint) {
-  const [isCompact, setIsCompact] = React9.useState(false);
-  React9.useEffect(() => {
+  const [isCompact, setIsCompact] = React5.useState(false);
+  React5.useEffect(() => {
     if (typeof window === "undefined") return;
     const check = () => setIsCompact(window.innerWidth <= breakpoint);
     check();
@@ -1778,8 +1778,8 @@ function getTradeKey(trade, fallbackIndex) {
   return `idx-${fallbackIndex}-${trade.type}-${trade.price}-${trade.amount}`;
 }
 function useAmountChangeFlash(ref, amount, side) {
-  const prevAmountRef = React9.useRef(amount);
-  React9.useEffect(() => {
+  const prevAmountRef = React5.useRef(amount);
+  React5.useEffect(() => {
     const prev = prevAmountRef.current;
     const node = ref.current;
     if (prev !== amount && node && typeof node.animate === "function") {
@@ -1793,8 +1793,8 @@ function useAmountChangeFlash(ref, amount, side) {
   }, [amount, ref, side]);
 }
 function useMidPriceFlash(ref, midPrice, restBgColor) {
-  const prevMidRef = React9.useRef(midPrice);
-  React9.useEffect(() => {
+  const prevMidRef = React5.useRef(midPrice);
+  React5.useEffect(() => {
     const prev = prevMidRef.current;
     const node = ref.current;
     if (prev !== midPrice && prev > 0 && midPrice > 0 && node && typeof node.animate === "function") {
@@ -1815,9 +1815,9 @@ function TradeRow({
   seenTradeKeysRef,
   compact
 }) {
-  const rowRef = React9.useRef(null);
+  const rowRef = React5.useRef(null);
   const { type } = trade;
-  React9.useEffect(() => {
+  React5.useEffect(() => {
     if (seenTradeKeysRef.current.has(tradeKey)) return;
     seenTradeKeysRef.current.add(tradeKey);
     const node = rowRef.current;
@@ -1879,7 +1879,7 @@ function DepthRow({
   hasUserOrder
 }) {
   const isAsk = side === "ask";
-  const rowRef = React9.useRef(null);
+  const rowRef = React5.useRef(null);
   useAmountChangeFlash(rowRef, amount, side);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1926,7 +1926,7 @@ var DEPTH_ROW_HEIGHT_PX = 26;
 var COMPACT_ROWS_VISIBLE = 5;
 var COMPACT_ROW_HEIGHT_PX = 30;
 var COMPACT_BREAKPOINT_PX = 1024;
-var Orderbook = React9.forwardRef(
+var Orderbook = React5.forwardRef(
   ({
     asks,
     bids,
@@ -1948,10 +1948,10 @@ var Orderbook = React9.forwardRef(
     ...props
   }, ref) => {
     const resolvedRightHeader = rightHeader ?? /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem]", onClick: onLoafLiquidityClick });
-    const [tab, setTab] = React9.useState(defaultTab);
-    const [tradeFilter, setTradeFilter] = React9.useState("all");
+    const [tab, setTab] = React5.useState(defaultTab);
+    const [tradeFilter, setTradeFilter] = React5.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
-    const { userAskPrices, userBidPrices } = React9.useMemo(() => {
+    const { userAskPrices, userBidPrices } = React5.useMemo(() => {
       const ask = /* @__PURE__ */ new Set();
       const bid = /* @__PURE__ */ new Set();
       if (!userOrderPrices) return { userAskPrices: ask, userBidPrices: bid };
@@ -1961,15 +1961,15 @@ var Orderbook = React9.forwardRef(
       }
       return { userAskPrices: ask, userBidPrices: bid };
     }, [userOrderPrices]);
-    const seenTradeKeysRef = React9.useRef(/* @__PURE__ */ new Set());
-    const initializedRef = React9.useRef(false);
+    const seenTradeKeysRef = React5.useRef(/* @__PURE__ */ new Set());
+    const initializedRef = React5.useRef(false);
     if (!initializedRef.current && trades.length > 0) {
       for (let i = 0; i < trades.length; i++) {
         seenTradeKeysRef.current.add(getTradeKey(trades[i], i));
       }
       initializedRef.current = true;
     }
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       if (!initializedRef.current) return;
       const live = /* @__PURE__ */ new Set();
       for (let i = 0; i < trades.length; i++) {
@@ -1980,7 +1980,7 @@ var Orderbook = React9.forwardRef(
         if (!live.has(key)) seen.delete(key);
       }
     }, [trades]);
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
     const handleTab = (next) => {
@@ -1989,8 +1989,26 @@ var Orderbook = React9.forwardRef(
     };
     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 maxAskDepth = Math.max(1, ...asks.map((l) => l.depth ?? l.amount));
-    const maxBidDepth = Math.max(1, ...bids.map((l) => l.depth ?? l.amount));
+    const rowCount = isCompact ? COMPACT_ROWS_VISIBLE : LEVEL_ROWS_VISIBLE;
+    const askVisibleLevels = asks.slice(-rowCount);
+    const bidVisibleLevels = bids.slice(0, rowCount);
+    const askCumDepths = new Array(askVisibleLevels.length);
+    {
+      let acc = 0;
+      for (let i = askVisibleLevels.length - 1; i >= 0; i--) {
+        acc += askVisibleLevels[i].amount;
+        askCumDepths[i] = acc;
+      }
+    }
+    const bidCumDepths = new Array(bidVisibleLevels.length);
+    {
+      let acc = 0;
+      for (let i = 0; i < bidVisibleLevels.length; i++) {
+        acc += bidVisibleLevels[i].amount;
+        bidCumDepths[i] = acc;
+      }
+    }
+    const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...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 = {
@@ -2006,8 +2024,11 @@ var Orderbook = React9.forwardRef(
       amountPrecision,
       asks,
       bids,
-      maxAskDepth,
-      maxBidDepth,
+      askVisibleLevels,
+      bidVisibleLevels,
+      askCumDepths,
+      bidCumDepths,
+      combinedMaxCumDepth,
       midPrice,
       midChangePercent,
       midClass,
@@ -2067,10 +2088,11 @@ function DesktopOrderbookLayout({
   tradeFiltered,
   precision,
   amountPrecision,
-  asks,
-  bids,
-  maxAskDepth,
-  maxBidDepth,
+  askVisibleLevels,
+  bidVisibleLevels,
+  askCumDepths,
+  bidCumDepths,
+  combinedMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2080,7 +2102,7 @@ function DesktopOrderbookLayout({
   isLoading,
   seenTradeKeysRef
 }) {
-  const midRef = React9.useRef(null);
+  const midRef = React5.useRef(null);
   useMidPriceFlash(midRef, midPrice, "#0b1a24");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
@@ -2186,13 +2208,13 @@ function DesktopOrderbookLayout({
           {
             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__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : asks.slice(-LEVEL_ROWS_VISIBLE).map((l) => /* @__PURE__ */ jsx(
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
               DepthRow,
               {
                 side: "ask",
                 price: l.price,
                 amount: l.amount,
-                depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
+                depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
                 precision,
                 amountPrecision,
                 hasUserOrder: userAskPrices.has(l.price)
@@ -2225,13 +2247,13 @@ function DesktopOrderbookLayout({
           {
             className: "divide-y divide-white/5 overflow-hidden",
             style: { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bids.slice(0, LEVEL_ROWS_VISIBLE).map((l) => /* @__PURE__ */ jsx(
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
               DepthRow,
               {
                 side: "bid",
                 price: l.price,
                 amount: l.amount,
-                depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
+                depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
                 precision,
                 amountPrecision,
                 hasUserOrder: userBidPrices.has(l.price)
@@ -2255,10 +2277,11 @@ function MobileOrderbookLayout({
   tradeFiltered,
   precision,
   amountPrecision,
-  asks,
-  bids,
-  maxAskDepth,
-  maxBidDepth,
+  askVisibleLevels: visibleAsks,
+  bidVisibleLevels: visibleBids,
+  askCumDepths,
+  bidCumDepths,
+  combinedMaxCumDepth,
   midPrice,
   midChangePercent,
   midClass,
@@ -2268,10 +2291,8 @@ function MobileOrderbookLayout({
   isLoading,
   seenTradeKeysRef
 }) {
-  const midRef = React9.useRef(null);
+  const midRef = React5.useRef(null);
   useMidPriceFlash(midRef, midPrice, "transparent");
-  const visibleAsks = React9.useMemo(() => asks.slice(-COMPACT_ROWS_VISIBLE), [asks]);
-  const visibleBids = React9.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2340,13 +2361,13 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
         MobileDepthRow,
         {
           side: "ask",
           price: l.price,
           amount: l.amount,
-          depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
+          depthPct: askCumDepths[i] / combinedMaxCumDepth * 100,
           precision,
           amountPrecision,
           hasUserOrder: userAskPrices.has(l.price)
@@ -2386,13 +2407,13 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ 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) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
         MobileDepthRow,
         {
           side: "bid",
           price: l.price,
           amount: l.amount,
-          depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
+          depthPct: bidCumDepths[i] / combinedMaxCumDepth * 100,
           precision,
           amountPrecision,
           hasUserOrder: userBidPrices.has(l.price)
@@ -2439,7 +2460,7 @@ function MobileDepthRow({
   hasUserOrder
 }) {
   const isAsk = side === "ask";
-  const rowRef = React9.useRef(null);
+  const rowRef = React5.useRef(null);
   useAmountChangeFlash(rowRef, amount, side);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2496,7 +2517,7 @@ function MobileDepthRow({
     }
   );
 }
-var PropertyTour = React9.forwardRef(
+var PropertyTour = React5.forwardRef(
   ({
     className,
     title,
@@ -2509,8 +2530,8 @@ var PropertyTour = React9.forwardRef(
     playsInline = true,
     ...props
   }, ref) => {
-    const videoRef = React9.useRef(null);
-    React9.useEffect(() => {
+    const videoRef = React5.useRef(null);
+    React5.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
       const handleFullscreenChange = () => {
@@ -2642,7 +2663,7 @@ var formatTimeAgo = (timestamp) => {
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   return `${Math.floor(diff / 3600)}h ago`;
 };
-var PropertyNewsUpdates = React9.forwardRef(
+var PropertyNewsUpdates = React5.forwardRef(
   ({
     className,
     heading,
@@ -2654,20 +2675,21 @@ var PropertyNewsUpdates = React9.forwardRef(
     purchases: purchasesProp,
     viewAllHref,
     viewAllLabel = "View All News",
+    connectionStatus = "live",
     ...props
   }, ref) => {
     const isPurchaseVariant = variant === "purchases";
     const isHomeVariant = variant === "home";
     const resolvedHeading = heading ?? (isPurchaseVariant ? "Live Purchases" : "Property News & Headlines");
-    const [homeTab, setHomeTab] = React9.useState("all");
+    const [homeTab, setHomeTab] = React5.useState("all");
     const purchaseItems = purchasesProp ?? [];
-    const [page, setPage] = React9.useState(0);
-    React9.useEffect(() => {
+    const [page, setPage] = React5.useState(0);
+    React5.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
     const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React9.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
-    React9.useEffect(() => {
+    const totalPages = React5.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    React5.useEffect(() => {
       setPage((prev) => Math.min(prev, totalPages - 1));
     }, [totalPages]);
     const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
@@ -2721,7 +2743,30 @@ var PropertyNewsUpdates = React9.forwardRef(
                   /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
                 ]
               }
-            ) : !isHomeVariant && !isPurchaseVariant ? /* @__PURE__ */ jsxs(
+            ) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "inline-flex items-center font-semibold uppercase",
+                style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        display: "inline-block",
+                        width: "10px",
+                        height: "10px",
+                        borderRadius: "50%",
+                        border: "2px solid rgba(249,115,22,0.3)",
+                        borderTopColor: "#f97316",
+                        animation: "propertyNewsSpin 0.8s linear infinite"
+                      }
+                    }
+                  ),
+                  "CONNECTING"
+                ]
+              }
+            ) : /* @__PURE__ */ jsxs(
               "div",
               {
                 className: "inline-flex items-center font-semibold uppercase text-emerald-300",
@@ -2975,7 +3020,7 @@ var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
   notation: value >= 1e5 ? "compact" : "standard",
   maximumFractionDigits: value >= 1e3 ? 0 : 2
 }).format(value);
-var TradingSlider = React9.forwardRef(
+var TradingSlider = React5.forwardRef(
   ({
     label = "Trade size",
     helperText = "Drag to pick the desired notional.",
@@ -2993,7 +3038,7 @@ var TradingSlider = React9.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React9.useState(
+    const [internalValue, setInternalValue] = React5.useState(
       defaultValue ?? (typeof min === "number" ? min : 0)
     );
     const currentValue = isControlled ? Number(value) : internalValue;
@@ -3096,7 +3141,7 @@ var MobileToggleButton = styled24.button`
     padding: 0.6rem 0.5rem;
   }
 `;
-var MobileTradeNav = React9.forwardRef(
+var MobileTradeNav = React5.forwardRef(
   ({ className, items, activeId, onChange, ...props }, ref) => {
     return /* @__PURE__ */ jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
       MobileToggleButton,
@@ -3747,7 +3792,7 @@ var formatPercent = (value, fractionDigits = 2) => {
   if (value == null || Number.isNaN(value)) return "\u2014";
   return `${value.toFixed(fractionDigits)}%`;
 };
-var YourOrders = React9.forwardRef(
+var YourOrders = React5.forwardRef(
   ({
     className,
     title,
@@ -3760,10 +3805,10 @@ var YourOrders = React9.forwardRef(
     pageSize: pageSizeOverride,
     ...props
   }, ref) => {
-    const [internalActiveTab, setInternalActiveTab] = React9.useState(tabs?.[0]?.id ?? "portfolio");
-    const [page, setPage] = React9.useState(0);
+    const [internalActiveTab, setInternalActiveTab] = React5.useState(tabs?.[0]?.id ?? "portfolio");
+    const [page, setPage] = React5.useState(0);
     const effectiveActiveTabId = activeTabId ?? internalActiveTab;
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       setPage(0);
     }, [effectiveActiveTabId]);
     const handleTabChange = (tabId) => {
@@ -4145,7 +4190,7 @@ function createCandlestickSeries(chart, options) {
   }
   throw new Error("Candlestick series API is not available in the current lightweight-charts version.");
 }
-var PriceChart = React9.forwardRef(
+var PriceChart = React5.forwardRef(
   ({
     className,
     title = "Price Chart",
@@ -4159,18 +4204,18 @@ var PriceChart = React9.forwardRef(
     height = 301.52,
     ...props
   }, ref) => {
-    const containerRef = React9.useRef(null);
-    const chartRef = React9.useRef(null);
-    const seriesRef = React9.useRef(null);
-    const priceLineRef = React9.useRef(null);
-    const [hoveredRange, setHoveredRange] = React9.useState(null);
-    const [dropdownOpen, setDropdownOpen] = React9.useState(false);
-    const dropdownRef = React9.useRef(null);
-    const isAutoScrollRef = React9.useRef(true);
+    const containerRef = React5.useRef(null);
+    const chartRef = React5.useRef(null);
+    const seriesRef = React5.useRef(null);
+    const priceLineRef = React5.useRef(null);
+    const [hoveredRange, setHoveredRange] = React5.useState(null);
+    const [dropdownOpen, setDropdownOpen] = React5.useState(false);
+    const dropdownRef = React5.useRef(null);
+    const isAutoScrollRef = React5.useRef(true);
     const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
     const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
     const selectedInDropdown = dropdownRanges.includes(selectedRange);
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       const handleClickOutside = (e) => {
         if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
           setDropdownOpen(false);
@@ -4179,25 +4224,25 @@ var PriceChart = React9.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const resolvedPrice = React9.useMemo(() => {
+    const resolvedPrice = React5.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
       return last?.close;
     }, [data, price]);
-    const inferredChangePercent = React9.useMemo(() => {
+    const inferredChangePercent = React5.useMemo(() => {
       if (changePercent != null) return changePercent;
       const first = data[0]?.open;
       const last = data.at(-1)?.close;
       if (first == null || last == null || first === 0) return void 0;
       return (last - first) / first * 100;
     }, [changePercent, data]);
-    const dollarChange = React9.useMemo(() => {
+    const dollarChange = React5.useMemo(() => {
       const first = data[0]?.open;
       const last = data.at(-1)?.close;
       if (first == null || last == null) return void 0;
       return last - first;
     }, [data]);
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const chart = LightweightCharts.createChart(el, {
@@ -4242,7 +4287,7 @@ var PriceChart = React9.forwardRef(
         chart.remove();
       };
     }, []);
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       const chart = chartRef.current;
       if (!chart) return;
       const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
@@ -4250,7 +4295,7 @@ var PriceChart = React9.forwardRef(
         timeScale: getTimeScaleOptions(effectiveRange)
       });
     }, [selectedRange, ranges]);
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
@@ -4455,7 +4500,7 @@ var formatPrice3 = (value, currencySymbol) => {
     maximumFractionDigits: 3
   })}`;
 };
-var PropertyHeroHeader = React9.forwardRef(
+var PropertyHeroHeader = React5.forwardRef(
   ({
     className,
     imageUrl,
@@ -4482,8 +4527,8 @@ var PropertyHeroHeader = React9.forwardRef(
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
     const accentColor = "#e6c87e";
     const tradeHoverColor = "#f5dd9a";
-    const [isTradeInteracting, setIsTradeInteracting] = React9.useState(false);
-    const [isOfferInteracting, setIsOfferInteracting] = React9.useState(false);
+    const [isTradeInteracting, setIsTradeInteracting] = React5.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
     const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
     const isTradeDisabled = !onTrade;
     const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
@@ -5093,7 +5138,7 @@ var Header = ({
       setShowLoginPopup(true);
     }
   };
-  const handleLoginPopupClose = React9__default.useCallback(() => {
+  const handleLoginPopupClose = React5__default.useCallback(() => {
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
@@ -5809,10 +5854,10 @@ var MobileNavItem = styled24.div`
     padding-left: 24px;
   }
 `;
-var PropertySubheader = React9.forwardRef(
+var PropertySubheader = React5.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabsContainerRef = React9.useRef(null);
-    React9.useEffect(() => {
+    const tabsContainerRef = React5.useRef(null);
+    React5.useEffect(() => {
       const container = tabsContainerRef.current;
       if (!container) return;
       const isMobile = window.innerWidth <= 768;
@@ -5968,7 +6013,7 @@ var LoginPopup = ({
   const [fiatFundingLoading, setFiatFundingLoading] = useState(false);
   const [fundingError, setFundingError] = useState("");
   const [transakWidgetUrl, setTransakWidgetUrl] = useState(null);
-  const suppressAutoCloseRef = React9__default.useRef(false);
+  const suppressAutoCloseRef = React5__default.useRef(false);
   useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
@@ -6220,13 +6265,12 @@ var LoginPopup = ({
     }
     setFundingError("");
     setCryptoFundingLoading(true);
+    const fundPromise = onFundWallet({ amount: fundingAmount, mode: "crypto" });
+    onClose();
     try {
-      const result = await onFundWallet({ amount: fundingAmount, mode: "crypto" });
-      if (result?.funded) {
-        onClose();
-      }
+      await fundPromise;
     } catch (err) {
-      setFundingError(err instanceof Error ? err.message : "Unable to launch funding. Please try again.");
+      console.error("[LoginPopup] crypto fund flow failed", err);
     } finally {
       setCryptoFundingLoading(false);
     }
@@ -7148,7 +7192,7 @@ var MiniLiveFeed = () => {
   );
 };
 LoginPopup.displayName = "LoginPopup";
-var PropertyCompareBar = React9.forwardRef(
+var PropertyCompareBar = React5.forwardRef(
   ({
     className,
     addresses,
@@ -7159,7 +7203,7 @@ var PropertyCompareBar = React9.forwardRef(
     price,
     ...props
   }, ref) => {
-    const normalizedAddresses = React9.useMemo(() => {
+    const normalizedAddresses = React5.useMemo(() => {
       return addresses.map(
         (option) => typeof option === "string" ? { id: option, label: option } : option
       );
@@ -7167,11 +7211,11 @@ var PropertyCompareBar = React9.forwardRef(
     const hasAddresses = normalizedAddresses.length > 0;
     const firstAddressId = normalizedAddresses[0]?.id;
     const isControlled = selectedAddressId !== void 0;
-    const [internalSelectedId, setInternalSelectedId] = React9.useState(
+    const [internalSelectedId, setInternalSelectedId] = React5.useState(
       () => isControlled ? void 0 : firstAddressId
     );
     const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
-    React9.useEffect(() => {
+    React5.useEffect(() => {
       if (!isControlled) {
         setInternalSelectedId((current) => {
           if (current != null && normalizedAddresses.some((option) => option.id === current)) {
@@ -7182,9 +7226,9 @@ var PropertyCompareBar = React9.forwardRef(
       }
     }, [firstAddressId, isControlled, normalizedAddresses]);
     const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
-    const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
-    const dropdownRef = React9.useRef(null);
-    React9.useEffect(() => {
+    const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
+    const dropdownRef = React5.useRef(null);
+    React5.useEffect(() => {
       if (!isDropdownOpen) return;
       const handleClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {