@loafmarkets/ui 0.1.151 → 0.1.153

package/dist/index.js

@@ -7971,6 +7971,7 @@ function GalleryMapSection({
   const [carouselIndex, setCarouselIndex] = React5.useState(0);
   const [showVideo, setShowVideo] = React5.useState(false);
   const [autoPlaying, setAutoPlaying] = React5.useState(autoPlay);
+  const [showFullMap, setShowFullMap] = React5.useState(false);
   const resolvedMapUrl = mapUrl ?? (tokenName ? `/map/${tokenName}?embed=true&zoom=14&hideOthers=true` : "about:blank");
   React5.useEffect(() => {
     if (!autoPlaying || images.length <= 1) return;
@@ -8064,7 +8065,13 @@ function GalleryMapSection({
           /* @__PURE__ */ jsxRuntime.jsx(bi.BiMap, {}),
           " Location"
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: propertyLocation })
+        /* @__PURE__ */ jsxRuntime.jsxs(MapHeaderRight, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: propertyLocation }),
+          /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: () => setShowFullMap(true), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", style: { width: 14, height: 14 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3H5a2 2 0 00-2 2v3m18 0V5a2 2 0 00-2-2h-3m0 18h3a2 2 0 002-2v-3M3 16v3a2 2 0 002 2h3" }) }),
+            "Full Screen"
+          ] })
+        ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(MapFrame, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(IframeShield, { onClick: (e) => e.currentTarget.style.display = "none" }),
@@ -8074,17 +8081,73 @@ function GalleryMapSection({
             src: resolvedMapUrl,
             width: "100%",
             height: "100%",
-            style: { border: 0, minHeight: 500, pointerEvents: "auto" },
+            style: { border: 0, minHeight: 380, pointerEvents: "auto" },
             allow: "autoplay; fullscreen; web-share; xr-spatial-tracking;",
             title: "Property Location",
             referrerPolicy: "unsafe-url",
             tabIndex: -1
           }
         )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(SuburbProfile, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(SuburbProfileTitle, { children: [
+          "Suburb Profile \u2014 ",
+          propertyLocation.split(",")[0]?.trim() || propertyLocation
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(SuburbStatsGrid, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(SuburbStat, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatLabel, { children: "Median House Price" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatValue, { children: "$6.2M" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SuburbStat, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatLabel, { children: "5yr Growth" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatValue, { children: "+42%" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SuburbStat, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatLabel, { children: "Rental Yield" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatValue, { children: "2.1%" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(SuburbStat, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatLabel, { children: "Population" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SuburbStatValue, { children: "30,200" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SuburbDesc, { children: "Premium harbourside suburb on Sydney's Lower North Shore. Known for heritage homes, village atmosphere, and proximity to Taronga Zoo and Balmoral Beach." })
       ] })
-    ] })
+    ] }),
+    showFullMap && /* @__PURE__ */ jsxRuntime.jsx(FullMapPopup, { onClose: () => setShowFullMap(false) })
   ] });
 }
+function FullMapPopup({ onClose }) {
+  React5.useEffect(() => {
+    const handleEsc = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FullMapOverlay, { onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(FullMapPanel, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(FullMapHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(FullMapTitle, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(bi.BiMap, {}),
+        " Map View"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(FullMapClose, { onClick: onClose, "aria-label": "Close map", children: "\u2715" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(FullMapFrame, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        src: "/map",
+        width: "100%",
+        height: "100%",
+        style: { border: 0 },
+        allow: "autoplay; fullscreen; web-share; xr-spatial-tracking;",
+        title: "Full Screen Map",
+        referrerPolicy: "unsafe-url"
+      }
+    ) })
+  ] }) });
+}
 var Row = styled9__default.default.div`
   display: grid;
   grid-template-columns: 2fr 1fr;
@@ -8202,11 +8265,111 @@ var MapPanel = styled9__default.default(PanelBase)`
   min-width: 0; overflow: hidden;
 `;
 var MapFrame = styled9__default.default.div`
-  flex: 1; border-radius: 6px; overflow: hidden; min-height: 500px; position: relative;
+  flex: 1; border-radius: 6px; overflow: hidden; min-height: 380px; position: relative;
 `;
 var IframeShield = styled9__default.default.div`
   position: absolute; inset: 0; z-index: 1; cursor: pointer;
 `;
+var SuburbProfile = styled9__default.default.div`
+  margin-top: 1rem;
+  padding-top: 0.85rem;
+  border-top: 1px solid rgba(255,255,255,0.06);
+`;
+var SuburbProfileTitle = styled9__default.default.div`
+  font-size: 0.65rem;
+  color: #D4AF37;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 600;
+  margin-bottom: 0.75rem;
+`;
+var SuburbStatsGrid = styled9__default.default.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+`;
+var SuburbStat = styled9__default.default.div`
+  background: rgba(255,255,255,0.03);
+  border-radius: 6px;
+  padding: 0.5rem 0.65rem;
+  border: 1px solid rgba(255,255,255,0.04);
+`;
+var SuburbStatLabel = styled9__default.default.div`
+  font-size: 0.6rem;
+  color: rgba(255,255,255,0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 0.2rem;
+`;
+var SuburbStatValue = styled9__default.default.div`
+  font-size: 0.9rem;
+  font-weight: 600;
+  color: #fff;
+  font-variant-numeric: tabular-nums;
+`;
+var SuburbDesc = styled9__default.default.p`
+  margin: 0;
+  font-size: 0.75rem;
+  color: rgba(255,255,255,0.45);
+  line-height: 1.5;
+`;
+var MapHeaderRight = styled9__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+var FullMapOverlay = styled9__default.default.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.75);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+`;
+var FullMapPanel = styled9__default.default.div`
+  background: #111;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: 14px;
+  width: 94%;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+var FullMapHeader = styled9__default.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+  flex-shrink: 0;
+`;
+var FullMapTitle = styled9__default.default.h3`
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+`;
+var FullMapClose = styled9__default.default.button`
+  background: none;
+  border: none;
+  color: rgba(255,255,255,0.4);
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+  &:hover { color: #fff; }
+`;
+var FullMapFrame = styled9__default.default.div`
+  flex: 1;
+  min-height: 0;
+`;
 var BedIcon = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 4v16" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 8h18a2 2 0 0 1 2 2v10" }),