@loafmarkets/ui 0.1.168 → 0.1.170

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 (5) hide show
  1. package/dist/index.js +215 -187
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +215 -187
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -8021,10 +8021,6 @@ function GalleryMapSection({
8021
8021
  videoUrl && /* @__PURE__ */ jsxs(FixedBtn, { $active: showVideo, onClick: () => setShowVideo((p) => !p), children: [
8022
8022
  /* @__PURE__ */ jsx(BiVideo, { size: 16 }),
8023
8023
  " Video"
8024
- ] }),
8025
- /* @__PURE__ */ jsxs(FixedBtn, { $active: false, onClick: () => setShowFullMap(true), children: [
8026
- /* @__PURE__ */ jsx(BiMap, { size: 16 }),
8027
- " Map View"
8028
8024
  ] })
8029
8025
  ] })
8030
8026
  ] }),
@@ -8093,10 +8089,10 @@ function GalleryMapSection({
8093
8089
  /* @__PURE__ */ jsx(SuburbDesc, { 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." })
8094
8090
  ] })
8095
8091
  ] }),
8096
- showFullMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false) })
8092
+ showFullMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false), mapUrl: resolvedMapUrl })
8097
8093
  ] });
8098
8094
  }
8099
- function FullMapPopup({ onClose }) {
8095
+ function FullMapPopup({ onClose, mapUrl }) {
8100
8096
  useEffect(() => {
8101
8097
  const handleEsc = (e) => {
8102
8098
  if (e.key === "Escape") onClose();
@@ -8138,7 +8134,7 @@ function FullMapPopup({ onClose }) {
8138
8134
  "iframe",
8139
8135
  {
8140
8136
  ref: iframeRef,
8141
- src: "/map?embed=true",
8137
+ src: mapUrl ?? "/map?embed=true",
8142
8138
  width: "100%",
8143
8139
  height: "100%",
8144
8140
  style: { border: 0 },
@@ -8572,7 +8568,7 @@ function PropertyOverview({
8572
8568
  const annualDividend = resolvedValuation ? resolvedValuation * 0.02 : null;
8573
8569
  const monthlyDivPerShare = annualDividend && resolvedTokensIssued ? annualDividend / 12 / resolvedTokensIssued : null;
8574
8570
  const propertyStats = [
8575
- { label: "Last Valuation", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "\u2014" },
8571
+ { label: "Property Value", value: isLoading && tokenMarketCap == null ? loadingSkeleton : tokenMarketCap ? tokenMarketCap >= 1e6 ? `$${(tokenMarketCap / 1e6).toFixed(1)}M` : `$${tokenMarketCap.toLocaleString()}` : "\u2014" },
8576
8572
  { label: "Number of Offers", value: "3" },
8577
8573
  { label: "Growth (Past 5 Years)", value: "+90%" },
8578
8574
  { label: "Last Dividend", value: isLoading && monthlyDivPerShare == null ? loadingSkeleton : monthlyDivPerShare != null ? `${(monthlyDivPerShare * 100).toFixed(1)}c per Share` : "\u2014" },
@@ -8673,41 +8669,38 @@ function PropertyOverview({
8673
8669
  ) }),
8674
8670
  /* @__PURE__ */ jsxs(Section, { children: [
8675
8671
  /* @__PURE__ */ jsx(SectionHeader, { children: "Asset Details" }),
8676
- /* @__PURE__ */ jsxs(AssetPanelsGrid, { children: [
8677
- /* @__PURE__ */ jsxs(MetricsPanel, { children: [
8678
- /* @__PURE__ */ jsx(MetricsPanelTitle, { children: "Key Metrics" }),
8679
- (landSize != null || buildingSize != null) && /* @__PURE__ */ jsxs(LandFloorCard, { children: [
8680
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
8681
- /* @__PURE__ */ jsx(MetricLabel, { children: "Land" }),
8682
- /* @__PURE__ */ jsxs(MetricValueRow, { children: [
8683
- /* @__PURE__ */ jsx(MetricBig, { children: landSize?.toLocaleString() ?? "\u2014" }),
8684
- /* @__PURE__ */ jsx(MetricUnit, { children: "sqm" })
8685
- ] })
8686
- ] }),
8687
- /* @__PURE__ */ jsx("div", { style: { width: 1, background: "rgba(212,175,55,0.3)" } }),
8688
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
8689
- /* @__PURE__ */ jsx(MetricLabel, { children: "Floor" }),
8690
- /* @__PURE__ */ jsxs(MetricValueRow, { children: [
8691
- /* @__PURE__ */ jsx(MetricBig, { children: buildingSize?.toLocaleString() ?? "\u2014" }),
8692
- /* @__PURE__ */ jsx(MetricUnit, { children: "sqm" })
8693
- ] })
8672
+ /* @__PURE__ */ jsxs(StatsGrid, { children: [
8673
+ /* @__PURE__ */ jsxs(StatsColumn, { children: [
8674
+ /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Key Metrics" }),
8675
+ landSize != null && /* @__PURE__ */ jsxs(StatRow, { children: [
8676
+ /* @__PURE__ */ jsx(StatLabel, { children: "Land Size" }),
8677
+ /* @__PURE__ */ jsxs(StatValue, { children: [
8678
+ landSize.toLocaleString(),
8679
+ " sqm"
8680
+ ] })
8681
+ ] }),
8682
+ buildingSize != null && /* @__PURE__ */ jsxs(StatRow, { children: [
8683
+ /* @__PURE__ */ jsx(StatLabel, { children: "Floor Area" }),
8684
+ /* @__PURE__ */ jsxs(StatValue, { children: [
8685
+ buildingSize.toLocaleString(),
8686
+ " sqm"
8694
8687
  ] })
8695
8688
  ] }),
8696
- /* @__PURE__ */ jsx(FeaturesGrid, { children: features.map((item, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
8697
- item.icon && /* @__PURE__ */ jsx("span", { style: { color: "rgba(255,255,255,0.6)", display: "flex", alignItems: "center", opacity: 0.45, flexShrink: 0 }, children: item.icon }),
8698
- item.value && /* @__PURE__ */ jsx("span", { style: { fontSize: "1.1rem", fontWeight: 700, color: "#fff", lineHeight: 1 }, children: item.value }),
8699
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.85rem", color: "rgba(255,255,255,0.6)", fontWeight: 400 }, children: item.label })
8689
+ /* @__PURE__ */ jsx(AssetFeatureRow, { children: features.map((item, i) => /* @__PURE__ */ jsxs(AssetFeatureItem, { children: [
8690
+ item.icon && /* @__PURE__ */ jsx(AssetFeatureIcon, { children: item.icon }),
8691
+ item.value && /* @__PURE__ */ jsx(AssetFeatureValue, { children: item.value }),
8692
+ /* @__PURE__ */ jsx(AssetFeatureLabel, { children: item.label })
8700
8693
  ] }, i)) })
8701
8694
  ] }),
8702
- /* @__PURE__ */ jsxs(InfoPanel, { children: [
8703
- /* @__PURE__ */ jsx(MetricsPanelTitle, { children: "Property Info" }),
8704
- /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.85rem" }, children: propertyInfo.map((item, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
8705
- /* @__PURE__ */ jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.6)", fontWeight: 400 }, children: item.label }),
8706
- /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.95rem", fontWeight: 600, color: item.status === "active" ? "#4CAF50" : item.status === "progress" ? "#D4AF37" : "#fff", display: "flex", alignItems: "center", gap: "0.4rem" }, children: [
8707
- item.status && /* @__PURE__ */ jsx("span", { style: { display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: item.status === "active" ? "#4CAF50" : "#D4AF37", boxShadow: item.status === "active" ? "0 0 6px rgba(76,175,80,0.5)" : "0 0 6px rgba(212,175,55,0.5)" } }),
8695
+ /* @__PURE__ */ jsxs(StatsColumn, { children: [
8696
+ /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Property Info" }),
8697
+ propertyInfo.map((item, i) => /* @__PURE__ */ jsxs(StatRow, { children: [
8698
+ /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
8699
+ /* @__PURE__ */ jsxs(StatValue, { style: { color: item.status === "active" ? "#4ade80" : item.status === "progress" ? "#D4AF37" : void 0 }, children: [
8700
+ item.status && /* @__PURE__ */ jsx("span", { style: { display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: item.status === "active" ? "#4ade80" : "#D4AF37", marginRight: 6 } }),
8708
8701
  item.value
8709
8702
  ] })
8710
- ] }, i)) })
8703
+ ] }, i))
8711
8704
  ] })
8712
8705
  ] })
8713
8706
  ] }),
@@ -8739,46 +8732,71 @@ function PropertyOverview({
8739
8732
  ] }),
8740
8733
  /* @__PURE__ */ jsxs(Section, { children: [
8741
8734
  /* @__PURE__ */ jsx(SectionHeader, { children: "Tokenholder Security" }),
8742
- /* @__PURE__ */ jsxs(SecurityTable, { children: [
8743
- /* @__PURE__ */ jsxs(SecurityRow, { children: [
8744
- /* @__PURE__ */ jsxs(SecurityRowLeft, { children: [
8745
- /* @__PURE__ */ jsx(SecurityRowLabel, { children: "Legal Structuring" }),
8746
- /* @__PURE__ */ jsx(SecurityRowLogo, { children: /* @__PURE__ */ jsx("img", { src: "/Baker_McKenzie.png", alt: "Baker McKenzie", style: { height: "22px", filter: "brightness(0) invert(1)", opacity: 0.8 } }) })
8747
- ] }),
8748
- /* @__PURE__ */ jsx(SecurityRowRight, { children: /* @__PURE__ */ jsxs(SecurityRowLinks, { children: [
8749
- /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Legal Opinion" }),
8750
- /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Structuring Memo" })
8751
- ] }) })
8735
+ /* @__PURE__ */ jsxs(SecurityCardsGrid, { children: [
8736
+ /* @__PURE__ */ jsxs(SecurityCard, { children: [
8737
+ /* @__PURE__ */ jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8738
+ /* @__PURE__ */ jsx("path", { d: "M9 12l2 2 4-4" }),
8739
+ /* @__PURE__ */ jsx("path", { d: "M12 3l8 4.5v5c0 5-3.5 8.5-8 10.5-4.5-2-8-5.5-8-10.5v-5l8-4.5z" })
8740
+ ] }) }),
8741
+ /* @__PURE__ */ jsxs(SecurityCardContent, { children: [
8742
+ /* @__PURE__ */ jsx(SecurityCardTitle, { children: "Legal Structuring" }),
8743
+ /* @__PURE__ */ jsx(SecurityCardProvider, { children: /* @__PURE__ */ jsx("img", { src: "/Baker_McKenzie.png", alt: "Baker McKenzie", style: { height: 16, filter: "brightness(0) invert(1)", opacity: 0.7 } }) }),
8744
+ /* @__PURE__ */ jsxs(SecurityCardLinks, { children: [
8745
+ /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Legal Opinion" }),
8746
+ /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Structuring Memo" })
8747
+ ] })
8748
+ ] })
8752
8749
  ] }),
8753
- /* @__PURE__ */ jsxs(SecurityRow, { children: [
8754
- /* @__PURE__ */ jsxs(SecurityRowLeft, { children: [
8755
- /* @__PURE__ */ jsx(SecurityRowLabel, { children: "Security Interest in Asset" }),
8756
- /* @__PURE__ */ jsxs(SecurityRowValue, { children: [
8750
+ /* @__PURE__ */ jsxs(SecurityCard, { children: [
8751
+ /* @__PURE__ */ jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8752
+ /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
8753
+ /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
8754
+ ] }) }),
8755
+ /* @__PURE__ */ jsxs(SecurityCardContent, { children: [
8756
+ /* @__PURE__ */ jsx(SecurityCardTitle, { children: "Security Interest in Asset" }),
8757
+ /* @__PURE__ */ jsxs(SecurityCardStatus, { children: [
8757
8758
  /* @__PURE__ */ jsx(SecurityStatusDot, {}),
8758
8759
  "Secured \u2014 NSW Land Registry"
8760
+ ] }),
8761
+ /* @__PURE__ */ jsxs(SecurityCardLinks, { children: [
8762
+ /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Mortgage Agreement" }),
8763
+ /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Registry Filing" })
8759
8764
  ] })
8760
- ] }),
8761
- /* @__PURE__ */ jsx(SecurityRowRight, { children: /* @__PURE__ */ jsxs(SecurityRowLinks, { children: [
8762
- /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Mortgage Agreement" }),
8763
- /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Registry Filing" })
8764
- ] }) })
8765
+ ] })
8765
8766
  ] }),
8766
- /* @__PURE__ */ jsxs(SecurityRow, { children: [
8767
- /* @__PURE__ */ jsxs(SecurityRowLeft, { children: [
8768
- /* @__PURE__ */ jsx(SecurityRowLabel, { children: "Bankruptcy Remote" }),
8769
- /* @__PURE__ */ jsxs(SecurityRowValue, { children: [
8767
+ /* @__PURE__ */ jsxs(SecurityCard, { children: [
8768
+ /* @__PURE__ */ jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8769
+ /* @__PURE__ */ jsx("path", { d: "M3 21h18" }),
8770
+ /* @__PURE__ */ jsx("path", { d: "M5 21V7l8-4v18" }),
8771
+ /* @__PURE__ */ jsx("path", { d: "M19 21V11l-6-4" }),
8772
+ /* @__PURE__ */ jsx("path", { d: "M9 9v.01" }),
8773
+ /* @__PURE__ */ jsx("path", { d: "M9 12v.01" }),
8774
+ /* @__PURE__ */ jsx("path", { d: "M9 15v.01" }),
8775
+ /* @__PURE__ */ jsx("path", { d: "M9 18v.01" })
8776
+ ] }) }),
8777
+ /* @__PURE__ */ jsxs(SecurityCardContent, { children: [
8778
+ /* @__PURE__ */ jsx(SecurityCardTitle, { children: "Bankruptcy Remote" }),
8779
+ /* @__PURE__ */ jsxs(SecurityCardStatus, { children: [
8770
8780
  /* @__PURE__ */ jsx(SecurityStatusDot, {}),
8771
8781
  "Active \u2014 Dedicated SPV"
8772
- ] })
8773
- ] }),
8774
- /* @__PURE__ */ jsx(SecurityRowRight, { children: /* @__PURE__ */ jsx(SecurityRowLinks, { children: /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "SPV Constitution" }) }) })
8782
+ ] }),
8783
+ /* @__PURE__ */ jsx(SecurityCardLinks, { children: /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "SPV Constitution" }) })
8784
+ ] })
8775
8785
  ] }),
8776
- /* @__PURE__ */ jsxs(SecurityRow, { $noBorder: true, children: [
8777
- /* @__PURE__ */ jsxs(SecurityRowLeft, { children: [
8778
- /* @__PURE__ */ jsx(SecurityRowLabel, { children: "Independent Valuation" }),
8779
- /* @__PURE__ */ jsx(SecurityRowLogo, { children: /* @__PURE__ */ jsx("img", { src: "/savills.png", alt: "Savills", style: { height: "18px", filter: "brightness(0) invert(1)", opacity: 0.8 } }) })
8780
- ] }),
8781
- /* @__PURE__ */ jsx(SecurityRowRight, { children: /* @__PURE__ */ jsx(SecurityRowLinks, { children: /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Valuation Report" }) }) })
8786
+ /* @__PURE__ */ jsxs(SecurityCard, { children: [
8787
+ /* @__PURE__ */ jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8788
+ /* @__PURE__ */ jsx("path", { d: "M16 3h5v5" }),
8789
+ /* @__PURE__ */ jsx("path", { d: "M8 3H3v5" }),
8790
+ /* @__PURE__ */ jsx("path", { d: "M12 22l-4-4 4-4" }),
8791
+ /* @__PURE__ */ jsx("path", { d: "M12 22l4-4-4-4" }),
8792
+ /* @__PURE__ */ jsx("path", { d: "M21 3l-9 9" }),
8793
+ /* @__PURE__ */ jsx("path", { d: "M3 3l9 9" })
8794
+ ] }) }),
8795
+ /* @__PURE__ */ jsxs(SecurityCardContent, { children: [
8796
+ /* @__PURE__ */ jsx(SecurityCardTitle, { children: "Independent Valuation" }),
8797
+ /* @__PURE__ */ jsx(SecurityCardProvider, { children: /* @__PURE__ */ jsx("img", { src: "/savills.png", alt: "Savills", style: { height: 14, filter: "brightness(0) invert(1)", opacity: 0.7 } }) }),
8798
+ /* @__PURE__ */ jsx(SecurityCardLinks, { children: /* @__PURE__ */ jsx(SecurityDocLink, { href: "#documents", children: "Valuation Report" }) })
8799
+ ] })
8782
8800
  ] })
8783
8801
  ] })
8784
8802
  ] })
@@ -8793,6 +8811,7 @@ function DividendHistoryPopup({
8793
8811
  onClose
8794
8812
  }) {
8795
8813
  const { records, priceHistory } = generateDividendHistory(valuation ?? 0, totalTokens ?? 0, tokenPrice ?? 0, realPriceHistory);
8814
+ const [highlightedIdx, setHighlightedIdx] = useState(null);
8796
8815
  useEffect(() => {
8797
8816
  const handleEsc = (e) => {
8798
8817
  if (e.key === "Escape") onClose();
@@ -8810,29 +8829,33 @@ function DividendHistoryPopup({
8810
8829
  const pad = { top: 20, right: 40, bottom: 30, left: 50 };
8811
8830
  const w = chartW - pad.left - pad.right;
8812
8831
  const h = chartH - pad.top - pad.bottom;
8813
- const minTime = priceHistory[0]?.time ?? 0;
8814
- const maxTime = priceHistory[priceHistory.length - 1]?.time ?? 1;
8832
+ const now = Date.now();
8833
+ const twelveMonthsAgo = now - 365 * 864e5;
8834
+ const minTime = Math.min(priceHistory[0]?.time ?? twelveMonthsAgo, twelveMonthsAgo);
8835
+ const maxTime = Math.max(priceHistory[priceHistory.length - 1]?.time ?? now, now);
8815
8836
  const prices = priceHistory.map((p) => p.price);
8816
8837
  const minP = Math.floor(Math.min(...prices) - 5);
8817
8838
  const maxP = Math.ceil(Math.max(...prices) + 5);
8818
8839
  const toX = (t) => pad.left + (t - minTime) / (maxTime - minTime) * w;
8819
8840
  const toY = (p) => pad.top + (1 - (p - minP) / (maxP - minP)) * h;
8820
8841
  const linePath = priceHistory.map((p, i) => `${i === 0 ? "M" : "L"}${toX(p.time).toFixed(1)},${toY(p.price).toFixed(1)}`).join(" ");
8821
- const areaPath = `${linePath} L${toX(priceHistory[priceHistory.length - 1].time).toFixed(1)},${(pad.top + h).toFixed(1)} L${toX(priceHistory[0].time).toFixed(1)},${(pad.top + h).toFixed(1)} Z`;
8842
+ const areaPath = priceHistory.length > 0 ? `${linePath} L${toX(priceHistory[priceHistory.length - 1].time).toFixed(1)},${(pad.top + h).toFixed(1)} L${toX(priceHistory[0].time).toFixed(1)},${(pad.top + h).toFixed(1)} Z` : "";
8822
8843
  const yTicks = Array.from({ length: 5 }, (_, i) => minP + (maxP - minP) / 4 * i);
8823
8844
  const monthLabels = [];
8824
- const seen = /* @__PURE__ */ new Set();
8825
- for (const p of priceHistory) {
8826
- const d = new Date(p.time);
8827
- const key = `${d.getFullYear()}-${d.getMonth()}`;
8828
- if (!seen.has(key)) {
8829
- seen.add(key);
8830
- monthLabels.push({ time: p.time, label: d.toLocaleDateString("en-AU", { month: "short" }) });
8831
- }
8832
- }
8833
- const divMarkers = dividendDates.filter((t) => t >= minTime && t <= maxTime).map((t) => {
8834
- const closest = priceHistory.reduce((best, p) => Math.abs(p.time - t) < Math.abs(best.time - t) ? p : best);
8835
- return { x: toX(t), y: toY(closest.price), price: closest.price };
8845
+ for (let i = 11; i >= 0; i--) {
8846
+ const d = /* @__PURE__ */ new Date();
8847
+ d.setMonth(d.getMonth() - i, 1);
8848
+ monthLabels.push({ time: d.getTime(), label: d.toLocaleDateString("en-AU", { month: "short" }) });
8849
+ }
8850
+ const divMarkers = dividendDates.map((t, idx) => {
8851
+ const closest = priceHistory.length > 0 ? priceHistory.reduce((best, p) => Math.abs(p.time - t) < Math.abs(best.time - t) ? p : best) : null;
8852
+ return {
8853
+ x: toX(t),
8854
+ y: closest ? toY(closest.price) : toY((minP + maxP) / 2),
8855
+ price: closest?.price ?? 0,
8856
+ recordIdx: idx,
8857
+ hasPrice: !!closest
8858
+ };
8836
8859
  });
8837
8860
  return /* @__PURE__ */ jsx(DivPopupOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(DivPopupPanel, { onClick: (e) => e.stopPropagation(), children: [
8838
8861
  /* @__PURE__ */ jsxs(DivPopupHeader, { children: [
@@ -8856,13 +8879,26 @@ function DividendHistoryPopup({
8856
8879
  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(230,200,126,0.2)" }),
8857
8880
  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(230,200,126,0)" })
8858
8881
  ] }) }),
8859
- /* @__PURE__ */ jsx("path", { d: areaPath, fill: "url(#divAreaGrad)" }),
8882
+ areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: "url(#divAreaGrad)" }),
8860
8883
  /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: "#e6c87e", strokeWidth: "1.5" }),
8861
- divMarkers.map((m, i) => /* @__PURE__ */ jsxs("g", { children: [
8862
- /* @__PURE__ */ jsx("line", { x1: m.x, x2: m.x, y1: m.y, y2: pad.top + h, stroke: "rgba(14,203,129,0.25)", strokeWidth: "1", strokeDasharray: "3,3" }),
8863
- /* @__PURE__ */ jsx("circle", { cx: m.x, cy: m.y, r: "4", fill: "#111", stroke: "#0ecb81", strokeWidth: "1.5" }),
8864
- /* @__PURE__ */ jsx("text", { x: m.x, y: m.y - 8, fill: "#0ecb81", fontSize: "8", fontWeight: "600", textAnchor: "middle", children: "$" })
8865
- ] }, i))
8884
+ divMarkers.map((m) => {
8885
+ const active = highlightedIdx === m.recordIdx;
8886
+ return /* @__PURE__ */ jsxs(
8887
+ "g",
8888
+ {
8889
+ onMouseEnter: () => setHighlightedIdx(m.recordIdx),
8890
+ onMouseLeave: () => setHighlightedIdx(null),
8891
+ style: { cursor: "pointer" },
8892
+ children: [
8893
+ /* @__PURE__ */ jsx("rect", { x: m.x - 10, y: pad.top, width: 20, height: h, fill: "transparent" }),
8894
+ /* @__PURE__ */ jsx("line", { x1: m.x, x2: m.x, y1: m.y, y2: pad.top + h, stroke: active ? "rgba(14,203,129,0.6)" : "rgba(14,203,129,0.25)", strokeWidth: active ? 1.5 : 1, strokeDasharray: "3,3" }),
8895
+ /* @__PURE__ */ jsx("circle", { cx: m.x, cy: m.y, r: active ? 6 : 4, fill: active ? "#0ecb81" : "#111", stroke: "#0ecb81", strokeWidth: active ? 2 : 1.5, style: { transition: "r 0.15s ease" } }),
8896
+ /* @__PURE__ */ jsx("text", { x: m.x, y: m.y - (active ? 10 : 8), fill: "#0ecb81", fontSize: active ? "9" : "8", fontWeight: "600", textAnchor: "middle", children: "$" })
8897
+ ]
8898
+ },
8899
+ m.recordIdx
8900
+ );
8901
+ })
8866
8902
  ] }),
8867
8903
  /* @__PURE__ */ jsxs(DivChartLegend, { children: [
8868
8904
  /* @__PURE__ */ jsxs(DivChartLegendItem, { children: [
@@ -8882,18 +8918,27 @@ function DividendHistoryPopup({
8882
8918
  /* @__PURE__ */ jsx(DivTableTH, { style: { textAlign: "right" }, children: "Dividend/Share" }),
8883
8919
  /* @__PURE__ */ jsx(DivTableTH, { style: { textAlign: "right" }, children: "Annualised Yield" })
8884
8920
  ] }) }),
8885
- /* @__PURE__ */ jsx("tbody", { children: records.map((r, i) => /* @__PURE__ */ jsxs(DivTableRow, { children: [
8886
- /* @__PURE__ */ jsx(DivTableTD, { children: r.exDate }),
8887
- /* @__PURE__ */ jsx(DivTableTD, { children: r.payDate }),
8888
- /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8889
- "$",
8890
- r.perShare.toFixed(4)
8891
- ] }),
8892
- /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8893
- r.yieldPct.toFixed(2),
8894
- "%"
8895
- ] })
8896
- ] }, i)) })
8921
+ /* @__PURE__ */ jsx("tbody", { children: records.map((r, i) => /* @__PURE__ */ jsxs(
8922
+ DivTableRow,
8923
+ {
8924
+ $highlighted: highlightedIdx === i,
8925
+ onMouseEnter: () => setHighlightedIdx(i),
8926
+ onMouseLeave: () => setHighlightedIdx(null),
8927
+ children: [
8928
+ /* @__PURE__ */ jsx(DivTableTD, { children: r.exDate }),
8929
+ /* @__PURE__ */ jsx(DivTableTD, { children: r.payDate }),
8930
+ /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8931
+ "$",
8932
+ r.perShare.toFixed(4)
8933
+ ] }),
8934
+ /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8935
+ r.yieldPct.toFixed(2),
8936
+ "%"
8937
+ ] })
8938
+ ]
8939
+ },
8940
+ i
8941
+ )) })
8897
8942
  ] }) })
8898
8943
  ] }) });
8899
8944
  }
@@ -9083,68 +9128,35 @@ var StatValue = styled9.span`
9083
9128
  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
9084
9129
  font-variant-numeric: tabular-nums;
9085
9130
  `;
9086
- var AssetPanelsGrid = styled9.div`
9087
- display: grid;
9088
- grid-template-columns: 1fr 1fr;
9089
- gap: 1rem;
9090
- @media (max-width: 768px) { grid-template-columns: 1fr; }
9091
- `;
9092
- var MetricsPanel = styled9.div`
9093
- background: rgba(255,255,255,0.025);
9094
- border-radius: 10px;
9095
- border: 1px solid rgba(255,255,255,0.06);
9096
- padding: 1.25rem 1.5rem;
9097
- overflow: hidden;
9098
- `;
9099
- var InfoPanel = styled9(MetricsPanel)``;
9100
- var MetricsPanelTitle = styled9.div`
9101
- font-size: 0.65rem;
9102
- color: #D4AF37;
9103
- text-transform: uppercase;
9104
- letter-spacing: 0.12em;
9105
- font-weight: 600;
9106
- margin-bottom: 1rem;
9107
- padding-bottom: 0.75rem;
9108
- border-bottom: 1px solid rgba(255,255,255,0.06);
9109
- `;
9110
- var LandFloorCard = styled9.div`
9111
- background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(184,134,11,0.06));
9112
- border-radius: 10px;
9113
- padding: 0.85rem 1rem;
9114
- border: 1px solid rgba(212,175,55,0.25);
9131
+ var AssetFeatureRow = styled9.div`
9115
9132
  display: flex;
9116
- gap: 1rem;
9117
- margin-bottom: 0.75rem;
9133
+ flex-wrap: wrap;
9134
+ gap: 0.5rem 1.25rem;
9135
+ padding-top: 0.75rem;
9136
+ margin-top: 0.25rem;
9137
+ border-top: 1px solid rgba(255,255,255,0.04);
9118
9138
  `;
9119
- var MetricLabel = styled9.div`
9120
- font-size: 0.65rem;
9121
- color: #D4AF37;
9122
- text-transform: uppercase;
9123
- letter-spacing: 0.1em;
9124
- margin-bottom: 0.4rem;
9125
- font-weight: 500;
9139
+ var AssetFeatureItem = styled9.div`
9140
+ display: flex;
9141
+ align-items: center;
9142
+ gap: 0.35rem;
9126
9143
  `;
9127
- var MetricValueRow = styled9.div`
9144
+ var AssetFeatureIcon = styled9.span`
9145
+ color: rgba(255,255,255,0.35);
9128
9146
  display: flex;
9129
- align-items: baseline;
9130
- gap: 0.25rem;
9147
+ align-items: center;
9148
+ flex-shrink: 0;
9131
9149
  `;
9132
- var MetricBig = styled9.span`
9133
- font-size: 1.5rem;
9134
- font-weight: 700;
9135
- color: #D4AF37;
9150
+ var AssetFeatureValue = styled9.span`
9151
+ font-size: 0.95rem;
9152
+ font-weight: 600;
9153
+ color: #fff;
9136
9154
  line-height: 1;
9137
9155
  `;
9138
- var MetricUnit = styled9.span`
9139
- font-size: 0.7rem;
9140
- color: rgba(212,175,55,0.7);
9141
- font-weight: 500;
9142
- `;
9143
- var FeaturesGrid = styled9.div`
9144
- display: grid;
9145
- grid-template-columns: repeat(3, 1fr);
9146
- gap: 0.75rem;
9147
- @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
9156
+ var AssetFeatureLabel = styled9.span`
9157
+ font-size: 0.8rem;
9158
+ color: rgba(255,255,255,0.5);
9159
+ font-weight: 400;
9148
9160
  `;
9149
9161
  var TradingHoursCard = styled9.div`
9150
9162
  background: rgba(255,255,255,0.025);
@@ -9179,40 +9191,56 @@ var TradingHoursNote = styled9.div`
9179
9191
  color: rgba(255,255,255,0.35);
9180
9192
  border-top: 1px solid rgba(255,255,255,0.04);
9181
9193
  `;
9182
- var SecurityTable = styled9.div`
9194
+ var SecurityCardsGrid = styled9.div`
9195
+ display: grid;
9196
+ grid-template-columns: 1fr 1fr;
9197
+ gap: 0.75rem;
9198
+ @media (max-width: 768px) { grid-template-columns: 1fr; }
9199
+ `;
9200
+ var SecurityCard = styled9.div`
9201
+ background: rgba(255,255,255,0.025);
9202
+ border: 1px solid rgba(255,255,255,0.06);
9203
+ border-radius: 10px;
9204
+ padding: 1.25rem;
9183
9205
  display: flex;
9184
- flex-direction: column;
9206
+ gap: 1rem;
9207
+ transition: border-color 0.2s ease;
9208
+ &:hover { border-color: rgba(255,255,255,0.12); }
9185
9209
  `;
9186
- var SecurityRow = styled9.div`
9210
+ var SecurityCardIcon = styled9.div`
9211
+ width: 40px;
9212
+ height: 40px;
9213
+ border-radius: 10px;
9214
+ background: rgba(74,222,128,0.08);
9215
+ border: 1px solid rgba(74,222,128,0.15);
9187
9216
  display: flex;
9188
9217
  align-items: center;
9189
- justify-content: space-between;
9190
- padding: 1rem 0;
9191
- border-bottom: ${({ $noBorder }) => $noBorder ? "none" : "1px solid rgba(255,255,255,0.06)"};
9192
- gap: 1rem;
9193
- @media (max-width: 640px) { flex-direction: column; align-items: flex-start; }
9218
+ justify-content: center;
9219
+ flex-shrink: 0;
9220
+ color: #4ade80;
9194
9221
  `;
9195
- var SecurityRowLeft = styled9.div`
9222
+ var SecurityCardContent = styled9.div`
9196
9223
  display: flex;
9197
9224
  flex-direction: column;
9198
9225
  gap: 4px;
9226
+ min-width: 0;
9199
9227
  `;
9200
- var SecurityRowLabel = styled9.div`
9201
- font-size: 0.88rem;
9228
+ var SecurityCardTitle = styled9.div`
9229
+ font-size: 0.85rem;
9202
9230
  font-weight: 600;
9203
9231
  color: #fff;
9204
9232
  `;
9205
- var SecurityRowValue = styled9.div`
9233
+ var SecurityCardStatus = styled9.div`
9206
9234
  display: flex;
9207
9235
  align-items: center;
9208
9236
  gap: 6px;
9209
- font-size: 0.78rem;
9237
+ font-size: 0.75rem;
9210
9238
  color: rgba(255,255,255,0.5);
9211
9239
  `;
9212
- var SecurityRowLogo = styled9.div`
9240
+ var SecurityCardProvider = styled9.div`
9213
9241
  display: flex;
9214
9242
  align-items: center;
9215
- margin-top: 2px;
9243
+ margin-top: 1px;
9216
9244
  `;
9217
9245
  var SecurityStatusDot = styled9.span`
9218
9246
  width: 6px;
@@ -9222,21 +9250,17 @@ var SecurityStatusDot = styled9.span`
9222
9250
  display: inline-block;
9223
9251
  flex-shrink: 0;
9224
9252
  `;
9225
- var SecurityRowRight = styled9.div`
9226
- display: flex;
9227
- align-items: center;
9228
- flex-shrink: 0;
9229
- `;
9230
- var SecurityRowLinks = styled9.div`
9253
+ var SecurityCardLinks = styled9.div`
9231
9254
  display: flex;
9232
- gap: 1.25rem;
9255
+ gap: 0.75rem;
9256
+ margin-top: 4px;
9233
9257
  `;
9234
9258
  var SecurityDocLink = styled9.a`
9235
- font-size: 0.78rem;
9236
- color: rgba(255,255,255,0.45);
9259
+ font-size: 0.72rem;
9260
+ color: rgba(255,255,255,0.4);
9237
9261
  text-decoration: underline;
9238
9262
  text-underline-offset: 3px;
9239
- text-decoration-color: rgba(255,255,255,0.2);
9263
+ text-decoration-color: rgba(255,255,255,0.15);
9240
9264
  cursor: pointer;
9241
9265
  transition: color 0.15s, text-decoration-color 0.15s;
9242
9266
  &:hover {
@@ -9439,7 +9463,11 @@ var DivTableTH = styled9.th`
9439
9463
  `;
9440
9464
  var DivTableRow = styled9.tr`
9441
9465
  border-bottom: 1px solid rgba(255,255,255,0.03);
9466
+ background: ${(p) => p.$highlighted ? "rgba(14,203,129,0.08)" : "transparent"};
9467
+ transition: background 0.15s ease;
9468
+ cursor: pointer;
9442
9469
  &:last-child { border-bottom: none; }
9470
+ &:hover { background: rgba(14,203,129,0.08); }
9443
9471
  `;
9444
9472
  var DivTableTD = styled9.td`
9445
9473
  padding: 0.55rem 0.5rem;
@@ -10505,7 +10533,7 @@ function AssetSelectorBar({
10505
10533
  i > 0 && /* @__PURE__ */ jsx(Separator, { children: "|" }),
10506
10534
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
10507
10535
  /* @__PURE__ */ jsxs("div", { children: [
10508
- /* @__PURE__ */ jsx(MetricLabel2, { children: m.label }),
10536
+ /* @__PURE__ */ jsx(MetricLabel, { children: m.label }),
10509
10537
  /* @__PURE__ */ jsx(MetricValue, { $accent: !!m.accent, $secondary: !!m.secondary, children: m.value })
10510
10538
  ] }),
10511
10539
  m.change != null && /* @__PURE__ */ jsxs(MetricChange, { $positive: m.change >= 0, children: [
@@ -10645,7 +10673,7 @@ var SelectorMetrics = styled9.div`
10645
10673
  gap: 0.5rem;
10646
10674
  }
10647
10675
  `;
10648
- var MetricLabel2 = styled9.span`
10676
+ var MetricLabel = styled9.span`
10649
10677
  font-size: 0.75rem;
10650
10678
  color: var(--color-text-secondary);
10651
10679
  text-transform: uppercase;
@@ -10954,14 +10982,14 @@ function OfferingProgressCard({
10954
10982
  ] }) : /* @__PURE__ */ jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }),
10955
10983
  /* @__PURE__ */ jsxs(MetricsRow, { children: [
10956
10984
  /* @__PURE__ */ jsxs("div", { children: [
10957
- /* @__PURE__ */ jsx(MetricLabel3, { children: isPrivateClient ? "Token Price (Pre-Offering)" : "Token Price" }),
10985
+ /* @__PURE__ */ jsx(MetricLabel2, { children: isPrivateClient ? "Token Price (Pre-Offering)" : "Token Price" }),
10958
10986
  /* @__PURE__ */ jsxs(MetricValue2, { $accent: true, children: [
10959
10987
  "$",
10960
10988
  tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
10961
10989
  ] })
10962
10990
  ] }),
10963
10991
  /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
10964
- /* @__PURE__ */ jsx(MetricLabel3, { children: isPrivateClient ? "Offering Valuation (Pre-Offering)" : "Offering Valuation" }),
10992
+ /* @__PURE__ */ jsx(MetricLabel2, { children: isPrivateClient ? "Offering Valuation (Pre-Offering)" : "Offering Valuation" }),
10965
10993
  /* @__PURE__ */ jsxs(MetricValue2, { children: [
10966
10994
  "$",
10967
10995
  offeringValuation.toLocaleString()
@@ -11086,7 +11114,7 @@ var MetricsRow = styled9.div`
11086
11114
  border-top: 1px solid rgba(255,255,255,0.06);
11087
11115
  padding-top: 1rem;
11088
11116
  `;
11089
- var MetricLabel3 = styled9.div`
11117
+ var MetricLabel2 = styled9.div`
11090
11118
  font-size: 0.6rem;
11091
11119
  color: var(--color-text-secondary);
11092
11120
  text-transform: uppercase;