@loafmarkets/ui 0.1.213 → 0.1.215

package/dist/index.mjs

@@ -8557,7 +8557,7 @@ function PropertyOverview({
     { label: "Location", value: location || "\u2014" }
   ];
   const vol24hDollar = volume24h != null && tokenPriceValue ? volume24h * tokenPriceValue : null;
-  const holdRatio = (() => {
+  (() => {
     if (!tokenMarketCap || tokenMarketCap <= 0 || vol24hDollar == null) return null;
     const turnover = vol24hDollar / (tokenMarketCap / 2);
     const holdPct = Math.max(0, Math.min(100, (1 - turnover) * 100));
@@ -8631,40 +8631,32 @@ function PropertyOverview({
     ] }),
     /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "Statistics" }),
-      /* @__PURE__ */ jsxs(StatsTabbedCard, { children: [
-        /* @__PURE__ */ jsxs(StatsTabBar, { children: [
-          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token Performance" }),
-          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property Fundamentals" })
+      /* @__PURE__ */ jsxs(StatsDesktop, { children: [
+        /* @__PURE__ */ jsxs(StatsRowSection, { children: [
+          /* @__PURE__ */ jsx(StatsRowLabel, { children: "Token Performance" }),
+          /* @__PURE__ */ jsx(StatsHRow, { children: tokenStats.map((item) => /* @__PURE__ */ jsxs(StatsHCell, { children: [
+            /* @__PURE__ */ jsx(StatsHCellLabel, { children: item.label }),
+            item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsx(StatsHCellValue, { $gold: !!item.gold, children: item.value })
+          ] }, item.label)) })
         ] }),
-        statsTab === "token" && /* @__PURE__ */ jsxs(StatsTabContent, { children: [
-          tokenStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { $gold: !!item.gold, children: [
-            /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
-            item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsx(StatValue, { $gold: !!item.gold, children: item.value })
-          ] }, item.label)),
-          holdRatio && /* @__PURE__ */ jsxs(HoldRatioWrap, { children: [
-            /* @__PURE__ */ jsxs(HoldRatioTitle, { children: [
-              /* @__PURE__ */ jsx(HoldRatioTitleText, { children: "Holding Ratio" }),
-              /* @__PURE__ */ jsx(HoldRatioInfo, { "data-tip": "Proportion of token holders vs active traders over the last 24 hours, measured by trading volume against market capitalisation.", children: "?" })
-            ] }),
-            /* @__PURE__ */ jsxs(HoldRatioHeader, { children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx(HoldRatioLabel, { $side: "hold", children: "Holding " }),
-                /* @__PURE__ */ jsxs(HoldRatioValue, { $side: "hold", children: [
-                  holdRatio.holdPct.toFixed(1),
-                  "%"
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsxs(HoldRatioValue, { $side: "trade", children: [
-                  holdRatio.tradePct,
-                  "%"
-                ] }),
-                /* @__PURE__ */ jsx(HoldRatioLabel, { $side: "trade", children: " Trading" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx(HoldRatioTrack, { children: /* @__PURE__ */ jsx(HoldRatioFill, { $pct: holdRatio.holdPct }) })
-          ] })
+        /* @__PURE__ */ jsxs(StatsRowSection, { children: [
+          /* @__PURE__ */ jsx(StatsRowLabel, { children: "Property Fundamentals" }),
+          /* @__PURE__ */ jsx(StatsHRow, { children: propertyStats.map((item) => /* @__PURE__ */ jsxs(StatsHCell, { children: [
+            /* @__PURE__ */ jsx(StatsHCellLabel, { children: item.label }),
+            /* @__PURE__ */ jsx(StatsHCellValue, { children: item.value })
+          ] }, item.label)) }),
+          /* @__PURE__ */ jsx(DividendHistoryBtn, { onClick: () => setShowDividendHistory(true), children: "See Dividend History \u2192" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(StatsMobile, { children: /* @__PURE__ */ jsxs(StatsTabbedCard, { children: [
+        /* @__PURE__ */ jsxs(StatsTabBar, { children: [
+          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "token", onClick: () => setStatsTab("token"), children: "Token" }),
+          /* @__PURE__ */ jsx(StatsTab, { $active: statsTab === "property", onClick: () => setStatsTab("property"), children: "Property" })
         ] }),
+        statsTab === "token" && /* @__PURE__ */ jsx(StatsTabContent, { children: tokenStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { $gold: !!item.gold, children: [
+          /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
+          item.label === "Holders" && holderCount != null ? /* @__PURE__ */ jsx(StatValueClickable, { onClick: () => setShowHolders(true), children: item.value }) : /* @__PURE__ */ jsx(StatValue, { $gold: !!item.gold, children: item.value })
+        ] }, item.label)) }),
         statsTab === "property" && /* @__PURE__ */ jsxs(StatsTabContent, { children: [
           propertyStats.map((item) => /* @__PURE__ */ jsxs(StatRow, { children: [
             /* @__PURE__ */ jsx(StatLabel, { children: item.label }),
@@ -8672,7 +8664,7 @@ function PropertyOverview({
           ] }, item.label)),
           /* @__PURE__ */ jsx(DividendHistoryBtn, { onClick: () => setShowDividendHistory(true), children: "See Dividend History \u2192" })
         ] })
-      ] })
+      ] }) })
     ] }),
     showDividendHistory && /* @__PURE__ */ jsx(
       DividendHistoryPopup,
@@ -8693,37 +8685,39 @@ function PropertyOverview({
         onClose: () => setShowHolders(false)
       }
     ),
-    galleryImages.length > 0 && /* @__PURE__ */ jsx(GalleryBreakout, { children: /* @__PURE__ */ jsx(
-      GalleryMapSection,
-      {
-        images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
-        categories: galleryCategories2,
-        propertyLocation: location,
-        videoUrl,
-        tokenName,
-        onPhotoClick: onPhotosClick
-      }
-    ) }),
     /* @__PURE__ */ jsxs(Section, { children: [
-      /* @__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, 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__ */ jsx(SectionHeader, { children: "The Asset" }),
+      galleryImages.length > 0 && /* @__PURE__ */ jsxs(AssetBentoGrid, { children: [
+        /* @__PURE__ */ jsx(AssetBentoGallery, { children: /* @__PURE__ */ jsx(
+          GalleryMapSection,
+          {
+            images: galleryImages.map((img) => ({ src: img.imageUrl, title: img.title, subtitle: img.subtitle })),
+            categories: galleryCategories2,
+            propertyLocation: location,
+            videoUrl,
+            tokenName,
+            onPhotoClick: onPhotosClick
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(AssetBentoNarratives, { 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, 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 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: [
@@ -9142,7 +9136,24 @@ var Wrapper = styled9.div`
   flex-direction: column;
   gap: 1.5rem;
 `;
-var GalleryBreakout = styled9.div`
+var AssetBentoGrid = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+`;
+var AssetBentoGallery = styled9.div`
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,0.06);
+`;
+var AssetBentoNarratives = styled9.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+  @media (max-width: 768px) { grid-template-columns: 1fr; }
+`;
+styled9.div`
   width: 100vw;
   position: relative;
   left: 50%;
@@ -9333,6 +9344,60 @@ var ChainLogoImg = styled9.img`
   width: auto;
   vertical-align: middle;
 `;
+var StatsDesktop = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  @media (max-width: 768px) { display: none; }
+`;
+var StatsMobile = styled9.div`
+  display: none;
+  @media (max-width: 768px) { display: block; }
+`;
+var StatsRowSection = styled9.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+var StatsRowLabel = styled9.div`
+  font-size: 0.65rem;
+  color: #D4AF37;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 600;
+`;
+var StatsHRow = styled9.div`
+  display: flex;
+  gap: 0;
+  background: rgba(255,255,255,0.025);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 10px;
+  overflow: hidden;
+`;
+var StatsHCell = styled9.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 1rem 0.75rem;
+  border-right: 1px solid rgba(255,255,255,0.04);
+  &:last-child { border-right: none; }
+  transition: background 0.15s;
+  &:hover { background: rgba(255,255,255,0.03); }
+`;
+var StatsHCellLabel = styled9.span`
+  font-size: 0.7rem;
+  color: rgba(255,255,255,0.4);
+  font-weight: 400;
+  white-space: nowrap;
+`;
+var StatsHCellValue = styled9.span`
+  font-size: 0.92rem;
+  font-weight: 500;
+  color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
+  font-variant-numeric: tabular-nums;
+`;
 var StatsTabbedCard = styled9.div`
   background: rgba(255,255,255,0.025);
   border: 1px solid rgba(255,255,255,0.06);
@@ -9417,7 +9482,7 @@ var StatValue = styled9.span`
   color: ${(p) => p.$gold ? "#D4AF37" : "#fff"};
   font-variant-numeric: tabular-nums;
 `;
-var InvestmentNarrativesRow = styled9.div`
+styled9.div`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.75rem;
@@ -9744,7 +9809,7 @@ var SecurityDocLink = styled9.a`
     color: rgba(212,175,55,0.9);
   }
 `;
-var HoldRatioWrap = styled9.div`
+styled9.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -9752,19 +9817,19 @@ var HoldRatioWrap = styled9.div`
   margin-top: 0.5rem;
   border-top: 1px solid rgba(255,255,255,0.04);
 `;
-var HoldRatioTitle = styled9.div`
+styled9.div`
   display: flex;
   align-items: center;
   gap: 5px;
 `;
-var HoldRatioTitleText = styled9.span`
+styled9.span`
   font-size: 0.65rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: rgba(255,255,255,0.4);
 `;
-var HoldRatioInfo = styled9.span`
+styled9.span`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -9807,32 +9872,32 @@ var HoldRatioInfo = styled9.span`
     opacity: 1;
   }
 `;
-var HoldRatioHeader = styled9.div`
+styled9.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
-var HoldRatioLabel = styled9.span`
+styled9.span`
   font-size: 0.7rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.6)" : "rgba(14, 203, 129, 0.6)"};
 `;
-var HoldRatioValue = styled9.span`
+styled9.span`
   font-size: 0.75rem;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: ${(p) => p.$side === "trade" ? "rgba(246, 70, 93, 0.7)" : "rgba(14, 203, 129, 0.7)"};
 `;
-var HoldRatioTrack = styled9.div`
+styled9.div`
   height: 6px;
   border-radius: 3px;
   background: rgba(246, 70, 93, 0.15);
   overflow: hidden;
   position: relative;
 `;
-var HoldRatioFill = styled9.div`
+styled9.div`
   height: 100%;
   width: ${(p) => p.$pct}%;
   border-radius: 3px;