@loafmarkets/ui 0.1.170 → 0.1.171

package/dist/index.mjs

@@ -8512,7 +8512,7 @@ function PropertyOverview({
     }
     return f;
   })();
-  const propertyInfo = propertyInfoProp ?? (() => {
+  propertyInfoProp ?? (() => {
     const info = [...DEFAULT_PROPERTY_INFO];
     if (propertyTypeLabel && !overviewData) info[0] = { label: "Property Type", value: propertyTypeLabel };
     if (overviewData) {
@@ -8668,39 +8668,134 @@ function PropertyOverview({
       }
     ) }),
     /* @__PURE__ */ jsxs(Section, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "Asset Details" }),
+      /* @__PURE__ */ jsx(SectionHeader, { children: "Investment Profile" }),
+      /* @__PURE__ */ jsxs(InvestmentNarrativesRow, { children: [
+        /* @__PURE__ */ jsxs(NarrativeCard, { children: [
+          /* @__PURE__ */ jsx(NarrativeIcon, { children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }) }),
+          /* @__PURE__ */ jsx(NarrativeTitle, { children: "Generational Compounding" }),
+          /* @__PURE__ */ jsx(NarrativeDesc, { children: "Acquired in 1976 for \xA340,000 \u2014 compounded through every market cycle to a current valuation exceeding A$20M." })
+        ] }),
+        /* @__PURE__ */ jsxs(NarrativeCard, { children: [
+          /* @__PURE__ */ jsx(NarrativeIcon, { children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: /* @__PURE__ */ jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) }) }),
+          /* @__PURE__ */ jsx(NarrativeTitle, { children: "Permanent Scarcity" }),
+          /* @__PURE__ */ jsx(NarrativeDesc, { children: "Heritage harbour-front estates in Mosman cannot be replicated. Sustained global demand into this safe-haven supports long-term price growth." })
+        ] }),
+        /* @__PURE__ */ jsxs(NarrativeCard, { children: [
+          /* @__PURE__ */ jsx(NarrativeIcon, { children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx("path", { d: "M12 6v6l4 2" })
+          ] }) }),
+          /* @__PURE__ */ jsx(NarrativeTitle, { children: "Liquidity Premium" }),
+          /* @__PURE__ */ jsx(NarrativeDesc, { children: "Listed assets historically trade at a 20\u201330% premium to unlisted counterparts. First individual property admitted to a continuously traded market." })
+        ] })
+      ] }),
       /* @__PURE__ */ jsxs(StatsGrid, { children: [
         /* @__PURE__ */ jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Key Metrics" }),
-          landSize != null && /* @__PURE__ */ jsxs(StatRow, { children: [
-            /* @__PURE__ */ jsx(StatLabel, { children: "Land Size" }),
+          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Capital History" }),
+          /* @__PURE__ */ jsxs(TimelineWrap, { children: [
+            /* @__PURE__ */ jsxs(TimelineEntry, { children: [
+              /* @__PURE__ */ jsx(TimelineYear, { children: "1880s" }),
+              /* @__PURE__ */ jsx(TimelineDot, {}),
+              /* @__PURE__ */ jsx(TimelineDetail, { children: /* @__PURE__ */ jsx(TimelineLabel, { children: "Built \u2014 Pre-Federation" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(TimelineEntry, { children: [
+              /* @__PURE__ */ jsx(TimelineYear, { children: "1976" }),
+              /* @__PURE__ */ jsx(TimelineDot, {}),
+              /* @__PURE__ */ jsxs(TimelineDetail, { children: [
+                /* @__PURE__ */ jsx(TimelineLabel, { children: "Sold" }),
+                /* @__PURE__ */ jsx(TimelinePrice, { children: "\xA340,000" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(TimelineEntry, { children: [
+              /* @__PURE__ */ jsx(TimelineYear, { children: "1993" }),
+              /* @__PURE__ */ jsx(TimelineDot, {}),
+              /* @__PURE__ */ jsxs(TimelineDetail, { children: [
+                /* @__PURE__ */ jsx(TimelineLabel, { children: "Sold" }),
+                /* @__PURE__ */ jsx(TimelinePrice, { children: "$1.33M" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(TimelineEntry, { children: [
+              /* @__PURE__ */ jsx(TimelineYear, { children: "2006" }),
+              /* @__PURE__ */ jsx(TimelineDot, {}),
+              /* @__PURE__ */ jsxs(TimelineDetail, { children: [
+                /* @__PURE__ */ jsx(TimelineLabel, { children: "Sold" }),
+                /* @__PURE__ */ jsx(TimelinePrice, { children: "$7.86M" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(TimelineEntry, { children: [
+              /* @__PURE__ */ jsx(TimelineYear, { children: "2021" }),
+              /* @__PURE__ */ jsx(TimelineDot, {}),
+              /* @__PURE__ */ jsxs(TimelineDetail, { children: [
+                /* @__PURE__ */ jsx(TimelineLabel, { children: "Sold \u2014 COVID correction" }),
+                /* @__PURE__ */ jsx(TimelinePrice, { children: "$9.09M" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(TimelineEntry, { $last: true, children: [
+              /* @__PURE__ */ jsx(TimelineYear, { children: "2026" }),
+              /* @__PURE__ */ jsx(TimelineDot, { $active: true }),
+              /* @__PURE__ */ jsxs(TimelineDetail, { children: [
+                /* @__PURE__ */ jsx(TimelineLabel, { children: "Loaf Offering" }),
+                /* @__PURE__ */ jsx(TimelinePrice, { $gold: true, children: "$18.65M" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ComparableSalesTitle, { children: "Comparable Sales" }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "200A Raglan St, Mosman" }),
             /* @__PURE__ */ jsxs(StatValue, { children: [
-              landSize.toLocaleString(),
+              "$16.07M ",
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.3)", fontWeight: 400 }, children: "Mar 2022" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "7 Bradleys Head Rd, Mosman" }),
+            /* @__PURE__ */ jsxs(StatValue, { children: [
+              "$27.96M ",
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "0.7rem", color: "rgba(255,255,255,0.3)", fontWeight: 400 }, children: "Aug 2024" })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(StatsColumn, { children: [
+          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Asset Specification" }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "Land (Freehold)" }),
+            /* @__PURE__ */ jsxs(StatValue, { children: [
+              landSize?.toLocaleString() ?? "1,848",
               " sqm"
             ] })
           ] }),
-          buildingSize != null && /* @__PURE__ */ jsxs(StatRow, { children: [
-            /* @__PURE__ */ jsx(StatLabel, { children: "Floor Area" }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "Interior" }),
             /* @__PURE__ */ jsxs(StatValue, { children: [
-              buildingSize.toLocaleString(),
+              buildingSize?.toLocaleString() ?? "~800",
               " sqm"
             ] })
           ] }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "Built" }),
+            /* @__PURE__ */ jsx(StatValue, { children: "1880 \u2014 Heritage Listed" })
+          ] }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "Zoning" }),
+            /* @__PURE__ */ jsx(StatValue, { children: "R3 \u2014 Development Potential" })
+          ] }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "Heritage Premium" }),
+            /* @__PURE__ */ jsx(StatValue, { style: { color: "#4ade80" }, children: "+12% vs non-heritage" })
+          ] }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "Suburb Median" }),
+            /* @__PURE__ */ jsx(StatValue, { children: "$4.2M (Mosman)" })
+          ] }),
+          /* @__PURE__ */ jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsx(StatLabel, { children: "5yr Suburb Growth" }),
+            /* @__PURE__ */ jsx(StatValue, { style: { color: "#4ade80" }, children: "+90%" })
+          ] }),
           /* @__PURE__ */ jsx(AssetFeatureRow, { children: features.map((item, i) => /* @__PURE__ */ jsxs(AssetFeatureItem, { children: [
             item.icon && /* @__PURE__ */ jsx(AssetFeatureIcon, { children: item.icon }),
             item.value && /* @__PURE__ */ jsx(AssetFeatureValue, { children: item.value }),
             /* @__PURE__ */ jsx(AssetFeatureLabel, { children: item.label })
           ] }, i)) })
-        ] }),
-        /* @__PURE__ */ jsxs(StatsColumn, { children: [
-          /* @__PURE__ */ jsx(StatsColumnHeader, { children: "Property Info" }),
-          propertyInfo.map((item, i) => /* @__PURE__ */ jsxs(StatRow, { children: [
-            /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
-            /* @__PURE__ */ jsxs(StatValue, { style: { color: item.status === "active" ? "#4ade80" : item.status === "progress" ? "#D4AF37" : void 0 }, children: [
-              item.status && /* @__PURE__ */ jsx("span", { style: { display: "inline-block", width: 6, height: 6, borderRadius: "50%", background: item.status === "active" ? "#4ade80" : "#D4AF37", marginRight: 6 } }),
-              item.value
-            ] })
-          ] }, i))
         ] })
       ] })
     ] }),
@@ -9128,6 +9223,102 @@ var StatValue = styled9.span`
   color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
+var InvestmentNarrativesRow = styled9.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  @media (max-width: 768px) { grid-template-columns: 1fr; }
+`;
+var NarrativeCard = styled9.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  transition: border-color 0.2s ease;
+  &:hover { border-color: rgba(212,175,55,0.25); }
+`;
+var NarrativeIcon = styled9.div`
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: rgba(212,175,55,0.08);
+  border: 1px solid rgba(212,175,55,0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #D4AF37;
+  flex-shrink: 0;
+`;
+var NarrativeTitle = styled9.div`
+  font-size: 0.88rem;
+  font-weight: 600;
+  color: #fff;
+`;
+var NarrativeDesc = styled9.div`
+  font-size: 0.78rem;
+  color: rgba(255,255,255,0.45);
+  line-height: 1.55;
+`;
+var TimelineWrap = styled9.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-left: 0;
+`;
+var TimelineEntry = styled9.div`
+  display: grid;
+  grid-template-columns: 48px 12px 1fr;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.55rem 0;
+  border-bottom: ${(p) => p.$last ? "none" : "1px solid rgba(255,255,255,0.03)"};
+`;
+var TimelineYear = styled9.span`
+  font-size: 0.72rem;
+  font-weight: 500;
+  color: rgba(255,255,255,0.4);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+`;
+var TimelineDot = styled9.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${(p) => p.$active ? "#D4AF37" : "rgba(255,255,255,0.15)"};
+  border: ${(p) => p.$active ? "2px solid rgba(212,175,55,0.4)" : "none"};
+  justify-self: center;
+`;
+var TimelineDetail = styled9.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;
+var TimelineLabel = styled9.span`
+  font-size: 0.8rem;
+  color: rgba(255,255,255,0.6);
+`;
+var TimelinePrice = styled9.span`
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  font-variant-numeric: tabular-nums;
+`;
+var ComparableSalesTitle = styled9.div`
+  font-size: 0.65rem;
+  color: rgba(255,255,255,0.35);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 500;
+  margin-top: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-top: 1px solid rgba(255,255,255,0.04);
+`;
 var AssetFeatureRow = styled9.div`
   display: flex;
   flex-wrap: wrap;