@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.js CHANGED
@@ -8047,10 +8047,6 @@ function GalleryMapSection({
8047
8047
  videoUrl && /* @__PURE__ */ jsxRuntime.jsxs(FixedBtn, { $active: showVideo, onClick: () => setShowVideo((p) => !p), children: [
8048
8048
  /* @__PURE__ */ jsxRuntime.jsx(bi.BiVideo, { size: 16 }),
8049
8049
  " Video"
8050
- ] }),
8051
- /* @__PURE__ */ jsxRuntime.jsxs(FixedBtn, { $active: false, onClick: () => setShowFullMap(true), children: [
8052
- /* @__PURE__ */ jsxRuntime.jsx(bi.BiMap, { size: 16 }),
8053
- " Map View"
8054
8050
  ] })
8055
8051
  ] })
8056
8052
  ] }),
@@ -8119,10 +8115,10 @@ function GalleryMapSection({
8119
8115
  /* @__PURE__ */ jsxRuntime.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." })
8120
8116
  ] })
8121
8117
  ] }),
8122
- showFullMap && /* @__PURE__ */ jsxRuntime.jsx(FullMapPopup, { onClose: () => setShowFullMap(false) })
8118
+ showFullMap && /* @__PURE__ */ jsxRuntime.jsx(FullMapPopup, { onClose: () => setShowFullMap(false), mapUrl: resolvedMapUrl })
8123
8119
  ] });
8124
8120
  }
8125
- function FullMapPopup({ onClose }) {
8121
+ function FullMapPopup({ onClose, mapUrl }) {
8126
8122
  React5.useEffect(() => {
8127
8123
  const handleEsc = (e) => {
8128
8124
  if (e.key === "Escape") onClose();
@@ -8164,7 +8160,7 @@ function FullMapPopup({ onClose }) {
8164
8160
  "iframe",
8165
8161
  {
8166
8162
  ref: iframeRef,
8167
- src: "/map?embed=true",
8163
+ src: mapUrl ?? "/map?embed=true",
8168
8164
  width: "100%",
8169
8165
  height: "100%",
8170
8166
  style: { border: 0 },
@@ -8598,7 +8594,7 @@ function PropertyOverview({
8598
8594
  const annualDividend = resolvedValuation ? resolvedValuation * 0.02 : null;
8599
8595
  const monthlyDivPerShare = annualDividend && resolvedTokensIssued ? annualDividend / 12 / resolvedTokensIssued : null;
8600
8596
  const propertyStats = [
8601
- { label: "Last Valuation", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "\u2014" },
8597
+ { label: "Property Value", value: isLoading && tokenMarketCap == null ? loadingSkeleton : tokenMarketCap ? tokenMarketCap >= 1e6 ? `$${(tokenMarketCap / 1e6).toFixed(1)}M` : `$${tokenMarketCap.toLocaleString()}` : "\u2014" },
8602
8598
  { label: "Number of Offers", value: "3" },
8603
8599
  { label: "Growth (Past 5 Years)", value: "+90%" },
8604
8600
  { label: "Last Dividend", value: isLoading && monthlyDivPerShare == null ? loadingSkeleton : monthlyDivPerShare != null ? `${(monthlyDivPerShare * 100).toFixed(1)}c per Share` : "\u2014" },
@@ -8699,41 +8695,38 @@ function PropertyOverview({
8699
8695
  ) }),
8700
8696
  /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
8701
8697
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Asset Details" }),
8702
- /* @__PURE__ */ jsxRuntime.jsxs(AssetPanelsGrid, { children: [
8703
- /* @__PURE__ */ jsxRuntime.jsxs(MetricsPanel, { children: [
8704
- /* @__PURE__ */ jsxRuntime.jsx(MetricsPanelTitle, { children: "Key Metrics" }),
8705
- (landSize != null || buildingSize != null) && /* @__PURE__ */ jsxRuntime.jsxs(LandFloorCard, { children: [
8706
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
8707
- /* @__PURE__ */ jsxRuntime.jsx(MetricLabel, { children: "Land" }),
8708
- /* @__PURE__ */ jsxRuntime.jsxs(MetricValueRow, { children: [
8709
- /* @__PURE__ */ jsxRuntime.jsx(MetricBig, { children: landSize?.toLocaleString() ?? "\u2014" }),
8710
- /* @__PURE__ */ jsxRuntime.jsx(MetricUnit, { children: "sqm" })
8711
- ] })
8712
- ] }),
8713
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: 1, background: "rgba(212,175,55,0.3)" } }),
8714
- /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
8715
- /* @__PURE__ */ jsxRuntime.jsx(MetricLabel, { children: "Floor" }),
8716
- /* @__PURE__ */ jsxRuntime.jsxs(MetricValueRow, { children: [
8717
- /* @__PURE__ */ jsxRuntime.jsx(MetricBig, { children: buildingSize?.toLocaleString() ?? "\u2014" }),
8718
- /* @__PURE__ */ jsxRuntime.jsx(MetricUnit, { children: "sqm" })
8719
- ] })
8698
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
8699
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
8700
+ /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Key Metrics" }),
8701
+ landSize != null && /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
8702
+ /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Land Size" }),
8703
+ /* @__PURE__ */ jsxRuntime.jsxs(StatValue, { children: [
8704
+ landSize.toLocaleString(),
8705
+ " sqm"
8706
+ ] })
8707
+ ] }),
8708
+ buildingSize != null && /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
8709
+ /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: "Floor Area" }),
8710
+ /* @__PURE__ */ jsxRuntime.jsxs(StatValue, { children: [
8711
+ buildingSize.toLocaleString(),
8712
+ " sqm"
8720
8713
  ] })
8721
8714
  ] }),
8722
- /* @__PURE__ */ jsxRuntime.jsx(FeaturesGrid, { children: features.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
8723
- item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "rgba(255,255,255,0.6)", display: "flex", alignItems: "center", opacity: 0.45, flexShrink: 0 }, children: item.icon }),
8724
- item.value && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "1.1rem", fontWeight: 700, color: "#fff", lineHeight: 1 }, children: item.value }),
8725
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.85rem", color: "rgba(255,255,255,0.6)", fontWeight: 400 }, children: item.label })
8715
+ /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureRow, { children: features.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(AssetFeatureItem, { children: [
8716
+ item.icon && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureIcon, { children: item.icon }),
8717
+ item.value && /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureValue, { children: item.value }),
8718
+ /* @__PURE__ */ jsxRuntime.jsx(AssetFeatureLabel, { children: item.label })
8726
8719
  ] }, i)) })
8727
8720
  ] }),
8728
- /* @__PURE__ */ jsxRuntime.jsxs(InfoPanel, { children: [
8729
- /* @__PURE__ */ jsxRuntime.jsx(MetricsPanelTitle, { children: "Property Info" }),
8730
- /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.85rem" }, children: propertyInfo.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
8731
- /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "0.8rem", color: "rgba(255,255,255,0.6)", fontWeight: 400 }, children: item.label }),
8732
- /* @__PURE__ */ jsxRuntime.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: [
8733
- item.status && /* @__PURE__ */ jsxRuntime.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)" } }),
8721
+ /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
8722
+ /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Property Info" }),
8723
+ propertyInfo.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
8724
+ /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
8725
+ /* @__PURE__ */ jsxRuntime.jsxs(StatValue, { style: { color: item.status === "active" ? "#4ade80" : item.status === "progress" ? "#D4AF37" : void 0 }, children: [
8726
+ item.status && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: item.status === "active" ? "#4ade80" : "#D4AF37", marginRight: 6 } }),
8734
8727
  item.value
8735
8728
  ] })
8736
- ] }, i)) })
8729
+ ] }, i))
8737
8730
  ] })
8738
8731
  ] })
8739
8732
  ] }),
@@ -8765,46 +8758,71 @@ function PropertyOverview({
8765
8758
  ] }),
8766
8759
  /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
8767
8760
  /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Tokenholder Security" }),
8768
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityTable, { children: [
8769
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
8770
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowLeft, { children: [
8771
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLabel, { children: "Legal Structuring" }),
8772
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLogo, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/Baker_McKenzie.png", alt: "Baker McKenzie", style: { height: "22px", filter: "brightness(0) invert(1)", opacity: 0.8 } }) })
8773
- ] }),
8774
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowRight, { children: /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowLinks, { children: [
8775
- /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Legal Opinion" }),
8776
- /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Structuring Memo" })
8777
- ] }) })
8761
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardsGrid, { children: [
8762
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCard, { children: [
8763
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8764
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 12l2 2 4-4" }),
8765
+ /* @__PURE__ */ jsxRuntime.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" })
8766
+ ] }) }),
8767
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardContent, { children: [
8768
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardTitle, { children: "Legal Structuring" }),
8769
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/Baker_McKenzie.png", alt: "Baker McKenzie", style: { height: 16, filter: "brightness(0) invert(1)", opacity: 0.7 } }) }),
8770
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardLinks, { children: [
8771
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Legal Opinion" }),
8772
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Structuring Memo" })
8773
+ ] })
8774
+ ] })
8778
8775
  ] }),
8779
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
8780
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowLeft, { children: [
8781
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLabel, { children: "Security Interest in Asset" }),
8782
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowValue, { children: [
8776
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCard, { children: [
8777
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8778
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
8779
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
8780
+ ] }) }),
8781
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardContent, { children: [
8782
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardTitle, { children: "Security Interest in Asset" }),
8783
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardStatus, { children: [
8783
8784
  /* @__PURE__ */ jsxRuntime.jsx(SecurityStatusDot, {}),
8784
8785
  "Secured \u2014 NSW Land Registry"
8786
+ ] }),
8787
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardLinks, { children: [
8788
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Mortgage Agreement" }),
8789
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Registry Filing" })
8785
8790
  ] })
8786
- ] }),
8787
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowRight, { children: /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowLinks, { children: [
8788
- /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Mortgage Agreement" }),
8789
- /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Registry Filing" })
8790
- ] }) })
8791
+ ] })
8791
8792
  ] }),
8792
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { children: [
8793
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowLeft, { children: [
8794
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLabel, { children: "Bankruptcy Remote" }),
8795
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowValue, { children: [
8793
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCard, { children: [
8794
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8795
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 21h18" }),
8796
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 21V7l8-4v18" }),
8797
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 21V11l-6-4" }),
8798
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9v.01" }),
8799
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 12v.01" }),
8800
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 15v.01" }),
8801
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18v.01" })
8802
+ ] }) }),
8803
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardContent, { children: [
8804
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardTitle, { children: "Bankruptcy Remote" }),
8805
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardStatus, { children: [
8796
8806
  /* @__PURE__ */ jsxRuntime.jsx(SecurityStatusDot, {}),
8797
8807
  "Active \u2014 Dedicated SPV"
8798
- ] })
8799
- ] }),
8800
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowRight, { children: /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLinks, { children: /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "SPV Constitution" }) }) })
8808
+ ] }),
8809
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardLinks, { children: /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "SPV Constitution" }) })
8810
+ ] })
8801
8811
  ] }),
8802
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRow, { $noBorder: true, children: [
8803
- /* @__PURE__ */ jsxRuntime.jsxs(SecurityRowLeft, { children: [
8804
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLabel, { children: "Independent Valuation" }),
8805
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLogo, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/savills.png", alt: "Savills", style: { height: "18px", filter: "brightness(0) invert(1)", opacity: 0.8 } }) })
8806
- ] }),
8807
- /* @__PURE__ */ jsxRuntime.jsx(SecurityRowRight, { children: /* @__PURE__ */ jsxRuntime.jsx(SecurityRowLinks, { children: /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Valuation Report" }) }) })
8812
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCard, { children: [
8813
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardIcon, { children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
8814
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 3h5v5" }),
8815
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3H3v5" }),
8816
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22l-4-4 4-4" }),
8817
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22l4-4-4-4" }),
8818
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3l-9 9" }),
8819
+ /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3l9 9" })
8820
+ ] }) }),
8821
+ /* @__PURE__ */ jsxRuntime.jsxs(SecurityCardContent, { children: [
8822
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardTitle, { children: "Independent Valuation" }),
8823
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardProvider, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: "/savills.png", alt: "Savills", style: { height: 14, filter: "brightness(0) invert(1)", opacity: 0.7 } }) }),
8824
+ /* @__PURE__ */ jsxRuntime.jsx(SecurityCardLinks, { children: /* @__PURE__ */ jsxRuntime.jsx(SecurityDocLink, { href: "#documents", children: "Valuation Report" }) })
8825
+ ] })
8808
8826
  ] })
8809
8827
  ] })
8810
8828
  ] })
@@ -8819,6 +8837,7 @@ function DividendHistoryPopup({
8819
8837
  onClose
8820
8838
  }) {
8821
8839
  const { records, priceHistory } = generateDividendHistory(valuation ?? 0, totalTokens ?? 0, tokenPrice ?? 0, realPriceHistory);
8840
+ const [highlightedIdx, setHighlightedIdx] = React5.useState(null);
8822
8841
  React5.useEffect(() => {
8823
8842
  const handleEsc = (e) => {
8824
8843
  if (e.key === "Escape") onClose();
@@ -8836,29 +8855,33 @@ function DividendHistoryPopup({
8836
8855
  const pad = { top: 20, right: 40, bottom: 30, left: 50 };
8837
8856
  const w = chartW - pad.left - pad.right;
8838
8857
  const h = chartH - pad.top - pad.bottom;
8839
- const minTime = priceHistory[0]?.time ?? 0;
8840
- const maxTime = priceHistory[priceHistory.length - 1]?.time ?? 1;
8858
+ const now = Date.now();
8859
+ const twelveMonthsAgo = now - 365 * 864e5;
8860
+ const minTime = Math.min(priceHistory[0]?.time ?? twelveMonthsAgo, twelveMonthsAgo);
8861
+ const maxTime = Math.max(priceHistory[priceHistory.length - 1]?.time ?? now, now);
8841
8862
  const prices = priceHistory.map((p) => p.price);
8842
8863
  const minP = Math.floor(Math.min(...prices) - 5);
8843
8864
  const maxP = Math.ceil(Math.max(...prices) + 5);
8844
8865
  const toX = (t) => pad.left + (t - minTime) / (maxTime - minTime) * w;
8845
8866
  const toY = (p) => pad.top + (1 - (p - minP) / (maxP - minP)) * h;
8846
8867
  const linePath = priceHistory.map((p, i) => `${i === 0 ? "M" : "L"}${toX(p.time).toFixed(1)},${toY(p.price).toFixed(1)}`).join(" ");
8847
- 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`;
8868
+ 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` : "";
8848
8869
  const yTicks = Array.from({ length: 5 }, (_, i) => minP + (maxP - minP) / 4 * i);
8849
8870
  const monthLabels = [];
8850
- const seen = /* @__PURE__ */ new Set();
8851
- for (const p of priceHistory) {
8852
- const d = new Date(p.time);
8853
- const key = `${d.getFullYear()}-${d.getMonth()}`;
8854
- if (!seen.has(key)) {
8855
- seen.add(key);
8856
- monthLabels.push({ time: p.time, label: d.toLocaleDateString("en-AU", { month: "short" }) });
8857
- }
8858
- }
8859
- const divMarkers = dividendDates.filter((t) => t >= minTime && t <= maxTime).map((t) => {
8860
- const closest = priceHistory.reduce((best, p) => Math.abs(p.time - t) < Math.abs(best.time - t) ? p : best);
8861
- return { x: toX(t), y: toY(closest.price), price: closest.price };
8871
+ for (let i = 11; i >= 0; i--) {
8872
+ const d = /* @__PURE__ */ new Date();
8873
+ d.setMonth(d.getMonth() - i, 1);
8874
+ monthLabels.push({ time: d.getTime(), label: d.toLocaleDateString("en-AU", { month: "short" }) });
8875
+ }
8876
+ const divMarkers = dividendDates.map((t, idx) => {
8877
+ const closest = priceHistory.length > 0 ? priceHistory.reduce((best, p) => Math.abs(p.time - t) < Math.abs(best.time - t) ? p : best) : null;
8878
+ return {
8879
+ x: toX(t),
8880
+ y: closest ? toY(closest.price) : toY((minP + maxP) / 2),
8881
+ price: closest?.price ?? 0,
8882
+ recordIdx: idx,
8883
+ hasPrice: !!closest
8884
+ };
8862
8885
  });
8863
8886
  return /* @__PURE__ */ jsxRuntime.jsx(DivPopupOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(DivPopupPanel, { onClick: (e) => e.stopPropagation(), children: [
8864
8887
  /* @__PURE__ */ jsxRuntime.jsxs(DivPopupHeader, { children: [
@@ -8882,13 +8905,26 @@ function DividendHistoryPopup({
8882
8905
  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "rgba(230,200,126,0.2)" }),
8883
8906
  /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "rgba(230,200,126,0)" })
8884
8907
  ] }) }),
8885
- /* @__PURE__ */ jsxRuntime.jsx("path", { d: areaPath, fill: "url(#divAreaGrad)" }),
8908
+ areaPath && /* @__PURE__ */ jsxRuntime.jsx("path", { d: areaPath, fill: "url(#divAreaGrad)" }),
8886
8909
  /* @__PURE__ */ jsxRuntime.jsx("path", { d: linePath, fill: "none", stroke: "#e6c87e", strokeWidth: "1.5" }),
8887
- divMarkers.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
8888
- /* @__PURE__ */ jsxRuntime.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" }),
8889
- /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: m.x, cy: m.y, r: "4", fill: "#111", stroke: "#0ecb81", strokeWidth: "1.5" }),
8890
- /* @__PURE__ */ jsxRuntime.jsx("text", { x: m.x, y: m.y - 8, fill: "#0ecb81", fontSize: "8", fontWeight: "600", textAnchor: "middle", children: "$" })
8891
- ] }, i))
8910
+ divMarkers.map((m) => {
8911
+ const active = highlightedIdx === m.recordIdx;
8912
+ return /* @__PURE__ */ jsxRuntime.jsxs(
8913
+ "g",
8914
+ {
8915
+ onMouseEnter: () => setHighlightedIdx(m.recordIdx),
8916
+ onMouseLeave: () => setHighlightedIdx(null),
8917
+ style: { cursor: "pointer" },
8918
+ children: [
8919
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: m.x - 10, y: pad.top, width: 20, height: h, fill: "transparent" }),
8920
+ /* @__PURE__ */ jsxRuntime.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" }),
8921
+ /* @__PURE__ */ jsxRuntime.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" } }),
8922
+ /* @__PURE__ */ jsxRuntime.jsx("text", { x: m.x, y: m.y - (active ? 10 : 8), fill: "#0ecb81", fontSize: active ? "9" : "8", fontWeight: "600", textAnchor: "middle", children: "$" })
8923
+ ]
8924
+ },
8925
+ m.recordIdx
8926
+ );
8927
+ })
8892
8928
  ] }),
8893
8929
  /* @__PURE__ */ jsxRuntime.jsxs(DivChartLegend, { children: [
8894
8930
  /* @__PURE__ */ jsxRuntime.jsxs(DivChartLegendItem, { children: [
@@ -8908,18 +8944,27 @@ function DividendHistoryPopup({
8908
8944
  /* @__PURE__ */ jsxRuntime.jsx(DivTableTH, { style: { textAlign: "right" }, children: "Dividend/Share" }),
8909
8945
  /* @__PURE__ */ jsxRuntime.jsx(DivTableTH, { style: { textAlign: "right" }, children: "Annualised Yield" })
8910
8946
  ] }) }),
8911
- /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: records.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs(DivTableRow, { children: [
8912
- /* @__PURE__ */ jsxRuntime.jsx(DivTableTD, { children: r.exDate }),
8913
- /* @__PURE__ */ jsxRuntime.jsx(DivTableTD, { children: r.payDate }),
8914
- /* @__PURE__ */ jsxRuntime.jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8915
- "$",
8916
- r.perShare.toFixed(4)
8917
- ] }),
8918
- /* @__PURE__ */ jsxRuntime.jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8919
- r.yieldPct.toFixed(2),
8920
- "%"
8921
- ] })
8922
- ] }, i)) })
8947
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: records.map((r, i) => /* @__PURE__ */ jsxRuntime.jsxs(
8948
+ DivTableRow,
8949
+ {
8950
+ $highlighted: highlightedIdx === i,
8951
+ onMouseEnter: () => setHighlightedIdx(i),
8952
+ onMouseLeave: () => setHighlightedIdx(null),
8953
+ children: [
8954
+ /* @__PURE__ */ jsxRuntime.jsx(DivTableTD, { children: r.exDate }),
8955
+ /* @__PURE__ */ jsxRuntime.jsx(DivTableTD, { children: r.payDate }),
8956
+ /* @__PURE__ */ jsxRuntime.jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8957
+ "$",
8958
+ r.perShare.toFixed(4)
8959
+ ] }),
8960
+ /* @__PURE__ */ jsxRuntime.jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
8961
+ r.yieldPct.toFixed(2),
8962
+ "%"
8963
+ ] })
8964
+ ]
8965
+ },
8966
+ i
8967
+ )) })
8923
8968
  ] }) })
8924
8969
  ] }) });
8925
8970
  }
@@ -9109,68 +9154,35 @@ var StatValue = styled9__default.default.span`
9109
9154
  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
9110
9155
  font-variant-numeric: tabular-nums;
9111
9156
  `;
9112
- var AssetPanelsGrid = styled9__default.default.div`
9113
- display: grid;
9114
- grid-template-columns: 1fr 1fr;
9115
- gap: 1rem;
9116
- @media (max-width: 768px) { grid-template-columns: 1fr; }
9117
- `;
9118
- var MetricsPanel = styled9__default.default.div`
9119
- background: rgba(255,255,255,0.025);
9120
- border-radius: 10px;
9121
- border: 1px solid rgba(255,255,255,0.06);
9122
- padding: 1.25rem 1.5rem;
9123
- overflow: hidden;
9124
- `;
9125
- var InfoPanel = styled9__default.default(MetricsPanel)``;
9126
- var MetricsPanelTitle = styled9__default.default.div`
9127
- font-size: 0.65rem;
9128
- color: #D4AF37;
9129
- text-transform: uppercase;
9130
- letter-spacing: 0.12em;
9131
- font-weight: 600;
9132
- margin-bottom: 1rem;
9133
- padding-bottom: 0.75rem;
9134
- border-bottom: 1px solid rgba(255,255,255,0.06);
9135
- `;
9136
- var LandFloorCard = styled9__default.default.div`
9137
- background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(184,134,11,0.06));
9138
- border-radius: 10px;
9139
- padding: 0.85rem 1rem;
9140
- border: 1px solid rgba(212,175,55,0.25);
9157
+ var AssetFeatureRow = styled9__default.default.div`
9141
9158
  display: flex;
9142
- gap: 1rem;
9143
- margin-bottom: 0.75rem;
9159
+ flex-wrap: wrap;
9160
+ gap: 0.5rem 1.25rem;
9161
+ padding-top: 0.75rem;
9162
+ margin-top: 0.25rem;
9163
+ border-top: 1px solid rgba(255,255,255,0.04);
9144
9164
  `;
9145
- var MetricLabel = styled9__default.default.div`
9146
- font-size: 0.65rem;
9147
- color: #D4AF37;
9148
- text-transform: uppercase;
9149
- letter-spacing: 0.1em;
9150
- margin-bottom: 0.4rem;
9151
- font-weight: 500;
9165
+ var AssetFeatureItem = styled9__default.default.div`
9166
+ display: flex;
9167
+ align-items: center;
9168
+ gap: 0.35rem;
9152
9169
  `;
9153
- var MetricValueRow = styled9__default.default.div`
9170
+ var AssetFeatureIcon = styled9__default.default.span`
9171
+ color: rgba(255,255,255,0.35);
9154
9172
  display: flex;
9155
- align-items: baseline;
9156
- gap: 0.25rem;
9173
+ align-items: center;
9174
+ flex-shrink: 0;
9157
9175
  `;
9158
- var MetricBig = styled9__default.default.span`
9159
- font-size: 1.5rem;
9160
- font-weight: 700;
9161
- color: #D4AF37;
9176
+ var AssetFeatureValue = styled9__default.default.span`
9177
+ font-size: 0.95rem;
9178
+ font-weight: 600;
9179
+ color: #fff;
9162
9180
  line-height: 1;
9163
9181
  `;
9164
- var MetricUnit = styled9__default.default.span`
9165
- font-size: 0.7rem;
9166
- color: rgba(212,175,55,0.7);
9167
- font-weight: 500;
9168
- `;
9169
- var FeaturesGrid = styled9__default.default.div`
9170
- display: grid;
9171
- grid-template-columns: repeat(3, 1fr);
9172
- gap: 0.75rem;
9173
- @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
9182
+ var AssetFeatureLabel = styled9__default.default.span`
9183
+ font-size: 0.8rem;
9184
+ color: rgba(255,255,255,0.5);
9185
+ font-weight: 400;
9174
9186
  `;
9175
9187
  var TradingHoursCard = styled9__default.default.div`
9176
9188
  background: rgba(255,255,255,0.025);
@@ -9205,40 +9217,56 @@ var TradingHoursNote = styled9__default.default.div`
9205
9217
  color: rgba(255,255,255,0.35);
9206
9218
  border-top: 1px solid rgba(255,255,255,0.04);
9207
9219
  `;
9208
- var SecurityTable = styled9__default.default.div`
9220
+ var SecurityCardsGrid = styled9__default.default.div`
9221
+ display: grid;
9222
+ grid-template-columns: 1fr 1fr;
9223
+ gap: 0.75rem;
9224
+ @media (max-width: 768px) { grid-template-columns: 1fr; }
9225
+ `;
9226
+ var SecurityCard = styled9__default.default.div`
9227
+ background: rgba(255,255,255,0.025);
9228
+ border: 1px solid rgba(255,255,255,0.06);
9229
+ border-radius: 10px;
9230
+ padding: 1.25rem;
9209
9231
  display: flex;
9210
- flex-direction: column;
9232
+ gap: 1rem;
9233
+ transition: border-color 0.2s ease;
9234
+ &:hover { border-color: rgba(255,255,255,0.12); }
9211
9235
  `;
9212
- var SecurityRow = styled9__default.default.div`
9236
+ var SecurityCardIcon = styled9__default.default.div`
9237
+ width: 40px;
9238
+ height: 40px;
9239
+ border-radius: 10px;
9240
+ background: rgba(74,222,128,0.08);
9241
+ border: 1px solid rgba(74,222,128,0.15);
9213
9242
  display: flex;
9214
9243
  align-items: center;
9215
- justify-content: space-between;
9216
- padding: 1rem 0;
9217
- border-bottom: ${({ $noBorder }) => $noBorder ? "none" : "1px solid rgba(255,255,255,0.06)"};
9218
- gap: 1rem;
9219
- @media (max-width: 640px) { flex-direction: column; align-items: flex-start; }
9244
+ justify-content: center;
9245
+ flex-shrink: 0;
9246
+ color: #4ade80;
9220
9247
  `;
9221
- var SecurityRowLeft = styled9__default.default.div`
9248
+ var SecurityCardContent = styled9__default.default.div`
9222
9249
  display: flex;
9223
9250
  flex-direction: column;
9224
9251
  gap: 4px;
9252
+ min-width: 0;
9225
9253
  `;
9226
- var SecurityRowLabel = styled9__default.default.div`
9227
- font-size: 0.88rem;
9254
+ var SecurityCardTitle = styled9__default.default.div`
9255
+ font-size: 0.85rem;
9228
9256
  font-weight: 600;
9229
9257
  color: #fff;
9230
9258
  `;
9231
- var SecurityRowValue = styled9__default.default.div`
9259
+ var SecurityCardStatus = styled9__default.default.div`
9232
9260
  display: flex;
9233
9261
  align-items: center;
9234
9262
  gap: 6px;
9235
- font-size: 0.78rem;
9263
+ font-size: 0.75rem;
9236
9264
  color: rgba(255,255,255,0.5);
9237
9265
  `;
9238
- var SecurityRowLogo = styled9__default.default.div`
9266
+ var SecurityCardProvider = styled9__default.default.div`
9239
9267
  display: flex;
9240
9268
  align-items: center;
9241
- margin-top: 2px;
9269
+ margin-top: 1px;
9242
9270
  `;
9243
9271
  var SecurityStatusDot = styled9__default.default.span`
9244
9272
  width: 6px;
@@ -9248,21 +9276,17 @@ var SecurityStatusDot = styled9__default.default.span`
9248
9276
  display: inline-block;
9249
9277
  flex-shrink: 0;
9250
9278
  `;
9251
- var SecurityRowRight = styled9__default.default.div`
9252
- display: flex;
9253
- align-items: center;
9254
- flex-shrink: 0;
9255
- `;
9256
- var SecurityRowLinks = styled9__default.default.div`
9279
+ var SecurityCardLinks = styled9__default.default.div`
9257
9280
  display: flex;
9258
- gap: 1.25rem;
9281
+ gap: 0.75rem;
9282
+ margin-top: 4px;
9259
9283
  `;
9260
9284
  var SecurityDocLink = styled9__default.default.a`
9261
- font-size: 0.78rem;
9262
- color: rgba(255,255,255,0.45);
9285
+ font-size: 0.72rem;
9286
+ color: rgba(255,255,255,0.4);
9263
9287
  text-decoration: underline;
9264
9288
  text-underline-offset: 3px;
9265
- text-decoration-color: rgba(255,255,255,0.2);
9289
+ text-decoration-color: rgba(255,255,255,0.15);
9266
9290
  cursor: pointer;
9267
9291
  transition: color 0.15s, text-decoration-color 0.15s;
9268
9292
  &:hover {
@@ -9465,7 +9489,11 @@ var DivTableTH = styled9__default.default.th`
9465
9489
  `;
9466
9490
  var DivTableRow = styled9__default.default.tr`
9467
9491
  border-bottom: 1px solid rgba(255,255,255,0.03);
9492
+ background: ${(p) => p.$highlighted ? "rgba(14,203,129,0.08)" : "transparent"};
9493
+ transition: background 0.15s ease;
9494
+ cursor: pointer;
9468
9495
  &:last-child { border-bottom: none; }
9496
+ &:hover { background: rgba(14,203,129,0.08); }
9469
9497
  `;
9470
9498
  var DivTableTD = styled9__default.default.td`
9471
9499
  padding: 0.55rem 0.5rem;
@@ -10531,7 +10559,7 @@ function AssetSelectorBar({
10531
10559
  i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Separator, { children: "|" }),
10532
10560
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
10533
10561
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10534
- /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: m.label }),
10562
+ /* @__PURE__ */ jsxRuntime.jsx(MetricLabel, { children: m.label }),
10535
10563
  /* @__PURE__ */ jsxRuntime.jsx(MetricValue, { $accent: !!m.accent, $secondary: !!m.secondary, children: m.value })
10536
10564
  ] }),
10537
10565
  m.change != null && /* @__PURE__ */ jsxRuntime.jsxs(MetricChange, { $positive: m.change >= 0, children: [
@@ -10671,7 +10699,7 @@ var SelectorMetrics = styled9__default.default.div`
10671
10699
  gap: 0.5rem;
10672
10700
  }
10673
10701
  `;
10674
- var MetricLabel2 = styled9__default.default.span`
10702
+ var MetricLabel = styled9__default.default.span`
10675
10703
  font-size: 0.75rem;
10676
10704
  color: var(--color-text-secondary);
10677
10705
  text-transform: uppercase;
@@ -10980,14 +11008,14 @@ function OfferingProgressCard({
10980
11008
  ] }) : /* @__PURE__ */ jsxRuntime.jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }),
10981
11009
  /* @__PURE__ */ jsxRuntime.jsxs(MetricsRow, { children: [
10982
11010
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
10983
- /* @__PURE__ */ jsxRuntime.jsx(MetricLabel3, { children: isPrivateClient ? "Token Price (Pre-Offering)" : "Token Price" }),
11011
+ /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: isPrivateClient ? "Token Price (Pre-Offering)" : "Token Price" }),
10984
11012
  /* @__PURE__ */ jsxRuntime.jsxs(MetricValue2, { $accent: true, children: [
10985
11013
  "$",
10986
11014
  tokenPrice.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
10987
11015
  ] })
10988
11016
  ] }),
10989
11017
  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right" }, children: [
10990
- /* @__PURE__ */ jsxRuntime.jsx(MetricLabel3, { children: isPrivateClient ? "Offering Valuation (Pre-Offering)" : "Offering Valuation" }),
11018
+ /* @__PURE__ */ jsxRuntime.jsx(MetricLabel2, { children: isPrivateClient ? "Offering Valuation (Pre-Offering)" : "Offering Valuation" }),
10991
11019
  /* @__PURE__ */ jsxRuntime.jsxs(MetricValue2, { children: [
10992
11020
  "$",
10993
11021
  offeringValuation.toLocaleString()
@@ -11112,7 +11140,7 @@ var MetricsRow = styled9__default.default.div`
11112
11140
  border-top: 1px solid rgba(255,255,255,0.06);
11113
11141
  padding-top: 1rem;
11114
11142
  `;
11115
- var MetricLabel3 = styled9__default.default.div`
11143
+ var MetricLabel2 = styled9__default.default.div`
11116
11144
  font-size: 0.6rem;
11117
11145
  color: var(--color-text-secondary);
11118
11146
  text-transform: uppercase;