### Install Angular Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Install the Angular component wrapper for Guides using npm.

```bash
npm install @scena/ngx-guides
```

--------------------------------

### Install Scena Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/README.md

Install the Scena Guides library using npm. This is the first step to using the library in your project.

```bash
npm install @scena/guides
```

--------------------------------

### Install Svelte Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Install the Svelte component wrapper for Guides using npm.

```bash
npm install @scena/svelte-guides
```

--------------------------------

### Install React Guides

Source: https://github.com/daybrush/guides/blob/master/packages/react-guides/README.md

Install the @scena/react-guides package using npm.

```sh
$ npm i @scena/react-guides
```

--------------------------------

### Initialize Guides in Vanilla JavaScript

Source: https://github.com/daybrush/guides/blob/master/_autodocs/usage-examples.md

Demonstrates the basic setup for initializing the Guides library in a vanilla JavaScript environment. It shows how to create a container, instantiate Guides, and listen for guide changes.

```typescript
import Guides from "@scena/guides";

// Create a container
const container = document.getElementById("guides-container");

// Initialize Guides
const guides = new Guides(container, {
    type: "horizontal",
    zoom: 1,
});

// Listen for changes
guides.on("changeGuides", (e) => {
    console.log("Current guides:", e.guides);
});
```

--------------------------------

### Install Vue 3 Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Install the Vue 3 component wrapper for Guides using npm.

```bash
npm install @scena/vue3-guides
```

--------------------------------

### Install Vue 2 Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Install the Vue 2 component wrapper for Guides using npm.

```bash
npm install @scena/vue-guides
```

--------------------------------

### Initialize Vanilla JS Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Basic usage example for initializing the Guides class with a container and options.

```typescript
import Guides from "@scena/guides";

const guides = new Guides(container, options);
```

--------------------------------

### Initialize and Use Guides Component

Source: https://github.com/daybrush/guides/blob/master/README.md

This example shows how to create a new Guides instance, attach it to an element, and handle 'changeGuides' events. It also includes logic for window resize and scroll events.

```tsx
import Guides from "@scena/guides";

const guides = new Guides(document.body, {
    type: "horizontal",
}).on("changeGuides", e => {
    console.log(e.guides);
});


let scrollX = 0;
let scrollY = 0;
window.addEventListener("resize", () => {
    guides.resize();
});

window.addEventListener("wheel", e => {
    scrollX += e.deltaX;
    scrollY += e.deltaY;

    guides.scrollGuides(scrollY);
    guides.scroll(scrollX);
});

```

--------------------------------

### Basic Horizontal Guides Setup

Source: https://github.com/daybrush/guides/blob/master/_autodocs/configuration.md

Initialize a horizontal Guides component with default settings and initial guides.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
    zoom: 1,
    defaultGuides: [100, 200, 300],
});
```

--------------------------------

### Install React Scena Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/README.md

Install the React-specific wrapper for Scena Guides using npm. This package simplifies integration with React applications.

```bash
npm install @scena/react-guides
```

--------------------------------

### Basic React Guides Usage

Source: https://github.com/daybrush/guides/blob/master/packages/react-guides/README.md

Integrate the Guides component into a React application. This example shows how to initialize the component, handle guide changes, and manage scrolling and resizing.

```tsx
import * as React from "react";
import Guides from "@scena/react-guides";

export default class App extends React.Component {
    render() {
        return (<Guides
            ref={e => {
                this.guides = e;
            }}
            type="horizontal"
            onChangeGuides={({ guides }) => {
                console.log(guides);
            }}
        />);
    }
    componentDidMount() {
        this.guides.resize();
        let scrollX = 0;
        let scrollY = 0;

        window.addEventListener("wheel", e => {
            scrollX += e.deltaX;
            scrollY += e.deltaY;

            this.guides.scrollGuides(scrollY);
            this.guides.scroll(scrollX);
        });
        window.addEventListener("resize", () => {
            this.guides.resize();
        });
    }
}
```

--------------------------------

### Svelte Component Usage Example

Source: https://github.com/daybrush/guides/blob/master/packages/svelte-guides/README.md

Example of how to use the Guides component in a Svelte application. It includes setting up event listeners for resize and wheel events to manage guide scrolling and resizing.

```html
<script>
import Guides from "svelte-guides";
import { onMount } from "svelte";

let guides;
onMount(() => {
    requestAnimationFrame(() => {
        guides.resize();
    });
    let scrollX = 0;
    let scrollY = 0;
    window.addEventListener("resize", () => {
        guides.resize();
    });
    window.addEventListener("wheel", e => {
        scrollX += e.deltaX;
        scrollY += e.deltaY;

        guides.scrollGuides(scrollY);
        guides.scroll(scrollX);
    });
})
</script>
<div class="guides">
    <Guides
        type="horizontal" bind:this={guides}
        on:changeGuides={({ detail: e }) => {
            console.log(e.guides);
        }}
        />
</div>

```

--------------------------------

### Complete Event Handling Example

Source: https://github.com/daybrush/guides/blob/master/_autodocs/events.md

A comprehensive example demonstrating how to initialize Guides and handle multiple events, including guideline changes, drag interactions, and scroll requests.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
    defaultGuides: [100, 200],
    displayDragPos: true,
});

// Track guideline changes
guides.on("changeGuides", (e) => {
    console.log("Guidelines now:", e.guides);
    if (e.isAdd) {
        console.log(`Added guideline at position ${e.index}`);
    } else if (e.isRemove) {
        console.log(`Removed guideline at index ${e.index}`);
    } else if (e.isChange) {
        console.log(`Moved guideline at index ${e.index}`);
    }
});

// Track drag interactions
guides.on("dragStart", (e) => {
    console.log("Drag started");
    e.datas.startGuides = guides.getGuides().slice();
});

guides.on("drag", (e) => {
    console.log(`Moving... distance: ${e.distX}px`);
});

guides.on("dragEnd", (e) => {
    console.log("Drag finished");
    console.log("Final guidelines:", guides.getGuides());
    
    // Implement undo functionality
    if (e.isDouble) {
        console.log("Double-click confirmed - guideline removed");
    }
});

// Handle clicks on the ruler
guides.on("clickRuler", (e) => {
    console.log("Ruler clicked");
});

// Handle auto-scroll requests
guides.on("requestScroll", (e) => {
    const [dirX, dirY] = e.direction;
    if (dirX !== 0 || dirY !== 0) {
        e.container.scrollLeft += dirX * 10;
        e.container.scrollTop += dirY * 10;
    }
});
```

--------------------------------

### Synchronize Guides with Window Scroll and Resize

Source: https://github.com/daybrush/guides/blob/master/_autodocs/usage-examples.md

This example demonstrates how to synchronize the Guides with window scroll events and handle window resize. It scrolls the ruler and guidelines based on user scroll and ensures the guides update on resize.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
    defaultGuides: [100, 200, 300],
});

// Synchronize with window scroll
let scrollX = 0;
let scrollY = 0;

window.addEventListener("wheel", (e) => {
    scrollX += e.deltaX;
    scrollY += e.deltaY;

    // Scroll ruler based on scroll direction
    guides.scroll(scrollX);
    // Scroll guidelines (opposite axis for horizontal type)
    guides.scrollGuides(scrollY);
});

// Handle window resize
window.addEventListener("resize", () => {
    guides.resize();
});
```

--------------------------------

### Initialize Guides Instance

Source: https://github.com/daybrush/guides/blob/master/_autodocs/README.md

Instantiate the Guides class, providing the container HTML element and optional configuration options.

```typescript
new Guides(container, options?)
```

--------------------------------

### React Component with Scena Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/README.md

Integrate Scena Guides into a React component using `useRef` and `useEffect`. This example initializes guides on mount and cleans them up on unmount.

```typescript
import React, { useRef, useEffect } from "react";
import Guides from "@scena/react-guides";

export default function MyComponent() {
    const guidesRef = useRef(null);

    useEffect(() => {
        const guides = new Guides(guidesRef.current, {
            type: "horizontal",
        });

        return () => guides.destroy();
    }, []);

    return <div ref={guidesRef} style={{ height: 100 }} />;
}
```

--------------------------------

### Basic React Usage of Guides Component

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Demonstrates how to import and use the Guides component in a React application. Includes setting the type, zoom level, and an example onChangeGuides handler.

```typescript
import React from "react";
import Guides from "@scena/react-guides";

export default function MyComponent() {
    return (
        <Guides
            type="horizontal"
            zoom={1}
            onChangeGuides={(e) => console.log(e.guides)}
        />
    );
}
```

--------------------------------

### Guides Constructor

Source: https://github.com/daybrush/guides/blob/master/_autodocs/INDEX.md

Initializes a new instance of the Guides class. This is the primary entry point for using the library.

```APIDOC
## Guides Constructor

### Description
Initializes a new instance of the Guides class.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const guides = new Guides(element, options);
```

### Response
#### Success Response (200)
- **guides** (GuidesInterface) - An instance of the Guides class.

#### Response Example
```javascript
// guides instance
```
```

--------------------------------

### Guides Constructor

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Initializes a new Guides instance, attaching it to a specified container element and configuring it with optional settings.

```APIDOC
## Guides Constructor

### Description
Creates a new Guides instance.

### Signature
```typescript
constructor(container: HTMLElement, options?: Partial<GuidesOptions>)
```

### Parameters
#### Path Parameters
- **container** (HTMLElement) - Required - DOM element to attach the Guides component to. If `warpSelf` is true, this element becomes the Guides container directly.
- **options** (Partial<GuidesOptions>) - Optional - Configuration options for the Guides component. See [GuidesOptions](#guidesoptions) for complete details.

### Request Example
```typescript
import Guides from "@scena/guides";

const container = document.getElementById("guides-container");
const guides = new Guides(container, {
    type: "horizontal",
    defaultGuides: [100, 200, 300],
    zoom: 1,
});
```
```

--------------------------------

### Initialize Guides in React

Source: https://github.com/daybrush/guides/blob/master/_autodocs/usage-examples.md

Shows how to integrate the Guides library into a React component. It covers setting up a container ref and managing the Guides instance lifecycle within a useEffect hook.

```typescript
import React, { useRef, useEffect } from "react";
import Guides from "@scena/guides";

function GuidesComponent() {
    const containerRef = useRef(null);
    const guidesRef = useRef(null);

    useEffect(() => {
        guidesRef.current = new Guides(containerRef.current, {
            type: "horizontal",
            zoom: 1,
        });

        return () => {
            guidesRef.current?.destroy();
        };
    }, []);

    return <div ref={containerRef} style={{ width: "100%", height: 100 }} />;
}

export default GuidesComponent;
```

--------------------------------

### Install preact-guides with npm

Source: https://github.com/daybrush/guides/blob/master/packages/preact-guides/README.md

Install the preact-guides package using npm. This is the first step to using the library in your project.

```sh
$ npm i preact-guides
```

--------------------------------

### Install @scena/guides via npm

Source: https://github.com/daybrush/guides/blob/master/README.md

Use this command to install the library as a project dependency.

```sh
$ npm i @scena/guides
```

--------------------------------

### Install vue3-guides with npm

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

Install the vue3-guides package using npm.

```sh
$ npm i vue3-guides
```

--------------------------------

### Install vue-guides with npm

Source: https://github.com/daybrush/guides/blob/master/packages/vue-guides/README.md

Install the vue-guides package using npm. This is the initial step to use the component in your project.

```sh
$ npm i vue-guides
```

--------------------------------

### Guides Component Usage

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Demonstrates how to import and use the Guides component in a React application. It shows basic configuration with type and zoom, and how to handle guide changes.

```APIDOC
## Guides Component Usage

### Description
This example shows how to import and use the `Guides` component in a React application. It includes basic configuration and an event handler for guide changes.

### Usage
```typescript
import React from "react";
import Guides from "@scena/react-guides";

export default function MyComponent() {
    return (
        <Guides
            type="horizontal"
            zoom={1}
            onChangeGuides={(e) => console.log(e.guides)}
        />
    );
}
```
```

--------------------------------

### Basic Usage of Scena Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/README.md

Initialize Scena Guides for horizontal orientation and log guideline changes. Ensure you have a container element with the ID 'guides' in your HTML.

```typescript
import Guides from "@scena/guides";

const container = document.getElementById("guides");
const guides = new Guides(container, {
    type: "horizontal",
    zoom: 1,
});

guides.on("changeGuides", (e) => {
    console.log("Guidelines:", e.guides);
});
```

--------------------------------

### Load and Display Large Guide Lists

Source: https://github.com/daybrush/guides/blob/master/_autodocs/usage-examples.md

Optimize performance with large guide lists by initially hiding guides and loading them programmatically. Guides are then shown when needed.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
    showGuides: false,  // Don't render guides initially
});

// Load many guides programmatically
const manyGuides = Array.from({ length: 1000 }, (_, i) => i * 10);
guides.loadGuides(manyGuides);

// Only show guides when needed
function enableGuidesDisplay() {
    guides.setState({ showGuides: true });
}
```

--------------------------------

### Install svelte-guides with npm

Source: https://github.com/daybrush/guides/blob/master/packages/svelte-guides/README.md

Install the svelte-guides package using npm. This command should be run in your project's terminal.

```sh
$ npm i svelte-guides
```

--------------------------------

### Guides Interface Methods

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Details the public methods available on the Guides component instance, allowing programmatic control over guides, scrolling, ruler drawing, and loading.

```APIDOC
## Guides Interface Methods

### Description
These are the public methods exposed by the `Guides` component instance. They allow for direct manipulation and retrieval of guide data and component state.

### Methods
- `getGuides(): number[]`
  - Returns the current list of guides.
- `scroll(pos: number): void`
  - Scrolls the guides to a specific position.
- `scrollGuides(pos: number): void`
  - Scrolls the guides to a specific position (alias for `scroll`).
- `drawRuler(options: DrawRulerOptions): void`
  - Draws the ruler with the specified options.
- `loadGuides(guides: number[]): void`
  - Loads a new set of guides, replacing the current ones.
- `resize(): void`
  - Resizes the guides component.
- `getElement(): HTMLElement`
  - Returns the main element of the Guides component.
- `getRulerElement(): HTMLCanvasElement`
  - Returns the canvas element used for the ruler.
```

--------------------------------

### Initialize Vertical Guides

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/guides.html

Initializes vertical guides with a specified type, snap points, and drag position formatting. An event listener is attached to log guide changes.

```javascript
const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
  type: "vertical",
  snapThreshold: 5,
  snaps: [0, 200, 400],
  displayDragPos: true,
  dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
  console.log("ver", guides);
});
```

--------------------------------

### Initialize Horizontal Guides

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/guides.html

Initializes horizontal guides with snap points, drag position display, and a custom format for the drag position. It also includes an event listener for guide changes.

```javascript
const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), {
  snapThreshold: 5,
  snaps: [0, 300, 600],
  displayDragPos: true,
  dragPosFormat: v => `${v}px`,
}).on("changeGuides", ({ guides }) => {
  console.log("ho", guides);
  // moveable.horizontalGuidelines = guides;
});
```

--------------------------------

### Methods Reference

Source: https://github.com/daybrush/guides/blob/master/_autodocs/MANIFEST.txt

Detailed reference for all 16 methods available on the Guides class, including parameters and examples.

```APIDOC
## Methods Reference

This section details all 16 methods available on the Guides class.

### `getGuides()`

#### Description
Retrieves the current guides.

#### Method
GET

### `loadGuides(guides)`

#### Description
Loads a new set of guides.

#### Method
POST

#### Parameters
* **guides** (Array<Guide>) - Required - The guides to load.

### `scroll(delta)`

#### Description
Scrolls the guides.

#### Method
POST

#### Parameters
* **delta** (object) - Required - The scroll delta.
  * **delta.x** (number) - Horizontal scroll amount.
  * **delta.y** (number) - Vertical scroll amount.

### `scrollGuides(pos)`

#### Description
Scrolls guides to a specific position.

#### Method
POST

#### Parameters
* **pos** (object) - Required - The target scroll position.
  * **pos.x** (number) - Target horizontal scroll position.
  * **pos.y** (number) - Target vertical scroll position.

### `resize()`

#### Description
Resizes the guides.

#### Method
POST

### `zoomTo(zoom)`

#### Description
Zooms the guides to a specific level.

#### Method
POST

#### Parameters
* **zoom** (number) - Required - The zoom level.

### `drawRuler()`

#### Description
Redraws the ruler.

#### Method
POST

### `getElement()`

#### Description
Gets the main element of the guides.

#### Method
GET

### `getRulerElement()`

#### Description
Gets the ruler element of the guides.

#### Method
GET

### `getGuideScrollPos()`

#### Description
Gets the current scroll position of the guides.

#### Method
GET

### `getRulerScrollPos()`

#### Description
Gets the current scroll position of the ruler.

#### Method
GET

### `setState(state)`

#### Description
Sets the state of the guides.

#### Method
POST

#### Parameters
* **state** (object) - Required - The new state.

### `forceUpdate()`

#### Description
Forces an update of the guides.

#### Method
POST

### `destroy()`

#### Description
Destroys the guides instance.

#### Method
POST

```

--------------------------------

### Install ngx-guides with npm

Source: https://github.com/daybrush/guides/blob/master/packages/ngx-guides/README.md

Install the ngx-guides package using npm. This is the initial step before using the component in your Angular application.

```sh
$ npm i ngx-guides
```

--------------------------------

### State Management Methods

Source: https://github.com/daybrush/guides/blob/master/_autodocs/INDEX.md

Methods for managing the state of the Guides, including getting and loading guidelines.

```APIDOC
## getGuides()

### Description
Gets the current guidelines.

### Method
GET

### Endpoint
`/guides` (conceptual, as this is an SDK method)

### Parameters
None

### Request Example
```javascript
const currentGuides = guides.getGuides();
```

### Response
#### Success Response (200)
- **guides** (Array<Object>) - An array of guideline objects.

#### Response Example
```json
[
  { "type": "horizontal", "id": 1, "elementIndex": 0, "pos": 100 },
  { "type": "vertical", "id": 2, "elementIndex": 0, "pos": 200 }
]
```

## loadGuides(guides)

### Description
Loads guidelines into the Guides instance.

### Method
POST

### Endpoint
`/guides/load` (conceptual, as this is an SDK method)

### Parameters
#### Request Body
- **guides** (Array<Object>) - Required - An array of guideline objects to load.

### Request Example
```javascript
const newGuides = [
  { "type": "horizontal", "pos": 150 },
  { "type": "vertical", "pos": 250 }
];
guides.loadGuides(newGuides);
```

### Response
#### Success Response (200)
No content, operation is successful.

#### Response Example
```json
{}
```
```

--------------------------------

### Handle Keyboard Shortcuts for Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/usage-examples.md

Listen for keydown events to perform actions like deleting, clearing, undoing, or redoing guides. Requires an instance of Guides and an undoManager.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
});

document.addEventListener("keydown", (e) => {
    const currentGuides = guides.getGuides();

    if (e.key === "d") {  // Delete last guide
        if (currentGuides.length > 0) {
            guides.loadGuides(currentGuides.slice(0, -1));
        }
    }

    if (e.key === "c") {  // Clear all guides
        guides.loadGuides([]);
    }

    if (e.key === "z" && e.ctrlKey) {  // Undo
        undoManager.undo();
    }

    if (e.key === "y" && e.ctrlKey) {  // Redo
        undoManager.redo();
    }
});
```

--------------------------------

### Initialize Moveable with Guides and InfiniteViewer

Source: https://github.com/daybrush/guides/blob/master/packages/guides/test/manual/index.html

Sets up Moveable with various features like dragging, resizing, and snapping. It also configures horizontal and vertical Guides with custom snap points and drag position formatting. An InfiniteViewer is initialized for panning and zooming, with scroll and pinch event handlers to synchronize with the guides.

```javascript
let targets = [];
const moveable = new Moveable(document.querySelector(".viewport"), {
  target: [],
  draggable: true,
  resizable: true,
  rotatable: true,
  snappable: true,
  snapCenter: true,
});
const helper = MoveableHelper.create();
moveable
  .on("dragStart", helper.onDragStart)
  .on("drag", helper.onDrag)
  .on("dragGroupStart", helper.onDragGroupStart)
  .on("dragGroup", helper.onDragGroup)
  .on("scaleStart", helper.onScaleStart)
  .on("scale", helper.onScale)
  .on("scaleGroupStart", helper.onScaleGroupStart)
  .on("scaleGroup", helper.onScaleGroup)
  .on("rotateStart", helper.onRotateStart)
  .on("rotate", helper.onRotate)
  .on("rotateGroupStart", helper.onRotateGroupStart)
  .on("rotateGroup", helper.onRotateGroup)
  .on("snap", e => {
    // console.log(e);
  });

const scrollOptions = {
  container: () => viewer.getContainer(),
  getScrollPosition: () => {
    return [ viewer.getScrollLeft(), viewer.getScrollTop(), ];
  },
  threshold: 200,
  throttleTime: 30,
};

const horizontalGuides = new Guides(document.querySelector(".guides.horizontal"), {
  snapThreshold: 5,
  snaps: [0, 300, 600],
  displayDragPos: true,
  scrollOptions,
  dragPosFormat: v => `${v}px`,
})
  .on("changeGuides", ({ guides }) => {
    moveable.horizontalGuidelines = guides;
  })
  .on("requestScroll", ({ direction }) => {
    viewer.scrollBy(0, direction[1] * 10);
  });

const verticalGuides = new Guides(document.querySelector(".guides.vertical"), {
  type: "vertical",
  snapThreshold: 5,
  snaps: [0, 200, 400],
  displayDragPos: true,
  dragPosFormat: v => `${v}px`,
  scrollOptions,
})
  .on("changeGuides", ({ guides }) => {
    moveable.verticalGuidelines = guides;
  })
  .on("requestScroll", ({ direction }) => {
    viewer.scrollBy(direction[0] * 10, 0);
  });

const viewer = new InfiniteViewer(
  document.querySelector(".viewer"),
  document.querySelector(".viewport"),
  {
    useTransform: true,
    usePinch: true,
    useResizeObserver: true,
    pinchThreshold: 50,
    // rangeX: [0, 0],
    // rangeY: [0, 0],
    // rangeOffsetX: [-200, 200],
    // rangeOffsetY: [-200, 200],
    useWheelScroll: true,
    zoomRange: [0.1, 10],
    maxPinchWheel: 10,
  }
)
  .on("dragStart", e => {
    const target = e.inputEvent.target;
    if (
      target.nodeName === "A" ||
      moveable.isMoveableElement(target) ||
      targets.some(t => t === target || t.contains(target))
    ) {
      e.stop();
    }
  })
  .on("dragEnd", e => {
    if (!e.isDrag) {
      selecto.clickTarget(e.inputEvent);
    }
  })
  .on("abortPinch", e => {
    // console.log("abort", e.inputEvent);
    selecto.triggerDragStart(e.inputEvent);
  })
  .on("scroll", e => {
    // console.log("Change SCROLL", e.scrollLeft);
    const zoom = viewer.zoom;
    horizontalGuides.scroll(e.scrollLeft, zoom);
    horizontalGuides.scrollGuides(e.scrollTop, zoom);
    verticalGuides.scroll(e.scrollTop, zoom);
    verticalGuides.scrollGuides(e.scrollLeft, zoom);
  })
  .on("pinch", e => {
    // console.log(e);
    document.querySelector(".description").innerHTML = e.inputEvent.type;
    const zoom = Math.max(0.1, e.zoom);
    verticalGuides.zoom = zoom;
    horizontalGuides.zoom = zoom;
    viewer.zoom = zoom;
  });

const selecto = new Selecto({
  container: document.querySelector(".app"),
  dragContainer: ".viewer",
  hitRate: 0,
  selectByClick: true,
  selectFromInside: false,
  selectableTargets: ["[data-moveable]"],
  toggleContinueSelect: ["shift"],
  scrollOptions: {
    container: viewer.getContainer(),
    threshold: 30,
    throttleTime: 30,
    getScrollPosition: ({ direction }) => {
      return [
        viewer.getScrollLeft(),
        viewer.getScrollTop(),
      ];
    }
  }
})
  .on("dragStart", e => {
    const inputEvent = e.inputEvent;
    const target = inputEvent.target;
    if (
      target.nodeName === "A" ||
      (inputEvent.type === "touchstart" && e.isTrusted) ||
      moveable.isMoveableElement(target) ||
      targets.some(t => t === target || t.contains(target))
    ) {
      console.log("?", inputEvent.type);
      e.stop();
    }
  })
  .on("scroll", ({ direction }) => {
    viewer.scrollBy(direction[0] * 10, direction[1] * 10);
  })
  .on("selectEnd", e => {
    targets = e.selected;
    moveable.target = targets;
    if (e.isDragStart) {
      e.inputEvent.preventDefault();
      setTimeout(() => {
        moveable.dragStart(e.inputEvent);
      });
    }
  });

requestAnimationFrame(() => {
  viewer.scrollCenter();
});

window.addEventListener("resize", () => {
  horizontalGuides.resize();
  verticalGuides.resize();
});

document.querySelector(".reset").addEventListener("click", () => {
  viewer.scrollCenter();
});
```

--------------------------------

### Vue 3 Component Usage Example

Source: https://github.com/daybrush/guides/blob/master/packages/vue3-guides/README.md

Example of how to integrate and use the vue-guides component in a Vue 3 application. Includes event handling and dynamic resizing.

```html
<template>
    <div class="guides">
        <vue-guides
            type="horizontal" ref="guides"
            v-on:changeGuides="onChangeGuides"
            />
    </div>
</template>
<script>
    import Guides from "vue3-guides";

    export default {
        components: {
            "vue-guides": Guides,
        },
        methods: {
            onChangeGuides(e) {
                console.log(e.guides);
            },
        },
        mounted() {
            const guides = this.$refs.guides;
            let scrollX = 0;
            let scrollY = 0;
            guides.resize();

            window.addEventListener("resize", () => {
                guides.resize();
            });
            window.addEventListener("wheel", e => {
                scrollX += e.deltaX;
                scrollY += e.deltaY;
                guides.scroll(scrollX);
                guides.scrollGuides(scrollY);
            });
        },
    };
</script>
```

--------------------------------

### Guides with Snapping Enabled

Source: https://github.com/daybrush/guides/blob/master/_autodocs/configuration.md

Configure guides to snap to specific positions with a defined threshold and display drag position.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
    snaps: [0, 50, 100, 150, 200],  // Guidelines snap to these positions
    snapThreshold: 10,               // Snap when within 10px
    displayDragPos: true,            // Show position while dragging
});
```

--------------------------------

### Browser Script Tag Usage

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Illustrates how to include the Guides library in an HTML file using a script tag, making the Guides class globally available for instantiation.

```html
<script src="https://daybrush.com/guides/release/latest/dist/guides.min.js"></script>
<script>
    const guides = new Guides(container, options);
</script>
```

--------------------------------

### Import Guides in Preact

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Import the Guides component for use in Preact projects.

```typescript
import Guides from "@scena/preact-guides";
```

--------------------------------

### dragStart Event

Source: https://github.com/daybrush/guides/blob/master/_autodocs/events.md

Fired when the user starts dragging a guideline or starts a drag from the ruler (to create a new guideline).

```APIDOC
## dragStart

Fired when the user starts dragging a guideline or starts a drag from the ruler (to create a new guideline).

**Event Object Type:** `OnDragStart`

```typescript
interface OnDragStart extends OnGestoDragStart {
    dragElement: HTMLElement;
}
```

| Property | Type | Description |
|----------|------|-------------|
| dragElement | HTMLElement | The DOM element being dragged (guideline or ruler) |
| clientX | number | X coordinate of the mouse cursor in the viewport |
| clientY | number | Y coordinate of the mouse cursor in the viewport |
| datas | Object | Data object for storing user data across drag events |
| inputEvent | MouseEvent \| TouchEvent | Original mouse or touch event |
| pageX | number | X coordinate relative to the page |
| pageY | number | Y coordinate relative to the page |

**Example:**

```typescript
guides.on("dragStart", (e) => {
    console.log("Drag started on element:", e.dragElement);
    console.log("Cursor position:", e.clientX, e.clientY);
    e.datas.startTime = Date.now();
});
```
```

--------------------------------

### Import Guides in React

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Import the Guides component and its types for use in React projects.

```typescript
import Guides from "@scena/react-guides";
import type { GuidesOptions, OnChangeGuides } from "@scena/react-guides";
```

--------------------------------

### getGuides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Retrieves the current array of guide positions managed by the Guides component.

```APIDOC
## getGuides

### Description
Retrieves the current array of guide positions (in pixels or units based on zoom).

### Signature
```typescript
public getGuides(): number[]
```

### Response
#### Success Response (200)
- **guides** (number[]) - Array of guide positions

### Response Example
```typescript
const currentGuides = guides.getGuides();
console.log(currentGuides); // [100, 200, 300]
```
```

--------------------------------

### Initialize and Use Guides with Method Chaining

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/methods.md

Demonstrates initializing the Guides instance with default options, loading guidelines, setting up event handling, resizing, zooming, updating state, and finally destroying the instance. This showcases a typical workflow.

```typescript
// Initialize with defaults
const guides = new Guides(container, {
    type: "horizontal",
    zoom: 1,
});

// Load guidelines
guides.loadGuides([100, 200, 300]);

// Set up event handling
guides.on("changeGuides", (e) => {
    console.log("Guidelines changed:", e.guides);
});

// Resize and zoom
guides.resize();
guides.zoomTo(1.5);

// Later: Update configuration
guides.setState({
    snaps: [0, 50, 100],
    snapThreshold: 5,
});

// Cleanup
guides.destroy();
```

--------------------------------

### Import Guides in Vanilla JavaScript

Source: https://github.com/daybrush/guides/blob/master/_autodocs/module-structure.md

Import the Guides component for use in Vanilla JavaScript projects. Two import paths are available.

```typescript
import Guides from "@scena/guides";
// or
import Guides from "@scena/guides/dist/guides.esm.js";
```

--------------------------------

### loadGuides(guides)

Source: https://github.com/daybrush/guides/blob/master/_autodocs/INDEX.md

Sets or updates the guidelines for the component with a new set of guide data.

```APIDOC
## loadGuides(guides)

### Description
Set guidelines.

### Method
`POST` (conceptual)

### Endpoint
N/A (Method call)

### Parameters
#### Request Body
* **guides** (Array) - An array of guide data to load.
```

--------------------------------

### Guides Class API

Source: https://github.com/daybrush/guides/blob/master/_autodocs/MANIFEST.txt

Documentation for the main Guides class, covering its constructor, methods, events, and properties.

```APIDOC
## Guides Class

### Description
Provides the core functionality for creating and managing guides.

### Constructor

#### Parameters
* **options** (GuidesOptions) - Optional - Configuration options for the Guides instance.

### Methods

#### `getGuides()`

### Description
Retrieves the current guides.

### Method
GET

#### `loadGuides(guides)`

### Description
Loads a new set of guides.

### Method
POST

#### Parameters
* **guides** (Array<Guide>) - Required - The guides to load.

#### `scroll(delta)`

### Description
Scrolls the guides.

### Method
POST

#### Parameters
* **delta** (object) - Required - The scroll delta.
  * **delta.x** (number) - Horizontal scroll amount.
  * **delta.y** (number) - Vertical scroll amount.

#### `scrollGuides(pos)`

### Description
Scrolls guides to a specific position.

### Method
POST

#### Parameters
* **pos** (object) - Required - The target scroll position.
  * **pos.x** (number) - Target horizontal scroll position.
  * **pos.y** (number) - Target vertical scroll position.

#### `resize()`

### Description
Resizes the guides.

### Method
POST

#### `zoomTo(zoom)`

### Description
Zooms the guides to a specific level.

### Method
POST

#### Parameters
* **zoom** (number) - Required - The zoom level.

#### `drawRuler()`

### Description
Redraws the ruler.

### Method
POST

#### `getElement()`

### Description
Gets the main element of the guides.

### Method
GET

#### `getRulerElement()`

### Description
Gets the ruler element of the guides.

### Method
GET

#### `getGuideScrollPos()`

### Description
Gets the current scroll position of the guides.

### Method
GET

#### `getRulerScrollPos()`

### Description
Gets the current scroll position of the ruler.

### Method
GET

#### `setState(state)`

### Description
Sets the state of the guides.

### Method
POST

#### Parameters
* **state** (object) - Required - The new state.

#### `forceUpdate()`

### Description
Forces an update of the guides.

### Method
POST

#### `destroy()`

### Description
Destroys the guides instance.

### Method
POST

### Events

#### `changeGuides`

### Description
Fired when guides change.

#### `dragStart`

### Description
Fired when a drag operation starts.

#### `drag`

### Description
Fired during a drag operation.

#### `dragEnd`

### Description
Fired when a drag operation ends.

#### `clickRuler`

### Description
Fired when the ruler is clicked.

#### `requestScroll`

### Description
Fired when a scroll is requested.

### Properties

#### `GuidesOptions`

### Description
Options for configuring the Guides instance.

#### `GuidesProps`

### Description
Properties of the Guides instance.

#### `GuidesState`

### Description
State of the Guides instance.

#### `GuidesInterface`

### Description
Interface for the Guides class.

#### `GuidesEvents`

### Description
Event types for the Guides class.

```

--------------------------------

### Load New Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Replace the existing guidelines with a new set of positions. Provide an array of numbers representing the desired guide locations.

```typescript
guides.loadGuides([50, 100, 150, 250]);
```

--------------------------------

### Guides with Auto-Scroll Configuration

Source: https://github.com/daybrush/guides/blob/master/_autodocs/configuration.md

Enable auto-scrolling behavior for the guides component and handle scroll requests.

```typescript
const guides = new Guides(container, {
    scrollOptions: {
        container: document.body,  // Container to scroll
        // Additional scroll configuration
    },
});

guides.on("requestScroll", (e) => {
    // Handle scroll request
    e.container.scrollLeft += e.direction[0] * 10;
    e.container.scrollTop += e.direction[1] * 10;
});
```

--------------------------------

### Guides Class Event Emitter Methods

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

The Guides class extends EventEmitter and provides standard methods for adding, removing, and triggering events.

```APIDOC
## Guides Class Event Emitter

### Description
Provides standard event emitter functionality for the Guides class.

### Methods
- **on(eventName, callback)**: Add an event listener.
- **off(eventName, callback)**: Remove an event listener.
- **trigger(eventName, data)**: Trigger an event.
```

--------------------------------

### Update Guides Configuration Dynamically

Source: https://github.com/daybrush/guides/blob/master/_autodocs/configuration.md

Use the `setState()` method to update configuration options after the Guides instance has been initialized. This can be used to change zoom levels, snap points, or lock guidelines.

```typescript
const guides = new Guides(container, {
    type: "horizontal",
    zoom: 1,
});

// Update zoom
guides.setState({ zoom: 1.5 });

// Update multiple options
guides.setState({
    snaps: [0, 100, 200],
    snapThreshold: 15,
    displayDragPos: true,
}, () => {
    console.log("Configuration updated");
});

// Lock guidelines
guides.setState({ lockGuides: ["remove"] });

// Unlock
guides.setState({ lockGuides: false });
```

--------------------------------

### GuidesInterface

Source: https://github.com/daybrush/guides/blob/master/_autodocs/types.md

Interface defining the public API contract for Guides implementations. These methods allow direct interaction with the Guides component.

```APIDOC
## GuidesInterface

### Description
Provides methods to interact with the Guides component, including managing guidelines, scrolling, drawing, and element retrieval.

### Methods

#### getGuides
- **Signature**: `() => number[]`
- **Description**: Get current guideline positions.

#### scroll
- **Signature**: `(pos: number) => void`
- **Description**: Scroll the ruler.

#### scrollGuides
- **Signature**: `(pos: number) => void`
- **Description**: Scroll the guidelines.

#### drawRuler
- **Signature**: `(options: DrawRulerOptions) => void`
- **Description**: Draw/redraw the ruler.

#### loadGuides
- **Signature**: `(guides: number[]) => void`
- **Description**: Load new guideline positions.

#### resize
- **Signature**: `() => void`
- **Description**: Recalculate component size.

#### getElement
- **Signature**: `() => HTMLElement`
- **Description**: Get container element.

#### getRulerElement
- **Signature**: `() => HTMLCanvasElement`
- **Description**: Get ruler canvas element.
```

--------------------------------

### Constructor

Source: https://github.com/daybrush/guides/blob/master/_autodocs/README.md

Initializes a new instance of the Guides component. It takes a container element and an optional options object for configuration.

```APIDOC
## Constructor

### Description
Initializes a new instance of the Guides component.

### Parameters
- **container** (HTMLElement) - The DOM element to attach the guides to.
- **options** (Partial<GuidesOptions>) - Optional configuration object.
```

--------------------------------

### Get Guides Container Element

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/methods.md

Retrieves the main DOM element (container) of the Guides component. Useful for adding CSS classes, getting computed styles, or appending the component to a different part of the DOM.

```typescript
const element = guides.getElement();

// Add CSS class
element.classList.add("custom-guides");

// Get computed styles
const style = window.getComputedStyle(element);
console.log(style.width);

// Append to different container
document.body.appendChild(guides.getElement());

// Check if guides are in DOM
if (document.contains(guides.getElement())) {
    console.log("Guides are in the document");
}
```

--------------------------------

### GuidesInterface Definition

Source: https://github.com/daybrush/guides/blob/master/packages/svelte-guides/README.md

Defines the interface for interacting with the Guides component instance, providing methods to get guides, scroll, load guides, and resize the component.

```typescript
export interface GuidesInterface {
    getGuides(): number[];
    scroll(pos: number): void;
    scrollGuides(pos: number): void;
    loadGuides(guides: number[]): void;
    resize(): void;
}

```

--------------------------------

### Initialize Guides Instance

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Create a new Guides instance by providing a container element and optional configuration options. Use this to set up horizontal or vertical rulers with default guidelines and zoom levels.

```typescript
import Guides from "@scena/guides";

const container = document.getElementById("guides-container");
const guides = new Guides(container, {
    type: "horizontal",
    defaultGuides: [100, 200, 300],
    zoom: 1,
});
```

--------------------------------

### Design Editor with Multiple Guides

Source: https://github.com/daybrush/guides/blob/master/_autodocs/usage-examples.md

Integrates the Guides library into a design editor for managing horizontal guides. It includes event handlers for guide changes, drag start, and drag end, along with methods for managing undo states and rendering.

```typescript
class DesignEditor {
    constructor(container) {
        this.guides = new Guides(container, {
            type: "horizontal",
            zoom: 1,
            displayDragPos: true,
            dragPosFormat: (v) => `${v}px`,
            snaps: [0, 50, 100, 150, 200],
            snapThreshold: 5,
        });

        this.setupEventHandlers();
    }

    setupEventHandlers() {
        this.guides.on("changeGuides", (e) => {
            this.onGuidelinesChanged(e);
        });

        this.guides.on("dragStart", (e) => {
            this.onDragStart(e);
        });

        this.guides.on("dragEnd", (e) => {
            this.onDragEnd(e);
        });
    }

    onGuidelinesChanged(e) {
        // Save to undo/redo stack
        this.pushUndoState({
            guides: e.guides,
            type: e.isAdd ? "add" : e.isRemove ? "remove" : "change",
            index: e.index,
        });

        // Update canvas rendering
        this.renderCanvas();
    }

    onDragStart(e) {
        this.isDragging = true;
    }

    onDragEnd(e) {
        this.isDragging = false;
        if (e.isDouble) {
            console.log("Guideline removed via double-click");
        }
    }

    pushUndoState(state) {
        // Implement undo/redo logic
    }

    renderCanvas() {
        // Re-render with current guidelines
    }

    getGuidelines() {
        return this.guides.getGuides();
    }

    setGuidelines(guidelines) {
        this.guides.loadGuides(guidelines);
    }

    destroy() {
        this.guides.destroy();
    }
}

// Usage
const editor = new DesignEditor(container);
```

--------------------------------

### Get Main Guides Component Element

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Retrieve the primary DOM element that contains the Guides component. This can be useful for direct DOM manipulation or inspection.

```typescript
const element = guides.getElement();
console.log(element.className); // "scena-guides-manager horizontal"
```

--------------------------------

### GuidesInterface API

Source: https://github.com/daybrush/guides/blob/master/_autodocs/types.md

Defines the public API contract for Guides implementations. Use this interface to interact with Guides components, such as getting guidelines, scrolling, drawing, and resizing.

```typescript
interface GuidesInterface {
    getGuides(): number[];
    scroll(pos: number): void;
    scrollGuides(pos: number): void;
    drawRuler(options: DrawRulerOptions): void;
    loadGuides(guides: number[]): void;
    resize(): void;
    getElement(): HTMLElement;
    getRulerElement(): HTMLCanvasElement;
}
```

--------------------------------

### Get Ruler Scroll Position

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Retrieves the current scroll position of the ruler, typically representing the horizontal scroll for horizontal guides or vertical scroll for vertical guides.

```typescript
const rulerScrollPos = guides.getRulerScrollPos();
console.log(rulerScrollPos);
```

--------------------------------

### Get Guideline Scroll Position

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/guides.md

Fetches the current scroll position of the guidelines, typically representing the vertical scroll for horizontal guides or horizontal scroll for vertical guides.

```typescript
const guideScrollPos = guides.getGuideScrollPos();
console.log(guideScrollPos);
```

--------------------------------

### Get Current Guideline Scroll Position

Source: https://github.com/daybrush/guides/blob/master/_autodocs/api-reference/methods.md

Returns the current scroll position of the guidelines. For horizontal guides, returns Y scroll. For vertical guides, returns X scroll. Useful for saving and restoring scroll states or synchronizing multiple guides.

```typescript
public getGuideScrollPos(): number
```

```typescript
const currentGuideScroll = guides.getGuideScrollPos();
console.log(`Guidelines scrolled to: ${currentGuideScroll}px`);

// Save and restore guideline scroll
const savedPos = guides.getGuideScrollPos();
// Later...
guides.scrollGuides(savedPos);

// Sync two guides' scroll positions
const pos1 = guides1.getGuideScrollPos();
guides2.scrollGuides(pos1);
```