@loafmarkets/ui 0.1.136 → 0.1.138

package/dist/index.js

@@ -8248,6 +8248,29 @@ var GymIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16"
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6h4" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 18h4" })
 ] });
+var ShieldIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) });
+var LockIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+] });
+var FileCheckIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 15l2 2 4-4" })
+] });
+var BuildingIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#D4AF37", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "2", width: "16", height: "20", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 22v-4h6v4" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 6h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 6h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 10h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 14h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 10h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 14h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 10h.01" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 14h.01" })
+] });
 var DEFAULT_FEATURES = [
   { icon: BedIcon, value: "\u2014", label: "Beds" },
   { icon: BathIcon, value: "\u2014", label: "Baths" },
@@ -8265,6 +8288,16 @@ var DEFAULT_PROPERTY_INFO = [
   { label: "Status", value: "N/A" }
 ];
 var DEFAULT_DESCRIPTION = "Property description not available.";
+var TOKENHOLDER_PROTECTIONS = [
+  { icon: ShieldIcon, title: "SPV Structure", desc: "Each property is held in a dedicated Special Purpose Vehicle, isolating investor assets from platform risk." },
+  { icon: LockIcon, title: "Smart Contract Audit", desc: "All token contracts are audited by independent security firms before deployment." },
+  { icon: FileCheckIcon, title: "Title Insurance", desc: "Full title insurance coverage protects token holders against title defects and encumbrances." },
+  { icon: BuildingIcon, title: "Regulated Exchange", desc: "Trading occurs on a regulated marketplace with KYC/AML compliance and investor protections." }
+];
+function truncateAddress(addr) {
+  if (addr.length <= 12) return addr;
+  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+}
 function PropertyOverview({
   propertyName,
   location,
@@ -8273,8 +8306,6 @@ function PropertyOverview({
   onPhotosClick,
   description: descriptionProp,
   tradeButtonLabel = "Trade",
-  rightPanelTitle = "Financial Overview",
-  financialItems: financialItemsProp,
   images,
   galleryCategories: galleryCategories2 = [],
   videoUrl,
@@ -8289,7 +8320,10 @@ function PropertyOverview({
   carSpaces,
   propertyTypeLabel,
   tokensIssued: tokensIssuedProp,
-  isLoading = false
+  isLoading = false,
+  ticker,
+  contractAddress,
+  chain = "Base (Ethereum L2)"
 }) {
   const [isDescExpanded, setDescExpanded] = React5.useState(false);
   const description = descriptionProp ?? overviewData?.description ?? DEFAULT_DESCRIPTION;
@@ -8327,42 +8361,76 @@ function PropertyOverview({
   const weeklyRent = overviewData?.weeklyRent ?? 0;
   const annualRent = weeklyRent * 52;
   const dividendYield = resolvedValuation && annualRent > 0 ? (annualRent / resolvedValuation * 100).toFixed(2) : null;
+  const marketCap = tokenPriceValue && resolvedTokensIssued ? tokenPriceValue * resolvedTokensIssued : null;
   const loadingSkeleton = /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 90, height: 18 });
-  const financialItems = financialItemsProp ?? [
-    { label: "Token Price", value: isLoading && tokenPriceValue == null ? loadingSkeleton : tokenPriceValue ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "N/A", gold: true },
-    { label: "Property Value", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "N/A" },
-    { label: "Weekly Rent", value: isLoading && !overviewData ? loadingSkeleton : weeklyRent > 0 ? `$${weeklyRent.toLocaleString()}/wk` : "N/A", badge: weeklyRent > 0 ? "Rented" : void 0 },
-    { label: "Dividend Yield", value: isLoading && dividendYield == null && resolvedValuation == null ? loadingSkeleton : dividendYield ? `${dividendYield}%` : "N/A" },
-    { label: "Total Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued ? resolvedTokensIssued.toLocaleString() : "N/A" },
-    { label: "Indicative Listing", value: isLoading && !overviewData ? loadingSkeleton : overviewData?.indicativeListing ?? "N/A" }
-  ];
+  const resolvedPropertyType = overviewData?.propertyType ?? propertyTypeLabel ?? null;
   const galleryImages = images ?? [];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(TopGrid, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(PanelHeading, { children: [
-          "About ",
-          propertyName || "This Property"
+  const tokenDetailsItems = [
+    { label: "Chain", value: chain },
+    { label: "Contract Address", value: contractAddress ? truncateAddress(contractAddress) : "\u2014", mono: true },
+    { label: "Token Ticker", value: ticker ?? "\u2014" },
+    { label: "Total Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued?.toLocaleString() ?? "\u2014" },
+    { label: "Property Type", value: resolvedPropertyType ?? "\u2014" },
+    { label: "Location", value: location || "\u2014" }
+  ];
+  const tokenStats = [
+    { label: "Token Price", value: isLoading && tokenPriceValue == null ? loadingSkeleton : tokenPriceValue ? `$${tokenPriceValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : "\u2014", gold: true },
+    { label: "Market Cap", value: isLoading && marketCap == null ? loadingSkeleton : marketCap ? marketCap >= 1e6 ? `$${(marketCap / 1e6).toFixed(1)}M` : `$${marketCap.toLocaleString()}` : "\u2014" },
+    { label: "Dividend Yield", value: isLoading && dividendYield == null ? loadingSkeleton : dividendYield ? `${dividendYield}%` : "\u2014" },
+    { label: "Total Tokens", value: isLoading && resolvedTokensIssued == null ? loadingSkeleton : resolvedTokensIssued?.toLocaleString() ?? "\u2014" }
+  ];
+  const propertyStats = [
+    { label: "Property Value", value: isLoading && resolvedValuation == null ? loadingSkeleton : resolvedValuation ? resolvedValuation >= 1e6 ? `$${(resolvedValuation / 1e6).toFixed(2)}M` : `$${resolvedValuation.toLocaleString()}` : "\u2014" },
+    { label: "Weekly Rent", value: isLoading && !overviewData ? loadingSkeleton : weeklyRent > 0 ? `$${weeklyRent.toLocaleString()}/wk` : "\u2014", badge: weeklyRent > 0 ? "Rented" : void 0 },
+    { label: "Annual Rent", value: isLoading && !overviewData ? loadingSkeleton : annualRent > 0 ? `$${annualRent.toLocaleString()}/yr` : "\u2014" },
+    { label: "Year Built", value: isLoading && !overviewData ? loadingSkeleton : overviewData?.yearBuilt ? String(overviewData.yearBuilt) : "\u2014" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "About" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(AboutGrid, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(AboutLeft, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(DescriptionWrap, { $expanded: isDescExpanded, children: [
+            description.split("\n\n").map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(DescParagraph, { $first: i === 0, children: p }, i)),
+            !isDescExpanded && /* @__PURE__ */ jsxRuntime.jsx(DescFade, {})
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(OutlineBtn, { onClick: () => setDescExpanded((p) => !p), children: isDescExpanded ? "Read less" : "Read more" }),
+            /* @__PURE__ */ jsxRuntime.jsx(PrimaryBtn, { onClick: onTradeClick, children: tradeButtonLabel })
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DescriptionWrap, { $expanded: isDescExpanded, children: [
-          description.split("\n\n").map((p, i) => /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: "rgba(255,255,255,0.7)", lineHeight: 1.7, fontSize: "0.95rem", marginTop: i > 0 ? "1rem" : 0 }, children: p }, i)),
-          !isDescExpanded && /* @__PURE__ */ jsxRuntime.jsx(DescFade, {})
+        /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailsCard, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(TokenDetailsTitle, { children: "Token Details" }),
+          tokenDetailsItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(TokenDetailRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TokenDetailLabel, { children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(TokenDetailValue, { $mono: !!item.mono, children: item.value })
+          ] }, item.label))
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Statistics" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(StatsGrid, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Token Performance" }),
+          tokenStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { $gold: !!item.gold, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StatLabel, { children: item.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(StatValue, { $gold: !!item.gold, children: item.value })
+          ] }, item.label))
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ButtonRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(OutlineBtn, { onClick: () => setDescExpanded((p) => !p), children: isDescExpanded ? "Read less" : "Read more" }),
-          /* @__PURE__ */ jsxRuntime.jsx(PrimaryBtn, { onClick: onTradeClick, children: tradeButtonLabel })
+        /* @__PURE__ */ jsxRuntime.jsxs(StatsColumn, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatsColumnHeader, { children: "Property Fundamentals" }),
+          propertyStats.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(StatRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(StatLabel, { children: [
+              item.label,
+              item.badge && /* @__PURE__ */ jsxRuntime.jsxs(StatBadge, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 5, height: 5, borderRadius: "50%", backgroundColor: "#4CAF50", display: "inline-block" } }),
+                item.badge
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(StatValue, { children: item.value })
+          ] }, item.label))
         ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PanelHeading, { children: rightPanelTitle }),
-        /* @__PURE__ */ jsxRuntime.jsx(FinancialGrid, { children: financialItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(FinancialCard, { $gold: !!item.gold, children: [
-          item.badge && /* @__PURE__ */ jsxRuntime.jsxs(BadgeSpan, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 5, height: 5, borderRadius: "50%", backgroundColor: "#4CAF50", display: "inline-block" } }),
-            item.badge
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(FinancialLabel, { $gold: !!item.gold, children: item.label }),
-          /* @__PURE__ */ jsxRuntime.jsx(FinancialValue, { $gold: !!item.gold, children: item.value })
-        ] }, item.label)) })
       ] })
     ] }),
     galleryImages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8376,8 +8444,8 @@ function PropertyOverview({
         onPhotoClick: onPhotosClick
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(AssetDetailsPanel, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { margin: 0, fontSize: "1.5rem", fontWeight: 600, color: "#fff", marginBottom: "2rem" }, children: "Asset Details" }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Asset Details" }),
       /* @__PURE__ */ jsxRuntime.jsxs(AssetPanelsGrid, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(MetricsPanel, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(MetricsPanelTitle, { children: "Key Metrics" }),
@@ -8385,7 +8453,7 @@ function PropertyOverview({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(MetricLabel, { children: "Land" }),
               /* @__PURE__ */ jsxRuntime.jsxs(MetricValueRow, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(MetricBig, { children: landSize?.toLocaleString() ?? "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(MetricBig, { children: landSize?.toLocaleString() ?? "\u2014" }),
                 /* @__PURE__ */ jsxRuntime.jsx(MetricUnit, { children: "sqm" })
               ] })
             ] }),
@@ -8393,7 +8461,7 @@ function PropertyOverview({
             /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1 }, children: [
               /* @__PURE__ */ jsxRuntime.jsx(MetricLabel, { children: "Floor" }),
               /* @__PURE__ */ jsxRuntime.jsxs(MetricValueRow, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(MetricBig, { children: buildingSize?.toLocaleString() ?? "-" }),
+                /* @__PURE__ */ jsxRuntime.jsx(MetricBig, { children: buildingSize?.toLocaleString() ?? "\u2014" }),
                 /* @__PURE__ */ jsxRuntime.jsx(MetricUnit, { children: "sqm" })
               ] })
             ] })
@@ -8415,26 +8483,68 @@ function PropertyOverview({
           ] }, i)) })
         ] })
       ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Trading Hours" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursCard, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(THLabel, { children: "Session" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THLabel, { children: "Hours (AEST)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THLabel, { children: "Days" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Continuous Trading" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "10:00 \u2014 16:00" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Mon \u2014 Fri" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "After Hours" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "16:00 \u2014 20:00" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Mon \u2014 Fri" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(TradingHoursRow, { $last: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Pre-Market" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "07:00 \u2014 10:00" }),
+          /* @__PURE__ */ jsxRuntime.jsx(THValue, { children: "Mon \u2014 Fri" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(TradingHoursNote, { children: "All times are Australian Eastern Standard Time (AEST/AEDT). Markets are closed on Australian public holidays." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "Tokenholder Protections" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ProtectionsGrid, { children: TOKENHOLDER_PROTECTIONS.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(ProtectionCard, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ProtectionIconWrap, { children: p.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(ProtectionTitle, { children: p.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(ProtectionDesc, { children: p.desc })
+      ] }, p.title)) })
     ] })
   ] });
 }
-var TopGrid = styled19__default.default.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 2rem;
-  margin-bottom: 2rem;
-  @media (max-width: 768px) { grid-template-columns: 1fr; }
+var Wrapper = styled19__default.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
 `;
-var Panel = styled19__default.default.div`
+var Section = styled19__default.default.div`
   background: #111;
   border-radius: 12px;
-  padding: 1.5rem;
+  padding: 1.75rem;
 `;
-var PanelHeading = styled19__default.default.h2`
-  font-size: 1.25rem;
-  margin-bottom: 1rem;
-  color: #fff;
+var SectionHeader = styled19__default.default.h2`
+  font-size: 1.2rem;
   font-weight: 600;
+  color: #fff;
+  margin: 0 0 1.25rem 0;
+  letter-spacing: -0.01em;
+`;
+var AboutGrid = styled19__default.default.div`
+  display: grid;
+  grid-template-columns: 1fr 340px;
+  gap: 2rem;
+  @media (max-width: 900px) { grid-template-columns: 1fr; }
+`;
+var AboutLeft = styled19__default.default.div`
+  min-width: 0;
 `;
 var DescriptionWrap = styled19__default.default.div`
   position: relative;
@@ -8442,6 +8552,13 @@ var DescriptionWrap = styled19__default.default.div`
   overflow: hidden;
   transition: max-height 0.3s ease;
 `;
+var DescParagraph = styled19__default.default.p`
+  color: rgba(255,255,255,0.65);
+  line-height: 1.7;
+  font-size: 0.92rem;
+  margin: 0;
+  margin-top: ${(p) => p.$first ? 0 : "0.85rem"};
+`;
 var DescFade = styled19__default.default.div`
   position: absolute;
   bottom: 0; left: 0; right: 0;
@@ -8450,103 +8567,250 @@ var DescFade = styled19__default.default.div`
   pointer-events: none;
 `;
 var ButtonRow = styled19__default.default.div`
-  margin-top: 1.5rem;
+  margin-top: 1.25rem;
   display: flex;
   gap: 0.75rem;
 `;
 var OutlineBtn = styled19__default.default.button`
-  padding: 0.55rem 1.35rem;
-  border-radius: 10px;
-  border: 1px solid rgba(255,255,255,0.28);
-  background: rgba(5,6,8,0.85);
-  color: rgba(255,255,255,0.95);
-  font-size: 0.94rem;
-  font-weight: 600;
+  padding: 0.5rem 1.25rem;
+  border-radius: 8px;
+  border: 1px solid rgba(255,255,255,0.2);
+  background: transparent;
+  color: rgba(255,255,255,0.85);
+  font-size: 0.88rem;
+  font-weight: 500;
   cursor: pointer;
+  transition: border-color 0.15s;
+  &:hover { border-color: rgba(255,255,255,0.4); }
 `;
 var PrimaryBtn = styled19__default.default.button`
-  padding: 0.75rem 1.5rem;
-  border-radius: 4px;
+  padding: 0.5rem 1.5rem;
+  border-radius: 8px;
   border: none;
   background: #e6c87e;
-  color: black;
-  font-size: 0.95rem;
+  color: #111;
+  font-size: 0.88rem;
   font-weight: 600;
   cursor: pointer;
+  transition: background 0.15s;
+  &:hover { background: #d4b86a; }
+`;
+var TokenDetailsCard = styled19__default.default.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  padding: 1.25rem;
+`;
+var TokenDetailsTitle = styled19__default.default.div`
+  font-size: 0.65rem;
+  color: #D4AF37;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+`;
+var TokenDetailRow = styled19__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.55rem 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  &:last-child { border-bottom: none; padding-bottom: 0; }
+  &:first-of-type { padding-top: 0; }
 `;
-var FinancialGrid = styled19__default.default.div`
+var TokenDetailLabel = styled19__default.default.span`
+  font-size: 0.82rem;
+  color: rgba(255,255,255,0.5);
+  font-weight: 400;
+`;
+var TokenDetailValue = styled19__default.default.span`
+  font-size: 0.88rem;
+  color: #fff;
+  font-weight: 500;
+  font-family: ${(p) => p.$mono ? "'SF Mono', 'Fira Code', monospace" : "inherit"};
+`;
+var StatsGrid = styled19__default.default.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.75rem;
+  gap: 1rem;
+  @media (max-width: 768px) { grid-template-columns: 1fr; }
 `;
-var FinancialCard = styled19__default.default.div`
-  background: rgba(255,255,255,0.03);
+var StatsColumn = styled19__default.default.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
   border-radius: 10px;
-  padding: 1rem 1.25rem;
-  border: 1px solid ${(p) => p.$gold ? "rgba(212,175,55,0.3)" : "rgba(255,255,255,0.06)"};
-  position: relative;
-`;
-var BadgeSpan = styled19__default.default.span`
-  position: absolute;
-  top: 0.5rem; right: 0.75rem;
-  font-size: 0.65rem;
-  color: #4CAF50;
-  display: flex; align-items: center; gap: 4px;
+  padding: 1.25rem;
 `;
-var FinancialLabel = styled19__default.default.div`
+var StatsColumnHeader = styled19__default.default.div`
   font-size: 0.65rem;
-  color: ${(p) => p.$gold ? "#D4AF37" : "rgba(255,255,255,0.6)"};
+  color: #D4AF37;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
-  margin-bottom: 0.4rem;
-  font-weight: 500;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
 `;
-var FinancialValue = styled19__default.default.div`
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
-  line-height: 1;
+var StatRow = styled19__default.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.65rem 0;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  &:last-child { border-bottom: none; padding-bottom: 0; }
+`;
+var StatLabel = styled19__default.default.span`
+  font-size: 0.82rem;
+  color: rgba(255,255,255,0.5);
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var StatBadge = styled19__default.default.span`
+  font-size: 0.6rem;
+  color: #4CAF50;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
 `;
-var AssetDetailsPanel = styled19__default.default.div`
-  margin-bottom: 2rem; background: #111; border-radius: 12px; padding: 1.5rem;
+var StatValue = styled19__default.default.span`
+  font-size: 1rem;
+  font-weight: 600;
+  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  font-variant-numeric: tabular-nums;
 `;
 var AssetPanelsGrid = styled19__default.default.div`
-  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
   @media (max-width: 768px) { grid-template-columns: 1fr; }
 `;
 var MetricsPanel = styled19__default.default.div`
-  background: rgba(255,255,255,0.03); border-radius: 12px;
-  border: 1px solid rgba(255,255,255,0.06); padding: 1.25rem 1.5rem; overflow: hidden;
+  background: rgba(255,255,255,0.025);
+  border-radius: 10px;
+  border: 1px solid rgba(255,255,255,0.06);
+  padding: 1.25rem 1.5rem;
+  overflow: hidden;
 `;
 var InfoPanel = styled19__default.default(MetricsPanel)``;
 var MetricsPanelTitle = styled19__default.default.div`
-  font-size: 0.65rem; color: #D4AF37; text-transform: uppercase;
-  letter-spacing: 0.12em; font-weight: 600; margin-bottom: 1rem;
-  padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.06);
+  font-size: 0.65rem;
+  color: #D4AF37;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
 `;
 var LandFloorCard = styled19__default.default.div`
   background: linear-gradient(135deg, rgba(212,175,55,0.12), rgba(184,134,11,0.06));
-  border-radius: 10px; padding: 0.85rem 1rem;
+  border-radius: 10px;
+  padding: 0.85rem 1rem;
   border: 1px solid rgba(212,175,55,0.25);
-  display: flex; gap: 1rem; margin-bottom: 0.75rem;
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 0.75rem;
 `;
 var MetricLabel = styled19__default.default.div`
-  font-size: 0.65rem; color: #D4AF37; text-transform: uppercase;
-  letter-spacing: 0.1em; margin-bottom: 0.4rem; font-weight: 500;
+  font-size: 0.65rem;
+  color: #D4AF37;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.4rem;
+  font-weight: 500;
 `;
 var MetricValueRow = styled19__default.default.div`
-  display: flex; align-items: baseline; gap: 0.25rem;
+  display: flex;
+  align-items: baseline;
+  gap: 0.25rem;
 `;
 var MetricBig = styled19__default.default.span`
-  font-size: 1.5rem; font-weight: 700; color: #D4AF37; line-height: 1;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #D4AF37;
+  line-height: 1;
 `;
 var MetricUnit = styled19__default.default.span`
-  font-size: 0.7rem; color: rgba(212,175,55,0.7); font-weight: 500;
+  font-size: 0.7rem;
+  color: rgba(212,175,55,0.7);
+  font-weight: 500;
 `;
 var FeaturesGrid = styled19__default.default.div`
-  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
   @media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
 `;
+var TradingHoursCard = styled19__default.default.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  overflow: hidden;
+`;
+var TradingHoursRow = styled19__default.default.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  padding: 0.75rem 1.25rem;
+  border-bottom: ${(p) => p.$last ? "none" : "1px solid rgba(255,255,255,0.04)"};
+  &:first-child {
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+  }
+`;
+var THLabel = styled19__default.default.span`
+  font-size: 0.7rem;
+  color: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 500;
+`;
+var THValue = styled19__default.default.span`
+  font-size: 0.85rem;
+  color: rgba(255,255,255,0.8);
+  font-weight: 400;
+`;
+var TradingHoursNote = styled19__default.default.div`
+  padding: 0.75rem 1.25rem;
+  font-size: 0.75rem;
+  color: rgba(255,255,255,0.35);
+  border-top: 1px solid rgba(255,255,255,0.04);
+`;
+var ProtectionsGrid = styled19__default.default.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  @media (max-width: 768px) { grid-template-columns: 1fr; }
+`;
+var ProtectionCard = styled19__default.default.div`
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  padding: 1.25rem;
+`;
+var ProtectionIconWrap = styled19__default.default.div`
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: rgba(212,175,55,0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0.75rem;
+`;
+var ProtectionTitle = styled19__default.default.div`
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 0.4rem;
+`;
+var ProtectionDesc = styled19__default.default.div`
+  font-size: 0.8rem;
+  color: rgba(255,255,255,0.5);
+  line-height: 1.5;
+`;
 var STATUS_BG = {
   active: "rgba(14,203,129,0.18)",
   rejected: "rgba(246,70,93,0.18)",
@@ -8561,7 +8825,15 @@ var STATUS_COLOR = {
   historical: "#3861fb",
   expired: "rgba(255,255,255,0.7)"
 };
-function PropertyOffers({ offers }) {
+function parsePrice(price) {
+  return Number(price.replace(/[^0-9.]/g, ""));
+}
+function formatPerShare(price, totalShares) {
+  const total = parsePrice(price);
+  const perShare = total / totalShares;
+  return `$${perShare.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}/Share`;
+}
+function PropertyOffers({ offers, totalShares }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "bg-[rgba(30,32,38,0.95)] rounded-md p-7 border border-white/[0.08]", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex justify-between items-center gap-4 flex-wrap", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "m-0 text-xl font-semibold", children: "Active & Historical Buyout Offers" }),
@@ -8592,6 +8864,11 @@ function PropertyOffers({ offers }) {
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-[240px]", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-semibold text-[1.15rem] inline-flex items-center gap-2", children: [
               offer.price,
+              totalShares && totalShares > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[0.85rem] font-normal text-white/55", children: [
+                "(",
+                formatPerShare(offer.price, totalShares),
+                ")"
+              ] }),
               (offer.price === "$17,000,000" || offer.price === "$15,500,000") && /* @__PURE__ */ jsxRuntime.jsx(OfferPricePulse, { $variant: offer.price === "$17,000,000" ? "positive" : "alert" })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[0.85rem] text-white/65 mt-[0.3rem]", children: [
@@ -9271,7 +9548,7 @@ function PropertyDocuments({ documentsData }) {
     title: doc.label,
     documentUrl: doc.href
   }));
-  return /* @__PURE__ */ jsxRuntime.jsxs(Section, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Section2, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading, { children: "Investment Documents" }),
     /* @__PURE__ */ jsxRuntime.jsx(DocList, { children: documents.map(({ documentUrl, title }) => {
       const isAvailable = Boolean(documentUrl);
@@ -9286,7 +9563,7 @@ function PropertyDocuments({ documentsData }) {
     }) })
   ] });
 }
-var Section = styled19__default.default.section`
+var Section2 = styled19__default.default.section`
   background: var(--color-card, rgba(30, 35, 41, 0.8));
   border-radius: 12px;
   padding: 1.5rem;
@@ -9372,7 +9649,7 @@ function PropertyInspectionTimes({
   onRetry,
   onSignIn
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Section2, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Section3, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeading2, { children: "Inspection Times" }),
     /* @__PURE__ */ jsxRuntime.jsx(Intro, { children: "Book a private inspection of the property. Walk through the home in person before investing." }),
     isAuthenticated ? /* @__PURE__ */ jsxRuntime.jsxs(SlotList, { children: [
@@ -9421,7 +9698,7 @@ function PropertyInspectionTimes({
     ] })
   ] });
 }
-var Section2 = styled19__default.default.section`
+var Section3 = styled19__default.default.section`
   background: var(--color-card, rgba(30, 35, 41, 0.8));
   border-radius: 12px;
   padding: 1.5rem;
@@ -10379,7 +10656,7 @@ function VideoActivitySection({
   const headerStatusText = ipoEnded ? `Sale ended${ordersAllocated > 0 ? ` \xB7 ${ordersAllocated.toLocaleString()} orders` : ""}` : ipoStarted ? isLoading && sortedOrders.length === 0 ? "Loading orders\u2026" : `Active orders: ${ordersAllocated.toLocaleString()}` : "Waiting for Offer to Open";
   const showSkeletonFeed = ipoStarted && isLoading && sortedOrders.length === 0;
   const showOrderFeed = !showSkeletonFeed && (ipoStarted || ipoEnded && sortedOrders.length > 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Section3, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Section4, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VideoPanel, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "section-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { children: "Musgrave" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "video-container", children: /* @__PURE__ */ jsxRuntime.jsxs("video", { controls: true, loop: true, autoPlay: true, muted: true, playsInline: true, children: [
@@ -10430,7 +10707,7 @@ function VideoActivitySection({
     ] })
   ] });
 }
-var Section3 = styled19__default.default.div`
+var Section4 = styled19__default.default.div`
   display: flex;
   gap: 1.5rem;
   align-items: stretch;
@@ -10704,7 +10981,7 @@ var VARIANT_COLORS = {
   info: { accent: "#E6C656", icon: "\u2139" },
   pending: { accent: "#7EB3E6", icon: "\u25CC" }
 };
-var Wrapper = styled19__default.default.div`
+var Wrapper2 = styled19__default.default.div`
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10834,7 +11111,7 @@ function ToastItem({ toast, onDismiss }) {
   const duration = toast.duration ?? 6e3;
   const explorerBase = toast.explorerUrl ?? DEFAULT_EXPLORER;
   const txUrl = toast.txHash ? `${explorerBase}${toast.txHash}` : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $exiting: exiting, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper2, { $exiting: exiting, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Body, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(IconDot, { $color: accent, children: icon }),
       /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
@@ -10947,7 +11224,7 @@ function OrderPanel({
       setSliderValue(ratio);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Panel2, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(PanelHeader2, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Place Order" }),
       /* @__PURE__ */ jsxRuntime.jsxs(StatusBadge2, { style: { color: statusColor }, children: [
@@ -11250,7 +11527,7 @@ function OrderPanel({
     ] })
   ] });
 }
-var Panel2 = styled19__default.default.div`
+var Panel = styled19__default.default.div`
   background-color: var(--color-card-darker, #111);
   border-radius: 8px;
   padding: 1.5rem;