@ericchen1990/pano-view 3.10.0 → 4.0.0

package/dist/index.cjs

@@ -2270,6 +2270,7 @@ __export(index_exports, {
   MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY: () => MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY,
   MouseControls: () => MouseControls,
   PANO_FILTER_PRESETS: () => PANO_FILTER_PRESETS,
+  PANO_OVERLAY_ALIGNS: () => PANO_OVERLAY_ALIGNS,
   PanoContextMenu: () => PanoContextMenu,
   PanoEvents: () => PanoEvents,
   PanoFilter: () => PanoFilter,
@@ -2305,9 +2306,13 @@ __export(index_exports, {
   headingFromVector: () => headingFromVector,
   horizontalFov: () => horizontalFov,
   imagePointToContainer: () => imagePointToContainer,
+  isOverlayCorner: () => isOverlayCorner,
   normalizePanoPosition: () => normalizePanoPosition,
   normalizePanoYaw: () => normalizePanoYaw,
   panoPositionToVector3: () => panoPositionToVector3,
+  parseOverlayAnchor: () => parseOverlayAnchor,
+  resolveOverlayAnchor: () => resolveOverlayAnchor,
+  resolveOverlayToggleIcon: () => resolveOverlayToggleIcon,
   resolvePanoContextMenuEntries: () => resolvePanoContextMenuEntries,
   sectorRotation: () => sectorRotation,
   unwrapPolygonVertices: () => unwrapPolygonVertices,
@@ -9348,6 +9353,339 @@ function hotspotAction(hotspot, trigger) {
   return hotspot.events?.[trigger] ?? (trigger === "click" ? hotspot.action : void 0);
 }
 
+// src/overlay/align.ts
+var PANO_OVERLAY_ALIGNS = [
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "top-left",
+  "top-right",
+  "bottom-left",
+  "bottom-right"
+];
+var ALIGN_LIST = PANO_OVERLAY_ALIGNS.join(", ");
+var SAFE = {
+  top: "var(--pano-safe-top)",
+  right: "var(--pano-safe-right)",
+  bottom: "var(--pano-safe-bottom)",
+  left: "var(--pano-safe-left)"
+};
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function isOverlayCorner(align) {
+  switch (align) {
+    case "top-left":
+    case "top-right":
+    case "bottom-left":
+    case "bottom-right":
+      return true;
+    case "top":
+    case "bottom":
+    case "left":
+    case "right":
+      return false;
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function resolveOverlayAxis(align, axis) {
+  switch (align) {
+    case "top":
+    case "bottom":
+      return "horizontal";
+    case "left":
+    case "right":
+      return "vertical";
+    case "top-left":
+    case "top-right":
+    case "bottom-left":
+    case "bottom-right":
+      return axis ?? "horizontal";
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function overlayCollapseEdge(align, axis) {
+  switch (align) {
+    case "top":
+      return "top";
+    case "bottom":
+      return "bottom";
+    case "left":
+      return "left";
+    case "right":
+      return "right";
+    case "top-left":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "top" : "left";
+    case "top-right":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "top" : "right";
+    case "bottom-left":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "bottom" : "left";
+    case "bottom-right":
+      return resolveOverlayAxis(align, axis) === "horizontal" ? "bottom" : "right";
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function overlayChevron(edge, collapsed) {
+  switch (edge) {
+    case "top":
+      return collapsed ? "down" : "up";
+    case "bottom":
+      return collapsed ? "up" : "down";
+    case "left":
+      return collapsed ? "right" : "left";
+    case "right":
+      return collapsed ? "left" : "right";
+    default: {
+      const exhaustive = edge;
+      return exhaustive;
+    }
+  }
+}
+function overlayContentAlign(align, axis) {
+  const resolved = resolveOverlayAxis(align, axis);
+  if (resolved === "horizontal") {
+    switch (align) {
+      case "top-left":
+      case "bottom-left":
+        return "start";
+      case "top-right":
+      case "bottom-right":
+        return "end";
+      case "top":
+      case "bottom":
+      case "left":
+      case "right":
+        return "center";
+      default: {
+        const exhaustive = align;
+        return exhaustive;
+      }
+    }
+  }
+  switch (align) {
+    case "top-left":
+    case "top-right":
+      return "start";
+    case "bottom-left":
+    case "bottom-right":
+      return "end";
+    case "top":
+    case "bottom":
+    case "left":
+    case "right":
+      return "center";
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function resolveOverlayInset(inset, fallback) {
+  const fallbackLength = cssLength(fallback);
+  if (inset === void 0) {
+    return {
+      top: fallbackLength,
+      right: fallbackLength,
+      bottom: fallbackLength,
+      left: fallbackLength
+    };
+  }
+  if (typeof inset === "number" || typeof inset === "string") {
+    const value = cssLength(inset);
+    return { top: value, right: value, bottom: value, left: value };
+  }
+  return {
+    top: cssLength(inset.top ?? fallback),
+    right: cssLength(inset.right ?? fallback),
+    bottom: cssLength(inset.bottom ?? fallback),
+    left: cssLength(inset.left ?? fallback)
+  };
+}
+function overlayDockInset(edge, inset) {
+  switch (edge) {
+    case "top":
+      return inset.top;
+    case "bottom":
+      return inset.bottom;
+    case "left":
+      return inset.left;
+    case "right":
+      return inset.right;
+    default: {
+      const exhaustive = edge;
+      return exhaustive;
+    }
+  }
+}
+function resolveOverlayAnchor(anchor, defaults) {
+  const align = anchor?.align ?? defaults.align;
+  const axis = resolveOverlayAxis(align, anchor?.axis);
+  const inset = resolveOverlayInset(anchor?.inset, defaults.inset);
+  const collapseEdge = overlayCollapseEdge(align, anchor?.axis);
+  return {
+    align,
+    axis,
+    inset,
+    collapseEdge,
+    contentAlign: overlayContentAlign(align, anchor?.axis),
+    dockInset: overlayDockInset(collapseEdge, inset)
+  };
+}
+function withSafe(inset, safeVariable) {
+  return `calc(${inset} + ${safeVariable})`;
+}
+function maxBox(inset) {
+  return {
+    maxWidth: `calc(100% - ${inset.left} - ${inset.right} - ${SAFE.left} - ${SAFE.right})`,
+    maxHeight: `calc(100% - ${inset.top} - ${inset.bottom} - ${SAFE.top} - ${SAFE.bottom})`
+  };
+}
+function horizontalSpan(inset, width) {
+  const left = withSafe(inset.left, SAFE.left);
+  const right = withSafe(inset.right, SAFE.right);
+  if (width === void 0) {
+    return { left, right, width: void 0, marginInline: void 0 };
+  }
+  return { left, right, width, marginInline: "auto" };
+}
+function verticalSpan(inset, height) {
+  const top = withSafe(inset.top, SAFE.top);
+  const bottom = withSafe(inset.bottom, SAFE.bottom);
+  if (height === void 0) {
+    return { top, bottom, height: void 0, marginBlock: void 0 };
+  }
+  return { top, bottom, height, marginBlock: "auto" };
+}
+function overlayBoxStyle(align, inset, width, height) {
+  const widthValue = width === void 0 ? void 0 : cssLength(width);
+  const heightValue = height === void 0 ? void 0 : cssLength(height);
+  const limits = maxBox(inset);
+  switch (align) {
+    case "top":
+      return {
+        ...horizontalSpan(inset, widthValue),
+        top: withSafe(inset.top, SAFE.top),
+        bottom: "auto",
+        height: heightValue,
+        ...limits
+      };
+    case "bottom":
+      return {
+        ...horizontalSpan(inset, widthValue),
+        top: "auto",
+        bottom: withSafe(inset.bottom, SAFE.bottom),
+        height: heightValue,
+        ...limits
+      };
+    case "left":
+      return {
+        ...verticalSpan(inset, heightValue),
+        left: withSafe(inset.left, SAFE.left),
+        right: "auto",
+        width: widthValue,
+        ...limits
+      };
+    case "right":
+      return {
+        ...verticalSpan(inset, heightValue),
+        left: "auto",
+        right: withSafe(inset.right, SAFE.right),
+        width: widthValue,
+        ...limits
+      };
+    case "top-left":
+      return {
+        top: withSafe(inset.top, SAFE.top),
+        left: withSafe(inset.left, SAFE.left),
+        right: "auto",
+        bottom: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    case "top-right":
+      return {
+        top: withSafe(inset.top, SAFE.top),
+        right: withSafe(inset.right, SAFE.right),
+        left: "auto",
+        bottom: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    case "bottom-left":
+      return {
+        bottom: withSafe(inset.bottom, SAFE.bottom),
+        left: withSafe(inset.left, SAFE.left),
+        top: "auto",
+        right: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    case "bottom-right":
+      return {
+        bottom: withSafe(inset.bottom, SAFE.bottom),
+        right: withSafe(inset.right, SAFE.right),
+        top: "auto",
+        left: "auto",
+        width: widthValue,
+        height: heightValue,
+        ...limits
+      };
+    default: {
+      const exhaustive = align;
+      return exhaustive;
+    }
+  }
+}
+function isRecord2(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function parseInsetLength(value, field) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) return value;
+  throw new Error(`${field}: expected a finite number or a nonempty string`);
+}
+function parseInset(value, field) {
+  if (typeof value === "number" || typeof value === "string") {
+    return parseInsetLength(value, field);
+  }
+  if (!isRecord2(value)) throw new Error(`${field}: expected a number, string, or object`);
+  const sides = ["top", "right", "bottom", "left"];
+  const inset = {};
+  for (const side of sides) {
+    if (value[side] === void 0) continue;
+    inset[side] = parseInsetLength(value[side], `${field}.${side}`);
+  }
+  return inset;
+}
+function parseOverlayAnchor(value, field) {
+  if (!isRecord2(value)) throw new Error(`${field}: expected an object`);
+  const align = value.align === void 0 ? void 0 : typeof value.align === "string" && PANO_OVERLAY_ALIGNS.includes(value.align) ? value.align : (() => {
+    throw new Error(`${field}.align: expected ${ALIGN_LIST}`);
+  })();
+  const axis = value.axis === void 0 ? void 0 : value.axis === "horizontal" || value.axis === "vertical" ? value.axis : (() => {
+    throw new Error(`${field}.axis: expected "horizontal" or "vertical"`);
+  })();
+  const inset = value.inset === void 0 ? void 0 : parseInset(value.inset, `${field}.inset`);
+  return {
+    ...align === void 0 ? {} : { align },
+    ...axis === void 0 ? {} : { axis },
+    ...inset === void 0 ? {} : { inset }
+  };
+}
+
 // src/project-scenes.tsx
 var import_react54 = require("react");
 
@@ -19051,6 +19389,13 @@ function pushSample(samples, sample, maxCount = 8) {
   return next;
 }
 
+// src/overlay/toggle.ts
+function resolveOverlayToggleIcon(icon, collapsed) {
+  if (icon === void 0) return void 0;
+  if (typeof icon === "function") return icon({ collapsed });
+  return icon;
+}
+
 // src/pano-scene-menu.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SCENE_MENU_DRAG_THRESHOLD_PX = 6;
@@ -19071,37 +19416,15 @@ var DEFAULT_PANO_SCENE_MENU_APPEARANCE = {
   controlBackground: "rgba(255, 255, 255, 0.12)"
 };
 var DEFAULT_INSET = 12;
-function cssLength(value) {
-  return typeof value === "number" ? `${value}px` : value;
-}
 function resolveAppearance2(appearance) {
   return {
     ...DEFAULT_PANO_SCENE_MENU_APPEARANCE,
     ...appearance
   };
 }
-function resolveInset(inset) {
-  if (inset === void 0) {
-    const value = cssLength(DEFAULT_INSET);
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  if (typeof inset === "number" || typeof inset === "string") {
-    const value = cssLength(inset);
-    return { top: value, right: value, bottom: value, left: value };
-  }
-  return {
-    top: cssLength(inset.top ?? DEFAULT_INSET),
-    right: cssLength(inset.right ?? DEFAULT_INSET),
-    bottom: cssLength(inset.bottom ?? DEFAULT_INSET),
-    left: cssLength(inset.left ?? DEFAULT_INSET)
-  };
-}
 function itemLabel(item) {
   return item.title?.trim() || item.id;
 }
-function isHorizontal(placement) {
-  return placement === "top" || placement === "bottom";
-}
 var CHEVRON_PATHS = {
   // Keep glyphs optically centered in the 16×16 viewBox.
   up: "M3 11l5-6 5 6",
@@ -19115,40 +19438,6 @@ function arrowChevron(direction, orientation2) {
   }
   return orientation2 === "horizontal" ? "right" : "down";
 }
-function toggleChevron(placement, expanded) {
-  switch (placement) {
-    case "bottom":
-      return expanded ? "down" : "up";
-    case "top":
-      return expanded ? "up" : "down";
-    case "left":
-      return expanded ? "left" : "right";
-    case "right":
-      return expanded ? "right" : "left";
-    default: {
-      const exhaustive = placement;
-      void exhaustive;
-      return "down";
-    }
-  }
-}
-function dockInset(placement, inset) {
-  switch (placement) {
-    case "top":
-      return inset.top;
-    case "bottom":
-      return inset.bottom;
-    case "left":
-      return inset.left;
-    case "right":
-      return inset.right;
-    default: {
-      const exhaustive = placement;
-      void exhaustive;
-      return inset.bottom;
-    }
-  }
-}
 function Chevron({ arrow }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "svg",
@@ -19171,6 +19460,7 @@ function ControlButton({
   disabled,
   label,
   onClick,
+  style,
   children
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
@@ -19183,108 +19473,18 @@ function ControlButton({
       onPointerDown: (event) => {
         event.stopPropagation();
       },
+      style,
       title: label,
       type: "button",
       children
     }
   );
 }
-function horizontalAlignStyle(align, inset, widthValue) {
-  const left = `calc(${inset.left} + var(--pano-safe-left))`;
-  const right = `calc(${inset.right} + var(--pano-safe-right))`;
-  if (!widthValue) {
-    return { left, right, width: void 0, marginInline: void 0 };
-  }
-  switch (align) {
-    case "start":
-      return { left, right: "auto", width: widthValue, marginInline: void 0 };
-    case "end":
-      return { left: "auto", right, width: widthValue, marginInline: void 0 };
-    case "center":
-      return { left, right, width: widthValue, marginInline: "auto" };
-    default: {
-      const exhaustive = align;
-      void exhaustive;
-      return { left, right, width: widthValue, marginInline: "auto" };
-    }
-  }
-}
-function verticalAlignStyle(align, inset, heightValue) {
-  const top = `calc(${inset.top} + var(--pano-safe-top))`;
-  const bottom = `calc(${inset.bottom} + var(--pano-safe-bottom))`;
-  if (!heightValue) {
-    return { top, bottom, height: void 0, marginBlock: void 0 };
-  }
-  switch (align) {
-    case "start":
-      return { top, bottom: "auto", height: heightValue, marginBlock: void 0 };
-    case "end":
-      return { top: "auto", bottom, height: heightValue, marginBlock: void 0 };
-    case "center":
-      return { top, bottom, height: heightValue, marginBlock: "auto" };
-    default: {
-      const exhaustive = align;
-      void exhaustive;
-      return { top, bottom, height: heightValue, marginBlock: "auto" };
-    }
-  }
-}
-function placementBoxStyle(placement, inset, width, height, align) {
-  const widthValue = width === void 0 ? void 0 : cssLength(width);
-  const heightValue = height === void 0 ? void 0 : cssLength(height);
-  const maxWidth = `calc(100% - ${inset.left} - ${inset.right} - var(--pano-safe-left) - var(--pano-safe-right))`;
-  const maxHeight = `calc(100% - ${inset.top} - ${inset.bottom} - var(--pano-safe-top) - var(--pano-safe-bottom))`;
-  switch (placement) {
-    case "top":
-      return {
-        ...horizontalAlignStyle(align, inset, widthValue),
-        top: `calc(${inset.top} + var(--pano-safe-top))`,
-        bottom: "auto",
-        maxWidth,
-        height: heightValue,
-        maxHeight
-      };
-    case "bottom":
-      return {
-        ...horizontalAlignStyle(align, inset, widthValue),
-        top: "auto",
-        bottom: `calc(${inset.bottom} + var(--pano-safe-bottom))`,
-        maxWidth,
-        height: heightValue,
-        maxHeight
-      };
-    case "left":
-      return {
-        ...verticalAlignStyle(align, inset, heightValue),
-        right: "auto",
-        left: `calc(${inset.left} + var(--pano-safe-left))`,
-        width: widthValue,
-        maxWidth,
-        maxHeight
-      };
-    case "right":
-      return {
-        ...verticalAlignStyle(align, inset, heightValue),
-        right: `calc(${inset.right} + var(--pano-safe-right))`,
-        left: "auto",
-        width: widthValue,
-        maxWidth,
-        maxHeight
-      };
-    default: {
-      const exhaustive = placement;
-      void exhaustive;
-      return {};
-    }
-  }
-}
 function PanoSceneMenu({
   items,
   activeId = null,
   onSelect,
-  placement = "bottom",
-  align = "center",
-  inset,
+  anchor,
   width,
   height,
   collapsible = false,
@@ -19301,15 +19501,19 @@ function PanoSceneMenu({
   previousLabel = "Previous scene",
   nextLabel = "Next scene",
   expandLabel = "Show scenes",
-  collapseLabel = "Hide scenes"
+  collapseLabel = "Hide scenes",
+  toggle
 }) {
   const listId = (0, import_react63.useId)();
   const listRef = (0, import_react63.useRef)(null);
   const trackRef = (0, import_react63.useRef)(null);
   const itemRefs = (0, import_react63.useRef)(/* @__PURE__ */ new Map());
   const resolved = resolveAppearance2(appearance);
-  const resolvedInset = resolveInset(inset);
-  const horizontal = isHorizontal(placement);
+  const resolvedAnchor = resolveOverlayAnchor(anchor, {
+    align: "bottom",
+    inset: DEFAULT_INSET
+  });
+  const horizontal = resolvedAnchor.axis === "horizontal";
   const customDrag = dragMotionProp !== false;
   const dragMotion = resolveDragMotion(
     dragMotionProp === false ? false : dragMotionProp
@@ -19482,15 +19686,15 @@ function PanoSceneMenu({
       "--pano-scene-menu-label-align": resolved.labelAlign,
       "--pano-scene-menu-font-size": cssLength(resolved.fontSize),
       "--pano-scene-menu-control-color": resolved.controlColor,
-      "--pano-scene-menu-control-background": resolved.controlBackground,
-      "--pano-scene-menu-dock-inset": dockInset(placement, resolvedInset)
+      "--pano-scene-menu-control-background": resolved.controlBackground
     };
     return {
       ...vars,
-      ...placementBoxStyle(placement, resolvedInset, width, height, align),
+      ["--pano-overlay-dock-inset"]: resolvedAnchor.dockInset,
+      ...overlayBoxStyle(resolvedAnchor.align, resolvedAnchor.inset, width, height),
       ...style
     };
-  }, [align, height, placement, resolved, resolvedInset, style, width]);
+  }, [height, resolved, resolvedAnchor, style, width]);
   const setExpanded = (next) => {
     if (!collapsible) {
       return;
@@ -19696,13 +19900,13 @@ function PanoSceneMenu({
     "div",
     {
       "aria-label": label,
-      className: cn("pano-scene-menu", className),
-      "data-align": align,
+      className: cn("pano-overlay-anchor", "pano-scene-menu", className),
+      "data-align": resolvedAnchor.contentAlign,
+      "data-collapse-edge": resolvedAnchor.collapseEdge,
+      "data-collapsed": collapsible && !expanded ? "true" : "false",
       "data-collapsible": collapsible ? "true" : void 0,
       "data-drag-motion": customDrag ? "custom" : "native",
-      "data-expanded": expanded ? "true" : "false",
       "data-orientation": orientation2,
-      "data-placement": placement,
       role: "group",
       style: rootStyle,
       children: [
@@ -19807,10 +20011,19 @@ function PanoSceneMenu({
         collapsible ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           ControlButton,
           {
-            className: "pano-scene-menu-toggle",
+            className: cn(
+              "pano-scene-menu-toggle pano-overlay-anchor-toggle",
+              toggle?.className
+            ),
             label: expanded ? collapseLabel : expandLabel,
             onClick: () => setExpanded(!expanded),
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Chevron, { arrow: toggleChevron(placement, expanded) })
+            style: toggle?.style,
+            children: toggle?.icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              Chevron,
+              {
+                arrow: overlayChevron(resolvedAnchor.collapseEdge, !expanded)
+              }
+            ) : resolveOverlayToggleIcon(toggle.icon, !expanded)
           }
         ) : null
       ]
@@ -21548,11 +21761,21 @@ var import_react68 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DEFAULT_DIALOG_WIDTH = 720;
 var DEFAULT_DIALOG_HEIGHT = 520;
-function dockedBox(corner, offsetX, offsetY, width, height) {
-  const horizontal = corner === "top-right" || corner === "bottom-right" ? { left: "auto", right: offsetX } : { left: offsetX, right: "auto" };
-  const vertical = corner === "bottom-left" || corner === "bottom-right" ? { top: "auto", bottom: offsetY } : { top: offsetY, bottom: "auto" };
-  return { ...horizontal, ...vertical, width, height };
+var MAP_ANCHOR_DEFAULTS = { align: "bottom-left", inset: 16 };
+function mergeAnchor(base, override) {
+  if (base === void 0 && override === void 0) return void 0;
+  return {
+    ...base,
+    ...override,
+    inset: override?.inset !== void 0 ? override.inset : base?.inset
+  };
 }
+var CHEVRON_PATHS2 = {
+  up: "M3 11l5-6 5 6",
+  down: "M3 5l5 6 5-6",
+  left: "M11 3 5 8l6 5",
+  right: "M5 3l6 5-6 5"
+};
 function PanoMapDialogShell({
   open,
   onOpenChange,
@@ -21664,11 +21887,9 @@ function PanoMapOverlay({
   placementSceneId,
   presentationOverride,
   presentation: presentationModeProp,
-  corner: cornerProp,
+  anchor: anchorProp,
   width: widthProp,
   height: heightProp,
-  offsetX: offsetXProp,
-  offsetY: offsetYProp,
   dialogWidth = DEFAULT_DIALOG_WIDTH,
   dialogHeight = DEFAULT_DIALOG_HEIGHT,
   interaction,
@@ -21682,23 +21903,22 @@ function PanoMapOverlay({
   title = "Map",
   className,
   style,
+  toggle,
   editorSurface = false
 }) {
   const { size } = usePanoOverlay();
   const [open, setOpen] = (0, import_react68.useState)(false);
   const [collapsed, setCollapsed] = (0, import_react68.useState)(false);
   const basePresentation = presentationOverride ?? map.presentation ?? {
-    mode: "docked",
-    corner: "bottom-left",
+    mode: "panel",
     width: 220,
-    height: 160,
-    offsetX: 16,
-    offsetY: 16
+    height: 160
   };
   const presentationMode = presentationModeProp ?? basePresentation.mode;
-  const corner = cornerProp ?? basePresentation.corner ?? "bottom-left";
-  const offsetX = offsetXProp ?? basePresentation.offsetX ?? 16;
-  const offsetY = offsetYProp ?? basePresentation.offsetY ?? 16;
+  const resolvedAnchor = resolveOverlayAnchor(
+    mergeAnchor(basePresentation.anchor, anchorProp),
+    MAP_ANCHOR_DEFAULTS
+  );
   const width = widthProp ?? basePresentation.width ?? (presentationMode === "dialog" ? 48 : 220);
   const height = heightProp ?? basePresentation.height ?? (presentationMode === "dialog" ? 48 : 160);
   const resolvedMap = (0, import_react68.useMemo)(() => {
@@ -21730,15 +21950,15 @@ function PanoMapOverlay({
     }
   };
   const editorBox = (0, import_react68.useMemo)(() => {
-    const panelWidth2 = widthProp !== void 0 && Number.isFinite(widthProp) && widthProp > 0 ? widthProp : Math.min(420, Math.max(240, size.width * 0.45));
-    const panelHeight2 = heightProp !== void 0 && Number.isFinite(heightProp) && heightProp > 0 ? heightProp : Math.min(320, Math.max(180, size.height * 0.45));
+    const panelWidth = widthProp !== void 0 && Number.isFinite(widthProp) && widthProp > 0 ? widthProp : Math.min(420, Math.max(240, size.width * 0.45));
+    const panelHeight = heightProp !== void 0 && Number.isFinite(heightProp) && heightProp > 0 ? heightProp : Math.min(320, Math.max(180, size.height * 0.45));
     return {
       left: 16,
       right: "auto",
       top: "auto",
       bottom: 16,
-      width: panelWidth2,
-      height: panelHeight2
+      width: panelWidth,
+      height: panelHeight
     };
   }, [heightProp, size.height, size.width, widthProp]);
   if (editorSurface) {
@@ -21758,7 +21978,7 @@ function PanoMapOverlay({
     );
   }
   if (presentationMode === "dialog") {
-    const launcherBox = dockedBox(corner, offsetX, offsetY, width, height);
+    const launcherBox = overlayBoxStyle(resolvedAnchor.align, resolvedAnchor.inset, width, height);
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: ["pano-map-overlay", className].filter(Boolean).join(" "), "data-pano-map-overlay": "", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
@@ -21790,29 +22010,63 @@ function PanoMapOverlay({
       )
     ] });
   }
-  const panelWidth = collapsed ? Math.max(44, Math.min(width, 56)) : width;
-  const panelHeight = collapsed ? Math.max(44, Math.min(height, 56)) : height;
-  const box = dockedBox(corner, offsetX, offsetY, panelWidth, panelHeight);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  const collapseEnabled = showCollapseControl ?? map.controls?.collapse === true;
+  const box = overlayBoxStyle(resolvedAnchor.align, resolvedAnchor.inset, width, height);
+  const arrow = overlayChevron(resolvedAnchor.collapseEdge, collapsed);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
-      className: ["pano-map-overlay", className].filter(Boolean).join(" "),
+      className: ["pano-overlay-anchor", "pano-map-overlay", className].filter(Boolean).join(" "),
       style: {
         position: "absolute",
-        pointerEvents: "auto",
+        pointerEvents: collapseEnabled && collapsed ? "none" : "auto",
+        ["--pano-overlay-dock-inset"]: resolvedAnchor.dockInset,
+        ["--pano-overlay-anchor-radius"]: "8px",
         ...box,
         ...style
       },
       "data-pano-map-overlay": "",
-      "data-presentation": "docked",
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-        PanoMap,
-        {
-          ...mapProps,
-          collapsed,
-          onCollapsedChange: setCollapsed
-        }
-      )
+      "data-presentation": "panel",
+      "data-collapse-edge": resolvedAnchor.collapseEdge,
+      "data-collapsed": collapseEnabled && collapsed ? "true" : "false",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "div",
+          {
+            className: "pano-map-overlay-surface",
+            "aria-hidden": collapseEnabled && collapsed ? true : void 0,
+            ...collapseEnabled && collapsed ? { inert: true } : null,
+            style: { height: "100%", width: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PanoMap, { ...mapProps, showCollapseControl: false })
+          }
+        ),
+        collapseEnabled ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "button",
+          {
+            type: "button",
+            className: ["pano-map-control", "pano-overlay-anchor-toggle", toggle?.className].filter(Boolean).join(" "),
+            "aria-label": collapsed ? "Expand map" : "Collapse map",
+            "aria-pressed": !collapsed,
+            style: toggle?.style,
+            onClick: () => setCollapsed((value) => !value),
+            children: toggle?.icon === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              "svg",
+              {
+                "aria-hidden": true,
+                fill: "none",
+                height: "16",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.75",
+                viewBox: "0 0 16 16",
+                width: "16",
+                children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: CHEVRON_PATHS2[arrow] })
+              }
+            ) : resolveOverlayToggleIcon(toggle.icon, collapsed)
+          }
+        ) : null
+      ]
     }
   );
 }
@@ -21840,6 +22094,7 @@ function PanoMapOverlay({
   MIN_PANO_CONTEXT_MENU_BACKGROUND_OPACITY,
   MouseControls,
   PANO_FILTER_PRESETS,
+  PANO_OVERLAY_ALIGNS,
   PanoContextMenu,
   PanoEvents,
   PanoFilter,
@@ -21875,9 +22130,13 @@ function PanoMapOverlay({
   headingFromVector,
   horizontalFov,
   imagePointToContainer,
+  isOverlayCorner,
   normalizePanoPosition,
   normalizePanoYaw,
   panoPositionToVector3,
+  parseOverlayAnchor,
+  resolveOverlayAnchor,
+  resolveOverlayToggleIcon,
   resolvePanoContextMenuEntries,
   sectorRotation,
   unwrapPolygonVertices,