@dtducas/wh-forge-viewer 3.0.0-beta.3 → 3.0.0-beta.5

package/dist/index.esm.js

@@ -92836,7 +92836,7 @@ styleInject(css_248z$4);
 var css_248z$3 = "#navTools,\n#modelTools,\n#settingsTools,\n#measureTools {\n  display: none !important;\n  visibility: hidden !important;\n}\n#guiviewer3d-toolbar {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  gap: 20px;\n  position: fixed !important;\n  bottom: 10px !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  width: auto !important;\n  border-radius: 4px !important;\n  padding: 8px 12px !important;\n}\n#custom-tool-group {\n  display: flex !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n#custom-pagination-group {\n  display: flex;\n  position: relative !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  left: auto !important;\n}\n\n/* Export Combo Dropdown Styles */\n.export-combo-dropdown {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #2d2d2d;\n  border-radius: 4px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  min-width: 180px;\n  padding: 4px 0;\n  margin-bottom: 8px;\n  z-index: 1000;\n}\n\n.export-combo-dropdown::after {\n  content: '';\n  position: absolute;\n  bottom: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 6px solid #2d2d2d;\n}\n\n.export-combo-option {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: background-color 0.15s ease;\n  color: #fff;\n  font-size: 13px;\n  white-space: nowrap;\n}\n\n.export-combo-option:hover {\n  background-color: #3d3d3d;\n}\n\n.export-combo-option:active {\n  background-color: #4d4d4d;\n}\n\n.export-combo-icon {\n  margin-right: 8px;\n  font-size: 16px;\n  opacity: 0.8;\n}\n\n.export-combo-label {\n  flex: 1;\n}\n\n/* Active state for combo button */\n.custom-export-combo-btn.active {\n  background-color: #3d3d3d !important;\n}\n";
 styleInject(css_248z$3);
 
-var css_248z$2 = "/* Custom icon styles for toolbar using SVG */\n/* Download icon - custom SVG (white, thicker stroke) */\n.adsk-icon-custom-download::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\\\n    <path d=\"M4.75 17.25a.75.75 0 0 1 .75.75v2.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V18a.75.75 0 0 1 1.5 0v2.25A1.75 1.75 0 0 1 18.25 22H5.75A1.75 1.75 0 0 1 4 20.25V18a.75.75 0 0 1 .75-.75Z\"/>\\\n    <path d=\"M5.22 9.97a.749.749 0 0 1 1.06 0l4.97 4.969V2.75a.75.75 0 0 1 1.5 0v12.189l4.97-4.969a.749.749 0 1 1 1.06 1.06l-6.25 6.25a.749.749 0 0 1-1.06 0l-6.25-6.25a.749.749 0 0 1 0-1.06Z\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Previous page icon - custom SVG (white, filled) */\n.adsk-icon-custom-prev::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\\\n<g transform=\"translate(512 512) scale(1.2) translate(-512 -512)\">\\\n<path fill=\"%23FFFFFF\" d=\"M685.248 104.704a64 64 0 010 90.496L368.448 512l316.8 316.8a64 64 0 01-90.496 90.496L232.704 557.248a64 64 0 010-90.496l362.048-362.048a64 64 0 0190.496 0z\"/>\\\n</g>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Next page icon - custom SVG (white, filled) */\n.adsk-icon-custom-next::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\\\n<g transform=\"translate(512 512) scale(1.2) translate(-512 -512)\">\\\n<path fill=\"%23FFFFFF\" d=\"M338.752 104.704a64 64 0 000 90.496l316.8 316.8-316.8 316.8a64 64 0 0090.496 90.496l362.048-362.048a64 64 0 000-90.496L429.248 104.704a64 64 0 00-90.496 0z\"/>\\\n</g>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Fallback for adsk-icon-caret-left and adsk-icon-caret-right if not defined */\n.adsk-icon-caret-left::before {\n  content: '[';\n  font-family: 'adsk-viewing';\n}\n.adsk-icon-caret-right::before {\n  content: ']';\n  font-family: 'adsk-viewing';\n}\n/* Comment icon - custom SVG (Smiley) */\n.adsk-icon-custom-comment::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"></line><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"></line></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n/* Save icon - custom SVG */\n.adsk-icon-custom-save::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path><polyline points=\"17 21 17 13 7 13 7 21\"></polyline><polyline points=\"7 3 7 8 15 8\"></polyline></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n";
+var css_248z$2 = "/* Custom icon styles for toolbar using SVG */\n/* Download icon - custom SVG (white, thicker stroke) */\n.adsk-icon-custom-download::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23ffffff\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\\\n    <path d=\"M4.75 17.25a.75.75 0 0 1 .75.75v2.25c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V18a.75.75 0 0 1 1.5 0v2.25A1.75 1.75 0 0 1 18.25 22H5.75A1.75 1.75 0 0 1 4 20.25V18a.75.75 0 0 1 .75-.75Z\"/>\\\n    <path d=\"M5.22 9.97a.749.749 0 0 1 1.06 0l4.97 4.969V2.75a.75.75 0 0 1 1.5 0v12.189l4.97-4.969a.749.749 0 1 1 1.06 1.06l-6.25 6.25a.749.749 0 0 1-1.06 0l-6.25-6.25a.749.749 0 0 1 0-1.06Z\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Previous page icon - custom SVG (white, filled) */\n.adsk-icon-custom-prev::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\\\n<g transform=\"translate(512 512) scale(1.2) translate(-512 -512)\">\\\n<path fill=\"%23FFFFFF\" d=\"M685.248 104.704a64 64 0 010 90.496L368.448 512l316.8 316.8a64 64 0 01-90.496 90.496L232.704 557.248a64 64 0 010-90.496l362.048-362.048a64 64 0 0190.496 0z\"/>\\\n</g>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Next page icon - custom SVG (white, filled) */\n.adsk-icon-custom-next::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1024 1024\">\\\n<g transform=\"translate(512 512) scale(1.2) translate(-512 -512)\">\\\n<path fill=\"%23FFFFFF\" d=\"M338.752 104.704a64 64 0 000 90.496l316.8 316.8-316.8 316.8a64 64 0 0090.496 90.496l362.048-362.048a64 64 0 000-90.496L429.248 104.704a64 64 0 00-90.496 0z\"/>\\\n</g>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n/* Fallback for adsk-icon-caret-left and adsk-icon-caret-right if not defined */\n.adsk-icon-caret-left::before {\n  content: '[';\n  font-family: 'adsk-viewing';\n}\n.adsk-icon-caret-right::before {\n  content: ']';\n  font-family: 'adsk-viewing';\n}\n/* Comment icon - custom SVG (Smiley) */\n.adsk-icon-custom-comment::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"></line><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"></line></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n/* Save icon - custom SVG */\n.adsk-icon-custom-save::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path><polyline points=\"17 21 17 13 7 13 7 21\"></polyline><polyline points=\"7 3 7 8 15 8\"></polyline></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n/* Export with Markup icon - share/export arrow */\n.adsk-icon-markup::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg fill=\"%23ffffff\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 493.525 493.525\"><path d=\"M430.557,79.556H218.44c21.622,12.688,40.255,29.729,54.859,49.906h157.258c7.196,0,13.063,5.863,13.063,13.06v238.662c0,7.199-5.866,13.064-13.063,13.064H191.894c-7.198,0-13.062-5.865-13.062-13.064V222.173c-6.027-3.1-12.33-5.715-18.845-7.732c-3.818,11.764-12.105,21.787-23.508,27.781c-2.39,1.252-4.987,2.014-7.554,2.844v136.119c0,34.717,28.25,62.971,62.968,62.971h238.663c34.718,0,62.969-28.254,62.969-62.971V142.522C493.525,107.806,465.275,79.556,430.557,79.556z\"/><path d=\"M129.037,175.989c51.419,1.234,96.388,28.283,122.25,68.865c2.371,3.705,6.434,5.848,10.657,5.848c1.152,0,2.322-0.162,3.46-0.486c5.377-1.545,9.114-6.418,9.179-12.006c0-0.504,0-1.01,0-1.51c0-81.148-64.853-147.023-145.527-148.957V64.155c0-5.492-3.038-10.512-7.879-13.078c-2.16-1.139-4.533-1.707-6.889-1.707c-2.94,0-5.848,0.88-8.35,2.584L5.751,120.526C2.162,122.98,0.018,127.041,0,131.394c-0.017,4.338,2.113,8.418,5.687,10.902l100.17,69.451c2.518,1.753,5.459,2.631,8.414,2.631c2.355,0,4.696-0.553,6.857-1.676c4.855-2.549,7.909-7.6,7.909-13.092V175.989z\"/></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n";
 styleInject(css_248z$2);
 
 // ─── Constants ────────────────────────────────────────────────────────────────
@@ -94818,7 +94818,9 @@ function MinimapPanel(_ref) {
     totalPages = _ref$totalPages === void 0 ? 1 : _ref$totalPages,
     viewableGuid = _ref.viewableGuid,
     filePath = _ref.filePath,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    _ref$sidebarOffset = _ref.sidebarOffset,
+    sidebarOffset = _ref$sidebarOffset === void 0 ? 56 : _ref$sidebarOffset;
   var _useMinimapThumbnail = useMinimapThumbnail({
       filePath: filePath,
       viewableGuid: viewableGuid,
@@ -94844,6 +94846,8 @@ function MinimapPanel(_ref) {
     setPosition = _useState6[1];
   var panelRef = useRef(null);
   var mapRef = useRef(null);
+  var sidebarOffsetRef = useRef(sidebarOffset);
+  sidebarOffsetRef.current = sidebarOffset;
   var dragRef = useRef({
     active: false,
     startX: 0,
@@ -95012,7 +95016,7 @@ function MinimapPanel(_ref) {
       var newX = dragRef.current.originX + (e.clientX - dragRef.current.startX);
       var newY = dragRef.current.originY + (e.clientY - dragRef.current.startY);
       setPosition({
-        x: Math.max(0, Math.min(newX, containerW - panelW)),
+        x: Math.max(sidebarOffsetRef.current, Math.min(newX, containerW - panelW)),
         y: Math.max(0, Math.min(newY, containerH - panelH))
       });
     };
@@ -95039,7 +95043,9 @@ function MinimapPanel(_ref) {
   var panelStyle = position ? {
     left: position.x,
     top: position.y
-  } : {};
+  } : {
+    left: sidebarOffset
+  };
   return jsxs("div", {
     ref: panelRef,
     className: "wh-minimap-panel".concat(shouldShow ? ' wh-minimap-panel--visible' : ''),
@@ -95696,7 +95702,9 @@ function ViewerSidebar(_ref3) {
     _ref3$hidePanels = _ref3.hidePanels,
     hidePanels = _ref3$hidePanels === void 0 ? [] : _ref3$hidePanels,
     _ref3$className = _ref3.className,
-    className = _ref3$className === void 0 ? '' : _ref3$className;
+    className = _ref3$className === void 0 ? '' : _ref3$className,
+    isDraftShared = _ref3.isDraftShared,
+    onToggleDraftShared = _ref3.onToggleDraftShared;
   var handleClick = function handleClick(panel) {
     // Toggle off if already active
     onPanelChange === null || onPanelChange === void 0 || onPanelChange(activePanel === panel ? null : panel);
@@ -95741,6 +95749,62 @@ function ViewerSidebar(_ref3) {
       children: jsx(IconSubmit, {})
     }), jsx("div", {
       className: 'wh-sidebar-spacer'
+    }), onToggleDraftShared !== undefined && jsxs(Fragment, {
+      children: [jsx("hr", {
+        className: 'wh-sidebar-divider'
+      }), jsx("button", {
+        type: 'button',
+        className: 'wh-sidebar-btn',
+        "data-tooltip": isDraftShared ? 'Stop sharing draft' : 'Share draft',
+        "aria-pressed": isDraftShared,
+        onClick: function onClick() {
+          return onToggleDraftShared(!isDraftShared);
+        },
+        style: {
+          width: 36,
+          height: 36,
+          borderRadius: 6,
+          border: isDraftShared ? '1.5px solid #6366f1' : '1.5px solid transparent',
+          background: isDraftShared ? '#ede9fe' : undefined,
+          color: isDraftShared ? '#6366f1' : '#6b7280',
+          flexShrink: 0,
+          transition: 'border-color 0.15s, background 0.15s, color 0.15s'
+        },
+        children: jsxs("svg", {
+          width: '18',
+          height: '18',
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          stroke: 'currentColor',
+          strokeWidth: '2',
+          strokeLinecap: 'round',
+          strokeLinejoin: 'round',
+          "aria-hidden": 'true',
+          children: [jsx("circle", {
+            cx: '18',
+            cy: '5',
+            r: '3'
+          }), jsx("circle", {
+            cx: '6',
+            cy: '12',
+            r: '3'
+          }), jsx("circle", {
+            cx: '18',
+            cy: '19',
+            r: '3'
+          }), jsx("line", {
+            x1: '8.59',
+            y1: '13.51',
+            x2: '15.42',
+            y2: '17.49'
+          }), jsx("line", {
+            x1: '15.41',
+            y1: '6.51',
+            x2: '8.59',
+            y2: '10.49'
+          })]
+        })
+      })]
     }), jsx("hr", {
       className: 'wh-sidebar-divider'
     }), jsx(PresenceIndicator, {
@@ -95813,6 +95877,9 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
     checkSubmitHasMarkup = _ref.checkSubmitHasMarkup,
     _ref$defaultActiveSid = _ref.defaultActiveSidebarPanel,
     defaultActiveSidebarPanel = _ref$defaultActiveSid === void 0 ? null : _ref$defaultActiveSid,
+    onSidebarWidthChange = _ref.onSidebarWidthChange,
+    isDraftShared = _ref.isDraftShared,
+    onToggleDraftShared = _ref.onToggleDraftShared,
     collabAdapter = _ref.collabAdapter,
     collabActorId = _ref.collabActorId,
     collabDrawingId = _ref.collabDrawingId,
@@ -96615,6 +96682,11 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
     viewerInstance === null || viewerInstance === void 0 || (_viewerInstance$resiz = viewerInstance.resize) === null || _viewerInstance$resiz === void 0 || _viewerInstance$resiz.call(viewerInstance);
   }, [viewerInstance, activeSidebarPanel, panelWidth, showDrawer, drawerWidth]);
 
+  // Notify host app of total sidebar width so it can adjust external layout.
+  useEffect(function () {
+    onSidebarWidthChange === null || onSidebarWidthChange === void 0 || onSidebarWidthChange(activeSidebarPanel ? 44 + panelWidth : 0);
+  }, [activeSidebarPanel, panelWidth, onSidebarWidthChange]);
+
   // ─── Callbacks ────────────────────────────────────────────────────────────
   var handleDrawerPropertyChange = useCallback(function (key, value) {
     var _markupMgrRef$current4;
@@ -96716,7 +96788,9 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
       onPanelChange: setActiveSidebarPanel,
       onlineUsers: onlineUsers,
       showSubmitPanel: !!submitConfig,
-      hidePanels: hidePanels
+      hidePanels: hidePanels,
+      isDraftShared: onToggleDraftShared !== undefined ? isDraftShared !== null && isDraftShared !== void 0 ? isDraftShared : false : undefined,
+      onToggleDraftShared: onToggleDraftShared
     }), activeSidebarPanel === 'sheets' && /*#__PURE__*/jsx(SheetsPanel, {
       viewables: viewables,
       currentIndex: currentPageIndex,
@@ -96783,7 +96857,8 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
       filePath: filePath,
       onClose: function onClose() {
         return setShowMinimap(false);
-      }
+      },
+      sidebarOffset: activeSidebarPanel ? 44 + panelWidth + 8 : 52
     }), showMarkupToolbar && markupEngineInstance && /*#__PURE__*/jsx(SelectionActionToolbar, {
       engine: markupEngineInstance,
       viewerContainer: viewerContainerRef.current,