basic docs for helper modes

docs/helper-modes/00-helper-snapping.mdx

@@ -1,12 +1,69 @@
 ---
-title: "Snapping"
+title: "Snapping Helper"
 ---
 
-## Snapping Mode
+## Snapping Helper Mode
 
-You can enable Snapping Mode on your map to allow users to have snapping on geometries.
+The Snapping Helper Mode enables alignment of features by "snapping" them to nearby elements on the map. This mode provides tools to control, activate, or deactivate snapping for layers or shapes during editing.
 
-<!-- Add detailed documentation and code examples for Snapping Mode here -->
+You can enable Snapping Helper Mode with the following methods:
+
+```js
+// Enable Snapping Mode like this:
+map.gm.options.enableMode('helper', 'snapping');
+```
+
+### Events for Snapping Helper Mode
+
+The following events are available on a map instance:
+
+| Event                      | Params  | Description                            | Output                        |
+|:---------------------------| :-------| :------------------------------------- | :-----------------------------|
+| `gm:globalsnappingmodetoggled` | `event` | Fired when Snapping Helper Mode is toggled. | `enabled`, `map`     |
+
+### Example Usage
+
+You can listen for specific Snapping Helper Mode events on the map instance like this:
+
+```js
+map.on('gm:globalsnappingmodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+Snapping works with the following shape types:
+- Markers
+- Circle markers
+- Text markers
+- Lines
+- Rectangles
+- Polygons
+- Circles
+- Guide lines
+
+The snapping helper:
+1. Calculates distances to nearby vertices and lines
+2. Snaps to the closest point within tolerance
+3. Prioritizes vertex snapping over line snapping
+4. Uses a default tolerance of 18 pixels[1]
+
+## Configuration
+
+```js
+// Enable snapping
+map.gm.markerPointer.setSnapping(true);
+
+// Disable snapping
+map.gm.markerPointer.setSnapping(false);
+
+// Pause snapping temporarily
+map.gm.markerPointer.pauseSnapping();
+
+// Resume snapping
+map.gm.markerPointer.resumeSnapping();
+```
 
 ## Live Snapping Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';

docs/helper-modes/01-helper-snap_guides.mdx

@@ -1,19 +1,57 @@
 ---
-title: "Snap Guides"
+title: "Snap Guides Helper"
 ---
 
-## Snap Guides Mode
+## Snap Guides Helper Mode
 
-You can enable Snap Guides Mode on your map to allow users to have snap guides on geometries.
+The Snap Guides Helper Mode adds visual guidelines that assist in snapping features to specific angles or points during map editing. This mode is useful when precise alignment is necessary while creating or modifying shapes.
+
+You can enable Snap Guides Helper Mode with the following methods:
+
+```js
+// Enable Snap Guides Mode like this:
+map.gm.options.enableMode('helper', 'snap_guides');
+```
+
+### Events for Snap Guides Helper Mode
+
+The following events are available on a map instance:
+
+| Event                          | Params  | Description                            | Output                        |
+|:-------------------------------| :-------| :------------------------------------- | :-----------------------------|
+| `gm:globalsnappingmodetoggled` | `event` | Fired when Snap Guides Helper Mode is toggled. | `enabled`, `map`      |
+
+### Example Usage
+
+You can listen for specific Snap Guides Helper Mode events on the map instance like this:
+
+```js
+map.on('gm:globalsnappingmodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+Snap guides work with the following shape types:
+- Lines
+- Polygons
+- Rectangles
+- Circles
+- Multi-polygons
+
+The Snap Guides helper:
+1. Calculates and displays guidelines at specific angles or along existing features.
+2. Helps users to snap to key points like intersections or perpendicular lines.
+3. Snaps features to the closest guide point, with priority given to perpendicular or aligned snapping guides.
+4. Custom snapping tolerance can be configured for guides.
 
-<!-- Add detailed documentation and code examples for Snap Guides Mode here -->
 
 ## Live Snap Guides Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
 import { helperSnapGuidesOptions } from '../../src/components/examples/mode-options';
 import features from '../../src/components/examples/geojson/basic-edit.json';
 
-
 <BrowserOnlyGmMap
   gmOptions={helperSnapGuidesOptions}
   features={features} />

docs/helper-modes/02-helper-measurements.mdx

@@ -1,12 +1,49 @@
 ---
-title: "Measurements"
+title: "Measurements Helper"
 ---
 
-## Measurements Mode
+## Measurements Helper Mode
 
-You can enable Measurements Mode on your map to allow users to have measurements on geometries.
+The Measurements Helper Mode provides tools to display live measurements such as distance, area, and perimeter for various shapes during map editing. This mode works with different shape types to dynamically calculate and display measurements as users draw or modify features.
 
-<!-- Add detailed documentation and code examples for Measurements Mode here -->
+You can enable Measurements Helper Mode with the following method:
+
+```js
+// Enable Measurements Mode like this:
+map.gm.options.enableMode('helper', 'measurements');
+```
+
+### Events for Measurements Helper Mode
+
+The following events are available on a map instance:
+
+| Event                             | Params  | Description                            | Output                    |
+|:----------------------------------| :-------| :------------------------------------- | :-------------------------|
+| `gm:globalmeasurementmodetoggled` | `event` | Fired when Measurements Helper Mode is toggled. | `enabled`, `map` |
+
+### Example Usage
+
+You can listen for specific Measurements Helper Mode events on the map instance like this:
+
+```js
+map.on('gm:globalmeasurementmodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+Measurements can be calculated for the following shape types:
+- Markers
+- Lines
+- Rectangles
+- Polygons
+- Circles
+
+The helper dynamically:
+1. Calculates distances, areas, and perimeters for shapes.
+2. Updates these measurements in real-time as the shape is drawn or modified.
+3. Displays the information in an interactive popup.
 
 ## Live Measurements Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';

docs/helper-modes/03-helper-pin.mdx

@@ -1,15 +1,47 @@
 ---
-title: "Pin"
+title: "Pin Helper"
 ---
 
-## Pin Mode
+## Pin Helper Mode
 
-You can enable Pin Mode on your map to allow users to have pin on geometries.
+The Pin Helper Mode allows you to "pin" markers or vertices together, enabling synchronized movement of all connected points when any one of them is dragged. This mode is useful for maintaining alignment across features that share the same coordinates.
 
-<!-- Add detailed documentation and code examples for Pin Mode here -->
+You can enable Pin Helper Mode with the following methods:
 
-## Live Pin Example
+```js
+// Enable Pin Mode like this:
+map.gm.options.enableMode('helper', 'pin');
+```
+
+### Events for Pin Helper Mode
+
+The following events are available on a map instance:
+
+| Event                      | Params  | Description                            | Output                        |
+|:---------------------------| :-------| :------------------------------------- | :-----------------------------|
+| `gm:globalpinmodetoggled`  | `event` | Fired when Pin Helper Mode is toggled. | `enabled`, `map`              |
+
+### Example Usage
+
+You can listen for specific Pin Helper Mode events on the map instance like this:
+
+```js
+map.on('gm:globalpinmodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+When Pin Mode is enabled:
+1. **Synchronized Movement**: Dragging a marker or vertex will move all other markers/vertices with the same coordinates (`latLng`) in sync.
+2. **Automatic Pinning**: This functionality is applied to any markers or vertices at identical coordinates, automatically linking them.
+
+## Live Pinning Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
 import { helperPinOptions } from '../../src/components/examples/mode-options';
+import features from '../../src/components/examples/geojson/basic-edit.json';
 
-<BrowserOnlyGmMap gmOptions={helperPinOptions} />
+<BrowserOnlyGmMap
+  gmOptions={helperPinOptions}
+  features={features} />

docs/helper-modes/04-helper-auto_trace.mdx

@@ -1,12 +1,47 @@
 ---
-title: "Auto Trace"
+title: "Auto Trace Helper"
 ---
 
-## Auto Trace Mode
+## Auto Trace Helper Mode
 
-You can enable Auto Trace Mode on your map to allow users to have auto trace on geometries.
+The Auto Trace Helper Mode assists users in drawing and connecting shapes by automatically tracing the shortest path between selected points. This mode can be applied to create or complete shapes like lines and polygons by tracing along existing paths.
 
-<!-- Add detailed documentation and code examples for Auto Trace Mode here -->
+You can enable Auto Trace Helper Mode with the following method:
+
+```js
+// Enable Auto Trace Mode like this:
+map.gm.options.enableMode('helper', 'auto_trace');
+```
+
+### Events for Auto Trace Helper Mode
+
+The following events are available on a map instance:
+
+| Event                         | Params  | Description                            | Output                  |
+|:------------------------------| :-------| :------------------------------------- | :-----------------------|
+| `gm:globalauto_tracemodetoggled` | `event` | Fired when Auto Trace Mode is toggled. | `enabled`, `map`      |
+
+### Example Usage
+
+You can listen for specific Auto Trace Helper Mode events on the map instance like this:
+
+```js
+map.on('gm:globalauto_tracemodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+Auto tracing works with the following shape types:
+- Lines
+- Polygons
+- Rectangles
+- Circles
+
+The Auto Trace Helper:
+1. Calculates the shortest path between two specified points.
+2. Adds intermediate points along the traced path if needed to maintain shape accuracy.
 
 ## Live Auto Trace Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';

docs/helper-modes/05-helper-zoom_to_features.mdx

@@ -1,12 +1,41 @@
 ---
-title: "Zoom To Features"
+title: "Zoom to Features Helper"
 ---
 
-## Zoom To Features Mode
+## Zoom to Features Helper Mode
 
-You can enable Zoom To Features Mode on your map to allow users to have zoom to features on geometries.
+The Zoom to Features Helper Mode allows users to zoom the map to fit all displayed features within the viewport, making it easier to locate and view all active map features at once.
 
-<!-- Add detailed documentation and code examples for Zoom To Features Mode here -->
+You can enable Zoom to Features Helper Mode with the following method:
+
+```js
+// Enable Zoom to Features Mode like this:
+map.gm.options.enableMode('helper', 'zoom_to_features');
+```
+
+### Events for Zoom to Features Helper Mode
+
+The following events are available on a map instance:
+
+| Event                                  | Params  | Description                                  | Output            |
+|:---------------------------------------| :-------| :------------------------------------------- | :-----------------|
+| `gm:globalzoom_to_featuresmodetoggled` | `event` | Fired when Zoom to Features Mode is toggled. | `enabled`, `map`  |
+
+### Example Usage
+
+You can listen for specific Zoom to Features Helper Mode events on the map instance like this:
+
+```js
+map.on('gm:globalzoom_to_featuresmodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+When Zoom to Features Mode is activated:
+1. **Map Adjustment**: Automatically calculates the bounding box to encompass all visible features.
+2. **Padding**: Adds a 20-pixel padding around the features to ensure they fit well within the view.
 
 ## Live Zoom to Features Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';