### Install LinkerLine using npm

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Install the LinkerLine package using npm or your preferred package manager.

```bash
npm install --save linkerline
```

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

### Create LinkerLine with Custom Plugs

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Creates a LinkerLine instance with a specified parent, color, size, and custom start and end plugs. The 'star' plug is used for both ends, ensuring visual consistency.

```javascript
const line=new LinkerLine({
	    parent:linkerlineview,
        color:"#73f5fa",
        size:3,
        startPlug:"star",
        endPlug:"star",
	});
```

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

### LinkerLine.positionAll()

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

A static method that repositions every active line whose start and end elements are still present in the DOM. It's automatically called on window resize.

```APIDOC
## `LinkerLine.positionAll()` — Reposition every active line

Static method that calls `position()` on every non-removed line whose start and end elements are still in the DOM. Called automatically on window resize via `requestAnimationFrame`.

### Usage
Call this method after a layout change (e.g., accordion expand) to force a refresh of all line positions.

### Request Example
```javascript
// After a layout change (e.g., accordion expand) force a refresh
document.getElementById("accordion").addEventListener("transitionend", () => {
  LinkerLine.positionAll();
});
```
```

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

### Create a new LinkerLine connector

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Instantiates a connector line between two HTML elements. The SVG element is appended to a specified parent container. This example demonstrates LinkerLine-specific options and core LeaderLine options.

```javascript
import LinkerLine from "linkerline";

const start = document.getElementById("box-a");
const end   = document.getElementById("box-b");
const container = document.getElementById("canvas");

const line = new LinkerLine({
  // LinkerLine-specific options
  parent: container,        // SVG is inserted here instead of document.body
  hidden: false,            // render immediately (default)
  minGridLength: 30,        // minimum segment length for "grid" path

  // Core LeaderLine options
  start,
  end,
  path: "fluid",            // "arc" | "grid" | "fluid" | "magnet" | "straight"
  color: "#4a90e2",
  size: 3,
  startPlug: "disc",        // built-in: disc | square | arrow1 | arrow2 | arrow3 | hand | crosshair | behind
  endPlug: "arrow2",
  startSocket: "right",     // "auto" | "top" | "right" | "bottom" | "left"
  endSocket: "left",
  dash: { length: 8, gap: 4, animation: { duration: 700, easing: "linear" } },
  dropShadow: { dx: 2, dy: 4, blur: 3, color: "#000", opacity: 0.5 },
  gradient: { startColor: "#4a90e2", endColor: "#e24a90" },
  outline: true,
  outlineColor: "white",
  outlineSize: 0.3,
});

console.log(line.element);   // SVGElement inside #canvas
console.log(line.id);        // numeric instance id
console.log(line.removed);   // false
console.log(line.standalone); // true (not part of a Chain)
```

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

### Create and Attach Labels to a Line

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Use LinkerLine.Label to create text labels that can be attached to the start, middle, or end of a line. The 'on' option determines if the label follows the path curvature or is positioned relative to an element.

```javascript
const pathLabel = LinkerLine.Label("data flow", {
  on: "path",          // label curves along the line
  color: "#2c3e50",
  outlineColor: "white",
  offset: 6,           // pixels away from the path
});

const captionLabel = LinkerLine.Label("source", {
  on: "element",
  color: "#7f8c8d",
  lineOffset: 5,
});

const line = new LinkerLine({
  start: document.getElementById("a"),
  end:   document.getElementById("b"),
  middleLabel: pathLabel,
  endLabel: captionLabel,
  color: "#1abc9c",
  size: 2,
});
```

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

### LinkerLine Chain Initialization

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Create a LinkerLineChain instance by providing an array of HTML elements (nodes) and an optional configuration object.

```javascript
new LinKerLine.Chain(nodes,options):LinkerLineChain;
```

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

### Basic LinkerLine Initialization

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Import and initialize LinkerLine with custom options, including the new 'parent' option for specifying where the line SVG element is inserted.

```javascript
import LinkerLine from "linkerline";

const line=new LinkerLine({
    //...OriginalClassProps,
    parent:HTMLElement,// this is the new parent option
    start:HTMLElement,
    end:HTMLElement,
});
//line.element => returns the line svg element
```

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

### Initialize LinkerLine Chain

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Initializes a new LinkerLine chain with specified nodes and an optional callback for link changes. The onLinkChange callback receives line details and updates node background colors.

```javascript
const chain=new LinkerLine.Chain(nodes,{
    onLinkChange:({line,startNode,endNode,nodesLinked})=>{
        const color=nodesLinked?line.color:null;
        startNode.style.backgroundColor=color;
        endNode.style.backgroundColor=color;
    },
});
linkbtn.onclick=(()=>{
    chain.link();
});
unlinkbtn.onclick=(()=>{
    chain.unlink();
})
```

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

### LinkerLine.definePlug()

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Defines custom plugs that can be used with LinkerLine instances.

```APIDOC
## LinkerLine.definePlug(options: object)

### Description
Allows defining custom plugs for lines.

### Parameters
#### Request Body
- **options** (object) - Required - An object containing plug definition properties.
  - **name** (string) - Required - The name of the plug.
  - **shape** (enum "rect","ellipse") - Optional - The shape of the plug.
  - **svg** (string | (color:string, weight:string)=>string) - Optional - SVG string or a function returning an SVG string for the plug.
  - **src** (string) - Optional - URL or base64 string for an image plug.
  - **width** (number) - Optional - The base width of the plug.
  - **height** (number) - Optional - The base height of the plug.
  - **margin** (number) - Optional - Margin between the plug and the start/end element.
  - **rotatable** (boolean) - Optional - Indicates if the plug should rotate with the line orientation.
```

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

### LinkerLine.positionAll()

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

A static method to update the positions of all lines in the LinkerLine system simultaneously.

```APIDOC
## LinkerLine.positionAll()

### Description
Updates the positions of all lines at once.

### Method
static positionAll() : void
```

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

### Update line options at runtime with `line.setOptions()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Use `setOptions` to dynamically change line properties like color, size, path, and end plug. This method immediately repositions the line after applying the new options.

```javascript
line.setOptions({
  color: "#e74c3c",
  size: 5,
  path: "grid",
  endPlug: "arrow3",
  dash: false,
});
```

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

### Register custom plugs with `LinkerLine.definePlug()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Define reusable custom plug shapes (arrow heads) using SVG, image URLs, or primitive shapes. These plugs can then be referenced by name in line configurations.

```javascript
// SVG plug — color/weight are injected to match the line style
LinkerLine.definePlug({
  name: "star",
  svg: (color, weight) => `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
         fill="${color}" stroke-width="${weight}">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25
               L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>`,
  width: 22,
  height: 22,
  rotatable: false, // plug stays upright regardless of line direction
});

// Image plug from URL
LinkerLine.definePlug({
  name: "logo",
  src: "https://example.com/icon.png",
  width: 20,
  height: 20,
  margin: 4,
  rotatable: true,
});

// Primitive shape plug
LinkerLine.definePlug({
  name: "dot",
  shape: "ellipse",
  width: 12,
  height: 12,
});

// Use the custom plugs
const line = new LinkerLine({
  start: document.getElementById("a"),
  end:   document.getElementById("b"),
  startPlug: "star",
  endPlug: "dot",
  color: "#73f5fa",
  size: 3,
});
```

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

### new LinkerLine(props)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Instantiates a connector line between two HTML elements. Accepts core LeaderLine options plus LinkerLine-specific additions like `parent`, `hidden`, and `minGridLength`.

```APIDOC
## new LinkerLine(props)

### Description
Instantiates a connector line between a `start` and an `end` HTML element. The SVG element is appended to `parent` (defaults to `end.parentNode` in v1.2.0+). If `parent` has `position: static`, the library automatically sets it to `position: relative` so the SVG is positioned correctly. The constructor accepts all original LeaderLine options plus the LinkerLine-specific additions listed below.

### Parameters
#### LinkerLine-specific options
- **parent** (HTMLElement) - The container element for the SVG.
- **hidden** (boolean) - Whether to render the line immediately (default: false).
- **minGridLength** (number) - Minimum segment length for "grid" path.

#### Core LeaderLine options
- **start** (HTMLElement) - The starting HTML element.
- **end** (HTMLElement) - The ending HTML element.
- **path** (string) - The path type: "arc" | "grid" | "fluid" | "magnet" | "straight".
- **color** (string) - The color of the line.
- **size** (number) - The thickness of the line.
- **startPlug** (string) - The shape of the start plug (e.g., "disc", "arrow2").
- **endPlug** (string) - The shape of the end plug (e.g., "disc", "arrow2").
- **startSocket** (string) - The attachment point on the start element ("auto" | "top" | "right" | "bottom" | "left").
- **endSocket** (string) - The attachment point on the end element ("auto" | "top" | "right" | "bottom" | "left").
- **dash** (object) - Dash style options (e.g., `{ length: 8, gap: 4, animation: {...} }`).
- **dropShadow** (object) - Drop shadow options (e.g., `{ dx: 2, dy: 4, blur: 3, color: "#000", opacity: 0.5 }`).
- **gradient** (object) - Gradient options (e.g., `{ startColor: "#4a90e2", endColor: "#e24a90" }`).
- **outline** (boolean) - Whether to draw an outline.
- **outlineColor** (string) - The color of the outline.
- **outlineSize** (number) - The thickness of the outline.

### Request Example
```javascript
import LinkerLine from "linkerline";

const start = document.getElementById("box-a");
const end   = document.getElementById("box-b");
const container = document.getElementById("canvas");

const line = new LinkerLine({
  // LinkerLine-specific options
  parent: container,
  hidden: false,
  minGridLength: 30,

  // Core LeaderLine options
  start,
  end,
  path: "fluid",
  color: "#4a90e2",
  size: 3,
  startPlug: "disc",
  endPlug: "arrow2",
  startSocket: "right",
  endSocket: "left",
  dash: { length: 8, gap: 4, animation: { duration: 700, easing: "linear" } },
  dropShadow: { dx: 2, dy: 4, blur: 3, color: "#000", opacity: 0.5 },
  gradient: { startColor: "#4a90e2", endColor: "#e24a90" },
  outline: true,
  outlineColor: "white",
  outlineSize: 0.3,
});

console.log(line.element);
console.log(line.id);
console.log(line.removed);
console.log(line.standalone);
```
```

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

### LinkerLine.definePlug(options)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Registers a custom plug (arrow head) shape that can be referenced by name in `startPlug` or `endPlug`. Supports SVG strings, image URLs, and primitive shapes.

```APIDOC
## `LinkerLine.definePlug(options)` — Register a custom plug (arrow head)

Registers a reusable custom plug shape that can then be referenced by name in `startPlug` / `endPlug`. Supports SVG strings, image URLs/base64, and primitive shapes (`rect` / `ellipse`).

### Parameters
#### Request Body
- **options** (object) - Required - An object defining the custom plug.
  - **name** (string) - Required - The name to reference this plug by.
  - **svg** (function|string) - Optional - SVG markup for the plug. If a function, it receives `color` and `weight` arguments.
  - **src** (string) - Optional - URL or base64 data for an image plug.
  - **shape** (string) - Optional - Primitive shape ('rect' or 'ellipse') for the plug.
  - **width** (number) - Required - The width of the plug.
  - **height** (number) - Required - The height of the plug.
  - **margin** (number) - Optional - Spacing between the line end and the plug.
  - **rotatable** (boolean) - Optional - Whether the plug should rotate with the line direction (defaults to true).

### Request Example (SVG Plug)
```javascript
// SVG plug — color/weight are injected to match the line style
LinkerLine.definePlug({
  name: "star",
  svg: (color, weight) => `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
         fill="${color}" stroke-width="${weight}">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25
               L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>`,
  width: 22,
  height: 22,
  rotatable: false, // plug stays upright regardless of line direction
});
```

### Request Example (Image Plug)
```javascript
// Image plug from URL
LinkerLine.definePlug({
  name: "logo",
  src: "https://example.com/icon.png",
  width: 20,
  height: 20,
  margin: 4,
  rotatable: true,
});
```

### Request Example (Primitive Shape Plug)
```javascript
// Primitive shape plug
LinkerLine.definePlug({
  name: "dot",
  shape: "ellipse",
  width: 12,
  height: 12,
});
```

### Usage
After defining a plug, you can use its `name` in the `startPlug` or `endPlug` options when creating a `LinkerLine` instance.

### Request Example (Using Custom Plugs)
```javascript
const line = new LinkerLine({
  start: document.getElementById("a"),
  end:   document.getElementById("b"),
  startPlug: "star",
  endPlug: "dot",
  color: "#73f5fa",
  size: 3,
});
```
```

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

### Anchor to a specific point with `LinkerLine.PointAnchor()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Create a point anchor to fix a line to an exact `(x, y)` offset within an element. This is an alternative to anchoring to the element's center.

```javascript
const anchor = LinkerLine.PointAnchor(document.getElementById("node"), {
  x: "100%", // right edge
  y: "50%",  // vertical centre
});

const line = new LinkerLine({
  start: document.getElementById("source"),
  end: anchor,
  color: "#2ecc71",
});
```

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

### LinkerLine.PointAnchor(element, options?)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Creates a point anchor that pins a line to a specific (x, y) offset within an element, rather than its center. Useful for precise anchoring.

```APIDOC
## `LinkerLine.PointAnchor(element, options?)` — Anchor to a specific point

Returns a point anchor that pins the line to an exact `(x, y)` offset within an element rather than to the element's centre.

### Parameters
#### Path Parameters
- **element** (HTMLElement) - Required - The DOM element to anchor to.
#### Request Body
- **options** (object) - Optional - Configuration for the point anchor.
  - **x** (string|number) - Optional - The horizontal offset within the element (e.g., '100%', 50). Defaults to '50%'.
  - **y** (string|number) - Optional - The vertical offset within the element (e.g., '0%', 20). Defaults to '50%'.

### Request Example
```javascript
const anchor = LinkerLine.PointAnchor(document.getElementById("node"), {
  x: "100%", // right edge
  y: "50%",  // vertical centre
});

const line = new LinkerLine({
  start: document.getElementById("source"),
  end: anchor,
  color: "#2ecc71",
});
```
```

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

### Dynamically Add Nodes to a Chain

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Use pushNode() to append or unshiftNode() to prepend a new HTML element to a LinkerLine.Chain at runtime. If the chain is currently linked, the new connection is animated in immediately.

```javascript
const newStep = document.createElement("div");
newStep.className = "step-node";
newStep.textContent = "Step 5";
document.getElementById("canvas").appendChild(newStep);

chain.pushNode(newStep);
// If chain.linked was true, the new hop animates in automatically
```

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

### Reposition all active lines with `LinkerLine.positionAll()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Call `LinkerLine.positionAll()` to refresh the positions of all active lines. This is useful after layout changes, such as expanding an accordion, and is automatically called on window resize.

```javascript
// After a layout change (e.g., accordion expand) force a refresh
document.getElementById("accordion").addEventListener("transitionend", () => {
  LinkerLine.positionAll();
});
```

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

### line.setOptions(options)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Updates any combination of line options and repositions the line immediately. This method allows for dynamic modification of line properties after initialization.

```APIDOC
## `line.setOptions(options)` — Update line options at runtime

Updates any combination of line options and repositions the line immediately. Equivalent to the original LeaderLine `setOptions`.

### Parameters
#### Request Body
- **options** (object) - Required - An object containing line properties to update. Supported properties include `color`, `size`, `path`, `endPlug`, `dash`, etc.

### Request Example
```javascript
line.setOptions({
  color: "#e74c3c",
  size: 5,
  path: "grid",
  endPlug: "arrow3",
  dash: false,
});
```
```

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

### LinkerLine.MouseHoverAnchor(element, options?)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Creates an anchor that shows the line when the user hovers over a specified element and hides it when the hover ends. Supports effects and callbacks.

```APIDOC
## `LinkerLine.MouseHoverAnchor(element, options?)` — Show line on hover

Returns an anchor that automatically shows the line when the user hovers over the element and hides it when they leave.

### Parameters
#### Path Parameters
- **element** (HTMLElement) - Required - The DOM element to trigger the hover effect.
#### Request Body
- **options** (object) - Optional - Configuration for the mouse hover anchor.
  - **showEffectName** (string) - Optional - The name of the effect to use when showing the line (e.g., 'draw').
  - **animation** (object) - Optional - Animation properties for showing/hiding the line (e.g., `{ duration: 500, easing: "ease" }`).
  - **style** (object) - Optional - CSS styles to apply to the element when the line is hidden.
  - **hoverStyle** (object) - Optional - CSS styles to apply to the element when the line is visible on hover.
  - **onToggle** (function) - Optional - A callback function executed when the line's visibility toggles. Receives an event object.

### Request Example
```javascript
const hoverAnchor = LinkerLine.MouseHoverAnchor(document.getElementById("hotspot"), {
  showEffectName: "draw",
  animation: { duration: 500, easing: "ease" },
  style: { backgroundColor: "#ecf0f1" },
  hoverStyle: { backgroundColor: "#3498db", cursor: "pointer" },
  onToggle(event) {
    console.log("Line toggled by", event.type);
  },
});

const line = new LinkerLine({
  start: hoverAnchor,
  end: document.getElementById("destination"),
  color: "#9b59b6",
  path: "arc",
});
```
```

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

### Show line on hover with `LinkerLine.MouseHoverAnchor()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Create an anchor that automatically shows the line when hovering over an element and hides it when the hover ends. Supports custom effects, animations, and callbacks.

```javascript
const hoverAnchor = LinkerLine.MouseHoverAnchor(document.getElementById("hotspot"), {
  showEffectName: "draw",
  animation: { duration: 500, easing: "ease" },
  style: { backgroundColor: "#ecf0f1" },
  hoverStyle: { backgroundColor: "#3498db", cursor: "pointer" },
  onToggle(event) {
    console.log("Line toggled by", event.type);
  },
});

const line = new LinkerLine({
  start: hoverAnchor,
  end: document.getElementById("destination"),
  color: "#9b59b6",
  path: "arc",
});
```

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

### line.show(effectName?, animation?)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Reveals a hidden line with an optional animation effect. Automatically calls `position()` after showing to ensure correct placement.

```APIDOC
## line.show(effectName?, animation?)

### Description
Reveals the line with an optional animation effect. After showing, `position()` is called automatically to ensure correct placement.

### Parameters
#### effectName (string, optional)
- The name of the animation effect (e.g., "fade", "draw", "none").

#### animation (object, optional)
- Animation options, such as `duration` and `easing`.

### Method
`show(effectName?, animation?)

### Endpoint
N/A (Instance method)

### Request Example
```javascript
// Fade in over 400 ms
line.show("fade", { duration: 400, easing: "ease-in-out" });

// Draw animation (traces the path)
line.show("draw", { duration: 800, easing: "ease" });

// Instant reveal
line.show("none");
```
```

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

### LinkerLine.AreaAnchor(element, options?)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Creates an area anchor that draws a visible boundary around an element and connects the line to it. Supports rectangular and circular shapes.

```APIDOC
## `LinkerLine.AreaAnchor(element, options?)` — Anchor to a shaped area

Returns an area anchor that draws a visible boundary shape around an element and connects the line to it.

### Parameters
#### Path Parameters
- **element** (HTMLElement) - Required - The DOM element to anchor to.
#### Request Body
- **options** (object) - Required - Configuration for the area anchor.
  - **shape** (string) - Required - The shape of the area ('rect' or 'circle').
  - **width** (string|number) - Optional - The width of the bounding area (e.g., '120%').
  - **height** (string|number) - Optional - The height of the bounding area (e.g., '120%').
  - **radius** (number) - Optional - The radius for circular shapes.
  - **color** (string) - Optional - The color of the boundary line.
  - **dash** (object) - Optional - Defines a dashed line style for the boundary (e.g., `{ length: 4, gap: 4 }`).
  - **fillColor** (string) - Optional - The fill color for circular area anchors.

### Request Example (Rectangular Area Anchor)
```javascript
// Rectangular area anchor
const rectAnchor = LinkerLine.AreaAnchor(document.getElementById("target"), {
  shape: "rect",
  width: "120%",
  height: "120%",
  color: "#e74c3c",
  dash: { length: 4, gap: 4 },
});
```

### Request Example (Circular Area Anchor)
```javascript
// Circular area anchor
const circleAnchor = LinkerLine.AreaAnchor(document.getElementById("target2"), {
  shape: "circle",
  radius: 40,
  fillColor: "rgba(52,152,219,0.15)",
});
```

### Request Example (Using Area Anchor)
```javascript
const line = new LinkerLine({
  start: document.getElementById("source"),
  end: rectAnchor,
  color: "#e74c3c",
});
```
```

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

### chain.pushNode / chain.unshiftNode

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Dynamically adds a new HTML element to a chain, either at the end or the beginning. If the chain is active, the new connection is animated.

```APIDOC
## `chain.pushNode(node)` / `chain.unshiftNode(node)` — Add nodes dynamically

Appends (`pushNode`) or prepends (`unshiftNode`) a new HTML element to a chain at runtime. If the chain is currently linked (or partially linked), the new connection is animated in immediately.

### Parameters

- **node** (HTMLElement) - The HTML element to add to the chain.

### Request Example

```js
const newStep = document.createElement("div");
newStep.className = "step-node";
newStep.textContent = "Step 5";
document.getElementById("canvas").appendChild(newStep);

chain.pushNode(newStep);
// If chain.linked was true, the new hop animates in automatically
```
```

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

### LinkerLine.Label

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Creates a text label and attaches it to a line. The label can follow the path curvature or be positioned relative to an endpoint element.

```APIDOC
## `LinkerLine.Label(text, options?)` — Attach a text label to a line

Creates a text label and attaches it to a line via the `startLabel`, `middleLabel`, or `endLabel` option. The `on` option selects whether the label follows the path curvature (`"path"`) or is positioned relative to the endpoint element (`"element"`).

### Parameters

- **text** (string) - The text content of the label.
- **options** (object, optional) - Configuration options for the label.
  - **on** (string) - Determines label positioning: `"path"` or `"element"`.
  - **color** (string) - The color of the label text.
  - **outlineColor** (string) - The color of the label outline.
  - **offset** (number) - Pixels away from the path the label should be positioned (when `on: "path"`).
  - **lineOffset** (number) - Pixels away from the line the label should be positioned (when `on: "element"`).

### Request Example

```js
const pathLabel = LinkerLine.Label("data flow", {
  on: "path",          // label curves along the line
  color: "#2c3e50",
  outlineColor: "white",
  offset: 6,           // pixels away from the path
});

const captionLabel = LinkerLine.Label("source", {
  on: "element",
  color: "#7f8c8d",
  lineOffset: 5,
});
```
```

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

### Define Custom Plug with SVG

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Defines a custom plug named 'star' using an SVG path. The plug has a fixed width and height, and is not rotatable. The SVG definition uses color and weight parameters to match the line's style.

```javascript
LinkerLine.definePlug({
        name:"star",
	    svg:(color,weight)=>`
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="${color}" stroke-width="${weight}" stroke-linecap="round" stroke-linejoin="round">
                <path d="M8.243 7.34l-6.38 .925l-.113 .023a1 1 0 0 0 -.44 1.684l4.622 4.499l-1.09 6.355l-.013 .11a1 1 0 0 0 1.464 .944l5.706 -3l5.693 3l.1 .046a1 1 0 0 0 1.352 -1.1l-1.091 -6.355l4.624 -4.5l.078 -.085a1 1 0 0 0 -.633 -1.62l-6.38 -.926l-2.852 -5.78a1 1 0 0 0 -1.794 0l-2.853 5.78z"/>
            </svg>
        `,
        width:20,
        height:20,
        rotatable:false,
    });
```

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

### LinkerLine.Chain

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Animates sequential node connections, creating a chain of connector lines across an ordered array of HTML elements. Lines are drawn or erased one hop at a time.

```APIDOC
## `new LinkerLine.Chain(nodes, options?)` — Animate sequential node connections

`LinkerLineChain` (exposed as `LinkerLine.Chain`) creates an animated chain of connector lines across an ordered array of HTML elements. Lines are drawn or erased one hop at a time using `link()` / `unlink()`. Each node gets `inLine` and `outLine` properties for direct access to its adjacent lines.

### Parameters

- **nodes** (HTMLElement[]) - An ordered array of HTML elements to connect.
- **options** (object, optional) - Configuration options for the chain.
  - **linkingDuration** (number) - Duration in milliseconds for each hop animation.
  - **linked** (boolean) - Initial state of the chain (true if all hops are visible).
  - **lineOptions** (object) - Options to apply to each line in the chain.
    - **path** (string) - Type of path, e.g., `"fluid"`.
    - **color** (string) - Color of the lines.
    - **size** (number) - Thickness of the lines.
    - **endPlug** (string) - Style of the end plug, e.g., `"arrow2"`.
  - **onLinkChange** (function) - Callback function executed when a link changes.
    - **line** (LinkerLine) - The line that changed.
    - **startNode** (HTMLElement) - The starting node of the hop.
    - **endNode** (HTMLElement) - The ending node of the hop.
    - **nodesLinked** (boolean) - True if the nodes are now linked.
    - **hopIndex** (number) - The index of the hop that changed.

### Methods

- **`link()`**: Connects the nodes in the chain.
- **`unlink()`**: Disconnects the nodes in the chain.

### Properties

- **`nodes`** (HTMLElement[]) - The array of nodes in the chain.
- **`lines`** (LinkerLine[]) - The array of lines in the chain.
- **`linked`** (boolean) - True when all hops are visible.
- **`partiallyLinked`** (boolean) - True when at least one hop is visible.

### Static Methods

- **`LinkerLine.getLineChain(line)`**: Retrieves the `LinkerLineChain` instance to which a given line belongs.

### Request Example

```js
const nodes = Array.from(document.querySelectorAll(".step-node"));

const chain = new LinkerLine.Chain(nodes, {
  linkingDuration: 600,   // ms per hop animation
  linked: false,          // start unlinked
  lineOptions: {
    path: "fluid",
    color: "#3498db",
    size: 3,
    endPlug: "arrow2",
  },
  onLinkChange({ line, startNode, endNode, nodesLinked, hopIndex }) {
    const highlight = nodesLinked ? line.color : null;
    startNode.style.borderColor = highlight;
    endNode.style.borderColor   = highlight;
    console.log(`Hop ${hopIndex}: ${nodesLinked ? "linked" : "unlinked"}`);
  },
});

document.getElementById("link-btn").onclick   = () => chain.link();
document.getElementById("unlink-btn").onclick = () => chain.unlink();

// Inspect state
console.log(chain.nodes);          // HTMLElement[]
console.log(chain.lines);          // LinkerLine[]
console.log(chain.linked);         // true when all hops visible
console.log(chain.partiallyLinked); // true when ≥1 hop visible

// Dynamic node management
chain.pushNode(document.getElementById("new-last-step"));
chain.unshiftNode(document.getElementById("new-first-step"));

// Retrieve the chain a line belongs to
const ownerChain = LinkerLine.getLineChain(chain.lines[0]); // LinkerLineChain instance
```
```

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

### Remove all standalone lines with `LinkerLine.removeAll()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Use `LinkerLine.removeAll()` for cleanup, especially when navigating away from a view. This static method removes all lines that are not part of a `LinkerLineChain` instance.

```javascript
window.addEventListener("beforeunload", () => {
  LinkerLine.removeAll();
});
```

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

### LinkerLine.Chain Methods

Source: https://github.com/ahmedayachi/linkerline/blob/master/ReadMe.md

Methods available for managing a LinkerLine chain, such as linking, unlinking, and adding nodes.

```APIDOC
## LinkerLine.Chain

### Description
Represents a chain of linked HTML elements.

### Properties
- **nodes** (HTMLElement[]): Gets the chain target nodes.
- **lines** (LinkerLine[]): Gets the chain lines.
- **linked** (boolean): True if all nodes are fully linked, false otherwise.
- **partiallyLinked** (boolean): True if at least one line is visible, false otherwise.

### Methods
- **link() : void**: Links the chain nodes.
- **unlink() : void**: Unlinks the chain nodes.
- **pushNode(node:HTMLElement) : void**: Appends a new node to the end of the chain.
- **unshiftNode(node:HTMLElement) : void**: Adds a new node at the start of the chain.
```

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

### Animate Sequential Node Connections with LinkerLine.Chain

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

LinkerLine.Chain animates sequential connections between an ordered array of HTML elements. Use link() and unlink() to draw or erase lines one hop at a time. The onLinkChange callback provides details about the connection status.

```javascript
const nodes = Array.from(document.querySelectorAll(".step-node"));

const chain = new LinkerLine.Chain(nodes, {
  linkingDuration: 600,   // ms per hop animation
  linked: false,          // start unlinked
  lineOptions: {
    path: "fluid",
    color: "#3498db",
    size: 3,
    endPlug: "arrow2",
  },
  onLinkChange({ line, startNode, endNode, nodesLinked, hopIndex }) {
    const highlight = nodesLinked ? line.color : null;
    startNode.style.borderColor = highlight;
    endNode.style.borderColor   = highlight;
    console.log(`Hop ${hopIndex}: ${nodesLinked ? "linked" : "unlinked"}`);
  },
});

document.getElementById("link-btn").onclick   = () => chain.link();
document.getElementById("unlink-btn").onclick = () => chain.unlink();

// Inspect state
console.log(chain.nodes);          // HTMLElement[]
console.log(chain.lines);          // LinkerLine[]
console.log(chain.linked);         // true when all hops visible
console.log(chain.partiallyLinked); // true when ≥1 hop visible

// Dynamic node management
chain.pushNode(document.getElementById("new-last-step"));
chain.unshiftNode(document.getElementById("new-first-step"));

// Retrieve the chain a line belongs to
const ownerChain = LinkerLine.getLineChain(chain.lines[0]); // LinkerLineChain instance
```

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

### LinkerLine.removeAll()

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

A static method that removes all standalone lines (those not part of a `LinkerLineChain` instance). This is useful for cleanup when navigating away from a view.

```APIDOC
## `LinkerLine.removeAll()` — Remove all standalone lines

Static method that removes all lines that are not part of a `LinkerLineChain` instance. Useful for teardown when navigating away from a view.

### Usage
Typically called before the page unloads to prevent memory leaks.

### Request Example
```javascript
window.addEventListener("beforeunload", () => {
  LinkerLine.removeAll();
});
```
```

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

### Anchor to a shaped area with `LinkerLine.AreaAnchor()`

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Use `AreaAnchor` to define a visible boundary around an element and connect the line to it. Supports rectangular and circular shapes with customizable styles.

```javascript
// Rectangular area anchor
const rectAnchor = LinkerLine.AreaAnchor(document.getElementById("target"), {
  shape: "rect",
  width: "120%",
  height: "120%",
  color: "#e74c3c",
  dash: { length: 4, gap: 4 },
});

// Circular area anchor
const circleAnchor = LinkerLine.AreaAnchor(document.getElementById("target2"), {
  shape: "circle",
  radius: 40,
  fillColor: "rgba(52,152,219,0.15)",
});

const line = new LinkerLine({
  start: document.getElementById("source"),
  end: rectAnchor,
  color: "#e74c3c",
});
```

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

### line.position()

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Recomputes and redraws the line's position, accounting for parent element scroll offsets and bounding rectangles. Useful after programmatically moving connected elements.

```APIDOC
## line.position()

### Description
Recalculates the line's SVG transform taking the parent element's scroll offset and bounding rect into account. Call this after programmatically moving either connected element. `LinkerLine.positionAll()` calls this for every tracked line automatically on `window resize`.

### Method
`position()`

### Endpoint
N/A (Instance method)

### Request Example
```javascript
const draggable = document.getElementById("draggable-card");
draggable.addEventListener("pointermove", () => {
  line.position(); // keep line aligned while dragging
});
```
```

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

### line.hide(effectName?, animation?)

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Hides the line with an optional animation effect. Sets an internal `hidden` flag, preventing `position()` from executing while hidden.

```APIDOC
## line.hide(effectName?, animation?)

### Description
Hides the line with an optional animation effect. Sets the internal `hidden` flag so `position()` is a no-op while hidden.

### Parameters
#### effectName (string, optional)
- The name of the animation effect (e.g., "fade").

#### animation (object, optional)
- Animation options, such as `duration` and `easing`.

### Method
`hide(effectName?, animation?)

### Endpoint
N/A (Instance method)

### Request Example
```javascript
line.hide("fade", { duration: 300, easing: "ease-out" });

console.log(line.hidden); // true
```
```

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

### Show a hidden line with animation

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Reveals a hidden line with an optional animation effect. After showing, `position()` is called automatically to ensure correct placement. Supports 'fade', 'draw', and 'none' effects.

```javascript
// Fade in over 400 ms
line.show("fade", { duration: 400, easing: "ease-in-out" });

// Draw animation (traces the path)
line.show("draw", { duration: 800, easing: "ease" });

// Instant reveal
line.show("none");
```

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

### Recompute and redraw line position

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Recalculates the line's SVG transform, accounting for parent element scroll offsets and bounding rects. Call this after programmatically moving connected elements or when the window resizes.

```javascript
const draggable = document.getElementById("draggable-card");
draggable.addEventListener("pointermove", () => {
  line.position(); // keep line aligned while dragging
});
```

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

### Hide a line with animation

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Hides the line with an optional animation effect. Sets the internal `hidden` flag, preventing `position()` from executing while hidden.

```javascript
line.hide("fade", { duration: 300, easing: "ease-out" });

console.log(line.hidden); // true
```

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

### line.remove()

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Removes the line's SVG element from the DOM and unregisters it from the internal line map. Sets `line.removed` to `true`.

```APIDOC
## line.remove()

### Description
Removes the line's SVG element from the DOM and unregisters it from the internal line map. After calling this, `line.removed` returns `true` and the line is excluded from `positionAll()` / `removeAll()`.

### Method
`remove()`

### Endpoint
N/A (Instance method)

### Request Example
```javascript
line.remove();
console.log(line.removed); // true
```
```

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

### Remove a line from the DOM

Source: https://context7.com/ahmedayachi/linkerline/llms.txt

Removes the line's SVG element from the DOM and unregisters it from the internal line map. After removal, `line.removed` returns `true` and the line is excluded from automatic updates.

```javascript
line.remove();
console.log(line.removed); // true
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.