@ericchen1990/pano-view 3.10.0 → 4.0.0

package/dist/styles.css

@@ -593,45 +593,100 @@
   padding: 0 16px 16px;
 }
 
-.pano-scene-menu {
-  background: transparent;
-  display: block;
-  pointer-events: none;
-  position: absolute;
+.pano-overlay-anchor {
   transition: transform 240ms ease;
-  z-index: 2;
 }
 
-.pano-scene-menu[data-placement="bottom"][data-expanded="false"] {
-  transform: translateY(
-    calc(100% + var(--pano-scene-menu-dock-inset, 12px))
-  );
+.pano-overlay-anchor[data-collapse-edge="bottom"][data-collapsed="true"] {
+  transform: translateY(calc(100% + var(--pano-overlay-dock-inset, 0px)));
 }
 
-.pano-scene-menu[data-placement="top"][data-expanded="false"] {
-  transform: translateY(
-    calc(-100% - var(--pano-scene-menu-dock-inset, 12px))
-  );
+.pano-overlay-anchor[data-collapse-edge="top"][data-collapsed="true"] {
+  transform: translateY(calc(-100% - var(--pano-overlay-dock-inset, 0px)));
 }
 
-.pano-scene-menu[data-placement="left"][data-expanded="false"] {
-  transform: translateX(
-    calc(-100% - var(--pano-scene-menu-dock-inset, 12px))
-  );
+.pano-overlay-anchor[data-collapse-edge="left"][data-collapsed="true"] {
+  transform: translateX(calc(-100% - var(--pano-overlay-dock-inset, 0px)));
 }
 
-.pano-scene-menu[data-placement="right"][data-expanded="false"] {
-  transform: translateX(
-    calc(100% + var(--pano-scene-menu-dock-inset, 12px))
-  );
+.pano-overlay-anchor[data-collapse-edge="right"][data-collapsed="true"] {
+  transform: translateX(calc(100% + var(--pano-overlay-dock-inset, 0px)));
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .pano-scene-menu {
+  .pano-overlay-anchor {
     transition: none;
   }
 }
 
+.pano-overlay-anchor-toggle {
+  pointer-events: auto;
+  position: absolute;
+  z-index: 1;
+}
+
+.pano-overlay-anchor[data-collapse-edge="bottom"] .pano-overlay-anchor-toggle,
+.pano-overlay-anchor[data-collapse-edge="top"] .pano-overlay-anchor-toggle {
+  height: 1.5rem;
+  min-height: 1.5rem;
+  min-width: 4.5rem;
+  padding: 0;
+  width: 4.5rem;
+}
+
+.pano-overlay-anchor[data-collapse-edge="left"] .pano-overlay-anchor-toggle,
+.pano-overlay-anchor[data-collapse-edge="right"] .pano-overlay-anchor-toggle {
+  height: 4.5rem;
+  min-height: 4.5rem;
+  min-width: 1.5rem;
+  padding: 0;
+  width: 1.5rem;
+}
+
+.pano-overlay-anchor-toggle svg {
+  flex: none;
+}
+
+.pano-overlay-anchor[data-collapse-edge="bottom"] .pano-overlay-anchor-toggle {
+  border-radius: var(--pano-overlay-anchor-radius, 8px)
+    var(--pano-overlay-anchor-radius, 8px) 0 0;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.pano-overlay-anchor[data-collapse-edge="top"] .pano-overlay-anchor-toggle {
+  border-radius: 0 0 var(--pano-overlay-anchor-radius, 8px)
+    var(--pano-overlay-anchor-radius, 8px);
+  left: 50%;
+  top: 100%;
+  transform: translateX(-50%);
+}
+
+.pano-overlay-anchor[data-collapse-edge="left"] .pano-overlay-anchor-toggle {
+  border-radius: 0 var(--pano-overlay-anchor-radius, 8px)
+    var(--pano-overlay-anchor-radius, 8px) 0;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pano-overlay-anchor[data-collapse-edge="right"] .pano-overlay-anchor-toggle {
+  border-radius: var(--pano-overlay-anchor-radius, 8px) 0 0
+    var(--pano-overlay-anchor-radius, 8px);
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.pano-scene-menu {
+  background: transparent;
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
 .pano-scene-menu-body {
   align-items: center;
   background: var(--pano-scene-menu-background, rgba(16, 16, 16, 0.72));
@@ -805,56 +860,6 @@
 }
 
 .pano-scene-menu-toggle {
+  --pano-overlay-anchor-radius: var(--pano-scene-menu-radius, 8px);
   background: var(--pano-scene-menu-background, rgba(16, 16, 16, 0.72));
-  pointer-events: auto;
-  position: absolute;
-  z-index: 1;
-}
-
-.pano-scene-menu[data-placement="bottom"] .pano-scene-menu-toggle,
-.pano-scene-menu[data-placement="top"] .pano-scene-menu-toggle {
-  height: 1.5rem;
-  min-height: 1.5rem;
-  min-width: 4.5rem;
-  width: 4.5rem;
-}
-
-.pano-scene-menu[data-placement="left"] .pano-scene-menu-toggle,
-.pano-scene-menu[data-placement="right"] .pano-scene-menu-toggle {
-  height: 4.5rem;
-  min-height: 4.5rem;
-  min-width: 1.5rem;
-  width: 1.5rem;
-}
-
-.pano-scene-menu[data-placement="bottom"] .pano-scene-menu-toggle {
-  border-radius: var(--pano-scene-menu-radius, 8px)
-    var(--pano-scene-menu-radius, 8px) 0 0;
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.pano-scene-menu[data-placement="top"] .pano-scene-menu-toggle {
-  border-radius: 0 0 var(--pano-scene-menu-radius, 8px)
-    var(--pano-scene-menu-radius, 8px);
-  left: 50%;
-  top: 100%;
-  transform: translateX(-50%);
-}
-
-.pano-scene-menu[data-placement="left"] .pano-scene-menu-toggle {
-  border-radius: 0 var(--pano-scene-menu-radius, 8px)
-    var(--pano-scene-menu-radius, 8px) 0;
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-.pano-scene-menu[data-placement="right"] .pano-scene-menu-toggle {
-  border-radius: var(--pano-scene-menu-radius, 8px) 0 0
-    var(--pano-scene-menu-radius, 8px);
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
 }

package/docs/dialogs.md

@@ -122,7 +122,7 @@ The registry below contains two different articles, a video, a gallery and an if
 | `entrance` | `guide` | iframe | Courtyard guide |
 | `hall` | `story` | article | Hall story |
 
-The complete source defines every content component, the registry, selection state and click handler. It is also the source displayed in the `/overlays` playground. Save it as `multi-hotspot-example.tsx`, pass a loaded project as `project`, and replace the `/fixtures/...` URLs with your own assets outside this repository.
+The complete source defines every content component, the registry, selection state and click handler. On `/overlays`, Default dialog shows this file; Compose parts and Third-party dialog switch the sample to their own dialog shells. Save it as `multi-hotspot-example.tsx`, pass a loaded project as `project`, and replace the `/fixtures/...` URLs with your own assets outside this repository.
 
 ```tsx
 import { useEffect, useRef, useState, type ReactNode } from "react";

package/docs/dialogs.zh-CN.md

@@ -122,7 +122,7 @@ export function Tour({ project }: { project: LoadedPanoProject }) {
 | `entrance` | `guide` | iframe | Courtyard guide |
 | `hall` | `story` | article | Hall story |
 
-下面是完整源码，包含所有内容组件、映射、选中状态和点击处理，也是 `/overlays` 页面展示的代码。保存为 `multi-hotspot-example.tsx`，以 `project` 传入已加载的项目即可；在仓库外使用时，将 `/fixtures/...` 替换为自己的资源地址。
+下面是完整源码，包含所有内容组件、映射、选中状态和点击处理。`/overlays` 页的 Default dialog 展示这份源码；Compose parts 与 Third-party dialog 会换成各自的弹窗示例。保存为 `multi-hotspot-example.tsx`，以 `project` 传入已加载的项目即可；在仓库外使用时，将 `/fixtures/...` 替换为自己的资源地址。
 
 ```tsx
 import { useEffect, useRef, useState, type ReactNode } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ericchen1990/pano-view",
-  "version": "3.10.0",
+  "version": "4.0.0",
   "description": "React components for panoramic viewing experiences.",
   "author": "Eric Chen",
   "license": "MIT",