@loafmarkets/ui 0.1.41 → 0.1.43

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var React9 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -33,7 +33,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 var styled24__default = /*#__PURE__*/_interopDefault(styled24);
 var LightweightCharts__namespace = /*#__PURE__*/_interopNamespace(LightweightCharts);
 
@@ -75,7 +75,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React5__namespace.forwardRef(
+var Button = React9__namespace.forwardRef(
   ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const coercedRadius = radius ?? (variant === "onboarding" || variant === "onboardingOutline" ? "square" : void 0);
@@ -114,11 +114,11 @@ var badgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Badge = React5__namespace.forwardRef(
+var Badge = React9__namespace.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
 );
 Badge.displayName = "Badge";
-var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Card = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -130,11 +130,11 @@ var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React5__namespace.forwardRef(
+var CardHeader = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5__namespace.forwardRef(
+var CardTitle = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h3",
     {
@@ -145,15 +145,15 @@ var CardTitle = React5__namespace.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5__namespace.forwardRef(
+var CardDescription = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React5__namespace.forwardRef(
+var CardContent = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React5__namespace.forwardRef(
+var CardFooter = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -171,7 +171,7 @@ var defaultFormatSignedCurrency = (value) => {
   const sign = value >= 0 ? "+" : "-";
   return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
 };
-var PortfolioSummary = React5__namespace.forwardRef(
+var PortfolioSummary = React9__namespace.forwardRef(
   ({
     availableCash,
     portfolioValue,
@@ -321,23 +321,23 @@ function HousePositionSlider({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5__namespace.useState("none");
-  const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
-  const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
-  const [_isDragging, setIsDragging] = React5__namespace.useState(false);
-  const [visualTargetPct, setVisualTargetPct] = React5__namespace.useState(null);
-  const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
-  const [ownershipInput, setOwnershipInput] = React5__namespace.useState("");
-  const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
-  const houseRef = React5__namespace.useRef(null);
+  const [orderMode, setOrderMode] = React9__namespace.useState("none");
+  const [buyTrackingMode, setBuyTrackingMode] = React9__namespace.useState("dollars");
+  const [deltaDollars, setDeltaDollars] = React9__namespace.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React9__namespace.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React9__namespace.useState(0);
+  const [_isDragging, setIsDragging] = React9__namespace.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = React9__namespace.useState(null);
+  const [orderType, setOrderType] = React9__namespace.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React9__namespace.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React9__namespace.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React9__namespace.useState(false);
+  const [ownershipInput, setOwnershipInput] = React9__namespace.useState("");
+  const [tokenAmountInput, setTokenAmountInput] = React9__namespace.useState("");
+  const houseRef = React9__namespace.useRef(null);
   const asks = orderbook?.asks ?? [];
   const bids = orderbook?.bids ?? [];
-  React5__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -412,7 +412,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 = React5__namespace.useCallback(() => {
+  const resetOrder = React9__namespace.useCallback(() => {
     setOrderMode("none");
     setBuyTrackingMode("dollars");
     setDeltaDollars(0);
@@ -420,7 +420,7 @@ function HousePositionSlider({
     setDeltaTokensSell(0);
     setVisualTargetPct(null);
   }, []);
-  const updateOrderFromTargetValue = React5__namespace.useCallback(
+  const updateOrderFromTargetValue = React9__namespace.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0) {
@@ -444,7 +444,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
   );
-  const updateOrderFromOwnership = React5__namespace.useCallback(
+  const updateOrderFromOwnership = React9__namespace.useCallback(
     (newOwnershipPercent) => {
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
@@ -453,7 +453,7 @@ function HousePositionSlider({
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
-  const updateOrderFromTokenAmount = React5__namespace.useCallback(
+  const updateOrderFromTokenAmount = React9__namespace.useCallback(
     (tokenAmountSigned) => {
       if (tokenAmountSigned > 0) {
         const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
@@ -476,7 +476,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
   );
-  const updateOrderFromSlider = React5__namespace.useCallback(
+  const updateOrderFromSlider = React9__namespace.useCallback(
     (pct) => {
       const normalized = (pct - 50) / 50;
       const magnitude = Math.min(Math.abs(normalized), 1);
@@ -520,7 +520,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
-  const handleDragAtClientY = React5__namespace.useCallback(
+  const handleDragAtClientY = React9__namespace.useCallback(
     (clientY) => {
       if (!houseRef.current) return;
       const rect = houseRef.current.getBoundingClientRect();
@@ -1036,18 +1036,18 @@ function HousePositionSliderMobile({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5__namespace.useState("none");
-  const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
-  const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
-  const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
-  const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
-  const houseRef = React5__namespace.useRef(null);
-  React5__namespace.useEffect(() => {
+  const [orderMode, setOrderMode] = React9__namespace.useState("none");
+  const [deltaDollars, setDeltaDollars] = React9__namespace.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React9__namespace.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React9__namespace.useState(0);
+  const [buyTrackingMode, setBuyTrackingMode] = React9__namespace.useState("dollars");
+  const [orderType, setOrderType] = React9__namespace.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React9__namespace.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React9__namespace.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React9__namespace.useState(false);
+  const [tokenAmountInput, setTokenAmountInput] = React9__namespace.useState("");
+  const houseRef = React9__namespace.useRef(null);
+  React9__namespace.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -1089,7 +1089,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 = React5__namespace.useCallback(
+  const updateOrderFromTargetValue = React9__namespace.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0.01) {
@@ -1117,7 +1117,7 @@ function HousePositionSliderMobile({
     },
     [holdingsValue, availableCash, effectivePrice, tokensHeld]
   );
-  const updateOrderFromTokenAmount = React5__namespace.useCallback(
+  const updateOrderFromTokenAmount = React9__namespace.useCallback(
     (tokenAmount) => {
       if (tokenAmount > 0) {
         const maxTokens = effectivePrice > 0 ? availableCash / effectivePrice : 0;
@@ -1144,14 +1144,14 @@ function HousePositionSliderMobile({
     },
     [effectivePrice, availableCash, tokensHeld]
   );
-  const handleMarkerClick = React5__namespace.useCallback(
+  const handleMarkerClick = React9__namespace.useCallback(
     (pct) => {
       const newTargetValue = pct / 100 * totalCapacity;
       updateOrderFromTargetValue(newTargetValue);
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onMouseDown = React5__namespace.useCallback(
+  const onMouseDown = React9__namespace.useCallback(
     (e) => {
       e.preventDefault();
       const move = (ev) => {
@@ -1171,7 +1171,7 @@ function HousePositionSliderMobile({
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onTouchStart = React5__namespace.useCallback(
+  const onTouchStart = React9__namespace.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1729,7 +1729,7 @@ var LiquidityText = styled24__default.default.span`
     letter-spacing: 0.1px;
   }
 `;
-var LoafLiquidityBadge = React5__namespace.forwardRef(
+var LoafLiquidityBadge = React9__namespace.forwardRef(
   ({ className, isGlowing, onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       LogoContainer,
@@ -1757,9 +1757,34 @@ var LoafLiquidityBadge = React5__namespace.forwardRef(
   }
 );
 LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
+var toSize = (v, fallback) => v == null ? fallback : typeof v === "number" ? `${v}px` : v;
+var Skeleton = React9__namespace.forwardRef(
+  ({ width, height, radius, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "aria-busy": "true",
+        "aria-live": "polite",
+        className: cn(
+          "inline-block align-middle bg-white/10 animate-pulse",
+          className
+        ),
+        style: {
+          width: toSize(width, "100%"),
+          height: toSize(height, "1em"),
+          borderRadius: toSize(radius, "6px"),
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
 function useViewportCompact(breakpoint) {
-  const [isCompact, setIsCompact] = React5__namespace.useState(false);
-  React5__namespace.useEffect(() => {
+  const [isCompact, setIsCompact] = React9__namespace.useState(false);
+  React9__namespace.useEffect(() => {
     if (typeof window === "undefined") return;
     const check = () => setIsCompact(window.innerWidth <= breakpoint);
     check();
@@ -1769,16 +1794,119 @@ function useViewportCompact(breakpoint) {
   return isCompact;
 }
 var formatNumber = (value, precision) => value.toFixed(precision);
+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)";
+function getTradeKey(trade, fallbackIndex) {
+  if (trade.tradeId != null) return `id-${trade.tradeId}`;
+  if (trade.time != null) return `t-${trade.time}-${trade.type}-${trade.price}-${trade.amount}`;
+  return `idx-${fallbackIndex}-${trade.type}-${trade.price}-${trade.amount}`;
+}
+function useAmountChangeFlash(ref, amount) {
+  const prevAmountRef = React9__namespace.useRef(amount);
+  React9__namespace.useEffect(() => {
+    const prev = prevAmountRef.current;
+    const node = ref.current;
+    if (prev !== amount && node && typeof node.animate === "function") {
+      const color = amount > prev ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
+      node.animate(
+        [{ backgroundColor: color }, { backgroundColor: "transparent" }],
+        { duration: FLASH_DURATION_MS, easing: "ease-out" }
+      );
+    }
+    prevAmountRef.current = amount;
+  }, [amount, ref]);
+}
+function useMidPriceFlash(ref, midPrice, restBgColor) {
+  const prevMidRef = React9__namespace.useRef(midPrice);
+  React9__namespace.useEffect(() => {
+    const prev = prevMidRef.current;
+    const node = ref.current;
+    if (prev !== midPrice && prev > 0 && midPrice > 0 && node && typeof node.animate === "function") {
+      const color = midPrice > prev ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
+      node.animate(
+        [{ backgroundColor: color }, { backgroundColor: restBgColor }],
+        { duration: FLASH_DURATION_MS, easing: "ease-out" }
+      );
+    }
+    prevMidRef.current = midPrice;
+  }, [midPrice, ref, restBgColor]);
+}
+function TradeRow({
+  trade,
+  tradeKey,
+  precision,
+  amountPrecision,
+  seenTradeKeysRef,
+  compact
+}) {
+  const rowRef = React9__namespace.useRef(null);
+  const { type } = trade;
+  React9__namespace.useEffect(() => {
+    if (seenTradeKeysRef.current.has(tradeKey)) return;
+    seenTradeKeysRef.current.add(tradeKey);
+    const node = rowRef.current;
+    if (!node || typeof node.animate !== "function") return;
+    const color = type === "buy" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
+    node.animate(
+      [{ backgroundColor: color }, { backgroundColor: "transparent" }],
+      { duration: FLASH_DURATION_MS, easing: "ease-out" }
+    );
+  }, [tradeKey, seenTradeKeysRef, type]);
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: rowRef,
+        className: "grid",
+        style: { gridTemplateColumns: "1.2fr 0.8fr", 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.jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: formatNumber(trade.amount, amountPrecision) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rowRef,
+      className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "tabular-nums",
+              trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
+            ),
+            children: [
+              "$",
+              formatNumber(trade.price, precision)
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) })
+      ]
+    }
+  );
+}
 function DepthRow({
   side,
   price,
   amount,
   depthPct,
   precision,
-  amountPrecision
+  amountPrecision,
+  hasUserOrder
 }) {
   const isAsk = side === "ask";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+  const rowRef = React9__namespace.useRef(null);
+  useAmountChangeFlash(rowRef, amount);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: rowRef, className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -1786,9 +1914,16 @@ function DepthRow({
           "absolute inset-y-0 right-0",
           isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
         ),
-        style: { width: `${clamp3(depthPct, 0, 100)}%` }
+        style: { width: `${clamp3(depthPct, 0, 100)}%`, transition: "width 300ms ease-out" }
       }
     ),
+    hasUserOrder ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-label": "Your order at this price",
+        className: "absolute left-0 top-0 bottom-0 z-[2] w-[3px] rounded-r-sm bg-[#C9A227] shadow-[0_0_6px_rgba(201,162,39,0.6)]"
+      }
+    ) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1808,7 +1943,7 @@ var DEPTH_ROW_HEIGHT_PX = 34;
 var COMPACT_ROWS_VISIBLE = 5;
 var COMPACT_ROW_HEIGHT_PX = 30;
 var COMPACT_BREAKPOINT_PX = 1024;
-var Orderbook = React5__namespace.forwardRef(
+var Orderbook = React9__namespace.forwardRef(
   ({
     asks,
     bids,
@@ -1823,13 +1958,44 @@ var Orderbook = React5__namespace.forwardRef(
     onTabChange,
     rightHeader = /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem]" }),
     variant = "auto",
+    userOrderPrices,
+    isLoading = false,
     className,
     ...props
   }, ref) => {
-    const [tab, setTab] = React5__namespace.useState(defaultTab);
-    const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
+    const [tab, setTab] = React9__namespace.useState(defaultTab);
+    const [tradeFilter, setTradeFilter] = React9__namespace.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
-    React5__namespace.useEffect(() => {
+    const { userAskPrices, userBidPrices } = React9__namespace.useMemo(() => {
+      const ask = /* @__PURE__ */ new Set();
+      const bid = /* @__PURE__ */ new Set();
+      if (!userOrderPrices) return { userAskPrices: ask, userBidPrices: bid };
+      for (const entry of userOrderPrices) {
+        if (entry.side === "SELL") ask.add(entry.price);
+        else bid.add(entry.price);
+      }
+      return { userAskPrices: ask, userBidPrices: bid };
+    }, [userOrderPrices]);
+    const seenTradeKeysRef = React9__namespace.useRef(/* @__PURE__ */ new Set());
+    const initializedRef = React9__namespace.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__namespace.useEffect(() => {
+      if (!initializedRef.current) return;
+      const live = /* @__PURE__ */ new Set();
+      for (let i = 0; i < trades.length; i++) {
+        live.add(getTradeKey(trades[i], i));
+      }
+      const seen = seenTradeKeysRef.current;
+      for (const key of seen) {
+        if (!live.has(key)) seen.delete(key);
+      }
+    }, [trades]);
+    React9__namespace.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
     const handleTab = (next) => {
@@ -1860,7 +2026,11 @@ var Orderbook = React5__namespace.forwardRef(
       midPrice,
       midChangePercent,
       midClass,
-      sectionHeight
+      sectionHeight,
+      userAskPrices,
+      userBidPrices,
+      isLoading,
+      seenTradeKeysRef
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
@@ -1878,6 +2048,29 @@ var Orderbook = React5__namespace.forwardRef(
   }
 );
 Orderbook.displayName = "Orderbook";
+function SkeletonRow({ compact }) {
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1.2fr 0.8fr",
+          padding: "0.2rem 0",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "60%", height: 10 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "50%", height: 10 }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "60%", height: 12 }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "50%", height: 12 }) })
+  ] });
+}
 function DesktopOrderbookLayout({
   tab,
   handleTab,
@@ -1896,8 +2089,14 @@ function DesktopOrderbookLayout({
   midPrice,
   midChangePercent,
   midClass,
-  sectionHeight
+  sectionHeight,
+  userAskPrices,
+  userBidPrices,
+  isLoading,
+  seenTradeKeysRef
 }) {
+  const midRef = React9__namespace.useRef(null);
+  useMidPriceFlash(midRef, midPrice, "#0b1a24");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
@@ -1981,29 +2180,20 @@ function DesktopOrderbookLayout({
         {
           className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
           style: { scrollbarGutter: "stable" },
-          children: 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) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "tabular-nums",
-                      trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
-                    ),
-                    children: [
-                      "$",
-                      formatNumber(trade.price, precision)
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right tabular-nums text-white/90", children: formatNumber(trade.amount, amountPrecision) })
-              ]
-            },
-            `${trade.type}-${trade.price}-${trade.amount}-${trade.time ?? i}`
-          )) })
+          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) => {
+            const tradeKey = getTradeKey(trade, i);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TradeRow,
+              {
+                trade,
+                tradeKey,
+                precision,
+                amountPrecision,
+                seenTradeKeysRef
+              },
+              tradeKey
+            );
+          }) })
         }
       ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2011,7 +2201,7 @@ function DesktopOrderbookLayout({
           {
             className: "flex flex-col justify-end divide-y divide-white/5 overflow-y-auto",
             style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
-            children: asks.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "ask",
@@ -2019,30 +2209,38 @@ function DesktopOrderbookLayout({
                 amount: l.amount,
                 depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
                 precision,
-                amountPrecision
+                amountPrecision,
+                hasUserOrder: userAskPrices.has(l.price)
               },
-              `ask-${idx}-${l.price}-${l.amount}`
+              `ask-${l.price}`
             ))
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: [
-            "$",
-            formatNumber(midPrice, precision),
-            midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
-              midChangePercent >= 0 ? "+" : "",
-              midChangePercent.toFixed(2),
-              "%"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {})
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: midRef,
+            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2",
+            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: [
+                "$",
+                formatNumber(midPrice, precision),
+                midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
+                  midChangePercent >= 0 ? "+" : "",
+                  midChangePercent.toFixed(2),
+                  "%"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", {})
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "divide-y divide-white/5 overflow-y-auto",
             style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
-            children: bids.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
               DepthRow,
               {
                 side: "bid",
@@ -2050,9 +2248,10 @@ function DesktopOrderbookLayout({
                 amount: l.amount,
                 depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
                 precision,
-                amountPrecision
+                amountPrecision,
+                hasUserOrder: userBidPrices.has(l.price)
               },
-              `bid-${idx}-${l.price}-${l.amount}`
+              `bid-${l.price}`
             ))
           }
         )
@@ -2078,10 +2277,16 @@ function MobileOrderbookLayout({
   midPrice,
   midChangePercent,
   midClass,
-  sectionHeight: _sectionHeight
+  sectionHeight: _sectionHeight,
+  userAskPrices,
+  userBidPrices,
+  isLoading,
+  seenTradeKeysRef
 }) {
-  const visibleAsks = React5__namespace.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
-  const visibleBids = React5__namespace.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
+  const midRef = React9__namespace.useRef(null);
+  useMidPriceFlash(midRef, midPrice, "transparent");
+  const visibleAsks = React9__namespace.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
+  const visibleBids = React9__namespace.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2150,7 +2355,7 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleAsks.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__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.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
         MobileDepthRow,
         {
           side: "ask",
@@ -2158,13 +2363,15 @@ function MobileOrderbookLayout({
           amount: l.amount,
           depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
           precision,
-          amountPrecision
+          amountPrecision,
+          hasUserOrder: userAskPrices.has(l.price)
         },
-        `mobile-ask-${idx}-${l.price}-${l.amount}`
+        `mobile-ask-${l.price}`
       )) }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
+          ref: midRef,
           className: "grid",
           style: {
             gridTemplateColumns: "1.2fr 0.8fr",
@@ -2174,12 +2381,12 @@ function MobileOrderbookLayout({
             borderBottom: "1px solid rgba(255,255,255,0.1)"
           },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
+            /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
                 style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" },
                 className: midClass,
-                children: [
+                children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 16 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                   "$",
                   formatNumber(midPrice, precision),
                   midChangePercent != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-[0.75rem] font-semibold tabular-nums", midClass), children: [
@@ -2187,14 +2394,14 @@ function MobileOrderbookLayout({
                     midChangePercent.toFixed(2),
                     "%"
                   ] })
-                ]
+                ] })
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", {})
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleBids.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__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.map((l) => /* @__PURE__ */ jsxRuntime.jsx(
         MobileDepthRow,
         {
           side: "bid",
@@ -2202,9 +2409,10 @@ function MobileOrderbookLayout({
           amount: l.amount,
           depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
           precision,
-          amountPrecision
+          amountPrecision,
+          hasUserOrder: userBidPrices.has(l.price)
         },
-        `mobile-bid-${idx}-${l.price}-${l.amount}`
+        `mobile-bid-${l.price}`
       )) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden px-3 pb-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2218,27 +2426,21 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: 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.jsxs(
-        "div",
-        {
-          className: "grid",
-          style: { gridTemplateColumns: "1.2fr 0.8fr", 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.jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: formatNumber(trade.amount, amountPrecision) })
-          ]
-        },
-        `${trade.type}-${trade.price}-${trade.amount}-${trade.time ?? i}`
-      )) })
+      /* @__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) => {
+        const tradeKey = getTradeKey(trade, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TradeRow,
+          {
+            trade,
+            tradeKey,
+            precision,
+            amountPrecision,
+            seenTradeKeysRef,
+            compact: true
+          },
+          tradeKey
+        );
+      }) })
     ] })
   ] });
 }
@@ -2248,12 +2450,16 @@ function MobileDepthRow({
   amount,
   depthPct,
   precision,
-  amountPrecision
+  amountPrecision,
+  hasUserOrder
 }) {
   const isAsk = side === "ask";
+  const rowRef = React9__namespace.useRef(null);
+  useAmountChangeFlash(rowRef, amount);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: rowRef,
       style: {
         display: "grid",
         gridTemplateColumns: "1.2fr 0.8fr",
@@ -2262,6 +2468,24 @@ function MobileDepthRow({
         position: "relative"
       },
       children: [
+        hasUserOrder ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-label": "Your order at this price",
+            style: {
+              position: "absolute",
+              left: 0,
+              top: 0,
+              bottom: 0,
+              width: "3px",
+              backgroundColor: "#C9A227",
+              boxShadow: "0 0 6px rgba(201,162,39,0.6)",
+              borderTopRightRadius: "2px",
+              borderBottomRightRadius: "2px",
+              zIndex: 2
+            }
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81" }, children: [
           "$",
           formatNumber(price, precision)
@@ -2278,7 +2502,8 @@ function MobileDepthRow({
               width: `${clamp3(depthPct, 0, 100)}%`,
               backgroundColor: isAsk ? "#f6465d" : "#0ecb81",
               opacity: 0.1,
-              zIndex: 0
+              zIndex: 0,
+              transition: "width 300ms ease-out"
             }
           }
         )
@@ -2286,7 +2511,7 @@ function MobileDepthRow({
     }
   );
 }
-var PropertyTour = React5__namespace.forwardRef(
+var PropertyTour = React9__namespace.forwardRef(
   ({
     className,
     title,
@@ -2299,8 +2524,8 @@ var PropertyTour = React5__namespace.forwardRef(
     playsInline = true,
     ...props
   }, ref) => {
-    const videoRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const videoRef = React9__namespace.useRef(null);
+    React9__namespace.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
       const handleFullscreenChange = () => {
@@ -2432,7 +2657,7 @@ var formatTimeAgo = (timestamp) => {
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   return `${Math.floor(diff / 3600)}h ago`;
 };
-var PropertyNewsUpdates = React5__namespace.forwardRef(
+var PropertyNewsUpdates = React9__namespace.forwardRef(
   ({
     className,
     heading,
@@ -2449,15 +2674,15 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
     const isPurchaseVariant = variant === "purchases";
     const isHomeVariant = variant === "home";
     const resolvedHeading = heading ?? (isPurchaseVariant ? "Live Purchases" : "Property News & Headlines");
-    const [homeTab, setHomeTab] = React5__namespace.useState("all");
+    const [homeTab, setHomeTab] = React9__namespace.useState("all");
     const purchaseItems = purchasesProp ?? [];
-    const [page, setPage] = React5__namespace.useState(0);
-    React5__namespace.useEffect(() => {
+    const [page, setPage] = React9__namespace.useState(0);
+    React9__namespace.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
     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(() => {
+    const totalPages = React9__namespace.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    React9__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) : [];
@@ -2765,7 +2990,7 @@ var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
   notation: value >= 1e5 ? "compact" : "standard",
   maximumFractionDigits: value >= 1e3 ? 0 : 2
 }).format(value);
-var TradingSlider = React5__namespace.forwardRef(
+var TradingSlider = React9__namespace.forwardRef(
   ({
     label = "Trade size",
     helperText = "Drag to pick the desired notional.",
@@ -2783,7 +3008,7 @@ var TradingSlider = React5__namespace.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React5__namespace.useState(
+    const [internalValue, setInternalValue] = React9__namespace.useState(
       defaultValue ?? (typeof min === "number" ? min : 0)
     );
     const currentValue = isControlled ? Number(value) : internalValue;
@@ -2886,7 +3111,7 @@ var MobileToggleButton = styled24__default.default.button`
     padding: 0.6rem 0.5rem;
   }
 `;
-var MobileTradeNav = React5__namespace.forwardRef(
+var MobileTradeNav = React9__namespace.forwardRef(
   ({ className, items, activeId, onChange, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       MobileToggleButton,
@@ -3537,7 +3762,7 @@ var formatPercent = (value, fractionDigits = 2) => {
   if (value == null || Number.isNaN(value)) return "\u2014";
   return `${value.toFixed(fractionDigits)}%`;
 };
-var YourOrders = React5__namespace.forwardRef(
+var YourOrders = React9__namespace.forwardRef(
   ({
     className,
     title,
@@ -3550,10 +3775,10 @@ var YourOrders = React5__namespace.forwardRef(
     pageSize: pageSizeOverride,
     ...props
   }, ref) => {
-    const [internalActiveTab, setInternalActiveTab] = React5__namespace.useState(tabs?.[0]?.id ?? "portfolio");
-    const [page, setPage] = React5__namespace.useState(0);
+    const [internalActiveTab, setInternalActiveTab] = React9__namespace.useState(tabs?.[0]?.id ?? "portfolio");
+    const [page, setPage] = React9__namespace.useState(0);
     const effectiveActiveTabId = activeTabId ?? internalActiveTab;
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       setPage(0);
     }, [effectiveActiveTabId]);
     const handleTabChange = (tabId) => {
@@ -3935,7 +4160,7 @@ function createCandlestickSeries(chart, options) {
   }
   throw new Error("Candlestick series API is not available in the current lightweight-charts version.");
 }
-var PriceChart = React5__namespace.forwardRef(
+var PriceChart = React9__namespace.forwardRef(
   ({
     className,
     title = "Price Chart",
@@ -3949,18 +4174,18 @@ var PriceChart = React5__namespace.forwardRef(
     height = 301.52,
     ...props
   }, ref) => {
-    const containerRef = React5__namespace.useRef(null);
-    const chartRef = React5__namespace.useRef(null);
-    const seriesRef = React5__namespace.useRef(null);
-    const priceLineRef = React5__namespace.useRef(null);
-    const [hoveredRange, setHoveredRange] = React5__namespace.useState(null);
-    const [dropdownOpen, setDropdownOpen] = React5__namespace.useState(false);
-    const dropdownRef = React5__namespace.useRef(null);
-    const isAutoScrollRef = React5__namespace.useRef(true);
+    const containerRef = React9__namespace.useRef(null);
+    const chartRef = React9__namespace.useRef(null);
+    const seriesRef = React9__namespace.useRef(null);
+    const priceLineRef = React9__namespace.useRef(null);
+    const [hoveredRange, setHoveredRange] = React9__namespace.useState(null);
+    const [dropdownOpen, setDropdownOpen] = React9__namespace.useState(false);
+    const dropdownRef = React9__namespace.useRef(null);
+    const isAutoScrollRef = React9__namespace.useRef(true);
     const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
     const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
     const selectedInDropdown = dropdownRanges.includes(selectedRange);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const handleClickOutside = (e) => {
         if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
           setDropdownOpen(false);
@@ -3969,25 +4194,25 @@ var PriceChart = React5__namespace.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const resolvedPrice = React5__namespace.useMemo(() => {
+    const resolvedPrice = React9__namespace.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
       return last?.close;
     }, [data, price]);
-    const inferredChangePercent = React5__namespace.useMemo(() => {
+    const inferredChangePercent = React9__namespace.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 = React5__namespace.useMemo(() => {
+    const dollarChange = React9__namespace.useMemo(() => {
       const first = data[0]?.open;
       const last = data.at(-1)?.close;
       if (first == null || last == null) return void 0;
       return last - first;
     }, [data]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const chart = LightweightCharts__namespace.createChart(el, {
@@ -4032,7 +4257,7 @@ var PriceChart = React5__namespace.forwardRef(
         chart.remove();
       };
     }, []);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const chart = chartRef.current;
       if (!chart) return;
       const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
@@ -4040,7 +4265,7 @@ var PriceChart = React5__namespace.forwardRef(
         timeScale: getTimeScaleOptions(effectiveRange)
       });
     }, [selectedRange, ranges]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
@@ -4245,7 +4470,7 @@ var formatPrice3 = (value, currencySymbol) => {
     maximumFractionDigits: 3
   })}`;
 };
-var PropertyHeroHeader = React5__namespace.forwardRef(
+var PropertyHeroHeader = React9__namespace.forwardRef(
   ({
     className,
     imageUrl,
@@ -4266,14 +4491,15 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     makeOfferDisabled = false,
     hideMakeOfferButton = false,
     statusBadge,
+    isLoading = false,
     ...props
   }, ref) => {
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
     const accentColor = "#e6c87e";
     const tradeHoverColor = "#f5dd9a";
-    const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
-    const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
-    const hasAmenities = beds != null || baths != null || cars != null || propertyTypeLabel != null;
+    const [isTradeInteracting, setIsTradeInteracting] = React9__namespace.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = React9__namespace.useState(false);
+    const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
     const isTradeDisabled = !onTrade;
     const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
     const showMakeOfferButton = !hideMakeOfferButton;
@@ -4313,7 +4539,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
               /* @__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 }),
-                price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(PriceBlock, { children: [
+                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",
@@ -4343,7 +4569,21 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
+            /* @__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: [
@@ -4366,7 +4606,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
                 ] })
               ] }),
               propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyTypeLabel })
-            ] })
+            ] }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -4428,7 +4668,21 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
           ] })
         ] }) })
       ] }),
-      hasAmenities ? /* @__PURE__ */ jsxRuntime.jsxs(MobileAmenities, { children: [
+      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: [
@@ -4451,7 +4705,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
           ] })
         ] }),
         propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx(MobileAmenity, { children: propertyTypeLabel })
-      ] }) : null
+      ] }) }) : null
     ] });
   }
 );
@@ -4688,12 +4942,21 @@ var Header = ({
   onWalletNavigate: _onWalletNavigate,
   showTradeTab = true
 }) => {
-  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);
-  React5.useEffect(() => {
+  const [isUserMenuOpen, setIsUserMenuOpen] = React9.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React9.useState(false);
+  const [isMoreMenuOpen, setIsMoreMenuOpen] = React9.useState(false);
+  const [showLoginPopup, setShowLoginPopup] = React9.useState(false);
+  const [loginPopupInitialView, setLoginPopupInitialView] = React9.useState(void 0);
+  React9.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const ua = navigator.userAgent;
+    const isTelegram = /Telegram/i.test(ua);
+    const isIOS = /iPhone|iPad|iPod/.test(ua);
+    if (isTelegram && isIOS) {
+      document.documentElement.style.setProperty("--telegram-safe-top", "59px");
+    }
+  }, []);
+  React9.useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (!target) return;
@@ -4713,7 +4976,7 @@ var Header = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isUserMenuOpen, isMobileMenuOpen, isMoreMenuOpen]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (typeof window === "undefined") return;
     const handleExternalLoginPopup = (event) => {
       const customEvent = event;
@@ -4843,7 +5106,7 @@ var Header = ({
       setShowLoginPopup(true);
     }
   };
-  const handleLoginPopupClose = React5__namespace.default.useCallback(() => {
+  const handleLoginPopupClose = React9__namespace.default.useCallback(() => {
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
@@ -4877,7 +5140,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5115,6 +5378,7 @@ var Header = ({
         )
       ] })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(HeaderSpacer, {}),
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsxRuntime.jsx(
       LoginPopupComponent,
       {
@@ -5130,8 +5394,8 @@ var SafeAreaCover = styled24__default.default.div`
   top: 0;
   left: 0;
   right: 0;
-  height: env(safe-area-inset-top, 0px);
-  min-height: env(safe-area-inset-top, 0px);
+  height: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
+  min-height: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
   background-color: #0d1117;
   z-index: 1001;
   pointer-events: none;
@@ -5185,23 +5449,31 @@ var HeaderContainer = styled24__default.default.header`
   /* Split padding so browsers that don't support env() inside shorthand
      still get the horizontal padding — only the top falls back to 0 */
   padding: 0 2rem;
-  padding-top: env(safe-area-inset-top, 0px);
+  padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
   background-color: #0d1117;
   border-bottom: 1px solid #232a32;
-  position: sticky;
+  position: fixed;
   top: 0;
+  left: 0;
+  right: 0;
   z-index: 1000;
   width: 100%;
   /* Fallback min-height for browsers that can't evaluate calc+env */
   min-height: 56px;
-  min-height: calc(56px + env(safe-area-inset-top, 0px));
+  min-height: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
   box-sizing: border-box;
 
   @media (max-width: 768px) {
     padding: 0 1rem;
-    padding-top: env(safe-area-inset-top, 0px);
+    padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
   }
 `;
+var HeaderSpacer = styled24__default.default.div`
+  width: 100%;
+  min-height: 56px;
+  min-height: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
+  flex-shrink: 0;
+`;
 var Logo = styled24__default.default.div`
   display: flex;
   align-items: center;
@@ -5254,10 +5526,12 @@ var Nav = styled24__default.default.nav`
   @media (max-width: 1300px) {
     position: fixed;
     top: 56px;
+    top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
     right: ${(props) => props.$isOpen ? "0" : "-100%"} ;
     width: 280px;
     max-width: 280px;
     height: calc(100vh - 56px);
+    height: calc(100vh - 56px - max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
     background: linear-gradient(180deg, #0f1419 0%, #0a0e13 100%);
     z-index: 1000;
     transition: right 0.3s ease;
@@ -5530,10 +5804,10 @@ var MobileNavItem = styled24__default.default.div`
     padding-left: 24px;
   }
 `;
-var PropertySubheader = React5__namespace.forwardRef(
+var PropertySubheader = React9__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabsContainerRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const tabsContainerRef = React9__namespace.useRef(null);
+    React9__namespace.useEffect(() => {
       const container = tabsContainerRef.current;
       if (!container) return;
       const isMobile = window.innerWidth <= 768;
@@ -5675,27 +5949,27 @@ var LoginPopup = ({
   onFundWallet,
   initialView
 }) => {
-  const [view, setView] = React5.useState(() => initialView ?? "main");
-  const [email, setEmail] = React5.useState("");
-  const [handle, setHandle] = React5.useState("");
-  const [otp, setOtp] = React5.useState(Array(OTP_INPUT_LENGTH).fill(""));
-  const [error, setError] = React5.useState("");
-  const [loading, setLoading] = React5.useState(false);
-  const [isSignUp, setIsSignUp] = React5.useState(false);
-  const [fundingAmount] = React5.useState("");
-  const [kycLoading, setKycLoading] = React5.useState(false);
-  const [showKycWidget, setShowKycWidget] = React5.useState(false);
-  const [cryptoFundingLoading, setCryptoFundingLoading] = React5.useState(false);
-  const [fiatFundingLoading, setFiatFundingLoading] = React5.useState(false);
-  const [fundingError, setFundingError] = React5.useState("");
-  const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
-  const suppressAutoCloseRef = React5__namespace.default.useRef(false);
-  React5.useEffect(() => {
+  const [view, setView] = React9.useState(() => initialView ?? "main");
+  const [email, setEmail] = React9.useState("");
+  const [handle, setHandle] = React9.useState("");
+  const [otp, setOtp] = React9.useState(Array(OTP_INPUT_LENGTH).fill(""));
+  const [error, setError] = React9.useState("");
+  const [loading, setLoading] = React9.useState(false);
+  const [isSignUp, setIsSignUp] = React9.useState(false);
+  const [fundingAmount] = React9.useState("");
+  const [kycLoading, setKycLoading] = React9.useState(false);
+  const [showKycWidget, setShowKycWidget] = React9.useState(false);
+  const [cryptoFundingLoading, setCryptoFundingLoading] = React9.useState(false);
+  const [fiatFundingLoading, setFiatFundingLoading] = React9.useState(false);
+  const [fundingError, setFundingError] = React9.useState("");
+  const [transakWidgetUrl, setTransakWidgetUrl] = React9.useState(null);
+  const suppressAutoCloseRef = React9__namespace.default.useRef(false);
+  React9.useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
     }
   }, [initialView]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!transakWidgetUrl) return;
     const handleTransakMessage = (event) => {
       if (!event.origin.includes("transak.com") && !event.origin.includes("global.transak.com")) {
@@ -5720,7 +5994,7 @@ var LoginPopup = ({
     window.addEventListener("message", handleTransakMessage);
     return () => window.removeEventListener("message", handleTransakMessage);
   }, [transakWidgetUrl, onClose]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!autoCloseOnAuth) {
       return;
     }
@@ -6692,8 +6966,8 @@ var TransakIframe = styled24__default.default.iframe`
   border-radius: var(--border-radius, 12px);
 `;
 var MiniLiveFeed = () => {
-  const [purchases, setPurchases] = React5.useState([]);
-  React5.useEffect(() => {
+  const [purchases, setPurchases] = React9.useState([]);
+  React9.useEffect(() => {
     const handles = [
       "Landlord",
       "PropertyKing",
@@ -6869,7 +7143,7 @@ var MiniLiveFeed = () => {
   );
 };
 LoginPopup.displayName = "LoginPopup";
-var PropertyCompareBar = React5__namespace.forwardRef(
+var PropertyCompareBar = React9__namespace.forwardRef(
   ({
     className,
     addresses,
@@ -6880,7 +7154,7 @@ var PropertyCompareBar = React5__namespace.forwardRef(
     price,
     ...props
   }, ref) => {
-    const normalizedAddresses = React5__namespace.useMemo(() => {
+    const normalizedAddresses = React9__namespace.useMemo(() => {
       return addresses.map(
         (option) => typeof option === "string" ? { id: option, label: option } : option
       );
@@ -6888,11 +7162,11 @@ var PropertyCompareBar = React5__namespace.forwardRef(
     const hasAddresses = normalizedAddresses.length > 0;
     const firstAddressId = normalizedAddresses[0]?.id;
     const isControlled = selectedAddressId !== void 0;
-    const [internalSelectedId, setInternalSelectedId] = React5__namespace.useState(
+    const [internalSelectedId, setInternalSelectedId] = React9__namespace.useState(
       () => isControlled ? void 0 : firstAddressId
     );
     const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       if (!isControlled) {
         setInternalSelectedId((current) => {
           if (current != null && normalizedAddresses.some((option) => option.id === current)) {
@@ -6903,9 +7177,9 @@ var PropertyCompareBar = React5__namespace.forwardRef(
       }
     }, [firstAddressId, isControlled, normalizedAddresses]);
     const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
-    const [isDropdownOpen, setIsDropdownOpen] = React5__namespace.useState(false);
-    const dropdownRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const [isDropdownOpen, setIsDropdownOpen] = React9__namespace.useState(false);
+    const dropdownRef = React9__namespace.useRef(null);
+    React9__namespace.useEffect(() => {
       if (!isDropdownOpen) return;
       const handleClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -7308,11 +7582,11 @@ function GalleryMapSection({
   autoPlay = true,
   autoPlayInterval = 4e3
 }) {
-  const [carouselIndex, setCarouselIndex] = React5.useState(0);
-  const [showVideo, setShowVideo] = React5.useState(false);
-  const [autoPlaying, setAutoPlaying] = React5.useState(autoPlay);
+  const [carouselIndex, setCarouselIndex] = React9.useState(0);
+  const [showVideo, setShowVideo] = React9.useState(false);
+  const [autoPlaying, setAutoPlaying] = React9.useState(autoPlay);
   const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
     const interval = setInterval(() => {
       setCarouselIndex((p) => (p + 1) % images.length);
@@ -7628,9 +7902,10 @@ function PropertyOverview({
   bathrooms,
   carSpaces,
   propertyTypeLabel,
-  tokensIssued: tokensIssuedProp
+  tokensIssued: tokensIssuedProp,
+  isLoading = false
 }) {
-  const [isDescExpanded, setDescExpanded] = React5.useState(false);
+  const [isDescExpanded, setDescExpanded] = React9.useState(false);
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
   const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
@@ -7666,13 +7941,14 @@ function PropertyOverview({
   const weeklyRent = overviewData?.weeklyRent ?? 0;
   const annualRent = weeklyRent * 52;
   const dividendYield = resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
+  const loadingSkeleton = /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 18 });
   const financialItems = financialItemsProp ?? [
-    { label: "Token Price", value: tokenPriceValue ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "N/A", gold: true },
-    { label: "Property Value", value: resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "N/A" },
-    { label: "Weekly Rent", value: weeklyRent > 0 ? `$${weeklyRent.toLocaleString()}/wk` : "N/A", badge: weeklyRent > 0 ? "Rented" : void 0 },
-    { label: "Dividend Yield", value: dividendYield ? `${dividendYield}%` : "N/A" },
-    { label: "Total Tokens", value: resolvedTokensIssued ? resolvedTokensIssued.toLocaleString() : "N/A" },
-    { label: "Indicative Listing", value: overviewData?.indicativeListing ?? "N/A" }
+    { label: "Token Price", value: isLoading && tokenPriceValue == null ? loadingSkeleton : tokenPriceValue ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "N/A", gold: true },
+    { label: "Property Value", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "N/A" },
+    { label: "Weekly Rent", value: isLoading && !overviewData ? loadingSkeleton : weeklyRent > 0 ? `$${weeklyRent.toLocaleString()}/wk` : "N/A", badge: weeklyRent > 0 ? "Rented" : void 0 },
+    { label: "Dividend Yield", value: isLoading && dividendYield == null && resolvedValuation == null ? loadingSkeleton : dividendYield ? `${dividendYield}%` : "N/A" },
+    { label: "Total Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued ? resolvedTokensIssued.toLocaleString() : "N/A" },
+    { label: "Indicative Listing", value: isLoading && !overviewData ? loadingSkeleton : overviewData?.indicativeListing ?? "N/A" }
   ];
   const galleryImages = images ?? [];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -7976,8 +8252,8 @@ var OfferPricePulse = styled24__default.default.span`
 `;
 var eventTypes = ["Leased", "Renovated", "Extended", "Rebuilt", "Rezoned", "DA Approval"];
 function PropertyHistory() {
-  const [historyFilter, setHistoryFilter] = React5.useState("all");
-  const pastSales = React5.useMemo(() => generateMockPastSales(), []);
+  const [historyFilter, setHistoryFilter] = React9.useState("all");
+  const pastSales = React9.useMemo(() => generateMockPastSales(), []);
   const loafListing = pastSales.find((sale) => sale.type === "Listed");
   const loafEvents = pastSales.filter(
     (sale) => sale.ownershipPeriod === "current" && sale.type !== "Listed" && (sale.id === "leased-current" || sale.id === "da-approval")
@@ -8114,7 +8390,7 @@ function PropertyHistory() {
   ] });
 }
 function EventDetails({ event }) {
-  const [expanded, setExpanded] = React5.useState(false);
+  const [expanded, setExpanded] = React9.useState(false);
   const toggleExpand = () => {
     setExpanded((prev) => !prev);
   };
@@ -8902,7 +9178,7 @@ function AssetSelectorBar({
   selectorItems,
   onSelect
 }) {
-  const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
   const metrics = metricsProp ?? [
     ...tokenPrice != null ? [{ label: "Unit Price", value: `$${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, accent: true }] : [],
@@ -9171,15 +9447,15 @@ function OfferingProgressCard({
   targetAmount,
   isPrivateClient = false
 }) {
-  const [currentTime, setCurrentTime] = React5.useState(/* @__PURE__ */ new Date());
-  const [countdown, setCountdown] = React5.useState(null);
+  const [currentTime, setCurrentTime] = React9.useState(/* @__PURE__ */ new Date());
+  const [countdown, setCountdown] = React9.useState(null);
   const computedRaised = raisedAmount ?? totalSold * tokenPrice;
   const computedTarget = targetAmount ?? supplyToSell * tokenPrice;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const timer = setInterval(() => setCurrentTime(/* @__PURE__ */ new Date()), 1e3);
     return () => clearInterval(timer);
   }, []);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!opensAt) {
       setCountdown(null);
       return;
@@ -9516,14 +9792,19 @@ var formatTimeAgo2 = (timestamp) => {
 };
 function VideoActivitySection({
   ipoStarted,
+  ipoEnded = false,
+  isLoading = false,
   recentOrders = [],
   ordersAllocated = 0,
   tokenPrice = 0
 }) {
-  const sortedOrders = React5.useMemo(
+  const sortedOrders = React9.useMemo(
     () => [...recentOrders].sort((a, b) => b.timestamp - a.timestamp).slice(0, 7),
     [recentOrders]
   );
+  const headerStatusText = ipoEnded ? `Sale ended${ordersAllocated > 0 ? ` \xB7 ${ordersAllocated.toLocaleString()} orders` : ""}` : ipoStarted ? isLoading && sortedOrders.length === 0 ? "Loading orders\u2026" : `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open";
+  const showSkeletonFeed = ipoStarted && isLoading && sortedOrders.length === 0;
+  const showOrderFeed = !showSkeletonFeed && (ipoStarted || ipoEnded && sortedOrders.length > 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(Section3, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VideoPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "section-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Musgrave" }) }),
@@ -9535,31 +9816,40 @@ function VideoActivitySection({
     /* @__PURE__ */ jsxRuntime.jsxs(ActivityPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "section-header", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(LiveIndicatorDot, { $active: ipoStarted }),
+          /* @__PURE__ */ jsxRuntime.jsx(LiveIndicatorDot, { $active: ipoStarted && !ipoEnded }),
           "Recent Order Activity"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: ipoStarted ? `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open" })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: headerStatusText })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "activity-content", children: ipoStarted ? /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: sortedOrders.map((order, index) => {
-        const amount = tokenPrice * order.quantity;
-        const barPercent = Math.min(85, Math.max(15, amount / MAX_DISPLAY_AMOUNT * 100));
-        const isAlternate = index % 2 === 1;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          PurchaseItem,
-          {
-            $barWidth: `${barPercent}%`,
-            $isAlternate: isAlternate,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(PurchaseInfo, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
-                /* @__PURE__ */ jsxRuntime.jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(PurchaseAmount, { children: formatCurrency4(amount) })
-            ]
-          },
-          order.txHash
-        );
-      }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "activity-empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "activity-content", children: showSkeletonFeed ? /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(SkeletonFeedRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "info-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 14 }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 56, height: 10 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 70, height: 14 })
+      ] }, `feed-skel-${i}`)) }) : showOrderFeed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        ipoEnded && /* @__PURE__ */ jsxRuntime.jsx(EndedBanner, { children: "Sale ended \u2014 final allocations" }),
+        /* @__PURE__ */ jsxRuntime.jsx(FeedList, { children: sortedOrders.map((order, index) => {
+          const amount = tokenPrice * order.quantity;
+          const barPercent = Math.min(85, Math.max(15, amount / MAX_DISPLAY_AMOUNT * 100));
+          const isAlternate = index % 2 === 1;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            PurchaseItem,
+            {
+              $barWidth: `${barPercent}%`,
+              $isAlternate: isAlternate,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(PurchaseInfo, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
+                  /* @__PURE__ */ jsxRuntime.jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(PurchaseAmount, { children: formatCurrency4(amount) })
+              ]
+            },
+            order.txHash
+          );
+        }) })
+      ] }) : ipoEnded ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "activity-empty", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Sale ended \u2014 no orders were placed." }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "activity-empty", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "spinner" }),
         /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Activity will appear once the Offering opens" })
       ] }) })
@@ -9700,6 +9990,43 @@ var ActivityPanel = styled24__default.default.div`
     to { transform: rotate(360deg); }
   }
 `;
+var SkeletonFeedRow = styled24__default.default.div`
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .info-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    min-width: 0;
+    flex: 1;
+  }
+
+  @media (max-width: 768px) {
+    padding: 0.4rem 0.6rem;
+  }
+`;
+var EndedBanner = styled24__default.default.div`
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.55);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  padding: 0.4rem 0.6rem;
+  margin-bottom: 0.5rem;
+  text-align: center;
+`;
 var FeedList = styled24__default.default.div`
   width: 100%;
   overflow-y: auto;
@@ -9817,10 +10144,10 @@ function OrderPanel({
   tokenDisplayName,
   tokenSymbol
 }) {
-  const [payInputValue, setPayInputValue] = React5.useState("");
-  const [receiveInputValue, setReceiveInputValue] = React5.useState("");
-  const [isPayInputFocused, setIsPayInputFocused] = React5.useState(false);
-  const [isReceiveInputFocused, setIsReceiveInputFocused] = React5.useState(false);
+  const [payInputValue, setPayInputValue] = React9.useState("");
+  const [receiveInputValue, setReceiveInputValue] = React9.useState("");
+  const [isPayInputFocused, setIsPayInputFocused] = React9.useState(false);
+  const [isReceiveInputFocused, setIsReceiveInputFocused] = React9.useState(false);
   const handlePayBlur = () => {
     setIsPayInputFocused(false);
     const parsed = parseInt(payInputValue.replace(/[^0-9]/g, ""), 10) || 0;
@@ -10666,9 +10993,9 @@ function PortfolioActivityPanel({
   style
 }) {
   const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : "subscriptions");
-  const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
-  const [activityPage, setActivityPage] = React5.useState(0);
-  const activeTabTotal = React5.useMemo(() => {
+  const [activeTab, setActiveTab] = React9.useState(resolvedDefaultTab);
+  const [activityPage, setActivityPage] = React9.useState(0);
+  const activeTabTotal = React9.useMemo(() => {
     switch (activeTab) {
       case "positions":
         return positions.length;
@@ -10686,6 +11013,22 @@ function PortfolioActivityPanel({
         return 0;
     }
   }, [activeTab, positions.length, offeringOrders.length, openOrders.length, orderHistory.length, tradeHistory.length, transfers.length]);
+  const positionsCount = positions.length;
+  const openOrdersCount = React9.useMemo(
+    () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
+    [openOrders]
+  );
+  const pendingHistoryCount = React9.useMemo(
+    () => orderHistory.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
+    [orderHistory]
+  );
+  const pendingOfferingsCount = React9.useMemo(
+    () => offeringOrders.filter((o) => {
+      const s = o.status.toUpperCase();
+      return s !== "FILLED" && s !== "ALLOCATED" && s !== "CONFIRMED" && s !== "CANCELLED" && s !== "CANCELED" && s !== "REJECTED";
+    }).length,
+    [offeringOrders]
+  );
   const activityTotalPages = Math.ceil(activeTabTotal / pageSize);
   const pageSlice = (arr) => arr.slice(activityPage * pageSize, (activityPage + 1) * pageSize);
   const handleTabChange = (tab) => {
@@ -10695,10 +11038,38 @@ function PortfolioActivityPanel({
   return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { className, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxRuntime.jsxs(TabContainer, { children: [
-      showPositionsTab && /* @__PURE__ */ jsxRuntime.jsx(Tab, { $active: activeTab === "positions", onClick: () => handleTabChange("positions"), children: "Positions" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { $active: activeTab === "subscriptions", onClick: () => handleTabChange("subscriptions"), children: "Initial Offerings" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { $active: activeTab === "open-orders", onClick: () => handleTabChange("open-orders"), children: "Open Orders" }),
-      /* @__PURE__ */ jsxRuntime.jsx(Tab, { $active: activeTab === "orders", onClick: () => handleTabChange("orders"), children: "Order History" }),
+      showPositionsTab && /* @__PURE__ */ jsxRuntime.jsxs(Tab, { $active: activeTab === "positions", onClick: () => handleTabChange("positions"), children: [
+        "Positions",
+        positionsCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(TabCount, { children: [
+          " (",
+          positionsCount,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tab, { $active: activeTab === "subscriptions", onClick: () => handleTabChange("subscriptions"), children: [
+        "Initial Offerings",
+        pendingOfferingsCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(TabCount, { children: [
+          " (",
+          pendingOfferingsCount,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tab, { $active: activeTab === "open-orders", onClick: () => handleTabChange("open-orders"), children: [
+        "Open Orders",
+        openOrdersCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(TabCount, { children: [
+          " (",
+          openOrdersCount,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Tab, { $active: activeTab === "orders", onClick: () => handleTabChange("orders"), children: [
+        "Order History",
+        pendingHistoryCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(TabCount, { children: [
+          " (",
+          pendingHistoryCount,
+          ")"
+        ] })
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Tab, { $active: activeTab === "trades", onClick: () => handleTabChange("trades"), children: "Trade History" }),
       /* @__PURE__ */ jsxRuntime.jsx(Tab, { $active: activeTab === "transfers", onClick: () => handleTabChange("transfers"), children: "Transfers" })
     ] }),
@@ -10783,8 +11154,10 @@ function PortfolioActivityPanel({
       openOrders.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "Open orders will appear here while they are working in the market." }),
       pageSlice(openOrders).map((order) => {
         const meta = getOrderStatusMeta(order.status);
-        const priceDisplay = order.price ? formatCurrency5(order.price) : "Market";
-        const amountDisplay = order.price ? formatCurrency5(order.price * order.quantity) : "\u2014";
+        const isMarket = order.type === "MARKET";
+        const priceSegment = isMarket || !order.price ? "" : ` \xB7 ${formatCurrency5(order.price)}`;
+        const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
+        const amountDisplay = !isMarket && order.price ? formatCurrency5(order.price * order.quantity) : "\u2014";
         const isCancelling = cancellingOrderId === order.id;
         return /* @__PURE__ */ jsxRuntime.jsxs(ActivityRow, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ActivitySideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }),
@@ -10794,9 +11167,10 @@ function PortfolioActivityPanel({
               formatNumber2(order.quantity),
               " tokens \xB7 ",
               prettyLabel(order.type),
+              priceSegment,
               " \xB7 ",
-              priceDisplay,
-              " \xB7 ",
+              filledPercent,
+              "% filled \xB7 ",
               formatTimestamp(order.createdAt)
             ] })
           ] }),
@@ -10823,8 +11197,10 @@ function PortfolioActivityPanel({
       orderHistory.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: "No orders yet. Place a trade to see it appear here." }),
       pageSlice(orderHistory).map((order) => {
         const meta = getOrderStatusMeta(order.status);
-        const priceDisplay = order.price ? formatCurrency5(order.price) : "Market";
-        const amountDisplay = order.price ? formatCurrency5(order.price * order.quantity) : "\u2014";
+        const isMarket = order.type === "MARKET";
+        const priceSegment = isMarket || !order.price ? "" : ` \xB7 ${formatCurrency5(order.price)}`;
+        const filledPercent = order.quantity > 0 ? Math.round(order.filledQuantity / order.quantity * 100) : 0;
+        const amountDisplay = !isMarket && order.price ? formatCurrency5(order.price * order.quantity) : "\u2014";
         return /* @__PURE__ */ jsxRuntime.jsxs(ActivityRow, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ActivitySideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }),
           /* @__PURE__ */ jsxRuntime.jsxs(ActivityInfo, { children: [
@@ -10833,9 +11209,10 @@ function PortfolioActivityPanel({
               formatNumber2(order.quantity),
               " tokens \xB7 ",
               prettyLabel(order.type),
+              priceSegment,
               " \xB7 ",
-              priceDisplay,
-              " \xB7 ",
+              filledPercent,
+              "% filled \xB7 ",
               formatTimestamp(order.createdAt)
             ] })
           ] }),
@@ -10977,6 +11354,12 @@ var Tab = styled24__default.default.button`
     color: ${({ $active }) => $active ? "#fff" : "rgba(255, 255, 255, 0.65)"};
   }
 `;
+var TabCount = styled24__default.default.span`
+  color: inherit;
+  opacity: 0.7;
+  font-weight: 500;
+  margin-left: 2px;
+`;
 var ActivityRow = styled24__default.default.div`
   display: grid;
   grid-template-columns: auto 1fr auto auto;
@@ -11620,23 +12003,24 @@ function PropertyBuy({
   recentOrders = [],
   ordersAllocated = 0,
   subscribers = 0,
+  isLoadingActivity = false,
   selectorItems,
   onSelectorSelect,
   portfolioActivity
 }) {
-  const [sliderValue, setSliderValue] = React5.useState(0);
-  const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 0);
-  const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
-  const [ownedTokens, setOwnedTokens] = React5.useState(0);
-  const [displayedOwnedTokens, setDisplayedOwnedTokens] = React5.useState(0);
-  const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = React5.useState(false);
-  const [lastOrderQuantity, setLastOrderQuantity] = React5.useState(0);
-  const [orderPendingAllocation, setOrderPendingAllocation] = React5.useState(false);
-  const [orderPlacedSuccess, setOrderPlacedSuccess] = React5.useState(false);
-  const [lastOrderDetails, setLastOrderDetails] = React5.useState(null);
-  const [showOrderConfirmModal, setShowOrderConfirmModal] = React5.useState(false);
-  const [, setLiveNewsIndex] = React5.useState(0);
-  const [newsItems, setNewsItems] = React5.useState(
+  const [sliderValue, setSliderValue] = React9.useState(0);
+  const [availableBalance, setAvailableBalance] = React9.useState(walletUsdcBalance ?? 0);
+  const [manualOrderAmount, setManualOrderAmount] = React9.useState(null);
+  const [ownedTokens, setOwnedTokens] = React9.useState(0);
+  const [displayedOwnedTokens, setDisplayedOwnedTokens] = React9.useState(0);
+  const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = React9.useState(false);
+  const [lastOrderQuantity, setLastOrderQuantity] = React9.useState(0);
+  const [orderPendingAllocation, setOrderPendingAllocation] = React9.useState(false);
+  const [orderPlacedSuccess, setOrderPlacedSuccess] = React9.useState(false);
+  const [lastOrderDetails, setLastOrderDetails] = React9.useState(null);
+  const [showOrderConfirmModal, setShowOrderConfirmModal] = React9.useState(false);
+  const [, setLiveNewsIndex] = React9.useState(0);
+  const [newsItems, setNewsItems] = React9.useState(
     () => allNewsItems.slice(0, 4).map((item, index) => ({
       ...item,
       displayId: `${item.id}-initial-${index}`,
@@ -11652,6 +12036,7 @@ function PropertyBuy({
   const offeringValuation = saleData?.offeringValuation ?? tokenPrice * supplyToSell;
   const ipoStatus = saleData?.status ?? "PENDING";
   const ipoStarted = ipoStatus === "LIVE" || isPrivateClient && ipoStatus === "PENDING";
+  const ipoEnded = ipoStatus === "CLOSED" || ipoStatus === "CANCELLED";
   const statusLabel = ipoStatus;
   const statusColor = STATUS_COLOR2[ipoStatus] ?? "#D4AF37";
   const displayStatusLabel = isPrivateClient && ipoStatus !== "LIVE" ? "Private Client Access" : statusLabel;
@@ -11662,12 +12047,12 @@ function PropertyBuy({
   const orderTotal = tokenQuantity * tokenPrice + feeInUsd;
   const estExposure = (tokenQuantity / supplyToSell * 100).toFixed(4);
   const hasInsufficientFunds = orderTotal > availableBalance;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (walletUsdcBalance != null) {
       setAvailableBalance(walletUsdcBalance);
     }
   }, [walletUsdcBalance]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (walletPropertyTokenBalance != null) {
       setOwnedTokens(walletPropertyTokenBalance);
       setDisplayedOwnedTokens(walletPropertyTokenBalance);
@@ -11679,13 +12064,13 @@ function PropertyBuy({
     }
     setShowOrderConfirmModal(true);
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (purchaseStatus === "success" && orderPendingAllocation) {
       setOrderPendingAllocation(false);
       setOrderPlacedSuccess(true);
     }
   }, [purchaseStatus, orderPendingAllocation]);
-  const handlePlaceAnotherOrder = React5.useCallback(() => {
+  const handlePlaceAnotherOrder = React9.useCallback(() => {
     setOrderPlacedSuccess(false);
     setOrderPendingAllocation(false);
   }, []);
@@ -11742,7 +12127,7 @@ function PropertyBuy({
     setSliderValue(0);
     setManualOrderAmount(null);
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const newsInterval = setInterval(() => {
       setLiveNewsIndex((prev) => {
         const nextIndex = (prev + 1) % allNewsItems.length;
@@ -11802,6 +12187,8 @@ function PropertyBuy({
         VideoActivitySection,
         {
           ipoStarted,
+          ipoEnded,
+          isLoading: isLoadingActivity,
           recentOrders,
           ordersAllocated,
           tokenPrice
@@ -12036,7 +12423,7 @@ function PaymentPopup({
   userTokenHoldings,
   propertyName
 }) {
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = React5.useState(
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = React9.useState(
     "tokens"
   );
   if (!isOpen) return null;
@@ -12215,20 +12602,20 @@ function PaymentPopup({
 var payment_popup_default = PaymentPopup;
 var SUMMER_MONTHS = /* @__PURE__ */ new Set([11, 0, 1]);
 var OwnerBooking = ({ propertyName, token }) => {
-  const today = React5.useMemo(() => {
+  const today = React9.useMemo(() => {
     const base = /* @__PURE__ */ new Date();
     base.setHours(0, 0, 0, 0);
     return base;
   }, []);
-  const [currentYear, setCurrentYear] = React5.useState(today.getFullYear());
-  const [currentMonth, setCurrentMonth] = React5.useState(today.getMonth());
-  const [dateRanges, setDateRanges] = React5.useState([]);
-  const [selectedDates, setSelectedDates] = React5.useState([]);
-  const [hoverDate, setHoverDate] = React5.useState(null);
-  const [isDateSelectorOpen, setIsDateSelectorOpen] = React5.useState(false);
-  const [selectorYear, setSelectorYear] = React5.useState(today.getFullYear());
-  const [isPaymentPopupOpen, setIsPaymentPopupOpen] = React5.useState(false);
-  const dateSelectorRef = React5.useRef(null);
+  const [currentYear, setCurrentYear] = React9.useState(today.getFullYear());
+  const [currentMonth, setCurrentMonth] = React9.useState(today.getMonth());
+  const [dateRanges, setDateRanges] = React9.useState([]);
+  const [selectedDates, setSelectedDates] = React9.useState([]);
+  const [hoverDate, setHoverDate] = React9.useState(null);
+  const [isDateSelectorOpen, setIsDateSelectorOpen] = React9.useState(false);
+  const [selectorYear, setSelectorYear] = React9.useState(today.getFullYear());
+  const [isPaymentPopupOpen, setIsPaymentPopupOpen] = React9.useState(false);
+  const dateSelectorRef = React9.useRef(null);
   const tokenPrice = token.price ?? 700;
   const userTokenHoldings = 2.2;
   const MIN_NIGHTS = 3;
@@ -12238,25 +12625,25 @@ var OwnerBooking = ({ propertyName, token }) => {
     { bg: "rgba(230, 126, 34, 0.25)", border: "rgba(230, 126, 34, 0.6)" },
     { bg: "rgba(46, 204, 113, 0.25)", border: "rgba(46, 204, 113, 0.6)" }
   ];
-  const calculateTokensPerDayOwner = React5.useCallback(() => {
+  const calculateTokensPerDayOwner = React9.useCallback(() => {
     if (tokenPrice <= 0) return 0;
     const target = 650;
     const raw = target / tokenPrice;
     return Math.ceil(raw * 1e4) / 1e4;
   }, [tokenPrice]);
-  const calculateTokensPerDayMarket = React5.useCallback(() => {
+  const calculateTokensPerDayMarket = React9.useCallback(() => {
     if (tokenPrice <= 0) return 0;
     const target = 900;
     const raw = target / tokenPrice;
     return Math.ceil(raw * 1e4) / 1e4;
   }, [tokenPrice]);
   const qualifiesForOwnerRate = userTokenHoldings >= 0.1;
-  const getTokensPerDay = React5.useCallback(
+  const getTokensPerDay = React9.useCallback(
     () => calculateTokensPerDayOwner() ,
     [qualifiesForOwnerRate, calculateTokensPerDayOwner, calculateTokensPerDayMarket]
   );
   const getRateLabel = () => "Owner's Rate" ;
-  const selectionStats = React5.useMemo(() => {
+  const selectionStats = React9.useMemo(() => {
     if (selectedDates.length !== 2) return null;
     const [a, b] = selectedDates;
     const start = a < b ? a : b;
@@ -12267,10 +12654,10 @@ var OwnerBooking = ({ propertyName, token }) => {
     const usd = tokens * tokenPrice;
     return { nights, tokensPerDay, tokens, usd, start, end };
   }, [selectedDates, getTokensPerDay, tokenPrice]);
-  const totalNights = React5.useMemo(() => dateRanges.reduce((sum, r) => sum + r.nights, 0), [dateRanges]);
-  const totalTokens = React5.useMemo(() => dateRanges.reduce((sum, r) => sum + r.tokens, 0), [dateRanges]);
+  const totalNights = React9.useMemo(() => dateRanges.reduce((sum, r) => sum + r.nights, 0), [dateRanges]);
+  const totalTokens = React9.useMemo(() => dateRanges.reduce((sum, r) => sum + r.tokens, 0), [dateRanges]);
   const totalUSD = totalTokens * tokenPrice;
-  const generateCalendarDays = React5.useCallback(
+  const generateCalendarDays = React9.useCallback(
     (year, month) => {
       const first = new Date(year, month, 1);
       const last = new Date(year, month + 1, 0);
@@ -12299,11 +12686,11 @@ var OwnerBooking = ({ propertyName, token }) => {
     },
     [today]
   );
-  const calendarDays = React5.useMemo(
+  const calendarDays = React9.useMemo(
     () => generateCalendarDays(currentYear, currentMonth),
     [currentYear, currentMonth, generateCalendarDays]
   );
-  const isDateReserved = React5.useCallback(
+  const isDateReserved = React9.useCallback(
     (date) => dateRanges.some((r) => date >= r.arrival && date <= r.departure),
     [dateRanges]
   );
@@ -12397,14 +12784,14 @@ var OwnerBooking = ({ propertyName, token }) => {
     "December"
   ];
   const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const setMonthYear = React5.useCallback(
+  const setMonthYear = React9.useCallback(
     (month, year) => {
       setCurrentMonth(month);
       setCurrentYear(year);
     },
     [setCurrentMonth, setCurrentYear]
   );
-  const shiftMonth = React5.useCallback(
+  const shiftMonth = React9.useCallback(
     (direction) => {
       const delta = direction === "prev" ? -1 : 1;
       let newMonth = currentMonth + delta;
@@ -12421,7 +12808,7 @@ var OwnerBooking = ({ propertyName, token }) => {
     },
     [currentMonth, currentYear, setMonthYear]
   );
-  const jumpToNextAvailable = React5.useCallback(() => {
+  const jumpToNextAvailable = React9.useCallback(() => {
     for (let offset = 1; offset <= 12; offset++) {
       const candidateMonth = (currentMonth + offset) % 12;
       if (!SUMMER_MONTHS.has(candidateMonth)) continue;
@@ -12438,7 +12825,7 @@ var OwnerBooking = ({ propertyName, token }) => {
     setMonthYear(month, selectorYear);
     setIsDateSelectorOpen(false);
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dateSelectorRef.current && !dateSelectorRef.current.contains(event.target)) {
         setIsDateSelectorOpen(false);
@@ -12882,21 +13269,21 @@ function PropertyValuation({
   loading = false,
   error = null
 }) {
-  const now = React5.useMemo(() => /* @__PURE__ */ new Date(), []);
-  const lastPrice = React5.useMemo(() => {
+  const now = React9.useMemo(() => /* @__PURE__ */ new Date(), []);
+  const lastPrice = React9.useMemo(() => {
     const fallback = Number.isFinite(tokenPrice) && tokenPrice > 0 ? tokenPrice : 0;
     if (!summary?.lastPrice || summary.lastPrice <= 0) {
       return fallback;
     }
     return summary.lastPrice;
   }, [summary, tokenPrice]);
-  const fairValue = React5.useMemo(() => {
+  const fairValue = React9.useMemo(() => {
     if (summary?.fairValue && summary.fairValue > 0) {
       return summary.fairValue;
     }
     return lastPrice || 1;
   }, [summary, lastPrice]);
-  const tokensOutstanding = React5.useMemo(() => {
+  const tokensOutstanding = React9.useMemo(() => {
     if (summary?.totalTokens && summary.totalTokens > 0) {
       return summary.totalTokens;
     }
@@ -12911,8 +13298,8 @@ function PropertyValuation({
   const valuationStatus = summary?.valuationStatus ?? (lastPrice < fairValue ? "Undervalued" : lastPrice > fairValue ? "Overvalued" : "Fair Value");
   const valuationDelta = summary?.valuationDeltaPercent ?? (lastPrice - fairValue) / fairValue * 100;
   const valuationDeltaFormatted = `${valuationDelta >= 0 ? "+" : ""}${valuationDelta.toFixed(1)}%`;
-  const { valuationPath, fairValuePath, axisLabels } = React5.useMemo(() => buildChartPaths(history, fairValue), [history, fairValue]);
-  const recentSales = React5.useMemo(() => {
+  const { valuationPath, fairValuePath, axisLabels } = React9.useMemo(() => buildChartPaths(history, fairValue), [history, fairValue]);
+  const recentSales = React9.useMemo(() => {
     if (summary?.recentSales?.length) {
       return summary.recentSales;
     }
@@ -14064,19 +14451,19 @@ function PropertyPhotoGallery({
   );
 }
 function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose }) {
-  const [currentIndex, setCurrentIndex] = React5.useState(() => clampIndex(startIndex, galleryImages.length));
-  const [activeHotspotId, setActiveHotspotId] = React5.useState(null);
-  const sliderRef = React5.useRef(null);
-  const [isDragging, setIsDragging] = React5.useState(false);
-  const wasDraggingRef = React5.useRef(false);
-  const touchStartX = React5.useRef(null);
-  const touchStartY = React5.useRef(null);
-  const isSwiping = React5.useRef(false);
-  const progress = React5.useMemo(() => {
+  const [currentIndex, setCurrentIndex] = React9.useState(() => clampIndex(startIndex, galleryImages.length));
+  const [activeHotspotId, setActiveHotspotId] = React9.useState(null);
+  const sliderRef = React9.useRef(null);
+  const [isDragging, setIsDragging] = React9.useState(false);
+  const wasDraggingRef = React9.useRef(false);
+  const touchStartX = React9.useRef(null);
+  const touchStartY = React9.useRef(null);
+  const isSwiping = React9.useRef(false);
+  const progress = React9.useMemo(() => {
     if (galleryImages.length <= 1) return 0;
     return currentIndex / (galleryImages.length - 1) * 100;
   }, [currentIndex, galleryImages.length]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     document.body.style.overflow = "hidden";
     document.body.style.touchAction = "none";
     return () => {
@@ -14084,7 +14471,7 @@ function GalleryContent({ galleryImages, startIndex, title, subtitle, onClose })
       document.body.style.touchAction = "";
     };
   }, []);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleKey = (event) => {
       if (event.key === "Escape") onClose();
       if (event.key === "ArrowLeft") setCurrentIndex((i) => i === 0 ? galleryImages.length - 1 : i - 1);
@@ -14357,13 +14744,13 @@ 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(() => {
+  const [exiting, setExiting] = React9.useState(false);
+  const timerRef = React9.useRef(null);
+  const dismiss = React9.useCallback(() => {
     setExiting(true);
     setTimeout(() => onDismiss(toast.id), 280);
   }, [onDismiss, toast.id]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const duration2 = toast.duration ?? 6e3;
     if (duration2 > 0) {
       timerRef.current = setTimeout(dismiss, duration2);
@@ -14392,15 +14779,15 @@ function ToastItem({ toast, onDismiss }) {
     duration > 0 && /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { $color: accent, $duration: duration })
   ] });
 }
-var ToastContext = React5.createContext(null);
+var ToastContext = React9.createContext(null);
 function ToastProvider({ children }) {
-  const [toasts, setToasts] = React5.useState([]);
-  const addToast = React5.useCallback((data) => {
+  const [toasts, setToasts] = React9.useState([]);
+  const addToast = React9.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) => {
+  const dismiss = React9.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, dismiss }, children: [
@@ -14409,10 +14796,71 @@ function ToastProvider({ children }) {
   ] });
 }
 function useToast() {
-  const ctx = React5.useContext(ToastContext);
+  const ctx = React9.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a ToastProvider");
   return ctx;
 }
+var INTERVALS = [1e3, 2e3, 4e3, 5e3, 7e3, 1e4, 12e3];
+function useAdaptivePolling({ enabled, onPoll }) {
+  const onPollRef = React9.useRef(onPoll);
+  onPollRef.current = onPoll;
+  React9.useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+    let timeoutId = null;
+    let step = 0;
+    const clear = () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = null;
+      }
+    };
+    const isHidden = () => typeof document !== "undefined" && document.visibilityState === "hidden";
+    const tick = async () => {
+      if (cancelled) return;
+      if (isHidden()) {
+        return;
+      }
+      try {
+        await onPollRef.current();
+      } catch {
+      }
+      if (cancelled) return;
+      step = Math.min(step + 1, INTERVALS.length - 1);
+      timeoutId = setTimeout(tick, INTERVALS[step]);
+    };
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") {
+        step = 0;
+        clear();
+        timeoutId = setTimeout(tick, 0);
+      }
+    };
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", onVisibility);
+    }
+    timeoutId = setTimeout(tick, INTERVALS[0]);
+    return () => {
+      cancelled = true;
+      clear();
+      if (typeof document !== "undefined") {
+        document.removeEventListener("visibilitychange", onVisibility);
+      }
+    };
+  }, [enabled]);
+}
+function hasPendingActivity(data) {
+  if (!data) return false;
+  const openPending = data.openOrders?.some((o) => {
+    const s = o.status.toUpperCase();
+    return s === "OPEN" || s === "PARTIALLY_FILLED";
+  }) ?? false;
+  if (openPending) return true;
+  return data.offeringOrders?.some((o) => {
+    const s = o.status.toUpperCase();
+    return s !== "FILLED" && s !== "ALLOCATED" && s !== "CONFIRMED" && s !== "CANCELLED" && s !== "CANCELED" && s !== "REJECTED";
+  }) ?? false;
+}
 
 exports.AssetSelectorBar = AssetSelectorBar;
 exports.Badge = Badge;
@@ -14449,12 +14897,15 @@ exports.PropertyPhotoGallery = PropertyPhotoGallery;
 exports.PropertySubheader = PropertySubheader;
 exports.PropertyTour = PropertyTour;
 exports.PropertyValuation = PropertyValuation;
+exports.Skeleton = Skeleton;
 exports.ToastProvider = ToastProvider;
 exports.TradeConfirmationModal = TradeConfirmationModal;
 exports.TradingSlider = TradingSlider;
 exports.YourOrders = YourOrders;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
+exports.hasPendingActivity = hasPendingActivity;
+exports.useAdaptivePolling = useAdaptivePolling;
 exports.useToast = useToast;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map