@loafmarkets/ui 0.1.343 → 0.1.345

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.d.mts +28 -25
  2. package/dist/index.d.ts +28 -25
  3. package/dist/index.js +393 -553
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +393 -553
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +2 -1
package/dist/index.js CHANGED
@@ -1716,17 +1716,21 @@ function getTradeKey(trade, fallbackIndex) {
1716
1716
  if (trade.time != null) return `t-${trade.time}-${trade.type}-${trade.price}-${trade.amount}`;
1717
1717
  return `idx-${fallbackIndex}-${trade.type}-${trade.price}-${trade.amount}`;
1718
1718
  }
1719
- function useAmountChangeFlash(ref, amount, side) {
1720
- const prevAmountRef = React5__namespace.useRef(amount);
1719
+ function flashElement(node, side) {
1720
+ if (typeof node.animate !== "function") return;
1721
+ const color = side === "bid" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
1722
+ node.animate(
1723
+ [{ backgroundColor: color }, { backgroundColor: "transparent" }],
1724
+ { duration: FLASH_DURATION_MS, easing: "ease-out" }
1725
+ );
1726
+ }
1727
+ function useAmountChangeFlash(ref, amount, side, flashOnMount) {
1728
+ const prevAmountRef = React5__namespace.useRef(flashOnMount ? null : amount);
1721
1729
  React5__namespace.useEffect(() => {
1722
1730
  const prev = prevAmountRef.current;
1723
1731
  const node = ref.current;
1724
- if (prev !== amount && node && typeof node.animate === "function") {
1725
- const color = side === "bid" ? FLASH_UP_COLOR : FLASH_DOWN_COLOR;
1726
- node.animate(
1727
- [{ backgroundColor: color }, { backgroundColor: "transparent" }],
1728
- { duration: FLASH_DURATION_MS, easing: "ease-out" }
1729
- );
1732
+ if (node && prev !== amount) {
1733
+ flashElement(node, side);
1730
1734
  }
1731
1735
  prevAmountRef.current = amount;
1732
1736
  }, [amount, ref, side]);
@@ -1830,11 +1834,12 @@ function DepthRow({
1830
1834
  precision,
1831
1835
  amountPrecision,
1832
1836
  hasUserOrder,
1833
- onPriceClick
1837
+ onPriceClick,
1838
+ flashOnMount
1834
1839
  }) {
1835
1840
  const isAsk = side === "ask";
1836
1841
  const rowRef = React5__namespace.useRef(null);
1837
- useAmountChangeFlash(rowRef, amount, side);
1842
+ useAmountChangeFlash(rowRef, amount, side, flashOnMount);
1838
1843
  return /* @__PURE__ */ jsxRuntime.jsxs(
1839
1844
  "div",
1840
1845
  {
@@ -1846,11 +1851,15 @@ function DepthRow({
1846
1851
  /* @__PURE__ */ jsxRuntime.jsx(
1847
1852
  "div",
1848
1853
  {
1849
- className: cn(
1850
- "absolute inset-y-0 right-0",
1851
- isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"
1852
- ),
1853
- style: { width: `${clamp3(depthPct, 0, 100)}%`, transition: "width 300ms ease-out" }
1854
+ className: cn(isAsk ? "bg-rose-900/30" : "bg-emerald-900/30"),
1855
+ style: {
1856
+ position: "absolute",
1857
+ top: 0,
1858
+ bottom: 0,
1859
+ left: 0,
1860
+ width: `${clamp3(depthPct, 0, 100)}%`,
1861
+ transition: "width 300ms ease-out"
1862
+ }
1854
1863
  }
1855
1864
  ),
1856
1865
  hasUserOrder ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1871,7 +1880,7 @@ function DepthRow({
1871
1880
  );
1872
1881
  }
1873
1882
  var clamp3 = (value, min, max) => Math.min(max, Math.max(min, value));
1874
- var LEVEL_ROWS_VISIBLE = 5;
1883
+ var LEVEL_ROWS_VISIBLE = 8;
1875
1884
  var DEPTH_ROW_HEIGHT_PX = 28;
1876
1885
  var COMPACT_ROWS_VISIBLE = 5;
1877
1886
  var COMPACT_ROW_HEIGHT_PX = 30;
@@ -1966,6 +1975,32 @@ var Orderbook = React5__namespace.forwardRef(
1966
1975
  }
1967
1976
  const combinedMaxCumDepth = Math.max(1, ...askCumDepths, ...bidCumDepths);
1968
1977
  const askMaxCumDepth = combinedMaxCumDepth;
1978
+ const prevAskPricesRef = React5__namespace.useRef(null);
1979
+ const prevBidPricesRef = React5__namespace.useRef(null);
1980
+ const newAskPrices = React5__namespace.useMemo(() => {
1981
+ const current = new Set(askVisibleLevels.map((l) => l.price));
1982
+ const prev = prevAskPricesRef.current;
1983
+ if (!prev) return /* @__PURE__ */ new Set();
1984
+ const added = /* @__PURE__ */ new Set();
1985
+ for (const p of current) {
1986
+ if (!prev.has(p)) added.add(p);
1987
+ }
1988
+ return added;
1989
+ }, [askVisibleLevels]);
1990
+ const newBidPrices = React5__namespace.useMemo(() => {
1991
+ const current = new Set(bidVisibleLevels.map((l) => l.price));
1992
+ const prev = prevBidPricesRef.current;
1993
+ if (!prev) return /* @__PURE__ */ new Set();
1994
+ const added = /* @__PURE__ */ new Set();
1995
+ for (const p of current) {
1996
+ if (!prev.has(p)) added.add(p);
1997
+ }
1998
+ return added;
1999
+ }, [bidVisibleLevels]);
2000
+ React5__namespace.useEffect(() => {
2001
+ prevAskPricesRef.current = new Set(askVisibleLevels.map((l) => l.price));
2002
+ prevBidPricesRef.current = new Set(bidVisibleLevels.map((l) => l.price));
2003
+ }, [askVisibleLevels, bidVisibleLevels]);
1969
2004
  const bidMaxCumDepth = combinedMaxCumDepth;
1970
2005
  const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
1971
2006
  const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
@@ -2000,7 +2035,9 @@ var Orderbook = React5__namespace.forwardRef(
2000
2035
  onPriceClick,
2001
2036
  levelCount: effectiveLevels,
2002
2037
  compactLevelCount: effectiveCompactLevels,
2003
- fillHeight
2038
+ fillHeight,
2039
+ newAskPrices,
2040
+ newBidPrices
2004
2041
  };
2005
2042
  return /* @__PURE__ */ jsxRuntime.jsx(
2006
2043
  Card,
@@ -2072,7 +2109,9 @@ function DesktopOrderbookLayout({
2072
2109
  onPriceClick,
2073
2110
  levelCount: effectiveLevels,
2074
2111
  compactLevelCount: _compactLevelCount,
2075
- fillHeight
2112
+ fillHeight,
2113
+ newAskPrices,
2114
+ newBidPrices
2076
2115
  }) {
2077
2116
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2078
2117
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 pt-4", children: [
@@ -2192,7 +2231,8 @@ function DesktopOrderbookLayout({
2192
2231
  precision,
2193
2232
  amountPrecision,
2194
2233
  hasUserOrder: userAskPrices.has(l.price),
2195
- onPriceClick
2234
+ onPriceClick,
2235
+ flashOnMount: newAskPrices.has(l.price)
2196
2236
  },
2197
2237
  `ask-${l.price}`
2198
2238
  ))
@@ -2229,7 +2269,8 @@ function DesktopOrderbookLayout({
2229
2269
  precision,
2230
2270
  amountPrecision,
2231
2271
  hasUserOrder: userBidPrices.has(l.price),
2232
- onPriceClick
2272
+ onPriceClick,
2273
+ flashOnMount: newBidPrices.has(l.price)
2233
2274
  },
2234
2275
  `bid-${l.price}`
2235
2276
  ))
@@ -2267,7 +2308,9 @@ function MobileOrderbookLayout({
2267
2308
  tradeExplorerUrl,
2268
2309
  onPriceClick,
2269
2310
  levelCount: _levelCount,
2270
- compactLevelCount: effectiveCompactLevels
2311
+ compactLevelCount: effectiveCompactLevels,
2312
+ newAskPrices,
2313
+ newBidPrices
2271
2314
  }) {
2272
2315
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2273
2316
  /* @__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({
2347
2390
  precision,
2348
2391
  amountPrecision,
2349
2392
  hasUserOrder: userAskPrices.has(l.price),
2350
- onPriceClick
2393
+ onPriceClick,
2394
+ flashOnMount: newAskPrices.has(l.price)
2351
2395
  },
2352
2396
  `mobile-ask-${l.price}`
2353
2397
  )) }),
@@ -2393,7 +2437,8 @@ function MobileOrderbookLayout({
2393
2437
  precision,
2394
2438
  amountPrecision,
2395
2439
  hasUserOrder: userBidPrices.has(l.price),
2396
- onPriceClick
2440
+ onPriceClick,
2441
+ flashOnMount: newBidPrices.has(l.price)
2397
2442
  },
2398
2443
  `mobile-bid-${l.price}`
2399
2444
  )) })
@@ -2437,11 +2482,12 @@ function MobileDepthRow({
2437
2482
  precision,
2438
2483
  amountPrecision,
2439
2484
  hasUserOrder,
2440
- onPriceClick
2485
+ onPriceClick,
2486
+ flashOnMount
2441
2487
  }) {
2442
2488
  const isAsk = side === "ask";
2443
2489
  const rowRef = React5__namespace.useRef(null);
2444
- useAmountChangeFlash(rowRef, amount, side);
2490
+ useAmountChangeFlash(rowRef, amount, side, flashOnMount);
2445
2491
  return /* @__PURE__ */ jsxRuntime.jsxs(
2446
2492
  "div",
2447
2493
  {
@@ -2486,7 +2532,7 @@ function MobileDepthRow({
2486
2532
  style: {
2487
2533
  position: "absolute",
2488
2534
  top: 0,
2489
- right: 0,
2535
+ left: 0,
2490
2536
  bottom: 0,
2491
2537
  width: `${clamp3(depthPct, 0, 100)}%`,
2492
2538
  backgroundColor: isAsk ? "#f6465d" : "#0ecb81",
@@ -2514,6 +2560,11 @@ var PropertyTour = React5__namespace.forwardRef(
2514
2560
  ...props
2515
2561
  }, ref) => {
2516
2562
  const videoRef = React5__namespace.useRef(null);
2563
+ React5__namespace.useEffect(() => {
2564
+ if (videoRef.current && src) {
2565
+ videoRef.current.load();
2566
+ }
2567
+ }, [src]);
2517
2568
  React5__namespace.useEffect(() => {
2518
2569
  const video = videoRef.current;
2519
2570
  if (!video) return;
@@ -2593,7 +2644,8 @@ var PropertyTour = React5__namespace.forwardRef(
2593
2644
  }
2594
2645
  );
2595
2646
  PropertyTour.displayName = "PropertyTour";
2596
- var ITEMS_PER_PAGE = 6;
2647
+ var ITEMS_PER_PAGE = 5;
2648
+ var ITEMS_PER_PAGE_MOBILE = 5;
2597
2649
  var ensureAnimationsInjected = () => {
2598
2650
  if (typeof document === "undefined") return;
2599
2651
  if (document.getElementById("property-news-updates-animations")) return;
@@ -2849,6 +2901,15 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2849
2901
  const purchaseItems = purchasesProp ?? [];
2850
2902
  const [page, setPage] = React5__namespace.useState(0);
2851
2903
  const [selectedItem, setSelectedItem] = React5__namespace.useState(null);
2904
+ const [isMobile, setIsMobile] = React5__namespace.useState(
2905
+ () => typeof window !== "undefined" && window.innerWidth <= 768
2906
+ );
2907
+ React5__namespace.useEffect(() => {
2908
+ const check = () => setIsMobile(window.innerWidth <= 768);
2909
+ window.addEventListener("resize", check);
2910
+ return () => window.removeEventListener("resize", check);
2911
+ }, []);
2912
+ const homePageSize = isMobile ? ITEMS_PER_PAGE_MOBILE : ITEMS_PER_PAGE;
2852
2913
  React5__namespace.useEffect(() => {
2853
2914
  ensureAnimationsInjected();
2854
2915
  }, []);
@@ -2869,10 +2930,10 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2869
2930
  [hasItems, items, homeTab]
2870
2931
  );
2871
2932
  const homeTotalPages = React5__namespace.useMemo(
2872
- () => Math.max(1, Math.ceil(homeFilteredItems.length / ITEMS_PER_PAGE)),
2873
- [homeFilteredItems.length]
2933
+ () => Math.max(1, Math.ceil(homeFilteredItems.length / homePageSize)),
2934
+ [homeFilteredItems.length, homePageSize]
2874
2935
  );
2875
- const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * ITEMS_PER_PAGE, (homePage + 1) * ITEMS_PER_PAGE);
2936
+ const homePaginatedItems = disablePagination ? homeFilteredItems : homeFilteredItems.slice(homePage * homePageSize, (homePage + 1) * homePageSize);
2876
2937
  return /* @__PURE__ */ jsxRuntime.jsxs(
2877
2938
  "div",
2878
2939
  {
@@ -2883,18 +2944,18 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2883
2944
  ),
2884
2945
  ...props,
2885
2946
  children: [
2886
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
2947
+ /* @__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: [
2887
2948
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
2888
- 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" }) }),
2949
+ 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" }) }),
2889
2950
  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" } }),
2890
2951
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
2891
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: isHomeVariant ? "text-base font-semibold text-white" : "text-lg font-semibold text-white", style: { margin: 0 }, children: resolvedHeading }),
2952
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, fontSize: isHomeVariant ? isMobile ? "0.85rem" : "1rem" : "1.125rem", fontWeight: 600, color: "#fff", lineHeight: 1.2 }, children: resolvedHeading }),
2892
2953
  subheading ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-white/60", children: subheading }) : null
2893
2954
  ] })
2894
2955
  ] }),
2895
- 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: [
2956
+ 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: [
2896
2957
  viewAllLabel,
2897
- /* @__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" }) })
2958
+ /* @__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" }) })
2898
2959
  ] }) : !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: [
2899
2960
  /* @__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" } }),
2900
2961
  "CONNECTING"
@@ -2903,7 +2964,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2903
2964
  "LIVE"
2904
2965
  ] }) : null
2905
2966
  ] }),
2906
- 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(
2967
+ 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(
2907
2968
  "button",
2908
2969
  {
2909
2970
  type: "button",
@@ -2927,7 +2988,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2927
2988
  /* @__PURE__ */ jsxRuntime.jsx(
2928
2989
  "div",
2929
2990
  {
2930
- className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "mt-2 gap-0" : "mt-4 gap-3"),
2991
+ className: cn("flex flex-1 flex-col overflow-y-auto overflow-x-hidden", isHomeVariant ? "gap-0" : "mt-4 gap-3"),
2931
2992
  style: !isPurchaseVariant && !isHomeVariant ? { minHeight: `${ITEMS_PER_PAGE * 86}px` } : void 0,
2932
2993
  children: isPurchaseVariant ? purchaseItems.length > 0 ? purchaseItems.slice(0, 7).map((purchase, index) => {
2933
2994
  const maxAmount = 6e4;
@@ -2969,12 +3030,12 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2969
3030
  backgroundColor: "transparent",
2970
3031
  border: "none",
2971
3032
  cursor: "pointer",
2972
- padding: "0.75rem 0",
3033
+ padding: isMobile ? "0.55rem 0" : "0.75rem 0",
2973
3034
  borderBottom: index < homePaginatedItems.length - 1 ? "1px solid rgba(255,255,255,0.05)" : "none",
2974
3035
  display: "flex",
2975
3036
  justifyContent: "space-between",
2976
3037
  alignItems: "flex-start",
2977
- gap: "0.5rem",
3038
+ gap: isMobile ? "0.25rem" : "0.5rem",
2978
3039
  color: "inherit",
2979
3040
  transition: "background-color 0.15s"
2980
3041
  },
@@ -2990,12 +3051,12 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
2990
3051
  },
2991
3052
  children: [
2992
3053
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
2993
- /* @__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 }),
2994
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
2995
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: "0.7rem" }, children: formatDateShort(item.date) }),
2996
- 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 }),
2997
- /* @__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" }),
2998
- sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
3054
+ /* @__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 }),
3055
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: isMobile ? "0.35rem" : "0.5rem", alignItems: "center", flexWrap: "wrap" }, children: [
3056
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#848e9c", fontSize: isMobile ? "0.55rem" : "0.7rem" }, children: formatDateShort(item.date) }),
3057
+ 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 }),
3058
+ /* @__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" }),
3059
+ sentimentInfo && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: isMobile ? "0.52rem" : "0.65rem", fontWeight: 600, color: sentimentInfo.color }, children: [
2999
3060
  sentimentInfo.arrow ? `${sentimentInfo.arrow} ` : "",
3000
3061
  sentimentInfo.label
3001
3062
  ] })
@@ -4560,6 +4621,9 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
4560
4621
  hideMakeOfferButton = false,
4561
4622
  statusBadge,
4562
4623
  isLoading = false,
4624
+ heroLabel,
4625
+ heroSidePanel,
4626
+ glowInfoCard,
4563
4627
  ...props
4564
4628
  }, ref) => {
4565
4629
  const isPositive = changePercent == null ? void 0 : changePercent >= 0;
@@ -4598,8 +4662,9 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
4598
4662
  statusBadge.variant === "live" ? /* @__PURE__ */ jsxRuntime.jsx(PulsingDot, {}) : null,
4599
4663
  statusBadge.label
4600
4664
  ] }) : null,
4665
+ heroLabel ? /* @__PURE__ */ jsxRuntime.jsx(HeroTopLabel, { children: heroLabel }) : null,
4601
4666
  /* @__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: [
4602
- /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { children: /* @__PURE__ */ jsxRuntime.jsxs(CardLayout, { children: [
4667
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(InfoCard, { $glow: glowInfoCard, children: /* @__PURE__ */ jsxRuntime.jsxs(CardLayout, { children: [
4603
4668
  /* @__PURE__ */ jsxRuntime.jsx(Thumbnail, { src: imageUrl, alt: imageAlt ?? name }),
4604
4669
  /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { children: /* @__PURE__ */ jsxRuntime.jsxs(InfoRow, { children: [
4605
4670
  /* @__PURE__ */ jsxRuntime.jsx(NameGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
@@ -4624,7 +4689,8 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
4624
4689
  ] }) : null
4625
4690
  ] })
4626
4691
  ] }) })
4627
- ] }) }),
4692
+ ] }) }) }),
4693
+ heroSidePanel,
4628
4694
  /* @__PURE__ */ jsxRuntime.jsxs(ActionButtons, { children: [
4629
4695
  /* @__PURE__ */ jsxRuntime.jsx(
4630
4696
  "button",
@@ -4788,6 +4854,14 @@ var CardContent2 = styled9__default.default.div`
4788
4854
  min-width: 0;
4789
4855
  flex: 1;
4790
4856
  `;
4857
+ var infoCardGlow = styled9.keyframes`
4858
+ 0%, 100% {
4859
+ 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);
4860
+ }
4861
+ 50% {
4862
+ 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);
4863
+ }
4864
+ `;
4791
4865
  var InfoCard = styled9__default.default.div`
4792
4866
  border-radius: 12px;
4793
4867
  background: rgba(0, 0, 0, 0.15);
@@ -4795,8 +4869,9 @@ var InfoCard = styled9__default.default.div`
4795
4869
  color: #fff;
4796
4870
  backdrop-filter: blur(6px);
4797
4871
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
4798
- border: 1px solid rgba(255, 255, 255, 0.12);
4872
+ border: 1px solid ${(p) => p.$glow ? "rgba(230, 200, 126, 0.35)" : "rgba(255, 255, 255, 0.12)"};
4799
4873
  min-width: 0;
4874
+ ${(p) => p.$glow && styled9.css`animation: ${infoCardGlow} 3s ease-in-out infinite;`}
4800
4875
 
4801
4876
  @media (max-width: 768px) {
4802
4877
  padding: 0.85rem 1.15rem;
@@ -4876,6 +4951,17 @@ var AddressText = styled9__default.default.p`
4876
4951
  font-size: 0.9rem;
4877
4952
  }
4878
4953
  `;
4954
+ var HeroTopLabel = styled9__default.default.div`
4955
+ position: absolute;
4956
+ top: 2rem;
4957
+ left: 2.5rem;
4958
+ z-index: 10;
4959
+
4960
+ @media (max-width: 768px) {
4961
+ top: 1.25rem;
4962
+ left: 1.25rem;
4963
+ }
4964
+ `;
4879
4965
  var PriceChangeRow = styled9__default.default.span`
4880
4966
  display: inline-flex;
4881
4967
  align-items: center;
@@ -4963,8 +5049,10 @@ var Header = ({
4963
5049
  onWalletNavigate: _onWalletNavigate,
4964
5050
  onSettingsClick,
4965
5051
  showTradeTab = true,
4966
- portfolioSummary
5052
+ portfolioSummary,
5053
+ transparentOnTop = false
4967
5054
  }) => {
5055
+ const [headerBgOpacity, setHeaderBgOpacity] = React5.useState(transparentOnTop ? 0 : 1);
4968
5056
  const [isUserMenuOpen, setIsUserMenuOpen] = React5.useState(false);
4969
5057
  const [isMobileMenuOpen, setIsMobileMenuOpen] = React5.useState(false);
4970
5058
  const [isMoreMenuOpen, setIsMoreMenuOpen] = React5.useState(false);
@@ -5020,6 +5108,19 @@ var Header = ({
5020
5108
  document.documentElement.style.setProperty("--telegram-safe-top", "59px");
5021
5109
  }
5022
5110
  }, []);
5111
+ React5.useEffect(() => {
5112
+ if (!transparentOnTop) {
5113
+ setHeaderBgOpacity(1);
5114
+ return;
5115
+ }
5116
+ const onScroll = () => {
5117
+ const opacity = Math.min(window.scrollY / 200, 1);
5118
+ setHeaderBgOpacity(opacity);
5119
+ };
5120
+ onScroll();
5121
+ window.addEventListener("scroll", onScroll, { passive: true });
5122
+ return () => window.removeEventListener("scroll", onScroll);
5123
+ }, [transparentOnTop]);
5023
5124
  React5.useEffect(() => {
5024
5125
  const handleClickOutside = (event) => {
5025
5126
  const target = event.target;
@@ -5126,7 +5227,9 @@ var Header = ({
5126
5227
  };
5127
5228
  const rawDisplayName = currentUser?.displayName;
5128
5229
  const normalizedDisplayName = typeof rawDisplayName === "string" ? rawDisplayName.trim() : void 0;
5129
- const userPrimaryLabel = normalizedDisplayName || currentUser?.email || currentUser?.walletAddress || "User";
5230
+ const rawWallet = currentUser?.walletAddress;
5231
+ const shortWallet = rawWallet && rawWallet.length > 10 ? `${rawWallet.slice(0, 4)}\u2026${rawWallet.slice(-4)}` : rawWallet;
5232
+ const userPrimaryLabel = normalizedDisplayName || currentUser?.email || shortWallet || "User";
5130
5233
  const resolveAuthReturnUrl = () => {
5131
5234
  if (getAuthReturnUrl) {
5132
5235
  return getAuthReturnUrl();
@@ -5207,7 +5310,7 @@ var Header = ({
5207
5310
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
5208
5311
  /* @__PURE__ */ jsxRuntime.jsx(SafeAreaCover, {}),
5209
5312
  /* @__PURE__ */ jsxRuntime.jsx(Overlay, { $isOpen: isMobileMenuOpen, onClick: () => setIsMobileMenuOpen(false) }),
5210
- /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", children: [
5313
+ /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { id: "loaf-header", $bgOpacity: headerBgOpacity, children: [
5211
5314
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
5212
5315
  /* @__PURE__ */ jsxRuntime.jsxs(Logo, { children: [
5213
5316
  /* @__PURE__ */ jsxRuntime.jsx(LogoLink, { href: logoHref ?? resolvedHomePath, onClick: handleLogoNavigation, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: Loaf_logo_Banner_default, alt: "LOAF Logo" }) }),
@@ -5316,6 +5419,15 @@ var Header = ({
5316
5419
  children: "API"
5317
5420
  }
5318
5421
  ),
5422
+ /* @__PURE__ */ jsxRuntime.jsx(
5423
+ NavLink,
5424
+ {
5425
+ href: "https://docs.loafmarkets.com/en/",
5426
+ target: "_blank",
5427
+ rel: "noopener noreferrer",
5428
+ children: "Docs"
5429
+ }
5430
+ ),
5319
5431
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: "auto", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(
5320
5432
  "div",
5321
5433
  {
@@ -5337,10 +5449,6 @@ var Header = ({
5337
5449
  ),
5338
5450
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mobile-menu-content", children: [
5339
5451
  /* @__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" }) }) }) }),
5340
- /* @__PURE__ */ jsxRuntime.jsxs(SearchBar, { children: [
5341
- /* @__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" }) }),
5342
- /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", placeholder: "Search..." })
5343
- ] }),
5344
5452
  /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedHomePath), children: "Home" }),
5345
5453
  /* @__PURE__ */ jsxRuntime.jsx(
5346
5454
  MobileNavItem,
@@ -5363,6 +5471,7 @@ var Header = ({
5363
5471
  /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedLearnPath), children: "Learn" }),
5364
5472
  /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedAboutPath), children: "About" }),
5365
5473
  /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => handleNavigation(resolvedApiPath), children: "API" }),
5474
+ /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { onClick: () => window.open("https://docs.loafmarkets.com/en/", "_blank", "noopener,noreferrer"), children: "Docs" }),
5366
5475
  /* @__PURE__ */ jsxRuntime.jsx("div", { style: { borderTop: "1px solid #2b3139", margin: "8px 0" } }),
5367
5476
  /* @__PURE__ */ jsxRuntime.jsx(
5368
5477
  MobileNavItem,
@@ -5416,6 +5525,14 @@ var Header = ({
5416
5525
  ] })
5417
5526
  ] }),
5418
5527
  /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
5528
+ /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
5529
+ /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Locked Balance" }),
5530
+ /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#B0B0B8" }, children: [
5531
+ "$",
5532
+ fmtInline(portfolioSummary.frozen ?? 0)
5533
+ ] })
5534
+ ] }),
5535
+ /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
5419
5536
  /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
5420
5537
  /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
5421
5538
  /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPos, $negative: !isPLPos, children: [
@@ -5459,7 +5576,7 @@ var Header = ({
5459
5576
  $isOpen: isUserMenuOpen,
5460
5577
  className: "user-menu",
5461
5578
  children: [
5462
- /* @__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 }) }),
5579
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-start" }, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: userPrimaryLabel }) }),
5463
5580
  /* @__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" }) })
5464
5581
  ]
5465
5582
  }
@@ -5563,6 +5680,14 @@ var Header = ({
5563
5680
  ] })
5564
5681
  ] }),
5565
5682
  /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
5683
+ /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
5684
+ /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Locked Balance" }),
5685
+ /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#B0B0B8" }, children: [
5686
+ "$",
5687
+ fmt(portfolioSummary.frozen ?? 0)
5688
+ ] })
5689
+ ] }),
5690
+ /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
5566
5691
  /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
5567
5692
  /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
5568
5693
  /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPositive, $negative: !isPLPositive, children: [
@@ -5615,15 +5740,15 @@ var MobileOnlyButton = styled9__default.default.button.attrs({ type: "button" })
5615
5740
  display: none;
5616
5741
  background-color: ${(props) => props.$isOpen ? "rgba(240, 185, 11, 0.2)" : "#f0b90b"};
5617
5742
  color: ${(props) => props.$isOpen ? "#ffffff" : "#0b0e11"};
5618
- font-size: 24px;
5743
+ font-size: 18px;
5619
5744
  font-weight: bold;
5620
- width: 44px;
5621
- height: 44px;
5745
+ width: 34px;
5746
+ height: 34px;
5622
5747
  justify-content: center;
5623
5748
  align-items: center;
5624
- margin-left: 0.75rem;
5749
+ margin-left: 0.5rem;
5625
5750
  z-index: 1100;
5626
- border-radius: 8px;
5751
+ border-radius: 6px;
5627
5752
  border: ${(props) => props.$isOpen ? "1px solid #f0b90b" : "none"};
5628
5753
  line-height: 1;
5629
5754
  padding: 0;
@@ -5650,8 +5775,9 @@ var HeaderContainer = styled9__default.default.header`
5650
5775
  still get the horizontal padding — only the top falls back to 0 */
5651
5776
  padding: 0 2rem;
5652
5777
  padding-top: max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px));
5653
- background-color: #0d1117;
5654
- border-bottom: 1px solid #232a32;
5778
+ background-color: rgba(13, 17, 23, ${({ $bgOpacity }) => $bgOpacity ?? 1});
5779
+ border-bottom: 1px solid rgba(35, 42, 50, ${({ $bgOpacity }) => $bgOpacity ?? 1});
5780
+ transition: background-color 0.15s ease, border-bottom-color 0.15s ease;
5655
5781
  position: fixed;
5656
5782
  top: 0;
5657
5783
  left: 0;
@@ -5672,11 +5798,11 @@ var HeaderContainer = styled9__default.default.header`
5672
5798
  min-height: 46px;
5673
5799
  padding: 0 0.75rem;
5674
5800
  border-radius: 12px;
5675
- background-color: rgba(13, 17, 23, 0.92);
5676
- backdrop-filter: blur(12px);
5677
- border: 1px solid rgba(255, 255, 255, 0.08);
5678
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
5679
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
5801
+ background-color: rgba(13, 17, 23, ${({ $bgOpacity }) => Math.max(($bgOpacity ?? 1) * 0.92, 0)});
5802
+ backdrop-filter: blur(${({ $bgOpacity }) => Math.round(($bgOpacity ?? 1) * 12)}px);
5803
+ border: 1px solid rgba(255, 255, 255, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.08});
5804
+ border-bottom: 1px solid rgba(255, 255, 255, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.08});
5805
+ box-shadow: 0 4px 20px rgba(0, 0, 0, ${({ $bgOpacity }) => ($bgOpacity ?? 1) * 0.3});
5680
5806
  }
5681
5807
  `;
5682
5808
  var HeaderSpacer = styled9__default.default.div`
@@ -5898,6 +6024,11 @@ var UserButton = styled9__default.default.button.attrs({ type: "button" })`
5898
6024
  transition: transform 0.2s ease;
5899
6025
  transform: ${(props) => props.$isOpen ? "rotate(180deg)" : "rotate(0)"};
5900
6026
  }
6027
+
6028
+ @media (max-width: 768px) {
6029
+ font-size: 11px;
6030
+ padding: 0 4px;
6031
+ }
5901
6032
  `;
5902
6033
  var DropdownMenu = styled9__default.default.div`
5903
6034
  position: absolute;
@@ -5967,42 +6098,6 @@ var MobileMenuClose = styled9__default.default.button.attrs({ type: "button" })`
5967
6098
  align-items: center;
5968
6099
  justify-content: center;
5969
6100
  `;
5970
- var SearchBar = styled9__default.default.div`
5971
- display: flex;
5972
- align-items: center;
5973
- background: rgba(255, 255, 255, 0.03);
5974
- border-radius: 6px;
5975
- padding: 10px 14px;
5976
- margin: 16px 20px 12px;
5977
- border: 1px solid rgba(255, 255, 255, 0.08);
5978
- transition: all 0.2s ease;
5979
-
5980
- &:focus-within {
5981
- background: rgba(255, 255, 255, 0.05);
5982
- border-color: rgba(240, 185, 11, 0.3);
5983
- }
5984
-
5985
- svg {
5986
- color: rgba(240, 185, 11, 0.5);
5987
- margin-right: 10px;
5988
- width: 16px;
5989
- height: 16px;
5990
- }
5991
-
5992
- input {
5993
- background: none;
5994
- border: none;
5995
- color: #ffffff;
5996
- font-size: 14px;
5997
- width: 100%;
5998
- outline: none;
5999
- height: 20px;
6000
-
6001
- &::placeholder {
6002
- color: rgba(255, 255, 255, 0.4);
6003
- }
6004
- }
6005
- `;
6006
6101
  var MobileNavItem = styled9__default.default.div`
6007
6102
  display: flex;
6008
6103
  align-items: center;
@@ -6044,8 +6139,10 @@ var PortfolioEyeButton = styled9__default.default.button`
6044
6139
  color: #D4AF37;
6045
6140
  }
6046
6141
 
6047
- @media (max-width: 1024px) {
6048
- display: none;
6142
+ @media (max-width: 768px) {
6143
+ margin-left: 2px;
6144
+ margin-right: 4px;
6145
+ padding: 4px;
6049
6146
  }
6050
6147
  `;
6051
6148
  var DepositButton = styled9__default.default.button`
@@ -6078,7 +6175,7 @@ var PortfolioBarContainer = styled9__default.default.div`
6078
6175
  top: calc(56px + max(env(safe-area-inset-top, 0px), var(--telegram-safe-top, 0px)));
6079
6176
  left: 0;
6080
6177
  right: 0;
6081
- z-index: 999;
6178
+ z-index: 1000;
6082
6179
  display: none;
6083
6180
  justify-content: flex-end;
6084
6181
  align-items: flex-start;
@@ -6144,9 +6241,9 @@ var PortfolioBarPill = styled9__default.default.div`
6144
6241
  }
6145
6242
 
6146
6243
  @media (max-width: 768px) {
6147
- gap: 0.75rem;
6148
- padding: 0.4rem 1rem;
6149
- border-radius: 0 0 16px 16px;
6244
+ gap: 0.5rem;
6245
+ padding: 0.3rem 0.75rem;
6246
+ border-radius: 0 0 12px 12px;
6150
6247
  }
6151
6248
  `;
6152
6249
  var PortfolioBarArrow = styled9__default.default.div`
@@ -6184,12 +6281,20 @@ var PBMetricLabel = styled9__default.default.span`
6184
6281
  text-transform: uppercase;
6185
6282
  letter-spacing: 0.5px;
6186
6283
  font-weight: 500;
6284
+
6285
+ @media (max-width: 768px) {
6286
+ font-size: 0.45rem;
6287
+ }
6187
6288
  `;
6188
6289
  var PBMetricValue = styled9__default.default.span`
6189
6290
  font-size: 0.75rem;
6190
6291
  font-weight: 600;
6191
6292
  color: ${(p) => p.$positive ? "#0ecb81" : p.$negative ? "#f6465d" : "#eaecef"};
6192
6293
  font-variant-numeric: tabular-nums;
6294
+
6295
+ @media (max-width: 768px) {
6296
+ font-size: 0.65rem;
6297
+ }
6193
6298
  `;
6194
6299
  var PBDot = styled9__default.default.div`
6195
6300
  width: 3px;
@@ -6203,6 +6308,10 @@ var PBOperator = styled9__default.default.span`
6203
6308
  font-weight: 500;
6204
6309
  color: rgba(255, 255, 255, 0.35);
6205
6310
  flex-shrink: 0;
6311
+
6312
+ @media (max-width: 768px) {
6313
+ font-size: 0.55rem;
6314
+ }
6206
6315
  `;
6207
6316
  var PropertySubheader = React5__namespace.forwardRef(
6208
6317
  ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
@@ -6731,8 +6840,8 @@ var LoginPopup = ({
6731
6840
  /* @__PURE__ */ jsxRuntime.jsxs(Annotation, { children: [
6732
6841
  /* @__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" }) }),
6733
6842
  /* @__PURE__ */ jsxRuntime.jsxs(AnnotationText, { children: [
6734
- /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Self-custodied" }),
6735
- "We never have ownership of your assets. All units are self-custodied"
6843
+ /* @__PURE__ */ jsxRuntime.jsx(AnnotationLabel, { children: "\u2190 Self custodial" }),
6844
+ "We never have ownership of your assets. All units are self custodial"
6736
6845
  ] })
6737
6846
  ] })
6738
6847
  ] })
@@ -8613,6 +8722,7 @@ function PropertyOverview({
8613
8722
  location,
8614
8723
  midPrice,
8615
8724
  onTradeClick,
8725
+ onDocumentsClick,
8616
8726
  onPhotosClick,
8617
8727
  description: descriptionProp,
8618
8728
  tradeButtonLabel = "Trade",
@@ -8634,7 +8744,6 @@ function PropertyOverview({
8634
8744
  ticker,
8635
8745
  contractAddress,
8636
8746
  chain = "Base (Ethereum L2)",
8637
- percentageTokenized,
8638
8747
  volume24h,
8639
8748
  openOrdersValue,
8640
8749
  holderCount,
@@ -8670,7 +8779,7 @@ function PropertyOverview({
8670
8779
  const tokenMarketCap = tokenPriceValue && resolvedTokensIssued ? tokenPriceValue * resolvedTokensIssued : null;
8671
8780
  const currentDividendYield = tokenMarketCap && monthlyCoupon > 0 ? (monthlyCoupon * 12 / tokenMarketCap * 100).toFixed(2) : null;
8672
8781
  const loadingSkeleton = /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 18 });
8673
- const rawPropertyType = overviewData?.propertyType ?? propertyTypeLabel ?? null;
8782
+ const rawPropertyType = propertyTypeLabel ?? null;
8674
8783
  const resolvedPropertyType = rawPropertyType?.toLowerCase() === "house" ? "Residential" : rawPropertyType;
8675
8784
  const galleryImages = images ?? [];
8676
8785
  const chainValue = /* @__PURE__ */ jsxRuntime.jsxs(ChainLogos, { children: [
@@ -8683,7 +8792,7 @@ function PropertyOverview({
8683
8792
  { label: "On-Chain Address", value: contractAddress ? truncateAddress(contractAddress) : "\u2014", mono: true, link: contractAddress ? `https://basescan.org/address/${contractAddress}` : void 0, copyValue: contractAddress },
8684
8793
  { label: "Token Ticker", value: ticker ?? "\u2014" },
8685
8794
  { label: "Total Circulating Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued?.toLocaleString() ?? "\u2014" },
8686
- { label: "Percentage Tokenized", value: percentageTokenized != null ? `${percentageTokenized}%` : "\u2014" },
8795
+ { label: "Legal Structuring", value: "See Documents", docLink: true },
8687
8796
  { label: "Property Type", value: resolvedPropertyType ?? "\u2014" },
8688
8797
  { label: "Location", value: location || "\u2014" }
8689
8798
  ];
@@ -8733,7 +8842,11 @@ function PropertyOverview({
8733
8842
  tokenDetailsItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailRow, { children: [
8734
8843
  /* @__PURE__ */ jsxRuntime.jsx(TokenDetailLabel, { children: item.label }),
8735
8844
  /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailValue, { $mono: !!item.mono, children: [
8736
- item.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
8845
+ "docLink" in item && item.docLink ? /* @__PURE__ */ jsxRuntime.jsxs(DocLinkBtn, { onClick: onDocumentsClick, children: [
8846
+ item.value,
8847
+ " ",
8848
+ /* @__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" }) })
8849
+ ] }) : item.link ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", style: { color: "#3380FF", textDecoration: "none" }, children: item.value }) : item.value,
8737
8850
  item.copyValue && /* @__PURE__ */ jsxRuntime.jsx(
8738
8851
  CopyBtn,
8739
8852
  {
@@ -8831,102 +8944,7 @@ function PropertyOverview({
8831
8944
  item.icon && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureIcon, { children: item.icon }),
8832
8945
  item.value && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureValue, { children: item.value }),
8833
8946
  /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureLabel, { children: item.label })
8834
- ] }, i)) }),
8835
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetsPanel, { children: [
8836
- /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Comparable Assets" }),
8837
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetsGrid, { children: [
8838
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStrip, { children: [
8839
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripImg, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/boondabah.jpg", alt: "Boondabah", onError: (e) => {
8840
- e.target.style.display = "none";
8841
- } }) }),
8842
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStripInfo, { children: [
8843
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStripName, { children: [
8844
- "Boondabah ",
8845
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetBadge, { children: "HERITAGE" })
8846
- ] }),
8847
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripAddr, { children: "200A Raglan St, Mosman" })
8848
- ] }),
8849
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStripRight, { children: [
8850
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripPrice, { children: "$16.07M" }),
8851
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripGrowth, { style: { color: "#4ade80" }, children: "+119%" })
8852
- ] }),
8853
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltip, { children: [
8854
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetTooltipArrow, {}),
8855
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetTooltipImg, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/boondabah.jpg", alt: "Boondabah", onError: (e) => {
8856
- e.target.style.display = "none";
8857
- } }) }),
8858
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipTitle, { children: [
8859
- "Boondabah ",
8860
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetBadge, { children: "HERITAGE" })
8861
- ] }),
8862
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetTooltipAddr, { children: "200A Raglan St, Mosman" }),
8863
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipStats, { children: [
8864
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8865
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sale Price" }),
8866
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "$16.07M" })
8867
- ] }),
8868
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8869
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Land" }),
8870
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "2,066 sqm" })
8871
- ] }),
8872
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8873
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Era" }),
8874
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "c.1905" })
8875
- ] }),
8876
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8877
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Growth" }),
8878
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#4ade80" }, children: "+119%" })
8879
- ] })
8880
- ] })
8881
- ] })
8882
- ] }),
8883
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStrip, { children: [
8884
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripImg, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/bradleys.jpg", alt: "Dobroyd", onError: (e) => {
8885
- e.target.style.display = "none";
8886
- } }) }),
8887
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStripInfo, { children: [
8888
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStripName, { children: [
8889
- "Dobroyd ",
8890
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetBadge, { children: "HERITAGE" })
8891
- ] }),
8892
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripAddr, { children: "7 Bradleys Head Rd, Mosman" })
8893
- ] }),
8894
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetStripRight, { children: [
8895
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripPrice, { children: "$27.96M" }),
8896
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetStripGrowth, { style: { color: "#4ade80" }, children: "+617%" })
8897
- ] }),
8898
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltip, { children: [
8899
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetTooltipArrow, {}),
8900
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetTooltipImg, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/bradleys.jpg", alt: "Dobroyd", onError: (e) => {
8901
- e.target.style.display = "none";
8902
- } }) }),
8903
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipTitle, { children: [
8904
- "Dobroyd ",
8905
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetBadge, { children: "HERITAGE" })
8906
- ] }),
8907
- /* @__PURE__ */ jsxRuntime.jsx(CompAssetTooltipAddr, { children: "7 Bradleys Head Rd, Mosman" }),
8908
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipStats, { children: [
8909
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8910
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sale Price" }),
8911
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "$27.96M" })
8912
- ] }),
8913
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8914
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Land" }),
8915
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "2,592 sqm" })
8916
- ] }),
8917
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8918
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Era" }),
8919
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "c.1905" })
8920
- ] }),
8921
- /* @__PURE__ */ jsxRuntime.jsxs(CompAssetTooltipRow, { children: [
8922
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Growth" }),
8923
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#4ade80" }, children: "+617%" })
8924
- ] })
8925
- ] })
8926
- ] })
8927
- ] })
8928
- ] })
8929
- ] })
8947
+ ] }, i)) })
8930
8948
  ] }),
8931
8949
  /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
8932
8950
  /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Asset Specification" }),
@@ -9046,47 +9064,6 @@ function PropertyOverview({
9046
9064
  ] })
9047
9065
  ] })
9048
9066
  ] }),
9049
- /* @__PURE__ */ jsxRuntime.jsxs(MapCompRow, { children: [
9050
- /* @__PURE__ */ jsxRuntime.jsx(MapCompLeft, { children: /* @__PURE__ */ jsxRuntime.jsx(
9051
- GalleryMapSection,
9052
- {
9053
- images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
9054
- categories: galleryCategories,
9055
- propertyLocation: location,
9056
- videoUrl,
9057
- tokenName,
9058
- onPhotoClick: onPhotosClick,
9059
- hideGallery: true,
9060
- hideSuburb: true
9061
- }
9062
- ) }),
9063
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanel, { children: [
9064
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanelTitle, { children: [
9065
- "Suburb Profile (",
9066
- location.split(",")[0]?.trim() || location,
9067
- ")"
9068
- ] }),
9069
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanelGrid, { children: [
9070
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanelStat, { children: [
9071
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatLabel, { children: "Median House Price" }),
9072
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatValue, { children: "$5.5M" })
9073
- ] }),
9074
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanelStat, { children: [
9075
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatLabel, { children: "5yr Growth" }),
9076
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatValue, { children: "+42%" })
9077
- ] }),
9078
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanelStat, { children: [
9079
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatLabel, { children: "Suburb Rank" }),
9080
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatValue, { children: "Top 1%" })
9081
- ] }),
9082
- /* @__PURE__ */ jsxRuntime.jsxs(SuburbPanelStat, { children: [
9083
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatLabel, { children: "Avg. Days on Market" }),
9084
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelStatValue, { children: "28" })
9085
- ] })
9086
- ] }),
9087
- /* @__PURE__ */ jsxRuntime.jsx(SuburbPanelDesc, { children: "One of Sydney's most prestigious harbourside suburbs, consistently ranked among Australia's highest-value residential markets. Strong capital growth driven by limited supply, heritage conservation overlays, and international buyer demand." })
9088
- ] })
9089
- ] }),
9090
9067
  /* @__PURE__ */ jsxRuntime.jsxs(AssetBentoNarratives, { children: [
9091
9068
  /* @__PURE__ */ jsxRuntime.jsxs(NarrativeCard, { children: [
9092
9069
  /* @__PURE__ */ jsxRuntime.jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }) }),
@@ -9117,21 +9094,11 @@ function PropertyOverview({
9117
9094
  /* @__PURE__ */ jsxRuntime.jsx(THLabel, { children: "Hours (AEST)" }),
9118
9095
  /* @__PURE__ */ jsxRuntime.jsx(THLabel, { children: "Days" })
9119
9096
  ] }),
9120
- /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { children: [
9097
+ /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { $last: true, children: [
9121
9098
  /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Continuous Trading" }),
9122
9099
  /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "10:00 \u2013 16:00" }),
9123
9100
  /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Mon \u2013 Fri" })
9124
9101
  ] }),
9125
- /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { children: [
9126
- /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "After Hours" }),
9127
- /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "16:00 \u2013 20:00" }),
9128
- /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Mon \u2013 Fri" })
9129
- ] }),
9130
- /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { $last: true, children: [
9131
- /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Pre-Market" }),
9132
- /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "07:00 \u2013 10:00" }),
9133
- /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Mon \u2013 Fri" })
9134
- ] }),
9135
9102
  /* @__PURE__ */ jsxRuntime.jsx(TradingHoursNote, { children: "All times are Australian Eastern Standard Time (AEST/AEDT). Markets are closed on Australian public holidays." })
9136
9103
  ] })
9137
9104
  ] }),
@@ -9141,7 +9108,10 @@ function PropertyOverview({
9141
9108
  /* @__PURE__ */ jsxRuntime.jsxs(SecurityCol, { children: [
9142
9109
  /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
9143
9110
  /* @__PURE__ */ jsxRuntime.jsx(SecurityLabel, { children: "Legal Structuring" }),
9144
- /* @__PURE__ */ jsxRuntime.jsx(SecurityValue, { children: "Baker McKenzie" })
9111
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityValue, { children: /* @__PURE__ */ jsxRuntime.jsxs(DocLinkBtn, { onClick: onDocumentsClick, children: [
9112
+ "See Documents ",
9113
+ /* @__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" }) })
9114
+ ] }) })
9145
9115
  ] }),
9146
9116
  /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
9147
9117
  /* @__PURE__ */ jsxRuntime.jsx(SecurityLabel, { children: "Bankruptcy Remote" }),
@@ -9380,66 +9350,6 @@ var GallerySpecLeft = styled9__default.default.div`
9380
9350
  flex-direction: column;
9381
9351
  gap: 0.75rem;
9382
9352
  `;
9383
- var MapCompRow = styled9__default.default.div`
9384
- display: grid;
9385
- grid-template-columns: 1fr 380px;
9386
- gap: 0.75rem;
9387
- margin-top: 0.75rem;
9388
- align-items: stretch;
9389
- @media (max-width: 900px) { grid-template-columns: 1fr; }
9390
- `;
9391
- var MapCompLeft = styled9__default.default.div`
9392
- min-width: 0;
9393
- overflow: hidden;
9394
- `;
9395
- var SuburbPanel = styled9__default.default.div`
9396
- background: #111111;
9397
- border: 1px solid rgba(255,255,255,0.1);
9398
- border-radius: 12px;
9399
- padding: 1.25rem;
9400
- display: flex;
9401
- flex-direction: column;
9402
- gap: 0.75rem;
9403
- `;
9404
- var SuburbPanelTitle = styled9__default.default.div`
9405
- font-size: 0.65rem;
9406
- color: #D4AF37;
9407
- text-transform: uppercase;
9408
- letter-spacing: 0.12em;
9409
- font-weight: 600;
9410
- padding-bottom: 0.75rem;
9411
- border-bottom: 1px solid rgba(255,255,255,0.06);
9412
- `;
9413
- var SuburbPanelGrid = styled9__default.default.div`
9414
- display: grid;
9415
- grid-template-columns: 1fr 1fr;
9416
- gap: 0.5rem;
9417
- `;
9418
- var SuburbPanelStat = styled9__default.default.div`
9419
- background: rgba(255,255,255,0.03);
9420
- border-radius: 6px;
9421
- padding: 0.5rem 0.65rem;
9422
- border: 1px solid rgba(255,255,255,0.04);
9423
- `;
9424
- var SuburbPanelStatLabel = styled9__default.default.div`
9425
- font-size: 0.6rem;
9426
- color: rgba(255,255,255,0.4);
9427
- text-transform: uppercase;
9428
- letter-spacing: 0.06em;
9429
- margin-bottom: 0.2rem;
9430
- `;
9431
- var SuburbPanelStatValue = styled9__default.default.div`
9432
- font-size: 0.9rem;
9433
- font-weight: 600;
9434
- color: #fff;
9435
- font-variant-numeric: tabular-nums;
9436
- `;
9437
- var SuburbPanelDesc = styled9__default.default.p`
9438
- margin: 0;
9439
- font-size: 0.75rem;
9440
- color: rgba(255,255,255,0.45);
9441
- line-height: 1.5;
9442
- `;
9443
9353
  var AssetBentoNarratives = styled9__default.default.div`
9444
9354
  display: grid;
9445
9355
  grid-template-columns: repeat(3, 1fr);
@@ -9575,6 +9485,20 @@ var CopyBtn = styled9__default.default.button`
9575
9485
  transition: color 0.15s;
9576
9486
  &:hover { color: rgba(255,255,255,0.7); }
9577
9487
  `;
9488
+ var DocLinkBtn = styled9__default.default.button`
9489
+ background: none;
9490
+ border: none;
9491
+ color: #D4AF37;
9492
+ cursor: pointer;
9493
+ padding: 0;
9494
+ font-size: inherit;
9495
+ font-weight: 600;
9496
+ display: inline-flex;
9497
+ align-items: center;
9498
+ gap: 4px;
9499
+ transition: opacity 0.15s;
9500
+ &:hover { opacity: 0.7; }
9501
+ `;
9578
9502
  var ChainLogos = styled9__default.default.span`
9579
9503
  display: inline-flex;
9580
9504
  align-items: center;
@@ -9814,182 +9738,6 @@ var TimelineHoldPeriod = styled9__default.default.span`
9814
9738
  color: rgba(255,255,255,0.25);
9815
9739
  font-weight: 400;
9816
9740
  `;
9817
- var CompAssetsPanel = styled9__default.default.div`
9818
- background: #111111;
9819
- border: 1px solid rgba(255,255,255,0.1);
9820
- border-radius: 12px;
9821
- padding: 0.75rem 1rem;
9822
- display: flex;
9823
- flex-direction: column;
9824
- gap: 0.35rem;
9825
- `;
9826
- var CompAssetsGrid = styled9__default.default.div`
9827
- display: grid;
9828
- grid-template-columns: 1fr 1fr;
9829
- gap: 0.5rem;
9830
- @media (max-width: 768px) {
9831
- grid-template-columns: 1fr;
9832
- }
9833
- `;
9834
- var CompAssetStrip = styled9__default.default.div`
9835
- position: relative;
9836
- display: flex;
9837
- align-items: center;
9838
- gap: 0.75rem;
9839
- background: rgba(255,255,255,0.02);
9840
- border: 1px solid rgba(255,255,255,0.06);
9841
- border-radius: 10px;
9842
- padding: 0.6rem 1rem 0.6rem 0.6rem;
9843
- transition: border-color 0.2s, background 0.2s;
9844
- cursor: pointer;
9845
- &:hover {
9846
- border-color: rgba(212,175,55,0.3);
9847
- background: rgba(255,255,255,0.03);
9848
- }
9849
- &:hover > div:last-child {
9850
- display: block;
9851
- }
9852
- `;
9853
- var CompAssetStripImg = styled9__default.default.div`
9854
- width: 52px;
9855
- height: 52px;
9856
- border-radius: 8px;
9857
- overflow: hidden;
9858
- flex-shrink: 0;
9859
- background: rgba(255,255,255,0.05);
9860
- img {
9861
- width: 100%;
9862
- height: 100%;
9863
- object-fit: cover;
9864
- }
9865
- `;
9866
- var CompAssetStripInfo = styled9__default.default.div`
9867
- flex: 1;
9868
- min-width: 0;
9869
- display: flex;
9870
- flex-direction: column;
9871
- gap: 2px;
9872
- `;
9873
- var CompAssetStripName = styled9__default.default.div`
9874
- font-size: 0.9rem;
9875
- font-weight: 600;
9876
- color: #fff;
9877
- display: flex;
9878
- align-items: center;
9879
- gap: 0.4rem;
9880
- `;
9881
- var CompAssetStripAddr = styled9__default.default.div`
9882
- font-size: 0.72rem;
9883
- color: rgba(255,255,255,0.4);
9884
- `;
9885
- var CompAssetStripRight = styled9__default.default.div`
9886
- flex-shrink: 0;
9887
- text-align: right;
9888
- display: flex;
9889
- flex-direction: column;
9890
- align-items: flex-end;
9891
- gap: 2px;
9892
- `;
9893
- var CompAssetStripPrice = styled9__default.default.div`
9894
- font-size: 1rem;
9895
- font-weight: 700;
9896
- color: #fff;
9897
- font-variant-numeric: tabular-nums;
9898
- white-space: nowrap;
9899
- `;
9900
- var CompAssetStripGrowth = styled9__default.default.div`
9901
- font-size: 0.72rem;
9902
- font-weight: 500;
9903
- font-variant-numeric: tabular-nums;
9904
- `;
9905
- var CompAssetBadge = styled9__default.default.span`
9906
- font-size: 0.52rem;
9907
- font-weight: 600;
9908
- text-transform: uppercase;
9909
- letter-spacing: 0.06em;
9910
- color: #4ade80;
9911
- background: rgba(74,222,128,0.1);
9912
- border: 1px solid rgba(74,222,128,0.2);
9913
- padding: 1px 6px;
9914
- border-radius: 4px;
9915
- white-space: nowrap;
9916
- `;
9917
- var CompAssetTooltip = styled9__default.default.div`
9918
- display: none;
9919
- position: absolute;
9920
- bottom: calc(100% + 10px);
9921
- left: 50%;
9922
- transform: translateX(-50%);
9923
- width: 280px;
9924
- background: #1a1d24;
9925
- border: 1px solid rgba(255,255,255,0.1);
9926
- border-radius: 8px;
9927
- padding: 0.75rem;
9928
- z-index: 100;
9929
- box-shadow: 0 8px 24px rgba(0,0,0,0.5);
9930
- pointer-events: none;
9931
- `;
9932
- var CompAssetTooltipArrow = styled9__default.default.div`
9933
- position: absolute;
9934
- bottom: -5px;
9935
- left: 50%;
9936
- transform: translateX(-50%) rotate(45deg);
9937
- width: 8px;
9938
- height: 8px;
9939
- background: #1a1d24;
9940
- border-right: 1px solid rgba(255,255,255,0.1);
9941
- border-bottom: 1px solid rgba(255,255,255,0.1);
9942
- `;
9943
- var CompAssetTooltipImg = styled9__default.default.div`
9944
- width: 100%;
9945
- height: 120px;
9946
- border-radius: 6px;
9947
- overflow: hidden;
9948
- margin-bottom: 0.6rem;
9949
- background: rgba(255,255,255,0.03);
9950
- img {
9951
- width: 100%;
9952
- height: 100%;
9953
- object-fit: cover;
9954
- }
9955
- `;
9956
- var CompAssetTooltipTitle = styled9__default.default.div`
9957
- font-size: 0.8rem;
9958
- font-weight: 600;
9959
- color: #fff;
9960
- display: flex;
9961
- align-items: center;
9962
- gap: 0.4rem;
9963
- margin-bottom: 2px;
9964
- `;
9965
- var CompAssetTooltipAddr = styled9__default.default.div`
9966
- font-size: 0.65rem;
9967
- color: rgba(255,255,255,0.4);
9968
- margin-bottom: 0.5rem;
9969
- `;
9970
- var CompAssetTooltipStats = styled9__default.default.div`
9971
- display: flex;
9972
- flex-direction: column;
9973
- gap: 0;
9974
- `;
9975
- var CompAssetTooltipRow = styled9__default.default.div`
9976
- display: flex;
9977
- justify-content: space-between;
9978
- align-items: center;
9979
- padding: 0.3rem 0;
9980
- border-bottom: 1px solid rgba(255,255,255,0.04);
9981
- &:last-child { border-bottom: none; }
9982
- span:first-child {
9983
- font-size: 0.7rem;
9984
- color: rgba(255,255,255,0.4);
9985
- }
9986
- span:last-child {
9987
- font-size: 0.75rem;
9988
- font-weight: 500;
9989
- color: #fff;
9990
- font-variant-numeric: tabular-nums;
9991
- }
9992
- `;
9993
9741
  var FeaturesPanel = styled9__default.default.div`
9994
9742
  display: flex;
9995
9743
  flex-wrap: wrap;
@@ -10088,12 +9836,13 @@ var SecurityValue = styled9__default.default.span`
10088
9836
  `;
10089
9837
  var SecurityDocLink = styled9__default.default.a`
10090
9838
  font-size: 0.82rem;
10091
- color: rgba(255,255,255,0.5);
9839
+ color: #D4AF37;
9840
+ font-weight: 600;
10092
9841
  text-decoration: none;
10093
9842
  cursor: pointer;
10094
- transition: color 0.15s;
9843
+ transition: opacity 0.15s;
10095
9844
  &:hover {
10096
- color: rgba(212,175,55,0.9);
9845
+ opacity: 0.7;
10097
9846
  }
10098
9847
  `;
10099
9848
  var DividendHistoryBtn = styled9__default.default.button`
@@ -11064,7 +10813,24 @@ var fallbackDocs = [
11064
10813
  { href: "/documents/musgrave-risk-disclosure.pdf", label: "Risk Disclosure Statement" },
11065
10814
  { href: "/documents/musgrave-building-inspection.pdf", label: "Building & Pest Inspection Report" }
11066
10815
  ];
11067
- function PropertyDocuments({ documentsData }) {
10816
+ function PropertyDocuments({ documentsData, highlightDocument, onClearHighlight }) {
10817
+ const highlightRef = React5.useRef(null);
10818
+ React5.useRef(null);
10819
+ React5.useEffect(() => {
10820
+ if (highlightDocument && highlightRef.current) {
10821
+ highlightRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
10822
+ }
10823
+ }, [highlightDocument]);
10824
+ React5.useEffect(() => {
10825
+ if (!highlightDocument || !onClearHighlight) return;
10826
+ const handler = (e) => {
10827
+ if (highlightRef.current && !highlightRef.current.contains(e.target)) {
10828
+ onClearHighlight();
10829
+ }
10830
+ };
10831
+ document.addEventListener("click", handler, true);
10832
+ return () => document.removeEventListener("click", handler, true);
10833
+ }, [highlightDocument, onClearHighlight]);
11068
10834
  const backendDocuments = Array.isArray(documentsData?.documents) ? documentsData.documents : null;
11069
10835
  const hasBackendDocuments = !!backendDocuments?.length;
11070
10836
  const documents = hasBackendDocuments ? backendDocuments : fallbackDocs.map((doc) => ({
@@ -11075,14 +10841,23 @@ function PropertyDocuments({ documentsData }) {
11075
10841
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { children: "Investment Documents" }),
11076
10842
  /* @__PURE__ */ jsxRuntime.jsx(DocList, { children: documents.map(({ documentUrl, title }) => {
11077
10843
  const isAvailable = Boolean(documentUrl);
11078
- return /* @__PURE__ */ jsxRuntime.jsx(DocItem, { children: hasBackendDocuments && isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(DocLink, { href: documentUrl, target: "_blank", rel: "noopener noreferrer", children: [
11079
- /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
11080
- title
11081
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DocItemDisabled, { children: [
11082
- /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
11083
- title,
11084
- /* @__PURE__ */ jsxRuntime.jsx(ComingSoonBadge, { children: "Coming Soon" })
11085
- ] }) }, `${title}-${documentUrl ?? "pending"}`);
10844
+ const isHighlighted = highlightDocument != null && title.toLowerCase().includes(highlightDocument.toLowerCase());
10845
+ return /* @__PURE__ */ jsxRuntime.jsx(
10846
+ DocItem,
10847
+ {
10848
+ ref: isHighlighted ? highlightRef : void 0,
10849
+ $highlighted: isHighlighted,
10850
+ children: hasBackendDocuments && isAvailable ? /* @__PURE__ */ jsxRuntime.jsxs(DocLink, { href: documentUrl, target: "_blank", rel: "noopener noreferrer", children: [
10851
+ /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
10852
+ title
10853
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(DocItemDisabled, { children: [
10854
+ /* @__PURE__ */ jsxRuntime.jsx(DocIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(DocIcon, {}) }),
10855
+ title,
10856
+ /* @__PURE__ */ jsxRuntime.jsx(ComingSoonBadge, { children: "Coming Soon" })
10857
+ ] })
10858
+ },
10859
+ `${title}-${documentUrl ?? "pending"}`
10860
+ );
11086
10861
  }) })
11087
10862
  ] });
11088
10863
  }
@@ -11111,6 +10886,10 @@ var DocList = styled9__default.default.ul`
11111
10886
  var DocItem = styled9__default.default.li`
11112
10887
  padding: 0.75rem 0;
11113
10888
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
10889
+ border-radius: ${(p) => p.$highlighted ? "6px" : "0"};
10890
+ background: ${(p) => p.$highlighted ? "rgba(212, 175, 55, 0.08)" : "transparent"};
10891
+ ${(p) => p.$highlighted ? "padding: 0.75rem;" : ""}
10892
+ transition: background 0.3s;
11114
10893
 
11115
10894
  &:last-child {
11116
10895
  border-bottom: none;
@@ -11355,6 +11134,10 @@ var SignInButton = styled9__default.default.button`
11355
11134
  background: rgba(240, 185, 11, 0.1);
11356
11135
  }
11357
11136
  `;
11137
+ function displayName(item) {
11138
+ if (item.name) return item.name;
11139
+ return item.tokenName.charAt(0).toUpperCase() + item.tokenName.slice(1);
11140
+ }
11358
11141
  function AssetSelectorBar({
11359
11142
  propertyName,
11360
11143
  tokenPrice,
@@ -11364,7 +11147,8 @@ function AssetSelectorBar({
11364
11147
  selectorItems,
11365
11148
  onSelect,
11366
11149
  trailing,
11367
- imageUrl
11150
+ imageUrl,
11151
+ badgeLabel
11368
11152
  }) {
11369
11153
  const [isDropdownOpen, setIsDropdownOpen] = React5.useState(false);
11370
11154
  const hasItems = selectorItems && selectorItems.length > 0;
@@ -11376,6 +11160,7 @@ function AssetSelectorBar({
11376
11160
  imageUrl && /* @__PURE__ */ jsxRuntime.jsx(AssetThumbnail, { src: imageUrl, alt: propertyName }),
11377
11161
  /* @__PURE__ */ jsxRuntime.jsx(AssetSelectorDropdown, { onClick: () => hasItems && setIsDropdownOpen((prev) => !prev), children: /* @__PURE__ */ jsxRuntime.jsxs(AssetName, { children: [
11378
11162
  propertyName,
11163
+ badgeLabel && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: badgeLabel }),
11379
11164
  hasItems && /* @__PURE__ */ jsxRuntime.jsx(
11380
11165
  "svg",
11381
11166
  {
@@ -11420,14 +11205,16 @@ function AssetSelectorBar({
11420
11205
  $selected: isCurrent,
11421
11206
  style: { cursor: isCurrent ? "default" : "pointer" },
11422
11207
  children: /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionInner, { children: [
11423
- item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: item.streetAddress }),
11208
+ item.imageUrl && /* @__PURE__ */ jsxRuntime.jsx(IPOOptionThumb, { src: item.imageUrl, alt: displayName(item) }),
11424
11209
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
11425
11210
  /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionName, { children: [
11426
- item.streetAddress,
11427
- item.ticker ? ` (${item.ticker})` : ""
11211
+ displayName(item),
11212
+ item.ticker ? ` (${item.ticker})` : "",
11213
+ item.badge && /* @__PURE__ */ jsxRuntime.jsx(CompetitionBadge, { children: item.badge })
11428
11214
  ] }),
11429
11215
  /* @__PURE__ */ jsxRuntime.jsxs(IPOOptionLocation, { children: [
11430
- item.suburb,
11216
+ item.streetAddress,
11217
+ item.suburb ? `, ${item.suburb}` : "",
11431
11218
  statusLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: statusLabel })
11432
11219
  ] })
11433
11220
  ] })
@@ -11444,8 +11231,8 @@ var AssetSelectorWrapper = styled9__default.default.div`
11444
11231
  var IPOAssetSelector = styled9__default.default.div`
11445
11232
  position: relative;
11446
11233
  display: flex;
11447
- justify-content: space-between;
11448
11234
  align-items: center;
11235
+ gap: 1rem;
11449
11236
  padding: 1rem 1.25rem;
11450
11237
  background: linear-gradient(135deg, var(--color-card-darker, #111) 0%, rgba(17,17,17,0.95) 100%);
11451
11238
  border-radius: 12px;
@@ -11483,7 +11270,7 @@ var AssetSelectorDropdown = styled9__default.default.div`
11483
11270
  padding: 0.5rem 0.75rem;
11484
11271
  border-radius: 8px;
11485
11272
  transition: all 0.2s ease;
11486
- flex: 1 1 auto;
11273
+ flex: 0 1 auto;
11487
11274
  min-width: 0;
11488
11275
  overflow: hidden;
11489
11276
  &:hover { background-color: rgba(255,255,255,0.05); }
@@ -11519,9 +11306,9 @@ var SelectorMetrics = styled9__default.default.div`
11519
11306
  display: flex;
11520
11307
  align-items: center;
11521
11308
  gap: 1rem;
11522
- margin-left: auto;
11523
- margin-right: 1rem;
11309
+ margin-right: auto;
11524
11310
  padding: 0.5rem 1rem;
11311
+ flex-shrink: 0;
11525
11312
  background: rgba(255,255,255,0.03);
11526
11313
  border-radius: 8px;
11527
11314
  border: 1px solid rgba(255,255,255,0.05);
@@ -11539,6 +11326,7 @@ var TrailingWrapper = styled9__default.default.div`
11539
11326
  display: flex;
11540
11327
  align-items: center;
11541
11328
  flex-shrink: 0;
11329
+ margin-left: auto;
11542
11330
 
11543
11331
  @media (max-width: 768px) {
11544
11332
  overflow-x: auto;
@@ -11656,6 +11444,19 @@ var IPOOptionName = styled9__default.default.div`
11656
11444
  color: ${"#ebebeb"};
11657
11445
  line-height: 1.3;
11658
11446
  `;
11447
+ var CompetitionBadge = styled9__default.default.span`
11448
+ margin-left: 0.4rem;
11449
+ font-size: 0.55rem;
11450
+ font-weight: 700;
11451
+ letter-spacing: 0.08em;
11452
+ text-transform: uppercase;
11453
+ color: #E6C87E;
11454
+ background: rgba(230, 200, 126, 0.1);
11455
+ border: 1px solid rgba(230, 200, 126, 0.2);
11456
+ padding: 1px 5px;
11457
+ border-radius: 3px;
11458
+ vertical-align: middle;
11459
+ `;
11659
11460
  var IPOOptionLocation = styled9__default.default.div`
11660
11461
  font-size: 0.72rem;
11661
11462
  color: rgba(255,255,255,0.38);
@@ -11726,6 +11527,7 @@ function OfferingProgressCard({
11726
11527
  totalSold,
11727
11528
  supplyToSell,
11728
11529
  opensAt,
11530
+ tradingStartsAt,
11729
11531
  subscriberCount = 0,
11730
11532
  raisedAmount,
11731
11533
  targetAmount,
@@ -11742,26 +11544,36 @@ function OfferingProgressCard({
11742
11544
  const timer = setInterval(() => setCurrentTime(/* @__PURE__ */ new Date()), 1e3);
11743
11545
  return () => clearInterval(timer);
11744
11546
  }, []);
11547
+ const [tradingCountdown, setTradingCountdown] = React5.useState(null);
11548
+ const calcCountdownFrom = (target) => {
11549
+ const now = Math.floor(Date.now() / 1e3);
11550
+ const diff = target - now;
11551
+ if (diff <= 0) return null;
11552
+ return {
11553
+ days: Math.floor(diff / 86400),
11554
+ hours: Math.floor(diff % 86400 / 3600),
11555
+ minutes: Math.floor(diff % 3600 / 60),
11556
+ seconds: diff % 60
11557
+ };
11558
+ };
11745
11559
  React5.useEffect(() => {
11746
11560
  if (!opensAt) {
11747
11561
  setCountdown(null);
11748
11562
  return;
11749
11563
  }
11750
- const calculateCountdown = () => {
11751
- const now = Math.floor(Date.now() / 1e3);
11752
- const diff = opensAt - now;
11753
- if (diff <= 0) return null;
11754
- return {
11755
- days: Math.floor(diff / 86400),
11756
- hours: Math.floor(diff % 86400 / 3600),
11757
- minutes: Math.floor(diff % 3600 / 60),
11758
- seconds: diff % 60
11759
- };
11760
- };
11761
- setCountdown(calculateCountdown());
11762
- const interval = setInterval(() => setCountdown(calculateCountdown()), 1e3);
11564
+ setCountdown(calcCountdownFrom(opensAt));
11565
+ const interval = setInterval(() => setCountdown(calcCountdownFrom(opensAt)), 1e3);
11763
11566
  return () => clearInterval(interval);
11764
11567
  }, [opensAt]);
11568
+ React5.useEffect(() => {
11569
+ if (!tradingStartsAt) {
11570
+ setTradingCountdown(null);
11571
+ return;
11572
+ }
11573
+ setTradingCountdown(calcCountdownFrom(tradingStartsAt));
11574
+ const interval = setInterval(() => setTradingCountdown(calcCountdownFrom(tradingStartsAt)), 1e3);
11575
+ return () => clearInterval(interval);
11576
+ }, [tradingStartsAt]);
11765
11577
  if (variant === "compact") {
11766
11578
  return /* @__PURE__ */ jsxRuntime.jsxs(CompactContainer, { style, className, children: [
11767
11579
  /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
@@ -11788,7 +11600,10 @@ function OfferingProgressCard({
11788
11600
  /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
11789
11601
  " Offering Progress"
11790
11602
  ] }),
11791
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
11603
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStatus === "CLOSED" || ipoStatus === "CANCELLED" ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#f6465d", children: [
11604
+ /* @__PURE__ */ jsxRuntime.jsx(StatusDot3, { $color: "#f6465d" }),
11605
+ ipoStatus === "CLOSED" ? "CLOSED" : "CANCELLED"
11606
+ ] }) : ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
11792
11607
  /* @__PURE__ */ jsxRuntime.jsx(StatusDot3, { $color: "#0ecb81", $pulse: true }),
11793
11608
  "LIVE"
11794
11609
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
@@ -11796,20 +11611,45 @@ function OfferingProgressCard({
11796
11611
  statusLabel || "Preparing"
11797
11612
  ] }) })
11798
11613
  ] }),
11799
- isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
11614
+ ipoStatus === "CLOSED" || ipoStatus === "CANCELLED" ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
11615
+ /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
11616
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { style: { color: "#f6465d" }, children: "IPO has Closed, Trading begins in" }),
11617
+ tradingCountdown ? /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
11618
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.days).padStart(2, "0") }),
11619
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
11620
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
11621
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.hours).padStart(2, "0") }),
11622
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
11623
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
11624
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.minutes).padStart(2, "0") }),
11625
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
11626
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
11627
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(tradingCountdown.seconds).padStart(2, "0") }),
11628
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
11629
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(CountdownDigits, { children: /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { style: { fontSize: "1.25rem" }, children: "Trading Now Open" }) })
11630
+ ] }),
11631
+ /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsSide, { children: [
11632
+ /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsLabel, { children: "Units Allocated" }),
11633
+ /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsValue, { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
11634
+ totalSold.toLocaleString(),
11635
+ " / ",
11636
+ supplyToSell.toLocaleString()
11637
+ ] }) })
11638
+ ] })
11639
+ ] }) : isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
11800
11640
  countdown ? /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
11801
11641
  /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { children: "Opens In" }),
11802
11642
  /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
11803
- /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.days).padStart(2, "0") }) }),
11643
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
11804
11644
  /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
11805
11645
  /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
11806
- /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.hours).padStart(2, "0") }) }),
11646
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
11807
11647
  /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
11808
11648
  /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
11809
- /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.minutes).padStart(2, "0") }) }),
11649
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
11810
11650
  /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
11811
11651
  /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
11812
- /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: /* @__PURE__ */ jsxRuntime.jsx(SlideDigit, { value: String(countdown.seconds).padStart(2, "0") }) }),
11652
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
11813
11653
  /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
11814
11654
  ] })
11815
11655
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsxRuntime.jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
@@ -12062,36 +11902,36 @@ var CountdownCenter = styled9__default.default.div`
12062
11902
  margin-bottom: 1.25rem;
12063
11903
  `;
12064
11904
  var CountdownLabel = styled9__default.default.div`
12065
- font-size: 0.7rem;
12066
- color: #D4AF37;
11905
+ font-size: 0.75rem;
11906
+ color: var(--color-text-secondary);
12067
11907
  text-transform: uppercase;
12068
- letter-spacing: 0.15em;
12069
- margin-bottom: 0.5rem;
12070
- font-weight: 600;
11908
+ letter-spacing: 0.05em;
11909
+ margin-bottom: 0.75rem;
12071
11910
  `;
12072
11911
  var CountdownDigits = styled9__default.default.div`
12073
11912
  display: flex;
12074
11913
  align-items: baseline;
12075
11914
  justify-content: center;
12076
- gap: 0.35rem;
11915
+ gap: 0.25rem;
12077
11916
  `;
12078
11917
  var CountdownNumber = styled9__default.default.span`
12079
- font-size: 2.5rem;
11918
+ font-size: 2rem;
12080
11919
  font-weight: 700;
12081
11920
  font-family: monospace;
12082
11921
  color: #D4AF37;
12083
11922
  @media (max-width: 768px) {
12084
- font-size: 1.75rem;
11923
+ font-size: 1.5rem;
12085
11924
  }
12086
11925
  `;
12087
11926
  var CountdownUnitLabel = styled9__default.default.span`
12088
- font-size: 0.85rem;
11927
+ font-size: 0.7rem;
12089
11928
  color: var(--color-text-secondary);
11929
+ margin-right: 0.25rem;
12090
11930
  `;
12091
11931
  var CountdownSeparator = styled9__default.default.span`
12092
11932
  color: rgba(255,255,255,0.2);
12093
- margin: 0 0.2rem;
12094
- font-size: 1.5rem;
11933
+ margin: 0 0.15rem;
11934
+ font-size: 1.25rem;
12095
11935
  `;
12096
11936
  var LiveBody = styled9__default.default.div`
12097
11937
  display: flex;
@@ -12176,7 +12016,7 @@ var HomePreLiveRow = styled9__default.default.div`
12176
12016
  display: flex;
12177
12017
  align-items: center;
12178
12018
  justify-content: space-between;
12179
- padding-top: 1rem;
12019
+ flex: 1;
12180
12020
  `;
12181
12021
  var HomeCountdownSide = styled9__default.default.div`
12182
12022
  display: flex;