@loafmarkets/ui 0.1.415 → 0.1.416

package/dist/index.mjs

@@ -1,13 +1,13 @@
-import * as React5 from 'react';
-import React5__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useContext } from 'react';
+import * as React9 from 'react';
+import React9__default, { createContext, useState, useRef, useMemo, useCallback, useEffect, useLayoutEffect, useContext } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import styled10, { keyframes, css } from 'styled-components';
 import * as ReactDOM from 'react-dom';
 import { createPortal } from 'react-dom';
+import styled10, { keyframes, css } from 'styled-components';
 import { Newspaper } from 'lucide-react';
 import * as LightweightCharts from 'lightweight-charts';
 import { MdKingBed, MdBathtub, MdDirectionsCar, MdPool, MdYard, MdFitnessCenter } from 'react-icons/md';
@@ -54,7 +54,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);
@@ -93,11 +93,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,
@@ -109,11 +109,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",
     {
@@ -124,15 +124,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";
@@ -150,7 +150,7 @@ var defaultFormatSignedCurrency = (value) => {
   const sign = value >= 0 ? "+" : "-";
   return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
 };
-var PortfolioSummary = React5.forwardRef(
+var PortfolioSummary = React9.forwardRef(
   ({
     availableCash,
     portfolioValue,
@@ -300,23 +300,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);
@@ -391,7 +391,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);
@@ -399,7 +399,7 @@ function HousePositionSlider({
     setDeltaTokensSell(0);
     setVisualTargetPct(null);
   }, []);
-  const updateOrderFromTargetValue = React5.useCallback(
+  const updateOrderFromTargetValue = React9.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0) {
@@ -423,7 +423,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;
@@ -432,7 +432,7 @@ function HousePositionSlider({
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
-  const updateOrderFromTokenAmount = React5.useCallback(
+  const updateOrderFromTokenAmount = React9.useCallback(
     (tokenAmountSigned) => {
       if (tokenAmountSigned > 0) {
         const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
@@ -455,7 +455,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);
@@ -499,7 +499,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
-  const handleDragAtClientY = React5.useCallback(
+  const handleDragAtClientY = React9.useCallback(
     (clientY) => {
       if (!houseRef.current) return;
       const rect = houseRef.current.getBoundingClientRect();
@@ -1015,18 +1015,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);
@@ -1068,7 +1068,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) {
@@ -1096,7 +1096,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;
@@ -1123,14 +1123,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) => {
@@ -1150,7 +1150,7 @@ function HousePositionSliderMobile({
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onTouchStart = React5.useCallback(
+  const onTouchStart = React9.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1630,7 +1630,7 @@ var StatusDot = styled10.span`
               background: rgba(255, 255, 255, 0.3);
             `}
 `;
-var LoafLiquidityBadge = React5.forwardRef(
+var LoafLiquidityBadge = React9.forwardRef(
   ({ className, isGlowing, status = "unknown", onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       LogoContainer,
@@ -1654,7 +1654,7 @@ var LoafLiquidityBadge = React5.forwardRef(
 );
 LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
 var toSize = (v, fallback) => v == null ? fallback : typeof v === "number" ? `${v}px` : v;
-var Skeleton = React5.forwardRef(
+var Skeleton = React9.forwardRef(
   ({ width, height, radius, className, style, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
@@ -1678,9 +1678,17 @@ var Skeleton = React5.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
+var DEFAULT_PRICE_LABEL = "Price (USD)";
+var PRICE_UNIT_MIN_WIDTH_PX = 320;
+function priceHeaderLabel(label, panelWidth) {
+  if (label === DEFAULT_PRICE_LABEL && panelWidth != null && panelWidth > 0 && panelWidth < PRICE_UNIT_MIN_WIDTH_PX) {
+    return "Price";
+  }
+  return label;
+}
 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();
@@ -1695,9 +1703,14 @@ var formatTradeTime = (time) => {
   if (Number.isNaN(d.getTime())) return time;
   return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
 };
-var FLASH_DURATION_MS = 450;
-var FLASH_UP_COLOR = "rgba(14, 203, 129, 0.35)";
-var FLASH_DOWN_COLOR = "rgba(246, 70, 93, 0.35)";
+var FLASH_DURATION_MS = 900;
+var FLASH_UP_COLOR = "rgba(14, 203, 129, 0.22)";
+var FLASH_DOWN_COLOR = "rgba(246, 70, 93, 0.22)";
+var FLASH_KEYFRAMES = (color) => [
+  { backgroundColor: "rgba(0,0,0,0)" },
+  { backgroundColor: color, offset: 0.3 },
+  { backgroundColor: "rgba(0,0,0,0)" }
+];
 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}`;
@@ -1706,14 +1719,11 @@ function getTradeKey(trade, fallbackIndex) {
 function flashElement(node, side) {
   if (typeof node.animate !== "function") return;
   const color = side === "bid" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
-  node.animate(
-    [{ backgroundColor: color }, { backgroundColor: "transparent" }],
-    { duration: FLASH_DURATION_MS, easing: "ease-out" }
-  );
+  node.animate(FLASH_KEYFRAMES(color), { duration: FLASH_DURATION_MS, easing: "ease-in-out" });
 }
 function useAmountChangeFlash(ref, amount, side, flashOnMount) {
-  const prevAmountRef = React5.useRef(flashOnMount ? null : amount);
-  React5.useEffect(() => {
+  const prevAmountRef = React9.useRef(flashOnMount ? null : amount);
+  React9.useEffect(() => {
     const prev = prevAmountRef.current;
     const node = ref.current;
     if (node && prev !== amount) {
@@ -1734,18 +1744,15 @@ function TradeRow({
   compact,
   explorerUrl
 }) {
-  const rowRef = React5.useRef(null);
+  const rowRef = React9.useRef(null);
   const { type } = trade;
-  React5.useEffect(() => {
+  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" }
-    );
+    node.animate(FLASH_KEYFRAMES(color), { duration: FLASH_DURATION_MS, easing: "ease-in-out" });
   }, [tradeKey, seenTradeKeysRef, type]);
   if (compact) {
     return /* @__PURE__ */ jsxs(
@@ -1812,6 +1819,27 @@ function TradeRow({
     }
   );
 }
+function BreadSliceGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      "aria-hidden": "true",
+      style: { display: "block", filter: "drop-shadow(0 0 4px rgba(201,162,39,0.6))" },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M1 4.2 C1 1.9 2.7 1 5 1 C7.3 1 9 1.9 9 4.2 L9 8.2 C9 8.6 8.6 9 8.2 9 L1.8 9 C1.4 9 1 8.6 1 8.2 Z",
+          fill: "none",
+          stroke: "#C9A227",
+          strokeWidth: "1.3"
+        }
+      )
+    }
+  );
+}
 function DepthRow({
   side,
   price,
@@ -1826,12 +1854,14 @@ function DepthRow({
   fillHeight
 }) {
   const isAsk = side === "ask";
-  const rowRef = React5.useRef(null);
+  const rowRef = React9.useRef(null);
   useAmountChangeFlash(rowRef, amount, side, flashOnMount);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rowRef,
+      "data-depth-row": true,
+      "data-price": `$${formatNumber(price, precision)}`,
       className: "relative grid grid-cols-3 items-center gap-3 px-3 text-[0.8rem]",
       style: fillHeight ? { flex: "1 1 0", minHeight: 0, maxHeight: `${DEPTH_ROW_HEIGHT_PX}px`, cursor: onPriceClick ? "pointer" : void 0 } : { height: `${DEPTH_ROW_HEIGHT_PX}px`, flexShrink: 0, cursor: onPriceClick ? "pointer" : void 0 },
       onClick: onPriceClick ? () => onPriceClick(price) : void 0,
@@ -1839,14 +1869,20 @@ function DepthRow({
         /* @__PURE__ */ jsx(
           "div",
           {
+            "data-depth-bar": true,
             className: cn(isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"),
             style: {
               position: "absolute",
-              top: 0,
-              bottom: 0,
+              top: 1,
+              bottom: 1,
               left: 0,
               width: `${clamp3(depthPct, 0, 100)}%`,
-              transition: "width 300ms ease-out"
+              transition: "width 300ms ease-out",
+              borderRadius: "0 4px 4px 0",
+              // backgroundImage LONGHAND, not the `background` shorthand — jsdom's
+              // cssstyle drops gradients from the shorthand (tests assert this).
+              backgroundColor: "transparent",
+              backgroundImage: isAsk ? "linear-gradient(90deg, rgba(246,70,93,0.11), rgba(246,70,93,0.15))" : "linear-gradient(90deg, rgba(14,203,129,0.09), rgba(14,203,129,0.13))"
             }
           }
         ),
@@ -1854,33 +1890,35 @@ function DepthRow({
           "span",
           {
             "aria-label": "Your order at this price",
-            className: "absolute left-0 top-1/2 -translate-y-1/2 z-[2] h-[6px] w-[6px] rounded-full bg-[#C9A227] shadow-[0_0_6px_rgba(201,162,39,0.7)]"
+            className: "absolute left-0 top-1/2 -translate-y-1/2 z-[2]",
+            children: /* @__PURE__ */ jsx(BreadSliceGlyph, {})
           }
         ) : null,
-        /* @__PURE__ */ jsxs("div", { className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"), children: [
+        /* @__PURE__ */ jsxs("div", { "data-cell": "price", className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"), children: [
           "$",
           formatNumber(price, precision)
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) }),
-        /* @__PURE__ */ jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/50", children: formatNumber(cumDepth, amountPrecision) })
+        /* @__PURE__ */ jsx("div", { "data-cell": "amt", className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) }),
+        /* @__PURE__ */ jsx("div", { "data-cell": "tot", className: "relative z-[1] text-right tabular-nums text-white/50", children: formatNumber(cumDepth, amountPrecision) })
       ]
     }
   );
 }
 var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
+var fitLevelCount = (availableHeightPx, max) => clamp3(Math.floor(availableHeightPx / DEPTH_ROW_HEIGHT_PX), 1, max);
 var LEVEL_ROWS_VISIBLE = 8;
 var DEPTH_ROW_HEIGHT_PX = 28;
 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,
     midPrice,
     midChangePercent,
     trades = [],
-    priceLabel = "Price (USD)",
+    priceLabel = DEFAULT_PRICE_LABEL,
     amountLabel = "Amount",
     precision = 2,
     amountPrecision = 2,
@@ -1908,12 +1946,12 @@ var Orderbook = React5.forwardRef(
         status: liquidityStatus
       }
     );
-    const [tab, setTabState] = React5.useState(defaultTab);
+    const [tab, setTabState] = React9.useState(defaultTab);
     const setTab = setTabState;
     const effectiveTab = showTradesTab ? tab : "orderbook";
-    const [tradeFilter, setTradeFilter] = React5.useState("all");
+    const [tradeFilter, setTradeFilter] = React9.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
-    const { userAskPrices, userBidPrices } = React5.useMemo(() => {
+    const { userAskPrices, userBidPrices } = React9.useMemo(() => {
       const ask = /* @__PURE__ */ new Set();
       const bid = /* @__PURE__ */ new Set();
       if (!userOrderPrices) return { userAskPrices: ask, userBidPrices: bid };
@@ -1923,15 +1961,15 @@ var Orderbook = React5.forwardRef(
       }
       return { userAskPrices: ask, userBidPrices: bid };
     }, [userOrderPrices]);
-    const seenTradeKeysRef = React5.useRef(/* @__PURE__ */ new Set());
-    const initializedRef = React5.useRef(false);
+    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;
     }
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       if (!initializedRef.current) return;
       const live = /* @__PURE__ */ new Set();
       for (let i = 0; i < trades.length; i++) {
@@ -1942,7 +1980,7 @@ var Orderbook = React5.forwardRef(
         if (!live.has(key)) seen.delete(key);
       }
     }, [trades]);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
     const handleTab = (next) => {
@@ -1950,10 +1988,49 @@ var Orderbook = React5.forwardRef(
       onTabChange?.(next);
     };
     const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
+    const rootRef = React9.useRef(null);
+    const setRootRef = React9.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [panelWidth, setPanelWidth] = React9.useState(null);
+    React9.useEffect(() => {
+      if (typeof ResizeObserver === "undefined") return;
+      const el = rootRef.current;
+      if (!el) return;
+      const ro = new ResizeObserver((entries) => {
+        const w = entries[0]?.contentRect?.width;
+        if (typeof w === "number") setPanelWidth((prev) => prev === w ? prev : w);
+      });
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    const effectivePriceLabel = priceHeaderLabel(priceLabel, panelWidth);
     const effectiveLevels = maxLevels ?? LEVEL_ROWS_VISIBLE;
     const effectiveCompactLevels = maxLevels ?? COMPACT_ROWS_VISIBLE;
     const sectionHeight = isCompact ? effectiveCompactLevels * COMPACT_ROW_HEIGHT_PX : effectiveLevels * DEPTH_ROW_HEIGHT_PX;
-    const rowCount = isCompact ? effectiveCompactLevels : effectiveLevels;
+    const asksSectionRef = React9.useRef(null);
+    const [depthSectionH, setDepthSectionH] = React9.useState(null);
+    React9.useEffect(() => {
+      if (!fillHeight || isCompact || effectiveTab !== "orderbook") return;
+      if (typeof ResizeObserver === "undefined") return;
+      const el = asksSectionRef.current;
+      if (!el) return;
+      const ro = new ResizeObserver((entries) => {
+        const h = entries[0]?.contentRect?.height;
+        if (typeof h === "number") {
+          setDepthSectionH((prev) => prev === h ? prev : h);
+        }
+      });
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, [fillHeight, isCompact, effectiveTab]);
+    const fitRows = fillHeight && !isCompact && depthSectionH != null ? fitLevelCount(depthSectionH, effectiveLevels) : null;
+    const rowCount = isCompact ? effectiveCompactLevels : fitRows ?? effectiveLevels;
     const askVisibleLevels = asks.slice(-rowCount);
     const bidVisibleLevels = bids.slice(0, rowCount);
     const askCumDepths = new Array(askVisibleLevels.length);
@@ -1974,9 +2051,9 @@ var Orderbook = React5.forwardRef(
     }
     const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
     const askMaxCumDepth = combinedMaxCumDepth;
-    const prevAskPricesRef = React5.useRef(null);
-    const prevBidPricesRef = React5.useRef(null);
-    const newAskPrices = React5.useMemo(() => {
+    const prevAskPricesRef = React9.useRef(null);
+    const prevBidPricesRef = React9.useRef(null);
+    const newAskPrices = React9.useMemo(() => {
       const current = new Set(askVisibleLevels.map((l) => l.price));
       const prev = prevAskPricesRef.current;
       if (!prev) return /* @__PURE__ */ new Set();
@@ -1986,7 +2063,7 @@ var Orderbook = React5.forwardRef(
       }
       return added;
     }, [askVisibleLevels]);
-    const newBidPrices = React5.useMemo(() => {
+    const newBidPrices = React9.useMemo(() => {
       const current = new Set(bidVisibleLevels.map((l) => l.price));
       const prev = prevBidPricesRef.current;
       if (!prev) return /* @__PURE__ */ new Set();
@@ -1996,12 +2073,16 @@ var Orderbook = React5.forwardRef(
       }
       return added;
     }, [bidVisibleLevels]);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       prevAskPricesRef.current = new Set(askVisibleLevels.map((l) => l.price));
       prevBidPricesRef.current = new Set(bidVisibleLevels.map((l) => l.price));
     }, [askVisibleLevels, bidVisibleLevels]);
     const bidMaxCumDepth = combinedMaxCumDepth;
     const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    const bestAskPrice = asks.length > 0 ? asks[asks.length - 1].price : null;
+    const bestBidPrice = bids.length > 0 ? bids[0].price : null;
+    const spread = bestAskPrice != null && bestBidPrice != null ? bestAskPrice - bestBidPrice : null;
+    const spreadPct = spread != null && midPrice > 0 ? spread / midPrice * 100 : null;
     const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
     const layoutProps = {
       tab: effectiveTab,
@@ -2010,7 +2091,7 @@ var Orderbook = React5.forwardRef(
       tradeFilter,
       setTradeFilter,
       rightHeader: resolvedRightHeader,
-      priceLabel,
+      priceLabel: effectivePriceLabel,
       amountLabel,
       tradeFiltered,
       precision,
@@ -2037,12 +2118,15 @@ var Orderbook = React5.forwardRef(
       compactLevelCount: effectiveCompactLevels,
       fillHeight,
       newAskPrices,
-      newBidPrices
+      newBidPrices,
+      spread,
+      spreadPct,
+      asksSectionRef
     };
     return /* @__PURE__ */ jsx(
       Card,
       {
-        ref,
+        ref: setRootRef,
         className: cn(
           "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md flex flex-col",
           isCompact && "max-w-none",
@@ -2056,6 +2140,170 @@ var Orderbook = React5.forwardRef(
   }
 );
 Orderbook.displayName = "Orderbook";
+var MID_ROW_GOLD_STYLE = {
+  backgroundImage: "linear-gradient(90deg, rgba(230,200,126,0.07), rgba(230,200,126,0.015))",
+  borderTop: "1px solid rgba(230,200,126,0.22)",
+  borderBottom: "1px solid rgba(230,200,126,0.22)"
+};
+function SpreadReadout({
+  spread,
+  spreadPct,
+  precision: _precision,
+  compact
+}) {
+  if (spread == null || spreadPct == null) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: 5,
+        whiteSpace: "nowrap",
+        lineHeight: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: compact ? "0.48rem" : "0.52rem",
+              letterSpacing: "0.14em",
+              textTransform: "uppercase",
+              color: "rgba(255,255,255,0.45)",
+              fontWeight: 600
+            },
+            children: "Spread"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "tabular-nums",
+            style: { fontSize: compact ? "0.56rem" : "0.62rem", color: "rgba(255,255,255,0.45)" },
+            children: [
+              spreadPct.toFixed(2),
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function useGlidePill() {
+  const sectionRef = React9.useRef(null);
+  const pillRef = React9.useRef(null);
+  const priceSpanRef = React9.useRef(null);
+  const boldedCellRef = React9.useRef(null);
+  const [pillPrice, setPillPrice] = React9.useState(null);
+  const motion = React9.useRef({ x: 0, targetX: 0, y: 0, targetY: 0, amp: 0, on: false, raf: 0 });
+  const reducedMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  const unbold = () => {
+    if (boldedCellRef.current) {
+      boldedCellRef.current.style.fontWeight = "";
+      boldedCellRef.current = null;
+    }
+  };
+  const frame = React9.useCallback(() => {
+    const m = motion.current;
+    const section = sectionRef.current;
+    const pill = pillRef.current;
+    m.raf = 0;
+    if (!section || !pill) return;
+    const k = reducedMotion ? 1 : 0.12;
+    m.x += (m.targetX - m.x) * k;
+    m.y += (m.targetY - m.y) * k;
+    pill.style.transform = `translate(${m.x.toFixed(1)}px, ${m.y.toFixed(1)}px)`;
+    const ampTarget = m.on && !reducedMotion ? 1 : 0;
+    m.amp += (ampTarget - m.amp) * 0.14;
+    const crest = m.y + pill.offsetHeight / 2;
+    const rows = section.querySelectorAll("[data-depth-row]");
+    for (const row of rows) {
+      const rect = row.getBoundingClientRect();
+      const center = rect.top + rect.height / 2;
+      const d = center - crest;
+      const inf = Math.exp(-(d * d) / (2 * 42 * 42)) * m.amp;
+      const bar = row.querySelector("[data-depth-bar]");
+      const priceCell = row.querySelector('[data-cell="price"]');
+      if (inf < 0.01) {
+        if (row.dataset.waved) {
+          delete row.dataset.waved;
+          row.style.zIndex = "";
+          row.style.background = "";
+          row.style.boxShadow = "";
+          if (bar) bar.style.filter = "";
+          if (priceCell) priceCell.style.transform = "";
+        }
+        continue;
+      }
+      row.dataset.waved = "1";
+      row.style.zIndex = String(3 + Math.round(inf * 10));
+      row.style.background = `rgba(19,20,24,${(inf * 0.92).toFixed(2)})`;
+      row.style.boxShadow = `0 ${(inf * 3).toFixed(1)}px ${(inf * 12).toFixed(1)}px rgba(0,0,0,${(inf * 0.45).toFixed(2)})`;
+      if (bar) bar.style.filter = `brightness(${(1 + inf * 0.45).toFixed(2)})`;
+      if (priceCell) {
+        priceCell.style.transformOrigin = "left center";
+        priceCell.style.transform = `scale(${(1 + inf * 0.09).toFixed(3)})`;
+      }
+    }
+    if (m.on || Math.abs(m.targetX - m.x) + Math.abs(m.targetY - m.y) > 0.5 || m.amp > 5e-3) {
+      m.raf = requestAnimationFrame(frame);
+    }
+  }, [reducedMotion]);
+  const onMouseMove = React9.useCallback(
+    (e) => {
+      const target = e.target;
+      const row = target?.closest?.("[data-depth-row]");
+      const m = motion.current;
+      if (!row || !row.dataset.price) {
+        m.on = false;
+        unbold();
+        setPillPrice(null);
+        return;
+      }
+      setPillPrice(row.dataset.price);
+      const priceCell = row.querySelector('[data-cell="price"]');
+      if (priceCell !== boldedCellRef.current) {
+        unbold();
+        if (priceCell) {
+          priceCell.style.fontWeight = "600";
+          boldedCellRef.current = priceCell;
+        }
+      }
+      const pill = pillRef.current;
+      if (pill && priceCell) {
+        const rowRect = row.getBoundingClientRect();
+        const cellRect = priceCell.getBoundingClientRect();
+        const priceOffset = priceSpanRef.current?.offsetLeft || 48;
+        const nextX = cellRect.left - priceOffset;
+        const nextY = rowRect.top + (rowRect.height || 28) / 2 - pill.offsetHeight / 2;
+        if (!m.on) {
+          m.x = nextX;
+          m.y = nextY;
+        }
+        m.targetX = nextX;
+        m.targetY = nextY;
+      }
+      m.on = true;
+      if (!m.raf && typeof requestAnimationFrame === "function") {
+        m.raf = requestAnimationFrame(frame);
+      }
+    },
+    [frame]
+  );
+  const onMouseLeave = React9.useCallback(() => {
+    motion.current.on = false;
+    unbold();
+    setPillPrice(null);
+  }, []);
+  React9.useEffect(() => {
+    return () => {
+      if (motion.current.raf) cancelAnimationFrame(motion.current.raf);
+    };
+  }, []);
+  return { sectionRef, pillRef, priceSpanRef, pillPrice, onMouseMove, onMouseLeave };
+}
 function SkeletonRow({ compact }) {
   if (compact) {
     return /* @__PURE__ */ jsxs(
@@ -2112,8 +2360,12 @@ function DesktopOrderbookLayout({
   compactLevelCount: _compactLevelCount,
   fillHeight,
   newAskPrices,
-  newBidPrices
+  newBidPrices,
+  spread,
+  spreadPct,
+  asksSectionRef
 }) {
+  const glide = useGlidePill();
   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: [
@@ -2123,8 +2375,8 @@ function DesktopOrderbookLayout({
             type: "button",
             onClick: () => handleTab("orderbook"),
             className: cn(
-              "relative pb-2 text-sm font-semibold",
-              tab === "orderbook" ? "text-white" : "text-white/60"
+              "relative pb-2 text-[0.8rem] font-medium transition-colors",
+              tab === "orderbook" ? "text-white" : "text-white/60 hover:text-white/85"
             ),
             children: [
               "Orderbook",
@@ -2138,8 +2390,8 @@ function DesktopOrderbookLayout({
             type: "button",
             onClick: () => handleTab("trades"),
             className: cn(
-              "relative pb-2 text-sm font-medium",
-              tab === "trades" ? "text-white" : "text-white/60"
+              "relative pb-2 text-[0.8rem] font-medium transition-colors",
+              tab === "trades" ? "text-white" : "text-white/60 hover:text-white/85"
             ),
             children: [
               "Trades",
@@ -2187,100 +2439,170 @@ function DesktopOrderbookLayout({
         )
       ] }) : /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: rightHeader })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-h-0 px-4 pt-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 px-3 pb-1.5 pt-1 text-xs text-white/60", children: [
-        /* @__PURE__ */ jsx("div", { children: priceLabel }),
-        /* @__PURE__ */ jsx("div", { className: "text-right", children: amountLabel }),
-        /* @__PURE__ */ jsx("div", { className: "text-right", children: tab === "orderbook" ? "Total" : "Time" })
-      ] }),
-      tab === "trades" ? /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
-          style: { scrollbarGutter: "stable" },
-          children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { children: Array.from({ length: effectiveLevels }).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", { children: tradeFiltered.map((trade, i) => {
-            const tradeKey = getTradeKey(trade, i);
-            const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
-            return /* @__PURE__ */ jsx(
-              TradeRow,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: glide.sectionRef,
+        "data-glide-section": true,
+        className: "relative flex flex-1 flex-col min-h-0 px-4 pt-2",
+        onMouseMove: glide.onMouseMove,
+        onMouseLeave: glide.onMouseLeave,
+        children: [
+          typeof document !== "undefined" ? createPortal(
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                trade,
-                tradeKey,
-                precision,
-                amountPrecision,
-                seenTradeKeysRef,
-                explorerUrl
-              },
-              tradeKey
-            );
-          }) })
-        }
-      ) : /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn("flex flex-col justify-end overflow-hidden", !fillHeight && "flex-shrink-0"),
-            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsx(
-              DepthRow,
+                ref: glide.pillRef,
+                "data-glide-pill": true,
+                "data-visible": glide.pillPrice != null ? "true" : "false",
+                style: {
+                  position: "fixed",
+                  left: 0,
+                  top: 0,
+                  zIndex: 60,
+                  pointerEvents: "none",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  whiteSpace: "nowrap",
+                  background: "#1b1d22",
+                  border: "1px solid rgba(255,255,255,0.14)",
+                  borderRadius: 999,
+                  padding: "4px 13px",
+                  boxShadow: "0 6px 20px rgba(0,0,0,0.55)",
+                  fontVariantNumeric: "tabular-nums",
+                  opacity: glide.pillPrice != null ? 1 : 0,
+                  transition: "opacity 160ms ease"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "0.6rem",
+                        fontWeight: 600,
+                        letterSpacing: "0.08em",
+                        textTransform: "uppercase",
+                        color: "#E6C87E",
+                        lineHeight: 1
+                      },
+                      children: "Limit"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      ref: glide.priceSpanRef,
+                      className: "tabular-nums",
+                      style: { fontSize: "0.8rem", fontWeight: 600, color: "#fff" },
+                      children: glide.pillPrice ?? ""
+                    }
+                  )
+                ]
+              }
+            ),
+            document.body
+          ) : null,
+          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 px-3 pb-1.5 pt-1 text-xs text-white/60", children: [
+            /* @__PURE__ */ jsx("div", { children: priceLabel }),
+            /* @__PURE__ */ jsx("div", { className: "text-right", children: amountLabel }),
+            /* @__PURE__ */ jsx("div", { className: "text-right", children: tab === "orderbook" ? "Total" : "Time" })
+          ] }),
+          tab === "trades" ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
+              style: { scrollbarGutter: "stable" },
+              children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsx("div", { children: Array.from({ length: effectiveLevels }).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", { children: tradeFiltered.map((trade, i) => {
+                const tradeKey = getTradeKey(trade, i);
+                const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
+                return /* @__PURE__ */ jsx(
+                  TradeRow,
+                  {
+                    trade,
+                    tradeKey,
+                    precision,
+                    amountPrecision,
+                    seenTradeKeysRef,
+                    explorerUrl
+                  },
+                  tradeKey
+                );
+              }) })
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                side: "ask",
-                price: l.price,
-                amount: l.amount,
-                cumDepth: askCumDepths[i],
-                depthPct: askCumDepths[i] / askMaxCumDepth * 100,
-                precision,
-                amountPrecision,
-                hasUserOrder: userAskPrices.has(l.price),
-                onPriceClick,
-                flashOnMount: newAskPrices.has(l.price),
-                fillHeight
-              },
-              `ask-${l.price}`
-            ))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "flex items-center gap-2 bg-[#0b1a24] px-3 py-2 flex-shrink-0 overflow-hidden orderbook-mid-row",
-            children: /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap orderbook-mid-price", 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",
-          {
-            className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
-            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsx(
-              DepthRow,
+                ref: asksSectionRef,
+                className: cn("flex flex-col justify-end overflow-hidden", !fillHeight && "flex-shrink-0"),
+                style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
+                children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsx(
+                  DepthRow,
+                  {
+                    side: "ask",
+                    price: l.price,
+                    amount: l.amount,
+                    cumDepth: askCumDepths[i],
+                    depthPct: askCumDepths[i] / askMaxCumDepth * 100,
+                    precision,
+                    amountPrecision,
+                    hasUserOrder: userAskPrices.has(l.price),
+                    onPriceClick,
+                    flashOnMount: newAskPrices.has(l.price),
+                    fillHeight
+                  },
+                  `ask-${l.price}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
               {
-                side: "bid",
-                price: l.price,
-                amount: l.amount,
-                cumDepth: bidCumDepths[i],
-                depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
-                precision,
-                amountPrecision,
-                hasUserOrder: userBidPrices.has(l.price),
-                onPriceClick,
-                flashOnMount: newBidPrices.has(l.price),
-                fillHeight
-              },
-              `bid-${l.price}`
-            ))
-          }
-        )
-      ] })
-    ] })
+                className: "flex items-center justify-between gap-2 px-3 py-2 flex-shrink-0 overflow-hidden orderbook-mid-row",
+                style: { ...MID_ROW_GOLD_STYLE, alignItems: "baseline" },
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap orderbook-mid-price", 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),
+                      "%"
+                    ] })
+                  ] }) }),
+                  !isLoading && /* @__PURE__ */ jsx(SpreadReadout, { spread, spreadPct, precision })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
+                style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
+                children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsx(
+                  DepthRow,
+                  {
+                    side: "bid",
+                    price: l.price,
+                    amount: l.amount,
+                    cumDepth: bidCumDepths[i],
+                    depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
+                    precision,
+                    amountPrecision,
+                    hasUserOrder: userBidPrices.has(l.price),
+                    onPriceClick,
+                    flashOnMount: newBidPrices.has(l.price),
+                    fillHeight
+                  },
+                  `bid-${l.price}`
+                ))
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
 }
 function MobileOrderbookLayout({
@@ -2407,8 +2729,7 @@ function MobileOrderbookLayout({
             gridTemplateColumns: "1.2fr 0.8fr",
             padding: "0.3rem 0",
             fontSize: "0.8rem",
-            borderTop: "1px solid rgba(255,255,255,0.1)",
-            borderBottom: "1px solid rgba(255,255,255,0.1)"
+            ...MID_ROW_GOLD_STYLE
           },
           children: [
             /* @__PURE__ */ jsx(
@@ -2490,7 +2811,7 @@ function MobileDepthRow({
   flashOnMount
 }) {
   const isAsk = side === "ask";
-  const rowRef = React5.useRef(null);
+  const rowRef = React9.useRef(null);
   useAmountChangeFlash(rowRef, amount, side, flashOnMount);
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2516,16 +2837,12 @@ function MobileDepthRow({
               left: "2px",
               top: "50%",
               transform: "translateY(-50%)",
-              width: "6px",
-              height: "6px",
-              borderRadius: "50%",
-              backgroundColor: "#C9A227",
-              boxShadow: "0 0 6px rgba(201,162,39,0.7)",
               zIndex: 2
-            }
+            },
+            children: /* @__PURE__ */ jsx(BreadSliceGlyph, {})
           }
         ) : null,
-        /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81", paddingLeft: hasUserOrder ? "10px" : void 0 }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81", paddingLeft: hasUserOrder ? "14px" : void 0 }, children: [
           "$",
           formatNumber(price, precision)
         ] }),
@@ -2535,12 +2852,12 @@ function MobileDepthRow({
           {
             style: {
               position: "absolute",
-              top: 0,
+              top: 1,
               left: 0,
-              bottom: 0,
+              bottom: 1,
               width: `${clamp3(depthPct, 0, 100)}%`,
-              backgroundColor: isAsk ? "#f6465d" : "#0ecb81",
-              opacity: 0.1,
+              backgroundImage: isAsk ? "linear-gradient(90deg, rgba(246,70,93,0.11), rgba(246,70,93,0.15))" : "linear-gradient(90deg, rgba(14,203,129,0.09), rgba(14,203,129,0.13))",
+              borderRadius: "0 4px 4px 0",
               zIndex: 0,
               transition: "width 300ms ease-out"
             }
@@ -2553,20 +2870,20 @@ function MobileDepthRow({
 var isHlsManifest = (url) => /\.m3u8(\?|$)/i.test(url);
 var HLS_MIME = "application/vnd.apple.mpegurl";
 var MANIFEST_FAILURES = /* @__PURE__ */ new Set(["manifestLoadError", "manifestLoadTimeOut", "manifestParsingError"]);
-var HlsVideo = React5.forwardRef(
+var HlsVideo = React9.forwardRef(
   ({ src, capLevelToPlayerSize = true, onError, ...videoProps }, ref) => {
-    const videoRef = React5.useRef(null);
-    React5.useImperativeHandle(ref, () => videoRef.current, []);
+    const videoRef = React9.useRef(null);
+    React9.useImperativeHandle(ref, () => videoRef.current, []);
     const primary = typeof src === "string" ? src : src.src;
     const fallbackSrc = typeof src === "string" ? void 0 : src.fallbackSrc;
-    const [failedSrc, setFailedSrc] = React5.useState(null);
+    const [failedSrc, setFailedSrc] = React9.useState(null);
     const usingFallback = fallbackSrc != null && failedSrc === primary;
     const activeSrc = usingFallback ? fallbackSrc : primary;
-    const failPrimary = React5.useCallback(() => {
+    const failPrimary = React9.useCallback(() => {
       if (fallbackSrc == null) return;
       setFailedSrc(primary);
     }, [fallbackSrc, primary]);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const video = videoRef.current;
       if (!video || !activeSrc) return;
       if (!isHlsManifest(activeSrc) || video.canPlayType(HLS_MIME)) {
@@ -2599,7 +2916,7 @@ var HlsVideo = React5.forwardRef(
         hls?.destroy();
       };
     }, [activeSrc, capLevelToPlayerSize, failPrimary]);
-    const handleError = React5.useCallback(
+    const handleError = React9.useCallback(
       (e) => {
         if (!usingFallback) failPrimary();
         onError?.(e);
@@ -2610,7 +2927,7 @@ var HlsVideo = React5.forwardRef(
   }
 );
 HlsVideo.displayName = "HlsVideo";
-var PropertyTour = React5.forwardRef(
+var PropertyTour = React9.forwardRef(
   ({
     className,
     title,
@@ -2623,8 +2940,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 = () => {
@@ -2732,8 +3049,50 @@ function isSafeUrl(url) {
     return false;
   }
 }
+var BREAKING_WINDOW_HOURS = 6;
+var MAX_PINNED_BREAKING = 2;
+var BREAKING_IMPACT_FLOOR = 8;
+var breakingImpact = (it) => typeof it.impactScore === "number" && Number.isFinite(it.impactScore) ? it.impactScore : BREAKING_IMPACT_FLOOR;
+var dismissedBreakingKeys = /* @__PURE__ */ new Set();
+var __resetDismissedBreaking = () => dismissedBreakingKeys.clear();
+var breakingKey = (it) => String(it.id ?? it.title);
+var BREAKING_SWIPE_MIN_PX = 80;
 var ITEMS_PER_PAGE = 5;
 var ITEMS_PER_PAGE_MOBILE = 5;
+function formatAge(publishedAt, now) {
+  const elapsed = Math.max(0, now - new Date(publishedAt).getTime());
+  const secs = Math.floor(elapsed / 1e3);
+  if (secs < 60) return `${secs}s ago`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ago`;
+  return `${Math.floor(mins / 60)}h ago`;
+}
+function rowAgeLabel(publishedAt, now) {
+  if (!publishedAt) return null;
+  const t = new Date(publishedAt).getTime();
+  if (!Number.isFinite(t)) return null;
+  const ageMs = Math.max(0, now - t);
+  if (ageMs >= 24 * 36e5) return null;
+  return { label: formatAge(publishedAt, now), fresh: ageMs < 36e5 };
+}
+function useTickingNow(active, youngestPublishedAt) {
+  const [now, setNow] = React9.useState(() => Date.now());
+  React9.useEffect(() => {
+    if (!active || !youngestPublishedAt) return;
+    let timer;
+    const schedule = () => {
+      const ageSecs = (Date.now() - new Date(youngestPublishedAt).getTime()) / 1e3;
+      const delay = ageSecs < 60 ? 1e3 : ageSecs < 3600 ? 15e3 : 6e4;
+      timer = setTimeout(() => {
+        setNow(Date.now());
+        schedule();
+      }, delay);
+    };
+    schedule();
+    return () => clearTimeout(timer);
+  }, [active, youngestPublishedAt]);
+  return now;
+}
 var ensureAnimationsInjected = () => {
   if (typeof document === "undefined") return;
   if (document.getElementById("property-news-updates-animations")) return;
@@ -2756,6 +3115,110 @@ var ensureAnimationsInjected = () => {
       from { opacity: 0; transform: translateY(12px) scale(0.98); }
       to   { opacity: 1; transform: translateY(0)   scale(1); }
     }
+    /* The list scrolls but never shows a scrollbar (user call 2026-08-22: the
+       grey track crowded the rows). Same treatment as the rest of the app. */
+    .news-list-scroll { scrollbar-width: none; -ms-overflow-style: none; }
+    .news-list-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
+    .property-news-breaking-dismiss {
+      opacity: 0;
+      pointer-events: none;
+      transform: translateY(3px);
+      transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s ease;
+    }
+    .property-news-breaking-item:hover .property-news-breaking-dismiss,
+    .property-news-breaking-item:focus-within .property-news-breaking-dismiss {
+      opacity: 1;
+      pointer-events: auto;
+      transform: translateY(0);
+    }
+    .property-news-breaking-dismiss:hover,
+    .property-news-breaking-dismiss:focus-visible {
+      color: #fff !important;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      outline: none;
+    }
+    .property-news-breaking-item[data-dismissing="true"] {
+      pointer-events: none;
+      animation: propertyNewsBreakingDismiss 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
+    }
+    .property-news-breaking-item[data-new-breaking="true"] {
+      position: relative;
+      overflow: hidden;
+      animation: propertyNewsBreakingArrive 1.18s cubic-bezier(0.16, 1, 0.3, 1) both;
+    }
+    .property-news-breaking-item[data-new-breaking="true"]::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
+      background: linear-gradient(100deg, transparent 8%, rgba(var(--color-accent-rgb, 230, 200, 126), 0.42) 48%, transparent 82%);
+      transform: translateX(-120%);
+      animation: propertyNewsBreakingSheen 1.18s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    .property-news-breaking-item[data-new-breaking="true"] > span {
+      position: relative;
+      z-index: 1;
+    }
+    .property-news-breaking-item[data-new-breaking="true"][data-dismissing="true"] {
+      animation: propertyNewsBreakingDismiss 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
+    }
+    @keyframes propertyNewsBreakingArrive {
+      0% { opacity: 0; transform: translateY(-14px) scale(0.985); box-shadow: 0 0 0 rgba(var(--color-accent-rgb, 230, 200, 126), 0); filter: brightness(1); }
+      24% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 26px rgba(var(--color-accent-rgb, 230, 200, 126), 0.38); filter: brightness(1.16); }
+      58% { box-shadow: 0 0 16px rgba(var(--color-accent-rgb, 230, 200, 126), 0.22); filter: brightness(1.06); }
+      100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 0 0 rgba(var(--color-accent-rgb, 230, 200, 126), 0); }
+    }
+    @keyframes propertyNewsBreakingSheen {
+      from { transform: translateX(-120%); }
+      to { transform: translateX(120%); }
+    }
+    @keyframes propertyNewsBreakingDismiss {
+      from { opacity: 1; transform: translateX(0); max-height: 96px; }
+      to { opacity: 0; transform: translateX(24px); max-height: 0; padding-top: 0; padding-bottom: 0; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .property-news-breaking-dismiss { transition: none; }
+      .property-news-breaking-item[data-new-breaking="true"],
+      .property-news-breaking-item[data-new-breaking="true"]::after { animation-duration: 1ms; animation-delay: 0ms; }
+      .property-news-breaking-item[data-dismissing="true"] { animation-duration: 1ms; }
+    }
+    /* Asset badge: the wrapper hosts the INSTANT CSS tooltip (native title is
+       too slow) and the hover affordance that says "the icon itself is the
+       target" \u2014 the box scales up with a gold ring while the tooltip shows
+       "Name (TICKER)" immediately. */
+    .news-badge-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
+    .news-badge-wrap > .news-badge-box { transition: transform 0.15s ease, box-shadow 0.15s ease; }
+    .news-badge-wrap:hover > .news-badge-box {
+      transform: scale(1.08);
+      box-shadow: 0 0 0 1px rgba(var(--color-accent-rgb, 230, 200, 126), 0.7);
+    }
+    /* Instant element tooltip (an ::after can't carry a coloured % change).
+       PORTALED to document.body with position:fixed \u2014 as an absolute child it
+       was clipped by the scrolling news list at the top/right edges. Anchored
+       above the badge by default (translateY(-100%)), flipped below via
+       data-tip-below when the badge sits too close to the viewport top. */
+    .news-badge-tipbox {
+      position: fixed;
+      display: flex;
+      transform: translate(-50%, -100%);
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+      background: #1a1d24;
+      color: #fff;
+      font-size: 0.62rem;
+      font-weight: 600;
+      line-height: 1.2;
+      padding: 0.32rem 0.55rem;
+      border-radius: 5px;
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      white-space: nowrap;
+      z-index: 10060;
+      pointer-events: none;
+    }
+    .news-badge-tipbox[data-tip-below="true"] { transform: translate(-50%, 0); }
   `;
   document.head.appendChild(style);
 };
@@ -2792,7 +3255,8 @@ var formatDateShort = (value) => {
   if (diffS < 3600) return `${Math.floor(diffS / 60)}m ago`;
   if (diffS < 86400) return `${Math.floor(diffS / 3600)}h ago`;
   const time = d.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", hour12: true });
-  return `${time} \xB7 ${d.toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
+  const date = d.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+  return `${date} \xB7 ${time}`;
 };
 var formatTimeAgo = (timestamp) => {
   const diff = (Date.now() - new Date(timestamp).getTime()) / 1e3;
@@ -2806,10 +3270,66 @@ function getSentimentInfo(score) {
   if (score < -0.15) return { arrow: "\u25BC", label: "Bearish", color: "#f6465d" };
   return { arrow: "", label: "Neutral", color: "#848e9c" };
 }
+function SentimentBar({ score, color }) {
+  const clamped = Math.max(-1, Math.min(1, score));
+  const widthPct = Math.abs(clamped) * 50;
+  const direction = clamped > 0 ? "positive" : clamped < 0 ? "negative" : "neutral";
+  const word = clamped > 0.15 ? "bullish" : clamped < -0.15 ? "bearish" : "neutral";
+  const signed = `${clamped >= 0 ? "+" : "\u2212"}${Math.abs(clamped).toFixed(2)}`;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-testid": "sentiment-bar",
+      "data-score": String(score),
+      role: "img",
+      "aria-label": `Sentiment: ${word}, ${signed} of +1`,
+      style: {
+        position: "relative",
+        display: "inline-block",
+        width: "36px",
+        height: "3px",
+        borderRadius: "2px",
+        background: "rgba(255,255,255,0.10)",
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "-1px",
+              width: "1px",
+              height: "5px",
+              background: "rgba(255,255,255,0.28)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-testid": "sentiment-fill",
+            "data-direction": direction,
+            style: {
+              position: "absolute",
+              top: 0,
+              height: "100%",
+              borderRadius: "2px",
+              background: color,
+              width: `${widthPct}%`,
+              left: `${clamped >= 0 ? 50 : 50 - widthPct}%`
+            }
+          }
+        )
+      ]
+    }
+  );
+}
 function NewsArticleModal({ item, onClose }) {
   const sentimentInfo = getSentimentInfo(item.sentimentScore);
   const catStyle = categoryStyles[item.type] ?? categoryStyles.market;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -2870,7 +3390,7 @@ function NewsArticleModal({ item, onClose }) {
                 children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) })
               }
             ) }),
-            sentimentInfo && /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.6rem" }, children: /* @__PURE__ */ jsxs(
+            sentimentInfo && /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.6rem" }, children: /* @__PURE__ */ jsx(
               "span",
               {
                 style: {
@@ -2885,10 +3405,11 @@ function NewsArticleModal({ item, onClose }) {
                   background: `${sentimentInfo.color}1a`,
                   border: `1px solid ${sentimentInfo.color}40`
                 },
-                children: [
+                children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                   sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
-                  sentimentInfo.label
-                ]
+                  sentimentInfo.label,
+                  item.sentimentScore != null && /* @__PURE__ */ jsx(SentimentBar, { score: item.sentimentScore, color: sentimentInfo.color })
+                ] })
               }
             ) }),
             /* @__PURE__ */ jsx("h2", { style: { fontSize: "1rem", fontWeight: 600, color: "#fff", lineHeight: 1.5, margin: "0 0 1rem" }, children: item.title }),
@@ -2903,7 +3424,13 @@ function NewsArticleModal({ item, onClose }) {
                     fontSize: "0.65rem",
                     fontWeight: 500,
                     background: "rgba(255,255,255,0.07)",
-                    color: "#848e9c"
+                    color: "#848e9c",
+                    // Truncation guard moved here with the source itself — a long
+                    // publication name would otherwise stretch the meta row.
+                    maxWidth: "120px",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
                   },
                   children: item.source
                 }
@@ -2965,7 +3492,7 @@ function NewsArticleModal({ item, onClose }) {
   }
   return modal;
 }
-var PropertyNewsUpdates = React5.forwardRef(
+var PropertyNewsUpdates = React9.forwardRef(
   ({
     className,
     heading,
@@ -2979,49 +3506,120 @@ var PropertyNewsUpdates = React5.forwardRef(
     viewAllLabel = "View All News",
     connectionStatus = "live",
     disablePagination = false,
+    hideHeading = false,
+    hideCategoryTabs = false,
+    category,
+    onCategoryChange,
+    pinBreaking = false,
+    onAssetOpen,
+    showAssetBadges = true,
     ...props
   }, ref) => {
     const isPurchaseVariant = variant === "purchases";
     const isHomeVariant = variant === "home";
     const resolvedHeading = heading ?? (isPurchaseVariant ? "Live Purchases" : "Property News & Headlines");
-    const [homeTab, setHomeTab] = React5.useState("all");
-    const [homePage, setHomePage] = React5.useState(0);
+    const headerTrailing = Boolean(isHomeVariant ? viewAllHref : !isPurchaseVariant);
+    const [homeTabInternal, setHomeTabInternal] = React9.useState("all");
+    const homeTab = category ?? homeTabInternal;
+    const setHomeTab = React9.useCallback(
+      (next) => {
+        setHomeTabInternal(next);
+        onCategoryChange?.(next);
+      },
+      [onCategoryChange]
+    );
+    const [homePage, setHomePage] = React9.useState(0);
     const purchaseItems = purchasesProp ?? [];
-    const [page, setPage] = React5.useState(0);
-    const [selectedItem, setSelectedItem] = React5.useState(null);
-    const [isMobile, setIsMobile] = React5.useState(
+    const [page, setPage] = React9.useState(0);
+    const [selectedItem, setSelectedItem] = React9.useState(null);
+    const [isMobile, setIsMobile] = React9.useState(
       () => typeof window !== "undefined" && window.innerWidth <= 768
     );
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const check = () => setIsMobile(window.innerWidth <= 768);
       window.addEventListener("resize", check);
       return () => window.removeEventListener("resize", check);
     }, []);
     const homePageSize = isMobile ? ITEMS_PER_PAGE_MOBILE : ITEMS_PER_PAGE;
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       setHomePage(0);
     }, [homeTab]);
-    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]
+    const breakingCandidates = React9.useMemo(() => {
+      if (!pinBreaking || !Array.isArray(items)) return [];
+      return items.filter((it) => it.breaking && it.publishedAt && Number.isFinite(new Date(it.publishedAt).getTime())).sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime());
+    }, [pinBreaking, items]);
+    const breakingNow = useTickingNow(
+      breakingCandidates.length > 0,
+      breakingCandidates[0]?.publishedAt ?? null
+    );
+    const breakingEligible = React9.useMemo(() => {
+      const cutoff = breakingNow - BREAKING_WINDOW_HOURS * 36e5;
+      return breakingCandidates.filter((it) => {
+        if (new Date(it.publishedAt).getTime() < cutoff) return false;
+        return homeTab === "all" || it.type === homeTab;
+      });
+    }, [breakingCandidates, breakingNow, homeTab]);
+    const [dismissedVersion, setDismissedVersion] = React9.useState(0);
+    const [dismissingBreakingKey, setDismissingBreakingKey] = React9.useState(null);
+    const [breakingSwipe, setBreakingSwipe] = React9.useState(null);
+    const breakingSwipeStartXRef = React9.useRef(0);
+    const suppressBreakingClickRef = React9.useRef(false);
+    const breakingSwipeActiveKeyRef = React9.useRef(null);
+    const breakingSwipeMaxRef = React9.useRef(0);
+    const [badgeTip, setBadgeTip] = React9.useState(null);
+    const BADGE_TIP_GAP = 7;
+    const BADGE_TIP_FLIP_PX = 56;
+    const showBadgeTip = (el, asset) => {
+      const rect = el.getBoundingClientRect();
+      const below = rect.top < BADGE_TIP_FLIP_PX;
+      setBadgeTip({
+        asset,
+        left: rect.left + rect.width / 2,
+        top: below ? rect.bottom + BADGE_TIP_GAP : rect.top - BADGE_TIP_GAP,
+        below
+      });
+    };
+    const pinnedBreaking = React9.useMemo(() => {
+      return breakingEligible.filter((it) => !dismissedBreakingKeys.has(breakingKey(it))).sort((a, b) => breakingImpact(b) - breakingImpact(a)).slice(0, MAX_PINNED_BREAKING);
+    }, [breakingEligible, dismissedVersion]);
+    const breakingRowKeys = React9.useMemo(
+      () => new Set(breakingEligible.map(breakingKey)),
+      [breakingEligible]
+    );
+    const listItems = React9.useMemo(() => {
+      if (pinnedBreaking.length === 0) return items;
+      const pinned = new Set(pinnedBreaking);
+      return items.filter((it) => !pinned.has(it));
+    }, [items, pinnedBreaking]);
+    const hasItems = Array.isArray(listItems) && listItems.length > 0;
+    const totalPages = React9.useMemo(
+      () => hasItems ? Math.max(1, Math.ceil(listItems.length / ITEMS_PER_PAGE)) : 1,
+      [hasItems, listItems.length]
     );
-    React5.useEffect(() => {
+    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) : [];
-    const homeFilteredItems = React5.useMemo(
-      () => hasItems ? items.filter((it) => homeTab === "all" || it.type === homeTab) : [],
-      [hasItems, items, homeTab]
+    const paginatedItems = hasItems ? listItems.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
+    const homeFilteredItems = React9.useMemo(
+      () => hasItems ? listItems.filter((it) => homeTab === "all" || it.type === homeTab) : [],
+      [hasItems, listItems, homeTab]
     );
-    const homeTotalPages = React5.useMemo(
+    const homeTotalPages = React9.useMemo(
       () => Math.max(1, Math.ceil(homeFilteredItems.length / homePageSize)),
       [homeFilteredItems.length, homePageSize]
     );
     const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * homePageSize, (homePage + 1) * homePageSize);
+    const youngestRowPublishedAt = React9.useMemo(() => {
+      let youngest = null;
+      for (const it of homePaginatedItems) {
+        if (it.publishedAt && (!youngest || it.publishedAt > youngest)) youngest = it.publishedAt;
+      }
+      return youngest;
+    }, [homePaginatedItems]);
+    const rowNow = useTickingNow(isHomeVariant && youngestRowPublishedAt != null, youngestRowPublishedAt);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3032,8 +3630,8 @@ var PropertyNewsUpdates = React5.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", style: isHomeVariant ? { marginBottom: "0.5rem", minHeight: isMobile ? "32px" : "24px", gap: isMobile ? "0.5rem" : "1rem" } : void 0, children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+          (!hideHeading || headerTrailing) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", style: isHomeVariant ? { marginBottom: "0.5rem", minHeight: isMobile ? "32px" : "24px", gap: isMobile ? "0.5rem" : "1rem", justifyContent: hideHeading ? "flex-end" : void 0 } : hideHeading ? { justifyContent: "flex-end" } : void 0, children: [
+            !hideHeading && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
               isHomeVariant && /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: isMobile ? 14 : 16, height: isMobile ? 14 : 16, viewBox: "0 0 24 24", fill: "currentColor", style: { color: "var(--color-text, #fff)", flexShrink: 0, display: "block" }, children: /* @__PURE__ */ jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" }) }),
               isPurchaseVariant && /* @__PURE__ */ jsx("span", { style: { display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#0ecb81", boxShadow: "0 0 8px rgba(14,203,129,0.8)", animation: "propertyNewsPulse 1.5s infinite" } }),
               /* @__PURE__ */ jsxs("div", { children: [
@@ -3052,7 +3650,7 @@ var PropertyNewsUpdates = React5.forwardRef(
               "LIVE"
             ] }) : null
           ] }),
-          isHomeVariant && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: isMobile ? "1rem" : "1.5rem", marginTop: "0.25rem", marginBottom: "1rem", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", paddingBottom: "0.5rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsx(
+          isHomeVariant && !hideCategoryTabs && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: isMobile ? "1rem" : "1.5rem", marginTop: "0.25rem", marginBottom: "1rem", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", paddingBottom: "0.5rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -3073,10 +3671,229 @@ var PropertyNewsUpdates = React5.forwardRef(
             },
             tab
           )) }),
+          pinnedBreaking.length > 0 && /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-testid": "news-breaking",
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                marginBottom: "0.5rem",
+                // Clips the row while it's being swiped out to the right. The gold
+                // band styling lives on each ITEM below, not here — the whole band
+                // (rule, wash, hairlines) must travel with a swipe, not just the
+                // text inside it (user bug report, 2026-08-20).
+                overflow: "hidden"
+              },
+              children: pinnedBreaking.map((item, i) => {
+                const sentiment = getSentimentInfo(item.sentimentScore);
+                const k = breakingKey(item);
+                const dx = breakingSwipe?.key === k ? breakingSwipe.dx : 0;
+                const finishDismiss = () => {
+                  dismissedBreakingKeys.add(k);
+                  setDismissingBreakingKey(null);
+                  setDismissedVersion((v) => v + 1);
+                };
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "property-news-breaking-item",
+                    "data-new-breaking": item.isNew ? "true" : void 0,
+                    "data-dismissing": dismissingBreakingKey === k ? "true" : void 0,
+                    "data-testid": "news-breaking-item",
+                    onAnimationEnd: (e) => {
+                      if (e.animationName === "propertyNewsBreakingDismiss" && dismissingBreakingKey === k) {
+                        finishDismiss();
+                      }
+                    },
+                    onClick: () => {
+                      if (suppressBreakingClickRef.current) {
+                        suppressBreakingClickRef.current = false;
+                        return;
+                      }
+                      setSelectedItem(item);
+                    },
+                    onPointerDown: (e) => {
+                      breakingSwipeStartXRef.current = e.clientX;
+                      breakingSwipeActiveKeyRef.current = k;
+                      breakingSwipeMaxRef.current = 0;
+                      setBreakingSwipe({ key: k, dx: 0 });
+                      try {
+                        e.currentTarget.setPointerCapture?.(e.pointerId);
+                      } catch {
+                      }
+                    },
+                    onPointerMove: (e) => {
+                      if (breakingSwipeActiveKeyRef.current !== k) return;
+                      const delta = e.clientX - breakingSwipeStartXRef.current;
+                      breakingSwipeMaxRef.current = Math.max(breakingSwipeMaxRef.current, Math.abs(delta));
+                      setBreakingSwipe({ key: k, dx: Math.max(0, delta) });
+                    },
+                    onPointerUp: (e) => {
+                      if (breakingSwipeActiveKeyRef.current !== k) return;
+                      breakingSwipeActiveKeyRef.current = null;
+                      if (breakingSwipeMaxRef.current > 6) suppressBreakingClickRef.current = true;
+                      setBreakingSwipe(null);
+                      const drag = Math.max(0, e.clientX - breakingSwipeStartXRef.current);
+                      const width = e.currentTarget.offsetWidth || 0;
+                      if (drag >= Math.max(BREAKING_SWIPE_MIN_PX, width * 0.3)) {
+                        dismissedBreakingKeys.add(k);
+                        setDismissedVersion((v) => v + 1);
+                      }
+                    },
+                    onPointerCancel: () => {
+                      breakingSwipeActiveKeyRef.current = null;
+                      setBreakingSwipe(null);
+                    },
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      padding: "0.4rem 0 0.5rem 0.6rem",
+                      textAlign: "left",
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      minWidth: 0,
+                      // Highlighted on purpose (user call, 2026-08-20): BREAKING is
+                      // the one thing on this page allowed to shout. The gold rule,
+                      // hairlines and wash live HERE on the item — the whole band
+                      // travels when the item is swiped away.
+                      borderLeft: "3px solid var(--color-accent, #E6C87E)",
+                      borderTop: "1px solid rgba(var(--color-accent-rgb, 230, 200, 126), 0.28)",
+                      borderBottom: "1px solid rgba(var(--color-accent-rgb, 230, 200, 126), 0.28)",
+                      backgroundImage: "linear-gradient(90deg, rgba(var(--color-accent-rgb, 230, 200, 126), 0.16) 0%, rgba(var(--color-accent-rgb, 230, 200, 126), 0.06) 45%, rgba(var(--color-accent-rgb, 230, 200, 126), 0.02) 100%)",
+                      // Horizontal drags are ours; vertical stays with the scroll.
+                      touchAction: "pan-y",
+                      transform: dx > 0 ? `translateX(${dx}px)` : void 0,
+                      opacity: dx > 0 ? Math.max(0.3, 1 - dx / 320) : 1,
+                      transition: dx > 0 ? "none" : "transform 0.15s ease, opacity 0.15s ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "data-testid": "news-breaking-title",
+                          style: {
+                            display: "-webkit-box",
+                            WebkitBoxOrient: "vertical",
+                            WebkitLineClamp: 2,
+                            fontSize: "0.8rem",
+                            fontWeight: 600,
+                            color: "#fff",
+                            lineHeight: 1.35,
+                            overflow: "hidden",
+                            overflowWrap: "anywhere"
+                          },
+                          children: item.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.45rem",
+                            marginTop: "0.2rem"
+                          },
+                          children: [
+                            (() => {
+                              const age = rowAgeLabel(item.publishedAt, breakingNow);
+                              return age ? /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  "data-age-fresh": age.fresh ? "true" : void 0,
+                                  style: {
+                                    fontSize: "0.64rem",
+                                    fontWeight: 600,
+                                    fontVariantNumeric: "tabular-nums",
+                                    color: age.fresh ? "var(--color-accent, #E6C87E)" : "rgba(255,255,255,0.65)"
+                                  },
+                                  children: age.label
+                                }
+                              ) : null;
+                            })(),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "data-testid": "breaking-tag",
+                                style: {
+                                  fontSize: "0.55rem",
+                                  fontWeight: 700,
+                                  letterSpacing: "0.09em",
+                                  color: "#0a0b0e",
+                                  background: "var(--color-accent, #E6C87E)",
+                                  padding: "0.16rem 0.34rem 0.13rem",
+                                  borderRadius: "3px",
+                                  lineHeight: 1
+                                },
+                                children: "BREAKING"
+                              }
+                            ),
+                            sentiment ? /* @__PURE__ */ jsxs(
+                              "span",
+                              {
+                                style: {
+                                  display: "inline-flex",
+                                  alignItems: "center",
+                                  gap: "0.3rem",
+                                  fontSize: "0.58rem",
+                                  fontWeight: 600,
+                                  color: sentiment.color
+                                },
+                                children: [
+                                  sentiment.arrow ? `${sentiment.arrow} ` : "",
+                                  sentiment.label,
+                                  item.sentimentScore != null && /* @__PURE__ */ jsx(SentimentBar, { score: item.sentimentScore, color: sentiment.color })
+                                ]
+                              }
+                            ) : null,
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "property-news-breaking-dismiss",
+                                "data-testid": "breaking-dismiss",
+                                role: "button",
+                                tabIndex: 0,
+                                "aria-label": `Dismiss breaking story: ${item.title}`,
+                                onPointerDown: (e) => e.stopPropagation(),
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  setDismissingBreakingKey(k);
+                                },
+                                onKeyDown: (e) => {
+                                  if (e.key !== "Enter" && e.key !== " ") return;
+                                  e.preventDefault();
+                                  e.stopPropagation();
+                                  setDismissingBreakingKey(k);
+                                },
+                                style: {
+                                  marginLeft: "auto",
+                                  padding: "0.2rem 0.35rem 0.2rem 0.5rem",
+                                  fontSize: "0.58rem",
+                                  fontWeight: 600,
+                                  color: "rgba(255,255,255,0.58)",
+                                  cursor: "pointer",
+                                  whiteSpace: "nowrap"
+                                },
+                                children: "Dismiss"
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  item.id ?? `breaking-${i}`
+                );
+              })
+            }
+          ),
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "gap-0" : "mt-4 gap-3"),
+              className: cn("news-list-scroll flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "gap-0" : "mt-4 gap-3"),
               style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
               children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
                 const maxAmount = 6e4;
@@ -3107,10 +3924,12 @@ var PropertyNewsUpdates = React5.forwardRef(
                 const key = item.displayId ?? item.id ?? `${item.title}-${index}`;
                 const isProperty = item.type === "property";
                 const sentimentInfo = getSentimentInfo(item.sentimentScore);
+                const isBreakingRow = pinBreaking && Boolean(item.breaking) && breakingRowKeys.has(breakingKey(item));
                 return /* @__PURE__ */ jsxs(
                   "button",
                   {
                     type: "button",
+                    "data-breaking-row": isBreakingRow ? "true" : void 0,
                     onClick: () => setSelectedItem(item),
                     style: {
                       width: "100%",
@@ -3126,6 +3945,10 @@ var PropertyNewsUpdates = React5.forwardRef(
                       gap: isMobile ? "0.25rem" : "0.5rem",
                       color: "inherit",
                       transition: "background-color 0.15s"
+                      // No gold wash or left edge on a dismissed row: once swiped
+                      // out of the pin it is back in the ordinary feed, and the
+                      // BREAKING badge below is enough to find it again. Only the
+                      // PINNED strip keeps the gold treatment.
                     },
                     onMouseEnter: (e) => {
                       e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.04)";
@@ -3139,15 +3962,91 @@ var PropertyNewsUpdates = React5.forwardRef(
                     },
                     children: [
                       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsx("h3", { style: { fontSize: isMobile ? "0.88rem" : "0.95rem", fontWeight: 500, marginBottom: isMobile ? "0.25rem" : "0.35rem", color: "#f8f9fa", lineHeight: isMobile ? 1.35 : 1.4, transition: "color 0.15s" }, children: item.title }),
+                        /* @__PURE__ */ jsx("h3", { style: { fontSize: "0.8rem", fontWeight: 500, marginBottom: isMobile ? "0.2rem" : "0.3rem", color: "#f8f9fa", lineHeight: 1.35, transition: "color 0.15s" }, children: item.title }),
                         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: isMobile ? "0.35rem" : "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
-                          /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: isMobile ? "0.55rem" : "0.7rem" }, children: formatDateShort(item.date) }),
-                          item.source && /* @__PURE__ */ jsx("span", { style: { padding: isMobile ? "0.08rem 0.35rem" : "0.1rem 0.4rem", borderRadius: "3px", fontSize: isMobile ? "0.52rem" : "0.62rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap" }, children: item.source }),
+                          isBreakingRow && /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              "data-testid": "breaking-tag",
+                              style: {
+                                fontSize: "0.55rem",
+                                fontWeight: 700,
+                                letterSpacing: "0.09em",
+                                color: "#0a0b0e",
+                                background: "var(--color-accent, #E6C87E)",
+                                padding: "0.16rem 0.34rem 0.13rem",
+                                borderRadius: "3px",
+                                lineHeight: 1
+                              },
+                              children: "BREAKING"
+                            }
+                          ),
+                          (() => {
+                            const age = rowAgeLabel(item.publishedAt, rowNow);
+                            return age ? /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "data-testid": "news-age",
+                                "data-age-fresh": age.fresh ? "true" : void 0,
+                                style: {
+                                  // Sized against the 0.8rem row title (matches the
+                                  // breaking strip's meta scale).
+                                  fontSize: isMobile ? "0.58rem" : "0.64rem",
+                                  fontWeight: 600,
+                                  fontVariantNumeric: "tabular-nums",
+                                  color: age.fresh ? "var(--color-accent, #E6C87E)" : "rgba(255,255,255,0.65)"
+                                },
+                                children: age.label
+                              }
+                            ) : /* @__PURE__ */ jsx("span", { style: { color: "#848e9c", fontSize: isMobile ? "0.55rem" : "0.7rem" }, children: formatDateShort(item.date) });
+                          })(),
+                          showAssetBadges && isProperty && (item.assets ?? (item.asset ? [item.asset] : [])).map((badgeAsset) => /* @__PURE__ */ jsx(
+                            "span",
+                            {
+                              className: "news-badge-wrap",
+                              onClick: onAssetOpen ? (e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                onAssetOpen(badgeAsset);
+                              } : void 0,
+                              onMouseEnter: (e) => showBadgeTip(e.currentTarget, badgeAsset),
+                              onMouseLeave: () => setBadgeTip(null),
+                              style: { cursor: onAssetOpen ? "pointer" : void 0 },
+                              children: /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "news-badge-box",
+                                  "data-testid": "news-asset-badge",
+                                  style: {
+                                    display: "inline-flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    width: "20px",
+                                    height: "20px",
+                                    borderRadius: "5px",
+                                    overflow: "hidden",
+                                    background: "rgba(255,255,255,0.08)",
+                                    flexShrink: 0
+                                  },
+                                  children: badgeAsset.imageUrl ? /* @__PURE__ */ jsx(
+                                    "img",
+                                    {
+                                      src: badgeAsset.imageUrl,
+                                      alt: badgeAsset.name ?? badgeAsset.ticker,
+                                      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+                                    }
+                                  ) : /* @__PURE__ */ jsx("span", { style: { fontSize: "0.45rem", fontWeight: 700, letterSpacing: "0.02em", color: "rgba(255,255,255,0.75)" }, children: badgeAsset.ticker.slice(0, 4) })
+                                }
+                              )
+                            },
+                            badgeAsset.ticker
+                          )),
                           /* @__PURE__ */ jsx("span", { style: { padding: isMobile ? "0.1rem 0.35rem" : "0.15rem 0.4rem", borderRadius: "2px", fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#E6C87E" }, children: isProperty ? "Property Update" : "Market News" }),
-                          sentimentInfo && /* @__PURE__ */ jsxs("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
+                          sentimentInfo && /* @__PURE__ */ jsx("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                             sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
-                            sentimentInfo.label
-                          ] })
+                            sentimentInfo.label,
+                            item.sentimentScore != null && /* @__PURE__ */ jsx(SentimentBar, { score: item.sentimentScore, color: sentimentInfo.color })
+                          ] }) })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsx("div", { style: { color: "#848e9c", paddingTop: "2px", flexShrink: 0 }, children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) }) })
@@ -3196,15 +4095,13 @@ var PropertyNewsUpdates = React5.forwardRef(
                         children: [
                           /* @__PURE__ */ jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.4rem", color: "#fff", lineHeight: 1.4 }, children: item.title }),
                           /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "0.5rem" }, children: [
-                            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: [
-                              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: isHighlighted ? "#0ecb81" : "#b5b8c5", whiteSpace: "nowrap" }, children: dateLabel }),
-                              item.source && /* @__PURE__ */ jsx("span", { style: { padding: "0.15rem 0.45rem", borderRadius: "3px", fontSize: "0.65rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxWidth: "120px" }, children: item.source })
-                            ] }),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: isHighlighted ? "#0ecb81" : "#b5b8c5", whiteSpace: "nowrap" }, children: dateLabel }) }),
                             /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
-                              sentimentInfo && /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: [
+                              sentimentInfo && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                                 sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
-                                sentimentInfo.label
-                              ] }),
+                                sentimentInfo.label,
+                                item.sentimentScore != null && /* @__PURE__ */ jsx(SentimentBar, { score: item.sentimentScore, color: sentimentInfo.color })
+                              ] }) }),
                               /* @__PURE__ */ jsx("span", { style: { padding: "0.25rem 0.6rem", borderRadius: "4px", border: `1px solid ${catStyle.borderColor}`, backgroundColor: catStyle.backgroundColor, color: catStyle.color, fontSize: "0.68rem", fontWeight: 600, textTransform: "uppercase", whiteSpace: "nowrap" }, children: item.type === "property" ? catStyle.label : "Market News" })
                             ] })
                           ] })
@@ -3277,7 +4174,21 @@ var PropertyNewsUpdates = React5.forwardRef(
               }
             )
           ] }),
-          selectedItem && !isPurchaseVariant && /* @__PURE__ */ jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) })
+          selectedItem && !isPurchaseVariant && /* @__PURE__ */ jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) }),
+          badgeTip && ReactDOM.createPortal(
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "news-badge-tipbox",
+                "data-testid": "news-asset-tip",
+                "data-tip-below": badgeTip.below ? "true" : void 0,
+                "aria-hidden": true,
+                style: { position: "fixed", left: `${badgeTip.left}px`, top: `${badgeTip.top}px` },
+                children: /* @__PURE__ */ jsx("span", { children: badgeTip.asset.name ? `${badgeTip.asset.name} (${badgeTip.asset.ticker})` : badgeTip.asset.ticker })
+              }
+            ),
+            document.body
+          )
         ]
       }
     );
@@ -3330,7 +4241,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.",
@@ -3348,7 +4259,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;
@@ -3451,7 +4362,7 @@ var MobileToggleButton = styled10.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,
@@ -3977,7 +4888,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,
@@ -3990,10 +4901,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) => {
@@ -4375,7 +5286,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",
@@ -4389,18 +5300,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);
@@ -4409,25 +5320,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, {
@@ -4472,7 +5383,7 @@ var PriceChart = React5.forwardRef(
         chart.remove();
       };
     }, []);
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const chart = chartRef.current;
       if (!chart) return;
       const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
@@ -4480,7 +5391,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;
@@ -4695,7 +5606,7 @@ var formatPrice3 = (value, currencySymbol, compact) => {
     maximumFractionDigits: 2
   })}`;
 };
-var PropertyHeroHeader = React5.forwardRef(
+var PropertyHeroHeader = React9.forwardRef(
   ({
     className,
     imageUrl,
@@ -4729,12 +5640,12 @@ var PropertyHeroHeader = React5.forwardRef(
     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 [isMobile, setIsMobile] = React5.useState(
+    const [isTradeInteracting, setIsTradeInteracting] = React9.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = React9.useState(false);
+    const [isMobile, setIsMobile] = React9.useState(
       () => typeof window !== "undefined" && window.innerWidth <= 768
     );
-    React5.useEffect(() => {
+    React9.useEffect(() => {
       const onResize = () => setIsMobile(window.innerWidth <= 768);
       window.addEventListener("resize", onResize);
       return () => window.removeEventListener("resize", onResize);
@@ -5414,7 +6325,7 @@ var Header = ({
       setShowLoginPopup(true);
     }
   };
-  const handleLoginPopupClose = React5__default.useCallback(() => {
+  const handleLoginPopupClose = React9__default.useCallback(() => {
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
@@ -6578,10 +7489,10 @@ var PBOperator = styled10.span`
     font-size: 0.55rem;
   }
 `;
-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;
@@ -6778,9 +7689,9 @@ var LoginPopup = ({
   const [fiatFundingLoading, setFiatFundingLoading] = useState(false);
   const [fundingError, setFundingError] = useState("");
   const [transakWidgetUrl, setTransakWidgetUrl] = useState(null);
-  const suppressAutoCloseRef = React5__default.useRef(false);
-  const validatedCodeRef = React5__default.useRef(null);
-  const finishGate = React5__default.useCallback(async () => {
+  const suppressAutoCloseRef = React9__default.useRef(false);
+  const validatedCodeRef = React9__default.useRef(null);
+  const finishGate = React9__default.useCallback(async () => {
     if (!gate) return true;
     const code = validatedCodeRef.current;
     if (code) {
@@ -6806,7 +7717,7 @@ var LoginPopup = ({
     );
     return false;
   }, [gate, onSubmitReferralCode, onCheckAccess]);
-  const runCodeValidation = React5__default.useCallback(async (fullCode) => {
+  const runCodeValidation = React9__default.useCallback(async (fullCode) => {
     setCodeStatus("checking");
     setError("");
     try {
@@ -6829,7 +7740,7 @@ var LoginPopup = ({
       setCodeStatus("invalid");
     }
   }, [onValidateCode, isAuthenticated, finishGate, onClose]);
-  const autoCodeTriedRef = React5__default.useRef(false);
+  const autoCodeTriedRef = React9__default.useRef(false);
   useEffect(() => {
     if (autoCodeTriedRef.current || !gate || !initialCode) return;
     const full = normalizeAccessCode(initialCode);
@@ -7112,7 +8023,7 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
-  const runGateOtpVerify = React5__default.useCallback(async (code) => {
+  const runGateOtpVerify = React9__default.useCallback(async (code) => {
     if (!onVerifyEmailCode) return;
     setOtpStatus("checking");
     setError("");
@@ -9336,7 +10247,7 @@ function OnboardingGuide({
     ] })
   ] }) });
 }
-var PropertyCompareBar = React5.forwardRef(
+var PropertyCompareBar = React9.forwardRef(
   ({
     className,
     addresses,
@@ -9347,7 +10258,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
       );
@@ -9355,11 +10266,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)) {
@@ -9370,9 +10281,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)) {
@@ -12800,6 +13711,32 @@ var SignInButton = styled10.button`
     background: rgba(240, 185, 11, 0.1);
   }
 `;
+var SORT_COLUMNS = [
+  { field: "price", label: "Price" },
+  { field: "change", label: "24h Change" },
+  { field: "volume", label: "24h Volume", hideOnPhone: true },
+  { field: "value", label: "Asset Value", hideOnPhone: true }
+];
+function sortValue(item, field) {
+  switch (field) {
+    case "volume":
+      return item.volume24h ?? null;
+    case "price":
+      return item.price ?? null;
+    case "change":
+      return item.changePercent ?? null;
+    case "value":
+      return item.propertyValue ?? null;
+  }
+}
+function fmtWholeUsd(value) {
+  if (value == null) return null;
+  return `$${value.toLocaleString(void 0, { maximumFractionDigits: 0 })}`;
+}
+function fmtPrice(value) {
+  if (value == null) return null;
+  return `$${value.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
 function displayName(item) {
   if (item.name) return item.name;
   return item.tokenName.charAt(0).toUpperCase() + item.tokenName.slice(1);
@@ -12813,24 +13750,79 @@ function AssetSelectorBar({
   selectorItems,
   onSelect,
   trailing,
+  afterName,
   imageUrl,
   badgeLabel,
-  tickerPrimary
+  tickerPrimary,
+  compactName
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [nameTip, setNameTip] = useState(null);
+  const anchorRef = useRef(null);
+  const [dropdownPos, setDropdownPos] = useState(null);
+  useLayoutEffect(() => {
+    if (!isDropdownOpen) return;
+    const measure = () => {
+      const rect = anchorRef.current?.getBoundingClientRect();
+      if (rect) setDropdownPos({ top: rect.bottom + 6, left: rect.left });
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, true);
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, true);
+    };
+  }, [isDropdownOpen]);
+  const [sortField, setSortField] = useState("volume");
+  const [sortDir, setSortDir] = useState("desc");
   const hasItems = selectorItems && selectorItems.length > 0;
+  const hasMarketData = !!selectorItems?.some(
+    (i) => i.price != null || i.changePercent != null || i.volume24h != null || i.propertyValue != null
+  );
+  const sortedItems = useMemo(() => {
+    if (!selectorItems) return [];
+    if (!hasMarketData) return [...selectorItems];
+    const dir = sortDir === "desc" ? -1 : 1;
+    const missing = sortDir === "desc" ? -Infinity : Infinity;
+    return [...selectorItems].sort((a, b) => {
+      const av = sortValue(a, sortField) ?? missing;
+      const bv = sortValue(b, sortField) ?? missing;
+      return (av - bv) * dir || 0;
+    });
+  }, [selectorItems, hasMarketData, sortField, sortDir]);
+  const handleSortClick = (field) => {
+    if (field === sortField) {
+      setSortDir((d) => d === "desc" ? "asc" : "desc");
+    } else {
+      setSortField(field);
+      setSortDir("desc");
+    }
+  };
   const currentTicker = currentTokenName ? selectorItems?.find((i) => i.tokenName.toLowerCase() === currentTokenName.toLowerCase())?.ticker : void 0;
   const metrics = metricsProp ?? [
     ...tokenPrice != null ? [{ label: "Unit Price", value: `$${tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`, accent: true }] : [],
     ...offeringValuation != null ? [{ label: "Offering Valuation", value: `$${offeringValuation.toLocaleString()}` }] : []
   ];
-  return /* @__PURE__ */ jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxs(IPOAssetSelector, { children: [
+  return /* @__PURE__ */ jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxs(IPOAssetSelector, { ref: anchorRef, children: [
     imageUrl && /* @__PURE__ */ jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
-    /* @__PURE__ */ jsx(AssetSelectorDropdown, { $flush: tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxs(AssetName, { children: [
+    /* @__PURE__ */ jsx(AssetSelectorDropdown, { $flush: tickerPrimary, $noShrink: !!compactName && !!currentTicker && !tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxs(AssetName, { children: [
       tickerPrimary && currentTicker ? /* @__PURE__ */ jsxs(AssetIdentity, { children: [
         /* @__PURE__ */ jsx(AssetTicker, { children: currentTicker.toUpperCase() }),
         /* @__PURE__ */ jsx(AssetSubName, { children: propertyName })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      ] }) : compactName && currentTicker ? /* @__PURE__ */ jsx(
+        CompactName,
+        {
+          className: "asset-bar-compact-name",
+          "aria-label": propertyName,
+          onMouseEnter: (e) => {
+            const r = e.currentTarget.getBoundingClientRect();
+            setNameTip({ left: r.left + r.width / 2, top: r.bottom + 10 });
+          },
+          onMouseLeave: () => setNameTip(null),
+          children: currentTicker.toUpperCase()
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         propertyName,
         currentTicker ? ` (${currentTicker.toUpperCase()})` : ""
       ] }),
@@ -12848,6 +13840,7 @@ function AssetSelectorBar({
         }
       )
     ] }) }),
+    afterName != null && /* @__PURE__ */ jsx(AfterNameSlot, { className: "asset-bar-after-name", children: afterName }),
     metrics.length > 0 && /* @__PURE__ */ jsx(SelectorMetrics, { children: metrics.map((m, i) => /* @__PURE__ */ jsxs("div", { style: { display: "contents" }, children: [
       i > 0 && /* @__PURE__ */ jsx(Separator, { children: "|" }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
@@ -12863,40 +13856,128 @@ function AssetSelectorBar({
       ] })
     ] }, m.label)) }),
     trailing != null && /* @__PURE__ */ jsx(TrailingWrapper, { className: "asset-bar-trailing", children: /* @__PURE__ */ jsx(TrailingInner, { children: trailing }) }),
-    isDropdownOpen && hasItems && /* @__PURE__ */ jsx(IPODropdown, { children: selectorItems.map((item) => {
-      const isCurrent = item.tokenName === currentTokenName;
-      const status = item.status?.toUpperCase();
-      const statusLabel = status === "PENDING" ? "Preparing" : status === "CLOSED" ? "Closed" : status === "CANCELLED" ? "Cancelled" : null;
-      return /* @__PURE__ */ jsx(
-        IPOOption,
+    nameTip != null && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx(
+        NameTip,
         {
-          onClick: () => {
-            if (!isCurrent && onSelect) {
-              onSelect(item.tokenName);
-            }
-            setIsDropdownOpen(false);
-          },
-          $selected: isCurrent,
-          style: { cursor: isCurrent ? "default" : "pointer" },
-          children: /* @__PURE__ */ jsxs(IPOOptionInner, { children: [
-            item.imageUrl && /* @__PURE__ */ jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsxs(IPOOptionName, { children: [
-                displayName(item),
-                item.ticker ? ` (${item.ticker})` : "",
-                item.badge && /* @__PURE__ */ jsx(CompetitionBadge, { children: item.badge })
-              ] }),
-              /* @__PURE__ */ jsxs(IPOOptionLocation, { children: [
-                item.streetAddress,
-                item.suburb ? `, ${item.suburb}` : "",
-                statusLabel && /* @__PURE__ */ jsx("span", { children: statusLabel })
-              ] })
-            ] })
-          ] })
-        },
-        item.tokenName
-      );
-    }) })
+          role: "tooltip",
+          "data-testid": "asset-name-tip",
+          style: { position: "fixed", left: nameTip.left, top: nameTip.top, transform: "translateX(-50%)", zIndex: 10050 },
+          children: propertyName
+        }
+      ),
+      document.body
+    ),
+    isDropdownOpen && hasItems && dropdownPos != null && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsxs(
+        IPODropdown,
+        {
+          $wide: hasMarketData,
+          style: { position: "fixed", top: dropdownPos.top, left: dropdownPos.left, zIndex: 10050 },
+          children: [
+            hasMarketData && /* @__PURE__ */ jsxs(HeaderRow, { children: [
+              /* @__PURE__ */ jsx(HeaderLabel, { children: "Asset" }),
+              SORT_COLUMNS.map(({ field, label, hideOnPhone }) => /* @__PURE__ */ jsxs(
+                SortButton,
+                {
+                  type: "button",
+                  $active: sortField === field,
+                  $hideOnPhone: hideOnPhone,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleSortClick(field);
+                  },
+                  children: [
+                    label,
+                    sortField === field ? sortDir === "desc" ? " \u25BE" : " \u25B4" : ""
+                  ]
+                },
+                field
+              ))
+            ] }),
+            sortedItems.map((item) => {
+              const isCurrent = item.tokenName === currentTokenName;
+              const status = item.status?.toUpperCase();
+              const statusLabel = status === "PENDING" ? "Preparing" : status === "CLOSED" ? "Closed" : status === "CANCELLED" ? "Cancelled" : null;
+              const price = fmtPrice(item.price);
+              const change = item.changePercent;
+              const vol = fmtWholeUsd(item.volume24h);
+              const val = fmtWholeUsd(item.propertyValue);
+              return /* @__PURE__ */ jsx(
+                IPOOption,
+                {
+                  "data-selector-row": item.tokenName,
+                  onClick: () => {
+                    if (!isCurrent && onSelect) {
+                      onSelect(item.tokenName);
+                    }
+                    setIsDropdownOpen(false);
+                  },
+                  $selected: isCurrent,
+                  style: {
+                    cursor: isCurrent ? "default" : "pointer",
+                    // Arena gold for competition assets — the same restrained cue as
+                    // the home Overview row (gold left crust + pooled spotlight, no
+                    // badge). backgroundImage LONGHAND: jsdom drops gradients from
+                    // the shorthand and UI6-AS-508 asserts it.
+                    ...item.isCompetition ? {
+                      // Straight crust bar — an inset box-shadow hugged the
+                      // row's rounded corners and read as a curved rim.
+                      // Left corners squared so the bar runs dead straight
+                      // like the home Overview arena row; right side keeps
+                      // the row rounding.
+                      borderLeft: "3px solid #E0B377",
+                      borderRadius: "0 7px 7px 0",
+                      backgroundImage: "radial-gradient(140% 90% at 0% 50%, rgba(224, 179, 119, 0.18) 0%, rgba(224, 179, 119, 0.06) 40%, transparent 68%)"
+                    } : {}
+                  },
+                  children: hasMarketData ? /* @__PURE__ */ jsxs(MarketRowInner, { children: [
+                    /* @__PURE__ */ jsxs(IdentityCell, { children: [
+                      item.imageUrl && /* @__PURE__ */ jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
+                      /* @__PURE__ */ jsxs(IPOOptionIdentity, { children: [
+                        /* @__PURE__ */ jsxs(IPOOptionName, { children: [
+                          /* @__PURE__ */ jsx(MarketTicker, { children: (item.ticker || displayName(item)).toUpperCase() }),
+                          item.typeBadge && /* @__PURE__ */ jsx(TypePill, { style: { color: item.typeBadge.color, background: item.typeBadge.background }, children: item.typeBadge.label }),
+                          item.badge && /* @__PURE__ */ jsx(CompetitionBadge, { children: item.badge })
+                        ] }),
+                        /* @__PURE__ */ jsxs(IPOOptionLocation, { children: [
+                          item.streetAddress,
+                          statusLabel && /* @__PURE__ */ jsx("span", { children: statusLabel })
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(PriceCell, { children: price ?? "\u2014" }),
+                    change != null ? /* @__PURE__ */ jsxs(ChangeCell, { $positive: change >= 0, children: [
+                      change >= 0 ? "+" : "",
+                      change.toFixed(2),
+                      "%"
+                    ] }) : /* @__PURE__ */ jsx(MutedCell, { children: "\u2014" }),
+                    /* @__PURE__ */ jsx(MutedCell, { $hideOnPhone: true, children: vol ?? "\u2014" }),
+                    /* @__PURE__ */ jsx(MutedCell, { $hideOnPhone: true, children: val ?? "\u2014" })
+                  ] }) : /* @__PURE__ */ jsxs(IPOOptionInner, { children: [
+                    item.imageUrl && /* @__PURE__ */ jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
+                    /* @__PURE__ */ jsxs(IPOOptionIdentity, { children: [
+                      /* @__PURE__ */ jsxs(IPOOptionName, { children: [
+                        displayName(item),
+                        item.ticker ? ` (${item.ticker})` : "",
+                        item.badge && /* @__PURE__ */ jsx(CompetitionBadge, { children: item.badge })
+                      ] }),
+                      /* @__PURE__ */ jsxs(IPOOptionLocation, { children: [
+                        item.streetAddress,
+                        item.suburb ? `, ${item.suburb}` : "",
+                        statusLabel && /* @__PURE__ */ jsx("span", { children: statusLabel })
+                      ] })
+                    ] })
+                  ] })
+                },
+                item.tokenName
+              );
+            })
+          ]
+        }
+      ),
+      document.body
+    )
   ] }) });
 }
 var AssetSelectorWrapper = styled10.div`
@@ -12958,7 +14039,9 @@ var AssetSelectorDropdown = styled10.div`
   padding: ${(p) => p.$flush ? "0.25rem 0" : "0.5rem"};
   border-radius: 8px;
   transition: ${(p) => p.$flush ? "none" : "all 0.2s ease"};
-  flex: 0 1 auto;
+  /* $noShrink (compactName): a four-letter ticker is already the floor — it must
+     never clip to "Y" when the bar is starved; the trailing scrolls instead. */
+  flex: ${(p) => p.$noShrink ? "0 0 auto" : "0 1 auto"};
   min-width: 0;
   overflow: hidden;
   &:hover { background-color: ${(p) => p.$flush ? "transparent" : "rgba(255,255,255,0.05)"}; }
@@ -13015,6 +14098,35 @@ var AssetName = styled10.div`
     svg { margin-left: 0.4rem; width: 16px; height: 16px; }
   }
 `;
+var CompactName = styled10.span`
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+`;
+var NameTip = styled10.div`
+  background: #1a1d24;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 0.45rem 0.7rem;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  white-space: nowrap;
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -5px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    width: 8px;
+    height: 8px;
+    background: #1a1d24;
+    border-left: 1px solid rgba(255, 255, 255, 0.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+`;
 var SelectorMetrics = styled10.div`
   display: flex;
   align-items: center;
@@ -13035,6 +14147,12 @@ var SelectorMetrics = styled10.div`
     padding: 0.4rem 0.5rem;
   }
 `;
+var AfterNameSlot = styled10.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 0;
+`;
 var TrailingWrapper = styled10.div`
   display: flex;
   align-items: center;
@@ -13106,14 +14224,16 @@ var IPODropdown = styled10.div`
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
-  width: 320px;
+  width: ${(p) => p.$wide ? "min(660px, calc(100vw - 24px))" : "320px"};
   background: #0d0d0f;
   border-radius: 10px;
   box-shadow: 0 12px 32px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06);
   z-index: 1000;
-  max-height: 320px;
+  max-height: 360px;
   overflow-y: auto;
-  padding: 4px;
+  /* Market mode: NO top padding — the sticky header must sit flush against the
+     container's top edge so scrolling rows can never peek above/behind it. */
+  padding: ${(p) => p.$wide ? "0 0 4px" : "4px"};
 
   scrollbar-width: thin;
   scrollbar-color: rgba(255,255,255,0.12) transparent;
@@ -13121,8 +14241,8 @@ var IPODropdown = styled10.div`
   &::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
 
   @media (max-width: 480px) {
-    width: 280px;
-    max-height: 260px;
+    width: ${(p) => p.$wide ? "min(360px, calc(100vw - 16px))" : "280px"};
+    max-height: 300px;
     border-radius: 8px;
   }
   animation: slideDown 0.2s cubic-bezier(0.16,1,0.3,1);
@@ -13131,6 +14251,99 @@ var IPODropdown = styled10.div`
     to { opacity: 1; transform: translateY(0); }
   }
 `;
+var MARKET_GRID = "minmax(0, 1fr) 76px 92px 108px 118px";
+var MARKET_GRID_PHONE = "minmax(0, 1fr) 76px 92px";
+var HeaderRow = styled10.div`
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: ${MARKET_GRID};
+  gap: 10px;
+  align-items: center;
+  padding: 0.5rem 0.85rem 0.45rem;
+  background: #0d0d0f;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+
+  @media (max-width: 480px) { grid-template-columns: ${MARKET_GRID_PHONE}; }
+`;
+var HeaderLabel = styled10.span`
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.45);
+  white-space: nowrap;
+`;
+var SortButton = styled10.button`
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  /* Left-aligned like every other column (user call, 2026-08-20). */
+  text-align: left;
+  justify-self: start;
+  color: ${(p) => p.$active ? "var(--color-accent, #E6C87E)" : "rgba(255,255,255,0.45)"};
+  transition: color 0.15s ease;
+  &:hover { color: ${(p) => p.$active ? "var(--color-accent, #E6C87E)" : "rgba(255,255,255,0.75)"}; }
+
+  @media (max-width: 480px) {
+    display: ${(p) => p.$hideOnPhone ? "none" : "inline"};
+  }
+`;
+var IPOOptionIdentity = styled10.div`
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+`;
+var MarketRowInner = styled10.div`
+  display: grid;
+  grid-template-columns: ${MARKET_GRID};
+  gap: 10px;
+  align-items: center;
+
+  @media (max-width: 480px) { grid-template-columns: ${MARKET_GRID_PHONE}; }
+`;
+var IdentityCell = styled10.div`
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+`;
+var PriceCell = styled10.span`
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  text-align: left;
+`;
+var ChangeCell = styled10.span`
+  font-size: 0.72rem;
+  font-weight: 600;
+  color: ${(p) => p.$positive ? "#0ecb81" : "#f6465d"};
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  text-align: left;
+`;
+var MutedCell = styled10.span`
+  font-size: 0.72rem;
+  /* Same ink as the price column (user call, 2026-08-20). */
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  text-align: left;
+
+  @media (max-width: 480px) {
+    display: ${(p) => p.$hideOnPhone ? "none" : "inline"};
+  }
+`;
 var IPOOption = styled10.div`
   padding: 0.6rem 0.75rem;
   transition: background 0.15s ease;
@@ -13156,6 +14369,25 @@ var IPOOptionName = styled10.div`
   font-size: 0.82rem;
   color: ${"#ebebeb"};
   line-height: 1.3;
+  /* One line like the location — wrapped names made market rows uneven. */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var MarketTicker = styled10.span`
+  font-weight: 700;
+  letter-spacing: 0.01em;
+`;
+var TypePill = styled10.span`
+  margin-left: 0.45rem;
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 1px 5px;
+  border-radius: 3px;
+  vertical-align: middle;
+  white-space: nowrap;
 `;
 var CompetitionBadge = styled10.span`
   margin-left: 0.4rem;
@@ -13174,6 +14406,11 @@ var IPOOptionLocation = styled10.div`
   font-size: 0.72rem;
   color: rgba(255,255,255,0.38);
   margin-top: 1px;
+  /* One line, ellipsized — a long address must never wrap the row taller
+     (matches the deployed dropdown's compact rows). */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   span {
     margin-left: 0.4rem;
     color: var(--color-accent, #E6C87E);
@@ -16338,7 +17575,7 @@ var ContentScroll = styled10.div`
 `;
 var TabContainer = styled10.div`
   display: flex;
-  gap: 0;
+  gap: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.75rem;
   overflow-x: auto;
@@ -16350,12 +17587,12 @@ var TabContainer = styled10.div`
 var Tab = styled10.button`
   background: transparent;
   border: none;
-  padding: 0.6rem 1rem;
-  font-size: 0.75rem;
+  padding: 0 0 0.5rem;
+  font-size: 0.8rem;
   font-weight: 500;
   white-space: nowrap;
   flex-shrink: 0;
-  color: ${({ $active }) => $active ? "#E6C87E" : "rgba(255, 255, 255, 0.4)"};
+  color: ${({ $active }) => $active ? "#fff" : "rgba(255, 255, 255, 0.6)"};
   cursor: pointer;
   transition: color 0.15s;
   position: relative;
@@ -16368,12 +17605,11 @@ var Tab = styled10.button`
     right: 0;
     height: 2px;
     background: ${({ $active }) => $active ? "#E6C87E" : "transparent"};
-    border-radius: 1px;
     transition: background 0.15s;
   }
 
   &:hover {
-    color: ${({ $active }) => $active ? "#fff" : "rgba(255, 255, 255, 0.65)"};
+    color: ${({ $active }) => $active ? "#fff" : "rgba(255, 255, 255, 0.85)"};
   }
 `;
 var TabCount = styled10.span`
@@ -20602,7 +21838,7 @@ function extractSparkline(candles, maxPoints = 20) {
   }
   return points;
 }
-var SparklineChart = React5__default.memo(function SparklineChart2({ data, width, height, positive }) {
+var SparklineChart = React9__default.memo(function SparklineChart2({ data, width, height, positive }) {
   const [hoverX, setHoverX] = useState(null);
   const svgRef = useRef(null);
   const { linePath, fillPath, points } = useMemo(() => {
@@ -20716,6 +21952,6 @@ var SparklineChart = React5__default.memo(function SparklineChart2({ data, width
   );
 });
 
-export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HlsVideo, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, OnboardingGuide, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, badgeVariants, buttonVariants, extractSparkline, hasPendingActivity, useAdaptivePolling, useToast };
+export { AssetSelectorBar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ContactPopup, Header, HlsVideo, HousePositionSlider, HousePositionSliderMobile, LoafLiquidityBadge, LoafLiquidityLogo, LoginPopup, MobileTradeNav, OfferingProgressCard, OnboardingGuide, Orderbook, owner_booking_default as OwnerBooking, PaymentPopup, PortfolioActivityPanel, PortfolioSummary, PriceChart, PropertyBuy, PropertyCompareBar, PropertyDocuments, PropertyHeroHeader, PropertyHistory, PropertyInspectionTimes, PropertyMediaRow, PropertyNewsUpdates, PropertyOffers, PropertyOverview, PropertyPhotoGallery, PropertySubheader, PropertyTour, PropertyValuation, SentimentBar, SiteFooter, Skeleton, SlideDigit, SparklineChart, ToastProvider, TradeConfirmationModal, TradingSlider, YourOrders, __resetDismissedBreaking, badgeVariants, buttonVariants, extractSparkline, formatAge, hasPendingActivity, rowAgeLabel, useAdaptivePolling, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map