@ericchen1990/pano-view 3.5.0 → 3.6.0

package/dist/ui/styles.css

@@ -0,0 +1,70 @@
+/* Optional dialog appearance. Structural layout remains in the components. */
+.pano-dialog-backdrop {
+  background: var(--pano-dialog-backdrop, rgb(0 0 0 / 65%));
+}
+
+.pano-dialog-content {
+  background: var(--pano-dialog-background, #161b22);
+  color: var(--pano-dialog-color, #f4f4f4);
+  border: var(--pano-dialog-border, 1px solid #39424e);
+  border-radius: var(--pano-dialog-radius, 12px);
+  box-shadow: var(--pano-dialog-shadow, 0 16px 64px rgb(0 0 0 / 45%));
+  font: inherit;
+}
+
+.pano-dialog-header {
+  padding: var(--pano-dialog-padding, 20px);
+  padding-top: max(var(--pano-dialog-padding, 20px), env(safe-area-inset-top, 0px));
+  padding-right: calc(var(--pano-dialog-padding, 20px) + 36px + 16px);
+  min-height: calc(max(var(--pano-dialog-padding, 20px), env(safe-area-inset-top, 0px)) + 36px + var(--pano-dialog-padding, 20px));
+}
+
+.pano-dialog-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.pano-dialog-description {
+  margin: 8px 0 0;
+  color: var(--pano-dialog-muted-color, #a7b4c4);
+  font-size: 0.875rem;
+}
+
+.pano-dialog-body {
+  padding: 0 var(--pano-dialog-padding, 20px) max(var(--pano-dialog-padding, 20px), env(safe-area-inset-bottom, 0px));
+  overscroll-behavior: contain;
+}
+
+.pano-dialog-close {
+  position: absolute;
+  top: max(var(--pano-dialog-padding, 20px), env(safe-area-inset-top, 0px));
+  right: var(--pano-dialog-padding, 20px);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  line-height: 1;
+  border: 1px solid currentColor;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.pano-dialog-close:focus-visible {
+  outline: 2px solid var(--pano-dialog-focus-color, #ffb300);
+  outline-offset: 2px;
+}
+
+.pano-project-popup {
+  display: grid;
+  gap: 16px;
+}
+.pano-project-popup p { margin: 0; }
+.pano-project-popup img,
+.pano-project-popup video { display: block; width: 100%; height: auto; }
+.pano-project-popup audio { width: 100%; }

package/dist/ui.cjs

@@ -0,0 +1,195 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ui.ts
+var ui_exports = {};
+__export(ui_exports, {
+  PanoDialog: () => PanoDialog,
+  PanoDialogBackdrop: () => PanoDialogBackdrop,
+  PanoDialogClose: () => PanoDialogClose,
+  PanoDialogContent: () => PanoDialogContent,
+  PanoDialogDescription: () => PanoDialogDescription,
+  PanoDialogRoot: () => PanoDialogRoot,
+  PanoDialogTitle: () => PanoDialogTitle,
+  ProjectPopupDialog: () => ProjectPopupDialog
+});
+module.exports = __toCommonJS(ui_exports);
+
+// src/ui/dialog.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
+var import_react = require("react");
+var import_pano_overlay = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PanoDialogRoot({ open, onOpenChange, children }) {
+  (0, import_pano_overlay.usePanoModal)(open);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { open, onOpenChange, children });
+}
+var PanoDialogBackdrop = (0, import_react.forwardRef)(
+  function PanoDialogBackdrop2({ style, className, ...props }, ref) {
+    const { portalContainer } = (0, import_pano_overlay.usePanoOverlay)();
+    if (!portalContainer) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      DialogPrimitive.Overlay,
+      {
+        ...props,
+        ref,
+        "data-pano-dialog-backdrop": "",
+        className: ["pano-dialog-backdrop", className].filter(Boolean).join(" "),
+        style: { position: "absolute", inset: 0, pointerEvents: "auto", ...style }
+      }
+    ) });
+  }
+);
+var PanoDialogContent = (0, import_react.forwardRef)(
+  function PanoDialogContent2({ children, style, className, onOpenAutoFocus, onCloseAutoFocus, ...props }, forwardedRef) {
+    const { portalContainer, visibleRect } = (0, import_pano_overlay.usePanoOverlay)();
+    const [nestedContainer, setNestedContainer] = (0, import_react.useState)(null);
+    const returnFocus = (0, import_react.useRef)(null);
+    if (!portalContainer) return null;
+    const layout = {
+      "--pano-dialog-available-width": `${Math.max(0, visibleRect.width - 32)}px`,
+      "--pano-dialog-available-height": `${Math.max(0, visibleRect.height - 32)}px`,
+      position: "absolute",
+      top: visibleRect.top + visibleRect.height / 2,
+      left: visibleRect.left + visibleRect.width / 2,
+      transform: "translate(-50%, -50%)",
+      width: "min(var(--pano-dialog-width, 640px), var(--pano-dialog-available-width))",
+      maxHeight: "var(--pano-dialog-available-height)",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "auto",
+      pointerEvents: "auto",
+      zIndex: 1,
+      ...style
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      DialogPrimitive.Content,
+      {
+        ...props,
+        ref: forwardedRef,
+        "data-pano-dialog": "",
+        className: ["pano-dialog-content", className].filter(Boolean).join(" "),
+        style: layout,
+        onOpenAutoFocus: (event) => {
+          const active = portalContainer.ownerDocument.activeElement;
+          returnFocus.current = active instanceof HTMLElement ? active : null;
+          onOpenAutoFocus?.(event);
+        },
+        onCloseAutoFocus: (event) => {
+          onCloseAutoFocus?.(event);
+          if (event.defaultPrevented) return;
+          event.preventDefault();
+          const previous = returnFocus.current;
+          const canvas = portalContainer.closest("[data-pano-viewer]")?.querySelector("canvas");
+          const target = previous?.isConnected && previous !== previous.ownerDocument.body && !previous.closest("[inert]") ? previous : canvas;
+          if (target && !target.closest("[inert]")) target.focus({ preventScroll: true });
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pano_overlay.PanoOverlayPortalProvider, { container: nestedContainer, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              "data-pano-dialog-portals": "",
+              ref: setNestedContainer,
+              style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 2 }
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var PanoDialogTitle = DialogPrimitive.Title;
+var PanoDialogDescription = DialogPrimitive.Description;
+var PanoDialogClose = DialogPrimitive.Close;
+function PanoDialog({ open, onOpenChange, title, description, closeLabel = "Close", children, className, style }) {
+  const descriptionId = (0, import_react.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PanoDialogRoot, { open, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanoDialogBackdrop, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      PanoDialogContent,
+      {
+        className,
+        style: { overflow: "hidden", ...style },
+        "aria-describedby": description == null ? void 0 : descriptionId,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("header", { className: "pano-dialog-header", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanoDialogTitle, { className: "pano-dialog-title", children: title }),
+            description == null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanoDialogDescription, { id: descriptionId, className: "pano-dialog-description", children: description })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanoDialogClose, { className: "pano-dialog-close", "aria-label": closeLabel, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m4 4 8 8M12 4l-8 8" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pano-dialog-body", style: { overflow: "auto", minHeight: 0 }, children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/project-popup-dialog.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PopupMedia({ block, label, onError }) {
+  const ref = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const media = ref.current;
+    if (media && media.getAttribute("src") !== block.src) {
+      media.src = block.src;
+      media.load();
+    }
+    return () => {
+      if (!media) return;
+      media.pause();
+      media.removeAttribute("src");
+      media.load();
+    };
+  }, [block.src]);
+  const props = { controls: true, autoPlay: false, preload: "metadata", src: block.src, onError };
+  return block.type === "video" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("video", { ...props, ref: (node) => {
+    ref.current = node;
+  }, playsInline: true, poster: block.poster, "aria-label": label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("audio", { ...props, ref: (node) => {
+    ref.current = node;
+  }, "aria-label": label });
+}
+function ProjectPopupDialog({ popup, onOpenChange, closeLabel, onMediaError }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanoDialog, { open: popup !== null, onOpenChange, title: popup?.title || popup?.id || "", closeLabel, children: popup ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pano-project-popup", children: popup.blocks.map((block) => block.type === "text" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { whiteSpace: "pre-wrap", overflowWrap: "anywhere" }, children: block.text }, block.id) : block.type === "image" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { src: block.src, alt: block.alt ?? "", onError: () => onMediaError?.(block) }, `${block.id}:${block.src}`) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopupMedia, { block, label: popup.title, onError: () => onMediaError?.(block) }, `${block.id}:${block.src}`)) }, popup.id) : null });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PanoDialog,
+  PanoDialogBackdrop,
+  PanoDialogClose,
+  PanoDialogContent,
+  PanoDialogDescription,
+  PanoDialogRoot,
+  PanoDialogTitle,
+  ProjectPopupDialog
+});
+//# sourceMappingURL=ui.cjs.map

package/dist/ui.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui.ts","../src/ui/dialog.tsx","../src/ui/project-popup-dialog.tsx"],"sourcesContent":["export {\n  PanoDialog,\n  PanoDialogRoot,\n  PanoDialogBackdrop,\n  PanoDialogContent,\n  PanoDialogTitle,\n  PanoDialogDescription,\n  PanoDialogClose,\n} from \"./ui/dialog\";\nexport type {\n  PanoDialogProps,\n  PanoDialogRootProps,\n  PanoDialogBackdropProps,\n  PanoDialogContentProps,\n  PanoDialogTitleProps,\n  PanoDialogDescriptionProps,\n  PanoDialogCloseProps,\n} from \"./ui/dialog\";\nexport { ProjectPopupDialog } from \"./ui/project-popup-dialog\";\nexport type { ProjectPopupDialogProps } from \"./ui/project-popup-dialog\";\n","import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { forwardRef, useId, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from \"react\";\nimport { PanoOverlayPortalProvider, usePanoModal, usePanoOverlay } from \"../overlay/pano-overlay\";\n\nexport type PanoDialogRootProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: ReactNode;\n};\n\nexport function PanoDialogRoot({ open, onOpenChange, children }: PanoDialogRootProps) {\n  usePanoModal(open);\n  return <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>{children}</DialogPrimitive.Root>;\n}\n\nexport type PanoDialogBackdropProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, \"forceMount\">;\n\nexport const PanoDialogBackdrop = forwardRef<HTMLDivElement, PanoDialogBackdropProps>(\n  function PanoDialogBackdrop({ style, className, ...props }, ref) {\n    const { portalContainer } = usePanoOverlay();\n    if (!portalContainer) return null;\n    return (\n      <DialogPrimitive.Portal container={portalContainer}>\n        <DialogPrimitive.Overlay\n          {...props}\n          ref={ref}\n          data-pano-dialog-backdrop=\"\"\n          className={[\"pano-dialog-backdrop\", className].filter(Boolean).join(\" \")}\n          style={{ position: \"absolute\", inset: 0, pointerEvents: \"auto\", ...style }}\n        />\n      </DialogPrimitive.Portal>\n    );\n  },\n);\n\nexport type PanoDialogContentProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, \"forceMount\" | \"asChild\">;\n\nexport const PanoDialogContent = forwardRef<HTMLDivElement, PanoDialogContentProps>(\n  function PanoDialogContent({ children, style, className, onOpenAutoFocus, onCloseAutoFocus, ...props }, forwardedRef) {\n    const { portalContainer, visibleRect } = usePanoOverlay();\n    const [nestedContainer, setNestedContainer] = useState<HTMLDivElement | null>(null);\n    const returnFocus = useRef<HTMLElement | null>(null);\n    if (!portalContainer) return null;\n    const layout: CSSProperties & Record<`--pano-dialog-${string}`, string> = {\n      \"--pano-dialog-available-width\": `${Math.max(0, visibleRect.width - 32)}px`,\n      \"--pano-dialog-available-height\": `${Math.max(0, visibleRect.height - 32)}px`,\n      position: \"absolute\",\n      top: visibleRect.top + visibleRect.height / 2,\n      left: visibleRect.left + visibleRect.width / 2,\n      transform: \"translate(-50%, -50%)\",\n      width: \"min(var(--pano-dialog-width, 640px), var(--pano-dialog-available-width))\",\n      maxHeight: \"var(--pano-dialog-available-height)\",\n      boxSizing: \"border-box\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      overflow: \"auto\",\n      pointerEvents: \"auto\",\n      zIndex: 1,\n      ...style,\n    };\n    return (\n      <DialogPrimitive.Portal container={portalContainer}>\n        <DialogPrimitive.Content\n          {...props}\n          ref={forwardedRef}\n          data-pano-dialog=\"\"\n          className={[\"pano-dialog-content\", className].filter(Boolean).join(\" \")}\n          style={layout}\n          onOpenAutoFocus={(event) => {\n            const active = portalContainer.ownerDocument.activeElement;\n            returnFocus.current = active instanceof HTMLElement ? active : null;\n            onOpenAutoFocus?.(event);\n          }}\n          onCloseAutoFocus={(event) => {\n            onCloseAutoFocus?.(event);\n            if (event.defaultPrevented) return;\n            event.preventDefault();\n            const previous = returnFocus.current;\n            const canvas = portalContainer.closest(\"[data-pano-viewer]\")?.querySelector(\"canvas\");\n            const target = previous?.isConnected && previous !== previous.ownerDocument.body && !previous.closest(\"[inert]\")\n              ? previous : canvas;\n            if (target && !target.closest(\"[inert]\")) target.focus({ preventScroll: true });\n          }}\n        >\n          <PanoOverlayPortalProvider container={nestedContainer}>\n            {children}\n          </PanoOverlayPortalProvider>\n          <div\n            data-pano-dialog-portals=\"\"\n            ref={setNestedContainer}\n            style={{ position: \"absolute\", inset: 0, pointerEvents: \"none\", zIndex: 2 }}\n          />\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\n\nexport const PanoDialogTitle = DialogPrimitive.Title;\nexport const PanoDialogDescription = DialogPrimitive.Description;\nexport const PanoDialogClose = DialogPrimitive.Close;\nexport type PanoDialogTitleProps = ComponentPropsWithoutRef<typeof PanoDialogTitle>;\nexport type PanoDialogDescriptionProps = ComponentPropsWithoutRef<typeof PanoDialogDescription>;\nexport type PanoDialogCloseProps = ComponentPropsWithoutRef<typeof PanoDialogClose>;\n\nexport type PanoDialogProps = PanoDialogRootProps & {\n  title: ReactNode;\n  description?: ReactNode;\n  closeLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n};\n\n/** A ready-to-use modal; compose the exported parts for a different layout. */\nexport function PanoDialog({ open, onOpenChange, title, description, closeLabel = \"Close\", children, className, style }: PanoDialogProps) {\n  const descriptionId = useId();\n  return (\n    <PanoDialogRoot open={open} onOpenChange={onOpenChange}>\n      <PanoDialogBackdrop />\n      <PanoDialogContent\n        className={className}\n        style={{ overflow: \"hidden\", ...style }}\n        aria-describedby={description == null ? undefined : descriptionId}\n      >\n        <header className=\"pano-dialog-header\" style={{ flexShrink: 0 }}>\n          <div>\n            <PanoDialogTitle className=\"pano-dialog-title\">{title}</PanoDialogTitle>\n            {description == null ? null : (\n              <PanoDialogDescription id={descriptionId} className=\"pano-dialog-description\">{description}</PanoDialogDescription>\n            )}\n          </div>\n        </header>\n        <PanoDialogClose className=\"pano-dialog-close\" aria-label={closeLabel} type=\"button\">\n          <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n            <path d=\"m4 4 8 8M12 4l-8 8\" />\n          </svg>\n        </PanoDialogClose>\n        <div className=\"pano-dialog-body\" style={{ overflow: \"auto\", minHeight: 0 }}>{children}</div>\n      </PanoDialogContent>\n    </PanoDialogRoot>\n  );\n}\n","import { useEffect, useRef } from \"react\";\nimport type { ProjectPopupBlock, ProjectPopupDefinition } from \"../data\";\nimport { PanoDialog } from \"./dialog\";\n\nexport type ProjectPopupDialogProps = {\n  popup: ProjectPopupDefinition | null;\n  onOpenChange: (open: boolean) => void;\n  closeLabel?: string;\n  onMediaError?: (block: ProjectPopupBlock) => void;\n};\n\nfunction PopupMedia({ block, label, onError }: {\n  block: Extract<ProjectPopupBlock, { type: \"audio\" | \"video\" }>;\n  label: string;\n  onError?: () => void;\n}) {\n  const ref = useRef<HTMLMediaElement | null>(null);\n  useEffect(() => {\n    const media = ref.current;\n    // Strict Mode replays cleanup/setup on the same DOM node.\n    if (media && media.getAttribute(\"src\") !== block.src) {\n      media.src = block.src;\n      media.load();\n    }\n    return () => {\n      if (!media) return;\n      media.pause();\n      media.removeAttribute(\"src\");\n      media.load();\n    };\n  }, [block.src]);\n  const props = { controls: true, autoPlay: false, preload: \"metadata\", src: block.src, onError } as const;\n  return block.type === \"video\"\n    ? <video {...props} ref={(node) => { ref.current = node; }} playsInline poster={block.poster} aria-label={label} />\n    : <audio {...props} ref={(node) => { ref.current = node; }} aria-label={label} />;\n}\n\n/** Render in PanoViewer.renderOverlay; the host owns selection and may replace this UI. */\nexport function ProjectPopupDialog({ popup, onOpenChange, closeLabel, onMediaError }: ProjectPopupDialogProps) {\n  return <PanoDialog open={popup !== null} onOpenChange={onOpenChange} title={popup?.title || popup?.id || \"\"} closeLabel={closeLabel}>\n    {popup ? <div className=\"pano-project-popup\" key={popup.id}>\n      {popup.blocks.map((block) => block.type === \"text\"\n        ? <p key={block.id} style={{ whiteSpace: \"pre-wrap\", overflowWrap: \"anywhere\" }}>{block.text}</p>\n        : block.type === \"image\"\n          ? <img key={`${block.id}:${block.src}`} src={block.src} alt={block.alt ?? \"\"} onError={() => onMediaError?.(block)} />\n          : <PopupMedia key={`${block.id}:${block.src}`} block={block} label={popup.title} onError={() => onMediaError?.(block)} />)}\n    </div> : null}\n  </PanoDialog>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,sBAAiC;AACjC,mBAAuH;AACvH,0BAAwE;AAU/D;AAFF,SAAS,eAAe,EAAE,MAAM,cAAc,SAAS,GAAwB;AACpF,wCAAa,IAAI;AACjB,SAAO,4CAAiB,sBAAhB,EAAqB,MAAY,cAA6B,UAAS;AACjF;AAIO,IAAM,yBAAqB;AAAA,EAChC,SAASA,oBAAmB,EAAE,OAAO,WAAW,GAAG,MAAM,GAAG,KAAK;AAC/D,UAAM,EAAE,gBAAgB,QAAI,oCAAe;AAC3C,QAAI,CAAC,gBAAiB,QAAO;AAC7B,WACE,4CAAiB,wBAAhB,EAAuB,WAAW,iBACjC;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,6BAA0B;AAAA,QAC1B,WAAW,CAAC,wBAAwB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACvE,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,eAAe,QAAQ,GAAG,MAAM;AAAA;AAAA,IAC3E,GACF;AAAA,EAEJ;AACF;AAIO,IAAM,wBAAoB;AAAA,EAC/B,SAASC,mBAAkB,EAAE,UAAU,OAAO,WAAW,iBAAiB,kBAAkB,GAAG,MAAM,GAAG,cAAc;AACpH,UAAM,EAAE,iBAAiB,YAAY,QAAI,oCAAe;AACxD,UAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAAgC,IAAI;AAClF,UAAM,kBAAc,qBAA2B,IAAI;AACnD,QAAI,CAAC,gBAAiB,QAAO;AAC7B,UAAM,SAAoE;AAAA,MACxE,iCAAiC,GAAG,KAAK,IAAI,GAAG,YAAY,QAAQ,EAAE,CAAC;AAAA,MACvE,kCAAkC,GAAG,KAAK,IAAI,GAAG,YAAY,SAAS,EAAE,CAAC;AAAA,MACzE,UAAU;AAAA,MACV,KAAK,YAAY,MAAM,YAAY,SAAS;AAAA,MAC5C,MAAM,YAAY,OAAO,YAAY,QAAQ;AAAA,MAC7C,WAAW;AAAA,MACX,OAAO;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,MACf,QAAQ;AAAA,MACR,GAAG;AAAA,IACL;AACA,WACE,4CAAiB,wBAAhB,EAAuB,WAAW,iBACjC;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,WAAW,CAAC,uBAAuB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,QACtE,OAAO;AAAA,QACP,iBAAiB,CAAC,UAAU;AAC1B,gBAAM,SAAS,gBAAgB,cAAc;AAC7C,sBAAY,UAAU,kBAAkB,cAAc,SAAS;AAC/D,4BAAkB,KAAK;AAAA,QACzB;AAAA,QACA,kBAAkB,CAAC,UAAU;AAC3B,6BAAmB,KAAK;AACxB,cAAI,MAAM,iBAAkB;AAC5B,gBAAM,eAAe;AACrB,gBAAM,WAAW,YAAY;AAC7B,gBAAM,SAAS,gBAAgB,QAAQ,oBAAoB,GAAG,cAAc,QAAQ;AACpF,gBAAM,SAAS,UAAU,eAAe,aAAa,SAAS,cAAc,QAAQ,CAAC,SAAS,QAAQ,SAAS,IAC3G,WAAW;AACf,cAAI,UAAU,CAAC,OAAO,QAAQ,SAAS,EAAG,QAAO,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,QAChF;AAAA,QAEA;AAAA,sDAAC,iDAA0B,WAAW,iBACnC,UACH;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,4BAAyB;AAAA,cACzB,KAAK;AAAA,cACL,OAAO,EAAE,UAAU,YAAY,OAAO,GAAG,eAAe,QAAQ,QAAQ,EAAE;AAAA;AAAA,UAC5E;AAAA;AAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEO,IAAM,kBAAkC;AACxC,IAAM,wBAAwC;AAC9C,IAAM,kBAAkC;AAcxC,SAAS,WAAW,EAAE,MAAM,cAAc,OAAO,aAAa,aAAa,SAAS,UAAU,WAAW,MAAM,GAAoB;AACxI,QAAM,oBAAgB,oBAAM;AAC5B,SACE,6CAAC,kBAAe,MAAY,cAC1B;AAAA,gDAAC,sBAAmB;AAAA,IACpB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,EAAE,UAAU,UAAU,GAAG,MAAM;AAAA,QACtC,oBAAkB,eAAe,OAAO,SAAY;AAAA,QAEpD;AAAA,sDAAC,YAAO,WAAU,sBAAqB,OAAO,EAAE,YAAY,EAAE,GAC5D,uDAAC,SACC;AAAA,wDAAC,mBAAgB,WAAU,qBAAqB,iBAAM;AAAA,YACrD,eAAe,OAAO,OACrB,4CAAC,yBAAsB,IAAI,eAAe,WAAU,2BAA2B,uBAAY;AAAA,aAE/F,GACF;AAAA,UACA,4CAAC,mBAAgB,WAAU,qBAAoB,cAAY,YAAY,MAAK,UAC1E,sDAAC,SAAI,eAAY,QAAO,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SACjI,sDAAC,UAAK,GAAE,sBAAqB,GAC/B,GACF;AAAA,UACA,4CAAC,SAAI,WAAU,oBAAmB,OAAO,EAAE,UAAU,QAAQ,WAAW,EAAE,GAAI,UAAS;AAAA;AAAA;AAAA,IACzF;AAAA,KACF;AAEJ;;;AC7IA,IAAAC,gBAAkC;AAiC5B,IAAAC,sBAAA;AAtBN,SAAS,WAAW,EAAE,OAAO,OAAO,QAAQ,GAIzC;AACD,QAAM,UAAM,sBAAgC,IAAI;AAChD,+BAAU,MAAM;AACd,UAAM,QAAQ,IAAI;AAElB,QAAI,SAAS,MAAM,aAAa,KAAK,MAAM,MAAM,KAAK;AACpD,YAAM,MAAM,MAAM;AAClB,YAAM,KAAK;AAAA,IACb;AACA,WAAO,MAAM;AACX,UAAI,CAAC,MAAO;AACZ,YAAM,MAAM;AACZ,YAAM,gBAAgB,KAAK;AAC3B,YAAM,KAAK;AAAA,IACb;AAAA,EACF,GAAG,CAAC,MAAM,GAAG,CAAC;AACd,QAAM,QAAQ,EAAE,UAAU,MAAM,UAAU,OAAO,SAAS,YAAY,KAAK,MAAM,KAAK,QAAQ;AAC9F,SAAO,MAAM,SAAS,UAClB,6CAAC,WAAO,GAAG,OAAO,KAAK,CAAC,SAAS;AAAE,QAAI,UAAU;AAAA,EAAM,GAAG,aAAW,MAAC,QAAQ,MAAM,QAAQ,cAAY,OAAO,IAC/G,6CAAC,WAAO,GAAG,OAAO,KAAK,CAAC,SAAS;AAAE,QAAI,UAAU;AAAA,EAAM,GAAG,cAAY,OAAO;AACnF;AAGO,SAAS,mBAAmB,EAAE,OAAO,cAAc,YAAY,aAAa,GAA4B;AAC7G,SAAO,6CAAC,cAAW,MAAM,UAAU,MAAM,cAA4B,OAAO,OAAO,SAAS,OAAO,MAAM,IAAI,YAC1G,kBAAQ,6CAAC,SAAI,WAAU,sBACrB,gBAAM,OAAO,IAAI,CAAC,UAAU,MAAM,SAAS,SACxC,6CAAC,OAAiB,OAAO,EAAE,YAAY,YAAY,cAAc,WAAW,GAAI,gBAAM,QAA9E,MAAM,EAA6E,IAC3F,MAAM,SAAS,UACb,6CAAC,SAAqC,KAAK,MAAM,KAAK,KAAK,MAAM,OAAO,IAAI,SAAS,MAAM,eAAe,KAAK,KAArG,GAAG,MAAM,EAAE,IAAI,MAAM,GAAG,EAAgF,IAClH,6CAAC,cAA4C,OAAc,OAAO,MAAM,OAAO,SAAS,MAAM,eAAe,KAAK,KAAjG,GAAG,MAAM,EAAE,IAAI,MAAM,GAAG,EAA4E,CAAE,KAL7E,MAAM,EAMxD,IAAS,MACX;AACF;","names":["PanoDialogBackdrop","PanoDialogContent","import_react","import_jsx_runtime"]}

package/dist/ui.d.mts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, ComponentPropsWithoutRef } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type PanoDialogRootProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+};
+declare function PanoDialogRoot({ open, onOpenChange, children }: PanoDialogRootProps): react.JSX.Element;
+type PanoDialogBackdropProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, "forceMount">;
+declare const PanoDialogBackdrop: react.ForwardRefExoticComponent<PanoDialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
+type PanoDialogContentProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "forceMount" | "asChild">;
+declare const PanoDialogContent: react.ForwardRefExoticComponent<PanoDialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const PanoDialogTitle: react.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const PanoDialogDescription: react.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const PanoDialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+type PanoDialogTitleProps = ComponentPropsWithoutRef<typeof PanoDialogTitle>;
+type PanoDialogDescriptionProps = ComponentPropsWithoutRef<typeof PanoDialogDescription>;
+type PanoDialogCloseProps = ComponentPropsWithoutRef<typeof PanoDialogClose>;
+type PanoDialogProps = PanoDialogRootProps & {
+    title: ReactNode;
+    description?: ReactNode;
+    closeLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/** A ready-to-use modal; compose the exported parts for a different layout. */
+declare function PanoDialog({ open, onOpenChange, title, description, closeLabel, children, className, style }: PanoDialogProps): react.JSX.Element;
+
+type ProjectPopupBlock = {
+    id: string;
+} & ({
+    type: "text";
+    text: string;
+} | {
+    type: "image";
+    src: string;
+    alt?: string;
+} | {
+    type: "video";
+    src: string;
+    poster?: string;
+} | {
+    type: "audio";
+    src: string;
+});
+type ProjectPopupDefinition = {
+    id: string;
+    title: string;
+    blocks: ProjectPopupBlock[];
+};
+
+type ProjectPopupDialogProps = {
+    popup: ProjectPopupDefinition | null;
+    onOpenChange: (open: boolean) => void;
+    closeLabel?: string;
+    onMediaError?: (block: ProjectPopupBlock) => void;
+};
+/** Render in PanoViewer.renderOverlay; the host owns selection and may replace this UI. */
+declare function ProjectPopupDialog({ popup, onOpenChange, closeLabel, onMediaError }: ProjectPopupDialogProps): react.JSX.Element;
+
+export { PanoDialog, PanoDialogBackdrop, type PanoDialogBackdropProps, PanoDialogClose, type PanoDialogCloseProps, PanoDialogContent, type PanoDialogContentProps, PanoDialogDescription, type PanoDialogDescriptionProps, type PanoDialogProps, PanoDialogRoot, type PanoDialogRootProps, PanoDialogTitle, type PanoDialogTitleProps, ProjectPopupDialog, type ProjectPopupDialogProps };

package/dist/ui.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties, ComponentPropsWithoutRef } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+
+type PanoDialogRootProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+};
+declare function PanoDialogRoot({ open, onOpenChange, children }: PanoDialogRootProps): react.JSX.Element;
+type PanoDialogBackdropProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, "forceMount">;
+declare const PanoDialogBackdrop: react.ForwardRefExoticComponent<PanoDialogBackdropProps & react.RefAttributes<HTMLDivElement>>;
+type PanoDialogContentProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, "forceMount" | "asChild">;
+declare const PanoDialogContent: react.ForwardRefExoticComponent<PanoDialogContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const PanoDialogTitle: react.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const PanoDialogDescription: react.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const PanoDialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+type PanoDialogTitleProps = ComponentPropsWithoutRef<typeof PanoDialogTitle>;
+type PanoDialogDescriptionProps = ComponentPropsWithoutRef<typeof PanoDialogDescription>;
+type PanoDialogCloseProps = ComponentPropsWithoutRef<typeof PanoDialogClose>;
+type PanoDialogProps = PanoDialogRootProps & {
+    title: ReactNode;
+    description?: ReactNode;
+    closeLabel?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/** A ready-to-use modal; compose the exported parts for a different layout. */
+declare function PanoDialog({ open, onOpenChange, title, description, closeLabel, children, className, style }: PanoDialogProps): react.JSX.Element;
+
+type ProjectPopupBlock = {
+    id: string;
+} & ({
+    type: "text";
+    text: string;
+} | {
+    type: "image";
+    src: string;
+    alt?: string;
+} | {
+    type: "video";
+    src: string;
+    poster?: string;
+} | {
+    type: "audio";
+    src: string;
+});
+type ProjectPopupDefinition = {
+    id: string;
+    title: string;
+    blocks: ProjectPopupBlock[];
+};
+
+type ProjectPopupDialogProps = {
+    popup: ProjectPopupDefinition | null;
+    onOpenChange: (open: boolean) => void;
+    closeLabel?: string;
+    onMediaError?: (block: ProjectPopupBlock) => void;
+};
+/** Render in PanoViewer.renderOverlay; the host owns selection and may replace this UI. */
+declare function ProjectPopupDialog({ popup, onOpenChange, closeLabel, onMediaError }: ProjectPopupDialogProps): react.JSX.Element;
+
+export { PanoDialog, PanoDialogBackdrop, type PanoDialogBackdropProps, PanoDialogClose, type PanoDialogCloseProps, PanoDialogContent, type PanoDialogContentProps, PanoDialogDescription, type PanoDialogDescriptionProps, type PanoDialogProps, PanoDialogRoot, type PanoDialogRootProps, PanoDialogTitle, type PanoDialogTitleProps, ProjectPopupDialog, type ProjectPopupDialogProps };

package/dist/ui.mjs

@@ -0,0 +1,152 @@
+"use client";
+
+// src/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { forwardRef, useId, useRef, useState } from "react";
+import { PanoOverlayPortalProvider, usePanoModal, usePanoOverlay } from "./index.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PanoDialogRoot({ open, onOpenChange, children }) {
+  usePanoModal(open);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { open, onOpenChange, children });
+}
+var PanoDialogBackdrop = forwardRef(
+  function PanoDialogBackdrop2({ style, className, ...props }, ref) {
+    const { portalContainer } = usePanoOverlay();
+    if (!portalContainer) return null;
+    return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+      DialogPrimitive.Overlay,
+      {
+        ...props,
+        ref,
+        "data-pano-dialog-backdrop": "",
+        className: ["pano-dialog-backdrop", className].filter(Boolean).join(" "),
+        style: { position: "absolute", inset: 0, pointerEvents: "auto", ...style }
+      }
+    ) });
+  }
+);
+var PanoDialogContent = forwardRef(
+  function PanoDialogContent2({ children, style, className, onOpenAutoFocus, onCloseAutoFocus, ...props }, forwardedRef) {
+    const { portalContainer, visibleRect } = usePanoOverlay();
+    const [nestedContainer, setNestedContainer] = useState(null);
+    const returnFocus = useRef(null);
+    if (!portalContainer) return null;
+    const layout = {
+      "--pano-dialog-available-width": `${Math.max(0, visibleRect.width - 32)}px`,
+      "--pano-dialog-available-height": `${Math.max(0, visibleRect.height - 32)}px`,
+      position: "absolute",
+      top: visibleRect.top + visibleRect.height / 2,
+      left: visibleRect.left + visibleRect.width / 2,
+      transform: "translate(-50%, -50%)",
+      width: "min(var(--pano-dialog-width, 640px), var(--pano-dialog-available-width))",
+      maxHeight: "var(--pano-dialog-available-height)",
+      boxSizing: "border-box",
+      display: "flex",
+      flexDirection: "column",
+      overflow: "auto",
+      pointerEvents: "auto",
+      zIndex: 1,
+      ...style
+    };
+    return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ...props,
+        ref: forwardedRef,
+        "data-pano-dialog": "",
+        className: ["pano-dialog-content", className].filter(Boolean).join(" "),
+        style: layout,
+        onOpenAutoFocus: (event) => {
+          const active = portalContainer.ownerDocument.activeElement;
+          returnFocus.current = active instanceof HTMLElement ? active : null;
+          onOpenAutoFocus?.(event);
+        },
+        onCloseAutoFocus: (event) => {
+          onCloseAutoFocus?.(event);
+          if (event.defaultPrevented) return;
+          event.preventDefault();
+          const previous = returnFocus.current;
+          const canvas = portalContainer.closest("[data-pano-viewer]")?.querySelector("canvas");
+          const target = previous?.isConnected && previous !== previous.ownerDocument.body && !previous.closest("[inert]") ? previous : canvas;
+          if (target && !target.closest("[inert]")) target.focus({ preventScroll: true });
+        },
+        children: [
+          /* @__PURE__ */ jsx(PanoOverlayPortalProvider, { container: nestedContainer, children }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-pano-dialog-portals": "",
+              ref: setNestedContainer,
+              style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 2 }
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var PanoDialogTitle = DialogPrimitive.Title;
+var PanoDialogDescription = DialogPrimitive.Description;
+var PanoDialogClose = DialogPrimitive.Close;
+function PanoDialog({ open, onOpenChange, title, description, closeLabel = "Close", children, className, style }) {
+  const descriptionId = useId();
+  return /* @__PURE__ */ jsxs(PanoDialogRoot, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PanoDialogBackdrop, {}),
+    /* @__PURE__ */ jsxs(
+      PanoDialogContent,
+      {
+        className,
+        style: { overflow: "hidden", ...style },
+        "aria-describedby": description == null ? void 0 : descriptionId,
+        children: [
+          /* @__PURE__ */ jsx("header", { className: "pano-dialog-header", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(PanoDialogTitle, { className: "pano-dialog-title", children: title }),
+            description == null ? null : /* @__PURE__ */ jsx(PanoDialogDescription, { id: descriptionId, className: "pano-dialog-description", children: description })
+          ] }) }),
+          /* @__PURE__ */ jsx(PanoDialogClose, { className: "pano-dialog-close", "aria-label": closeLabel, type: "button", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "pano-dialog-body", style: { overflow: "auto", minHeight: 0 }, children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/ui/project-popup-dialog.tsx
+import { useEffect, useRef as useRef2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function PopupMedia({ block, label, onError }) {
+  const ref = useRef2(null);
+  useEffect(() => {
+    const media = ref.current;
+    if (media && media.getAttribute("src") !== block.src) {
+      media.src = block.src;
+      media.load();
+    }
+    return () => {
+      if (!media) return;
+      media.pause();
+      media.removeAttribute("src");
+      media.load();
+    };
+  }, [block.src]);
+  const props = { controls: true, autoPlay: false, preload: "metadata", src: block.src, onError };
+  return block.type === "video" ? /* @__PURE__ */ jsx2("video", { ...props, ref: (node) => {
+    ref.current = node;
+  }, playsInline: true, poster: block.poster, "aria-label": label }) : /* @__PURE__ */ jsx2("audio", { ...props, ref: (node) => {
+    ref.current = node;
+  }, "aria-label": label });
+}
+function ProjectPopupDialog({ popup, onOpenChange, closeLabel, onMediaError }) {
+  return /* @__PURE__ */ jsx2(PanoDialog, { open: popup !== null, onOpenChange, title: popup?.title || popup?.id || "", closeLabel, children: popup ? /* @__PURE__ */ jsx2("div", { className: "pano-project-popup", children: popup.blocks.map((block) => block.type === "text" ? /* @__PURE__ */ jsx2("p", { style: { whiteSpace: "pre-wrap", overflowWrap: "anywhere" }, children: block.text }, block.id) : block.type === "image" ? /* @__PURE__ */ jsx2("img", { src: block.src, alt: block.alt ?? "", onError: () => onMediaError?.(block) }, `${block.id}:${block.src}`) : /* @__PURE__ */ jsx2(PopupMedia, { block, label: popup.title, onError: () => onMediaError?.(block) }, `${block.id}:${block.src}`)) }, popup.id) : null });
+}
+export {
+  PanoDialog,
+  PanoDialogBackdrop,
+  PanoDialogClose,
+  PanoDialogContent,
+  PanoDialogDescription,
+  PanoDialogRoot,
+  PanoDialogTitle,
+  ProjectPopupDialog
+};
+//# sourceMappingURL=ui.mjs.map

package/dist/ui.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/dialog.tsx","../src/ui/project-popup-dialog.tsx"],"sourcesContent":["import * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { forwardRef, useId, useRef, useState, type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from \"react\";\nimport { PanoOverlayPortalProvider, usePanoModal, usePanoOverlay } from \"../overlay/pano-overlay\";\n\nexport type PanoDialogRootProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: ReactNode;\n};\n\nexport function PanoDialogRoot({ open, onOpenChange, children }: PanoDialogRootProps) {\n  usePanoModal(open);\n  return <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>{children}</DialogPrimitive.Root>;\n}\n\nexport type PanoDialogBackdropProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, \"forceMount\">;\n\nexport const PanoDialogBackdrop = forwardRef<HTMLDivElement, PanoDialogBackdropProps>(\n  function PanoDialogBackdrop({ style, className, ...props }, ref) {\n    const { portalContainer } = usePanoOverlay();\n    if (!portalContainer) return null;\n    return (\n      <DialogPrimitive.Portal container={portalContainer}>\n        <DialogPrimitive.Overlay\n          {...props}\n          ref={ref}\n          data-pano-dialog-backdrop=\"\"\n          className={[\"pano-dialog-backdrop\", className].filter(Boolean).join(\" \")}\n          style={{ position: \"absolute\", inset: 0, pointerEvents: \"auto\", ...style }}\n        />\n      </DialogPrimitive.Portal>\n    );\n  },\n);\n\nexport type PanoDialogContentProps = Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, \"forceMount\" | \"asChild\">;\n\nexport const PanoDialogContent = forwardRef<HTMLDivElement, PanoDialogContentProps>(\n  function PanoDialogContent({ children, style, className, onOpenAutoFocus, onCloseAutoFocus, ...props }, forwardedRef) {\n    const { portalContainer, visibleRect } = usePanoOverlay();\n    const [nestedContainer, setNestedContainer] = useState<HTMLDivElement | null>(null);\n    const returnFocus = useRef<HTMLElement | null>(null);\n    if (!portalContainer) return null;\n    const layout: CSSProperties & Record<`--pano-dialog-${string}`, string> = {\n      \"--pano-dialog-available-width\": `${Math.max(0, visibleRect.width - 32)}px`,\n      \"--pano-dialog-available-height\": `${Math.max(0, visibleRect.height - 32)}px`,\n      position: \"absolute\",\n      top: visibleRect.top + visibleRect.height / 2,\n      left: visibleRect.left + visibleRect.width / 2,\n      transform: \"translate(-50%, -50%)\",\n      width: \"min(var(--pano-dialog-width, 640px), var(--pano-dialog-available-width))\",\n      maxHeight: \"var(--pano-dialog-available-height)\",\n      boxSizing: \"border-box\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      overflow: \"auto\",\n      pointerEvents: \"auto\",\n      zIndex: 1,\n      ...style,\n    };\n    return (\n      <DialogPrimitive.Portal container={portalContainer}>\n        <DialogPrimitive.Content\n          {...props}\n          ref={forwardedRef}\n          data-pano-dialog=\"\"\n          className={[\"pano-dialog-content\", className].filter(Boolean).join(\" \")}\n          style={layout}\n          onOpenAutoFocus={(event) => {\n            const active = portalContainer.ownerDocument.activeElement;\n            returnFocus.current = active instanceof HTMLElement ? active : null;\n            onOpenAutoFocus?.(event);\n          }}\n          onCloseAutoFocus={(event) => {\n            onCloseAutoFocus?.(event);\n            if (event.defaultPrevented) return;\n            event.preventDefault();\n            const previous = returnFocus.current;\n            const canvas = portalContainer.closest(\"[data-pano-viewer]\")?.querySelector(\"canvas\");\n            const target = previous?.isConnected && previous !== previous.ownerDocument.body && !previous.closest(\"[inert]\")\n              ? previous : canvas;\n            if (target && !target.closest(\"[inert]\")) target.focus({ preventScroll: true });\n          }}\n        >\n          <PanoOverlayPortalProvider container={nestedContainer}>\n            {children}\n          </PanoOverlayPortalProvider>\n          <div\n            data-pano-dialog-portals=\"\"\n            ref={setNestedContainer}\n            style={{ position: \"absolute\", inset: 0, pointerEvents: \"none\", zIndex: 2 }}\n          />\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    );\n  },\n);\n\nexport const PanoDialogTitle = DialogPrimitive.Title;\nexport const PanoDialogDescription = DialogPrimitive.Description;\nexport const PanoDialogClose = DialogPrimitive.Close;\nexport type PanoDialogTitleProps = ComponentPropsWithoutRef<typeof PanoDialogTitle>;\nexport type PanoDialogDescriptionProps = ComponentPropsWithoutRef<typeof PanoDialogDescription>;\nexport type PanoDialogCloseProps = ComponentPropsWithoutRef<typeof PanoDialogClose>;\n\nexport type PanoDialogProps = PanoDialogRootProps & {\n  title: ReactNode;\n  description?: ReactNode;\n  closeLabel?: string;\n  className?: string;\n  style?: CSSProperties;\n};\n\n/** A ready-to-use modal; compose the exported parts for a different layout. */\nexport function PanoDialog({ open, onOpenChange, title, description, closeLabel = \"Close\", children, className, style }: PanoDialogProps) {\n  const descriptionId = useId();\n  return (\n    <PanoDialogRoot open={open} onOpenChange={onOpenChange}>\n      <PanoDialogBackdrop />\n      <PanoDialogContent\n        className={className}\n        style={{ overflow: \"hidden\", ...style }}\n        aria-describedby={description == null ? undefined : descriptionId}\n      >\n        <header className=\"pano-dialog-header\" style={{ flexShrink: 0 }}>\n          <div>\n            <PanoDialogTitle className=\"pano-dialog-title\">{title}</PanoDialogTitle>\n            {description == null ? null : (\n              <PanoDialogDescription id={descriptionId} className=\"pano-dialog-description\">{description}</PanoDialogDescription>\n            )}\n          </div>\n        </header>\n        <PanoDialogClose className=\"pano-dialog-close\" aria-label={closeLabel} type=\"button\">\n          <svg aria-hidden=\"true\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\">\n            <path d=\"m4 4 8 8M12 4l-8 8\" />\n          </svg>\n        </PanoDialogClose>\n        <div className=\"pano-dialog-body\" style={{ overflow: \"auto\", minHeight: 0 }}>{children}</div>\n      </PanoDialogContent>\n    </PanoDialogRoot>\n  );\n}\n","import { useEffect, useRef } from \"react\";\nimport type { ProjectPopupBlock, ProjectPopupDefinition } from \"../data\";\nimport { PanoDialog } from \"./dialog\";\n\nexport type ProjectPopupDialogProps = {\n  popup: ProjectPopupDefinition | null;\n  onOpenChange: (open: boolean) => void;\n  closeLabel?: string;\n  onMediaError?: (block: ProjectPopupBlock) => void;\n};\n\nfunction PopupMedia({ block, label, onError }: {\n  block: Extract<ProjectPopupBlock, { type: \"audio\" | \"video\" }>;\n  label: string;\n  onError?: () => void;\n}) {\n  const ref = useRef<HTMLMediaElement | null>(null);\n  useEffect(() => {\n    const media = ref.current;\n    // Strict Mode replays cleanup/setup on the same DOM node.\n    if (media && media.getAttribute(\"src\") !== block.src) {\n      media.src = block.src;\n      media.load();\n    }\n    return () => {\n      if (!media) return;\n      media.pause();\n      media.removeAttribute(\"src\");\n      media.load();\n    };\n  }, [block.src]);\n  const props = { controls: true, autoPlay: false, preload: \"metadata\", src: block.src, onError } as const;\n  return block.type === \"video\"\n    ? <video {...props} ref={(node) => { ref.current = node; }} playsInline poster={block.poster} aria-label={label} />\n    : <audio {...props} ref={(node) => { ref.current = node; }} aria-label={label} />;\n}\n\n/** Render in PanoViewer.renderOverlay; the host owns selection and may replace this UI. */\nexport function ProjectPopupDialog({ popup, onOpenChange, closeLabel, onMediaError }: ProjectPopupDialogProps) {\n  return <PanoDialog open={popup !== null} onOpenChange={onOpenChange} title={popup?.title || popup?.id || \"\"} closeLabel={closeLabel}>\n    {popup ? <div className=\"pano-project-popup\" key={popup.id}>\n      {popup.blocks.map((block) => block.type === \"text\"\n        ? <p key={block.id} style={{ whiteSpace: \"pre-wrap\", overflowWrap: \"anywhere\" }}>{block.text}</p>\n        : block.type === \"image\"\n          ? <img key={`${block.id}:${block.src}`} src={block.src} alt={block.alt ?? \"\"} onError={() => onMediaError?.(block)} />\n          : <PopupMedia key={`${block.id}:${block.src}`} block={block} label={popup.title} onError={() => onMediaError?.(block)} />)}\n    </div> : null}\n  </PanoDialog>;\n}\n"],"mappings":"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","names":["PanoDialogBackdrop","PanoDialogContent","useRef","jsx","useRef"]}