@loafmarkets/ui 0.1.344 → 0.1.345

package/dist/index.js

@@ -1716,17 +1716,21 @@ function getTradeKey(trade, fallbackIndex) {
   if (trade.time != null) return `t-${trade.time}-${trade.type}-${trade.price}-${trade.amount}`;
   return `idx-${fallbackIndex}-${trade.type}-${trade.price}-${trade.amount}`;
 }
-function useAmountChangeFlash(ref, amount, side) {
-  const prevAmountRef = React5__namespace.useRef(amount);
+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" }
+  );
+}
+function useAmountChangeFlash(ref, amount, side, flashOnMount) {
+  const prevAmountRef = React5__namespace.useRef(flashOnMount ? null : amount);
   React5__namespace.useEffect(() => {
     const prev = prevAmountRef.current;
     const node = ref.current;
-    if (prev !== amount && node && typeof node.animate === "function") {
-      const color = side === "bid" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
-      node.animate(
-        [{ backgroundColor: color }, { backgroundColor: "transparent" }],
-        { duration: FLASH_DURATION_MS, easing: "ease-out" }
-      );
+    if (node && prev !== amount) {
+      flashElement(node, side);
     }
     prevAmountRef.current = amount;
   }, [amount, ref, side]);
@@ -1830,11 +1834,12 @@ function DepthRow({
   precision,
   amountPrecision,
   hasUserOrder,
-  onPriceClick
+  onPriceClick,
+  flashOnMount
 }) {
   const isAsk = side === "ask";
   const rowRef = React5__namespace.useRef(null);
-  useAmountChangeFlash(rowRef, amount, side);
+  useAmountChangeFlash(rowRef, amount, side, flashOnMount);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1846,11 +1851,15 @@ function DepthRow({
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
-              "absolute inset-y-0 right-0",
-              isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
-            ),
-            style: { width: `${clamp3(depthPct, 0, 100)}%`, transition: "width 300ms ease-out" }
+            className: cn(isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"),
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              width: `${clamp3(depthPct, 0, 100)}%`,
+              transition: "width 300ms ease-out"
+            }
           }
         ),
         hasUserOrder ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1871,7 +1880,7 @@ function DepthRow({
   );
 }
 var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
-var LEVEL_ROWS_VISIBLE = 5;
+var LEVEL_ROWS_VISIBLE = 8;
 var DEPTH_ROW_HEIGHT_PX = 28;
 var COMPACT_ROWS_VISIBLE = 5;
 var COMPACT_ROW_HEIGHT_PX = 30;
@@ -1966,6 +1975,32 @@ 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 current = new Set(askVisibleLevels.map((l) => l.price));
+      const prev = prevAskPricesRef.current;
+      if (!prev) return /* @__PURE__ */ new Set();
+      const added = /* @__PURE__ */ new Set();
+      for (const p of current) {
+        if (!prev.has(p)) added.add(p);
+      }
+      return added;
+    }, [askVisibleLevels]);
+    const newBidPrices = React5__namespace.useMemo(() => {
+      const current = new Set(bidVisibleLevels.map((l) => l.price));
+      const prev = prevBidPricesRef.current;
+      if (!prev) return /* @__PURE__ */ new Set();
+      const added = /* @__PURE__ */ new Set();
+      for (const p of current) {
+        if (!prev.has(p)) added.add(p);
+      }
+      return added;
+    }, [bidVisibleLevels]);
+    React5__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 tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
@@ -2000,7 +2035,9 @@ var Orderbook = React5__namespace.forwardRef(
       onPriceClick,
       levelCount: effectiveLevels,
       compactLevelCount: effectiveCompactLevels,
-      fillHeight
+      fillHeight,
+      newAskPrices,
+      newBidPrices
     };
     return /* @__PURE__ */ jsxRuntime.jsx(
       Card,
@@ -2072,7 +2109,9 @@ function DesktopOrderbookLayout({
   onPriceClick,
   levelCount: effectiveLevels,
   compactLevelCount: _compactLevelCount,
-  fillHeight
+  fillHeight,
+  newAskPrices,
+  newBidPrices
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
@@ -2192,7 +2231,8 @@ function DesktopOrderbookLayout({
                 precision,
                 amountPrecision,
                 hasUserOrder: userAskPrices.has(l.price),
-                onPriceClick
+                onPriceClick,
+                flashOnMount: newAskPrices.has(l.price)
               },
               `ask-${l.price}`
             ))
@@ -2229,7 +2269,8 @@ function DesktopOrderbookLayout({
                 precision,
                 amountPrecision,
                 hasUserOrder: userBidPrices.has(l.price),
-                onPriceClick
+                onPriceClick,
+                flashOnMount: newBidPrices.has(l.price)
               },
               `bid-${l.price}`
             ))
@@ -2267,7 +2308,9 @@ function MobileOrderbookLayout({
   tradeExplorerUrl,
   onPriceClick,
   levelCount: _levelCount,
-  compactLevelCount: effectiveCompactLevels
+  compactLevelCount: effectiveCompactLevels,
+  newAskPrices,
+  newBidPrices
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -2347,7 +2390,8 @@ function MobileOrderbookLayout({
           precision,
           amountPrecision,
           hasUserOrder: userAskPrices.has(l.price),
-          onPriceClick
+          onPriceClick,
+          flashOnMount: newAskPrices.has(l.price)
         },
         `mobile-ask-${l.price}`
       )) }),
@@ -2393,7 +2437,8 @@ function MobileOrderbookLayout({
           precision,
           amountPrecision,
           hasUserOrder: userBidPrices.has(l.price),
-          onPriceClick
+          onPriceClick,
+          flashOnMount: newBidPrices.has(l.price)
         },
         `mobile-bid-${l.price}`
       )) })
@@ -2437,11 +2482,12 @@ function MobileDepthRow({
   precision,
   amountPrecision,
   hasUserOrder,
-  onPriceClick
+  onPriceClick,
+  flashOnMount
 }) {
   const isAsk = side === "ask";
   const rowRef = React5__namespace.useRef(null);
-  useAmountChangeFlash(rowRef, amount, side);
+  useAmountChangeFlash(rowRef, amount, side, flashOnMount);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2486,7 +2532,7 @@ function MobileDepthRow({
             style: {
               position: "absolute",
               top: 0,
-              right: 0,
+              left: 0,
               bottom: 0,
               width: `${clamp3(depthPct, 0, 100)}%`,
               backgroundColor: isAsk ? "#f6465d" : "#0ecb81",
@@ -2598,7 +2644,8 @@ var PropertyTour = React5__namespace.forwardRef(
   }
 );
 PropertyTour.displayName = "PropertyTour";
-var ITEMS_PER_PAGE = 6;
+var ITEMS_PER_PAGE = 5;
+var ITEMS_PER_PAGE_MOBILE = 5;
 var ensureAnimationsInjected = () => {
   if (typeof document === "undefined") return;
   if (document.getElementById("property-news-updates-animations")) return;
@@ -2854,6 +2901,15 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
     const purchaseItems = purchasesProp ?? [];
     const [page, setPage] = React5__namespace.useState(0);
     const [selectedItem, setSelectedItem] = React5__namespace.useState(null);
+    const [isMobile, setIsMobile] = React5__namespace.useState(
+      () => typeof window !== "undefined" && window.innerWidth <= 768
+    );
+    React5__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(() => {
       ensureAnimationsInjected();
     }, []);
@@ -2874,10 +2930,10 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
       [hasItems, items, homeTab]
     );
     const homeTotalPages = React5__namespace.useMemo(
-      () => Math.max(1, Math.ceil(homeFilteredItems.length / ITEMS_PER_PAGE)),
-      [homeFilteredItems.length]
+      () => Math.max(1, Math.ceil(homeFilteredItems.length / homePageSize)),
+      [homeFilteredItems.length, homePageSize]
     );
-    const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
+    const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * homePageSize, (homePage + 1) * homePageSize);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -2888,18 +2944,18 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
         ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", 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: [
-              isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "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" }) }),
+              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: [
-                /* @__PURE__ */ jsxRuntime.jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", style: { margin: 0 }, children: resolvedHeading }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: isHomeVariant ? isMobile ? "0.85rem" : "1rem" : "1.125rem", fontWeight: 600, color: "#fff", lineHeight: 1.2 }, children: resolvedHeading }),
                 subheading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
               ] })
             ] }),
-            isHomeVariant && viewAllHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: viewAllHref, style: { color: "var(--color-accent, #f0b90b)", fontWeight: 500, fontSize: "0.8rem", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.25rem" }, children: [
+            isHomeVariant && viewAllHref ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: viewAllHref, style: { color: "var(--color-accent, #f0b90b)", fontWeight: 500, fontSize: "0.75rem", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.25rem", height: "24px" }, children: [
               viewAllLabel,
-              /* @__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: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) })
             ] }) : !isHomeVariant && !isPurchaseVariant ? connectionStatus === "connecting" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center font-semibold uppercase", style: { gap: "0.35rem", fontSize: "0.8rem", letterSpacing: "0.15em", color: "#f97316" }, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: "10px", height: "10px", borderRadius: "50%", border: "2px solid rgba(249,115,22,0.3)", borderTopColor: "#f97316", animation: "propertyNewsSpin 0.8s linear infinite" } }),
               "CONNECTING"
@@ -2908,7 +2964,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "LIVE"
             ] }) : null
           ] }),
-          isHomeVariant && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: "1.5rem", marginTop: "0.75rem", marginBottom: "0.5rem", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", paddingBottom: "0.5rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          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(
             "button",
             {
               type: "button",
@@ -2932,7 +2988,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
+              className: cn("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;
@@ -2974,12 +3030,12 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                       backgroundColor: "transparent",
                       border: "none",
                       cursor: "pointer",
-                      padding: "0.75rem 0",
+                      padding: isMobile ? "0.55rem 0" : "0.75rem 0",
                       borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
                       display: "flex",
                       justifyContent: "space-between",
                       alignItems: "flex-start",
-                      gap: "0.5rem",
+                      gap: isMobile ? "0.25rem" : "0.5rem",
                       color: "inherit",
                       transition: "background-color 0.15s"
                     },
@@ -2995,12 +3051,12 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "0.95rem", fontWeight: 500, marginBottom: "0.35rem", color: "#f8f9fa", lineHeight: 1.45, transition: "color 0.15s" }, children: item.title }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: formatDateShort(item.date) }),
-                          item.source && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.1rem 0.4rem", borderRadius: "3px", fontSize: "0.62rem", fontWeight: 500, backgroundColor: "rgba(255,255,255,0.07)", color: "#848e9c", whiteSpace: "nowrap" }, children: item.source }),
-                          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { padding: "0.15rem 0.4rem", borderRadius: "2px", fontSize: "0.65rem", fontWeight: 500, backgroundColor: isProperty ? "rgba(14,203,129,0.1)" : "rgba(240,185,11,0.1)", color: isProperty ? "#0ecb81" : "#f0b90b" }, children: isProperty ? "Property Update" : "Market News" }),
-                          sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 600, color: sentimentInfo.color }, 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.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 }),
+                          /* @__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" : "#f0b90b" }, 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.arrow ? `${sentimentInfo.arrow} ` : "",
                             sentimentInfo.label
                           ] })
@@ -4565,6 +4621,9 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     hideMakeOfferButton = false,
     statusBadge,
     isLoading = false,
+    heroLabel,
+    heroSidePanel,
+    glowInfoCard,
     ...props
   }, ref) => {
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
@@ -4603,8 +4662,9 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
         statusBadge.variant === "live" ? /* @__PURE__ */ jsxRuntime.jsx(PulsingDot, {}) : null,
         statusBadge.label
       ] }) : null,
+      heroLabel ? /* @__PURE__ */ jsxRuntime.jsx(HeroTopLabel, { children: heroLabel }) : null,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-center", style: { background: "linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%)" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full max-w-[1800px] flex-wrap items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardLayout, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { $glow: glowInfoCard, children: /* @__PURE__ */ jsxRuntime.jsxs(CardLayout, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { src: imageUrl, alt: imageAlt ?? name }),
           /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(NameGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
@@ -4629,7 +4689,8 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
               ] }) : null
             ] })
           ] }) })
-        ] }) }),
+        ] }) }) }),
+        heroSidePanel,
         /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -4793,6 +4854,14 @@ var CardContent2 = styled9__default.default.div`
   min-width: 0;
   flex: 1;
 `;
+var infoCardGlow = styled9.keyframes`
+  0%, 100% {
+    box-shadow: 0 0 20px 4px rgba(230,185,50,0.3), 0 0 60px 15px rgba(230,185,50,0.15), 0 0 120px 40px rgba(210,150,30,0.08), inset 0 0 40px 5px rgba(230,185,50,0.04);
+  }
+  50% {
+    box-shadow: 0 0 25px 6px rgba(230,185,50,0.4), 0 0 80px 20px rgba(230,185,50,0.2), 0 0 150px 50px rgba(210,150,30,0.1), inset 0 0 60px 8px rgba(230,185,50,0.06);
+  }
+`;
 var InfoCard = styled9__default.default.div`
   border-radius: 12px;
   background: rgba(0, 0, 0, 0.15);
@@ -4800,8 +4869,9 @@ var InfoCard = styled9__default.default.div`
   color: #fff;
   backdrop-filter: blur(6px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  border: 1px solid ${(p) => p.$glow ? "rgba(230, 200, 126, 0.35)" : "rgba(255, 255, 255, 0.12)"};
   min-width: 0;
+  ${(p) => p.$glow && styled9.css`animation: ${infoCardGlow} 3s ease-in-out infinite;`}
 
   @media (max-width: 768px) {
     padding: 0.85rem 1.15rem;
@@ -4881,6 +4951,17 @@ var AddressText = styled9__default.default.p`
     font-size: 0.9rem;
   }
 `;
+var HeroTopLabel = styled9__default.default.div`
+  position: absolute;
+  top: 2rem;
+  left: 2.5rem;
+  z-index: 10;
+
+  @media (max-width: 768px) {
+    top: 1.25rem;
+    left: 1.25rem;
+  }
+`;
 var PriceChangeRow = styled9__default.default.span`
   display: inline-flex;
   align-items: center;
@@ -4968,8 +5049,10 @@ var Header = ({
   onWalletNavigate: _onWalletNavigate,
   onSettingsClick,
   showTradeTab = true,
-  portfolioSummary
+  portfolioSummary,
+  transparentOnTop = false
 }) => {
+  const [headerBgOpacity, setHeaderBgOpacity] = React5.useState(transparentOnTop ? 0 : 1);
   const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
   const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
@@ -5025,6 +5108,19 @@ var Header = ({
       document.documentElement.style.setProperty("--telegram-safe-top", "59px");
     }
   }, []);
+  React5.useEffect(() => {
+    if (!transparentOnTop) {
+      setHeaderBgOpacity(1);
+      return;
+    }
+    const onScroll = () => {
+      const opacity = Math.min(window.scrollY / 200, 1);
+      setHeaderBgOpacity(opacity);
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [transparentOnTop]);
   React5.useEffect(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
@@ -5131,7 +5227,9 @@ var Header = ({
   };
   const rawDisplayName = currentUser?.displayName;
   const normalizedDisplayName = typeof rawDisplayName === "string" ? rawDisplayName.trim() : void 0;
-  const userPrimaryLabel = normalizedDisplayName || currentUser?.email || currentUser?.walletAddress || "User";
+  const rawWallet = currentUser?.walletAddress;
+  const shortWallet = rawWallet && rawWallet.length > 10 ? `${rawWallet.slice(0, 4)}\u2026${rawWallet.slice(-4)}` : rawWallet;
+  const userPrimaryLabel = normalizedDisplayName || currentUser?.email || shortWallet || "User";
   const resolveAuthReturnUrl = () => {
     if (getAuthReturnUrl) {
       return getAuthReturnUrl();
@@ -5212,7 +5310,7 @@ var Header = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SafeAreaCover, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5321,6 +5419,15 @@ var Header = ({
                     children: "API"
                   }
                 ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NavLink,
+                  {
+                    href: "https://docs.loafmarkets.com/en/",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: "Docs"
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
@@ -5342,10 +5449,6 @@ var Header = ({
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mobile-menu-content", children: [
             /* @__PURE__ */ jsxRuntime.jsx(MobileMenuHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(MobileMenuClose, { onClick: () => setIsMobileMenuOpen(false), "aria-label": "Close menu", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41 17.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" }) }) }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SearchBar, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z" }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Search..." })
-            ] }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
@@ -5368,6 +5471,7 @@ var Header = ({
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLearnPath), children: "Learn" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedAboutPath), children: "About" }),
             /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedApiPath), children: "API" }),
+            /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => window.open("https://docs.loafmarkets.com/en/", "_blank", "noopener,noreferrer"), children: "Docs" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
             /* @__PURE__ */ jsxRuntime.jsx(
               MobileNavItem,
@@ -5421,6 +5525,14 @@ var Header = ({
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Locked Balance" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#B0B0B8" }, children: [
+                "$",
+                fmtInline(portfolioSummary.frozen ?? 0)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
             /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
               /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPos, $negative: !isPLPos, children: [
@@ -5464,7 +5576,7 @@ var Header = ({
               $isOpen: isUserMenuOpen,
               className: "user-menu",
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "0.95rem" }, children: userPrimaryLabel }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: userPrimaryLabel }) }),
                 /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5H7z" }) })
               ]
             }
@@ -5568,6 +5680,14 @@ var Header = ({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Locked Balance" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#B0B0B8" }, children: [
+            "$",
+            fmt(portfolioSummary.frozen ?? 0)
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
         /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
           /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
@@ -5620,15 +5740,15 @@ var MobileOnlyButton = styled9__default.default.button.attrs({ type: "button" })
   display: none;
   background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.2)" : "#f0b90b"};
   color: ${(props) => props.$isOpen ? "#ffffff" : "#0b0e11"};
-  font-size: 24px;
+  font-size: 18px;
   font-weight: bold;
-  width: 44px;
-  height: 44px;
+  width: 34px;
+  height: 34px;
   justify-content: center;
   align-items: center;
-  margin-left: 0.75rem;
+  margin-left: 0.5rem;
   z-index: 1100;
-  border-radius: 8px;
+  border-radius: 6px;
   border: ${(props) => props.$isOpen ? "1px solid #f0b90b" : "none"};
   line-height: 1;
   padding: 0;
@@ -5655,8 +5775,9 @@ var HeaderContainer = styled9__default.default.header`
      still get the horizontal padding — only the top falls back to 0 */
   padding: 0 2rem;
   padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
-  background-color: #0d1117;
-  border-bottom: 1px solid #232a32;
+  background-color: rgba(13, 17, 23, ${({ $bgOpacity }) => $bgOpacity ?? 1});
+  border-bottom: 1px solid rgba(35, 42, 50, ${({ $bgOpacity }) => $bgOpacity ?? 1});
+  transition: background-color 0.15s ease, border-bottom-color 0.15s ease;
   position: fixed;
   top: 0;
   left: 0;
@@ -5677,11 +5798,11 @@ var HeaderContainer = styled9__default.default.header`
     min-height: 46px;
     padding: 0 0.75rem;
     border-radius: 12px;
-    background-color: rgba(13, 17, 23, 0.92);
-    backdrop-filter: blur(12px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+    background-color: rgba(13, 17, 23, ${({ $bgOpacity }) => Math.max(($bgOpacity ?? 1) * 0.92, 0)});
+    backdrop-filter: blur(${({ $bgOpacity }) => Math.round(($bgOpacity ?? 1) * 12)}px);
+    border: 1px solid rgba(255, 255, 255, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.08});
+    border-bottom: 1px solid rgba(255, 255, 255, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.08});
+    box-shadow: 0 4px 20px rgba(0, 0, 0, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.3});
   }
 `;
 var HeaderSpacer = styled9__default.default.div`
@@ -5903,6 +6024,11 @@ var UserButton = styled9__default.default.button.attrs({ type: "button" })`
     transition: transform 0.2s ease;
     transform: ${(props) => props.$isOpen ? "rotate(180deg)" : "rotate(0)"};
   }
+
+  @media (max-width: 768px) {
+    font-size: 11px;
+    padding: 0 4px;
+  }
 `;
 var DropdownMenu = styled9__default.default.div`
   position: absolute;
@@ -5972,42 +6098,6 @@ var MobileMenuClose = styled9__default.default.button.attrs({ type: "button" })`
   align-items: center;
   justify-content: center;
 `;
-var SearchBar = styled9__default.default.div`
-  display: flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.03);
-  border-radius: 6px;
-  padding: 10px 14px;
-  margin: 16px 20px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  transition: all 0.2s ease;
-
-  &:focus-within {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(240, 185, 11, 0.3);
-  }
-
-  svg {
-    color: rgba(240, 185, 11, 0.5);
-    margin-right: 10px;
-    width: 16px;
-    height: 16px;
-  }
-
-  input {
-    background: none;
-    border: none;
-    color: #ffffff;
-    font-size: 14px;
-    width: 100%;
-    outline: none;
-    height: 20px;
-
-    &::placeholder {
-      color: rgba(255, 255, 255, 0.4);
-    }
-  }
-`;
 var MobileNavItem = styled9__default.default.div`
   display: flex;
   align-items: center;
@@ -6049,8 +6139,10 @@ var PortfolioEyeButton = styled9__default.default.button`
     color: #D4AF37;
   }
 
-  @media (max-width: 1024px) {
-    display: none;
+  @media (max-width: 768px) {
+    margin-left: 2px;
+    margin-right: 4px;
+    padding: 4px;
   }
 `;
 var DepositButton = styled9__default.default.button`
@@ -6083,7 +6175,7 @@ var PortfolioBarContainer = styled9__default.default.div`
   top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
   left: 0;
   right: 0;
-  z-index: 999;
+  z-index: 1000;
   display: none;
   justify-content: flex-end;
   align-items: flex-start;
@@ -6149,9 +6241,9 @@ var PortfolioBarPill = styled9__default.default.div`
   }
 
   @media (max-width: 768px) {
-    gap: 0.75rem;
-    padding: 0.4rem 1rem;
-    border-radius: 0 0 16px 16px;
+    gap: 0.5rem;
+    padding: 0.3rem 0.75rem;
+    border-radius: 0 0 12px 12px;
   }
 `;
 var PortfolioBarArrow = styled9__default.default.div`
@@ -6189,12 +6281,20 @@ var PBMetricLabel = styled9__default.default.span`
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 500;
+
+  @media (max-width: 768px) {
+    font-size: 0.45rem;
+  }
 `;
 var PBMetricValue = styled9__default.default.span`
   font-size: 0.75rem;
   font-weight: 600;
   color: ${(p) => p.$positive ? "#0ecb81" : p.$negative ? "#f6465d" : "#eaecef"};
   font-variant-numeric: tabular-nums;
+
+  @media (max-width: 768px) {
+    font-size: 0.65rem;
+  }
 `;
 var PBDot = styled9__default.default.div`
   width: 3px;
@@ -6208,6 +6308,10 @@ var PBOperator = styled9__default.default.span`
   font-weight: 500;
   color: rgba(255, 255, 255, 0.35);
   flex-shrink: 0;
+
+  @media (max-width: 768px) {
+    font-size: 0.55rem;
+  }
 `;
 var PropertySubheader = React5__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
@@ -6736,8 +6840,8 @@ var LoginPopup = ({
         /* @__PURE__ */ jsxRuntime.jsxs(Annotation, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) }),
           /* @__PURE__ */ jsxRuntime.jsxs(AnnotationText, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Self-custodied" }),
-            "We never have ownership of your assets. All units are self-custodied"
+            /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Self custodial" }),
+            "We never have ownership of your assets. All units are self custodial"
           ] })
         ] })
       ] })
@@ -8618,6 +8722,7 @@ function PropertyOverview({
   location,
   midPrice,
   onTradeClick,
+  onDocumentsClick,
   onPhotosClick,
   description: descriptionProp,
   tradeButtonLabel = "Trade",
@@ -8639,7 +8744,6 @@ function PropertyOverview({
   ticker,
   contractAddress,
   chain = "Base (Ethereum L2)",
-  percentageTokenized,
   volume24h,
   openOrdersValue,
   holderCount,
@@ -8688,7 +8792,7 @@ function PropertyOverview({
     { label: "On-Chain Address", value: contractAddress ? truncateAddress(contractAddress) : "\u2014", mono: true, link: contractAddress ? `https://basescan.org/address/${contractAddress}` : void 0, copyValue: contractAddress },
     { label: "Token Ticker", value: ticker ?? "\u2014" },
     { label: "Total Circulating Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued?.toLocaleString() ?? "\u2014" },
-    { label: "Percentage Tokenized", value: percentageTokenized != null ? `${percentageTokenized}%` : "\u2014" },
+    { label: "Legal Structuring", value: "See Documents", docLink: true },
     { label: "Property Type", value: resolvedPropertyType ?? "\u2014" },
     { label: "Location", value: location || "\u2014" }
   ];
@@ -8738,7 +8842,11 @@ function PropertyOverview({
           tokenDetailsItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(TokenDetailLabel, { children: item.label }),
             /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailValue, { $mono: !!item.mono, children: [
-              item.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
+              "docLink" in item && item.docLink ? /* @__PURE__ */ jsxRuntime.jsxs(DocLinkBtn, { onClick: onDocumentsClick, children: [
+                item.value,
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 9L9 1M9 1H4M9 1V6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              ] }) : item.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
               item.copyValue && /* @__PURE__ */ jsxRuntime.jsx(
                 CopyBtn,
                 {
@@ -9000,7 +9108,10 @@ function PropertyOverview({
         /* @__PURE__ */ jsxRuntime.jsxs(SecurityCol, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(SecurityLabel, { children: "Legal Structuring" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SecurityValue, { children: "Baker McKenzie" })
+            /* @__PURE__ */ jsxRuntime.jsx(SecurityValue, { children: /* @__PURE__ */ jsxRuntime.jsxs(DocLinkBtn, { onClick: onDocumentsClick, children: [
+              "See Documents ",
+              /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 9L9 1M9 1H4M9 1V6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            ] }) })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(SecurityLabel, { children: "Bankruptcy Remote" }),
@@ -9374,6 +9485,20 @@ var CopyBtn = styled9__default.default.button`
   transition: color 0.15s;
   &:hover { color: rgba(255,255,255,0.7); }
 `;
+var DocLinkBtn = styled9__default.default.button`
+  background: none;
+  border: none;
+  color: #D4AF37;
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  transition: opacity 0.15s;
+  &:hover { opacity: 0.7; }
+`;
 var ChainLogos = styled9__default.default.span`
   display: inline-flex;
   align-items: center;
@@ -9711,12 +9836,13 @@ var SecurityValue = styled9__default.default.span`
 `;
 var SecurityDocLink = styled9__default.default.a`
   font-size: 0.82rem;
-  color: rgba(255,255,255,0.5);
+  color: #D4AF37;
+  font-weight: 600;
   text-decoration: none;
   cursor: pointer;
-  transition: color 0.15s;
+  transition: opacity 0.15s;
   &:hover {
-    color: rgba(212,175,55,0.9);
+    opacity: 0.7;
   }
 `;
 var DividendHistoryBtn = styled9__default.default.button`
@@ -10687,7 +10813,24 @@ var fallbackDocs = [
   { href: "/documents/musgrave-risk-disclosure.pdf", label: "Risk Disclosure Statement" },
   { href: "/documents/musgrave-building-inspection.pdf", label: "Building & Pest Inspection Report" }
 ];
-function PropertyDocuments({ documentsData }) {
+function PropertyDocuments({ documentsData, highlightDocument, onClearHighlight }) {
+  const highlightRef = React5.useRef(null);
+  React5.useRef(null);
+  React5.useEffect(() => {
+    if (highlightDocument && highlightRef.current) {
+      highlightRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [highlightDocument]);
+  React5.useEffect(() => {
+    if (!highlightDocument || !onClearHighlight) return;
+    const handler = (e) => {
+      if (highlightRef.current && !highlightRef.current.contains(e.target)) {
+        onClearHighlight();
+      }
+    };
+    document.addEventListener("click", handler, true);
+    return () => document.removeEventListener("click", handler, true);
+  }, [highlightDocument, onClearHighlight]);
   const backendDocuments = Array.isArray(documentsData?.documents) ? documentsData.documents : null;
   const hasBackendDocuments = !!backendDocuments?.length;
   const documents = hasBackendDocuments ? backendDocuments : fallbackDocs.map((doc) => ({
@@ -10698,14 +10841,23 @@ function PropertyDocuments({ documentsData }) {
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { children: "Investment Documents" }),
     /* @__PURE__ */ jsxRuntime.jsx(DocList, { children: documents.map(({ documentUrl, title }) => {
       const isAvailable = Boolean(documentUrl);
-      return /* @__PURE__ */ jsxRuntime.jsx(DocItem, { children: hasBackendDocuments && isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(DocLink, { href: documentUrl, target: "_blank", rel: "noopener noreferrer", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
-        title
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DocItemDisabled, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
-        title,
-        /* @__PURE__ */ jsxRuntime.jsx(ComingSoonBadge, { children: "Coming Soon" })
-      ] }) }, `${title}-${documentUrl ?? "pending"}`);
+      const isHighlighted = highlightDocument != null && title.toLowerCase().includes(highlightDocument.toLowerCase());
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DocItem,
+        {
+          ref: isHighlighted ? highlightRef : void 0,
+          $highlighted: isHighlighted,
+          children: hasBackendDocuments && isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(DocLink, { href: documentUrl, target: "_blank", rel: "noopener noreferrer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
+            title
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DocItemDisabled, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
+            title,
+            /* @__PURE__ */ jsxRuntime.jsx(ComingSoonBadge, { children: "Coming Soon" })
+          ] })
+        },
+        `${title}-${documentUrl ?? "pending"}`
+      );
     }) })
   ] });
 }
@@ -10734,6 +10886,10 @@ var DocList = styled9__default.default.ul`
 var DocItem = styled9__default.default.li`
   padding: 0.75rem 0;
   border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
+  border-radius: ${(p) => p.$highlighted ? "6px" : "0"};
+  background: ${(p) => p.$highlighted ? "rgba(212, 175, 55, 0.08)" : "transparent"};
+  ${(p) => p.$highlighted ? "padding: 0.75rem;" : ""}
+  transition: background 0.3s;
 
   &:last-child {
     border-bottom: none;
@@ -10978,6 +11134,10 @@ var SignInButton = styled9__default.default.button`
     background: rgba(240, 185, 11, 0.1);
   }
 `;
+function displayName(item) {
+  if (item.name) return item.name;
+  return item.tokenName.charAt(0).toUpperCase() + item.tokenName.slice(1);
+}
 function AssetSelectorBar({
   propertyName,
   tokenPrice,
@@ -10987,7 +11147,8 @@ function AssetSelectorBar({
   selectorItems,
   onSelect,
   trailing,
-  imageUrl
+  imageUrl,
+  badgeLabel
 }) {
   const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
   const hasItems = selectorItems && selectorItems.length > 0;
@@ -10999,6 +11160,7 @@ function AssetSelectorBar({
     imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
     /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
       propertyName,
+      badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: badgeLabel }),
       hasItems && /* @__PURE__ */ jsxRuntime.jsx(
         "svg",
         {
@@ -11043,14 +11205,16 @@ function AssetSelectorBar({
           $selected: isCurrent,
           style: { cursor: isCurrent ? "default" : "pointer" },
           children: /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionInner, { children: [
-            item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: item.streetAddress }),
+            item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
-                item.streetAddress,
-                item.ticker ? ` (${item.ticker})` : ""
+                displayName(item),
+                item.ticker ? ` (${item.ticker})` : "",
+                item.badge && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: item.badge })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
-                item.suburb,
+                item.streetAddress,
+                item.suburb ? `, ${item.suburb}` : "",
                 statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
               ] })
             ] })
@@ -11067,8 +11231,8 @@ var AssetSelectorWrapper = styled9__default.default.div`
 var IPOAssetSelector = styled9__default.default.div`
   position: relative;
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  gap: 1rem;
   padding: 1rem 1.25rem;
   background: linear-gradient(135deg, var(--color-card-darker, #111) 0%, rgba(17,17,17,0.95) 100%);
   border-radius: 12px;
@@ -11106,7 +11270,7 @@ var AssetSelectorDropdown = styled9__default.default.div`
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
   transition: all 0.2s ease;
-  flex: 1 1 auto;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   &:hover { background-color: rgba(255,255,255,0.05); }
@@ -11142,9 +11306,9 @@ var SelectorMetrics = styled9__default.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
-  margin-left: auto;
-  margin-right: 1rem;
+  margin-right: auto;
   padding: 0.5rem 1rem;
+  flex-shrink: 0;
   background: rgba(255,255,255,0.03);
   border-radius: 8px;
   border: 1px solid rgba(255,255,255,0.05);
@@ -11162,6 +11326,7 @@ var TrailingWrapper = styled9__default.default.div`
   display: flex;
   align-items: center;
   flex-shrink: 0;
+  margin-left: auto;
 
   @media (max-width: 768px) {
     overflow-x: auto;
@@ -11279,6 +11444,19 @@ var IPOOptionName = styled9__default.default.div`
   color: ${"#ebebeb"};
   line-height: 1.3;
 `;
+var CompetitionBadge = styled9__default.default.span`
+  margin-left: 0.4rem;
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #E6C87E;
+  background: rgba(230, 200, 126, 0.1);
+  border: 1px solid rgba(230, 200, 126, 0.2);
+  padding: 1px 5px;
+  border-radius: 3px;
+  vertical-align: middle;
+`;
 var IPOOptionLocation = styled9__default.default.div`
   font-size: 0.72rem;
   color: rgba(255,255,255,0.38);
@@ -11349,6 +11527,7 @@ function OfferingProgressCard({
   totalSold,
   supplyToSell,
   opensAt,
+  tradingStartsAt,
   subscriberCount = 0,
   raisedAmount,
   targetAmount,
@@ -11365,26 +11544,36 @@ function OfferingProgressCard({
     const timer = setInterval(() => setCurrentTime(/* @__PURE__ */ new Date()), 1e3);
     return () => clearInterval(timer);
   }, []);
+  const [tradingCountdown, setTradingCountdown] = React5.useState(null);
+  const calcCountdownFrom = (target) => {
+    const now = Math.floor(Date.now() / 1e3);
+    const diff = target - now;
+    if (diff <= 0) return null;
+    return {
+      days: Math.floor(diff / 86400),
+      hours: Math.floor(diff % 86400 / 3600),
+      minutes: Math.floor(diff % 3600 / 60),
+      seconds: diff % 60
+    };
+  };
   React5.useEffect(() => {
     if (!opensAt) {
       setCountdown(null);
       return;
     }
-    const calculateCountdown = () => {
-      const now = Math.floor(Date.now() / 1e3);
-      const diff = opensAt - now;
-      if (diff <= 0) return null;
-      return {
-        days: Math.floor(diff / 86400),
-        hours: Math.floor(diff % 86400 / 3600),
-        minutes: Math.floor(diff % 3600 / 60),
-        seconds: diff % 60
-      };
-    };
-    setCountdown(calculateCountdown());
-    const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
+    setCountdown(calcCountdownFrom(opensAt));
+    const interval = setInterval(() => setCountdown(calcCountdownFrom(opensAt)), 1e3);
     return () => clearInterval(interval);
   }, [opensAt]);
+  React5.useEffect(() => {
+    if (!tradingStartsAt) {
+      setTradingCountdown(null);
+      return;
+    }
+    setTradingCountdown(calcCountdownFrom(tradingStartsAt));
+    const interval = setInterval(() => setTradingCountdown(calcCountdownFrom(tradingStartsAt)), 1e3);
+    return () => clearInterval(interval);
+  }, [tradingStartsAt]);
   if (variant === "compact") {
     return /* @__PURE__ */ jsxRuntime.jsxs(CompactContainer, { style, className, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
@@ -11411,7 +11600,10 @@ function OfferingProgressCard({
           /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
           " Offering Progress"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStatus === "CLOSED" || ipoStatus === "CANCELLED" ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#f6465d", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusDot3, { $color: "#f6465d" }),
+          ipoStatus === "CLOSED" ? "CLOSED" : "CANCELLED"
+        ] }) : ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
           /* @__PURE__ */ jsxRuntime.jsx(StatusDot3, { $color: "#0ecb81", $pulse: true }),
           "LIVE"
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
@@ -11419,20 +11611,45 @@ function OfferingProgressCard({
           statusLabel || "Preparing"
         ] }) })
       ] }),
-      isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
+      ipoStatus === "CLOSED" || ipoStatus === "CANCELLED" ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { style: { color: "#f6465d" }, children: "IPO has Closed, Trading begins in" }),
+          tradingCountdown ? /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.days).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.hours).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.minutes).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.seconds).padStart(2, "0") }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx(CountdownDigits, { children: /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { style: { fontSize: "1.25rem" }, children: "Trading Now Open" }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsSide, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsLabel, { children: "Units Allocated" }),
+          /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsValue, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            totalSold.toLocaleString(),
+            " / ",
+            supplyToSell.toLocaleString()
+          ] }) })
+        ] })
+      ] }) : isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
         countdown ? /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { children: "Opens In" }),
           /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.days).padStart(2, "0") }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.hours).padStart(2, "0") }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.minutes).padStart(2, "0") }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
-            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.seconds).padStart(2, "0") }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
             /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
           ] })
         ] }) : /* @__PURE__ */ jsxRuntime.jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsxRuntime.jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
@@ -11685,36 +11902,36 @@ var CountdownCenter = styled9__default.default.div`
   margin-bottom: 1.25rem;
 `;
 var CountdownLabel = styled9__default.default.div`
-  font-size: 0.7rem;
-  color: #D4AF37;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.15em;
-  margin-bottom: 0.5rem;
-  font-weight: 600;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.75rem;
 `;
 var CountdownDigits = styled9__default.default.div`
   display: flex;
   align-items: baseline;
   justify-content: center;
-  gap: 0.35rem;
+  gap: 0.25rem;
 `;
 var CountdownNumber = styled9__default.default.span`
-  font-size: 2.5rem;
+  font-size: 2rem;
   font-weight: 700;
   font-family: monospace;
   color: #D4AF37;
   @media (max-width: 768px) {
-    font-size: 1.75rem;
+    font-size: 1.5rem;
   }
 `;
 var CountdownUnitLabel = styled9__default.default.span`
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   color: var(--color-text-secondary);
+  margin-right: 0.25rem;
 `;
 var CountdownSeparator = styled9__default.default.span`
   color: rgba(255,255,255,0.2);
-  margin: 0 0.2rem;
-  font-size: 1.5rem;
+  margin: 0 0.15rem;
+  font-size: 1.25rem;
 `;
 var LiveBody = styled9__default.default.div`
   display: flex;
@@ -11799,7 +12016,7 @@ var HomePreLiveRow = styled9__default.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: 1rem;
+  flex: 1;
 `;
 var HomeCountdownSide = styled9__default.default.div`
   display: flex;