@loafmarkets/ui 0.1.41 → 0.1.43

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import * as React5 from 'react';
-import React5__default, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
+import * as React9 from 'react';
+import React9__default, { createContext, useState, useEffect, useMemo, useCallback, useRef, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
@@ -50,7 +50,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React5.forwardRef(
+var Button = React9.forwardRef(
   ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     const coercedRadius = radius ?? (variant === "onboarding" || variant === "onboardingOutline" ? "square" : void 0);
@@ -89,11 +89,11 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = React5.forwardRef(
+var Badge = React9.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
 );
 Badge.displayName = "Badge";
-var Card = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -105,11 +105,11 @@ var Card = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React5.forwardRef(
+var CardHeader = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5.forwardRef(
+var CardTitle = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "h3",
     {
@@ -120,15 +120,15 @@ var CardTitle = React5.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5.forwardRef(
+var CardDescription = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React5.forwardRef(
+var CardContent = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React5.forwardRef(
+var CardFooter = React9.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -146,7 +146,7 @@ var defaultFormatSignedCurrency = (value) => {
   const sign = value >= 0 ? "+" : "-";
   return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
 };
-var PortfolioSummary = React5.forwardRef(
+var PortfolioSummary = React9.forwardRef(
   ({
     availableCash,
     portfolioValue,
@@ -296,23 +296,23 @@ function HousePositionSlider({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5.useState("none");
-  const [buyTrackingMode, setBuyTrackingMode] = React5.useState("dollars");
-  const [deltaDollars, setDeltaDollars] = React5.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5.useState(0);
-  const [_isDragging, setIsDragging] = React5.useState(false);
-  const [visualTargetPct, setVisualTargetPct] = React5.useState(null);
-  const [orderType, setOrderType] = React5.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5.useState(false);
-  const [ownershipInput, setOwnershipInput] = React5.useState("");
-  const [tokenAmountInput, setTokenAmountInput] = React5.useState("");
-  const houseRef = React5.useRef(null);
+  const [orderMode, setOrderMode] = React9.useState("none");
+  const [buyTrackingMode, setBuyTrackingMode] = React9.useState("dollars");
+  const [deltaDollars, setDeltaDollars] = React9.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React9.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React9.useState(0);
+  const [_isDragging, setIsDragging] = React9.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = React9.useState(null);
+  const [orderType, setOrderType] = React9.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React9.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React9.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React9.useState(false);
+  const [ownershipInput, setOwnershipInput] = React9.useState("");
+  const [tokenAmountInput, setTokenAmountInput] = React9.useState("");
+  const houseRef = React9.useRef(null);
   const asks = orderbook?.asks ?? [];
   const bids = orderbook?.bids ?? [];
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -387,7 +387,7 @@ function HousePositionSlider({
   const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
   const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
-  const resetOrder = React5.useCallback(() => {
+  const resetOrder = React9.useCallback(() => {
     setOrderMode("none");
     setBuyTrackingMode("dollars");
     setDeltaDollars(0);
@@ -395,7 +395,7 @@ function HousePositionSlider({
     setDeltaTokensSell(0);
     setVisualTargetPct(null);
   }, []);
-  const updateOrderFromTargetValue = React5.useCallback(
+  const updateOrderFromTargetValue = React9.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0) {
@@ -419,7 +419,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
   );
-  const updateOrderFromOwnership = React5.useCallback(
+  const updateOrderFromOwnership = React9.useCallback(
     (newOwnershipPercent) => {
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
@@ -428,7 +428,7 @@ function HousePositionSlider({
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
-  const updateOrderFromTokenAmount = React5.useCallback(
+  const updateOrderFromTokenAmount = React9.useCallback(
     (tokenAmountSigned) => {
       if (tokenAmountSigned > 0) {
         const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
@@ -451,7 +451,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
   );
-  const updateOrderFromSlider = React5.useCallback(
+  const updateOrderFromSlider = React9.useCallback(
     (pct) => {
       const normalized = (pct - 50) / 50;
       const magnitude = Math.min(Math.abs(normalized), 1);
@@ -495,7 +495,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
-  const handleDragAtClientY = React5.useCallback(
+  const handleDragAtClientY = React9.useCallback(
     (clientY) => {
       if (!houseRef.current) return;
       const rect = houseRef.current.getBoundingClientRect();
@@ -1011,18 +1011,18 @@ function HousePositionSliderMobile({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5.useState("none");
-  const [deltaDollars, setDeltaDollars] = React5.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5.useState(0);
-  const [buyTrackingMode, setBuyTrackingMode] = React5.useState("dollars");
-  const [orderType, setOrderType] = React5.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5.useState(false);
-  const [tokenAmountInput, setTokenAmountInput] = React5.useState("");
-  const houseRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [orderMode, setOrderMode] = React9.useState("none");
+  const [deltaDollars, setDeltaDollars] = React9.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React9.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React9.useState(0);
+  const [buyTrackingMode, setBuyTrackingMode] = React9.useState("dollars");
+  const [orderType, setOrderType] = React9.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React9.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React9.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React9.useState(false);
+  const [tokenAmountInput, setTokenAmountInput] = React9.useState("");
+  const houseRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -1064,7 +1064,7 @@ function HousePositionSliderMobile({
   const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
   const targetOwnership = totalTokens > 0 ? targetTokens / totalTokens * 100 : 0;
   const estFeeTokens = effectivePrice > 0 ? Math.abs(deltaValue) * 5e-3 / effectivePrice : 0;
-  const updateOrderFromTargetValue = React5.useCallback(
+  const updateOrderFromTargetValue = React9.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0.01) {
@@ -1092,7 +1092,7 @@ function HousePositionSliderMobile({
     },
     [holdingsValue, availableCash, effectivePrice, tokensHeld]
   );
-  const updateOrderFromTokenAmount = React5.useCallback(
+  const updateOrderFromTokenAmount = React9.useCallback(
     (tokenAmount) => {
       if (tokenAmount > 0) {
         const maxTokens = effectivePrice > 0 ? availableCash / effectivePrice : 0;
@@ -1119,14 +1119,14 @@ function HousePositionSliderMobile({
     },
     [effectivePrice, availableCash, tokensHeld]
   );
-  const handleMarkerClick = React5.useCallback(
+  const handleMarkerClick = React9.useCallback(
     (pct) => {
       const newTargetValue = pct / 100 * totalCapacity;
       updateOrderFromTargetValue(newTargetValue);
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onMouseDown = React5.useCallback(
+  const onMouseDown = React9.useCallback(
     (e) => {
       e.preventDefault();
       const move = (ev) => {
@@ -1146,7 +1146,7 @@ function HousePositionSliderMobile({
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onTouchStart = React5.useCallback(
+  const onTouchStart = React9.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1704,7 +1704,7 @@ var LiquidityText = styled24.span`
     letter-spacing: 0.1px;
   }
 `;
-var LoafLiquidityBadge = React5.forwardRef(
+var LoafLiquidityBadge = React9.forwardRef(
   ({ className, isGlowing, onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       LogoContainer,
@@ -1732,9 +1732,34 @@ var LoafLiquidityBadge = React5.forwardRef(
   }
 );
 LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
+var toSize = (v, fallback) => v == null ? fallback : typeof v === "number" ? `${v}px` : v;
+var Skeleton = React9.forwardRef(
+  ({ width, height, radius, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ 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.useState(false);
-  React5.useEffect(() => {
+  const [isCompact, setIsCompact] = React9.useState(false);
+  React9.useEffect(() => {
     if (typeof window === "undefined") return;
     const check = () => setIsCompact(window.innerWidth <= breakpoint);
     check();
@@ -1744,16 +1769,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.useRef(amount);
+  React9.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.useRef(midPrice);
+  React9.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.useRef(null);
+  const { type } = trade;
+  React9.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__ */ jsxs(
+      "div",
+      {
+        ref: rowRef,
+        className: "grid",
+        style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 }, children: [
+            "$",
+            formatNumber(trade.price, precision)
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: formatNumber(trade.amount, amountPrecision) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rowRef,
+      className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "tabular-nums",
+              trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
+            ),
+            children: [
+              "$",
+              formatNumber(trade.price, precision)
+            ]
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+  const rowRef = React9.useRef(null);
+  useAmountChangeFlash(rowRef, amount);
+  return /* @__PURE__ */ jsxs("div", { ref: rowRef, className: "relative grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -1761,9 +1889,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__ */ 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__ */ jsxs(
       "div",
       {
@@ -1783,7 +1918,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.forwardRef(
+var Orderbook = React9.forwardRef(
   ({
     asks,
     bids,
@@ -1798,13 +1933,44 @@ var Orderbook = React5.forwardRef(
     onTabChange,
     rightHeader = /* @__PURE__ */ jsx(LoafLiquidityBadge, { className: "text-[0.6rem]" }),
     variant = "auto",
+    userOrderPrices,
+    isLoading = false,
     className,
     ...props
   }, ref) => {
-    const [tab, setTab] = React5.useState(defaultTab);
-    const [tradeFilter, setTradeFilter] = React5.useState("all");
+    const [tab, setTab] = React9.useState(defaultTab);
+    const [tradeFilter, setTradeFilter] = React9.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
-    React5.useEffect(() => {
+    const { userAskPrices, userBidPrices } = React9.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.useRef(/* @__PURE__ */ new Set());
+    const initializedRef = React9.useRef(false);
+    if (!initializedRef.current && trades.length > 0) {
+      for (let i = 0; i < trades.length; i++) {
+        seenTradeKeysRef.current.add(getTradeKey(trades[i], i));
+      }
+      initializedRef.current = true;
+    }
+    React9.useEffect(() => {
+      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.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
     const handleTab = (next) => {
@@ -1835,7 +2001,11 @@ var Orderbook = React5.forwardRef(
       midPrice,
       midChangePercent,
       midClass,
-      sectionHeight
+      sectionHeight,
+      userAskPrices,
+      userBidPrices,
+      isLoading,
+      seenTradeKeysRef
     };
     return /* @__PURE__ */ jsx(
       Card,
@@ -1853,6 +2023,29 @@ var Orderbook = React5.forwardRef(
   }
 );
 Orderbook.displayName = "Orderbook";
+function SkeletonRow({ compact }) {
+  if (compact) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1.2fr 0.8fr",
+          padding: "0.2rem 0",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: 10 }) }),
+          /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: /* @__PURE__ */ jsx(Skeleton, { width: "50%", height: 10 }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5", children: [
+    /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: 12 }),
+    /* @__PURE__ */ jsx("div", { className: "text-right", children: /* @__PURE__ */ jsx(Skeleton, { width: "50%", height: 12 }) })
+  ] });
+}
 function DesktopOrderbookLayout({
   tab,
   handleTab,
@@ -1871,8 +2064,14 @@ function DesktopOrderbookLayout({
   midPrice,
   midChangePercent,
   midClass,
-  sectionHeight
+  sectionHeight,
+  userAskPrices,
+  userBidPrices,
+  isLoading,
+  seenTradeKeysRef
 }) {
+  const midRef = React9.useRef(null);
+  useMidPriceFlash(midRef, midPrice, "#0b1a24");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
@@ -1956,29 +2155,20 @@ function DesktopOrderbookLayout({
         {
           className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
           style: { scrollbarGutter: "stable" },
-          children: tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "grid grid-cols-2 items-center gap-3 px-3 py-1.5",
-              children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "tabular-nums",
-                      trade.type === "buy" ? "text-[#0ecb81]" : "text-[#f6465d]"
-                    ),
-                    children: [
-                      "$",
-                      formatNumber(trade.price, precision)
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ 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__ */ jsx("div", { className: "divide-y divide-white/5", children: Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsx("div", { className: "divide-y divide-white/5", children: tradeFiltered.map((trade, i) => {
+            const tradeKey = getTradeKey(trade, i);
+            return /* @__PURE__ */ jsx(
+              TradeRow,
+              {
+                trade,
+                tradeKey,
+                precision,
+                amountPrecision,
+                seenTradeKeysRef
+              },
+              tradeKey
+            );
+          }) })
         }
       ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-h-0", children: [
         /* @__PURE__ */ jsx(
@@ -1986,7 +2176,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__ */ jsx(
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : asks.map((l) => /* @__PURE__ */ jsx(
               DepthRow,
               {
                 side: "ask",
@@ -1994,30 +2184,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__ */ jsxs("div", { className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: [
-            "$",
-            formatNumber(midPrice, precision),
-            midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
-              midChangePercent >= 0 ? "+" : "",
-              midChangePercent.toFixed(2),
-              "%"
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", {})
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: midRef,
+            className: "grid grid-cols-2 items-center gap-3 bg-[#0b1a24] px-3 py-2",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums", midClass), children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                "$",
+                formatNumber(midPrice, precision),
+                midChangePercent == null ? null : /* @__PURE__ */ jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
+                  midChangePercent >= 0 ? "+" : "",
+                  midChangePercent.toFixed(2),
+                  "%"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx("div", {})
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
             className: "divide-y divide-white/5 overflow-y-auto",
             style: { height: `${sectionHeight}px`, scrollbarGutter: "stable" },
-            children: bids.map((l, idx) => /* @__PURE__ */ jsx(
+            children: isLoading ? Array.from({ length: LEVEL_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bids.map((l) => /* @__PURE__ */ jsx(
               DepthRow,
               {
                 side: "bid",
@@ -2025,9 +2223,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}`
             ))
           }
         )
@@ -2053,10 +2252,16 @@ function MobileOrderbookLayout({
   midPrice,
   midChangePercent,
   midClass,
-  sectionHeight: _sectionHeight
+  sectionHeight: _sectionHeight,
+  userAskPrices,
+  userBidPrices,
+  isLoading,
+  seenTradeKeysRef
 }) {
-  const visibleAsks = React5.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
-  const visibleBids = React5.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
+  const midRef = React9.useRef(null);
+  useMidPriceFlash(midRef, midPrice, "transparent");
+  const visibleAsks = React9.useMemo(() => asks.slice(0, COMPACT_ROWS_VISIBLE), [asks]);
+  const visibleBids = React9.useMemo(() => bids.slice(0, COMPACT_ROWS_VISIBLE), [bids]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -2125,7 +2330,7 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleAsks.map((l, idx) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-ask-skel-${i}`)) : visibleAsks.map((l) => /* @__PURE__ */ jsx(
         MobileDepthRow,
         {
           side: "ask",
@@ -2133,13 +2338,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__ */ jsxs(
         "div",
         {
+          ref: midRef,
           className: "grid",
           style: {
             gridTemplateColumns: "1.2fr 0.8fr",
@@ -2149,12 +2356,12 @@ function MobileOrderbookLayout({
             borderBottom: "1px solid rgba(255,255,255,0.1)"
           },
           children: [
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(
               "div",
               {
                 style: { fontWeight: "bold", display: "flex", alignItems: "center", gap: "8px" },
                 className: midClass,
-                children: [
+                children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { width: 90, height: 16 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                   "$",
                   formatNumber(midPrice, precision),
                   midChangePercent != null && /* @__PURE__ */ jsxs("span", { className: cn("text-[0.75rem] font-semibold tabular-nums", midClass), children: [
@@ -2162,14 +2369,14 @@ function MobileOrderbookLayout({
                     midChangePercent.toFixed(2),
                     "%"
                   ] })
-                ]
+                ] })
               }
             ),
             /* @__PURE__ */ jsx("div", {})
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: visibleBids.map((l, idx) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column" }, children: isLoading ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-bid-skel-${i}`)) : visibleBids.map((l) => /* @__PURE__ */ jsx(
         MobileDepthRow,
         {
           side: "bid",
@@ -2177,9 +2384,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__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden px-3 pb-2", children: [
       /* @__PURE__ */ jsxs(
@@ -2193,27 +2401,21 @@ function MobileOrderbookLayout({
           ]
         }
       ),
-      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "py-6 text-center text-[0.7rem] text-white/50", children: "No trades" }) : tradeFiltered.map((trade, i) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "grid",
-          style: { gridTemplateColumns: "1.2fr 0.8fr", padding: "0.2rem 0", fontSize: "0.8rem" },
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: { color: trade.type === "buy" ? "#0ecb81" : "#f6465d", fontWeight: 500 },
-                children: [
-                  "$",
-                  formatNumber(trade.price, precision)
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { textAlign: "right", paddingRight: "0.5rem" }, children: formatNumber(trade.amount, amountPrecision) })
-          ]
-        },
-        `${trade.type}-${trade.price}-${trade.amount}-${trade.time ?? i}`
-      )) })
+      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minHeight: 0 }, children: isLoading && tradeFiltered.length === 0 ? Array.from({ length: COMPACT_ROWS_VISIBLE }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, { compact: true }, `m-trade-skel-${i}`)) : tradeFiltered.length === 0 ? /* @__PURE__ */ 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__ */ jsx(
+          TradeRow,
+          {
+            trade,
+            tradeKey,
+            precision,
+            amountPrecision,
+            seenTradeKeysRef,
+            compact: true
+          },
+          tradeKey
+        );
+      }) })
     ] })
   ] });
 }
@@ -2223,12 +2425,16 @@ function MobileDepthRow({
   amount,
   depthPct,
   precision,
-  amountPrecision
+  amountPrecision,
+  hasUserOrder
 }) {
   const isAsk = side === "ask";
+  const rowRef = React9.useRef(null);
+  useAmountChangeFlash(rowRef, amount);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rowRef,
       style: {
         display: "grid",
         gridTemplateColumns: "1.2fr 0.8fr",
@@ -2237,6 +2443,24 @@ function MobileDepthRow({
         position: "relative"
       },
       children: [
+        hasUserOrder ? /* @__PURE__ */ 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__ */ jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81" }, children: [
           "$",
           formatNumber(price, precision)
@@ -2253,7 +2477,8 @@ function MobileDepthRow({
               width: `${clamp3(depthPct, 0, 100)}%`,
               backgroundColor: isAsk ? "#f6465d" : "#0ecb81",
               opacity: 0.1,
-              zIndex: 0
+              zIndex: 0,
+              transition: "width 300ms ease-out"
             }
           }
         )
@@ -2261,7 +2486,7 @@ function MobileDepthRow({
     }
   );
 }
-var PropertyTour = React5.forwardRef(
+var PropertyTour = React9.forwardRef(
   ({
     className,
     title,
@@ -2274,8 +2499,8 @@ var PropertyTour = React5.forwardRef(
     playsInline = true,
     ...props
   }, ref) => {
-    const videoRef = React5.useRef(null);
-    React5.useEffect(() => {
+    const videoRef = React9.useRef(null);
+    React9.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
       const handleFullscreenChange = () => {
@@ -2407,7 +2632,7 @@ var formatTimeAgo = (timestamp) => {
   if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
   return `${Math.floor(diff / 3600)}h ago`;
 };
-var PropertyNewsUpdates = React5.forwardRef(
+var PropertyNewsUpdates = React9.forwardRef(
   ({
     className,
     heading,
@@ -2424,15 +2649,15 @@ var PropertyNewsUpdates = React5.forwardRef(
     const isPurchaseVariant = variant === "purchases";
     const isHomeVariant = variant === "home";
     const resolvedHeading = heading ?? (isPurchaseVariant ? "Live Purchases" : "Property News & Headlines");
-    const [homeTab, setHomeTab] = React5.useState("all");
+    const [homeTab, setHomeTab] = React9.useState("all");
     const purchaseItems = purchasesProp ?? [];
-    const [page, setPage] = React5.useState(0);
-    React5.useEffect(() => {
+    const [page, setPage] = React9.useState(0);
+    React9.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
     const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React5.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
-    React5.useEffect(() => {
+    const totalPages = React9.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    React9.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) : [];
@@ -2740,7 +2965,7 @@ var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
   notation: value >= 1e5 ? "compact" : "standard",
   maximumFractionDigits: value >= 1e3 ? 0 : 2
 }).format(value);
-var TradingSlider = React5.forwardRef(
+var TradingSlider = React9.forwardRef(
   ({
     label = "Trade size",
     helperText = "Drag to pick the desired notional.",
@@ -2758,7 +2983,7 @@ var TradingSlider = React5.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React5.useState(
+    const [internalValue, setInternalValue] = React9.useState(
       defaultValue ?? (typeof min === "number" ? min : 0)
     );
     const currentValue = isControlled ? Number(value) : internalValue;
@@ -2861,7 +3086,7 @@ var MobileToggleButton = styled24.button`
     padding: 0.6rem 0.5rem;
   }
 `;
-var MobileTradeNav = React5.forwardRef(
+var MobileTradeNav = React9.forwardRef(
   ({ className, items, activeId, onChange, ...props }, ref) => {
     return /* @__PURE__ */ jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxs(
       MobileToggleButton,
@@ -3512,7 +3737,7 @@ var formatPercent = (value, fractionDigits = 2) => {
   if (value == null || Number.isNaN(value)) return "\u2014";
   return `${value.toFixed(fractionDigits)}%`;
 };
-var YourOrders = React5.forwardRef(
+var YourOrders = React9.forwardRef(
   ({
     className,
     title,
@@ -3525,10 +3750,10 @@ var YourOrders = React5.forwardRef(
     pageSize: pageSizeOverride,
     ...props
   }, ref) => {
-    const [internalActiveTab, setInternalActiveTab] = React5.useState(tabs?.[0]?.id ?? "portfolio");
-    const [page, setPage] = React5.useState(0);
+    const [internalActiveTab, setInternalActiveTab] = React9.useState(tabs?.[0]?.id ?? "portfolio");
+    const [page, setPage] = React9.useState(0);
     const effectiveActiveTabId = activeTabId ?? internalActiveTab;
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       setPage(0);
     }, [effectiveActiveTabId]);
     const handleTabChange = (tabId) => {
@@ -3910,7 +4135,7 @@ function createCandlestickSeries(chart, options) {
   }
   throw new Error("Candlestick series API is not available in the current lightweight-charts version.");
 }
-var PriceChart = React5.forwardRef(
+var PriceChart = React9.forwardRef(
   ({
     className,
     title = "Price Chart",
@@ -3924,18 +4149,18 @@ var PriceChart = React5.forwardRef(
     height = 301.52,
     ...props
   }, ref) => {
-    const containerRef = React5.useRef(null);
-    const chartRef = React5.useRef(null);
-    const seriesRef = React5.useRef(null);
-    const priceLineRef = React5.useRef(null);
-    const [hoveredRange, setHoveredRange] = React5.useState(null);
-    const [dropdownOpen, setDropdownOpen] = React5.useState(false);
-    const dropdownRef = React5.useRef(null);
-    const isAutoScrollRef = React5.useRef(true);
+    const containerRef = React9.useRef(null);
+    const chartRef = React9.useRef(null);
+    const seriesRef = React9.useRef(null);
+    const priceLineRef = React9.useRef(null);
+    const [hoveredRange, setHoveredRange] = React9.useState(null);
+    const [dropdownOpen, setDropdownOpen] = React9.useState(false);
+    const dropdownRef = React9.useRef(null);
+    const isAutoScrollRef = React9.useRef(true);
     const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
     const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
     const selectedInDropdown = dropdownRanges.includes(selectedRange);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const handleClickOutside = (e) => {
         if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
           setDropdownOpen(false);
@@ -3944,25 +4169,25 @@ var PriceChart = React5.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const resolvedPrice = React5.useMemo(() => {
+    const resolvedPrice = React9.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
       return last?.close;
     }, [data, price]);
-    const inferredChangePercent = React5.useMemo(() => {
+    const inferredChangePercent = React9.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.useMemo(() => {
+    const dollarChange = React9.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.useEffect(() => {
+    React9.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const chart = LightweightCharts.createChart(el, {
@@ -4007,7 +4232,7 @@ var PriceChart = React5.forwardRef(
         chart.remove();
       };
     }, []);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const chart = chartRef.current;
       if (!chart) return;
       const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
@@ -4015,7 +4240,7 @@ var PriceChart = React5.forwardRef(
         timeScale: getTimeScaleOptions(effectiveRange)
       });
     }, [selectedRange, ranges]);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
@@ -4220,7 +4445,7 @@ var formatPrice3 = (value, currencySymbol) => {
     maximumFractionDigits: 3
   })}`;
 };
-var PropertyHeroHeader = React5.forwardRef(
+var PropertyHeroHeader = React9.forwardRef(
   ({
     className,
     imageUrl,
@@ -4241,14 +4466,15 @@ var PropertyHeroHeader = React5.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.useState(false);
-    const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
-    const hasAmenities = beds != null || baths != null || cars != null || propertyTypeLabel != null;
+    const [isTradeInteracting, setIsTradeInteracting] = React9.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = React9.useState(false);
+    const hasAmenities = isLoading || beds != null || baths != null || cars != null || propertyTypeLabel != null;
     const isTradeDisabled = !onTrade;
     const isMakeOfferButtonDisabled = makeOfferDisabled || !onMakeOffer;
     const showMakeOfferButton = !hideMakeOfferButton;
@@ -4288,7 +4514,7 @@ var PropertyHeroHeader = React5.forwardRef(
               /* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
               /* @__PURE__ */ jsxs(InfoRow, { className: "mb-3 max-[768px]:mb-[0.6rem] max-[480px]:mb-[0.5rem]", children: [
                 /* @__PURE__ */ jsx(LocationText, { children: location }),
-                price == null ? null : /* @__PURE__ */ jsxs(PriceBlock, { children: [
+                isLoading ? /* @__PURE__ */ jsx(PriceBlock, { children: /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 18 }) }) : price == null ? null : /* @__PURE__ */ jsxs(PriceBlock, { children: [
                   formatPrice3(price, currencySymbol),
                   changePercent == null ? null : /* @__PURE__ */ jsxs(
                     "span",
@@ -4318,7 +4544,21 @@ var PropertyHeroHeader = React5.forwardRef(
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx(BedDouble, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: 52, height: 14 })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx(Bath, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: 56, height: 14 })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+                /* @__PURE__ */ jsx(CarFront, { className: "mr-2 h-[18px] w-[18px] opacity-60" }),
+                /* @__PURE__ */ jsx(Skeleton, { width: 50, height: 14 })
+              ] }),
+              /* @__PURE__ */ jsx(Skeleton, { width: 60, height: 14 })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               beds == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
                 /* @__PURE__ */ jsx(BedDouble, { className: "mr-2 h-[18px] w-[18px]" }),
                 /* @__PURE__ */ jsxs("span", { children: [
@@ -4341,7 +4581,7 @@ var PropertyHeroHeader = React5.forwardRef(
                 ] })
               ] }),
               propertyTypeLabel == null ? null : /* @__PURE__ */ jsx("div", { children: propertyTypeLabel })
-            ] })
+            ] }) })
           ] }),
           /* @__PURE__ */ jsxs(ActionButtons, { children: [
             /* @__PURE__ */ jsx(
@@ -4403,7 +4643,21 @@ var PropertyHeroHeader = React5.forwardRef(
           ] })
         ] }) })
       ] }),
-      hasAmenities ? /* @__PURE__ */ jsxs(MobileAmenities, { children: [
+      hasAmenities ? /* @__PURE__ */ jsx(MobileAmenities, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsx(BedDouble, { className: "h-4 w-4 opacity-60" }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 12 })
+        ] }),
+        /* @__PURE__ */ jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsx(Bath, { className: "h-4 w-4 opacity-60" }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 44, height: 12 })
+        ] }),
+        /* @__PURE__ */ jsxs(MobileAmenity, { children: [
+          /* @__PURE__ */ jsx(CarFront, { className: "h-4 w-4 opacity-60" }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 42, height: 12 })
+        ] }),
+        /* @__PURE__ */ jsx(MobileAmenity, { children: /* @__PURE__ */ jsx(Skeleton, { width: 52, height: 12 }) })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         beds == null ? null : /* @__PURE__ */ jsxs(MobileAmenity, { children: [
           /* @__PURE__ */ jsx(BedDouble, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsxs("span", { children: [
@@ -4426,7 +4680,7 @@ var PropertyHeroHeader = React5.forwardRef(
           ] })
         ] }),
         propertyTypeLabel == null ? null : /* @__PURE__ */ jsx(MobileAmenity, { children: propertyTypeLabel })
-      ] }) : null
+      ] }) }) : null
     ] });
   }
 );
@@ -4668,6 +4922,15 @@ var Header = ({
   const [isMoreMenuOpen, setIsMoreMenuOpen] = useState(false);
   const [showLoginPopup, setShowLoginPopup] = useState(false);
   const [loginPopupInitialView, setLoginPopupInitialView] = useState(void 0);
+  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");
+    }
+  }, []);
   useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -4818,7 +5081,7 @@ var Header = ({
       setShowLoginPopup(true);
     }
   };
-  const handleLoginPopupClose = React5__default.useCallback(() => {
+  const handleLoginPopupClose = React9__default.useCallback(() => {
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
@@ -4852,7 +5115,7 @@ var Header = ({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxs(HeaderContainer, { children: [
+    /* @__PURE__ */ jsxs(HeaderContainer, { id: "loaf-header", children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxs(Logo, { children: [
           /* @__PURE__ */ jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5090,6 +5353,7 @@ var Header = ({
         )
       ] })
     ] }),
+    /* @__PURE__ */ jsx(HeaderSpacer, {}),
     LoginPopupComponent && showLoginPopup && /* @__PURE__ */ jsx(
       LoginPopupComponent,
       {
@@ -5105,8 +5369,8 @@ var SafeAreaCover = styled24.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;
@@ -5160,23 +5424,31 @@ var HeaderContainer = styled24.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.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.div`
   display: flex;
   align-items: center;
@@ -5229,10 +5501,12 @@ var Nav = styled24.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;
@@ -5505,10 +5779,10 @@ var MobileNavItem = styled24.div`
     padding-left: 24px;
   }
 `;
-var PropertySubheader = React5.forwardRef(
+var PropertySubheader = React9.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabsContainerRef = React5.useRef(null);
-    React5.useEffect(() => {
+    const tabsContainerRef = React9.useRef(null);
+    React9.useEffect(() => {
       const container = tabsContainerRef.current;
       if (!container) return;
       const isMobile = window.innerWidth <= 768;
@@ -5664,7 +5938,7 @@ var LoginPopup = ({
   const [fiatFundingLoading, setFiatFundingLoading] = useState(false);
   const [fundingError, setFundingError] = useState("");
   const [transakWidgetUrl, setTransakWidgetUrl] = useState(null);
-  const suppressAutoCloseRef = React5__default.useRef(false);
+  const suppressAutoCloseRef = React9__default.useRef(false);
   useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
@@ -6844,7 +7118,7 @@ var MiniLiveFeed = () => {
   );
 };
 LoginPopup.displayName = "LoginPopup";
-var PropertyCompareBar = React5.forwardRef(
+var PropertyCompareBar = React9.forwardRef(
   ({
     className,
     addresses,
@@ -6855,7 +7129,7 @@ var PropertyCompareBar = React5.forwardRef(
     price,
     ...props
   }, ref) => {
-    const normalizedAddresses = React5.useMemo(() => {
+    const normalizedAddresses = React9.useMemo(() => {
       return addresses.map(
         (option) => typeof option === "string" ? { id: option, label: option } : option
       );
@@ -6863,11 +7137,11 @@ var PropertyCompareBar = React5.forwardRef(
     const hasAddresses = normalizedAddresses.length > 0;
     const firstAddressId = normalizedAddresses[0]?.id;
     const isControlled = selectedAddressId !== void 0;
-    const [internalSelectedId, setInternalSelectedId] = React5.useState(
+    const [internalSelectedId, setInternalSelectedId] = React9.useState(
       () => isControlled ? void 0 : firstAddressId
     );
     const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       if (!isControlled) {
         setInternalSelectedId((current) => {
           if (current != null && normalizedAddresses.some((option) => option.id === current)) {
@@ -6878,9 +7152,9 @@ var PropertyCompareBar = React5.forwardRef(
       }
     }, [firstAddressId, isControlled, normalizedAddresses]);
     const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
-    const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
-    const dropdownRef = React5.useRef(null);
-    React5.useEffect(() => {
+    const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
+    const dropdownRef = React9.useRef(null);
+    React9.useEffect(() => {
       if (!isDropdownOpen) return;
       const handleClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -7603,7 +7877,8 @@ function PropertyOverview({
   bathrooms,
   carSpaces,
   propertyTypeLabel,
-  tokensIssued: tokensIssuedProp
+  tokensIssued: tokensIssuedProp,
+  isLoading = false
 }) {
   const [isDescExpanded, setDescExpanded] = useState(false);
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
@@ -7641,13 +7916,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__ */ 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__ */ jsxs("div", { children: [
@@ -9491,6 +9767,8 @@ var formatTimeAgo2 = (timestamp) => {
 };
 function VideoActivitySection({
   ipoStarted,
+  ipoEnded = false,
+  isLoading = false,
   recentOrders = [],
   ordersAllocated = 0,
   tokenPrice = 0
@@ -9499,6 +9777,9 @@ function VideoActivitySection({
     () => [...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__ */ jsxs(Section3, { children: [
     /* @__PURE__ */ jsxs(VideoPanel, { children: [
       /* @__PURE__ */ jsx("div", { className: "section-header", children: /* @__PURE__ */ jsx("h3", { children: "Musgrave" }) }),
@@ -9510,31 +9791,40 @@ function VideoActivitySection({
     /* @__PURE__ */ jsxs(ActivityPanel, { children: [
       /* @__PURE__ */ jsxs("div", { className: "section-header", children: [
         /* @__PURE__ */ jsxs("h3", { children: [
-          /* @__PURE__ */ jsx(LiveIndicatorDot, { $active: ipoStarted }),
+          /* @__PURE__ */ jsx(LiveIndicatorDot, { $active: ipoStarted && !ipoEnded }),
           "Recent Order Activity"
         ] }),
-        /* @__PURE__ */ jsx("span", { children: ipoStarted ? `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open" })
+        /* @__PURE__ */ jsx("span", { children: headerStatusText })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "activity-content", children: ipoStarted ? /* @__PURE__ */ 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__ */ jsxs(
-          PurchaseItem,
-          {
-            $barWidth: `${barPercent}%`,
-            $isAlternate: isAlternate,
-            children: [
-              /* @__PURE__ */ jsxs(PurchaseInfo, { children: [
-                /* @__PURE__ */ jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
-                /* @__PURE__ */ jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
-              ] }),
-              /* @__PURE__ */ jsx(PurchaseAmount, { children: formatCurrency4(amount) })
-            ]
-          },
-          order.txHash
-        );
-      }) }) : /* @__PURE__ */ jsxs("div", { className: "activity-empty", children: [
+      /* @__PURE__ */ jsx("div", { className: "activity-content", children: showSkeletonFeed ? /* @__PURE__ */ jsx(FeedList, { children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs(SkeletonFeedRow, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "info-col", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 110, height: 14 }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 56, height: 10 })
+        ] }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 70, height: 14 })
+      ] }, `feed-skel-${i}`)) }) : showOrderFeed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        ipoEnded && /* @__PURE__ */ jsx(EndedBanner, { children: "Sale ended \u2014 final allocations" }),
+        /* @__PURE__ */ 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__ */ jsxs(
+            PurchaseItem,
+            {
+              $barWidth: `${barPercent}%`,
+              $isAlternate: isAlternate,
+              children: [
+                /* @__PURE__ */ jsxs(PurchaseInfo, { children: [
+                  /* @__PURE__ */ jsx(PurchaseName, { children: order.buyerHandle || `${order.buyerAddress.slice(0, 6)}...${order.buyerAddress.slice(-4)}` }),
+                  /* @__PURE__ */ jsx(PurchaseTime, { children: formatTimeAgo2(order.timestamp) })
+                ] }),
+                /* @__PURE__ */ jsx(PurchaseAmount, { children: formatCurrency4(amount) })
+              ]
+            },
+            order.txHash
+          );
+        }) })
+      ] }) : ipoEnded ? /* @__PURE__ */ jsx("div", { className: "activity-empty", children: /* @__PURE__ */ jsx("p", { children: "Sale ended \u2014 no orders were placed." }) }) : /* @__PURE__ */ jsxs("div", { className: "activity-empty", children: [
         /* @__PURE__ */ jsx("div", { className: "spinner" }),
         /* @__PURE__ */ jsx("p", { children: "Activity will appear once the Offering opens" })
       ] }) })
@@ -9675,6 +9965,43 @@ var ActivityPanel = styled24.div`
     to { transform: rotate(360deg); }
   }
 `;
+var SkeletonFeedRow = styled24.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.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.div`
   width: 100%;
   overflow-y: auto;
@@ -10661,6 +10988,22 @@ function PortfolioActivityPanel({
         return 0;
     }
   }, [activeTab, positions.length, offeringOrders.length, openOrders.length, orderHistory.length, tradeHistory.length, transfers.length]);
+  const positionsCount = positions.length;
+  const openOrdersCount = useMemo(
+    () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
+    [openOrders]
+  );
+  const pendingHistoryCount = useMemo(
+    () => orderHistory.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
+    [orderHistory]
+  );
+  const pendingOfferingsCount = 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) => {
@@ -10670,10 +11013,38 @@ function PortfolioActivityPanel({
   return /* @__PURE__ */ jsxs(Container2, { className, style, children: [
     /* @__PURE__ */ jsx(PanelTitle, { children: "Activity" }),
     /* @__PURE__ */ jsxs(TabContainer, { children: [
-      showPositionsTab && /* @__PURE__ */ jsx(Tab, { $active: activeTab === "positions", onClick: () => handleTabChange("positions"), children: "Positions" }),
-      /* @__PURE__ */ jsx(Tab, { $active: activeTab === "subscriptions", onClick: () => handleTabChange("subscriptions"), children: "Initial Offerings" }),
-      /* @__PURE__ */ jsx(Tab, { $active: activeTab === "open-orders", onClick: () => handleTabChange("open-orders"), children: "Open Orders" }),
-      /* @__PURE__ */ jsx(Tab, { $active: activeTab === "orders", onClick: () => handleTabChange("orders"), children: "Order History" }),
+      showPositionsTab && /* @__PURE__ */ jsxs(Tab, { $active: activeTab === "positions", onClick: () => handleTabChange("positions"), children: [
+        "Positions",
+        positionsCount > 0 && /* @__PURE__ */ jsxs(TabCount, { children: [
+          " (",
+          positionsCount,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Tab, { $active: activeTab === "subscriptions", onClick: () => handleTabChange("subscriptions"), children: [
+        "Initial Offerings",
+        pendingOfferingsCount > 0 && /* @__PURE__ */ jsxs(TabCount, { children: [
+          " (",
+          pendingOfferingsCount,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Tab, { $active: activeTab === "open-orders", onClick: () => handleTabChange("open-orders"), children: [
+        "Open Orders",
+        openOrdersCount > 0 && /* @__PURE__ */ jsxs(TabCount, { children: [
+          " (",
+          openOrdersCount,
+          ")"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Tab, { $active: activeTab === "orders", onClick: () => handleTabChange("orders"), children: [
+        "Order History",
+        pendingHistoryCount > 0 && /* @__PURE__ */ jsxs(TabCount, { children: [
+          " (",
+          pendingHistoryCount,
+          ")"
+        ] })
+      ] }),
       /* @__PURE__ */ jsx(Tab, { $active: activeTab === "trades", onClick: () => handleTabChange("trades"), children: "Trade History" }),
       /* @__PURE__ */ jsx(Tab, { $active: activeTab === "transfers", onClick: () => handleTabChange("transfers"), children: "Transfers" })
     ] }),
@@ -10758,8 +11129,10 @@ function PortfolioActivityPanel({
       openOrders.length === 0 && /* @__PURE__ */ 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__ */ jsxs(ActivityRow, { children: [
           /* @__PURE__ */ jsx(ActivitySideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }),
@@ -10769,9 +11142,10 @@ function PortfolioActivityPanel({
               formatNumber2(order.quantity),
               " tokens \xB7 ",
               prettyLabel(order.type),
+              priceSegment,
               " \xB7 ",
-              priceDisplay,
-              " \xB7 ",
+              filledPercent,
+              "% filled \xB7 ",
               formatTimestamp(order.createdAt)
             ] })
           ] }),
@@ -10798,8 +11172,10 @@ function PortfolioActivityPanel({
       orderHistory.length === 0 && /* @__PURE__ */ 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__ */ jsxs(ActivityRow, { children: [
           /* @__PURE__ */ jsx(ActivitySideBadge, { $side: sideLabel(order.side), children: sideLabel(order.side) }),
           /* @__PURE__ */ jsxs(ActivityInfo, { children: [
@@ -10808,9 +11184,10 @@ function PortfolioActivityPanel({
               formatNumber2(order.quantity),
               " tokens \xB7 ",
               prettyLabel(order.type),
+              priceSegment,
               " \xB7 ",
-              priceDisplay,
-              " \xB7 ",
+              filledPercent,
+              "% filled \xB7 ",
               formatTimestamp(order.createdAt)
             ] })
           ] }),
@@ -10952,6 +11329,12 @@ var Tab = styled24.button`
     color: ${({ $active }) => $active ? "#fff" : "rgba(255, 255, 255, 0.65)"};
   }
 `;
+var TabCount = styled24.span`
+  color: inherit;
+  opacity: 0.7;
+  font-weight: 500;
+  margin-left: 2px;
+`;
 var ActivityRow = styled24.div`
   display: grid;
   grid-template-columns: auto 1fr auto auto;
@@ -11595,6 +11978,7 @@ function PropertyBuy({
   recentOrders = [],
   ordersAllocated = 0,
   subscribers = 0,
+  isLoadingActivity = false,
   selectorItems,
   onSelectorSelect,
   portfolioActivity
@@ -11627,6 +12011,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;
@@ -11777,6 +12162,8 @@ function PropertyBuy({
         VideoActivitySection,
         {
           ipoStarted,
+          ipoEnded,
+          isLoading: isLoadingActivity,
           recentOrders,
           ordersAllocated,
           tokenPrice
@@ -14388,7 +14775,68 @@ function useToast() {
   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 = useRef(onPoll);
+  onPollRef.current = onPoll;
+  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;
+}
 
-export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, useToast };
+export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Header, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, Skeleton, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, hasPendingActivity, useAdaptivePolling, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map