@loafmarkets/ui 0.1.415 → 0.1.416

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React5 = require('react');
+var React9 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var styled10 = require('styled-components');
 var ReactDOM = require('react-dom');
+var styled10 = require('styled-components');
 var lucideReact = require('lucide-react');
 var LightweightCharts = require('lightweight-charts');
 var md = require('react-icons/md');
@@ -36,9 +36,9 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
-var styled10__default = /*#__PURE__*/_interopDefault(styled10);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var styled10__default = /*#__PURE__*/_interopDefault(styled10);
 var LightweightCharts__namespace = /*#__PURE__*/_interopNamespace(LightweightCharts);
 
 // src/components/button.tsx
@@ -79,7 +79,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React5__namespace.forwardRef(
+var Button = React9__namespace.forwardRef(
   ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     const coercedRadius = radius ?? (variant === "onboarding" || variant === "onboardingOutline" ? "square" : void 0);
@@ -118,11 +118,11 @@ var badgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Badge = React5__namespace.forwardRef(
+var Badge = React9__namespace.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
 );
 Badge.displayName = "Badge";
-var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Card = React9__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -134,11 +134,11 @@ var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React5__namespace.forwardRef(
+var CardHeader = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5__namespace.forwardRef(
+var CardTitle = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h3",
     {
@@ -149,15 +149,15 @@ var CardTitle = React5__namespace.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5__namespace.forwardRef(
+var CardDescription = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React5__namespace.forwardRef(
+var CardContent = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React5__namespace.forwardRef(
+var CardFooter = React9__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -175,7 +175,7 @@ var defaultFormatSignedCurrency = (value) => {
   const sign = value >= 0 ? "+" : "-";
   return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
 };
-var PortfolioSummary = React5__namespace.forwardRef(
+var PortfolioSummary = React9__namespace.forwardRef(
   ({
     availableCash,
     portfolioValue,
@@ -325,23 +325,23 @@ function HousePositionSlider({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5__namespace.useState("none");
-  const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
-  const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
-  const [_isDragging, setIsDragging] = React5__namespace.useState(false);
-  const [visualTargetPct, setVisualTargetPct] = React5__namespace.useState(null);
-  const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
-  const [ownershipInput, setOwnershipInput] = React5__namespace.useState("");
-  const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
-  const houseRef = React5__namespace.useRef(null);
+  const [orderMode, setOrderMode] = React9__namespace.useState("none");
+  const [buyTrackingMode, setBuyTrackingMode] = React9__namespace.useState("dollars");
+  const [deltaDollars, setDeltaDollars] = React9__namespace.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React9__namespace.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React9__namespace.useState(0);
+  const [_isDragging, setIsDragging] = React9__namespace.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = React9__namespace.useState(null);
+  const [orderType, setOrderType] = React9__namespace.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React9__namespace.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React9__namespace.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React9__namespace.useState(false);
+  const [ownershipInput, setOwnershipInput] = React9__namespace.useState("");
+  const [tokenAmountInput, setTokenAmountInput] = React9__namespace.useState("");
+  const houseRef = React9__namespace.useRef(null);
   const asks = orderbook?.asks ?? [];
   const bids = orderbook?.bids ?? [];
-  React5__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -416,7 +416,7 @@ function HousePositionSlider({
   const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
   const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
-  const resetOrder = React5__namespace.useCallback(() => {
+  const resetOrder = React9__namespace.useCallback(() => {
     setOrderMode("none");
     setBuyTrackingMode("dollars");
     setDeltaDollars(0);
@@ -424,7 +424,7 @@ function HousePositionSlider({
     setDeltaTokensSell(0);
     setVisualTargetPct(null);
   }, []);
-  const updateOrderFromTargetValue = React5__namespace.useCallback(
+  const updateOrderFromTargetValue = React9__namespace.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0) {
@@ -448,7 +448,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
   );
-  const updateOrderFromOwnership = React5__namespace.useCallback(
+  const updateOrderFromOwnership = React9__namespace.useCallback(
     (newOwnershipPercent) => {
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
@@ -457,7 +457,7 @@ function HousePositionSlider({
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
-  const updateOrderFromTokenAmount = React5__namespace.useCallback(
+  const updateOrderFromTokenAmount = React9__namespace.useCallback(
     (tokenAmountSigned) => {
       if (tokenAmountSigned > 0) {
         const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
@@ -480,7 +480,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
   );
-  const updateOrderFromSlider = React5__namespace.useCallback(
+  const updateOrderFromSlider = React9__namespace.useCallback(
     (pct) => {
       const normalized = (pct - 50) / 50;
       const magnitude = Math.min(Math.abs(normalized), 1);
@@ -524,7 +524,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
-  const handleDragAtClientY = React5__namespace.useCallback(
+  const handleDragAtClientY = React9__namespace.useCallback(
     (clientY) => {
       if (!houseRef.current) return;
       const rect = houseRef.current.getBoundingClientRect();
@@ -1040,18 +1040,18 @@ function HousePositionSliderMobile({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5__namespace.useState("none");
-  const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
-  const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
-  const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
-  const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
-  const houseRef = React5__namespace.useRef(null);
-  React5__namespace.useEffect(() => {
+  const [orderMode, setOrderMode] = React9__namespace.useState("none");
+  const [deltaDollars, setDeltaDollars] = React9__namespace.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = React9__namespace.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = React9__namespace.useState(0);
+  const [buyTrackingMode, setBuyTrackingMode] = React9__namespace.useState("dollars");
+  const [orderType, setOrderType] = React9__namespace.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = React9__namespace.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = React9__namespace.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = React9__namespace.useState(false);
+  const [tokenAmountInput, setTokenAmountInput] = React9__namespace.useState("");
+  const houseRef = React9__namespace.useRef(null);
+  React9__namespace.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
@@ -1093,7 +1093,7 @@ function HousePositionSliderMobile({
   const hasChange = orderMode !== "none" && (Math.abs(deltaTokens) > 1e-3 || Math.abs(deltaValue) > 0.01);
   const targetOwnership = totalTokens > 0 ? targetTokens / totalTokens * 100 : 0;
   const estFeeTokens = effectivePrice > 0 ? Math.abs(deltaValue) * 5e-3 / effectivePrice : 0;
-  const updateOrderFromTargetValue = React5__namespace.useCallback(
+  const updateOrderFromTargetValue = React9__namespace.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0.01) {
@@ -1121,7 +1121,7 @@ function HousePositionSliderMobile({
     },
     [holdingsValue, availableCash, effectivePrice, tokensHeld]
   );
-  const updateOrderFromTokenAmount = React5__namespace.useCallback(
+  const updateOrderFromTokenAmount = React9__namespace.useCallback(
     (tokenAmount) => {
       if (tokenAmount > 0) {
         const maxTokens = effectivePrice > 0 ? availableCash / effectivePrice : 0;
@@ -1148,14 +1148,14 @@ function HousePositionSliderMobile({
     },
     [effectivePrice, availableCash, tokensHeld]
   );
-  const handleMarkerClick = React5__namespace.useCallback(
+  const handleMarkerClick = React9__namespace.useCallback(
     (pct) => {
       const newTargetValue = pct / 100 * totalCapacity;
       updateOrderFromTargetValue(newTargetValue);
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onMouseDown = React5__namespace.useCallback(
+  const onMouseDown = React9__namespace.useCallback(
     (e) => {
       e.preventDefault();
       const move = (ev) => {
@@ -1175,7 +1175,7 @@ function HousePositionSliderMobile({
     },
     [totalCapacity, updateOrderFromTargetValue]
   );
-  const onTouchStart = React5__namespace.useCallback(
+  const onTouchStart = React9__namespace.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1655,7 +1655,7 @@ var StatusDot = styled10__default.default.span`
               background: rgba(255, 255, 255, 0.3);
             `}
 `;
-var LoafLiquidityBadge = React5__namespace.forwardRef(
+var LoafLiquidityBadge = React9__namespace.forwardRef(
   ({ className, isGlowing, status = "unknown", onClick, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       LogoContainer,
@@ -1679,7 +1679,7 @@ var LoafLiquidityBadge = React5__namespace.forwardRef(
 );
 LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
 var toSize = (v, fallback) => v == null ? fallback : typeof v === "number" ? `${v}px` : v;
-var Skeleton = React5__namespace.forwardRef(
+var Skeleton = React9__namespace.forwardRef(
   ({ width, height, radius, className, style, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -1703,9 +1703,17 @@ var Skeleton = React5__namespace.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__namespace.useState(false);
-  React5__namespace.useEffect(() => {
+  const [isCompact, setIsCompact] = React9__namespace.useState(false);
+  React9__namespace.useEffect(() => {
     if (typeof window === "undefined") return;
     const check = () => setIsCompact(window.innerWidth <= breakpoint);
     check();
@@ -1720,9 +1728,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}`;
@@ -1731,14 +1744,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__namespace.useRef(flashOnMount ? null : amount);
-  React5__namespace.useEffect(() => {
+  const prevAmountRef = React9__namespace.useRef(flashOnMount ? null : amount);
+  React9__namespace.useEffect(() => {
     const prev = prevAmountRef.current;
     const node = ref.current;
     if (node && prev !== amount) {
@@ -1759,18 +1769,15 @@ function TradeRow({
   compact,
   explorerUrl
 }) {
-  const rowRef = React5__namespace.useRef(null);
+  const rowRef = React9__namespace.useRef(null);
   const { type } = trade;
-  React5__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (seenTradeKeysRef.current.has(tradeKey)) return;
     seenTradeKeysRef.current.add(tradeKey);
     const node = rowRef.current;
     if (!node || typeof node.animate !== "function") return;
     const color = type === "buy" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
-    node.animate(
-      [{ backgroundColor: color }, { backgroundColor: "transparent" }],
-      { duration: FLASH_DURATION_MS, easing: "ease-out" }
-    );
+    node.animate(FLASH_KEYFRAMES(color), { duration: FLASH_DURATION_MS, easing: "ease-in-out" });
   }, [tradeKey, seenTradeKeysRef, type]);
   if (compact) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1837,6 +1844,27 @@ function TradeRow({
     }
   );
 }
+function BreadSliceGlyph() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
@@ -1851,12 +1879,14 @@ function DepthRow({
   fillHeight
 }) {
   const isAsk = side === "ask";
-  const rowRef = React5__namespace.useRef(null);
+  const rowRef = React9__namespace.useRef(null);
   useAmountChangeFlash(rowRef, amount, side, flashOnMount);
   return /* @__PURE__ */ jsxRuntime.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,
@@ -1864,14 +1894,20 @@ function DepthRow({
         /* @__PURE__ */ jsxRuntime.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))"
             }
           }
         ),
@@ -1879,33 +1915,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__ */ jsxRuntime.jsx(BreadSliceGlyph, {})
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cell": "price", className: cn("relative z-[1] tabular-nums", isAsk ? "text-[#f6465d]" : "text-[#0ecb81]"), children: [
           "$",
           formatNumber(price, precision)
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-[1] text-right tabular-nums text-white/50", children: formatNumber(cumDepth, amountPrecision) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cell": "amt", className: "relative z-[1] text-right tabular-nums text-white/90", children: formatNumber(amount, amountPrecision) }),
+        /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+var Orderbook = React9__namespace.forwardRef(
   ({
     asks,
     bids,
     midPrice,
     midChangePercent,
     trades = [],
-    priceLabel = "Price (USD)",
+    priceLabel = DEFAULT_PRICE_LABEL,
     amountLabel = "Amount",
     precision = 2,
     amountPrecision = 2,
@@ -1933,12 +1971,12 @@ var Orderbook = React5__namespace.forwardRef(
         status: liquidityStatus
       }
     );
-    const [tab, setTabState] = React5__namespace.useState(defaultTab);
+    const [tab, setTabState] = React9__namespace.useState(defaultTab);
     const setTab = setTabState;
     const effectiveTab = showTradesTab ? tab : "orderbook";
-    const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
+    const [tradeFilter, setTradeFilter] = React9__namespace.useState("all");
     const viewportCompact = useViewportCompact(COMPACT_BREAKPOINT_PX);
-    const { userAskPrices, userBidPrices } = React5__namespace.useMemo(() => {
+    const { userAskPrices, userBidPrices } = React9__namespace.useMemo(() => {
       const ask = /* @__PURE__ */ new Set();
       const bid = /* @__PURE__ */ new Set();
       if (!userOrderPrices) return { userAskPrices: ask, userBidPrices: bid };
@@ -1948,15 +1986,15 @@ var Orderbook = React5__namespace.forwardRef(
       }
       return { userAskPrices: ask, userBidPrices: bid };
     }, [userOrderPrices]);
-    const seenTradeKeysRef = React5__namespace.useRef(/* @__PURE__ */ new Set());
-    const initializedRef = React5__namespace.useRef(false);
+    const seenTradeKeysRef = React9__namespace.useRef(/* @__PURE__ */ new Set());
+    const initializedRef = React9__namespace.useRef(false);
     if (!initializedRef.current && trades.length > 0) {
       for (let i = 0; i < trades.length; i++) {
         seenTradeKeysRef.current.add(getTradeKey(trades[i], i));
       }
       initializedRef.current = true;
     }
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       if (!initializedRef.current) return;
       const live = /* @__PURE__ */ new Set();
       for (let i = 0; i < trades.length; i++) {
@@ -1967,7 +2005,7 @@ var Orderbook = React5__namespace.forwardRef(
         if (!live.has(key)) seen.delete(key);
       }
     }, [trades]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
     const handleTab = (next) => {
@@ -1975,10 +2013,49 @@ var Orderbook = React5__namespace.forwardRef(
       onTabChange?.(next);
     };
     const isCompact = variant === "compact" || variant === "auto" && viewportCompact;
+    const rootRef = React9__namespace.useRef(null);
+    const setRootRef = React9__namespace.useCallback(
+      (node) => {
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      [ref]
+    );
+    const [panelWidth, setPanelWidth] = React9__namespace.useState(null);
+    React9__namespace.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__namespace.useRef(null);
+    const [depthSectionH, setDepthSectionH] = React9__namespace.useState(null);
+    React9__namespace.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);
@@ -1999,9 +2076,9 @@ var Orderbook = React5__namespace.forwardRef(
     }
     const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
     const askMaxCumDepth = combinedMaxCumDepth;
-    const prevAskPricesRef = React5__namespace.useRef(null);
-    const prevBidPricesRef = React5__namespace.useRef(null);
-    const newAskPrices = React5__namespace.useMemo(() => {
+    const prevAskPricesRef = React9__namespace.useRef(null);
+    const prevBidPricesRef = React9__namespace.useRef(null);
+    const newAskPrices = React9__namespace.useMemo(() => {
       const current = new Set(askVisibleLevels.map((l) => l.price));
       const prev = prevAskPricesRef.current;
       if (!prev) return /* @__PURE__ */ new Set();
@@ -2011,7 +2088,7 @@ var Orderbook = React5__namespace.forwardRef(
       }
       return added;
     }, [askVisibleLevels]);
-    const newBidPrices = React5__namespace.useMemo(() => {
+    const newBidPrices = React9__namespace.useMemo(() => {
       const current = new Set(bidVisibleLevels.map((l) => l.price));
       const prev = prevBidPricesRef.current;
       if (!prev) return /* @__PURE__ */ new Set();
@@ -2021,12 +2098,16 @@ var Orderbook = React5__namespace.forwardRef(
       }
       return added;
     }, [bidVisibleLevels]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.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,
@@ -2035,7 +2116,7 @@ var Orderbook = React5__namespace.forwardRef(
       tradeFilter,
       setTradeFilter,
       rightHeader: resolvedRightHeader,
-      priceLabel,
+      priceLabel: effectivePriceLabel,
       amountLabel,
       tradeFiltered,
       precision,
@@ -2062,12 +2143,15 @@ var Orderbook = React5__namespace.forwardRef(
       compactLevelCount: effectiveCompactLevels,
       fillHeight,
       newAskPrices,
-      newBidPrices
+      newBidPrices,
+      spread,
+      spreadPct,
+      asksSectionRef
     };
     return /* @__PURE__ */ jsxRuntime.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",
@@ -2081,6 +2165,170 @@ var Orderbook = React5__namespace.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: 5,
+        whiteSpace: "nowrap",
+        lineHeight: 1
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__namespace.useRef(null);
+  const pillRef = React9__namespace.useRef(null);
+  const priceSpanRef = React9__namespace.useRef(null);
+  const boldedCellRef = React9__namespace.useRef(null);
+  const [pillPrice, setPillPrice] = React9__namespace.useState(null);
+  const motion = React9__namespace.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__namespace.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__namespace.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__namespace.useCallback(() => {
+    motion.current.on = false;
+    unbold();
+    setPillPrice(null);
+  }, []);
+  React9__namespace.useEffect(() => {
+    return () => {
+      if (motion.current.raf) cancelAnimationFrame(motion.current.raf);
+    };
+  }, []);
+  return { sectionRef, pillRef, priceSpanRef, pillPrice, onMouseMove, onMouseLeave };
+}
 function SkeletonRow({ compact }) {
   if (compact) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2137,8 +2385,12 @@ function DesktopOrderbookLayout({
   compactLevelCount: _compactLevelCount,
   fillHeight,
   newAskPrices,
-  newBidPrices
+  newBidPrices,
+  spread,
+  spreadPct,
+  asksSectionRef
 }) {
+  const glide = useGlidePill();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
@@ -2148,8 +2400,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",
@@ -2163,8 +2415,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",
@@ -2212,100 +2464,170 @@ function DesktopOrderbookLayout({
         )
       ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: rightHeader })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col min-h-0 px-4 pt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3 px-3 pb-1.5 pt-1 text-xs text-white/60", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { children: priceLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: amountLabel }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: tab === "orderbook" ? "Total" : "Time" })
-      ] }),
-      tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
-          style: { scrollbarGutter: "stable" },
-          children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: tradeFiltered.map((trade, i) => {
-            const tradeKey = getTradeKey(trade, i);
-            const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              TradeRow,
+    /* @__PURE__ */ jsxRuntime.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" ? ReactDOM.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                trade,
-                tradeKey,
-                precision,
-                amountPrecision,
-                seenTradeKeysRef,
-                explorerUrl
-              },
-              tradeKey
-            );
-          }) })
-        }
-      ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              DepthRow,
+                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__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "0.6rem",
+                        fontWeight: 600,
+                        letterSpacing: "0.08em",
+                        textTransform: "uppercase",
+                        color: "#E6C87E",
+                        lineHeight: 1
+                      },
+                      children: "Limit"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      ref: glide.priceSpanRef,
+                      className: "tabular-nums",
+                      style: { fontSize: "0.8rem", fontWeight: 600, color: "#fff" },
+                      children: glide.pillPrice ?? ""
+                    }
+                  )
+                ]
+              }
+            ),
+            document.body
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3 px-3 pb-1.5 pt-1 text-xs text-white/60", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: priceLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: amountLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: tab === "orderbook" ? "Total" : "Time" })
+          ] }),
+          tab === "trades" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "max-h-[380px] overflow-y-auto overflow-x-hidden",
+              style: { scrollbarGutter: "stable" },
+              children: isLoading && tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `trade-skel-${i}`)) }) : tradeFiltered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-10 text-center text-sm text-white/50", children: "No trades" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: tradeFiltered.map((trade, i) => {
+                const tradeKey = getTradeKey(trade, i);
+                const explorerUrl = trade.txHash && tradeExplorerUrl ? tradeExplorerUrl(trade.txHash) : trade.txHash ? `https://sepolia.etherscan.io/tx/${trade.txHash}` : void 0;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  TradeRow,
+                  {
+                    trade,
+                    tradeKey,
+                    precision,
+                    amountPrecision,
+                    seenTradeKeysRef,
+                    explorerUrl
+                  },
+                  tradeKey
+                );
+              }) })
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-h-0 overflow-hidden", fillHeight && "flex-1"), children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "flex items-center gap-2 bg-[#0b1a24] px-3 py-2 flex-shrink-0 overflow-hidden orderbook-mid-row",
-            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap orderbook-mid-price", midClass), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              "$",
-              formatNumber(midPrice, precision),
-              midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
-                midChangePercent >= 0 ? "+" : "",
-                midChangePercent.toFixed(2),
-                "%"
-              ] })
-            ] }) })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cn("flex flex-col overflow-hidden", !fillHeight && "flex-shrink-0"),
-            style: fillHeight ? { flex: 1, minHeight: 0 } : { height: `${sectionHeight}px` },
-            children: isLoading ? Array.from({ length: effectiveLevels }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
-              DepthRow,
+                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__ */ jsxRuntime.jsx(SkeletonRow, {}, `ask-skel-${i}`)) : askVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No asks" }) : askVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DepthRow,
+                  {
+                    side: "ask",
+                    price: l.price,
+                    amount: l.amount,
+                    cumDepth: askCumDepths[i],
+                    depthPct: askCumDepths[i] / askMaxCumDepth * 100,
+                    precision,
+                    amountPrecision,
+                    hasUserOrder: userAskPrices.has(l.price),
+                    onPriceClick,
+                    flashOnMount: newAskPrices.has(l.price),
+                    fillHeight
+                  },
+                  `ask-${l.price}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("text-lg font-semibold tabular-nums whitespace-nowrap orderbook-mid-price", midClass), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 110, height: 20 }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    "$",
+                    formatNumber(midPrice, precision),
+                    midChangePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("ml-2 text-sm font-semibold tabular-nums", midClass), children: [
+                      midChangePercent >= 0 ? "+" : "",
+                      midChangePercent.toFixed(2),
+                      "%"
+                    ] })
+                  ] }) }),
+                  !isLoading && /* @__PURE__ */ jsxRuntime.jsx(SpreadReadout, { spread, spreadPct, precision })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SkeletonRow, {}, `bid-skel-${i}`)) : bidVisibleLevels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center justify-center px-3 text-xs text-white/40", children: "No bids" }) : bidVisibleLevels.map((l, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                  DepthRow,
+                  {
+                    side: "bid",
+                    price: l.price,
+                    amount: l.amount,
+                    cumDepth: bidCumDepths[i],
+                    depthPct: bidCumDepths[i] / bidMaxCumDepth * 100,
+                    precision,
+                    amountPrecision,
+                    hasUserOrder: userBidPrices.has(l.price),
+                    onPriceClick,
+                    flashOnMount: newBidPrices.has(l.price),
+                    fillHeight
+                  },
+                  `bid-${l.price}`
+                ))
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
 }
 function MobileOrderbookLayout({
@@ -2432,8 +2754,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__ */ jsxRuntime.jsx(
@@ -2515,7 +2836,7 @@ function MobileDepthRow({
   flashOnMount
 }) {
   const isAsk = side === "ask";
-  const rowRef = React5__namespace.useRef(null);
+  const rowRef = React9__namespace.useRef(null);
   useAmountChangeFlash(rowRef, amount, side, flashOnMount);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2541,16 +2862,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__ */ jsxRuntime.jsx(BreadSliceGlyph, {})
           }
         ) : null,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81", paddingLeft: hasUserOrder ? "10px" : void 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", zIndex: 1, color: isAsk ? "#f6465d" : "#0ecb81", paddingLeft: hasUserOrder ? "14px" : void 0 }, children: [
           "$",
           formatNumber(price, precision)
         ] }),
@@ -2560,12 +2877,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"
             }
@@ -2578,20 +2895,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__namespace.forwardRef(
+var HlsVideo = React9__namespace.forwardRef(
   ({ src, capLevelToPlayerSize = true, onError, ...videoProps }, ref) => {
-    const videoRef = React5__namespace.useRef(null);
-    React5__namespace.useImperativeHandle(ref, () => videoRef.current, []);
+    const videoRef = React9__namespace.useRef(null);
+    React9__namespace.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__namespace.useState(null);
+    const [failedSrc, setFailedSrc] = React9__namespace.useState(null);
     const usingFallback = fallbackSrc != null && failedSrc === primary;
     const activeSrc = usingFallback ? fallbackSrc : primary;
-    const failPrimary = React5__namespace.useCallback(() => {
+    const failPrimary = React9__namespace.useCallback(() => {
       if (fallbackSrc == null) return;
       setFailedSrc(primary);
     }, [fallbackSrc, primary]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const video = videoRef.current;
       if (!video || !activeSrc) return;
       if (!isHlsManifest(activeSrc) || video.canPlayType(HLS_MIME)) {
@@ -2624,7 +2941,7 @@ var HlsVideo = React5__namespace.forwardRef(
         hls?.destroy();
       };
     }, [activeSrc, capLevelToPlayerSize, failPrimary]);
-    const handleError = React5__namespace.useCallback(
+    const handleError = React9__namespace.useCallback(
       (e) => {
         if (!usingFallback) failPrimary();
         onError?.(e);
@@ -2635,7 +2952,7 @@ var HlsVideo = React5__namespace.forwardRef(
   }
 );
 HlsVideo.displayName = "HlsVideo";
-var PropertyTour = React5__namespace.forwardRef(
+var PropertyTour = React9__namespace.forwardRef(
   ({
     className,
     title,
@@ -2648,8 +2965,8 @@ var PropertyTour = React5__namespace.forwardRef(
     playsInline = true,
     ...props
   }, ref) => {
-    const videoRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const videoRef = React9__namespace.useRef(null);
+    React9__namespace.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
       const handleFullscreenChange = () => {
@@ -2757,8 +3074,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__namespace.useState(() => Date.now());
+  React9__namespace.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;
@@ -2781,6 +3140,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);
 };
@@ -2817,7 +3280,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;
@@ -2831,10 +3295,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "-1px",
+              width: "1px",
+              height: "5px",
+              background: "rgba(255,255,255,0.28)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const handler = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -2895,7 +3415,7 @@ function NewsArticleModal({ item, onClose }) {
                 children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "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__ */ jsxRuntime.jsx("div", { style: { marginBottom: "0.6rem" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            sentimentInfo && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: "0.6rem" }, children: /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 style: {
@@ -2910,10 +3430,11 @@ function NewsArticleModal({ item, onClose }) {
                   background: `${sentimentInfo.color}1a`,
                   border: `1px solid ${sentimentInfo.color}40`
                 },
-                children: [
+                children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                   sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
-                  sentimentInfo.label
-                ]
+                  sentimentInfo.label,
+                  item.sentimentScore != null && /* @__PURE__ */ jsxRuntime.jsx(SentimentBar, { score: item.sentimentScore, color: sentimentInfo.color })
+                ] })
               }
             ) }),
             /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "1rem", fontWeight: 600, color: "#fff", lineHeight: 1.5, margin: "0 0 1rem" }, children: item.title }),
@@ -2928,7 +3449,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
                 }
@@ -2990,7 +3517,7 @@ function NewsArticleModal({ item, onClose }) {
   }
   return modal;
 }
-var PropertyNewsUpdates = React5__namespace.forwardRef(
+var PropertyNewsUpdates = React9__namespace.forwardRef(
   ({
     className,
     heading,
@@ -3004,49 +3531,120 @@ var PropertyNewsUpdates = React5__namespace.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__namespace.useState("all");
-    const [homePage, setHomePage] = React5__namespace.useState(0);
+    const headerTrailing = Boolean(isHomeVariant ? viewAllHref : !isPurchaseVariant);
+    const [homeTabInternal, setHomeTabInternal] = React9__namespace.useState("all");
+    const homeTab = category ?? homeTabInternal;
+    const setHomeTab = React9__namespace.useCallback(
+      (next) => {
+        setHomeTabInternal(next);
+        onCategoryChange?.(next);
+      },
+      [onCategoryChange]
+    );
+    const [homePage, setHomePage] = React9__namespace.useState(0);
     const purchaseItems = purchasesProp ?? [];
-    const [page, setPage] = React5__namespace.useState(0);
-    const [selectedItem, setSelectedItem] = React5__namespace.useState(null);
-    const [isMobile, setIsMobile] = React5__namespace.useState(
+    const [page, setPage] = React9__namespace.useState(0);
+    const [selectedItem, setSelectedItem] = React9__namespace.useState(null);
+    const [isMobile, setIsMobile] = React9__namespace.useState(
       () => typeof window !== "undefined" && window.innerWidth <= 768
     );
-    React5__namespace.useEffect(() => {
+    React9__namespace.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__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       setHomePage(0);
     }, [homeTab]);
-    const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React5__namespace.useMemo(
-      () => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1,
-      [hasItems, items.length]
+    const breakingCandidates = React9__namespace.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
     );
-    React5__namespace.useEffect(() => {
+    const breakingEligible = React9__namespace.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__namespace.useState(0);
+    const [dismissingBreakingKey, setDismissingBreakingKey] = React9__namespace.useState(null);
+    const [breakingSwipe, setBreakingSwipe] = React9__namespace.useState(null);
+    const breakingSwipeStartXRef = React9__namespace.useRef(0);
+    const suppressBreakingClickRef = React9__namespace.useRef(false);
+    const breakingSwipeActiveKeyRef = React9__namespace.useRef(null);
+    const breakingSwipeMaxRef = React9__namespace.useRef(0);
+    const [badgeTip, setBadgeTip] = React9__namespace.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__namespace.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__namespace.useMemo(
+      () => new Set(breakingEligible.map(breakingKey)),
+      [breakingEligible]
+    );
+    const listItems = React9__namespace.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__namespace.useMemo(
+      () => hasItems ? Math.max(1, Math.ceil(listItems.length / ITEMS_PER_PAGE)) : 1,
+      [hasItems, listItems.length]
+    );
+    React9__namespace.useEffect(() => {
       setPage((prev) => Math.min(prev, totalPages - 1));
     }, [totalPages]);
-    const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
-    const homeFilteredItems = React5__namespace.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__namespace.useMemo(
+      () => hasItems ? listItems.filter((it) => homeTab === "all" || it.type === homeTab) : [],
+      [hasItems, listItems, homeTab]
     );
-    const homeTotalPages = React5__namespace.useMemo(
+    const homeTotalPages = React9__namespace.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__namespace.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__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -3057,8 +3655,8 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+          (!hideHeading || headerTrailing) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
               isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 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__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-5 14H4v-4h11v4zm0-5H4V9h11v4zm5 5h-4V9h4v9z" }) }),
               isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#0ecb81", boxShadow: "0 0 8px rgba(14,203,129,0.8)", animation: "propertyNewsPulse 1.5s infinite" } }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -3077,7 +3675,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "LIVE"
             ] }) : null
           ] }),
-          isHomeVariant && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          isHomeVariant && !hideCategoryTabs && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -3098,10 +3696,229 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
             },
             tab
           )) }),
+          pinnedBreaking.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                        "span",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "0.45rem",
+                            marginTop: "0.2rem"
+                          },
+                          children: [
+                            (() => {
+                              const age = rowAgeLabel(item.publishedAt, breakingNow);
+                              return age ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SentimentBar, { score: item.sentimentScore, color: sentiment.color })
+                                ]
+                              }
+                            ) : null,
+                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -3132,10 +3949,12 @@ var PropertyNewsUpdates = React5__namespace.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__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     type: "button",
+                    "data-breaking-row": isBreakingRow ? "true" : void 0,
                     onClick: () => setSelectedItem(item),
                     style: {
                       width: "100%",
@@ -3151,6 +3970,10 @@ var PropertyNewsUpdates = React5__namespace.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)";
@@ -3164,15 +3987,91 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: isMobile ? "0.35rem" : "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: isMobile ? "0.55rem" : "0.7rem" }, children: formatDateShort(item.date) }),
-                          item.source && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                    "img",
+                                    {
+                                      src: badgeAsset.imageUrl,
+                                      alt: badgeAsset.name ?? badgeAsset.ticker,
+                                      style: { width: "100%", height: "100%", objectFit: "cover", display: "block" }
+                                    }
+                                  ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
+                          sentimentInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                             sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
-                            sentimentInfo.label
-                          ] })
+                            sentimentInfo.label,
+                            item.sentimentScore != null && /* @__PURE__ */ jsxRuntime.jsx(SentimentBar, { score: item.sentimentScore, color: sentimentInfo.color })
+                          ] }) })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#848e9c", paddingTop: "2px", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" }) }) })
@@ -3221,15 +4120,13 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "0.9375rem", fontWeight: 500, marginBottom: "0.4rem", color: "#fff", lineHeight: 1.4 }, children: item.title }),
                           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: "0.5rem" }, children: [
-                            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: isHighlighted ? "#0ecb81" : "#b5b8c5", whiteSpace: "nowrap" }, children: dateLabel }),
-                              item.source && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", minWidth: 0, flexWrap: "wrap" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.75rem", color: isHighlighted ? "#0ecb81" : "#b5b8c5", whiteSpace: "nowrap" }, children: dateLabel }) }),
                             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: "0.3rem", flexShrink: 0 }, children: [
-                              sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: [
+                              sentimentInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.65rem", fontWeight: 700, color: sentimentInfo.color, whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "0.3rem" }, children: [
                                 sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
-                                sentimentInfo.label
-                              ] }),
+                                sentimentInfo.label,
+                                item.sentimentScore != null && /* @__PURE__ */ jsxRuntime.jsx(SentimentBar, { score: item.sentimentScore, color: sentimentInfo.color })
+                              ] }) }),
                               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.25rem 0.6rem", borderRadius: "4px", border: `1px solid ${catStyle.borderColor}`, backgroundColor: catStyle.backgroundColor, color: catStyle.color, fontSize: "0.68rem", fontWeight: 600, textTransform: "uppercase", whiteSpace: "nowrap" }, children: item.type === "property" ? catStyle.label : "Market News" })
                             ] })
                           ] })
@@ -3302,7 +4199,21 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               }
             )
           ] }),
-          selectedItem && !isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) })
+          selectedItem && !isPurchaseVariant && /* @__PURE__ */ jsxRuntime.jsx(NewsArticleModal, { item: selectedItem, onClose: () => setSelectedItem(null) }),
+          badgeTip && ReactDOM__namespace.createPortal(
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: badgeTip.asset.name ? `${badgeTip.asset.name} (${badgeTip.asset.ticker})` : badgeTip.asset.ticker })
+              }
+            ),
+            document.body
+          )
         ]
       }
     );
@@ -3355,7 +4266,7 @@ var defaultFormat = (value) => new Intl.NumberFormat("en-US", {
   notation: value >= 1e5 ? "compact" : "standard",
   maximumFractionDigits: value >= 1e3 ? 0 : 2
 }).format(value);
-var TradingSlider = React5__namespace.forwardRef(
+var TradingSlider = React9__namespace.forwardRef(
   ({
     label = "Trade size",
     helperText = "Drag to pick the desired notional.",
@@ -3373,7 +4284,7 @@ var TradingSlider = React5__namespace.forwardRef(
     ...rest
   }, ref) => {
     const isControlled = value !== void 0;
-    const [internalValue, setInternalValue] = React5__namespace.useState(
+    const [internalValue, setInternalValue] = React9__namespace.useState(
       defaultValue ?? (typeof min === "number" ? min : 0)
     );
     const currentValue = isControlled ? Number(value) : internalValue;
@@ -3476,7 +4387,7 @@ var MobileToggleButton = styled10__default.default.button`
     padding: 0.6rem 0.5rem;
   }
 `;
-var MobileTradeNav = React5__namespace.forwardRef(
+var MobileTradeNav = React9__namespace.forwardRef(
   ({ className, items, activeId, onChange, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(MobileToggleContainer, { ref, className: cn(className), ...props, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
       MobileToggleButton,
@@ -4002,7 +4913,7 @@ var formatPercent = (value, fractionDigits = 2) => {
   if (value == null || Number.isNaN(value)) return "\u2014";
   return `${value.toFixed(fractionDigits)}%`;
 };
-var YourOrders = React5__namespace.forwardRef(
+var YourOrders = React9__namespace.forwardRef(
   ({
     className,
     title,
@@ -4015,10 +4926,10 @@ var YourOrders = React5__namespace.forwardRef(
     pageSize: pageSizeOverride,
     ...props
   }, ref) => {
-    const [internalActiveTab, setInternalActiveTab] = React5__namespace.useState(tabs?.[0]?.id ?? "portfolio");
-    const [page, setPage] = React5__namespace.useState(0);
+    const [internalActiveTab, setInternalActiveTab] = React9__namespace.useState(tabs?.[0]?.id ?? "portfolio");
+    const [page, setPage] = React9__namespace.useState(0);
     const effectiveActiveTabId = activeTabId ?? internalActiveTab;
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       setPage(0);
     }, [effectiveActiveTabId]);
     const handleTabChange = (tabId) => {
@@ -4400,7 +5311,7 @@ function createCandlestickSeries(chart, options) {
   }
   throw new Error("Candlestick series API is not available in the current lightweight-charts version.");
 }
-var PriceChart = React5__namespace.forwardRef(
+var PriceChart = React9__namespace.forwardRef(
   ({
     className,
     title = "Price Chart",
@@ -4414,18 +5325,18 @@ var PriceChart = React5__namespace.forwardRef(
     height = 301.52,
     ...props
   }, ref) => {
-    const containerRef = React5__namespace.useRef(null);
-    const chartRef = React5__namespace.useRef(null);
-    const seriesRef = React5__namespace.useRef(null);
-    const priceLineRef = React5__namespace.useRef(null);
-    const [hoveredRange, setHoveredRange] = React5__namespace.useState(null);
-    const [dropdownOpen, setDropdownOpen] = React5__namespace.useState(false);
-    const dropdownRef = React5__namespace.useRef(null);
-    const isAutoScrollRef = React5__namespace.useRef(true);
+    const containerRef = React9__namespace.useRef(null);
+    const chartRef = React9__namespace.useRef(null);
+    const seriesRef = React9__namespace.useRef(null);
+    const priceLineRef = React9__namespace.useRef(null);
+    const [hoveredRange, setHoveredRange] = React9__namespace.useState(null);
+    const [dropdownOpen, setDropdownOpen] = React9__namespace.useState(false);
+    const dropdownRef = React9__namespace.useRef(null);
+    const isAutoScrollRef = React9__namespace.useRef(true);
     const visibleRanges = ranges.slice(0, VISIBLE_RANGE_COUNT);
     const dropdownRanges = ranges.slice(VISIBLE_RANGE_COUNT);
     const selectedInDropdown = dropdownRanges.includes(selectedRange);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const handleClickOutside = (e) => {
         if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
           setDropdownOpen(false);
@@ -4434,25 +5345,25 @@ var PriceChart = React5__namespace.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, []);
-    const resolvedPrice = React5__namespace.useMemo(() => {
+    const resolvedPrice = React9__namespace.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
       return last?.close;
     }, [data, price]);
-    const inferredChangePercent = React5__namespace.useMemo(() => {
+    const inferredChangePercent = React9__namespace.useMemo(() => {
       if (changePercent != null) return changePercent;
       const first = data[0]?.open;
       const last = data.at(-1)?.close;
       if (first == null || last == null || first === 0) return void 0;
       return (last - first) / first * 100;
     }, [changePercent, data]);
-    const dollarChange = React5__namespace.useMemo(() => {
+    const dollarChange = React9__namespace.useMemo(() => {
       const first = data[0]?.open;
       const last = data.at(-1)?.close;
       if (first == null || last == null) return void 0;
       return last - first;
     }, [data]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const chart = LightweightCharts__namespace.createChart(el, {
@@ -4497,7 +5408,7 @@ var PriceChart = React5__namespace.forwardRef(
         chart.remove();
       };
     }, []);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const chart = chartRef.current;
       if (!chart) return;
       const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
@@ -4505,7 +5416,7 @@ var PriceChart = React5__namespace.forwardRef(
         timeScale: getTimeScaleOptions(effectiveRange)
       });
     }, [selectedRange, ranges]);
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
@@ -4720,7 +5631,7 @@ var formatPrice3 = (value, currencySymbol, compact) => {
     maximumFractionDigits: 2
   })}`;
 };
-var PropertyHeroHeader = React5__namespace.forwardRef(
+var PropertyHeroHeader = React9__namespace.forwardRef(
   ({
     className,
     imageUrl,
@@ -4754,12 +5665,12 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
     const accentColor = "#e6c87e";
     const tradeHoverColor = "#f5dd9a";
-    const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
-    const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
-    const [isMobile, setIsMobile] = React5__namespace.useState(
+    const [isTradeInteracting, setIsTradeInteracting] = React9__namespace.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = React9__namespace.useState(false);
+    const [isMobile, setIsMobile] = React9__namespace.useState(
       () => typeof window !== "undefined" && window.innerWidth <= 768
     );
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       const onResize = () => setIsMobile(window.innerWidth <= 768);
       window.addEventListener("resize", onResize);
       return () => window.removeEventListener("resize", onResize);
@@ -5150,10 +6061,10 @@ function fmtCompactUsd(n) {
 }
 function useIsNarrow(maxWidthPx = 768) {
   const query = `(max-width:${maxWidthPx}px)`;
-  const [narrow, setNarrow] = React5.useState(
+  const [narrow, setNarrow] = React9.useState(
     typeof window !== "undefined" ? window.matchMedia(query).matches : false
   );
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia(query);
     const onChange = () => setNarrow(mq.matches);
@@ -5197,20 +6108,20 @@ var Header = ({
   headerCta = "deposit",
   showRefer = false
 }) => {
-  const [headerBgOpacity, setHeaderBgOpacity] = React5.useState(transparentOnTop ? 0 : 1);
-  const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
+  const [headerBgOpacity, setHeaderBgOpacity] = React9.useState(transparentOnTop ? 0 : 1);
+  const [isUserMenuOpen, setIsUserMenuOpen] = React9.useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = React9.useState(false);
   const isNarrow = useIsNarrow();
-  const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
-  const [showLoginPopup, setShowLoginPopup] = React5.useState(false);
-  const [loginPopupInitialView, setLoginPopupInitialView] = React5.useState(void 0);
-  const [isPortfolioBarVisible, setIsPortfolioBarVisible] = React5.useState(() => {
+  const [isMoreMenuOpen, setIsMoreMenuOpen] = React9.useState(false);
+  const [showLoginPopup, setShowLoginPopup] = React9.useState(false);
+  const [loginPopupInitialView, setLoginPopupInitialView] = React9.useState(void 0);
+  const [isPortfolioBarVisible, setIsPortfolioBarVisible] = React9.useState(() => {
     if (typeof localStorage === "undefined") return false;
     return localStorage.getItem("portfolioBarVisible") !== "false";
   });
-  const portfolioPillRef = React5.useRef(null);
-  const [portfolioArrowLeft, setPortfolioArrowLeft] = React5.useState(null);
-  const togglePortfolioBar = React5.useCallback(() => {
+  const portfolioPillRef = React9.useRef(null);
+  const [portfolioArrowLeft, setPortfolioArrowLeft] = React9.useState(null);
+  const togglePortfolioBar = React9.useCallback(() => {
     setIsPortfolioBarVisible((prev) => {
       const next = !prev;
       try {
@@ -5221,13 +6132,13 @@ var Header = ({
     });
   }, []);
   const SIMULATE_FUNDS = false;
-  const [simFundsPending, setSimFundsPending] = React5.useState(true);
-  React5.useEffect(() => {
+  const [simFundsPending, setSimFundsPending] = React9.useState(true);
+  React9.useEffect(() => {
     return;
   }, [simFundsPending]);
   const showFundsPending = (fundsPending || SIMULATE_FUNDS) && isAuthenticated && isPortfolioBarVisible;
-  const [fundsCountdown, setFundsCountdown] = React5.useState(10);
-  React5.useEffect(() => {
+  const [fundsCountdown, setFundsCountdown] = React9.useState(10);
+  React9.useEffect(() => {
     if (!showFundsPending) return;
     setFundsCountdown(10);
     const id = setInterval(() => {
@@ -5241,7 +6152,7 @@ var Header = ({
     }, 1e3);
     return () => clearInterval(id);
   }, [showFundsPending]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handler = () => {
       if (LoginPopupComponent) {
         setLoginPopupInitialView("funding");
@@ -5251,7 +6162,7 @@ var Header = ({
     window.addEventListener("loaf:open-funding", handler);
     return () => window.removeEventListener("loaf:open-funding", handler);
   }, [LoginPopupComponent]);
-  const updatePortfolioArrow = React5.useCallback(() => {
+  const updatePortfolioArrow = React9.useCallback(() => {
     const eye = document.getElementById("portfolio-eye-toggle");
     const pill = portfolioPillRef.current;
     if (!eye || !pill) return;
@@ -5260,13 +6171,13 @@ var Header = ({
     const offset = eyeRect.left + eyeRect.width / 2 - pillRect.left - 7;
     setPortfolioArrowLeft(offset);
   }, []);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!isPortfolioBarVisible || !portfolioSummary) return;
     updatePortfolioArrow();
     window.addEventListener("resize", updatePortfolioArrow);
     return () => window.removeEventListener("resize", updatePortfolioArrow);
   }, [isPortfolioBarVisible, portfolioSummary, updatePortfolioArrow]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (typeof window === "undefined") return;
     const ua = navigator.userAgent;
     const isTelegram = /Telegram/i.test(ua);
@@ -5275,7 +6186,7 @@ var Header = ({
       document.documentElement.style.setProperty("--telegram-safe-top", "59px");
     }
   }, []);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!transparentOnTop) {
       setHeaderBgOpacity(1);
       return;
@@ -5288,7 +6199,7 @@ var Header = ({
     window.addEventListener("scroll", onScroll, { passive: true });
     return () => window.removeEventListener("scroll", onScroll);
   }, [transparentOnTop]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (!target) return;
@@ -5308,7 +6219,7 @@ var Header = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isUserMenuOpen, isMobileMenuOpen, isMoreMenuOpen]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (typeof window === "undefined") return;
     const handleExternalLoginPopup = (event) => {
       const customEvent = event;
@@ -5439,7 +6350,7 @@ var Header = ({
       setShowLoginPopup(true);
     }
   };
-  const handleLoginPopupClose = React5__namespace.default.useCallback(() => {
+  const handleLoginPopupClose = React9__namespace.default.useCallback(() => {
     setShowLoginPopup(false);
     setLoginPopupInitialView(void 0);
   }, []);
@@ -6603,10 +7514,10 @@ var PBOperator = styled10__default.default.span`
     font-size: 0.55rem;
   }
 `;
-var PropertySubheader = React5__namespace.forwardRef(
+var PropertySubheader = React9__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabsContainerRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const tabsContainerRef = React9__namespace.useRef(null);
+    React9__namespace.useEffect(() => {
       const container = tabsContainerRef.current;
       if (!container) return;
       const isMobile = window.innerWidth <= 768;
@@ -6778,34 +7689,34 @@ var LoginPopup = ({
   onCheckAccess,
   gate
 }) => {
-  const [view, setView] = React5.useState(() => initialView ?? "main");
-  const [email, setEmail] = React5.useState("");
-  const [handle, setHandle] = React5.useState("");
-  const [otp, setOtp] = React5.useState(Array(OTP_INPUT_LENGTH).fill(""));
-  const [error, setError] = React5.useState("");
-  const [copied, setCopied] = React5.useState(false);
-  const [referralCode, setReferralCode] = React5.useState(
+  const [view, setView] = React9.useState(() => initialView ?? "main");
+  const [email, setEmail] = React9.useState("");
+  const [handle, setHandle] = React9.useState("");
+  const [otp, setOtp] = React9.useState(Array(OTP_INPUT_LENGTH).fill(""));
+  const [error, setError] = React9.useState("");
+  const [copied, setCopied] = React9.useState(false);
+  const [referralCode, setReferralCode] = React9.useState(
     () => gate && initialCode ? normalizeAccessCode(initialCode) : ""
   );
-  const [referralLoading, setReferralLoading] = React5.useState(false);
-  const [referralError, setReferralError] = React5.useState("");
-  const [codeStatus, setCodeStatus] = React5.useState("idle");
-  const [signInRevealed, setSignInRevealed] = React5.useState(false);
-  const [otpStatus, setOtpStatus] = React5.useState("idle");
-  const [signInMode, setSignInMode] = React5.useState(false);
-  const [loading, setLoading] = React5.useState(false);
-  const [isSignUp, setIsSignUp] = React5.useState(false);
-  const [fundingAmount] = React5.useState("");
-  const [kycLoading, setKycLoading] = React5.useState(false);
-  const [showKycWidget, setShowKycWidget] = React5.useState(false);
-  const [showKycFooter, setShowKycFooter] = React5.useState(false);
-  const [cryptoFundingLoading, setCryptoFundingLoading] = React5.useState(false);
-  const [fiatFundingLoading, setFiatFundingLoading] = React5.useState(false);
-  const [fundingError, setFundingError] = React5.useState("");
-  const [transakWidgetUrl, setTransakWidgetUrl] = React5.useState(null);
-  const suppressAutoCloseRef = React5__namespace.default.useRef(false);
-  const validatedCodeRef = React5__namespace.default.useRef(null);
-  const finishGate = React5__namespace.default.useCallback(async () => {
+  const [referralLoading, setReferralLoading] = React9.useState(false);
+  const [referralError, setReferralError] = React9.useState("");
+  const [codeStatus, setCodeStatus] = React9.useState("idle");
+  const [signInRevealed, setSignInRevealed] = React9.useState(false);
+  const [otpStatus, setOtpStatus] = React9.useState("idle");
+  const [signInMode, setSignInMode] = React9.useState(false);
+  const [loading, setLoading] = React9.useState(false);
+  const [isSignUp, setIsSignUp] = React9.useState(false);
+  const [fundingAmount] = React9.useState("");
+  const [kycLoading, setKycLoading] = React9.useState(false);
+  const [showKycWidget, setShowKycWidget] = React9.useState(false);
+  const [showKycFooter, setShowKycFooter] = React9.useState(false);
+  const [cryptoFundingLoading, setCryptoFundingLoading] = React9.useState(false);
+  const [fiatFundingLoading, setFiatFundingLoading] = React9.useState(false);
+  const [fundingError, setFundingError] = React9.useState("");
+  const [transakWidgetUrl, setTransakWidgetUrl] = React9.useState(null);
+  const suppressAutoCloseRef = React9__namespace.default.useRef(false);
+  const validatedCodeRef = React9__namespace.default.useRef(null);
+  const finishGate = React9__namespace.default.useCallback(async () => {
     if (!gate) return true;
     const code = validatedCodeRef.current;
     if (code) {
@@ -6831,7 +7742,7 @@ var LoginPopup = ({
     );
     return false;
   }, [gate, onSubmitReferralCode, onCheckAccess]);
-  const runCodeValidation = React5__namespace.default.useCallback(async (fullCode) => {
+  const runCodeValidation = React9__namespace.default.useCallback(async (fullCode) => {
     setCodeStatus("checking");
     setError("");
     try {
@@ -6854,20 +7765,20 @@ var LoginPopup = ({
       setCodeStatus("invalid");
     }
   }, [onValidateCode, isAuthenticated, finishGate, onClose]);
-  const autoCodeTriedRef = React5__namespace.default.useRef(false);
-  React5.useEffect(() => {
+  const autoCodeTriedRef = React9__namespace.default.useRef(false);
+  React9.useEffect(() => {
     if (autoCodeTriedRef.current || !gate || !initialCode) return;
     const full = normalizeAccessCode(initialCode);
     if (full.length !== CODE_PREFIX.length + CODE_SUFFIX_LEN) return;
     autoCodeTriedRef.current = true;
     void runCodeValidation(full);
   }, [gate, initialCode, runCodeValidation]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (typeof initialView === "string") {
       setView(initialView);
     }
   }, [initialView]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!showKycWidget) {
       setShowKycFooter(false);
       return;
@@ -6875,7 +7786,7 @@ var LoginPopup = ({
     const timer = setTimeout(() => setShowKycFooter(true), 5e3);
     return () => clearTimeout(timer);
   }, [showKycWidget]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!transakWidgetUrl) return;
     const handleTransakMessage = (event) => {
       if (!isTrustedTransakOrigin(event.origin, transakWidgetUrl)) {
@@ -6900,7 +7811,7 @@ var LoginPopup = ({
     window.addEventListener("message", handleTransakMessage);
     return () => window.removeEventListener("message", handleTransakMessage);
   }, [transakWidgetUrl, onClose]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!autoCloseOnAuth) {
       return;
     }
@@ -6914,7 +7825,7 @@ var LoginPopup = ({
       onClose();
     }
   }, [autoCloseOnAuth, currentUser, isAuthenticated, onClose, view]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape" && !gate) onClose();
     };
@@ -7137,7 +8048,7 @@ var LoginPopup = ({
       setLoading(false);
     }
   };
-  const runGateOtpVerify = React5__namespace.default.useCallback(async (code) => {
+  const runGateOtpVerify = React9__namespace.default.useCallback(async (code) => {
     if (!onVerifyEmailCode) return;
     setOtpStatus("checking");
     setError("");
@@ -7153,7 +8064,7 @@ var LoginPopup = ({
       setOtpStatus("invalid");
     }
   }, [onVerifyEmailCode, email, finishGate, onClose]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!gate || view !== "otp") return;
     if (otp.join("").length < OTP_INPUT_LENGTH) {
       if (otpStatus === "invalid") setOtpStatus("idle");
@@ -8728,8 +9639,8 @@ var TransakIframe = styled10__default.default.iframe`
   border-radius: var(--border-radius, 12px);
 `;
 var MiniLiveFeed = () => {
-  const [purchases, setPurchases] = React5.useState([]);
-  React5.useEffect(() => {
+  const [purchases, setPurchases] = React9.useState([]);
+  React9.useEffect(() => {
     const handles = [
       "Landlord",
       "PropertyKing",
@@ -8985,8 +9896,8 @@ var FactText = styled10__default.default.p`
   }
 `;
 var PreparingFacts = () => {
-  const [index, setIndex] = React5.useState(() => Math.floor(Math.random() * PREPARING_FACTS.length));
-  React5.useEffect(() => {
+  const [index, setIndex] = React9.useState(() => Math.floor(Math.random() * PREPARING_FACTS.length));
+  React9.useEffect(() => {
     const id = setInterval(() => {
       setIndex((i) => (i + 1) % PREPARING_FACTS.length);
     }, 4e3);
@@ -9249,11 +10160,11 @@ function OnboardingGuide({
   onClaimHandle,
   logoSrc = "/Loaf-logo-Banner.png"
 }) {
-  const [step, setStep] = React5.useState(onClaimHandle ? "handle" : "funds");
-  const [handle, setHandle] = React5.useState("");
-  const [claiming, setClaiming] = React5.useState(false);
-  const [handleError, setHandleError] = React5.useState("");
-  React5.useEffect(() => {
+  const [step, setStep] = React9.useState(onClaimHandle ? "handle" : "funds");
+  const [handle, setHandle] = React9.useState("");
+  const [claiming, setClaiming] = React9.useState(false);
+  const [handleError, setHandleError] = React9.useState("");
+  React9.useEffect(() => {
     if (open) {
       setStep(onClaimHandle ? "handle" : "funds");
       setHandle("");
@@ -9261,7 +10172,7 @@ function OnboardingGuide({
       setHandleError("");
     }
   }, [open, onClaimHandle]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -9361,7 +10272,7 @@ function OnboardingGuide({
     ] })
   ] }) });
 }
-var PropertyCompareBar = React5__namespace.forwardRef(
+var PropertyCompareBar = React9__namespace.forwardRef(
   ({
     className,
     addresses,
@@ -9372,7 +10283,7 @@ var PropertyCompareBar = React5__namespace.forwardRef(
     price,
     ...props
   }, ref) => {
-    const normalizedAddresses = React5__namespace.useMemo(() => {
+    const normalizedAddresses = React9__namespace.useMemo(() => {
       return addresses.map(
         (option) => typeof option === "string" ? { id: option, label: option } : option
       );
@@ -9380,11 +10291,11 @@ var PropertyCompareBar = React5__namespace.forwardRef(
     const hasAddresses = normalizedAddresses.length > 0;
     const firstAddressId = normalizedAddresses[0]?.id;
     const isControlled = selectedAddressId !== void 0;
-    const [internalSelectedId, setInternalSelectedId] = React5__namespace.useState(
+    const [internalSelectedId, setInternalSelectedId] = React9__namespace.useState(
       () => isControlled ? void 0 : firstAddressId
     );
     const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
-    React5__namespace.useEffect(() => {
+    React9__namespace.useEffect(() => {
       if (!isControlled) {
         setInternalSelectedId((current) => {
           if (current != null && normalizedAddresses.some((option) => option.id === current)) {
@@ -9395,9 +10306,9 @@ var PropertyCompareBar = React5__namespace.forwardRef(
       }
     }, [firstAddressId, isControlled, normalizedAddresses]);
     const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
-    const [isDropdownOpen, setIsDropdownOpen] = React5__namespace.useState(false);
-    const dropdownRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const [isDropdownOpen, setIsDropdownOpen] = React9__namespace.useState(false);
+    const dropdownRef = React9__namespace.useRef(null);
+    React9__namespace.useEffect(() => {
       if (!isDropdownOpen) return;
       const handleClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -9790,8 +10701,8 @@ var PriceChange = styled10__default.default.span`
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
 function useMaxWidth(maxWidth) {
-  const [match, setMatch] = React5.useState(() => typeof window !== "undefined" && window.matchMedia(`(max-width: ${maxWidth}px)`).matches);
-  React5.useEffect(() => {
+  const [match, setMatch] = React9.useState(() => typeof window !== "undefined" && window.matchMedia(`(max-width: ${maxWidth}px)`).matches);
+  React9.useEffect(() => {
     if (typeof window === "undefined") return;
     const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
     const onChange = () => setMatch(mq.matches);
@@ -9816,14 +10727,14 @@ function GalleryMapSection({
   hideSuburb = false,
   featuresSlot
 }) {
-  const [carouselIndex, setCarouselIndex] = React5.useState(0);
-  const [showVideo, setShowVideo] = React5.useState(false);
-  const [autoPlaying, setAutoPlaying] = React5.useState(autoPlay);
-  const [showFullMap, setShowFullMap] = React5.useState(false);
-  const [showFullVideo, setShowFullVideo] = React5.useState(false);
+  const [carouselIndex, setCarouselIndex] = React9.useState(0);
+  const [showVideo, setShowVideo] = React9.useState(false);
+  const [autoPlaying, setAutoPlaying] = React9.useState(autoPlay);
+  const [showFullMap, setShowFullMap] = React9.useState(false);
+  const [showFullVideo, setShowFullVideo] = React9.useState(false);
   const isMobile = useMaxWidth(768);
   const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
     const interval = setInterval(() => {
       setCarouselIndex((p) => (p + 1) % images.length);
@@ -10010,10 +10921,10 @@ function GalleryMapSection({
   ] });
 }
 function StackedGallery({ images, onPhotoClick }) {
-  const [expanded, setExpanded] = React5.useState(false);
-  const [cardH, setCardH] = React5.useState(200);
-  const wrapRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const [expanded, setExpanded] = React9.useState(false);
+  const [cardH, setCardH] = React9.useState(200);
+  const wrapRef = React9.useRef(null);
+  React9.useEffect(() => {
     const el = wrapRef.current;
     if (!el) return;
     const measure = () => {
@@ -10025,7 +10936,7 @@ function StackedGallery({ images, onPhotoClick }) {
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const el = wrapRef.current;
     if (!el) return;
     const update = () => {
@@ -10117,21 +11028,21 @@ function StackedGallery({ images, onPhotoClick }) {
   ] });
 }
 function FullMapPopup({ onClose, mapUrl }) {
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape") onClose();
     };
     window.addEventListener("keydown", handleEsc);
     return () => window.removeEventListener("keydown", handleEsc);
   }, [onClose]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleMessage = (e) => {
       if (e.data === "loaf:close-embed") onClose();
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [onClose]);
-  const iframeRef = React5.useCallback((node) => {
+  const iframeRef = React9.useCallback((node) => {
     if (!node) return;
     const handleLoad = () => {
       try {
@@ -10608,10 +11519,10 @@ function PropertyOverview({
   beta = false,
   marketHours
 }) {
-  const [isDescExpanded, setDescExpanded] = React5.useState(false);
-  const [showDividendHistory, setShowDividendHistory] = React5.useState(false);
-  const [copiedAddress, setCopiedAddress] = React5.useState(false);
-  const [statsTab, setStatsTab] = React5.useState("token");
+  const [isDescExpanded, setDescExpanded] = React9.useState(false);
+  const [showDividendHistory, setShowDividendHistory] = React9.useState(false);
+  const [copiedAddress, setCopiedAddress] = React9.useState(false);
+  const [statsTab, setStatsTab] = React9.useState("token");
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
   const landSize = landProp ?? overviewData?.landSizeSqm ?? null;
   const buildingSize = buildingProp ?? overviewData?.buildingSizeSqm ?? null;
@@ -10920,8 +11831,8 @@ function DividendHistoryPopup({
   onClose
 }) {
   const { records, priceHistory } = generateDividendHistory(valuation ?? 0, totalTokens ?? 0, tokenPrice ?? 0, realPriceHistory);
-  const [highlightedIdx, setHighlightedIdx] = React5.useState(null);
-  React5.useEffect(() => {
+  const [highlightedIdx, setHighlightedIdx] = React9.useState(null);
+  React9.useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -11768,8 +12679,8 @@ var OfferPricePulse = styled10__default.default.span`
 `;
 var eventTypes = ["Leased", "Renovated", "Extended", "Rebuilt", "Rezoned", "DA Approval"];
 function PropertyHistory() {
-  const [historyFilter, setHistoryFilter] = React5.useState("all");
-  const pastSales = React5.useMemo(() => generateMockPastSales(), []);
+  const [historyFilter, setHistoryFilter] = React9.useState("all");
+  const pastSales = React9.useMemo(() => generateMockPastSales(), []);
   const loafListing = pastSales.find((sale) => sale.type === "Listed");
   const loafEvents = pastSales.filter(
     (sale) => sale.ownershipPeriod === "current" && sale.type !== "Listed" && (sale.id === "leased-current" || sale.id === "da-approval")
@@ -11906,7 +12817,7 @@ function PropertyHistory() {
   ] });
 }
 function EventDetails({ event }) {
-  const [expanded, setExpanded] = React5.useState(false);
+  const [expanded, setExpanded] = React9.useState(false);
   const toggleExpand = () => {
     setExpanded((prev) => !prev);
   };
@@ -12403,9 +13314,9 @@ var COMING_SOON_TITLES = [
   "Risk Disclosure Statement"
 ];
 function PropertyDocuments({ documentsData, highlightDocument, onClearHighlight }) {
-  const highlightRef = React5.useRef(null);
-  const [previewUrl, setPreviewUrl] = React5.useState(null);
-  const [previewTitle, setPreviewTitle] = React5.useState(null);
+  const highlightRef = React9.useRef(null);
+  const [previewUrl, setPreviewUrl] = React9.useState(null);
+  const [previewTitle, setPreviewTitle] = React9.useState(null);
   const backendDocuments = Array.isArray(documentsData?.documents) ? documentsData.documents : [];
   const liveDocs = backendDocuments.filter(
     (d) => Boolean(d.documentUrl) && isSafeUrl(d.documentUrl) && LIVE_TITLE_PATTERNS.some((rx) => rx.test(d.title))
@@ -12420,7 +13331,7 @@ function PropertyDocuments({ documentsData, highlightDocument, onClearHighlight
     setPreviewUrl(doc.documentUrl);
     setPreviewTitle(doc.title);
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (highlightDocument && highlightRef.current) {
       highlightRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
@@ -12429,7 +13340,7 @@ function PropertyDocuments({ documentsData, highlightDocument, onClearHighlight
       if (hit) selectPreview(hit);
     }
   }, [highlightDocument]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!highlightDocument || !onClearHighlight) return;
     const handler = (e) => {
       if (highlightRef.current && !highlightRef.current.contains(e.target)) {
@@ -12825,6 +13736,32 @@ var SignInButton = styled10__default.default.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);
@@ -12838,24 +13775,79 @@ function AssetSelectorBar({
   selectorItems,
   onSelect,
   trailing,
+  afterName,
   imageUrl,
   badgeLabel,
-  tickerPrimary
+  tickerPrimary,
+  compactName
 }) {
-  const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React9.useState(false);
+  const [nameTip, setNameTip] = React9.useState(null);
+  const anchorRef = React9.useRef(null);
+  const [dropdownPos, setDropdownPos] = React9.useState(null);
+  React9.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] = React9.useState("volume");
+  const [sortDir, setSortDir] = React9.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 = React9.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__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(IPOAssetSelector, { ref: anchorRef, children: [
     imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
-    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { $flush: tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { $flush: tickerPrimary, $noShrink: !!compactName && !!currentTicker && !tickerPrimary, onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
       tickerPrimary && currentTicker ? /* @__PURE__ */ jsxRuntime.jsxs(AssetIdentity, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(AssetTicker, { children: currentTicker.toUpperCase() }),
         /* @__PURE__ */ jsxRuntime.jsx(AssetSubName, { children: propertyName })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      ] }) : compactName && currentTicker ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         propertyName,
         currentTicker ? ` (${currentTicker.toUpperCase()})` : ""
       ] }),
@@ -12873,6 +13865,7 @@ function AssetSelectorBar({
         }
       )
     ] }) }),
+    afterName != null && /* @__PURE__ */ jsxRuntime.jsx(AfterNameSlot, { className: "asset-bar-after-name", children: afterName }),
     metrics.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(SelectorMetrics, { children: metrics.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "contents" }, children: [
       i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { children: "|" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
@@ -12888,40 +13881,128 @@ function AssetSelectorBar({
       ] })
     ] }, m.label)) }),
     trailing != null && /* @__PURE__ */ jsxRuntime.jsx(TrailingWrapper, { className: "asset-bar-trailing", children: /* @__PURE__ */ jsxRuntime.jsx(TrailingInner, { children: trailing }) }),
-    isDropdownOpen && hasItems && /* @__PURE__ */ jsxRuntime.jsx(IPODropdown, { children: selectorItems.map((item) => {
-      const isCurrent = item.tokenName === currentTokenName;
-      const status = item.status?.toUpperCase();
-      const statusLabel = status === "PENDING" ? "Preparing" : status === "CLOSED" ? "Closed" : status === "CANCELLED" ? "Cancelled" : null;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        IPOOption,
+    nameTip != null && typeof document !== "undefined" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        NameTip,
         {
-          onClick: () => {
-            if (!isCurrent && onSelect) {
-              onSelect(item.tokenName);
-            }
-            setIsDropdownOpen(false);
-          },
-          $selected: isCurrent,
-          style: { cursor: isCurrent ? "default" : "pointer" },
-          children: /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionInner, { children: [
-            item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
-                displayName(item),
-                item.ticker ? ` (${item.ticker})` : "",
-                item.badge && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: item.badge })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
-                item.streetAddress,
-                item.suburb ? `, ${item.suburb}` : "",
-                statusLabel && /* @__PURE__ */ jsxRuntime.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" && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        IPODropdown,
+        {
+          $wide: hasMarketData,
+          style: { position: "fixed", top: dropdownPos.top, left: dropdownPos.left, zIndex: 10050 },
+          children: [
+            hasMarketData && /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HeaderLabel, { children: "Asset" }),
+              SORT_COLUMNS.map(({ field, label, hideOnPhone }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(MarketRowInner, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(IdentityCell, { children: [
+                      item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionIdentity, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(MarketTicker, { children: (item.ticker || displayName(item)).toUpperCase() }),
+                          item.typeBadge && /* @__PURE__ */ jsxRuntime.jsx(TypePill, { style: { color: item.typeBadge.color, background: item.typeBadge.background }, children: item.typeBadge.label }),
+                          item.badge && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: item.badge })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
+                          item.streetAddress,
+                          statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
+                        ] })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(PriceCell, { children: price ?? "\u2014" }),
+                    change != null ? /* @__PURE__ */ jsxRuntime.jsxs(ChangeCell, { $positive: change >= 0, children: [
+                      change >= 0 ? "+" : "",
+                      change.toFixed(2),
+                      "%"
+                    ] }) : /* @__PURE__ */ jsxRuntime.jsx(MutedCell, { children: "\u2014" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(MutedCell, { $hideOnPhone: true, children: vol ?? "\u2014" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(MutedCell, { $hideOnPhone: true, children: val ?? "\u2014" })
+                  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionInner, { children: [
+                    item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionIdentity, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
+                        displayName(item),
+                        item.ticker ? ` (${item.ticker})` : "",
+                        item.badge && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: item.badge })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
+                        item.streetAddress,
+                        item.suburb ? `, ${item.suburb}` : "",
+                        statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
+                      ] })
+                    ] })
+                  ] })
+                },
+                item.tokenName
+              );
+            })
+          ]
+        }
+      ),
+      document.body
+    )
   ] }) });
 }
 var AssetSelectorWrapper = styled10__default.default.div`
@@ -12983,7 +14064,9 @@ var AssetSelectorDropdown = styled10__default.default.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)"}; }
@@ -13040,6 +14123,35 @@ var AssetName = styled10__default.default.div`
     svg { margin-left: 0.4rem; width: 16px; height: 16px; }
   }
 `;
+var CompactName = styled10__default.default.span`
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+`;
+var NameTip = styled10__default.default.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__default.default.div`
   display: flex;
   align-items: center;
@@ -13060,6 +14172,12 @@ var SelectorMetrics = styled10__default.default.div`
     padding: 0.4rem 0.5rem;
   }
 `;
+var AfterNameSlot = styled10__default.default.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: 0;
+`;
 var TrailingWrapper = styled10__default.default.div`
   display: flex;
   align-items: center;
@@ -13131,14 +14249,16 @@ var IPODropdown = styled10__default.default.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;
@@ -13146,8 +14266,8 @@ var IPODropdown = styled10__default.default.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);
@@ -13156,6 +14276,99 @@ var IPODropdown = styled10__default.default.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__default.default.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__default.default.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__default.default.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__default.default.div`
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+`;
+var MarketRowInner = styled10__default.default.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__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  min-width: 0;
+`;
+var PriceCell = styled10__default.default.span`
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  text-align: left;
+`;
+var ChangeCell = styled10__default.default.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__default.default.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__default.default.div`
   padding: 0.6rem 0.75rem;
   transition: background 0.15s ease;
@@ -13181,6 +14394,25 @@ var IPOOptionName = styled10__default.default.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__default.default.span`
+  font-weight: 700;
+  letter-spacing: 0.01em;
+`;
+var TypePill = styled10__default.default.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__default.default.span`
   margin-left: 0.4rem;
@@ -13199,6 +14431,11 @@ var IPOOptionLocation = styled10__default.default.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);
@@ -13232,10 +14469,10 @@ var SlideOld = styled10__default.default.span`
   animation: ${slideOut} 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 `;
 function SlideDigit({ value }) {
-  const prevRef = React5.useRef(value);
-  const [prev, setPrev] = React5.useState(null);
-  const [animKey, setAnimKey] = React5.useState(0);
-  React5.useEffect(() => {
+  const prevRef = React9.useRef(value);
+  const [prev, setPrev] = React9.useState(null);
+  const [animKey, setAnimKey] = React9.useState(0);
+  React9.useEffect(() => {
     if (value !== prevRef.current) {
       setPrev(prevRef.current);
       prevRef.current = value;
@@ -13275,15 +14512,15 @@ function OfferingProgressCard({
   style,
   className
 }) {
-  const [currentTime, setCurrentTime] = React5.useState(/* @__PURE__ */ new Date());
-  const [countdown, setCountdown] = React5.useState(null);
+  const [currentTime, setCurrentTime] = React9.useState(/* @__PURE__ */ new Date());
+  const [countdown, setCountdown] = React9.useState(null);
   const computedRaised = raisedAmount ?? totalSold * tokenPrice;
   const computedTarget = targetAmount ?? supplyToSell * tokenPrice;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const timer = setInterval(() => setCurrentTime(/* @__PURE__ */ new Date()), 1e3);
     return () => clearInterval(timer);
   }, []);
-  const [tradingCountdown, setTradingCountdown] = React5.useState(null);
+  const [tradingCountdown, setTradingCountdown] = React9.useState(null);
   const calcCountdownFrom = (target) => {
     const now = Math.floor(Date.now() / 1e3);
     const diff = target - now;
@@ -13295,7 +14532,7 @@ function OfferingProgressCard({
       seconds: diff % 60
     };
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!opensAt) {
       setCountdown(null);
       return;
@@ -13304,7 +14541,7 @@ function OfferingProgressCard({
     const interval = setInterval(() => setCountdown(calcCountdownFrom(opensAt)), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!tradingStartsAt) {
       setTradingCountdown(null);
       return;
@@ -13798,8 +15035,8 @@ var HomeSpinner = styled10__default.default.span`
   }
 `;
 function useCountdown(opensAt) {
-  const [now, setNow] = React5.useState(() => Math.floor(Date.now() / 1e3));
-  React5.useEffect(() => {
+  const [now, setNow] = React9.useState(() => Math.floor(Date.now() / 1e3));
+  React9.useEffect(() => {
     if (opensAt == null) return;
     const id = setInterval(() => setNow(Math.floor(Date.now() / 1e3)), 1e3);
     return () => clearInterval(id);
@@ -13849,10 +15086,10 @@ function OrderPanel({
   toast
 }) {
   const countdown = useCountdown(opensAt);
-  const [payInputValue, setPayInputValue] = React5.useState("");
-  const [receiveInputValue, setReceiveInputValue] = React5.useState("");
-  const [isPayInputFocused, setIsPayInputFocused] = React5.useState(false);
-  const [isReceiveInputFocused, setIsReceiveInputFocused] = React5.useState(false);
+  const [payInputValue, setPayInputValue] = React9.useState("");
+  const [receiveInputValue, setReceiveInputValue] = React9.useState("");
+  const [isPayInputFocused, setIsPayInputFocused] = React9.useState(false);
+  const [isReceiveInputFocused, setIsReceiveInputFocused] = React9.useState(false);
   const handlePayBlur = () => {
     setIsPayInputFocused(false);
     const parsed = parseInt(payInputValue.replace(/,/g, "").replace(/[^0-9]/g, ""), 10) || 0;
@@ -14878,7 +16115,7 @@ function OrderConfirmationModal({
   isPlacing = false,
   placingLabel = "Placing order\u2026"
 }) {
-  const [dontShowAgain, setDontShowAgain] = React5.useState(false);
+  const [dontShowAgain, setDontShowAgain] = React9.useState(false);
   if (!open) return null;
   const handleOverlayClose = () => {
     if (isPlacing) return;
@@ -15330,14 +16567,14 @@ function PortfolioActivityPanel({
   style
 }) {
   const resolvedDefaultTab = defaultTab ?? (showPositionsTab ? "positions" : showSubscriptionsTab ? "subscriptions" : "orders");
-  const [activeTab, setActiveTab] = React5.useState(resolvedDefaultTab);
-  const [currentPage, setCurrentPage] = React5.useState(0);
-  const [pendingCancelOrderId, setPendingCancelOrderId] = React5.useState(null);
-  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = React5.useState(false);
-  const [cancellingAll, setCancellingAll] = React5.useState(false);
-  const [closeAllOpen, setCloseAllOpen] = React5.useState(false);
-  const [closeAllType, setCloseAllType] = React5.useState("market");
-  const [closingAll, setClosingAll] = React5.useState(false);
+  const [activeTab, setActiveTab] = React9.useState(resolvedDefaultTab);
+  const [currentPage, setCurrentPage] = React9.useState(0);
+  const [pendingCancelOrderId, setPendingCancelOrderId] = React9.useState(null);
+  const [cancelAllConfirmOpen, setCancelAllConfirmOpen] = React9.useState(false);
+  const [cancellingAll, setCancellingAll] = React9.useState(false);
+  const [closeAllOpen, setCloseAllOpen] = React9.useState(false);
+  const [closeAllType, setCloseAllType] = React9.useState("market");
+  const [closingAll, setClosingAll] = React9.useState(false);
   const settlingPositionIds = positions.filter((p) => p.settling).map((p) => p.propertyId);
   const settlingKey = settlingPositionIds.join(",");
   const settlingTradeStartByProperty = /* @__PURE__ */ new Map();
@@ -15350,9 +16587,9 @@ function PortfolioActivityPanel({
     if (earliest === void 0 || startedAt < earliest) settlingTradeStartByProperty.set(trade.propertyId, startedAt);
   }
   const tradeDeadlineKey = settlingTradeDeadlines.join(",");
-  const settlingSinceRef = React5.useRef(/* @__PURE__ */ new Map());
-  const [now, setNow] = React5.useState(() => Date.now());
-  React5.useEffect(() => {
+  const settlingSinceRef = React9.useRef(/* @__PURE__ */ new Map());
+  const [now, setNow] = React9.useState(() => Date.now());
+  React9.useEffect(() => {
     const since = settlingSinceRef.current;
     const seenAt = Date.now();
     for (const id of settlingPositionIds) if (!since.has(id)) since.set(id, seenAt);
@@ -15360,7 +16597,7 @@ function PortfolioActivityPanel({
     setNow(seenAt);
   }, [settlingKey]);
   const positionSettlingStart = (propertyId) => settlingTradeStartByProperty.get(propertyId) ?? settlingSinceRef.current.get(propertyId) ?? now;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const pending = [
       ...settlingPositionIds.map((id) => positionSettlingStart(id) + STUCK_SETTLING_MS),
       ...settlingTradeDeadlines
@@ -15373,8 +16610,8 @@ function PortfolioActivityPanel({
   const isPositionStuck = (pos) => !!pos.settling && now - positionSettlingStart(pos.propertyId) >= STUCK_SETTLING_MS;
   const isTradeStuck = (trade) => now - toMillis(trade.executedAt) >= STUCK_SETTLING_MS;
   const hasPositionActions = !!(onClosePosition || onSharePosition || onCloseAllPositions);
-  const [posSortKey, setPosSortKey] = React5.useState("asset");
-  const [posSortAsc, setPosSortAsc] = React5.useState(true);
+  const [posSortKey, setPosSortKey] = React9.useState("asset");
+  const [posSortAsc, setPosSortAsc] = React9.useState(true);
   const handlePosSort = (key) => {
     if (posSortKey === key) {
       setPosSortAsc((v) => !v);
@@ -15383,9 +16620,9 @@ function PortfolioActivityPanel({
       setPosSortAsc(key === "asset");
     }
   };
-  const [expandedPositions, setExpandedPositions] = React5.useState(/* @__PURE__ */ new Set());
-  const [allExpanded, setAllExpanded] = React5.useState(false);
-  const [sortDropdownOpen, setSortDropdownOpen] = React5.useState(false);
+  const [expandedPositions, setExpandedPositions] = React9.useState(/* @__PURE__ */ new Set());
+  const [allExpanded, setAllExpanded] = React9.useState(false);
+  const [sortDropdownOpen, setSortDropdownOpen] = React9.useState(false);
   const togglePosition = (tokenName) => {
     setExpandedPositions((prev) => {
       const next = new Set(prev);
@@ -15394,7 +16631,7 @@ function PortfolioActivityPanel({
       return next;
     });
   };
-  const [expandedOpenOrders, setExpandedOpenOrders] = React5.useState(/* @__PURE__ */ new Set());
+  const [expandedOpenOrders, setExpandedOpenOrders] = React9.useState(/* @__PURE__ */ new Set());
   const toggleOpenOrder = (id) => {
     setExpandedOpenOrders((prev) => {
       const next = new Set(prev);
@@ -15403,7 +16640,7 @@ function PortfolioActivityPanel({
       return next;
     });
   };
-  const [expandedRows, setExpandedRows] = React5.useState(/* @__PURE__ */ new Set());
+  const [expandedRows, setExpandedRows] = React9.useState(/* @__PURE__ */ new Set());
   const toggleRow = (key) => {
     setExpandedRows((prev) => {
       const next = new Set(prev);
@@ -15431,7 +16668,7 @@ function PortfolioActivityPanel({
     }
   };
   const sortKeys = ["asset", "units", "value", "avgPrice", "currentPrice", "pnl"];
-  const sortedPositions = React5.useMemo(() => {
+  const sortedPositions = React9.useMemo(() => {
     const arr = [...positions];
     const dir = posSortAsc ? 1 : -1;
     arr.sort((a, b) => {
@@ -15466,7 +16703,7 @@ function PortfolioActivityPanel({
       setAllExpanded(true);
     }
   };
-  const mergedOrderHistory = React5.useMemo(() => {
+  const mergedOrderHistory = React9.useMemo(() => {
     if (showSubscriptionsTab || offeringOrders.length === 0) {
       return [...orderHistory].sort((a, b) => b.createdAt - a.createdAt);
     }
@@ -15491,32 +16728,32 @@ function PortfolioActivityPanel({
     }));
     return [...orderHistory, ...mapped].sort((a, b) => b.createdAt - a.createdAt);
   }, [showSubscriptionsTab, offeringOrders, orderHistory]);
-  const sortedOpenOrders = React5.useMemo(
+  const sortedOpenOrders = React9.useMemo(
     () => [...openOrders].sort((a, b) => b.createdAt - a.createdAt),
     [openOrders]
   );
-  const sortedOfferingOrders = React5.useMemo(
+  const sortedOfferingOrders = React9.useMemo(
     () => [...offeringOrders].sort((a, b) => b.createdAt - a.createdAt),
     [offeringOrders]
   );
-  const sortedTradeHistory = React5.useMemo(
+  const sortedTradeHistory = React9.useMemo(
     () => [...tradeHistory].sort((a, b) => b.executedAt - a.executedAt),
     [tradeHistory]
   );
-  const sortedTransfers = React5.useMemo(
+  const sortedTransfers = React9.useMemo(
     () => [...transfers].sort((a, b) => b.createdAt - a.createdAt),
     [transfers]
   );
   const positionsCount = positions.length;
-  const openOrdersCount = React5.useMemo(
+  const openOrdersCount = React9.useMemo(
     () => openOrders.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
     [openOrders]
   );
-  const pendingHistoryCount = React5.useMemo(
+  const pendingHistoryCount = React9.useMemo(
     () => mergedOrderHistory.filter((o) => o.status === "OPEN" || o.status === "PARTIALLY_FILLED").length,
     [mergedOrderHistory]
   );
-  const pendingOfferingsCount = React5.useMemo(
+  const pendingOfferingsCount = React9.useMemo(
     () => offeringOrders.filter((o) => {
       const s = o.status.toUpperCase();
       return s !== "FILLED" && s !== "ALLOCATED" && s !== "CONFIRMED" && s !== "CANCELLED" && s !== "CANCELED" && s !== "REJECTED";
@@ -16363,7 +17600,7 @@ var ContentScroll = styled10__default.default.div`
 `;
 var TabContainer = styled10__default.default.div`
   display: flex;
-  gap: 0;
+  gap: 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   margin-bottom: 0.75rem;
   overflow-x: auto;
@@ -16375,12 +17612,12 @@ var TabContainer = styled10__default.default.div`
 var Tab = styled10__default.default.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;
@@ -16393,12 +17630,11 @@ var Tab = styled10__default.default.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__default.default.span`
@@ -17117,17 +18353,17 @@ function PropertyBuy({
   videoUrl,
   toast
 }) {
-  const [sliderValue, setSliderValue] = React5.useState(0);
-  const [availableBalance, setAvailableBalance] = React5.useState(walletUsdcBalance ?? 0);
-  const [manualOrderAmount, setManualOrderAmount] = React5.useState(null);
-  const [ownedTokens, setOwnedTokens] = React5.useState(0);
-  const [displayedOwnedTokens, setDisplayedOwnedTokens] = React5.useState(0);
-  const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = React5.useState(false);
-  const [lastOrderQuantity, setLastOrderQuantity] = React5.useState(0);
-  const [orderPendingAllocation, setOrderPendingAllocation] = React5.useState(false);
-  const [orderPlacedSuccess, setOrderPlacedSuccess] = React5.useState(false);
-  const [lastOrderDetails, setLastOrderDetails] = React5.useState(null);
-  const [showOrderConfirmModal, setShowOrderConfirmModal] = React5.useState(false);
+  const [sliderValue, setSliderValue] = React9.useState(0);
+  const [availableBalance, setAvailableBalance] = React9.useState(walletUsdcBalance ?? 0);
+  const [manualOrderAmount, setManualOrderAmount] = React9.useState(null);
+  const [ownedTokens, setOwnedTokens] = React9.useState(0);
+  const [displayedOwnedTokens, setDisplayedOwnedTokens] = React9.useState(0);
+  const [ownedTokensJustUpdated, setOwnedTokensJustUpdated] = React9.useState(false);
+  const [lastOrderQuantity, setLastOrderQuantity] = React9.useState(0);
+  const [orderPendingAllocation, setOrderPendingAllocation] = React9.useState(false);
+  const [orderPlacedSuccess, setOrderPlacedSuccess] = React9.useState(false);
+  const [lastOrderDetails, setLastOrderDetails] = React9.useState(null);
+  const [showOrderConfirmModal, setShowOrderConfirmModal] = React9.useState(false);
   const tokenPrice = saleData?.tokenPrice ?? 250;
   const feeRate = (saleData?.feePercent ?? 0.5) / 100;
   const totalSold = saleData?.totalSold ?? 0;
@@ -17147,12 +18383,12 @@ function PropertyBuy({
   const orderTotal = tokenQuantity * tokenPrice + feeInUsd;
   const estExposure = (tokenQuantity / supplyToSell * 100).toFixed(4);
   const hasInsufficientFunds = orderTotal > availableBalance;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (walletUsdcBalance != null) {
       setAvailableBalance(walletUsdcBalance);
     }
   }, [walletUsdcBalance]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (walletPropertyTokenBalance != null) {
       setOwnedTokens(walletPropertyTokenBalance);
       setDisplayedOwnedTokens(walletPropertyTokenBalance);
@@ -17168,17 +18404,17 @@ function PropertyBuy({
     }
     setShowOrderConfirmModal(true);
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (purchaseStatus === "success" && orderPendingAllocation) {
       setOrderPendingAllocation(false);
       setOrderPlacedSuccess(true);
     }
   }, [purchaseStatus, orderPendingAllocation]);
-  const handlePlaceAnotherOrder = React5.useCallback(() => {
+  const handlePlaceAnotherOrder = React9.useCallback(() => {
     setOrderPlacedSuccess(false);
     setOrderPendingAllocation(false);
   }, []);
-  const sortedOrders = React5.useMemo(
+  const sortedOrders = React9.useMemo(
     () => [...recentOrders].sort((a, b) => b.timestamp - a.timestamp).slice(0, 7),
     [recentOrders]
   );
@@ -17748,7 +18984,7 @@ function PaymentPopup({
   userTokenHoldings,
   propertyName
 }) {
-  const [selectedPaymentMethod, setSelectedPaymentMethod] = React5.useState(
+  const [selectedPaymentMethod, setSelectedPaymentMethod] = React9.useState(
     "tokens"
   );
   if (!isOpen) return null;
@@ -17927,20 +19163,20 @@ function PaymentPopup({
 var payment_popup_default = PaymentPopup;
 var SUMMER_MONTHS = /* @__PURE__ */ new Set([11, 0, 1]);
 var OwnerBooking = ({ propertyName, token }) => {
-  const today = React5.useMemo(() => {
+  const today = React9.useMemo(() => {
     const base = /* @__PURE__ */ new Date();
     base.setHours(0, 0, 0, 0);
     return base;
   }, []);
-  const [currentYear, setCurrentYear] = React5.useState(today.getFullYear());
-  const [currentMonth, setCurrentMonth] = React5.useState(today.getMonth());
-  const [dateRanges, setDateRanges] = React5.useState([]);
-  const [selectedDates, setSelectedDates] = React5.useState([]);
-  const [hoverDate, setHoverDate] = React5.useState(null);
-  const [isDateSelectorOpen, setIsDateSelectorOpen] = React5.useState(false);
-  const [selectorYear, setSelectorYear] = React5.useState(today.getFullYear());
-  const [isPaymentPopupOpen, setIsPaymentPopupOpen] = React5.useState(false);
-  const dateSelectorRef = React5.useRef(null);
+  const [currentYear, setCurrentYear] = React9.useState(today.getFullYear());
+  const [currentMonth, setCurrentMonth] = React9.useState(today.getMonth());
+  const [dateRanges, setDateRanges] = React9.useState([]);
+  const [selectedDates, setSelectedDates] = React9.useState([]);
+  const [hoverDate, setHoverDate] = React9.useState(null);
+  const [isDateSelectorOpen, setIsDateSelectorOpen] = React9.useState(false);
+  const [selectorYear, setSelectorYear] = React9.useState(today.getFullYear());
+  const [isPaymentPopupOpen, setIsPaymentPopupOpen] = React9.useState(false);
+  const dateSelectorRef = React9.useRef(null);
   const tokenPrice = token.price ?? 700;
   const userTokenHoldings = 2.2;
   const MIN_NIGHTS = 3;
@@ -17950,25 +19186,25 @@ var OwnerBooking = ({ propertyName, token }) => {
     { bg: "rgba(230, 126, 34, 0.25)", border: "rgba(230, 126, 34, 0.6)" },
     { bg: "rgba(46, 204, 113, 0.25)", border: "rgba(46, 204, 113, 0.6)" }
   ];
-  const calculateTokensPerDayOwner = React5.useCallback(() => {
+  const calculateTokensPerDayOwner = React9.useCallback(() => {
     if (tokenPrice <= 0) return 0;
     const target = 650;
     const raw = target / tokenPrice;
     return Math.ceil(raw * 1e4) / 1e4;
   }, [tokenPrice]);
-  const calculateTokensPerDayMarket = React5.useCallback(() => {
+  const calculateTokensPerDayMarket = React9.useCallback(() => {
     if (tokenPrice <= 0) return 0;
     const target = 900;
     const raw = target / tokenPrice;
     return Math.ceil(raw * 1e4) / 1e4;
   }, [tokenPrice]);
   const qualifiesForOwnerRate = userTokenHoldings >= 0.1;
-  const getTokensPerDay = React5.useCallback(
+  const getTokensPerDay = React9.useCallback(
     () => calculateTokensPerDayOwner() ,
     [qualifiesForOwnerRate, calculateTokensPerDayOwner, calculateTokensPerDayMarket]
   );
   const getRateLabel = () => "Owner's Rate" ;
-  const selectionStats = React5.useMemo(() => {
+  const selectionStats = React9.useMemo(() => {
     if (selectedDates.length !== 2) return null;
     const [a, b] = selectedDates;
     const start = a < b ? a : b;
@@ -17979,10 +19215,10 @@ var OwnerBooking = ({ propertyName, token }) => {
     const usd = tokens * tokenPrice;
     return { nights, tokensPerDay, tokens, usd, start, end };
   }, [selectedDates, getTokensPerDay, tokenPrice]);
-  const totalNights = React5.useMemo(() => dateRanges.reduce((sum, r) => sum + r.nights, 0), [dateRanges]);
-  const totalTokens = React5.useMemo(() => dateRanges.reduce((sum, r) => sum + r.tokens, 0), [dateRanges]);
+  const totalNights = React9.useMemo(() => dateRanges.reduce((sum, r) => sum + r.nights, 0), [dateRanges]);
+  const totalTokens = React9.useMemo(() => dateRanges.reduce((sum, r) => sum + r.tokens, 0), [dateRanges]);
   const totalUSD = totalTokens * tokenPrice;
-  const generateCalendarDays = React5.useCallback(
+  const generateCalendarDays = React9.useCallback(
     (year, month) => {
       const first = new Date(year, month, 1);
       const last = new Date(year, month + 1, 0);
@@ -18011,11 +19247,11 @@ var OwnerBooking = ({ propertyName, token }) => {
     },
     [today]
   );
-  const calendarDays = React5.useMemo(
+  const calendarDays = React9.useMemo(
     () => generateCalendarDays(currentYear, currentMonth),
     [currentYear, currentMonth, generateCalendarDays]
   );
-  const isDateReserved = React5.useCallback(
+  const isDateReserved = React9.useCallback(
     (date) => dateRanges.some((r) => date >= r.arrival && date <= r.departure),
     [dateRanges]
   );
@@ -18109,14 +19345,14 @@ var OwnerBooking = ({ propertyName, token }) => {
     "December"
   ];
   const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const setMonthYear = React5.useCallback(
+  const setMonthYear = React9.useCallback(
     (month, year) => {
       setCurrentMonth(month);
       setCurrentYear(year);
     },
     [setCurrentMonth, setCurrentYear]
   );
-  const shiftMonth = React5.useCallback(
+  const shiftMonth = React9.useCallback(
     (direction) => {
       const delta = direction === "prev" ? -1 : 1;
       let newMonth = currentMonth + delta;
@@ -18133,7 +19369,7 @@ var OwnerBooking = ({ propertyName, token }) => {
     },
     [currentMonth, currentYear, setMonthYear]
   );
-  const jumpToNextAvailable = React5.useCallback(() => {
+  const jumpToNextAvailable = React9.useCallback(() => {
     for (let offset = 1; offset <= 12; offset++) {
       const candidateMonth = (currentMonth + offset) % 12;
       if (!SUMMER_MONTHS.has(candidateMonth)) continue;
@@ -18150,7 +19386,7 @@ var OwnerBooking = ({ propertyName, token }) => {
     setMonthYear(month, selectorYear);
     setIsDateSelectorOpen(false);
   };
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dateSelectorRef.current && !dateSelectorRef.current.contains(event.target)) {
         setIsDateSelectorOpen(false);
@@ -18583,8 +19819,8 @@ function PropertyValuation({
   offeringValuationValue,
   totalUnits
 }) {
-  const [hoveredSaleYear, setHoveredSaleYear] = React5.useState(null);
-  const gaugePosition = React5.useMemo(() => {
+  const [hoveredSaleYear, setHoveredSaleYear] = React9.useState(null);
+  const gaugePosition = React9.useMemo(() => {
     const under = valSummary?.undervaluedThreshold;
     const over = valSummary?.overvaluedThreshold;
     const price = tokenPriceValue;
@@ -18594,7 +19830,7 @@ function PropertyValuation({
     }
     return 50;
   }, [valSummary?.undervaluedThreshold, valSummary?.overvaluedThreshold, tokenPriceValue]);
-  const chartOptions = React5.useMemo(() => ({
+  const chartOptions = React9.useMemo(() => ({
     responsive: true,
     maintainAspectRatio: false,
     onHover: (_event, elements) => {
@@ -18637,7 +19873,7 @@ function PropertyValuation({
       }
     }
   }), []);
-  const chartData = React5.useMemo(() => ({
+  const chartData = React9.useMemo(() => ({
     labels: musgraveComparisonData.labels,
     datasets: musgraveComparisonData.datasets.map((dataset, index) => ({
       label: dataset.name,
@@ -18678,8 +19914,8 @@ function PropertyValuation({
       fill: false
     }))
   }), [hoveredSaleYear]);
-  const handleMarkerEnter = React5.useCallback((year) => setHoveredSaleYear(year), []);
-  const handleMarkerLeave = React5.useCallback(() => setHoveredSaleYear(null), []);
+  const handleMarkerEnter = React9.useCallback((year) => setHoveredSaleYear(year), []);
+  const handleMarkerLeave = React9.useCallback(() => setHoveredSaleYear(null), []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ValuationHeading, { children: "Valuation Model" }),
     /* @__PURE__ */ jsxRuntime.jsxs(LoafPricingSection, { children: [
@@ -19604,20 +20840,20 @@ function PropertyPhotoGallery({
   );
 }
 function GalleryContent({ galleryImages, startIndex, startWithVideo, title, subtitle, onClose, videoUrl }) {
-  const [currentIndex, setCurrentIndex] = React5.useState(() => clampIndex(startIndex, galleryImages.length));
-  const [activeHotspotId, setActiveHotspotId] = React5.useState(null);
-  const [showVideo, setShowVideo] = React5.useState(startWithVideo ?? false);
-  const sliderRef = React5.useRef(null);
-  const [isDragging, setIsDragging] = React5.useState(false);
-  const wasDraggingRef = React5.useRef(false);
-  const touchStartX = React5.useRef(null);
-  const touchStartY = React5.useRef(null);
-  const isSwiping = React5.useRef(false);
-  const progress = React5.useMemo(() => {
+  const [currentIndex, setCurrentIndex] = React9.useState(() => clampIndex(startIndex, galleryImages.length));
+  const [activeHotspotId, setActiveHotspotId] = React9.useState(null);
+  const [showVideo, setShowVideo] = React9.useState(startWithVideo ?? false);
+  const sliderRef = React9.useRef(null);
+  const [isDragging, setIsDragging] = React9.useState(false);
+  const wasDraggingRef = React9.useRef(false);
+  const touchStartX = React9.useRef(null);
+  const touchStartY = React9.useRef(null);
+  const isSwiping = React9.useRef(false);
+  const progress = React9.useMemo(() => {
     if (galleryImages.length <= 1) return 0;
     return currentIndex / (galleryImages.length - 1) * 100;
   }, [currentIndex, galleryImages.length]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     document.body.style.overflow = "hidden";
     document.body.style.touchAction = "none";
     return () => {
@@ -19625,7 +20861,7 @@ function GalleryContent({ galleryImages, startIndex, startWithVideo, title, subt
       document.body.style.touchAction = "";
     };
   }, []);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     const handleKey = (event) => {
       if (event.key === "Escape") onClose();
       if (event.key === "ArrowLeft") setCurrentIndex((i) => i === 0 ? galleryImages.length - 1 : i - 1);
@@ -20029,23 +21265,23 @@ function truncateHash(hash) {
 }
 var SWIPE_DISMISS_PX = 100;
 function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = React5.useState(false);
-  const [dragX, setDragX] = React5.useState(0);
-  const [dragging, setDragging] = React5.useState(false);
-  const [touched, setTouched] = React5.useState(false);
-  const timerRef = React5.useRef(null);
-  const dragStartRef = React5.useRef(null);
-  const dragXRef = React5.useRef(0);
-  const dismiss = React5.useCallback(() => {
+  const [exiting, setExiting] = React9.useState(false);
+  const [dragX, setDragX] = React9.useState(0);
+  const [dragging, setDragging] = React9.useState(false);
+  const [touched, setTouched] = React9.useState(false);
+  const timerRef = React9.useRef(null);
+  const dragStartRef = React9.useRef(null);
+  const dragXRef = React9.useRef(0);
+  const dismiss = React9.useCallback(() => {
     setExiting(true);
     setTimeout(() => onDismiss(toast.id), 280);
   }, [onDismiss, toast.id]);
-  const armAutoDismiss = React5.useCallback(() => {
+  const armAutoDismiss = React9.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     const duration2 = toast.duration ?? 6e3;
     if (duration2 > 0) timerRef.current = setTimeout(dismiss, duration2);
   }, [dismiss, toast.duration]);
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     armAutoDismiss();
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -20125,10 +21361,10 @@ function ToastItem({ toast, onDismiss }) {
     }
   );
 }
-var ToastContext = React5.createContext(null);
+var ToastContext = React9.createContext(null);
 function ToastProvider({ children, maxVisible }) {
-  const [toasts, setToasts] = React5.useState([]);
-  const addToast = React5.useCallback((data) => {
+  const [toasts, setToasts] = React9.useState([]);
+  const addToast = React9.useCallback((data) => {
     const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
     setToasts((prev) => {
       const next = [...prev, { ...data, id }];
@@ -20136,10 +21372,10 @@ function ToastProvider({ children, maxVisible }) {
     });
     return id;
   }, [maxVisible]);
-  const update = React5.useCallback((id, patch) => {
+  const update = React9.useCallback((id, patch) => {
     setToasts((prev) => prev.map((t) => t.id === id ? { ...t, ...patch } : t));
   }, []);
-  const dismiss = React5.useCallback((id) => {
+  const dismiss = React9.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast: addToast, update, dismiss }, children: [
@@ -20148,15 +21384,15 @@ function ToastProvider({ children, maxVisible }) {
   ] });
 }
 function useToast() {
-  const ctx = React5.useContext(ToastContext);
+  const ctx = React9.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used within a ToastProvider");
   return ctx;
 }
 var INTERVALS = [1e3, 2e3, 4e3, 5e3, 7e3, 1e4, 12e3];
 function useAdaptivePolling({ enabled, onPoll }) {
-  const onPollRef = React5.useRef(onPoll);
+  const onPollRef = React9.useRef(onPoll);
   onPollRef.current = onPoll;
-  React5.useEffect(() => {
+  React9.useEffect(() => {
     if (!enabled) return;
     let cancelled = false;
     let timeoutId = null;
@@ -20329,7 +21565,7 @@ var OpenMailButton = styled10__default.default.a`
   }
 `;
 var ContactPopup = ({ onClose }) => {
-  const [copied, setCopied] = React5.useState(false);
+  const [copied, setCopied] = React9.useState(false);
   const email = "admin@loafmarkets.com";
   const handleCopy = async () => {
     try {
@@ -20538,7 +21774,7 @@ var DisclaimerText = styled10__default.default.p`
   max-width: 100%;
 `;
 var SiteFooter = () => {
-  const [showContactPopup, setShowContactPopup] = React5.useState(false);
+  const [showContactPopup, setShowContactPopup] = React9.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(FooterContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(FooterContent, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(FooterTop, { children: [
@@ -20627,10 +21863,10 @@ function extractSparkline(candles, maxPoints = 20) {
   }
   return points;
 }
-var SparklineChart = React5__namespace.default.memo(function SparklineChart2({ data, width, height, positive }) {
-  const [hoverX, setHoverX] = React5.useState(null);
-  const svgRef = React5.useRef(null);
-  const { linePath, fillPath, points } = React5.useMemo(() => {
+var SparklineChart = React9__namespace.default.memo(function SparklineChart2({ data, width, height, positive }) {
+  const [hoverX, setHoverX] = React9.useState(null);
+  const svgRef = React9.useRef(null);
+  const { linePath, fillPath, points } = React9.useMemo(() => {
     const mn = Math.min(...data);
     const mx = Math.max(...data);
     const range = mx - mn || 1;
@@ -20643,7 +21879,7 @@ var SparklineChart = React5__namespace.default.memo(function SparklineChart2({ d
     const fill = `${line} L${width},${height} L0,${height} Z`;
     return { linePath: line, fillPath: fill, points: pts };
   }, [data, width, height]);
-  const interpolated = React5.useMemo(() => {
+  const interpolated = React9.useMemo(() => {
     if (hoverX == null || points.length < 2) return null;
     const stepX = width / (data.length - 1);
     const rawIdx = hoverX / stepX;
@@ -20656,14 +21892,14 @@ var SparklineChart = React5__namespace.default.memo(function SparklineChart2({ d
       price: lerp(data[i0], data[i1], t)
     };
   }, [hoverX, points, data, width]);
-  const handleMouseMove = React5.useCallback((e) => {
+  const handleMouseMove = React9.useCallback((e) => {
     const svg = svgRef.current;
     if (!svg) return;
     const rect = svg.getBoundingClientRect();
     const x = Math.max(0, Math.min(width, e.clientX - rect.left));
     setHoverX(x);
   }, [width]);
-  const handleMouseLeave = React5.useCallback(() => setHoverX(null), []);
+  const handleMouseLeave = React9.useCallback(() => setHoverX(null), []);
   if (data.length < 2) return null;
   const color = positive ? "#00C076" : "#FF5757";
   const gradId = `spark-grad-${positive ? "up" : "dn"}`;
@@ -20781,6 +22017,7 @@ exports.PropertyPhotoGallery = PropertyPhotoGallery;
 exports.PropertySubheader = PropertySubheader;
 exports.PropertyTour = PropertyTour;
 exports.PropertyValuation = PropertyValuation;
+exports.SentimentBar = SentimentBar;
 exports.SiteFooter = SiteFooter;
 exports.Skeleton = Skeleton;
 exports.SlideDigit = SlideDigit;
@@ -20789,10 +22026,13 @@ exports.ToastProvider = ToastProvider;
 exports.TradeConfirmationModal = TradeConfirmationModal;
 exports.TradingSlider = TradingSlider;
 exports.YourOrders = YourOrders;
+exports.__resetDismissedBreaking = __resetDismissedBreaking;
 exports.badgeVariants = badgeVariants;
 exports.buttonVariants = buttonVariants;
 exports.extractSparkline = extractSparkline;
+exports.formatAge = formatAge;
 exports.hasPendingActivity = hasPendingActivity;
+exports.rowAgeLabel = rowAgeLabel;
 exports.useAdaptivePolling = useAdaptivePolling;
 exports.useToast = useToast;
 //# sourceMappingURL=index.js.map