@loafmarkets/ui 0.1.168 → 0.1.169

package/dist/index.mjs

@@ -8021,10 +8021,6 @@ function GalleryMapSection({
           videoUrl && /* @__PURE__ */ jsxs(FixedBtn, { $active: showVideo, onClick: () => setShowVideo((p) => !p), children: [
             /* @__PURE__ */ jsx(BiVideo, { size: 16 }),
             " Video"
-          ] }),
-          /* @__PURE__ */ jsxs(FixedBtn, { $active: false, onClick: () => setShowFullMap(true), children: [
-            /* @__PURE__ */ jsx(BiMap, { size: 16 }),
-            " Map View"
           ] })
         ] })
       ] }),
@@ -8093,10 +8089,10 @@ function GalleryMapSection({
         /* @__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." })
       ] })
     ] }),
-    showFullMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false) })
+    showFullMap && /* @__PURE__ */ jsx(FullMapPopup, { onClose: () => setShowFullMap(false), mapUrl: resolvedMapUrl })
   ] });
 }
-function FullMapPopup({ onClose }) {
+function FullMapPopup({ onClose, mapUrl }) {
   useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape") onClose();
@@ -8138,7 +8134,7 @@ function FullMapPopup({ onClose }) {
       "iframe",
       {
         ref: iframeRef,
-        src: "/map?embed=true",
+        src: mapUrl ?? "/map?embed=true",
         width: "100%",
         height: "100%",
         style: { border: 0 },
@@ -8572,7 +8568,7 @@ function PropertyOverview({
   const annualDividend = resolvedValuation ? resolvedValuation * 0.02 : null;
   const monthlyDivPerShare = annualDividend && resolvedTokensIssued ? annualDividend / 12 / resolvedTokensIssued : null;
   const propertyStats = [
-    { label: "Last Valuation", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "\u2014" },
+    { label: "Property Value", value: isLoading && tokenMarketCap == null ? loadingSkeleton : tokenMarketCap ? tokenMarketCap >= 1e6 ? `$${(tokenMarketCap / 1e6).toFixed(1)}M` : `$${tokenMarketCap.toLocaleString()}` : "\u2014" },
     { label: "Number of Offers", value: "3" },
     { label: "Growth (Past 5 Years)", value: "+90%" },
     { label: "Last Dividend", value: isLoading && monthlyDivPerShare == null ? loadingSkeleton : monthlyDivPerShare != null ? `${(monthlyDivPerShare * 100).toFixed(1)}c per Share` : "\u2014" },
@@ -8793,6 +8789,7 @@ function DividendHistoryPopup({
   onClose
 }) {
   const { records, priceHistory } = generateDividendHistory(valuation ?? 0, totalTokens ?? 0, tokenPrice ?? 0, realPriceHistory);
+  const [highlightedIdx, setHighlightedIdx] = useState(null);
   useEffect(() => {
     const handleEsc = (e) => {
       if (e.key === "Escape") onClose();
@@ -8810,29 +8807,33 @@ function DividendHistoryPopup({
   const pad = { top: 20, right: 40, bottom: 30, left: 50 };
   const w = chartW - pad.left - pad.right;
   const h = chartH - pad.top - pad.bottom;
-  const minTime = priceHistory[0]?.time ?? 0;
-  const maxTime = priceHistory[priceHistory.length - 1]?.time ?? 1;
+  const now = Date.now();
+  const twelveMonthsAgo = now - 365 * 864e5;
+  const minTime = Math.min(priceHistory[0]?.time ?? twelveMonthsAgo, twelveMonthsAgo);
+  const maxTime = Math.max(priceHistory[priceHistory.length - 1]?.time ?? now, now);
   const prices = priceHistory.map((p) => p.price);
   const minP = Math.floor(Math.min(...prices) - 5);
   const maxP = Math.ceil(Math.max(...prices) + 5);
   const toX = (t) => pad.left + (t - minTime) / (maxTime - minTime) * w;
   const toY = (p) => pad.top + (1 - (p - minP) / (maxP - minP)) * h;
   const linePath = priceHistory.map((p, i) => `${i === 0 ? "M" : "L"}${toX(p.time).toFixed(1)},${toY(p.price).toFixed(1)}`).join(" ");
-  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`;
+  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` : "";
   const yTicks = Array.from({ length: 5 }, (_, i) => minP + (maxP - minP) / 4 * i);
   const monthLabels = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const p of priceHistory) {
-    const d = new Date(p.time);
-    const key = `${d.getFullYear()}-${d.getMonth()}`;
-    if (!seen.has(key)) {
-      seen.add(key);
-      monthLabels.push({ time: p.time, label: d.toLocaleDateString("en-AU", { month: "short" }) });
-    }
-  }
-  const divMarkers = dividendDates.filter((t) => t >= minTime && t <= maxTime).map((t) => {
-    const closest = priceHistory.reduce((best, p) => Math.abs(p.time - t) < Math.abs(best.time - t) ? p : best);
-    return { x: toX(t), y: toY(closest.price), price: closest.price };
+  for (let i = 11; i >= 0; i--) {
+    const d = /* @__PURE__ */ new Date();
+    d.setMonth(d.getMonth() - i, 1);
+    monthLabels.push({ time: d.getTime(), label: d.toLocaleDateString("en-AU", { month: "short" }) });
+  }
+  const divMarkers = dividendDates.map((t, idx) => {
+    const closest = priceHistory.length > 0 ? priceHistory.reduce((best, p) => Math.abs(p.time - t) < Math.abs(best.time - t) ? p : best) : null;
+    return {
+      x: toX(t),
+      y: closest ? toY(closest.price) : toY((minP + maxP) / 2),
+      price: closest?.price ?? 0,
+      recordIdx: idx,
+      hasPrice: !!closest
+    };
   });
   return /* @__PURE__ */ jsx(DivPopupOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(DivPopupPanel, { onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxs(DivPopupHeader, { children: [
@@ -8856,13 +8857,26 @@ function DividendHistoryPopup({
           /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(230,200,126,0.2)" }),
           /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(230,200,126,0)" })
         ] }) }),
-        /* @__PURE__ */ jsx("path", { d: areaPath, fill: "url(#divAreaGrad)" }),
+        areaPath && /* @__PURE__ */ jsx("path", { d: areaPath, fill: "url(#divAreaGrad)" }),
         /* @__PURE__ */ jsx("path", { d: linePath, fill: "none", stroke: "#e6c87e", strokeWidth: "1.5" }),
-        divMarkers.map((m, i) => /* @__PURE__ */ jsxs("g", { children: [
-          /* @__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" }),
-          /* @__PURE__ */ jsx("circle", { cx: m.x, cy: m.y, r: "4", fill: "#111", stroke: "#0ecb81", strokeWidth: "1.5" }),
-          /* @__PURE__ */ jsx("text", { x: m.x, y: m.y - 8, fill: "#0ecb81", fontSize: "8", fontWeight: "600", textAnchor: "middle", children: "$" })
-        ] }, i))
+        divMarkers.map((m) => {
+          const active = highlightedIdx === m.recordIdx;
+          return /* @__PURE__ */ jsxs(
+            "g",
+            {
+              onMouseEnter: () => setHighlightedIdx(m.recordIdx),
+              onMouseLeave: () => setHighlightedIdx(null),
+              style: { cursor: "pointer" },
+              children: [
+                /* @__PURE__ */ jsx("rect", { x: m.x - 10, y: pad.top, width: 20, height: h, fill: "transparent" }),
+                /* @__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" }),
+                /* @__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" } }),
+                /* @__PURE__ */ jsx("text", { x: m.x, y: m.y - (active ? 10 : 8), fill: "#0ecb81", fontSize: active ? "9" : "8", fontWeight: "600", textAnchor: "middle", children: "$" })
+              ]
+            },
+            m.recordIdx
+          );
+        })
       ] }),
       /* @__PURE__ */ jsxs(DivChartLegend, { children: [
         /* @__PURE__ */ jsxs(DivChartLegendItem, { children: [
@@ -8882,18 +8896,27 @@ function DividendHistoryPopup({
         /* @__PURE__ */ jsx(DivTableTH, { style: { textAlign: "right" }, children: "Dividend/Share" }),
         /* @__PURE__ */ jsx(DivTableTH, { style: { textAlign: "right" }, children: "Annualised Yield" })
       ] }) }),
-      /* @__PURE__ */ jsx("tbody", { children: records.map((r, i) => /* @__PURE__ */ jsxs(DivTableRow, { children: [
-        /* @__PURE__ */ jsx(DivTableTD, { children: r.exDate }),
-        /* @__PURE__ */ jsx(DivTableTD, { children: r.payDate }),
-        /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
-          "$",
-          r.perShare.toFixed(4)
-        ] }),
-        /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
-          r.yieldPct.toFixed(2),
-          "%"
-        ] })
-      ] }, i)) })
+      /* @__PURE__ */ jsx("tbody", { children: records.map((r, i) => /* @__PURE__ */ jsxs(
+        DivTableRow,
+        {
+          $highlighted: highlightedIdx === i,
+          onMouseEnter: () => setHighlightedIdx(i),
+          onMouseLeave: () => setHighlightedIdx(null),
+          children: [
+            /* @__PURE__ */ jsx(DivTableTD, { children: r.exDate }),
+            /* @__PURE__ */ jsx(DivTableTD, { children: r.payDate }),
+            /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
+              "$",
+              r.perShare.toFixed(4)
+            ] }),
+            /* @__PURE__ */ jsxs(DivTableTD, { style: { textAlign: "right", fontVariantNumeric: "tabular-nums" }, children: [
+              r.yieldPct.toFixed(2),
+              "%"
+            ] })
+          ]
+        },
+        i
+      )) })
     ] }) })
   ] }) });
 }
@@ -9439,7 +9462,11 @@ var DivTableTH = styled9.th`
 `;
 var DivTableRow = styled9.tr`
   border-bottom: 1px solid rgba(255,255,255,0.03);
+  background: ${(p) => p.$highlighted ? "rgba(14,203,129,0.08)" : "transparent"};
+  transition: background 0.15s ease;
+  cursor: pointer;
   &:last-child { border-bottom: none; }
+  &:hover { background: rgba(14,203,129,0.08); }
 `;
 var DivTableTD = styled9.td`
   padding: 0.55rem 0.5rem;