@edgepdf/viewer-js 0.0.31 → 0.0.33

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import './lib/inject-styles.js';
+import './styles.css';
 export * from './lib/viewer.js';
 export { EdgePdfViewer } from './lib/viewer.js';
 export { TileLayerManager } from './lib/tile-layer-manager.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,wBAAwB,CAAC;AAEhC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,YAAY,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,YAAY,EACV,oBAAoB,EACpB,mBAAmB,GACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,YAAY,EACV,SAAS,EACT,UAAU,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,MAAM,EACN,UAAU,EACV,UAAU,EACV,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,uBAAuB,EACvB,oBAAoB,GACrB,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -9575,30 +9575,11 @@ var require_leaflet_src = __commonJS({
   }
 });
 
-// packages/viewer-js/src/lib/leaflet-loader.ts
-var L2 = null;
-var leafletLoadPromise = null;
-async function loadLeaflet() {
-  if (L2) {
-    return L2;
-  }
-  if (leafletLoadPromise) {
-    return leafletLoadPromise;
-  }
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    throw new Error(
-      "Leaflet requires a browser environment. This code can only be used in the browser."
-    );
-  }
-  leafletLoadPromise = Promise.resolve().then(() => __toESM(require_leaflet_src(), 1)).then((leafletModule) => {
-    L2 = leafletModule.default;
-    return L2;
-  });
-  return leafletLoadPromise;
-}
-function getLeaflet() {
-  return L2;
-}
+// packages/viewer-js/src/lib/viewer.ts
+var import_leaflet4 = __toESM(require_leaflet_src(), 1);
+
+// packages/viewer-js/src/lib/tile-layer-manager.ts
+var import_leaflet = __toESM(require_leaflet_src(), 1);
 
 // packages/utils/dist/index.js
 var S3_PREFIX = {
@@ -9608,6 +9589,12 @@ var S3_PREFIX = {
   PROCESSED: "processed"
 };
 var MAX_ZOOM_LEVEL = 4;
+var MARKER_SPEC = {
+  WIDTH: 30,
+  HEIGHT: 40,
+  ANCHOR_X: 16,
+  ANCHOR_Y: 36
+};
 function calculateTileCount(imageSize, tileSize, zoom) {
   if (imageSize <= 0 || tileSize <= 0 || zoom < 0) {
     return 0;
@@ -9682,13 +9669,12 @@ var TileLayerManager = class {
    * 
    * @throws {Error} If tile layer creation fails
    */
-  async createTileLayer(map) {
+  createTileLayer(map) {
     if (this.tileLayer) {
       console.warn("Tile layer already created. Use removeTileLayer() first.");
       return this.tileLayer;
     }
     try {
-      const L3 = getLeaflet() || await loadLeaflet();
       const { imageInfo, tileUrl, keepBuffer, updateInterval } = this.config;
       const bounds = this.calculateTileBounds();
       const tileLayerOptions = {
@@ -9711,7 +9697,7 @@ var TileLayerManager = class {
         className: "seamless-tiles"
         // CSS class for styling
       };
-      this.tileLayer = L3.tileLayer(tileUrl, tileLayerOptions);
+      this.tileLayer = import_leaflet.default.tileLayer(tileUrl, tileLayerOptions);
       if (map) {
         this.setupEventListeners(map);
       }
@@ -9825,6 +9811,7 @@ var TileLayerManager = class {
 };
 
 // packages/viewer-js/src/lib/coordinate-mapper.ts
+var import_leaflet2 = __toESM(require_leaflet_src(), 1);
 var CoordinateMapper = class {
   imageInfo;
   /**
@@ -9964,14 +9951,13 @@ var CoordinateMapper = class {
    * // [[0, 0], [512, 512]] for minZoom 0 with tileSize 256
    * ```
    */
-  async calculateMapBounds() {
-    const L3 = getLeaflet() || await loadLeaflet();
+  calculateMapBounds() {
     const tileSize = this.imageInfo.tileSize || 256;
     const minZoom = this.imageInfo.minZoom || 0;
     const gridSize = Math.pow(2, minZoom + 1);
     const boundsWidth = gridSize * tileSize;
     const boundsHeight = gridSize * tileSize;
-    return L3.latLngBounds([0, 0], [boundsHeight, boundsWidth]);
+    return import_leaflet2.default.latLngBounds([0, 0], [boundsHeight, boundsWidth]);
   }
   /**
    * Validates Leaflet coordinates and checks bounds
@@ -10029,10 +10015,9 @@ var CoordinateMapper = class {
    *
    * @returns Custom CRS instance
    */
-  async createCustomCRS() {
-    const L3 = getLeaflet() || await loadLeaflet();
-    return L3.extend({}, L3.CRS.Simple, {
-      transformation: new L3.Transformation(1, 0, 1, 0)
+  createCustomCRS() {
+    return import_leaflet2.default.extend({}, import_leaflet2.default.CRS.Simple, {
+      transformation: new import_leaflet2.default.Transformation(1, 0, 1, 0)
     });
   }
   /**
@@ -10411,14 +10396,12 @@ var ZoomController = class {
   }
 };
 
+// packages/viewer-js/src/lib/marker-manager.ts
+var import_leaflet3 = __toESM(require_leaflet_src(), 1);
+
 // packages/viewer-js/src/lib/marker-edit-popup.ts
 var currentEditPopup = null;
 function createEditPopup(options) {
-  if (typeof document === "undefined") {
-    throw new Error(
-      "createEditPopup requires a browser environment (document is not available)"
-    );
-  }
   if (currentEditPopup && currentEditPopup.parentElement) {
     currentEditPopup.parentElement.removeChild(currentEditPopup);
     currentEditPopup = null;
@@ -10542,11 +10525,6 @@ function createEditPopup(options) {
 // packages/viewer-js/src/lib/marker-delete-popup.ts
 var currentDeletePopup = null;
 function createDeletePopup(options) {
-  if (typeof document === "undefined") {
-    throw new Error(
-      "createDeletePopup requires a browser environment (document is not available)"
-    );
-  }
   if (currentDeletePopup && currentDeletePopup.parentElement) {
     currentDeletePopup.parentElement.removeChild(currentDeletePopup);
     currentDeletePopup = null;
@@ -10642,7 +10620,7 @@ var MarkerManager = class {
   imageInfo;
   markers = /* @__PURE__ */ new Map();
   leafletMarkers = /* @__PURE__ */ new Map();
-  markerLayerGroup = null;
+  markerLayerGroup;
   eventListeners = /* @__PURE__ */ new Map();
   selectedIds = /* @__PURE__ */ new Set();
   activeMarkerId = null;
@@ -10687,16 +10665,7 @@ var MarkerManager = class {
     this.map = options.map;
     this.coordinateMapper = options.coordinateMapper;
     this.imageInfo = options.imageInfo;
-  }
-  /**
-   * Initializes the marker layer group (called after Leaflet is loaded)
-   */
-  async ensureLayerGroup() {
-    if (this.markerLayerGroup) {
-      return;
-    }
-    const L3 = getLeaflet() || await loadLeaflet();
-    this.markerLayerGroup = L3.layerGroup().addTo(this.map);
+    this.markerLayerGroup = import_leaflet3.default.layerGroup().addTo(this.map);
   }
   /**
    * Creates a new marker from coordinates
@@ -10719,7 +10688,7 @@ var MarkerManager = class {
    * @throws {Error} If neither position nor imageCoords is provided
    * @throws {Error} If coordinates are invalid or out of bounds
    */
-  async createMarker(options) {
+  createMarker(options) {
     if (!options.position && !options.imageCoords) {
       throw new Error("Either position or imageCoords must be provided");
     }
@@ -10765,11 +10734,10 @@ var MarkerManager = class {
       deletable: options.deletable
     };
     this.validateMarker(marker);
-    const leafletMarker = await this.createLeafletMarker(marker);
+    const leafletMarker = this.createLeafletMarker(marker);
     this.setupMarkerInteractions(leafletMarker, marker);
     this.markers.set(id, marker);
     this.leafletMarkers.set(id, leafletMarker);
-    await this.ensureLayerGroup();
     this.markerLayerGroup.addLayer(leafletMarker);
     return marker;
   }
@@ -10911,9 +10879,7 @@ var MarkerManager = class {
     if (!marker || !leafletMarker) {
       return false;
     }
-    if (this.markerLayerGroup) {
-      this.markerLayerGroup.removeLayer(leafletMarker);
-    }
+    this.markerLayerGroup.removeLayer(leafletMarker);
     this.removeActiveMarkerOverlay(id);
     if (this.activeMarkerId === id) {
       this.setActiveMarker(null);
@@ -10926,9 +10892,7 @@ var MarkerManager = class {
    * Removes all markers
    */
   removeAllMarkers() {
-    if (this.markerLayerGroup) {
-      this.markerLayerGroup.clearLayers();
-    }
+    this.markerLayerGroup.clearLayers();
     this.markers.clear();
     this.leafletMarkers.clear();
     this.activeMarkerOverlays.clear();
@@ -10973,7 +10937,7 @@ var MarkerManager = class {
    * @param updates - Partial marker properties to update
    * @returns True if marker was updated, false if not found
    */
-  async updateMarker(id, updates) {
+  updateMarker(id, updates) {
     const marker = this.markers.get(id);
     const leafletMarker = this.leafletMarkers.get(id);
     if (!marker || !leafletMarker) {
@@ -10996,7 +10960,7 @@ var MarkerManager = class {
     }
     if (updates.iconType !== void 0) {
       marker.iconType = updates.iconType;
-      const newIcon = await this.createCustomIcon(updates.iconType);
+      const newIcon = this.createCustomIcon(updates.iconType);
       leafletMarker.setIcon(newIcon);
     }
     if (updates.referenceId !== void 0) {
@@ -11154,7 +11118,7 @@ var MarkerManager = class {
    * @param id - Marker ID to set as active, or null to clear active marker
    * @returns True if marker was set as active, false if not found
    */
-  async setActiveMarker(id) {
+  setActiveMarker(id) {
     if (id === null) {
       const previousActiveId = this.activeMarkerId;
       this.activeMarkerId = null;
@@ -11186,9 +11150,7 @@ var MarkerManager = class {
       leafletMarker.closePopup();
     }
     this.activeMarkerId = id;
-    this.addActiveMarkerOverlay(id).catch((error) => {
-      console.warn("Failed to add active marker overlay:", error);
-    });
+    this.addActiveMarkerOverlay(id);
     if (this.interactionConfig.onActiveMarkerChange) {
       this.interactionConfig.onActiveMarkerChange(marker);
     }
@@ -11313,14 +11275,14 @@ var MarkerManager = class {
    * @param iconType - New icon type
    * @returns True if marker was updated, false if not found
    */
-  async updateMarkerIcon(id, iconType) {
+  updateMarkerIcon(id, iconType) {
     const marker = this.markers.get(id);
     const leafletMarker = this.leafletMarkers.get(id);
     if (!marker || !leafletMarker) {
       return false;
     }
     marker.iconType = iconType;
-    const newIcon = await this.createCustomIcon(iconType);
+    const newIcon = this.createCustomIcon(iconType);
     leafletMarker.setIcon(newIcon);
     return true;
   }
@@ -11334,6 +11296,65 @@ var MarkerManager = class {
       this.updateMarkerIcon(id, iconType);
     });
   }
+  /**
+   * Focuses on a marker by panning and zooming to its position
+   *
+   * This method smoothly animates the map view to center on the specified marker
+   * and optionally sets a specific zoom level. If no zoom level is provided,
+   * it uses the marker's saved zoom level or a reasonable default.
+   *
+   * @param markerOrId - Marker ID string or Marker object
+   * @param options - Optional focus options
+   * @param options.zoom - Target zoom level (uses marker's zoom or default if not provided)
+   * @param options.animate - Whether to animate the transition (default: true)
+   * @param options.duration - Animation duration in seconds (default: 0.5)
+   * @returns True if focus was successful, false if marker not found
+   *
+   * @example
+   * ```typescript
+   * // Focus on marker by ID
+   * markerManager.focusMarker('marker-123');
+   *
+   * // Focus with specific zoom level
+   * markerManager.focusMarker('marker-123', { zoom: 3 });
+   *
+   * // Focus without animation
+   * markerManager.focusMarker('marker-123', { animate: false });
+   *
+   * // Focus with custom duration
+   * markerManager.focusMarker('marker-123', { zoom: 2, duration: 1.0 });
+   * ```
+   */
+  focusMarker(markerOrId, options) {
+    let marker = null;
+    if (typeof markerOrId === "string") {
+      marker = this.getMarker(markerOrId);
+    } else {
+      marker = markerOrId;
+    }
+    if (!marker) {
+      console.warn(`Marker not found: ${markerOrId}`);
+      return false;
+    }
+    const targetZoom = options?.zoom ?? marker.zoom ?? 2;
+    const minZoom = this.imageInfo.minZoom ?? 0;
+    const maxZoom = this.imageInfo.maxZoom ?? 5;
+    const constrainedZoom = Math.max(minZoom, Math.min(maxZoom, targetZoom));
+    const position = [
+      marker.position[0],
+      marker.position[1]
+    ];
+    const animate = options?.animate !== false;
+    const duration = options?.duration ?? 0.5;
+    if (animate) {
+      this.map.flyTo(position, constrainedZoom, {
+        duration
+      });
+    } else {
+      this.map.setView(position, constrainedZoom);
+    }
+    return true;
+  }
   /**
    * Disposes of the marker manager and cleans up resources
    *
@@ -11352,15 +11373,13 @@ var MarkerManager = class {
    * @param iconType - Icon type to use
    * @returns Leaflet icon instance
    */
-  async createCustomIcon(iconType) {
-    const L3 = getLeaflet() || await loadLeaflet();
+  createCustomIcon(iconType) {
     const iconUrl = `${this.iconBasePath}${iconType}.png`;
-    return L3.icon({
+    return import_leaflet3.default.icon({
       iconUrl,
-      iconSize: [30, 40],
-      // Default marker size
-      iconAnchor: [16, 36],
-      // Point of the icon which will correspond to marker's location
+      iconSize: [MARKER_SPEC.WIDTH, MARKER_SPEC.HEIGHT],
+      iconAnchor: [MARKER_SPEC.ANCHOR_X, MARKER_SPEC.ANCHOR_Y],
+      // Anchor point aligns with marker location
       popupAnchor: [0, 0],
       // Point from which the popup should open relative to the iconAnchor
       shadowUrl: void 0,
@@ -11375,11 +11394,9 @@ var MarkerManager = class {
    * @param marker - Marker data
    * @returns Leaflet marker instance
    */
-  async createLeafletMarker(marker) {
-    const L3 = getLeaflet() || await loadLeaflet();
-    await this.ensureLayerGroup();
+  createLeafletMarker(marker) {
     const iconType = marker.iconType || "pin-gray";
-    const customIcon = await this.createCustomIcon(iconType);
+    const customIcon = this.createCustomIcon(iconType);
     const markerOptions = {
       title: marker.label,
       icon: customIcon
@@ -11388,7 +11405,7 @@ var MarkerManager = class {
     if (isDraggable) {
       markerOptions.draggable = true;
     }
-    const leafletMarker = L3.marker(
+    const leafletMarker = import_leaflet3.default.marker(
       [marker.position[0], marker.position[1]],
       markerOptions
     );
@@ -11483,18 +11500,17 @@ var MarkerManager = class {
    *
    * @param id - Marker ID
    */
-  async addActiveMarkerOverlay(id) {
+  addActiveMarkerOverlay(id) {
     this.removeActiveMarkerOverlay(id);
     const marker = this.markers.get(id);
     const leafletMarker = this.leafletMarkers.get(id);
     if (!marker || !leafletMarker) {
       return;
     }
-    await this.ensureLayerGroup();
     const overlaySize = 40;
     const borderWidth = 1;
-    const overlayAnchorX = 20;
-    const overlayAnchorY = 35;
+    const overlayAnchorX = overlaySize / 2 + (MARKER_SPEC.WIDTH / 2 - MARKER_SPEC.ANCHOR_X);
+    const overlayAnchorY = overlaySize / 2 + (MARKER_SPEC.HEIGHT / 2 - MARKER_SPEC.ANCHOR_Y);
     const overlayHTML = `
       <div style="
         width: ${overlaySize}px;
@@ -11506,9 +11522,8 @@ var MarkerManager = class {
         position: relative;
       "></div>
     `;
-    const L3 = getLeaflet() || await loadLeaflet();
-    const overlay = L3.marker([marker.position[0], marker.position[1]], {
-      icon: L3.divIcon({
+    const overlay = import_leaflet3.default.marker([marker.position[0], marker.position[1]], {
+      icon: import_leaflet3.default.divIcon({
         html: overlayHTML,
         className: "edgepdf-active-marker-overlay",
         iconSize: [overlaySize, overlaySize],
@@ -11520,9 +11535,7 @@ var MarkerManager = class {
       // Below marker but visible
     });
     this.activeMarkerOverlays.set(id, overlay);
-    if (this.markerLayerGroup) {
-      this.markerLayerGroup.addLayer(overlay);
-    }
+    this.markerLayerGroup.addLayer(overlay);
     leafletMarker.on("drag", () => {
       const newPos = leafletMarker.getLatLng();
       overlay.setLatLng(newPos);
@@ -11535,7 +11548,7 @@ var MarkerManager = class {
    */
   removeActiveMarkerOverlay(id) {
     const overlay = this.activeMarkerOverlays.get(id);
-    if (overlay && this.markerLayerGroup) {
+    if (overlay) {
       this.markerLayerGroup.removeLayer(overlay);
       this.activeMarkerOverlays.delete(id);
     }
@@ -11576,9 +11589,6 @@ var MarkerManager = class {
   escapeHtml(text) {
     if (!text)
       return "";
-    if (typeof document === "undefined") {
-      return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-    }
     const div = document.createElement("div");
     div.textContent = text;
     return div.innerHTML;
@@ -11976,11 +11986,6 @@ function createZoomOutIconSVG() {
 
 // packages/viewer-js/src/lib/marker-action-controls.ts
 function createMarkerActionControls(container, markerManager) {
-  if (typeof document === "undefined") {
-    throw new Error(
-      "createMarkerActionControls requires a browser environment (document is not available)"
-    );
-  }
   const controlsDiv = document.createElement("div");
   controlsDiv.className = "edgepdf-marker-action-controls";
   controlsDiv.setAttribute("role", "group");
@@ -12094,11 +12099,6 @@ function createMarkerActionControls(container, markerManager) {
 
 // packages/viewer-js/src/lib/zoom-controls.ts
 function createZoomControls(container, zoomController, options) {
-  if (typeof document === "undefined") {
-    throw new Error(
-      "createZoomControls requires a browser environment (document is not available)"
-    );
-  }
   const position = options?.position ?? "top-right";
   const existingControls = container.querySelector(
     ".edgepdf-zoom-controls"
@@ -12286,7 +12286,7 @@ var EdgePdfViewer = class {
    *
    * @throws {Error} If map initialization fails
    */
-  async initialize() {
+  initialize() {
     if (this.map) {
       console.warn(
         "Map already initialized. Call dispose() before reinitializing."
@@ -12294,10 +12294,9 @@ var EdgePdfViewer = class {
       return;
     }
     try {
-      const Leaflet = await loadLeaflet();
       this.coordinateMapper = new CoordinateMapper(this.config.imageInfo);
-      const customCRS = await this.coordinateMapper.createCustomCRS();
-      const bounds = await this.coordinateMapper.calculateMapBounds();
+      const customCRS = this.coordinateMapper.createCustomCRS();
+      const bounds = this.coordinateMapper.calculateMapBounds();
       const imageCenter = this.coordinateMapper.getImageCenter();
       const center = this.mapOptions?.center || [
         imageCenter.y,
@@ -12325,11 +12324,11 @@ var EdgePdfViewer = class {
         // Mouse wheel sensitivity
         ...this.mapOptions
       };
-      this.map = Leaflet.map(this.container, leafletOptions);
+      this.map = import_leaflet4.default.map(this.container, leafletOptions);
       if (!this.mapOptions?.center && !this.mapOptions?.zoom) {
         this.map.setView([imageCenter.y, imageCenter.x], initialZoom);
       }
-      await this.addTileLayer();
+      this.addTileLayer();
       this.addSeamlessTileStyles();
       this.zoomController = new ZoomController({
         map: this.map,
@@ -12423,7 +12422,7 @@ var EdgePdfViewer = class {
    *
    * @throws {Error} If map is not initialized or tile layer creation fails
    */
-  async addTileLayer() {
+  addTileLayer() {
     if (!this.map) {
       throw new Error("Map must be initialized before adding tile layer");
     }
@@ -12432,7 +12431,7 @@ var EdgePdfViewer = class {
         tileUrl: this.config.tileUrl,
         imageInfo: this.config.imageInfo
       });
-      const tileLayer = await this.tileLayerManager.createTileLayer(this.map);
+      const tileLayer = this.tileLayerManager.createTileLayer(this.map);
       tileLayer.addTo(this.map);
       console.log("Tile layer added to map successfully");
     } catch (error) {
@@ -12472,6 +12471,34 @@ var EdgePdfViewer = class {
   getMarkerManager() {
     return this.markerManager;
   }
+  /**
+   * Focuses on a marker by panning and zooming to its position
+   *
+   * This is a convenience method that delegates to the marker manager's focusMarker method.
+   *
+   * @param markerOrId - Marker ID string or Marker object
+   * @param options - Optional focus options
+   * @param options.zoom - Target zoom level (uses marker's zoom or default if not provided)
+   * @param options.animate - Whether to animate the transition (default: true)
+   * @param options.duration - Animation duration in seconds (default: 0.5)
+   * @returns True if focus was successful, false if marker not found or viewer not initialized
+   *
+   * @example
+   * ```typescript
+   * // Focus on marker by ID
+   * viewer.focusMarker('marker-123');
+   *
+   * // Focus with specific zoom level
+   * viewer.focusMarker('marker-123', { zoom: 3 });
+   * ```
+   */
+  focusMarker(markerOrId, options) {
+    if (!this.markerManager) {
+      console.warn("Marker manager not available");
+      return false;
+    }
+    return this.markerManager.focusMarker(markerOrId, options);
+  }
   /**
    * Disposes of the map instance and cleans up resources
    *

package/dist/lib/coordinate-mapper.d.ts

@@ -1,4 +1,4 @@
-import type * as LeafletType from 'leaflet';
+import L from 'leaflet';
 import type { ImageInfo, LeafletCoords, ImageCoords, CoordinateBounds } from '@edgepdf/types';
 /**
  * Image position information within the tile grid canvas
@@ -124,7 +124,7 @@ export declare class CoordinateMapper {
      * // [[0, 0], [512, 512]] for minZoom 0 with tileSize 256
      * ```
      */
-    calculateMapBounds(): Promise<LeafletType.LatLngBoundsExpression>;
+    calculateMapBounds(): L.LatLngBoundsExpression;
     /**
      * Validates Leaflet coordinates and checks bounds
      *
@@ -145,7 +145,7 @@ export declare class CoordinateMapper {
      *
      * @returns Custom CRS instance
      */
-    createCustomCRS(): Promise<LeafletType.CRS>;
+    createCustomCRS(): L.CRS;
     /**
      * Calculates the aspect ratio of the image
      *

package/dist/lib/coordinate-mapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"coordinate-mapper.d.ts","sourceRoot":"","sources":["../../src/lib/coordinate-mapper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,WAAW,MAAM,SAAS,CAAC;AAE5C,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,CAAC;IACzB,qDAAqD;IACrD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAAY;IAE7B;;;;;;OAMG;gBACS,SAAS,EAAE,SAAS;IAchC;;;;;OAKG;IACH,sBAAsB,IAAI,aAAa;IAuCvC;;;;;;;;;;;;;OAaG;IACH,cAAc,CACZ,aAAa,EAAE,aAAa,GAC3B,WAAW,GAAG;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE;IAyB1C;;;;;;;;;;;;;OAaG;IACH,cAAc,CAAC,WAAW,EAAE,WAAW,GAAG,aAAa;IAkBvD;;;;;;;;;;OAUG;IACH,cAAc,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAU1C;;;;;;;;;;;;;OAaG;IACG,kBAAkB,IAAI,OAAO,CAAC,WAAW,CAAC,sBAAsB,CAAC;IAWvE;;;;;OAKG;IACH,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAqBlD;;;;;OAKG;IACH,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IA+B9C;;;;;OAKG;IACG,eAAe,IAAI,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC;IAOjD;;;;;;;;;;OAUG;IACH,cAAc,IAAI,MAAM;IAIxB;;;;;;;;;;OAUG;IACH,SAAS,IAAI,gBAAgB;IAS7B;;;;OAIG;IACH,YAAY,IAAI,SAAS;IAIzB;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAS5C;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW;IAO/C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,qBAAqB,CACnB,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,GACtB,WAAW;CAaf"}
+{"version":3,"file":"coordinate-mapper.d.ts","sourceRoot":"","sources":["../../src/lib/coordinate-mapper.ts"],"names":[],"mappings":"AAAA,OAAO,CAAC,MAAM,SAAS,CAAC;AACxB,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,WAAW,EACX,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAExB;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,gBAAgB,EAAE,MAAM,CAAC;IACzB,qDAAqD;IACrD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,0BAA0B;IAC1B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,SAAS,CAAY;IAE7B;;;;;;OAMG;gBACS,SAAS,EAAE,SAAS;IAchC;;;;;OAKG;IACH,sBAAsB,IAAI,aAAa;IAuCvC;;;;;;;;;;;;;OAaG;IACH,cAAc,CACZ,aAAa,EAAE,aAAa,GAC3B,WAAW,GAAG;QAAE,YAAY,EAAE,OAAO,CAAA;KAAE;IAyB1C;;;;;;;;;;;;;OAaG;IACH,cAAc,CAAC,WAAW,EAAE,WAAW,GAAG,aAAa;IAkBvD;;;;;;;;;;OAUG;IACH,cAAc,IAAI;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE;IAU1C;;;;;;;;;;;;;OAaG;IACH,kBAAkB,IAAI,CAAC,CAAC,sBAAsB;IAU9C;;;;;OAKG;IACH,qBAAqB,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI;IAqBlD;;;;;OAKG;IACH,mBAAmB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IA+B9C;;;;;OAKG;IACH,eAAe,IAAI,CAAC,CAAC,GAAG;IAMxB;;;;;;;;;;OAUG;IACH,cAAc,IAAI,MAAM;IAIxB;;;;;;;;;;OAUG;IACH,SAAS,IAAI,gBAAgB;IAS7B;;;;OAIG;IACH,YAAY,IAAI,SAAS;IAIzB;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,MAAM,EAAE,WAAW,GAAG,OAAO;IAS5C;;;;;;;;;;;;;OAaG;IACH,aAAa,CAAC,MAAM,EAAE,WAAW,GAAG,WAAW;IAO/C;;;;;;;;;;;;;;;;;;;OAmBG;IACH,qBAAqB,CACnB,MAAM,EAAE,WAAW,EACnB,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,GACtB,WAAW;CAaf"}

package/dist/lib/marker-action-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marker-action-controls.d.ts","sourceRoot":"","sources":["../../src/lib/marker-action-controls.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,WAAW,EACtB,aAAa,EAAE,aAAa,GAC3B,WAAW,CA0Jb"}
+{"version":3,"file":"marker-action-controls.d.ts","sourceRoot":"","sources":["../../src/lib/marker-action-controls.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAGzD;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,WAAW,EACtB,aAAa,EAAE,aAAa,GAC3B,WAAW,CAoJb"}

package/dist/lib/marker-delete-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marker-delete-popup.d.ts","sourceRoot":"","sources":["../../src/lib/marker-delete-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAOD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CAuH1E"}
+{"version":3,"file":"marker-delete-popup.d.ts","sourceRoot":"","sources":["../../src/lib/marker-delete-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAOD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,kBAAkB,GAAG,WAAW,CAgH1E"}

package/dist/lib/marker-edit-popup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"marker-edit-popup.d.ts","sourceRoot":"","sources":["../../src/lib/marker-edit-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,MAAM,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAOD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,WAAW,CA2JtE"}
+{"version":3,"file":"marker-edit-popup.d.ts","sourceRoot":"","sources":["../../src/lib/marker-edit-popup.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,MAAM,EAAE,CAAC,OAAO,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC7D,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAOD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,gBAAgB,GAAG,WAAW,CAqJtE"}