@dtducas/wh-forge-viewer 1.0.9-beta0 → 2.0.0-beta.2

package/dist/index.esm.js

@@ -2550,6 +2550,14 @@ var MarkupConverterService = /*#__PURE__*/function () {
       if (shape === null || shape === void 0 ? void 0 : shape.text) {
         attrs += " text=\"".concat(this.escapeXml(shape.text), "\"");
       }
+      // Add text-data for stamp/image types.
+      // Forge's MarkupStamp.loadSvgData() reads style['text-data'] as the image SVG source.
+      // Without this, Forge creates a blank (invisible) stamp when loadMarkups() + enterEditMode()
+      // is used to restore stamps into the edit canvas (used by reloadEditCanvasWithMergedMarkups).
+      if (forgeType === 'stamp' && (shape === null || shape === void 0 ? void 0 : shape.imageData)) {
+        var svgData = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\" width=\"1\" height=\"1\"><image width=\"1\" height=\"1\" href=\"".concat(shape.imageData, "\"/></svg>");
+        attrs += " text-data=\"".concat(this.escapeXml(svgData), "\"");
+      }
       // Add font attributes.
       // CRITICAL: The <metadata><markup_element font-size="..."/> is parsed by Forge's
       // loadMarkups() as a COORDINATE-SPACE value (model units), NOT SVG pixel units.
@@ -2775,7 +2783,12 @@ var MarkupConverterService = /*#__PURE__*/function () {
               var _h3 = size[1];
               var x = -_w2 / 2;
               var y = -_h3 / 2;
-              return "<image href=\"".concat(imgData, "\" x=\"").concat(x, "\" y=\"").concat(y, "\" width=\"").concat(_w2, "\" height=\"").concat(_h3, "\" transform=\"").concat(transform, "\"/>") + "<rect id=\"hitarea\" fill=\"transparent\" stroke=\"transparent\" x=\"".concat(x, "\" y=\"").concat(y, "\" width=\"").concat(_w2, "\" height=\"").concat(_h3, "\" transform=\"").concat(transform, "\"/>");
+              // Forge's markup SVG canvas uses a Y-up coordinate system.
+              // Raster <image> pixels are always Y-down (screen space), so they appear
+              // upside-down without a counter-flip.  Append scale(1,-1) to flip the image
+              // content back to the correct screen orientation for User B's overlay.
+              // The hitarea rect does not need a flip — it is transparent and just tracks hits.
+              return "<image href=\"".concat(imgData, "\" x=\"").concat(x, "\" y=\"").concat(y, "\" width=\"").concat(_w2, "\" height=\"").concat(_h3, "\" transform=\"").concat(transform, " scale(1,-1)\"/>") + "<rect id=\"hitarea\" fill=\"transparent\" stroke=\"transparent\" x=\"".concat(x, "\" y=\"").concat(y, "\" width=\"").concat(_w2, "\" height=\"").concat(_h3, "\" transform=\"").concat(transform, "\"/>");
             }
             if (imgData === '__pending__') {
               // Render a placeholder rectangle while image chunks are still arriving
@@ -34104,33 +34117,81 @@ function updateShapeAttributes(svgElement, element) {
 }
 // ========== Shape Creation Functions ==========
 /**
- * Create arrow SVG element
+ * Create arrow SVG element matching Forge Viewer's native arrow format.
+ *
+ * Forge Viewer renders arrows as a single filled <path> (shaft + arrowhead merged)
+ * centered at the midpoint of the two endpoints and rotated to the correct angle.
+ * This matches the native SVG:
+ *   <path d="M -hl -hh l (2hl-al) 0 l -ni -(ahh-hh) l (al+ni) ahh l -(al+ni) ahh l ni -(ahh-hh) l -(2hl-al) 0 z"
+ *         transform="translate(cx, cy) rotate(angleDeg)" stroke-width="sw" fill="strokeColor" stroke="strokeColor"/>
+ *
+ * Geometry constants (in Forge coordinate units):
+ *   sw  = stroke-width
+ *   hl  = totalLength / 2          (half the arrow length, placed symmetrically)
+ *   hh  = sw / 2                   (shaft half-height)
+ *   ahh = 1.5 * sw                 (arrowhead half-height)
+ *   al  = 3 * sw                   (arrowhead length along x-axis)
+ *   ni  = 0.3 * sw                 (neck inset — small notch where shaft meets arrowhead)
+ *
  * @private
  */
 function createArrowElement(element, ns) {
   var _a;
   var group = document.createElementNS(ns, 'g');
   group.setAttribute('class', 'markup-arrow');
-  // Create line
-  var line = document.createElementNS(ns, 'line');
+  group.setAttribute('cursor', 'inherit');
+  group.setAttribute('pointer-events', 'painted');
+  // Endpoint coordinates
+  var x1 = 0,
+    y1 = 0,
+    x2 = 1,
+    y2 = 0;
   if (((_a = element.shape) === null || _a === void 0 ? void 0 : _a.points) && element.shape.points.length >= 4) {
-    line.setAttribute('x1', String(element.shape.points[0]));
-    line.setAttribute('y1', String(element.shape.points[1]));
-    line.setAttribute('x2', String(element.shape.points[2]));
-    line.setAttribute('y2', String(element.shape.points[3]));
-  } else {
-    // Use size as fallback
-    line.setAttribute('x1', '0');
-    line.setAttribute('y1', '0');
-    line.setAttribute('x2', String(element.size[0]));
-    line.setAttribute('y2', String(element.size[1]));
-  }
-  line.setAttribute('stroke', element.style.sc || '#000000');
-  line.setAttribute('stroke-width', String(element.style.sw || 2));
-  line.setAttribute('marker-end', 'url(#arrowhead)');
-  group.appendChild(line);
-  // Create arrowhead marker if not exists
-  ensureArrowMarker(ns);
+    x1 = element.shape.points[0];
+    y1 = element.shape.points[1];
+    x2 = element.shape.points[2];
+    y2 = element.shape.points[3];
+  } else if (element.size) {
+    x2 = element.size[0];
+    y2 = element.size[1];
+  }
+  var sw = element.style.sw || 0.025;
+  var cx = (x1 + x2) / 2;
+  var cy = (y1 + y2) / 2;
+  var dx = x2 - x1;
+  var dy = y2 - y1;
+  var totalLength = Math.sqrt(dx * dx + dy * dy);
+  var angleDeg = Math.atan2(dy, dx) * (180 / Math.PI);
+  var hl = totalLength / 2;
+  var hh = sw / 2;
+  var ahh = 1.5 * sw;
+  var al = 3 * sw;
+  var ni = 0.3 * sw;
+  // Shaft length must be positive; guard against arrows shorter than the arrowhead
+  var shaftLen = Math.max(0, 2 * hl - al);
+  // Arrow path: horizontal, pointing right (+x), centered at origin.
+  // Apply transform="translate(cx,cy) rotate(angleDeg)" to position and orient.
+  var d = ["M ".concat(-hl, " ").concat(-hh), "l ".concat(shaftLen, " 0"), "l ".concat(-ni, " ").concat(-(ahh - hh)), "l ".concat(al + ni, " ").concat(ahh), "l ".concat(-(al + ni), " ").concat(ahh), "l ".concat(ni, " ").concat(-(ahh - hh)), "l ".concat(-shaftLen, " 0"), 'z'].join(' ');
+  var transform = "translate(".concat(cx, ", ").concat(cy, ") rotate(").concat(angleDeg, ")");
+  var strokeColor = element.style.sc || 'rgba(0,0,0,1)';
+  // Main arrow path (filled + stroked like native Forge Viewer arrow)
+  var markupPath = document.createElementNS(ns, 'path');
+  markupPath.setAttribute('id', 'markup');
+  markupPath.setAttribute('d', d);
+  markupPath.setAttribute('stroke-width', String(sw));
+  markupPath.setAttribute('stroke', strokeColor);
+  markupPath.setAttribute('fill', strokeColor);
+  markupPath.setAttribute('transform', transform);
+  group.appendChild(markupPath);
+  // Transparent hit area with larger stroke-width for easier selection
+  var hitPath = document.createElementNS(ns, 'path');
+  hitPath.setAttribute('id', 'hitarea');
+  hitPath.setAttribute('d', d);
+  hitPath.setAttribute('fill', 'transparent');
+  hitPath.setAttribute('stroke', 'transparent');
+  hitPath.setAttribute('stroke-width', String(sw * 6.86));
+  hitPath.setAttribute('transform', transform);
+  group.appendChild(hitPath);
   return group;
 }
 /**
@@ -34305,23 +34366,37 @@ function createCalloutElement(element, ns) {
   return group;
 }
 /**
- * Create stamp/image SVG element
- * Position is CENTER, so offset image
+ * Create stamp/image SVG element for collaborative rendering (User B).
+ *
+ * imageData is raw base64 (data URL) — no counter-transform needed here.
+ * Forge's markup canvas is Y-up, so a plain <image> would appear upside-down.
+ * We wrap it in a <g> and apply scale(1,-1) on the image to flip it into
+ * correct screen orientation, matching what MarkupStamp renders locally.
+ *
+ * Position is CENTER, so offset the image by -w/2, -h/2.
  * @private
  */
 function createStampElement(element, ns) {
   var _a;
+  var group = document.createElementNS(ns, 'g');
+  group.setAttribute('class', 'markup-stamp');
+  var w = element.size[0];
+  var h = element.size[1];
   var image = document.createElementNS(ns, 'image');
-  image.setAttribute('class', 'markup-stamp');
-  // Position is center, so offset by -w/2, -h/2
-  image.setAttribute('x', String(-element.size[0] / 2));
-  image.setAttribute('y', String(-element.size[1] / 2));
-  image.setAttribute('width', String(element.size[0]));
-  image.setAttribute('height', String(element.size[1]));
+  image.setAttribute('x', String(-w / 2));
+  image.setAttribute('y', String(-h / 2));
+  image.setAttribute('width', String(w));
+  image.setAttribute('height', String(h));
+  // scale(1,-1) flips the image content vertically in-place (the image is centered at
+  // the origin so scale(1,-1) keeps the bounding box in the same position while reversing
+  // the pixel rows).  This is needed because SVG <image> pixels are Y-down but Forge's
+  // markup canvas is Y-up — without the flip the image appears upside-down.
+  image.setAttribute('transform', "scale(1,-1)");
   if ((_a = element.shape) === null || _a === void 0 ? void 0 : _a.imageData) {
     image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', element.shape.imageData);
   }
-  return image;
+  group.appendChild(image);
+  return group;
 }
 // ========== Helper Functions ==========
 /**
@@ -34408,36 +34483,6 @@ function generateCloudPath(width, height, arcCount) {
   d += ' Z';
   return d;
 }
-/**
- * Ensure arrowhead marker exists in SVG defs
- * @private
- */
-var arrowMarkerCreated = false;
-function ensureArrowMarker(ns) {
-  if (arrowMarkerCreated) return;
-  var svg = document.querySelector('svg.markups-svg');
-  if (!svg) return;
-  var defs = svg.querySelector('defs');
-  if (!defs) {
-    defs = document.createElementNS(ns, 'defs');
-    svg.insertBefore(defs, svg.firstChild);
-  }
-  if (!defs.querySelector('#arrowhead')) {
-    var marker = document.createElementNS(ns, 'marker');
-    marker.setAttribute('id', 'arrowhead');
-    marker.setAttribute('markerWidth', '10');
-    marker.setAttribute('markerHeight', '7');
-    marker.setAttribute('refX', '9');
-    marker.setAttribute('refY', '3.5');
-    marker.setAttribute('orient', 'auto');
-    var polygon = document.createElementNS(ns, 'polygon');
-    polygon.setAttribute('points', '0 0, 10 3.5, 0 7');
-    polygon.setAttribute('fill', 'inherit');
-    marker.appendChild(polygon);
-    defs.appendChild(marker);
-    arrowMarkerCreated = true;
-  }
-}
 
 /**
  * SVG Parser Utilities
@@ -36835,6 +36880,12 @@ var EditModeManager = /*#__PURE__*/function () {
     this.onEditModeChange = null;
     this.onClearCurrentTool = null;
     this.onExtensionReloaded = null;
+    // Tracks explicit user intent to be in edit mode.
+    // Immune to markupsCore.editMode being temporarily null during changeEditMode() transitions.
+    this.userIntendedEditMode = false;
+    // Set to true by refreshExtensionReferences() when MarkupsCore was fully reloaded.
+    // Consumed in enterEditMode() to restore savedMarkupsSvg into the fresh edit canvas.
+    this.extensionWasReloaded = false;
     // Track if page changed since last markup mode
     // Used to force extension reload when entering markup mode after page change
     this.pageChangedSinceLastMarkup = false;
@@ -36934,7 +36985,14 @@ var EditModeManager = /*#__PURE__*/function () {
     value: function handleEditModeChanged(event) {
       var _a;
       var wasInEditMode = this.editMode;
-      // Ensure editMode is always a boolean
+      // CRITICAL FIX: When switching tools, markupsCore.changeEditMode() fires
+      // EVENT_EDITMODE_CHANGED with active:false while markupsCore.editMode is temporarily null.
+      // Using userIntendedEditMode (set explicitly by enterEditMode/leaveEditMode) instead of
+      // markupsCore.editMode avoids the race condition where the guard fails during transitions.
+      if (event.active === false && this.userIntendedEditMode) {
+        console.log('[EditModeManager] Ignoring editMode=false: user intentionally in edit mode (tool-switch transition)');
+        return;
+      }
       var isActive = event.active === true || event.active !== false && !!((_a = this.context.markupsCore) === null || _a === void 0 ? void 0 : _a.editMode);
       this.editMode = isActive;
       console.log('[EditModeManager] handleEditModeChanged:', {
@@ -36963,10 +37021,16 @@ var EditModeManager = /*#__PURE__*/function () {
     key: "enterEditMode",
     value: function enterEditMode() {
       return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee2() {
-        var _t;
+        var savedSvg, layerId, editLayerId, _yield$import$catch, patchForgeMarkupStampRestore, loaded, _t, _t2;
         return _regenerator().w(function (_context2) {
           while (1) switch (_context2.p = _context2.n) {
             case 0:
+              // Mark explicit intent BEFORE any async work so the guard in handleEditModeChanged
+              // can filter out spurious active:false events fired during enterEditMode() itself.
+              this.userIntendedEditMode = true;
+              // CRITICAL: Re-fetch MarkupsCore extension reference before entering edit mode
+              // After page change, the extension might have been reset and we need fresh reference
+              // This is async because extension may need to be reloaded via loadExtension()
               _context2.n = 1;
               return this.refreshExtensionReferences();
             case 1:
@@ -36981,15 +37045,65 @@ var EditModeManager = /*#__PURE__*/function () {
               _context2.p = 3;
               // Unload existing markups from view-only layer before entering edit mode
               this.markupOpsManager.unloadMarkupsBeforeEditMode();
-              // Enter edit mode
+              // CRITICAL: Pre-load saved markups into a named layer BEFORE calling
+              // enterEditMode().  Forge's loadMarkups() explicitly rejects calls while
+              // duringEditMode===true, so loading must happen in view mode.  By passing
+              // the same layerId to enterEditMode(layerId) the pre-loaded markups become
+              // interactive in the edit canvas.
+              //
+              // Additionally, apply the Forge MarkupStamp patch so that when Forge's
+              // createMarkupFromSVG creates a MarkupStamp from the loaded SVG it can
+              // fall back to style['text-data'] (which we populate in setMetadata()) when
+              // scriptSvgData is a DOM element that DOMParser cannot parse.
+              savedSvg = this.markupOpsManager.getSavedMarkupsSvg();
+              layerId = this.markupOpsManager.getLayerId();
+              if (!(savedSvg && savedSvg.trim().length > 0)) {
+                _context2.n = 7;
+                break;
+              }
+              _context2.p = 4;
+              _context2.n = 5;
+              return Promise.resolve().then(function () { return StampMarkup; })["catch"](function () {
+                return {
+                  patchForgeMarkupStampRestore: null
+                };
+              });
+            case 5:
+              _yield$import$catch = _context2.v;
+              patchForgeMarkupStampRestore = _yield$import$catch.patchForgeMarkupStampRestore;
+              patchForgeMarkupStampRestore === null || patchForgeMarkupStampRestore === void 0 ? void 0 : patchForgeMarkupStampRestore();
+              // Ensure view mode is active (loadMarkups requires duringViewMode===true)
+              if (!this.context.markupsCore.duringViewMode) {
+                try {
+                  this.context.markupsCore.show();
+                } catch (_e) {
+                  /* ignore — enterEditMode() will call show() internally */
+                }
+              }
+              loaded = this.context.markupsCore.loadMarkups(savedSvg, layerId);
+              if (loaded) {
+                editLayerId = layerId;
+                console.log('[EditModeManager] Pre-loaded saved markups into layer:', layerId);
+              } else {
+                console.warn('[EditModeManager] loadMarkups returned false — will enter clean edit mode');
+              }
+              _context2.n = 7;
+              break;
+            case 6:
+              _context2.p = 6;
+              _t = _context2.v;
+              console.warn('[EditModeManager] Could not pre-load markups before edit mode:', _t);
+            case 7:
+              // Enter edit mode — with layerId when we pre-loaded (restores markups),
+              // or without to start a clean empty canvas.
               console.log('[EditModeManager] Calling markupsCore.enterEditMode()...');
-              _context2.n = 4;
-              return this.context.markupsCore.enterEditMode();
-            case 4:
+              _context2.n = 8;
+              return this.context.markupsCore.enterEditMode(editLayerId);
+            case 8:
               console.log('[EditModeManager] markupsCore.enterEditMode() completed, svg:', !!this.context.markupsCore.svg);
               // Verify that svg layer was created (can fail after page change)
               if (this.context.markupsCore.svg) {
-                _context2.n = 7;
+                _context2.n = 11;
                 break;
               }
               console.warn('[EditModeManager] svg layer is null after enterEditMode, retrying with delay...');
@@ -37000,29 +37114,32 @@ var EditModeManager = /*#__PURE__*/function () {
                 console.warn('[EditModeManager] Error leaving edit mode for retry:', e);
               }
               // Wait a bit for viewer to stabilize after page change
-              _context2.n = 5;
+              _context2.n = 9;
               return new Promise(function (resolve) {
                 return setTimeout(resolve, 100);
               });
-            case 5:
-              // Re-enter edit mode
+            case 9:
+              // Re-enter edit mode (use layerId again if we pre-loaded — the layer
+              // survives leaveEditMode() since it only removes the edit canvas node)
               console.log('[EditModeManager] Retrying enterEditMode after delay...');
-              _context2.n = 6;
-              return this.context.markupsCore.enterEditMode();
-            case 6:
+              _context2.n = 10;
+              return this.context.markupsCore.enterEditMode(editLayerId);
+            case 10:
               console.log('[EditModeManager] Retry completed, svg:', !!this.context.markupsCore.svg);
               if (this.context.markupsCore.svg) {
-                _context2.n = 7;
+                _context2.n = 11;
                 break;
               }
               console.error('[EditModeManager] Failed to create svg layer after retry');
               this.editMode = false;
+              this.userIntendedEditMode = false;
               return _context2.a(2);
-            case 7:
+            case 11:
               // Set editMode flag explicitly to true
               this.editMode = true;
               console.log('[EditModeManager] editMode flag set to true explicitly');
               console.log('[EditModeManager] svg layer exists:', !!this.context.markupsCore.svg);
+              this.extensionWasReloaded = false;
               // Notify presence manager of edit mode state
               if (this.onEditModeChange) {
                 this.onEditModeChange(true);
@@ -37031,17 +37148,18 @@ var EditModeManager = /*#__PURE__*/function () {
               this.toolbarVisManager.hideDefaultToolbar();
               this.eventBus.emit('drawing:editModeEntered');
               console.log('[EditModeManager] Entered edit mode');
-              _context2.n = 9;
+              _context2.n = 13;
               break;
-            case 8:
-              _context2.p = 8;
-              _t = _context2.v;
-              console.error('[EditModeManager] Failed to enter edit mode:', _t);
+            case 12:
+              _context2.p = 12;
+              _t2 = _context2.v;
+              console.error('[EditModeManager] Failed to enter edit mode:', _t2);
               this.editMode = false;
-            case 9:
+              this.userIntendedEditMode = false;
+            case 13:
               return _context2.a(2);
           }
-        }, _callee2, this, [[3, 8]]);
+        }, _callee2, this, [[4, 6], [3, 12]]);
       }));
     }
     /**
@@ -37056,7 +37174,7 @@ var EditModeManager = /*#__PURE__*/function () {
     key: "refreshExtensionReferences",
     value: function refreshExtensionReferences() {
       return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee3() {
-        var viewer, extensionWasReloaded, markupsCore, markupsGui, _t2, _t3, _t4, _t5, _t6;
+        var viewer, extensionWasReloaded, markupsCore, markupsGui, _t3, _t4, _t5, _t6, _t7;
         return _regenerator().w(function (_context3) {
           while (1) switch (_context3.p = _context3.n) {
             case 0:
@@ -37087,8 +37205,8 @@ var EditModeManager = /*#__PURE__*/function () {
               break;
             case 4:
               _context3.p = 4;
-              _t2 = _context3.v;
-              console.warn('[EditModeManager] Failed to unload stale MarkupsCore:', _t2);
+              _t3 = _context3.v;
+              console.warn('[EditModeManager] Failed to unload stale MarkupsCore:', _t3);
             case 5:
               if (markupsCore) {
                 _context3.n = 9;
@@ -37107,8 +37225,8 @@ var EditModeManager = /*#__PURE__*/function () {
               break;
             case 8:
               _context3.p = 8;
-              _t3 = _context3.v;
-              console.error('[EditModeManager] Failed to reload MarkupsCore extension:', _t3);
+              _t4 = _context3.v;
+              console.error('[EditModeManager] Failed to reload MarkupsCore extension:', _t4);
             case 9:
               if (markupsCore) {
                 this.context.markupsCore = markupsCore;
@@ -37131,8 +37249,8 @@ var EditModeManager = /*#__PURE__*/function () {
               break;
             case 12:
               _context3.p = 12;
-              _t4 = _context3.v;
-              console.warn('[EditModeManager] Failed to unload stale MarkupsGui:', _t4);
+              _t5 = _context3.v;
+              console.warn('[EditModeManager] Failed to unload stale MarkupsGui:', _t5);
             case 13:
               if (markupsGui) {
                 _context3.n = 17;
@@ -37150,8 +37268,8 @@ var EditModeManager = /*#__PURE__*/function () {
               break;
             case 16:
               _context3.p = 16;
-              _t5 = _context3.v;
-              console.error('[EditModeManager] Failed to reload MarkupsGui extension:', _t5);
+              _t6 = _context3.v;
+              console.error('[EditModeManager] Failed to reload MarkupsGui extension:', _t6);
             case 17:
               if (markupsGui) {
                 this.context.markupsGui = markupsGui;
@@ -37175,16 +37293,20 @@ var EditModeManager = /*#__PURE__*/function () {
             case 18:
               // Notify listeners that extension was reloaded
               // This allows ToolManager to reinitialize its ToolFactory with the new MarkupsCore
-              if (extensionWasReloaded && this.onExtensionReloaded) {
-                console.log('[EditModeManager] Notifying listeners of extension reload');
-                this.onExtensionReloaded();
+              if (extensionWasReloaded) {
+                // Persist flag so enterEditMode() can reload savedMarkupsSvg into the fresh canvas
+                this.extensionWasReloaded = true;
+                if (this.onExtensionReloaded) {
+                  console.log('[EditModeManager] Notifying listeners of extension reload');
+                  this.onExtensionReloaded();
+                }
               }
               _context3.n = 20;
               break;
             case 19:
               _context3.p = 19;
-              _t6 = _context3.v;
-              console.error('[EditModeManager] Failed to refresh extension references:', _t6);
+              _t7 = _context3.v;
+              console.error('[EditModeManager] Failed to refresh extension references:', _t7);
             case 20:
               return _context3.a(2);
           }
@@ -37198,19 +37320,24 @@ var EditModeManager = /*#__PURE__*/function () {
     key: "leaveEditMode",
     value: function leaveEditMode() {
       var _this3 = this;
+      this.userIntendedEditMode = false;
       if (!this.context.markupsCore) {
         console.warn('[EditModeManager] Cannot leave edit mode: MarkupsCore not available');
         return;
       }
       try {
-        // Save markups before leaving edit mode
-        this.markupOpsManager.saveAndReloadMarkupsOnLeave(function () {
+        // Step 1: Save current edit-mode markups while still in edit mode
+        this.markupOpsManager.saveMarkupsOnLeave(function () {
           var _a;
           return ((_a = _this3.context.markupsCore) === null || _a === void 0 ? void 0 : _a.generateData()) || '';
         });
-        // Leave edit mode (this clears all markups)
+        // Step 2: Leave edit mode (Forge clears its edit canvas)
         this.context.markupsCore.leaveEditMode();
         this.editMode = false;
+        // Step 3: Load saved markups into view-only layer AFTER leaving edit mode.
+        // CRITICAL: doing this BEFORE leaveEditMode() caused Forge to clear the
+        // loaded layer during the leaveEditMode() call, making markups disappear.
+        this.markupOpsManager.reloadMarkupsToViewLayer();
         // Notify presence manager of edit mode state
         if (this.onEditModeChange) {
           this.onEditModeChange(false);
@@ -37443,6 +37570,22 @@ var MarkupOperationsManager = /*#__PURE__*/function () {
         console.error('[MarkupOperationsManager] Failed to redo:', error);
       }
     }
+    /**
+     * Load savedMarkupsSvg into the view-only layer so markups are visible
+     * when NOT in edit mode.  Must be called AFTER markupsCore.leaveEditMode().
+     */
+  }, {
+    key: "reloadMarkupsToViewLayer",
+    value: function reloadMarkupsToViewLayer() {
+      if (!this.context.markupsCore) return;
+      if (!this.savedMarkupsSvg || this.savedMarkupsSvg.trim().length === 0) return;
+      try {
+        this.context.markupsCore.loadMarkups(this.savedMarkupsSvg, this.layerId);
+        console.log('[MarkupOperationsManager] Markups reloaded to view layer after leaveEditMode');
+      } catch (error) {
+        console.warn('[MarkupOperationsManager] Failed to reload markups to view layer:', error);
+      }
+    }
     /**
      * Unload markups from layer before entering edit mode
      */
@@ -37460,29 +37603,24 @@ var MarkupOperationsManager = /*#__PURE__*/function () {
       }
     }
     /**
-     * Save and reload markups when leaving edit mode
+     * Save markup SVG from edit mode into savedMarkupsSvg.
+     * Does NOT call loadMarkups — that must happen AFTER markupsCore.leaveEditMode().
+     * See reloadMarkupsToViewLayer().
      *
-     * @param generateData - Function to generate SVG data from edit mode
+     * @param generateData - Function that returns SVG from current edit mode state
      */
   }, {
-    key: "saveAndReloadMarkupsOnLeave",
-    value: function saveAndReloadMarkupsOnLeave(generateData) {
+    key: "saveMarkupsOnLeave",
+    value: function saveMarkupsOnLeave(generateData) {
       if (!this.context.markupsCore) return;
-      // Check if markupsCore is in a valid state (svg layer exists)
-      // This can be null if page changed or extension was reset
       if (!this.context.markupsCore.svg) {
         console.warn('[MarkupOperationsManager] MarkupsCore.svg is null, skipping save');
         return;
       }
       try {
-        // Save markups before leaving edit mode
         var svgString = generateData();
         this.savedMarkupsSvg = svgString || '';
-        // Load the saved markups back to display them in view-only mode
-        if (this.savedMarkupsSvg && this.savedMarkupsSvg.trim().length > 0) {
-          this.context.markupsCore.loadMarkups(this.savedMarkupsSvg, this.layerId);
-          console.log('[MarkupOperationsManager] Markups saved and reloaded to preserve them');
-        }
+        console.log('[MarkupOperationsManager] Markups saved on leave:', this.savedMarkupsSvg.length, 'chars');
       } catch (error) {
         console.warn('[MarkupOperationsManager] Error saving markups on leave:', error);
       }
@@ -45559,6 +45697,8 @@ function createMarkupStampClass() {
       _classCallCheck(this, MarkupStamp);
       _this = _callSuper(this, MarkupStamp, [id, editor, ['stroke-width', 'stroke-color', 'stroke-opacity', 'fill-color', 'fill-opacity']]);
       _this.type = 'stamp';
+      /** Raw base64 image data (data URL) for collaborative serialization */
+      _this.imageData = '';
       _this.type = 'stamp';
       _this.customSVG = customSVG;
       _this.addMarkupMetadata = avemcu.addMarkupMetadata.bind(_this);
@@ -45569,8 +45709,12 @@ function createMarkupStampClass() {
         _this$getDimensions2 = _slicedToArray(_this$getDimensions, 2),
         width = _this$getDimensions2[0],
         height = _this$getDimensions2[1];
-      _this.originalWidth = width;
-      _this.originalHeight = height;
+      // Extract raw base64 image data for collaborative serialization.
+      // MarkupsCore serializers read markup.imageData to pass via compact JSON
+      // to remote users (User B). Storing raw base64 (not the SVG wrapper)
+      // means createStampElement can render it directly without any transform issues.
+      var imgEl = customSVG.querySelector('image');
+      _this.imageData = (imgEl === null || imgEl === void 0 ? void 0 : imgEl.getAttribute('href')) || (imgEl === null || imgEl === void 0 ? void 0 : imgEl.getAttributeNS('http://www.w3.org/1999/xlink', 'href')) || '';
       // Copy SVG content
       _this.group.innerHTML = customSVG.innerHTML;
       // Create hit area for selection
@@ -45661,6 +45805,16 @@ function createMarkupStampClass() {
         metadata.position = [this.position.x, this.position.y].join(' ');
         metadata.size = [this.size.x, this.size.y].join(' ');
         metadata.rotation = String(this.rotation);
+        // Store image SVG as text-data so Forge's createMarkupFromSVG can restore
+        // the stamp image when loadMarkups() is called (e.g. on re-entry to edit mode).
+        // Forge's MarkupStamp.loadSvgData() reads style['text-data'] as fallback.
+        if (this.imageData) {
+          var _this$getDimensions3 = this.getDimensions(this.customSVG),
+            _this$getDimensions4 = _slicedToArray(_this$getDimensions3, 2),
+            w = _this$getDimensions4[0],
+            h = _this$getDimensions4[1];
+          metadata['text-data'] = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 ".concat(w, " ").concat(h, "\" width=\"").concat(w, "\" height=\"").concat(h, "\"><image width=\"").concat(w, "\" height=\"").concat(h, "\" href=\"").concat(this.imageData, "\"/></svg>");
+        }
         return this.addMarkupMetadata(this.shape, metadata);
       }
     }]);
@@ -45968,11 +46122,66 @@ function parseSVGString(svgString) {
 }
 /**
  * Create SVG element with embedded image (base64)
- * This format is compatible with MarkupsCore
+ * This format is compatible with MarkupsCore.
+ *
+ * NOTE: Do NOT apply a Y-flip transform to the <image> here.
+ * MarkupStamp.group already applies scale(1/W, -1/H) which handles the Y-axis
+ * flip for the Forge Y-up coordinate system.  Adding a pre-flip would double-flip
+ * the image causing it to appear upside-down for User A.
+ * The collaborative overlay (User B) applies its own scale(1,-1) separately
+ * via generateVisualElement() in MarkupConverterService.
  */
 function createImageSVG(base64Data, width, height) {
   return "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\" viewBox=\"0 0 ").concat(width, " ").concat(height, "\">\n  <image width=\"").concat(width, "\" height=\"").concat(height, "\" href=\"").concat(base64Data, "\"/>\n</svg>");
 }
+/**
+ * Patch Forge's built-in MarkupStamp.prototype.loadSvgData so that when
+ * createMarkupFromSVG passes the full child DOM element as svgData (which
+ * cannot be parsed by DOMParser), the method falls back to style['text-data']
+ * instead.  Our setMetadata() stores the image SVG there so Forge can
+ * properly restore stamp images when loadMarkups() → enterEditMode() is used.
+ *
+ * Safe to call multiple times — guarded by a _patched flag.
+ */
+function patchForgeMarkupStampRestore() {
+  var _a, _b, _c;
+  var avemc = getMarkupsCore();
+  if (!avemc) return;
+  // The class may be exposed directly on the Core namespace
+  var ForgeMarkupStamp = avemc.MarkupStamp || ((_a = avemc.Classes) === null || _a === void 0 ? void 0 : _a.MarkupStamp) || ((_b = avemc.Markups) === null || _b === void 0 ? void 0 : _b.MarkupStamp);
+  if (!ForgeMarkupStamp || typeof ((_c = ForgeMarkupStamp.prototype) === null || _c === void 0 ? void 0 : _c.loadSvgData) !== 'function') return;
+  if (ForgeMarkupStamp.prototype.loadSvgData._patched) return;
+  var originalLoadSvgData = ForgeMarkupStamp.prototype.loadSvgData;
+  ForgeMarkupStamp.prototype.loadSvgData = function patchedLoadSvgData() {
+    var _a;
+    // When scriptSvgData is a DOM element (not a string), DOMParser cannot parse
+    // it — fall back to style['text-data'] which contains the real image SVG.
+    if (this.scriptSvgData && typeof this.scriptSvgData !== 'string') {
+      var textData = (_a = this.style) === null || _a === void 0 ? void 0 : _a['text-data'];
+      if (textData && typeof textData === 'string') {
+        var saved = this.scriptSvgData;
+        this.scriptSvgData = null; // force the fallback branch
+        originalLoadSvgData.call(this);
+        this.scriptSvgData = saved; // restore so other code (e.g. undo) still works
+        return;
+      }
+    }
+    originalLoadSvgData.call(this);
+  };
+  ForgeMarkupStamp.prototype.loadSvgData._patched = true;
+}
+
+var StampMarkup = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createImageSVG: createImageSVG,
+  createMarkupStampClass: createMarkupStampClass,
+  getEditModeStampClass: getEditModeStampClass,
+  getStampCreateActionClass: getStampCreateActionClass,
+  getStampDeleteActionClass: getStampDeleteActionClass,
+  getStampUpdateActionClass: getStampUpdateActionClass,
+  parseSVGString: parseSVGString,
+  patchForgeMarkupStampRestore: patchForgeMarkupStampRestore
+});
 
 /**
  * Image tool for inserting images as markups
@@ -47339,7 +47548,6 @@ var DrawingManager = /*#__PURE__*/function () {
     var _this = this;
     var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
     _classCallCheck(this, DrawingManager);
-    this.eventBus = eventBus;
     // Initialize context
     this.context = {
       viewer: viewer,
@@ -47418,7 +47626,10 @@ var DrawingManager = /*#__PURE__*/function () {
   }, {
     key: "setupEventListeners",
     value: function setupEventListeners() {
-      this.eventBus.on('drawing:toggle', this.editModeManager.handleToggle.bind(this.editModeManager));
+      // NOTE: 'drawing:toggle' is handled exclusively by ViewerForgePDF (React layer)
+      // which orchestrates: enterEditMode() → setShowMarkupToolbar(true).
+      // Subscribing here caused double-call to enterEditMode(), resetting Forge Viewer
+      // to its default Arrow tool on every markup mode entry.
       if (this.context.markupsCore) {
         this.context.markupsCore.addEventListener('EVENT_EDITMODE_CHANGED', this.editModeManager.handleEditModeChanged.bind(this.editModeManager));
         this.context.markupsCore.addEventListener('EVENT_MARKUP_SELECTED', this.propertyManager.handleMarkupSelected.bind(this.propertyManager));
@@ -48041,7 +48252,6 @@ var DrawingManager = /*#__PURE__*/function () {
         this.collaborativeManager.destroy();
         this.presenceManager.destroy();
         // Remove event listeners
-        this.eventBus.off('drawing:toggle', this.editModeManager.handleToggle.bind(this.editModeManager));
         if (this.context.markupsCore) {
           this.context.markupsCore.removeEventListener('EVENT_EDITMODE_CHANGED', this.editModeManager.handleEditModeChanged.bind(this.editModeManager));
           this.context.markupsCore.removeEventListener('EVENT_MARKUP_SELECTED', this.propertyManager.handleMarkupSelected.bind(this.propertyManager));
@@ -48087,7 +48297,7 @@ function styleInject(css, ref) {
 var css_248z$3 = "/**\n * MarkupToolbar Styles\n *\n * @file markup-toolbar.css\n * @description Excalidraw-inspired toolbar styles with clean, minimal design\n */\n\n/* ========================================\n   Hide Default Forge Viewer Markup Toolbar\n   ======================================== */\n\n/* Hide all vertical toolbars when custom markup toolbar is active */\nbody:has(.markup-toolbar) .lmv-markup-gui-toolbar,\nbody:has(.markup-toolbar) .adsk-toolbar-vertical,\nbody:has(.markup-toolbar) .markup-mode-toolbar,\nbody:has(.markup-toolbar) .adsk-control-group[id*='markup'],\nbody:has(.markup-toolbar) .adsk-toolbar[id*='markup'],\n.adsk-viewing-viewer:has(.markup-toolbar) .adsk-toolbar-vertical,\n.lmv-markup-gui-toolbar {\n  display: none !important;\n  visibility: hidden !important;\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\n/* ========================================\n   Toolbar Container\n   ======================================== */\n\n.markup-toolbar {\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%);\n  background: rgba(34, 34, 34, 0.94);\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  padding: 8px 12px;\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  z-index: 10000;\n  transition: all 200ms ease;\n  font-family:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n  user-select: none;\n}\n\n.markup-toolbar-top {\n  top: 60px;\n}\n\n.markup-toolbar-bottom {\n  bottom: 80px;\n}\n\n/* ========================================\n   Toolbar Sections\n   ======================================== */\n\n.toolbar-section {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  padding: 0 8px;\n  border-right: 1px solid var(--toolbar-border, #e0e0e0);\n}\n\n.toolbar-section:last-child {\n  border-right: none;\n}\n\n.toolbar-section:first-child {\n  padding-left: 0;\n}\n\n.toolbar-section.close {\n  padding-right: 0;\n}\n\n/* ========================================\n   Toolbar Divider (Excalidraw style)\n   ======================================== */\n\n.toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background: rgba(255, 255, 255, 0.24);\n  margin: 0 4px;\n}\n\n/* ========================================\n   Tool Buttons\n   ======================================== */\n\n.tool-button {\n  width: 36px;\n  height: 36px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background 150ms ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  color: #ced4da;\n  padding: 0;\n  outline: none;\n}\n\n.tool-button svg {\n  color: #ced4da;\n  fill: currentColor;\n  stroke: currentColor;\n}\n\n.tool-button:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.tool-button:active {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n.tool-button.active {\n  background: #5b8def;\n  color: white;\n}\n\n.tool-button.active svg {\n  color: white;\n  fill: white;\n  stroke: white;\n}\n\n.tool-button .tool-icon {\n  font-size: 20px;\n  line-height: 1;\n}\n\n/* Antd Icon sizing */\n.tool-button .anticon {\n  font-size: 16px;\n}\n\n/* ========================================\n   Style Controls\n   ======================================== */\n\n.toolbar-section.styles {\n  gap: 6px;\n}\n\n.style-button {\n  height: 32px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n}\n\n/* Color picker custom styling */\n.ant-color-picker-trigger {\n  height: 32px;\n  border-radius: 4px;\n  border: 1px solid var(--toolbar-border, #e0e0e0);\n  cursor: pointer;\n  transition: all 150ms ease;\n}\n\n.ant-color-picker-trigger:hover {\n  border-color: var(--toolbar-accent, #1890ff);\n}\n\n/* ========================================\n   Action Buttons\n   ======================================== */\n\n.toolbar-section.actions {\n  gap: 4px;\n}\n\n.action-button {\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 150ms ease;\n}\n\n.action-button:hover {\n  background: var(--tool-hover-bg, #f5f5f5);\n}\n\n.action-button.ant-btn-dangerous {\n  color: #ff4d4f;\n}\n\n.action-button.ant-btn-dangerous:hover {\n  color: #ff7875;\n  background: #fff1f0;\n}\n\n/* ========================================\n   Close Button\n   ======================================== */\n\n.close-button {\n  height: 32px;\n  width: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n  transition: all 150ms ease;\n  color: var(--tool-text-color, #333333);\n}\n\n.close-button:hover {\n  background: var(--tool-hover-bg, #f5f5f5);\n  color: #ff4d4f;\n}\n\n/* ========================================\n   Popover Customization\n   ======================================== */\n\n.ant-popover {\n  z-index: 1001;\n}\n\n.ant-popover-inner {\n  border-radius: 6px;\n  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);\n}\n\n.ant-popover-title {\n  font-weight: 600;\n  font-size: 13px;\n  border-bottom: 1px solid var(--toolbar-border, #e0e0e0);\n}\n\n/* ========================================\n   Slider Customization\n   ======================================== */\n\n.ant-slider {\n  margin: 8px 0;\n}\n\n.ant-slider-mark-text {\n  font-size: 11px;\n}\n\n/* ========================================\n   Dark Theme\n   ======================================== */\n\n.theme-dark {\n  --toolbar-bg: #2c2c2c;\n  --toolbar-border: #404040;\n  --toolbar-accent: #4096ff;\n  --tool-text-color: #e0e0e0;\n  --tool-hover-bg: #3c3c3c;\n  --tool-active-bg-temp: #4c4c4c;\n  --tool-active-bg: #1890ff;\n}\n\n.theme-dark .tool-button {\n  color: var(--tool-text-color);\n}\n\n.theme-dark .tool-button.active {\n  color: white;\n}\n\n.theme-dark .close-button {\n  color: var(--tool-text-color);\n}\n\n.theme-dark .close-button:hover {\n  background: var(--tool-hover-bg);\n  color: #ff7875;\n}\n\n.theme-dark .ant-color-picker-trigger {\n  border-color: var(--toolbar-border);\n  background: var(--toolbar-bg);\n}\n\n.theme-dark .ant-color-picker-trigger:hover {\n  border-color: var(--toolbar-accent);\n}\n\n.theme-dark .action-button {\n  color: var(--tool-text-color);\n}\n\n.theme-dark .action-button:hover {\n  background: var(--tool-hover-bg);\n}\n\n.theme-dark .action-button.ant-btn-dangerous {\n  color: #ff7875;\n}\n\n.theme-dark .action-button.ant-btn-dangerous:hover {\n  background: #3c2424;\n}\n\n/* ========================================\n   Responsive Design\n   ======================================== */\n\n@media (max-width: 768px) {\n  .markup-toolbar {\n    flex-wrap: wrap;\n    max-width: 90vw;\n    padding: 6px 8px;\n    gap: 8px;\n  }\n\n  .toolbar-section {\n    padding: 0 4px;\n  }\n\n  .tool-button {\n    width: 32px;\n    height: 32px;\n    font-size: 16px;\n  }\n\n  .style-button,\n  .action-button,\n  .close-button {\n    height: 28px;\n    width: 28px;\n  }\n}\n\n@media (max-width: 480px) {\n  .markup-toolbar {\n    bottom: 8px;\n    top: auto !important;\n    max-width: 95vw;\n  }\n\n  .toolbar-section {\n    gap: 2px;\n    padding: 0 2px;\n  }\n\n  .tool-button {\n    width: 28px;\n    height: 28px;\n    font-size: 14px;\n  }\n\n  .tool-button .anticon {\n    font-size: 14px;\n  }\n\n  .style-button,\n  .action-button,\n  .close-button {\n    height: 24px;\n    width: 24px;\n  }\n\n  /* Hide text labels on mobile */\n  .style-button span:not(.anticon) {\n    display: none;\n  }\n}\n\n/* ========================================\n   Animations\n   ======================================== */\n\n@keyframes toolbar-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n\n.markup-toolbar {\n  animation: toolbar-fade-in 200ms ease-out;\n}\n\n/* ========================================\n   Print Mode (Hide toolbar when printing)\n   ======================================== */\n\n@media print {\n  .markup-toolbar {\n    display: none !important;\n  }\n}\n\n/* ========================================\n   Accessibility\n   ======================================== */\n\n.tool-button:focus-visible,\n.action-button:focus-visible,\n.close-button:focus-visible {\n  outline: 2px solid var(--toolbar-accent, #1890ff);\n  outline-offset: 2px;\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .markup-toolbar {\n    border-width: 2px;\n  }\n\n  .tool-button,\n  .action-button,\n  .close-button {\n    border: 1px solid transparent;\n  }\n\n  .tool-button:focus-visible,\n  .action-button:focus-visible,\n  .close-button:focus-visible {\n    border-color: currentColor;\n  }\n}\n\n/* Reduce motion for accessibility */\n@media (prefers-reduced-motion: reduce) {\n  .markup-toolbar,\n  .tool-button,\n  .action-button,\n  .close-button,\n  .ant-color-picker-trigger {\n    transition: none;\n  }\n\n  .markup-toolbar {\n    animation: none;\n  }\n}\n";
 styleInject(css_248z$3);
 
-var css_248z$2 = "/**\n * Property Panel Styles - Excalidraw 100% Match\n *\n * @file property-panel.css\n * @description Exact match of Excalidraw's property panel (Island + App-menu__left)\n */\n\n/* ========================================\n   CSS Variables (Excalidraw Exact)\n   ======================================== */\n\n.property-panel {\n  /* Sizing */\n  --default-button-size: 2rem;\n  --default-icon-size: 1rem;\n  --border-radius-lg: 0.5rem;\n  --border-radius-md: 0.375rem;\n  --space-factor: 0.25rem;\n  --padding: 2;\n\n  /* Colors - Dark Theme */\n  --island-bg-color: rgba(34, 34, 34, 0.94);\n  --button-bg: rgba(255, 255, 255, 0.1);\n  --button-hover-bg: rgba(255, 255, 255, 0.15);\n  --button-active-bg: rgba(255, 255, 255, 0.2);\n  --button-active-border: #6965db;\n  --button-border: rgba(255, 255, 255, 0.1);\n  --button-gray-1: rgba(255, 255, 255, 0.08);\n  --button-gray-2: rgba(255, 255, 255, 0.12);\n  --button-gray-3: rgba(255, 255, 255, 0.16);\n  --default-border-color: rgba(255, 255, 255, 0.15);\n  --text-primary-color: #e0e0e0;\n  --icon-fill-color: #e0e0e0;\n  --color-primary: #6965db;\n  --color-primary-darkest: #8b87ff;\n  --color-surface-primary-container: rgba(101, 97, 219, 0.3);\n  --color-on-primary-container: #ffffff;\n\n  /* Slider */\n  --slider-thumb-size: 16px;\n  --color-slider-track: rgba(255, 255, 255, 0.2);\n  --color-slider-thumb: #e0e0e0;\n\n  /* Shadow */\n  --shadow-island:\n    0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n\n  /* UI Font */\n  --ui-font:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n/* ========================================\n   Island Container (Excalidraw Structure)\n   ======================================== */\n\n.property-panel.Island {\n  box-sizing: border-box;\n  background-color: var(--island-bg-color);\n  box-shadow: var(--shadow-island);\n  border-radius: var(--border-radius-lg);\n  padding: calc(var(--padding) * var(--space-factor)); /* 0.5rem */\n  position: fixed;\n  top: 80px;\n  left: 16px;\n  z-index: 9998;\n  animation: fadeInSlide 200ms ease;\n  overflow: visible; /* Allow popups to overflow */\n  max-height: calc(100vh - 100px);\n  font-family: var(--ui-font);\n}\n\n/* ========================================\n   App Menu Left (Excalidraw Structure)\n   ======================================== */\n\n.property-panel.App-menu__left {\n  overflow-y: auto; /* Scrollable content */\n  overflow-x: visible; /* Allow horizontal overflow for popups */\n  padding: 0.5rem; /* Compact padding */\n  width: 14rem; /* 224px - wider to fit 5 colors + gaps + active color */\n  max-height: calc(100vh - 100px);\n  box-sizing: border-box;\n\n  /* Dark theme button overrides */\n  --button-border: rgba(255, 255, 255, 0.1);\n  --button-bg: rgba(255, 255, 255, 0.1);\n}\n\n.App-menu__left .buttonList {\n  padding: 0.25rem 0;\n}\n\n/* ========================================\n   Selected Shape Actions (Excalidraw Structure)\n   ======================================== */\n\n.selected-shape-actions {\n  display: flex;\n  flex-direction: column;\n  row-gap: 0.5rem; /* 8px - compact spacing */\n}\n\n@keyframes fadeInSlide {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.property-panel-right {\n  left: auto;\n  right: 16px;\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n.property-panel.App-menu__left::-webkit-scrollbar {\n  width: 4px;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-thumb {\n  background: var(--default-border-color);\n  border-radius: 2px;\n}\n\n/* ========================================\n   Typography & Fieldset (Excalidraw Exact)\n   ======================================== */\n\n.selected-shape-actions fieldset {\n  margin: 0; /* NO margin-bottom! Parent row-gap handles spacing */\n  padding: 0;\n  border: none;\n}\n\n.selected-shape-actions h3,\n.selected-shape-actions legend,\n.selected-shape-actions .control-label {\n  margin: 0;\n  margin-bottom: 0.25rem; /* 4px, NOT 8px! */\n  font-size: 0.75rem; /* 12px */\n  color: var(--text-primary-color);\n  font-weight: 400; /* NOT 500! */\n  display: block;\n  line-height: 1;\n}\n\n.selected-shape-actions legend {\n  padding: 0;\n}\n\n/* ========================================\n   Button List (Excalidraw outlineButtonIconStyles)\n   ======================================== */\n\n.selected-shape-actions .buttonList {\n  flex-wrap: wrap;\n  display: flex;\n  column-gap: 0.5rem; /* 8px */\n  row-gap: 0.5rem; /* 8px */\n}\n\n.buttonList label,\n.buttonList button,\n.zIndexButton {\n  /* outlineButtonStyles base + icon override */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0; /* NOT 0.625rem! outlineButtonIconStyles override */\n  width: var(--default-button-size); /* 2rem */\n  height: var(--default-button-size);\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border); /* transparent */\n  border-radius: var(--border-radius-lg); /* 0.5rem = 8px */\n  cursor: pointer;\n  background-color: var(--button-bg); /* #f6f6f9 */\n  color: var(--icon-fill-color);\n  font-family: var(--ui-font);\n  transition: all 150ms ease;\n  margin: 0;\n  position: relative;\n}\n\n.buttonList label:hover,\n.buttonList button:not(.ToolIcon):hover,\n.zIndexButton:hover {\n  background-color: var(--button-hover-bg); /* #f1f0ff */\n  border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.buttonList label:active,\n.buttonList button:not(.ToolIcon):active,\n.zIndexButton:active {\n  background-color: var(--button-active-bg); /* #f1f0ff */\n  border-color: var(--button-active-border); /* #4440bf */\n}\n\n.buttonList label.active,\n.buttonList button:not(.ToolIcon).active {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.buttonList label.active svg,\n.buttonList button:not(.ToolIcon).active svg {\n  color: var(--color-on-primary-container);\n}\n\n/* ToolIcon buttons in buttonList - hover state targets inner icon */\n.buttonList button.ToolIcon:hover .ToolIcon__icon {\n  background-color: var(--button-hover-bg);\n  border-color: var(--default-border-color);\n}\n\n/* ToolIcon buttons in buttonList - active/pressed state */\n.buttonList button.ToolIcon:active .ToolIcon__icon {\n  background-color: var(--button-active-bg);\n  border-color: var(--button-active-border);\n}\n\n/* ToolIcon buttons in buttonList - selected state */\n.buttonList button.ToolIcon.active .ToolIcon__icon {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.buttonList button.ToolIcon.active .ToolIcon__icon svg {\n  color: var(--color-on-primary-container);\n}\n\n/* Danger variant in buttonList */\n.buttonList button.ToolIcon.danger .ToolIcon__icon {\n  color: #ff6b6b;\n}\n\n.buttonList button.ToolIcon.danger:hover .ToolIcon__icon {\n  background-color: rgba(255, 107, 107, 0.15);\n  border-color: #ff6b6b;\n}\n\n/* Hide radio inputs */\n.buttonList input[type='radio'],\n.buttonList input[type='checkbox'] {\n  opacity: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n/* Focus state */\n.buttonList label:focus-within {\n  outline: transparent;\n  box-shadow: 0 0 0 2px var(--color-primary); /* Excalidraw focus */\n}\n\n/* SVG icons inside buttons */\n.buttonList svg {\n  position: relative;\n  width: var(--default-icon-size); /* 1rem */\n  height: var(--default-icon-size);\n  stroke: currentColor;\n  fill: none;\n}\n\n/* ========================================\n   Color Picker (Excalidraw Exact)\n   ======================================== */\n\n.color-picker-container {\n  display: flex;\n  gap: 0.5rem; /* 8px gap between sections */\n  padding: 0.25rem 0px;\n  align-items: center;\n}\n\n.color-picker__top-picks {\n  display: flex;\n  gap: 0.5rem; /* 8px gap between color buttons */\n  align-items: center;\n  flex: 1; /* Take remaining space */\n}\n\n.color-picker__button {\n  --radius: 4px;\n  --size: 1.375rem; /* 22px for top picks, NOT 2rem! */\n\n  padding: 0;\n  margin: 0;\n  width: var(--size);\n  height: var(--size);\n  border: 0; /* NO border! */\n  border-radius: var(--radius);\n  background-color: var(--swatch-color);\n  cursor: pointer;\n  position: relative;\n  transition: transform 150ms ease;\n  filter: var(--theme-filter, none);\n}\n\n.color-picker__button:hover:not(.active):not(.active-color) {\n  transform: scale(1.075); /* Exact Excalidraw */\n}\n\n.color-picker__button.active .color-picker__button-outline {\n  position: absolute;\n  --offset: -1px;\n  top: var(--offset);\n  left: var(--offset);\n  right: var(--offset);\n  bottom: var(--offset);\n  box-shadow: 0 0 0 1px var(--color-primary-darkest); /* #4a47b1, NOT border! */\n  z-index: 1;\n  border-radius: var(--radius);\n  filter: var(--theme-filter, none);\n}\n\n.color-picker__button-outline {\n  /* Empty outline by default */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Hotkey label on color buttons (Excalidraw exact) */\n.color-picker__button__hotkey-label {\n  position: absolute;\n  right: 5px;\n  bottom: 3px;\n  filter: none;\n  font-size: 11px;\n  font-weight: 500;\n  pointer-events: none; /* Don't interfere with button clicks */\n  user-select: none;\n  line-height: 1;\n}\n\n/* Color divider */\n.color-divider {\n  width: 1px;\n  height: 1rem;\n  background-color: var(--default-border-color); /* #f1f0ff */\n  margin: 0; /* Grid handles spacing */\n}\n\n/* Active color button (larger) */\n.color-picker__button.active-color {\n  width: 1.625rem; /* 26px */\n  height: 1.625rem;\n  border-radius: calc(var(--radius) + 1px); /* 5px */\n  position: relative; /* For popup positioning */\n}\n\n/* Color Picker Popup Container (Excalidraw style) */\n.color-picker-popup-wrapper {\n  position: relative;\n}\n\n.color-picker-popup {\n  /* Position set via inline style (Portal with dynamic fixed position) */\n  z-index: 10000; /* High z-index to appear above everything */\n  background: var(--island-bg-color);\n  box-shadow: var(--shadow-island);\n  border-radius: var(--border-radius-lg);\n  padding: 0.5rem;\n  pointer-events: all; /* Ensure popup is clickable */\n}\n\n/* Island Wrapper (Color Picker Popup - Light theme for readability) */\n.Island {\n  /* Define CSS variables for popup (since it's portaled to body) */\n  --padding: 0;\n  --space-factor: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --island-bg-color: rgba(34, 34, 34, 0.96);\n  --shadow-island:\n    0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n  --text-primary-color: #e0e0e0;\n  --default-border-color: rgba(255, 255, 255, 0.15);\n  --color-primary: #6965db;\n  --color-primary-darkest: #8b87ff;\n  --ui-font:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n\n  box-sizing: border-box;\n  background-color: var(--island-bg-color);\n  box-shadow: var(--shadow-island);\n  border-radius: var(--border-radius-lg);\n  padding: calc(var(--padding) * var(--space-factor));\n  position: relative;\n  transition: box-shadow 0.5s ease-in-out;\n  font-family: var(--ui-font);\n}\n\n/* Arrow SVG container - Excalidraw exact positioning */\n.color-picker-popup-arrow {\n  position: absolute;\n  left: 0px;\n  transform-origin: 0px 0px;\n  transform: translateY(50%) rotate(90deg) translateX(-50%);\n  /* top is set dynamically via inline style */\n  pointer-events: none;\n}\n\n.color-picker-popup-arrow svg {\n  display: block;\n  fill: rgba(34, 34, 34, 0.96);\n  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 3px 2px);\n}\n\n/* Legacy triangle - kept for backwards compatibility */\n.color-picker-popup-triangle {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 9px 10px 9px 0;\n  border-color: transparent var(--island-bg-color) transparent transparent;\n  position: absolute;\n  left: -10px;\n  top: 25px;\n  filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.1));\n}\n\n.color-picker__button.active-color .color-picker__button-outline {\n  position: absolute;\n  --offset: -1px;\n  top: var(--offset);\n  left: var(--offset);\n  right: var(--offset);\n  bottom: var(--offset);\n  box-shadow: 0 0 0 1px var(--color-primary-darkest);\n  border-radius: calc(var(--radius) + 1px);\n  filter: var(--theme-filter, none);\n}\n\n/* ========================================\n   Color Picker Popup Content (Excalidraw Exact)\n   ======================================== */\n\n.color-picker-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem; /* 12px between sections */\n  outline: none;\n}\n\n.color-picker-content.properties-content {\n  padding: 0.5rem; /* 8px padding inside popup */\n}\n\n/* Ensure all sections inside popup are visible */\n.color-picker-content > div {\n  display: block;\n}\n\n.color-picker__heading {\n  padding: 0 0.5rem;\n  font-size: 0.75rem; /* 12px */\n  text-align: left;\n  color: var(--text-primary-color);\n  margin-bottom: 0.5rem; /* 8px */\n  font-weight: 400;\n}\n\n.color-picker-content--default {\n  padding: 0.5rem; /* 8px */\n  display: grid;\n  grid-template-columns: repeat(5, 1.875rem); /* 5 columns, 30px each */\n  grid-gap: 0.25rem; /* 4px gap */\n  border-radius: 4px;\n}\n\n.color-picker-content--default:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n/* Shades section styling */\n.color-picker-content--default.shades {\n  margin-top: 0;\n}\n\n/* Large buttons in popup (30px vs 22px in top picks) */\n.color-picker__button--large {\n  --size: 1.875rem; /* 30px */\n  width: var(--size) !important;\n  height: var(--size) !important;\n}\n\n.color-picker__button.has-outline {\n  box-shadow: inset 0 0 0 1px #d9d9d9;\n}\n\n/* No focus visible button (for shades placeholder) */\n.color-picker__button--no-focus-visible {\n  border: 0;\n}\n\n.color-picker__button--no-focus-visible::after {\n  display: none;\n}\n\n.color-picker__button--no-focus-visible:focus-visible {\n  outline: none !important;\n}\n\n/* Transparent button (checkerboard pattern) */\n.color-picker__button.is-transparent {\n  background-color: transparent !important;\n  background-image:\n    linear-gradient(45deg, #808080 25%, transparent 25%),\n    linear-gradient(-45deg, #808080 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #808080 75%),\n    linear-gradient(-45deg, transparent 75%, #808080 75%);\n  background-size: 8px 8px;\n  background-position:\n    0 0,\n    0 4px,\n    4px -4px,\n    -4px 0px;\n}\n\n.color-picker__button.is-transparent.has-outline {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n/* Hex input field (Excalidraw exact) */\n.color-picker__input-label {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  gap: 8px;\n  align-items: center;\n  border: 1px solid var(--default-border-color);\n  border-radius: 8px;\n  padding: 0 12px;\n  margin: 8px;\n  box-sizing: border-box;\n}\n\n.color-picker__input-label:focus-within {\n  box-shadow: 0 0 0 1px var(--color-primary-darkest);\n  border-radius: var(--border-radius-lg);\n}\n\n.color-picker__input-hash {\n  padding: 0 0.25rem;\n  color: var(--text-primary-color);\n}\n\n.color-picker-input {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  font-size: 0.875rem; /* 14px */\n  font-family: inherit;\n  background-color: transparent;\n  color: var(--text-primary-color);\n  border: 0;\n  outline: none;\n  height: var(--default-button-size); /* 2rem = 32px */\n  letter-spacing: 0.4px;\n  padding: 0.5rem 0.25rem;\n}\n\n.color-picker-input:focus-visible {\n  box-shadow: none;\n}\n\n/* Hex input divider */\n.color-picker__input-divider {\n  width: 1px;\n  height: 1.25rem; /* 20px */\n  background-color: var(--default-border-color);\n  margin: 0;\n}\n\n/* Eye dropper trigger (Excalidraw exact) */\n.excalidraw-eye-dropper-trigger {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-primary-color);\n  transition: color 150ms ease;\n  width: 1rem; /* 16px - fixed width */\n  height: 1rem; /* 16px - fixed height */\n  flex-shrink: 0; /* Don't shrink */\n}\n\n.excalidraw-eye-dropper-trigger:hover {\n  color: var(--color-primary-darkest);\n}\n\n.excalidraw-eye-dropper-trigger svg {\n  width: 1rem; /* 16px - Excalidraw exact */\n  height: 1rem;\n}\n\n/* ========================================\n   Range Slider (Excalidraw Exact)\n   ======================================== */\n\n.range-wrapper {\n  position: relative;\n  padding-top: 8px;\n  padding-bottom: 20px;\n  overflow: visible;\n}\n\n.range-input {\n  width: 100%;\n  height: 6px;\n  -webkit-appearance: none;\n  background: var(--color-slider-track);\n  border-radius: 3px;\n  outline: none;\n  cursor: pointer;\n}\n\n.range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--slider-thumb-size); /* 16px */\n  height: var(--slider-thumb-size);\n  background: var(--color-primary);\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  transition: transform 0.1s ease;\n}\n\n.range-input::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n\n.range-input::-webkit-slider-thumb:active {\n  transform: scale(1.15);\n}\n\n.range-input::-moz-range-thumb {\n  width: var(--slider-thumb-size);\n  height: var(--slider-thumb-size);\n  background: var(--color-primary);\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.range-input::-moz-range-track {\n  background: transparent;\n  border: none;\n}\n\n.range-input:focus {\n  outline: none;\n}\n\n.range-input:focus::-webkit-slider-thumb {\n  box-shadow:\n    0 0 0 3px rgba(105, 101, 219, 0.3),\n    0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n/* Value bubble - always visible, follows thumb */\n.value-bubble {\n  position: absolute;\n  bottom: 0;\n  transform: translateX(-50%);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--color-primary);\n  pointer-events: none;\n  transition: left 0.05s ease-out;\n}\n\n.zero-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  font-size: 11px;\n  color: var(--text-primary-color);\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n.max-label {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  font-size: 11px;\n  color: var(--text-primary-color);\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n/* Hide min/max labels when value is close */\n.zero-label.hidden,\n.max-label.hidden {\n  opacity: 0;\n}\n\n/* Ant Design Slider override */\n.slider-control .ant-slider {\n  margin: 8px 0;\n}\n\n.slider-control .ant-slider-rail {\n  background: var(--panel-border, #e5e5e5);\n}\n\n.slider-control .ant-slider-track {\n  background: var(--panel-accent, #6965db);\n}\n\n.slider-control .ant-slider-handle::after {\n  box-shadow: 0 0 0 2px var(--panel-accent, #6965db);\n}\n\n/* ========================================\n   Select Dropdown (Excalidraw Style)\n   ======================================== */\n\n.iconSelectList {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.iconSelectList.buttonList {\n  flex-wrap: wrap;\n  column-gap: 0.5rem;\n  row-gap: 0.5rem;\n}\n\n.iconSelectList button,\n.iconSelectList label {\n  width: auto;\n  min-width: 2rem;\n  height: 2rem;\n  padding: 0 0.25rem;\n  border: 1px solid var(--panel-border, #e5e5e5);\n  border-radius: 4px;\n  background-color: var(--panel-bg, #ffffff);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 150ms ease;\n}\n\n.iconSelectList button:hover,\n.iconSelectList label:hover {\n  background-color: var(--panel-hover-bg, #f5f5f5);\n  border-color: var(--panel-accent, #6965db);\n}\n\n.iconSelectList button svg,\n.iconSelectList label svg {\n  stroke: currentColor;\n  fill: none;\n}\n\n/* Ant Design Select override */\n.select-control .ant-select-selector {\n  border-radius: 4px;\n  border: 1px solid var(--panel-border, #e5e5e5);\n  background: var(--panel-bg, #ffffff);\n  font-size: 0.75rem;\n  height: 2rem;\n}\n\n/* ========================================\n   Layer Actions (Now handled by buttonList)\n   ======================================== */\n/* .zIndexButton styles are now covered by .buttonList button styles above */\n\n/* ========================================\n   ToolIcon Component (Excalidraw Exact)\n   ======================================== */\n\n.ToolIcon {\n  border-radius: var(--border-radius-lg);\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n}\n\n.ToolIcon_type_button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  font-size: inherit;\n  background-color: initial; /* transparent */\n}\n\n.ToolIcon_type_button:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.ToolIcon_type_button:active {\n  background-color: transparent; /* Button itself stays transparent */\n}\n\n.ToolIcon_type_button.ToolIcon--selected {\n  background-color: transparent;\n}\n\n.ToolIcon__icon {\n  box-sizing: border-box;\n  width: var(--default-button-size); /* 2rem */\n  height: var(--default-button-size);\n  color: var(--icon-fill-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-lg); /* 0.5rem */\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border); /* transparent */\n  background-color: var(--button-bg); /* #f6f6f9 */\n  transition: all 150ms ease;\n}\n\n.ToolIcon__icon:hover {\n  background-color: var(--button-hover-bg); /* #f1f0ff */\n  border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.ToolIcon__icon:active {\n  background-color: var(--button-active-bg); /* #f1f0ff */\n  border-color: var(--button-active-border); /* #4440bf */\n}\n\n.ToolIcon__icon[aria-disabled='true'] {\n  background: initial;\n  border: none;\n}\n\n.ToolIcon__icon[aria-disabled='true'] svg {\n  color: var(--color-disabled, #c0c0c0);\n}\n\n.ToolIcon__icon svg {\n  position: relative;\n  width: var(--default-icon-size); /* 1rem */\n  height: var(--default-icon-size);\n  color: var(--icon-fill-color);\n}\n\n.ToolIcon_size_small .ToolIcon__icon {\n  width: 2rem;\n  height: 2rem;\n  font-size: 0.8em;\n}\n\n.ToolIcon_size_medium .ToolIcon__icon {\n  width: 2rem;\n  height: 2rem;\n}\n\n/* Selected state for ToolIcon (matching buttonList .active) */\n.ToolIcon.active .ToolIcon__icon,\n.ToolIcon--selected .ToolIcon__icon {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.ToolIcon.active .ToolIcon__icon svg,\n.ToolIcon--selected .ToolIcon__icon svg {\n  color: var(--color-on-primary-container);\n}\n\n/* Danger variant for delete actions */\n.ToolIcon.danger .ToolIcon__icon {\n  color: #ff6b6b;\n}\n\n.ToolIcon.danger .ToolIcon__icon:hover {\n  background-color: rgba(255, 107, 107, 0.15);\n  border-color: #ff6b6b;\n}\n\n/* Danger variant active state (keep danger styling even when active) */\n.ToolIcon.danger.active .ToolIcon__icon,\n.ToolIcon.danger.ToolIcon--selected .ToolIcon__icon {\n  background-color: rgba(255, 107, 107, 0.25);\n  border-color: #ff6b6b;\n  box-shadow: 0 0 0 2px #ff6b6b;\n  color: #ff6b6b;\n}\n\n/* ========================================\n   Action Icon Buttons (Legacy - to be removed)\n   ======================================== */\n\n.action-icon-button {\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: 1px solid var(--panel-border, #e5e5e5);\n  border-radius: 4px;\n  background-color: var(--panel-bg, #ffffff);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 150ms ease;\n  font-size: 1rem;\n  color: var(--panel-text, #1e1e1e);\n}\n\n.action-icon-button:hover {\n  background-color: var(--panel-hover-bg, #f5f5f5);\n  border-color: var(--panel-accent, #6965db);\n}\n\n.action-icon-button:active {\n  transform: scale(0.95);\n}\n\n.action-icon-button.danger {\n  color: #ff6b6b;\n}\n\n.action-icon-button.danger:hover {\n  background-color: rgba(255, 107, 107, 0.15);\n  border-color: #ff6b6b;\n}\n\n/* ========================================\n   Divider\n   ======================================== */\n\n.property-divider {\n  height: 1px;\n  background: var(--panel-border, #e5e5e5);\n  margin: 12px 0;\n}\n\n/* ========================================\n   Property Sections\n   ======================================== */\n\n.property-section {\n  margin-bottom: 12px;\n}\n\n.property-section:last-child {\n  margin-bottom: 0;\n}\n\n.property-control {\n  margin-bottom: 12px;\n}\n\n.property-control:last-child {\n  margin-bottom: 0;\n}\n\n/* ========================================\n   Dark Theme (Excalidraw Exact)\n   ======================================== */\n\n.theme-dark .property-panel {\n  /* Dark theme colors */\n  --island-bg-color: #121212;\n  --button-bg: #363541;\n  --button-hover-bg: #363541;\n  --button-active-bg: #363541;\n  --button-gray-1: #363636;\n  --button-gray-2: #272727;\n  --button-gray-3: #222;\n  --default-border-color: #3a3a3a;\n  --text-primary-color: #e0e0e0;\n  --icon-fill-color: #e0e0e0;\n  --color-slider-track: #3a3a3a;\n  --color-slider-thumb: #b8b8b8;\n  --button-border: transparent;\n}\n\n.theme-dark .property-panel.App-menu__left {\n  --button-bg: var(--color-surface-high, #2a2a3a);\n}\n\n.theme-dark .property-panel.Island {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* ========================================\n   Responsive\n   ======================================== */\n\n@media (max-width: 768px) {\n  .property-panel {\n    width: 180px;\n    top: 70px;\n    left: 8px;\n  }\n\n  .property-panel-right {\n    right: 8px;\n  }\n}\n\n/* ========================================\n   Utility Classes\n   ======================================== */\n\n.property-panel-hidden {\n  display: none;\n}\n\n.property-panel-compact {\n  width: 160px;\n}\n\n.text-muted {\n  color: var(--panel-text-secondary, #6b6b6b);\n  font-size: 0.7rem;\n}\n\n.text-small {\n  font-size: 0.7rem;\n}\n\n/* ========================================\n   Inline Select (for button groups)\n   ======================================== */\n\n.buttonList .inline-select {\n  width: var(--default-button-size);\n  height: var(--default-button-size);\n  padding: 0;\n  border: 1px solid var(--button-border);\n  border-radius: var(--border-radius-lg);\n  font-size: 0.65rem;\n  text-align: center;\n  text-align-last: center;\n  background-color: var(--button-bg);\n  color: var(--text-primary-color);\n  cursor: pointer;\n  flex-shrink: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  transition: all 150ms ease;\n}\n\n.buttonList .inline-select:hover {\n  background-color: var(--button-hover-bg);\n  border-color: var(--default-border-color);\n}\n\n.buttonList .inline-select:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.buttonList .inline-select.active {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.buttonList .inline-select option {\n  background-color: var(--island-bg-color);\n  color: var(--text-primary-color);\n}\n\n/* ========================================\n   Control Label (for Opacity slider)\n   ======================================== */\n\n.control-label {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--text-primary-color, #e0e0e0);\n  margin-bottom: 4px;\n}\n";
+var css_248z$2 = "/**\n * Property Panel Styles - Excalidraw 100% Match\n *\n * @file property-panel.css\n * @description Exact match of Excalidraw's property panel (Island + App-menu__left)\n */\n\n/* ========================================\n   CSS Variables (Excalidraw Exact)\n   ======================================== */\n\n.property-panel {\n  /* Sizing */\n  --default-button-size: 2rem;\n  --default-icon-size: 1rem;\n  --border-radius-lg: 0.5rem;\n  --border-radius-md: 0.375rem;\n  --space-factor: 0.25rem;\n  --padding: 2;\n\n  /* Colors - Dark Theme */\n  --island-bg-color: rgba(34, 34, 34, 0.94);\n  --button-bg: rgba(255, 255, 255, 0.1);\n  --button-hover-bg: rgba(255, 255, 255, 0.15);\n  --button-active-bg: rgba(255, 255, 255, 0.2);\n  --button-active-border: #6965db;\n  --button-border: rgba(255, 255, 255, 0.1);\n  --button-gray-1: rgba(255, 255, 255, 0.08);\n  --button-gray-2: rgba(255, 255, 255, 0.12);\n  --button-gray-3: rgba(255, 255, 255, 0.16);\n  --default-border-color: rgba(255, 255, 255, 0.15);\n  --text-primary-color: #e0e0e0;\n  --icon-fill-color: #e0e0e0;\n  --color-primary: #6965db;\n  --color-primary-darkest: #8b87ff;\n  --color-surface-primary-container: rgba(101, 97, 219, 0.3);\n  --color-on-primary-container: #ffffff;\n\n  /* Slider */\n  --slider-thumb-size: 16px;\n  --color-slider-track: rgba(255, 255, 255, 0.2);\n  --color-slider-thumb: #e0e0e0;\n\n  /* Shadow */\n  --shadow-island:\n    0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n\n  /* UI Font */\n  --ui-font:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n}\n\n/* ========================================\n   Island Container (Excalidraw Structure)\n   ======================================== */\n\n.property-panel.Island {\n  box-sizing: border-box;\n  background-color: var(--island-bg-color);\n  box-shadow: var(--shadow-island);\n  border-radius: var(--border-radius-lg);\n  padding: calc(var(--padding) * var(--space-factor)); /* 0.5rem */\n  position: fixed;\n  top: 180px;\n  left: 16px;\n  z-index: 9998;\n  animation: fadeInSlide 200ms ease;\n  overflow: visible; /* Allow popups to overflow */\n  max-height: calc(100vh - 200px);\n  font-family: var(--ui-font);\n}\n\n/* ========================================\n   App Menu Left (Excalidraw Structure)\n   ======================================== */\n\n.property-panel.App-menu__left {\n  overflow-y: auto; /* Scrollable content */\n  overflow-x: visible; /* Allow horizontal overflow for popups */\n  padding: 0.5rem; /* Compact padding */\n  width: 14rem; /* 224px - wider to fit 5 colors + gaps + active color */\n  max-height: calc(100vh - 100px);\n  box-sizing: border-box;\n\n  /* Dark theme button overrides */\n  --button-border: rgba(255, 255, 255, 0.1);\n  --button-bg: rgba(255, 255, 255, 0.1);\n}\n\n.App-menu__left .buttonList {\n  padding: 0.25rem 0;\n}\n\n/* ========================================\n   Selected Shape Actions (Excalidraw Structure)\n   ======================================== */\n\n.selected-shape-actions {\n  display: flex;\n  flex-direction: column;\n  row-gap: 0.5rem; /* 8px - compact spacing */\n}\n\n@keyframes fadeInSlide {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.property-panel-right {\n  left: auto;\n  right: 16px;\n}\n\n/* ========================================\n   Scrollbar Styling\n   ======================================== */\n\n.property-panel.App-menu__left::-webkit-scrollbar {\n  width: 4px;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.property-panel.App-menu__left::-webkit-scrollbar-thumb {\n  background: var(--default-border-color);\n  border-radius: 2px;\n}\n\n/* ========================================\n   Typography & Fieldset (Excalidraw Exact)\n   ======================================== */\n\n.selected-shape-actions fieldset {\n  margin: 0; /* NO margin-bottom! Parent row-gap handles spacing */\n  padding: 0;\n  border: none;\n}\n\n.selected-shape-actions h3,\n.selected-shape-actions legend,\n.selected-shape-actions .control-label {\n  margin: 0;\n  margin-bottom: 0.25rem; /* 4px, NOT 8px! */\n  font-size: 0.75rem; /* 12px */\n  color: var(--text-primary-color);\n  font-weight: 400; /* NOT 500! */\n  display: block;\n  line-height: 1;\n}\n\n.selected-shape-actions legend {\n  padding: 0;\n}\n\n/* ========================================\n   Button List (Excalidraw outlineButtonIconStyles)\n   ======================================== */\n\n.selected-shape-actions .buttonList {\n  flex-wrap: wrap;\n  display: flex;\n  column-gap: 0.5rem; /* 8px */\n  row-gap: 0.5rem; /* 8px */\n}\n\n.buttonList label,\n.buttonList button,\n.zIndexButton {\n  /* outlineButtonStyles base + icon override */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0; /* NOT 0.625rem! outlineButtonIconStyles override */\n  width: var(--default-button-size); /* 2rem */\n  height: var(--default-button-size);\n  box-sizing: border-box;\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border); /* transparent */\n  border-radius: var(--border-radius-lg); /* 0.5rem = 8px */\n  cursor: pointer;\n  background-color: var(--button-bg); /* #f6f6f9 */\n  color: var(--icon-fill-color);\n  font-family: var(--ui-font);\n  transition: all 150ms ease;\n  margin: 0;\n  position: relative;\n}\n\n.buttonList label:hover,\n.buttonList button:not(.ToolIcon):hover,\n.zIndexButton:hover {\n  background-color: var(--button-hover-bg); /* #f1f0ff */\n  border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.buttonList label:active,\n.buttonList button:not(.ToolIcon):active,\n.zIndexButton:active {\n  background-color: var(--button-active-bg); /* #f1f0ff */\n  border-color: var(--button-active-border); /* #4440bf */\n}\n\n.buttonList label.active,\n.buttonList button:not(.ToolIcon).active {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.buttonList label.active svg,\n.buttonList button:not(.ToolIcon).active svg {\n  color: var(--color-on-primary-container);\n}\n\n/* ToolIcon buttons in buttonList - make outer button transparent so inner .ToolIcon__icon handles all visuals */\n.buttonList button.ToolIcon {\n  background-color: transparent;\n  border-color: transparent;\n  box-shadow: none;\n  padding: 0;\n}\n\n/* ToolIcon buttons in buttonList - hover state targets inner icon */\n.buttonList button.ToolIcon:hover .ToolIcon__icon {\n  background-color: var(--button-hover-bg);\n  border-color: var(--default-border-color);\n}\n\n/* ToolIcon buttons in buttonList - active/pressed state */\n.buttonList button.ToolIcon:active .ToolIcon__icon {\n  background-color: var(--button-active-bg);\n  border-color: var(--button-active-border);\n}\n\n/* ToolIcon buttons in buttonList - selected state */\n.buttonList button.ToolIcon.active .ToolIcon__icon {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.buttonList button.ToolIcon.active .ToolIcon__icon svg {\n  color: var(--color-on-primary-container);\n}\n\n/* Danger variant in buttonList */\n.buttonList button.ToolIcon.danger .ToolIcon__icon {\n  color: #ff6b6b;\n}\n\n.buttonList button.ToolIcon.danger:hover .ToolIcon__icon {\n  background-color: rgba(255, 107, 107, 0.15);\n  border-color: #ff6b6b;\n}\n\n/* Hide radio inputs */\n.buttonList input[type='radio'],\n.buttonList input[type='checkbox'] {\n  opacity: 0;\n  position: absolute;\n  pointer-events: none;\n}\n\n/* Focus state */\n.buttonList label:focus-within {\n  outline: transparent;\n  box-shadow: 0 0 0 2px var(--color-primary); /* Excalidraw focus */\n}\n\n/* SVG icons inside buttons */\n.buttonList svg {\n  position: relative;\n  width: var(--default-icon-size); /* 1rem */\n  height: var(--default-icon-size);\n  stroke: currentColor;\n  fill: none;\n}\n\n/* ========================================\n   Color Picker (Excalidraw Exact)\n   ======================================== */\n\n.color-picker-container {\n  display: flex;\n  gap: 0.5rem; /* 8px gap between sections */\n  padding: 0.25rem 0px;\n  align-items: center;\n}\n\n.color-picker__top-picks {\n  display: flex;\n  gap: 0.5rem; /* 8px gap between color buttons */\n  align-items: center;\n  flex: 1; /* Take remaining space */\n}\n\n.color-picker__button {\n  --radius: 4px;\n  --size: 1.375rem; /* 22px for top picks, NOT 2rem! */\n\n  padding: 0;\n  margin: 0;\n  width: var(--size);\n  height: var(--size);\n  border: 0; /* NO border! */\n  border-radius: var(--radius);\n  background-color: var(--swatch-color);\n  cursor: pointer;\n  position: relative;\n  transition: transform 150ms ease;\n  filter: var(--theme-filter, none);\n}\n\n.color-picker__button:hover:not(.active):not(.active-color) {\n  transform: scale(1.075); /* Exact Excalidraw */\n}\n\n.color-picker__button.active .color-picker__button-outline {\n  position: absolute;\n  --offset: -1px;\n  top: var(--offset);\n  left: var(--offset);\n  right: var(--offset);\n  bottom: var(--offset);\n  box-shadow: 0 0 0 1px var(--color-primary-darkest); /* #4a47b1, NOT border! */\n  z-index: 1;\n  border-radius: var(--radius);\n  filter: var(--theme-filter, none);\n}\n\n.color-picker__button-outline {\n  /* Empty outline by default */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Hotkey label on color buttons (Excalidraw exact) */\n.color-picker__button__hotkey-label {\n  position: absolute;\n  right: 5px;\n  bottom: 3px;\n  filter: none;\n  font-size: 11px;\n  font-weight: 500;\n  pointer-events: none; /* Don't interfere with button clicks */\n  user-select: none;\n  line-height: 1;\n}\n\n/* Color divider */\n.color-divider {\n  width: 1px;\n  height: 1rem;\n  background-color: var(--default-border-color); /* #f1f0ff */\n  margin: 0; /* Grid handles spacing */\n}\n\n/* Active color button (larger) */\n.color-picker__button.active-color {\n  width: 1.625rem; /* 26px */\n  height: 1.625rem;\n  border-radius: calc(var(--radius) + 1px); /* 5px */\n  position: relative; /* For popup positioning */\n}\n\n/* Color Picker Popup Container (Excalidraw style) */\n.color-picker-popup-wrapper {\n  position: relative;\n}\n\n.color-picker-popup {\n  /* Position set via inline style (Portal with dynamic fixed position) */\n  z-index: 10000; /* High z-index to appear above everything */\n  background: var(--island-bg-color);\n  box-shadow: var(--shadow-island);\n  border-radius: var(--border-radius-lg);\n  padding: 0.5rem;\n  pointer-events: all; /* Ensure popup is clickable */\n}\n\n/* Island Wrapper (Color Picker Popup - Light theme for readability) */\n.Island {\n  /* Define CSS variables for popup (since it's portaled to body) */\n  --padding: 0;\n  --space-factor: 0.25rem;\n  --border-radius-lg: 0.5rem;\n  --island-bg-color: rgba(34, 34, 34, 0.96);\n  --shadow-island:\n    0px 2px 8px rgba(0, 0, 0, 0.3), 0px 4px 16px rgba(0, 0, 0, 0.2);\n  --text-primary-color: #e0e0e0;\n  --default-border-color: rgba(255, 255, 255, 0.15);\n  --color-primary: #6965db;\n  --color-primary-darkest: #8b87ff;\n  --ui-font:\n    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n\n  box-sizing: border-box;\n  background-color: var(--island-bg-color);\n  box-shadow: var(--shadow-island);\n  border-radius: var(--border-radius-lg);\n  padding: calc(var(--padding) * var(--space-factor));\n  position: relative;\n  transition: box-shadow 0.5s ease-in-out;\n  font-family: var(--ui-font);\n}\n\n/* Arrow SVG container - Excalidraw exact positioning */\n.color-picker-popup-arrow {\n  position: absolute;\n  left: 0px;\n  transform-origin: 0px 0px;\n  transform: translateY(50%) rotate(90deg) translateX(-50%);\n  /* top is set dynamically via inline style */\n  pointer-events: none;\n}\n\n.color-picker-popup-arrow svg {\n  display: block;\n  fill: rgba(34, 34, 34, 0.96);\n  filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 3px 2px);\n}\n\n/* Legacy triangle - kept for backwards compatibility */\n.color-picker-popup-triangle {\n  width: 0;\n  height: 0;\n  border-style: solid;\n  border-width: 9px 10px 9px 0;\n  border-color: transparent var(--island-bg-color) transparent transparent;\n  position: absolute;\n  left: -10px;\n  top: 25px;\n  filter: drop-shadow(-1px 0 1px rgba(0, 0, 0, 0.1));\n}\n\n.color-picker__button.active-color .color-picker__button-outline {\n  position: absolute;\n  --offset: -1px;\n  top: var(--offset);\n  left: var(--offset);\n  right: var(--offset);\n  bottom: var(--offset);\n  box-shadow: 0 0 0 1px var(--color-primary-darkest);\n  border-radius: calc(var(--radius) + 1px);\n  filter: var(--theme-filter, none);\n}\n\n/* ========================================\n   Color Picker Popup Content (Excalidraw Exact)\n   ======================================== */\n\n.color-picker-content {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem; /* 12px between sections */\n  outline: none;\n}\n\n.color-picker-content.properties-content {\n  padding: 0.5rem; /* 8px padding inside popup */\n}\n\n/* Ensure all sections inside popup are visible */\n.color-picker-content > div {\n  display: block;\n}\n\n.color-picker__heading {\n  padding: 0 0.5rem;\n  font-size: 0.75rem; /* 12px */\n  text-align: left;\n  color: var(--text-primary-color);\n  margin-bottom: 0.5rem; /* 8px */\n  font-weight: 400;\n}\n\n.color-picker-content--default {\n  padding: 0.5rem; /* 8px */\n  display: grid;\n  grid-template-columns: repeat(5, 1.875rem); /* 5 columns, 30px each */\n  grid-gap: 0.25rem; /* 4px gap */\n  border-radius: 4px;\n}\n\n.color-picker-content--default:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n/* Shades section styling */\n.color-picker-content--default.shades {\n  margin-top: 0;\n}\n\n/* Large buttons in popup (30px vs 22px in top picks) */\n.color-picker__button--large {\n  --size: 1.875rem; /* 30px */\n  width: var(--size) !important;\n  height: var(--size) !important;\n}\n\n.color-picker__button.has-outline {\n  box-shadow: inset 0 0 0 1px #d9d9d9;\n}\n\n/* No focus visible button (for shades placeholder) */\n.color-picker__button--no-focus-visible {\n  border: 0;\n}\n\n.color-picker__button--no-focus-visible::after {\n  display: none;\n}\n\n.color-picker__button--no-focus-visible:focus-visible {\n  outline: none !important;\n}\n\n/* Transparent button (checkerboard pattern) */\n.color-picker__button.is-transparent {\n  background-color: transparent !important;\n  background-image:\n    linear-gradient(45deg, #808080 25%, transparent 25%),\n    linear-gradient(-45deg, #808080 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #808080 75%),\n    linear-gradient(-45deg, transparent 75%, #808080 75%);\n  background-size: 8px 8px;\n  background-position:\n    0 0,\n    0 4px,\n    4px -4px,\n    -4px 0px;\n}\n\n.color-picker__button.is-transparent.has-outline {\n  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);\n}\n\n/* Hex input field (Excalidraw exact) */\n.color-picker__input-label {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  gap: 8px;\n  align-items: center;\n  border: 1px solid var(--default-border-color);\n  border-radius: 8px;\n  padding: 0 12px;\n  margin: 8px;\n  box-sizing: border-box;\n}\n\n.color-picker__input-label:focus-within {\n  box-shadow: 0 0 0 1px var(--color-primary-darkest);\n  border-radius: var(--border-radius-lg);\n}\n\n.color-picker__input-hash {\n  padding: 0 0.25rem;\n  color: var(--text-primary-color);\n}\n\n.color-picker-input {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0;\n  font-size: 0.875rem; /* 14px */\n  font-family: inherit;\n  background-color: transparent;\n  color: var(--text-primary-color);\n  border: 0;\n  outline: none;\n  height: var(--default-button-size); /* 2rem = 32px */\n  letter-spacing: 0.4px;\n  padding: 0.5rem 0.25rem;\n}\n\n.color-picker-input:focus-visible {\n  box-shadow: none;\n}\n\n/* Hex input divider */\n.color-picker__input-divider {\n  width: 1px;\n  height: 1.25rem; /* 20px */\n  background-color: var(--default-border-color);\n  margin: 0;\n}\n\n/* Eye dropper trigger (Excalidraw exact) */\n.excalidraw-eye-dropper-trigger {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-primary-color);\n  transition: color 150ms ease;\n  width: 1rem; /* 16px - fixed width */\n  height: 1rem; /* 16px - fixed height */\n  flex-shrink: 0; /* Don't shrink */\n}\n\n.excalidraw-eye-dropper-trigger:hover {\n  color: var(--color-primary-darkest);\n}\n\n.excalidraw-eye-dropper-trigger svg {\n  width: 1rem; /* 16px - Excalidraw exact */\n  height: 1rem;\n}\n\n/* ========================================\n   Range Slider (Excalidraw Exact)\n   ======================================== */\n\n.range-wrapper {\n  position: relative;\n  padding-top: 8px;\n  padding-bottom: 20px;\n  overflow: visible;\n}\n\n.range-input {\n  width: 100%;\n  height: 6px;\n  -webkit-appearance: none;\n  background: var(--color-slider-track);\n  border-radius: 3px;\n  outline: none;\n  cursor: pointer;\n}\n\n.range-input::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--slider-thumb-size); /* 16px */\n  height: var(--slider-thumb-size);\n  background: var(--color-primary);\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n  transition: transform 0.1s ease;\n}\n\n.range-input::-webkit-slider-thumb:hover {\n  transform: scale(1.1);\n}\n\n.range-input::-webkit-slider-thumb:active {\n  transform: scale(1.15);\n}\n\n.range-input::-moz-range-thumb {\n  width: var(--slider-thumb-size);\n  height: var(--slider-thumb-size);\n  background: var(--color-primary);\n  border-radius: 50%;\n  cursor: pointer;\n  border: 2px solid #fff;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n.range-input::-moz-range-track {\n  background: transparent;\n  border: none;\n}\n\n.range-input:focus {\n  outline: none;\n}\n\n.range-input:focus::-webkit-slider-thumb {\n  box-shadow:\n    0 0 0 3px rgba(105, 101, 219, 0.3),\n    0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n/* Value bubble - always visible, follows thumb */\n.value-bubble {\n  position: absolute;\n  bottom: 0;\n  transform: translateX(-50%);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--color-primary);\n  pointer-events: none;\n  transition: left 0.05s ease-out;\n}\n\n.zero-label {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  font-size: 11px;\n  color: var(--text-primary-color);\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n.max-label {\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  font-size: 11px;\n  color: var(--text-primary-color);\n  opacity: 0.6;\n  transition: opacity 0.15s ease;\n}\n\n/* Hide min/max labels when value is close */\n.zero-label.hidden,\n.max-label.hidden {\n  opacity: 0;\n}\n\n/* Ant Design Slider override */\n.slider-control .ant-slider {\n  margin: 8px 0;\n}\n\n.slider-control .ant-slider-rail {\n  background: var(--panel-border, #e5e5e5);\n}\n\n.slider-control .ant-slider-track {\n  background: var(--panel-accent, #6965db);\n}\n\n.slider-control .ant-slider-handle::after {\n  box-shadow: 0 0 0 2px var(--panel-accent, #6965db);\n}\n\n/* ========================================\n   Select Dropdown (Excalidraw Style)\n   ======================================== */\n\n.iconSelectList {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.iconSelectList.buttonList {\n  flex-wrap: wrap;\n  column-gap: 0.5rem;\n  row-gap: 0.5rem;\n}\n\n.iconSelectList button,\n.iconSelectList label {\n  width: auto;\n  min-width: 2rem;\n  height: 2rem;\n  padding: 0 0.25rem;\n  border: 1px solid var(--panel-border, #e5e5e5);\n  border-radius: 4px;\n  background-color: var(--panel-bg, #ffffff);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 150ms ease;\n}\n\n.iconSelectList button:hover,\n.iconSelectList label:hover {\n  background-color: var(--panel-hover-bg, #f5f5f5);\n  border-color: var(--panel-accent, #6965db);\n}\n\n.iconSelectList button svg,\n.iconSelectList label svg {\n  stroke: currentColor;\n  fill: none;\n}\n\n/* Ant Design Select override */\n.select-control .ant-select-selector {\n  border-radius: 4px;\n  border: 1px solid var(--panel-border, #e5e5e5);\n  background: var(--panel-bg, #ffffff);\n  font-size: 0.75rem;\n  height: 2rem;\n}\n\n/* ========================================\n   Layer Actions (Now handled by buttonList)\n   ======================================== */\n/* .zIndexButton styles are now covered by .buttonList button styles above */\n\n/* ========================================\n   ToolIcon Component (Excalidraw Exact)\n   ======================================== */\n\n.ToolIcon {\n  border-radius: var(--border-radius-lg);\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  user-select: none;\n}\n\n.ToolIcon_type_button {\n  padding: 0;\n  border: none;\n  margin: 0;\n  font-size: inherit;\n  background-color: initial; /* transparent */\n}\n\n.ToolIcon_type_button:focus-visible {\n  box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.ToolIcon_type_button:active {\n  background-color: transparent; /* Button itself stays transparent */\n}\n\n.ToolIcon_type_button.ToolIcon--selected {\n  background-color: transparent;\n}\n\n.ToolIcon__icon {\n  box-sizing: border-box;\n  width: var(--default-button-size); /* 2rem */\n  height: var(--default-button-size);\n  color: var(--icon-fill-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: var(--border-radius-lg); /* 0.5rem */\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--button-border); /* transparent */\n  background-color: var(--button-bg); /* #f6f6f9 */\n  transition: all 150ms ease;\n}\n\n.ToolIcon__icon:hover {\n  background-color: var(--button-hover-bg); /* #f1f0ff */\n  border-color: var(--default-border-color); /* #f1f0ff */\n}\n\n.ToolIcon__icon:active {\n  background-color: var(--button-active-bg); /* #f1f0ff */\n  border-color: var(--button-active-border); /* #4440bf */\n}\n\n.ToolIcon__icon[aria-disabled='true'] {\n  background: initial;\n  border: none;\n}\n\n.ToolIcon__icon[aria-disabled='true'] svg {\n  color: var(--color-disabled, #c0c0c0);\n}\n\n.ToolIcon__icon svg {\n  position: relative;\n  width: var(--default-icon-size); /* 1rem */\n  height: var(--default-icon-size);\n  color: var(--icon-fill-color);\n}\n\n.ToolIcon_size_small .ToolIcon__icon {\n  width: 2rem;\n  height: 2rem;\n  font-size: 0.8em;\n}\n\n.ToolIcon_size_medium .ToolIcon__icon {\n  width: 2rem;\n  height: 2rem;\n}\n\n/* Selected state for ToolIcon (matching buttonList .active) */\n.ToolIcon.active .ToolIcon__icon,\n.ToolIcon--selected .ToolIcon__icon {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.ToolIcon.active .ToolIcon__icon svg,\n.ToolIcon--selected .ToolIcon__icon svg {\n  color: var(--color-on-primary-container);\n}\n\n/* Danger variant for delete actions */\n.ToolIcon.danger .ToolIcon__icon {\n  color: #ff6b6b;\n}\n\n.ToolIcon.danger .ToolIcon__icon:hover {\n  background-color: rgba(255, 107, 107, 0.15);\n  border-color: #ff6b6b;\n}\n\n/* Danger variant active state (keep danger styling even when active) */\n.ToolIcon.danger.active .ToolIcon__icon,\n.ToolIcon.danger.ToolIcon--selected .ToolIcon__icon {\n  background-color: rgba(255, 107, 107, 0.25);\n  border-color: #ff6b6b;\n  box-shadow: 0 0 0 2px #ff6b6b;\n  color: #ff6b6b;\n}\n\n/* ========================================\n   Action Icon Buttons (Legacy - to be removed)\n   ======================================== */\n\n.action-icon-button {\n  width: 2rem;\n  height: 2rem;\n  padding: 0;\n  border: 1px solid var(--panel-border, #e5e5e5);\n  border-radius: 4px;\n  background-color: var(--panel-bg, #ffffff);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 150ms ease;\n  font-size: 1rem;\n  color: var(--panel-text, #1e1e1e);\n}\n\n.action-icon-button:hover {\n  background-color: var(--panel-hover-bg, #f5f5f5);\n  border-color: var(--panel-accent, #6965db);\n}\n\n.action-icon-button:active {\n  transform: scale(0.95);\n}\n\n.action-icon-button.danger {\n  color: #ff6b6b;\n}\n\n.action-icon-button.danger:hover {\n  background-color: rgba(255, 107, 107, 0.15);\n  border-color: #ff6b6b;\n}\n\n/* ========================================\n   Divider\n   ======================================== */\n\n.property-divider {\n  height: 1px;\n  background: var(--panel-border, #e5e5e5);\n  margin: 12px 0;\n}\n\n/* ========================================\n   Property Sections\n   ======================================== */\n\n.property-section {\n  margin-bottom: 12px;\n}\n\n.property-section:last-child {\n  margin-bottom: 0;\n}\n\n.property-control {\n  margin-bottom: 12px;\n}\n\n.property-control:last-child {\n  margin-bottom: 0;\n}\n\n/* ========================================\n   Dark Theme (Excalidraw Exact)\n   ======================================== */\n\n.theme-dark .property-panel {\n  /* Dark theme colors */\n  --island-bg-color: #121212;\n  --button-bg: #363541;\n  --button-hover-bg: #363541;\n  --button-active-bg: #363541;\n  --button-gray-1: #363636;\n  --button-gray-2: #272727;\n  --button-gray-3: #222;\n  --default-border-color: #3a3a3a;\n  --text-primary-color: #e0e0e0;\n  --icon-fill-color: #e0e0e0;\n  --color-slider-track: #3a3a3a;\n  --color-slider-thumb: #b8b8b8;\n  --button-border: transparent;\n}\n\n.theme-dark .property-panel.App-menu__left {\n  --button-bg: var(--color-surface-high, #2a2a3a);\n}\n\n.theme-dark .property-panel.Island {\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n}\n\n/* ========================================\n   Responsive\n   ======================================== */\n\n@media (max-width: 768px) {\n  .property-panel {\n    width: 180px;\n    top: 70px;\n    left: 8px;\n  }\n\n  .property-panel-right {\n    right: 8px;\n  }\n}\n\n/* ========================================\n   Utility Classes\n   ======================================== */\n\n.property-panel-hidden {\n  display: none;\n}\n\n.property-panel-compact {\n  width: 160px;\n}\n\n.text-muted {\n  color: var(--panel-text-secondary, #6b6b6b);\n  font-size: 0.7rem;\n}\n\n.text-small {\n  font-size: 0.7rem;\n}\n\n/* ========================================\n   Inline Select (for button groups)\n   ======================================== */\n\n.buttonList .inline-select {\n  width: var(--default-button-size);\n  height: var(--default-button-size);\n  padding: 0;\n  border: 1px solid var(--button-border);\n  border-radius: var(--border-radius-lg);\n  font-size: 0.65rem;\n  text-align: center;\n  text-align-last: center;\n  background-color: var(--button-bg);\n  color: var(--text-primary-color);\n  cursor: pointer;\n  flex-shrink: 0;\n  appearance: none;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  transition: all 150ms ease;\n}\n\n.buttonList .inline-select:hover {\n  background-color: var(--button-hover-bg);\n  border-color: var(--default-border-color);\n}\n\n.buttonList .inline-select:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--color-primary);\n}\n\n.buttonList .inline-select.active {\n  background-color: var(--color-surface-primary-container);\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 2px var(--color-primary);\n  color: var(--color-on-primary-container);\n}\n\n.buttonList .inline-select option {\n  background-color: var(--island-bg-color);\n  color: var(--text-primary-color);\n}\n\n/* ========================================\n   Control Label (for Opacity slider)\n   ======================================== */\n\n.control-label {\n  display: block;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--text-primary-color, #e0e0e0);\n  margin-bottom: 4px;\n}\n";
 styleInject(css_248z$2);
 
 var css_248z$1 = "#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";
@@ -48350,21 +48560,26 @@ var MarkupToolbar = function MarkupToolbar(_ref) {
     setActiveTool = _useState2[1];
   // Refs
   var toolbarRef = useRef(null);
-  var initializedRef = useRef(false);
-  // Auto-activate Pen tool when toolbar mounts
-  // Note: Edit mode is already entered by ViewerForgePDF before showing toolbar
+  // Activate Pen tool immediately on mount.
+  // Edit mode is guaranteed active — ViewerForgePDF awaits enterEditMode() before
+  // setting showMarkupToolbar=true, so no delay needed.
   useEffect(function () {
-    if (initializedRef.current) return;
-    initializedRef.current = true;
-    // Small delay to ensure edit mode is fully initialized
-    var timer = setTimeout(function () {
-      drawingManager.setActiveTool(MARKUP_TOOLS.PEN);
-      console.log('[MarkupToolbar] Auto-activated Pen tool on mount');
-    }, 50);
+    drawingManager.setActiveTool(MARKUP_TOOLS.PEN);
+    console.log('[MarkupToolbar] Activated Pen tool on mount');
+  }, [drawingManager]);
+  // Sync activeTool React state from Forge Viewer events.
+  // Keeps the toolbar highlight correct if the active tool changes externally.
+  useEffect(function () {
+    var eventBus = EventBus.getInstance();
+    var handleToolChanged = function handleToolChanged(_ref2) {
+      var tool = _ref2.tool;
+      setActiveTool(tool);
+    };
+    eventBus.on('drawing:toolChanged', handleToolChanged);
     return function () {
-      return clearTimeout(timer);
+      eventBus.off('drawing:toolChanged', handleToolChanged);
     };
-  }, [drawingManager]);
+  }, []);
   /**
    * Handle tool selection
    * Note: Edit mode is already managed by ViewerForgePDF, no need to check/enter here
@@ -48794,7 +49009,7 @@ var SliderControl = function SliderControl(_ref2) {
   }, displayValue), /*#__PURE__*/React.createElement("div", {
     className: 'zero-label'
   }, "0"), /*#__PURE__*/React.createElement("div", {
-    className: "max-label ".concat(displayValue !== max ? 'hidden' : '')
+    className: "max-label ".concat(displayValue === max ? 'hidden' : '')
   }, "100")));
 };
 /**
@@ -49211,7 +49426,9 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
     _ref$enableCustomMark = _ref.enableCustomMarkups,
     enableCustomMarkups = _ref$enableCustomMark === void 0 ? false : _ref$enableCustomMark,
     _ref$markupConfig = _ref.markupConfig,
-    markupConfig = _ref$markupConfig === void 0 ? {} : _ref$markupConfig;
+    markupConfig = _ref$markupConfig === void 0 ? {} : _ref$markupConfig,
+    _ref$toolbarOptions = _ref.toolbarOptions,
+    toolbarOptions = _ref$toolbarOptions === void 0 ? {} : _ref$toolbarOptions;
   // State for drawing functionality
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),