@loafmarkets/ui 0.1.151 → 0.1.152

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" }),
@@ -8082,9 +8089,40 @@ function GalleryMapSection({
           }
         )
       ] })
-    ] })
+    ] }),
+    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;
@@ -8207,6 +8245,62 @@ var MapFrame = styled9__default.default.div`
 var IframeShield = styled9__default.default.div`
   position: absolute; inset: 0; z-index: 1; cursor: pointer;
 `;
+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" }),