### Basic Canvas Setup with Nodes and Edges

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/canvas/selection.md

This example demonstrates the basic setup of a canvas with predefined nodes and edges. It configures the canvas to be non-pannable and non-zoomable, primarily for showcasing selection interactions.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 200, y: 0 }, data: { label: 'Node B' } },
        { id: 'c', position: { x: 400, y: 0 }, data: { label: 'Node C' } },
        { id: 'd', position: { x: 200, y: 100 }, data: { label: 'Node D' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { id: 'e2', source: 'b', target: 'c' },
        { id: 'e3', source: 'b', target: 'd' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Full Canvas Example with Default Handles

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/handles/positions.md

A complete example of an Alpine.js flow canvas setup demonstrating nodes with default source and target handles. This serves as a foundational example for integrating flow diagrams.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Node B' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Full Directive Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/animation/timeline.md

An example demonstrating the full usage of the `x-flow-timeline` directive with various configuration options and playback controls.

```APIDOC
## Full Directive Example

```html
<div x-data="{
    timeline: {
        autoplay: false,
        loop: 2,
        lock: true,
        speed: 1,
        respectReducedMotion: true,
        steps: [
            { nodes: ['intro'], style: { opacity: '1' }, duration: 600 },
            { parallel: [
                { nodes: ['left'], position: { x: -200, y: 0 }, duration: 500 },
                { nodes: ['right'], position: { x: 200, y: 0 }, duration: 500 },
            ]},
            {
                addEdges: [{ id: 'connect', source: 'left', target: 'right' }],
                edgeTransition: 'draw',
                duration: 800,
            },
            { viewport: { zoom: 1, x: 0, y: 0 }, duration: 600 },
        ],
    },
}">
    <div x-flow-timeline="timeline" x-ref="tl"></div>
    <button @click="$refs.tl.__timeline.play()">Play Demo</button>
</div>
```
```

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

### Basic Canvas with Interactive Nodes

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/canvas/keyboard-shortcuts.md

Demonstrates a basic flow canvas setup with nodes that can be interacted with using keyboard shortcuts like arrow keys for movement and delete for removal. This example initializes the canvas with predefined nodes and edges.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Select me' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Arrow keys' } },
        { id: 'c', position: { x: 125, y: 100 }, data: { label: 'Delete me' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'c' },
        { id: 'e2', source: 'b', target: 'c' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Install AlpineFlow and Alpine.js

Source: https://github.com/getartisanflow/alpineflow/blob/main/README.md

Install the necessary packages using npm. Ensure both Alpine.js and AlpineFlow are included in your project dependencies.

```bash
npm install @getartisanflow/alpineflow alpinejs
```

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

### Minimal Flow Setup

Source: https://github.com/getartisanflow/alpineflow/blob/main/boost/skills/alpineflow-development/SKILL.md

Use this for basic flow diagrams with nodes and edges. Ensure the container has a defined height.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Start' } },
        { id: 'b', position: { x: 250, y: 100 }, data: { label: 'End' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
})" class="flow-container" style="height: 400px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Install Optional Real-time Collaboration Addon

Source: https://github.com/getartisanflow/alpineflow/blob/main/README.md

Install the necessary packages for real-time collaboration features. This includes yjs, y-websocket, and y-protocols.

```bash
# Real-time collaboration
npm install yjs y-websocket y-protocols
import AlpineFlowCollab from '@getartisanflow/alpineflow/collab';
```

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

### Basic Flow Canvas Setup

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/configuration/connections.md

Sets up a basic flow canvas with nodes and configures connection snapping and cycle prevention.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Target A' } },
        { id: 'c', position: { x: 250, y: 100 }, data: { label: 'Target B' } },
    ],
    edges: [],
    connectionSnapRadius: 40,
    preventCycles: true,
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Canvas Setup with Selection on Drag Enabled

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/canvas/selection.md

This example configures the canvas to enable selection on drag, allowing users to draw a selection box to select multiple nodes. It also includes pan-on-drag functionality for a smoother user experience.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 200, y: 0 }, data: { label: 'Node B' } },
        { id: 'c', position: { x: 400, y: 0 }, data: { label: 'Node C' } },
        { id: 'd', position: { x: 200, y: 100 }, data: { label: 'Node D' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { id: 'e2', source: 'b', target: 'c' },
        { id: 'e3', source: 'b', target: 'd' },
    ],
    selectionOnDrag: true,
    panOnDrag: [2],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Install Collaboration Addon Dependencies

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/addons/collab.md

Install the necessary peer dependencies for the Collaboration addon using npm.

```bash
npm install yjs y-websocket y-protocols
```

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

### Basic Flow Canvas with Touch Interactions

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/interaction/touch.md

This example demonstrates a basic flow canvas setup with nodes and edges, designed to work with touch interactions like dragging, zooming, and connecting handles.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Drag me' } },
        { id: 'b', position: { x: 200, y: 0 }, data: { label: 'Connect me' } },
        { id: 'c', position: { x: 100, y: 100 }, data: { label: 'Touch me' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'c' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: true,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Basic Node and Edge Toolbar Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/interaction/toolbars.md

Demonstrates the integration of node and edge toolbars within a basic AlpineFlow canvas setup. Node toolbars appear when a node is selected, and edge toolbars appear when an edge is selected. Requires explicit edge rendering for edge toolbars.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 80 }, data: { label: 'Select me' } },
        { id: 'b', position: { x: 300, y: 80 }, data: { label: 'Or me' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
                <div x-flow-node-toolbar:top x-show="node.selected" class="flex gap-1">
                    <button class="rounded px-2 py-1 text-xs font-mono bg-elevated border border-border-subtle text-text-muted hover:text-text-body cursor-pointer" @click="removeNodes([node.id])">Delete</button>
                </div>
            </div>
        </template>
        <template x-for="edge in edges" :key="edge.id">
            <g x-flow-edge="edge">
                <div x-flow-edge-toolbar x-show="edge.selected" class="flex gap-1">
                    <button class="rounded px-2 py-1 text-xs font-mono bg-elevated border border-border-subtle text-text-muted hover:text-text-body cursor-pointer" @click="removeEdges([edge.id])">Delete Edge</button>
                </div>
            </g>
        </template>
    </div>
</div>
```

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

### Edge Routing Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/compute/overview.md

An example of an edge configuration that routes the 'value' output from a source node to the 'a' input of a target node.

```javascript
{ source: 'num1', sourceHandle: 'value', target: 'adder', targetHandle: 'a' }
```

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

### Basic Resizable Node Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/nodes/resize.md

Demonstrates adding a resizable node with default handles. The 'fixed' node is explicitly set to non-resizable.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Resize me' } },
        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'Fixed' }, resizable: false },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-resizer></div>
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Full Timeline Directive Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/animation/timeline.md

A comprehensive example of the `x-flow-timeline` directive, including configuration options like autoplay, loop, speed, and defining complex animation steps.

```html
<div x-data="{
    timeline: {
        autoplay: false,
        loop: 2,
        lock: true,
        speed: 1,
        respectReducedMotion: true,
        steps: [
            { nodes: ['intro'], style: { opacity: '1' }, duration: 600 },
            { parallel: [
                { nodes: ['left'], position: { x: -200, y: 0 }, duration: 500 },
                { nodes: ['right'], position: { x: 200, y: 0 }, duration: 500 },
            ]},
            {
                addEdges: [{ id: 'connect', source: 'left', target: 'right' }],
                edgeTransition: 'draw',
                duration: 800,
            },
            { viewport: { zoom: 1, x: 0, y: 0 }, duration: 600 },
        ],
    },
}">
    <div x-flow-timeline="timeline" x-ref="tl"></div>
    <button @click="$refs.tl.__timeline.play()">Play Demo</button>
</div>
```

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

### Install AlpineFlow Whiteboard Addon

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/addons/whiteboard.md

Import and register the AlpineFlow Whiteboard addon. No additional peer dependencies are required.

```javascript
import AlpineFlowWhiteboard from '@getartisanflow/alpineflow/whiteboard'

Alpine.plugin(AlpineFlowWhiteboard)
```

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

### Install Optional Layout Engines

Source: https://github.com/getartisanflow/alpineflow/blob/main/README.md

Install specific layout engines if needed for advanced graph organization. Choose from Dagre, ELK, or d3-force based on your requirements.

```bash
# Layout engines (install only what you need)
npm install @dagrejs/dagre    # for @getartisanflow/alpineflow/dagre
npm install elkjs             # for @getartisanflow/alpineflow/elk
npm install d3-force          # for @getartisanflow/alpineflow/force
```

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

### viewport-move-start

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/api/events.md

Fired when a user gesture (pan/zoom) starts. Config callback: `onViewportMoveStart`.

```APIDOC
## viewport-move-start

### Description
Fired when a user gesture (pan/zoom) starts.

### Payload
```ts
{ viewport: Viewport }
```

### Config Callback
`onViewportMoveStart`
```

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

### Edge Toolbar Example - AlpineFlow

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/interaction/toolbars.md

This example demonstrates how to display a toolbar when an edge is selected. The toolbar contains a button to delete the selected edge.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 350, y: 100 }, data: { label: 'Target' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
        <template x-for="edge in edges" :key="edge.id">
            <g x-flow-edge="edge">
                <div x-flow-edge-toolbar x-show="edge.selected" class="flex gap-1">
                    <button class="rounded px-2 py-1 text-xs font-mono bg-elevated border border-border-subtle text-text-muted hover:text-text-body cursor-pointer" @click="removeEdges([edge.id])">Delete Edge</button>
                </div>
            </g>
        </template>
    </div>
</div>
```

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

### Mixed Panel Behaviors Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/canvas/panels.md

This example showcases two panels with different behaviors: a static legend panel (top-left) and a draggable but non-resizable info panel (bottom-right).

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 100, y: 30 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 300, y: 30 }, data: { label: 'Node B' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-panel:top-left.static style="padding: 8px 12px; font-size: 11px;">
        <div style="font-weight: 600;">Legend</div>
        <div style="opacity: 0.6;">Static — can't move</div>
    </div>
    <div x-flow-panel:bottom-right.no-resize style="padding: 8px 12px; font-size: 11px;">
        <div style="font-weight: 600;">Info</div>
        <div style="opacity: 0.6;">Drag me — no resize</div>
    </div>
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Demo Flow Canvas Setup

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/compute/overview.md

Sets up a flow canvas with number and adder nodes, registering compute functions for each and an event listener to trigger computation.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'num1', type: 'number', position: { x: 0, y: 0 }, data: { label: 'Number', value: 3 } },
        { id: 'num2', type: 'number', position: { x: 0, y: 100 }, data: { label: 'Number', value: 7 } },
        { id: 'add', type: 'adder', position: { x: 300, y: 50 }, data: { label: 'Add' } },
    ],
    edges: [
        { id: 'e1', source: 'num1', sourceHandle: 'value', target: 'add', targetHandle: 'a' },
        { id: 'e2', source: 'num2', sourceHandle: 'value', target: 'add', targetHandle: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;"
   x-init="
       registerCompute('number', { compute: (inputs, data) => ({ value: data.value ?? 0 }) });
       registerCompute('adder', { compute: (inputs) => ({ sum: (inputs.a ?? 0) + (inputs.b ?? 0) }) });
       document.getElementById('demo-compute-run').addEventListener('click', () => compute());
   ">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node" style="min-width: 120px;">
                <div x-flow-handle:target.left="'a'" x-show="node.type === 'adder'" style="top: 30%;"></div>
                <div x-flow-handle:target.left="'b'" x-show="node.type === 'adder'" style="top: 70%;"></div>
                <div style="font-weight: 600; font-size: 13px;" x-text="node.data.label"></div>
                <div style="font-size: 12px; font-family: monospace; opacity: 0.7;"
                     x-text="node.data.$outputs ? Object.values(node.data.$outputs).join(', ') : node.data.value ?? ''"></div>
                <div x-flow-handle:source.right="'value'" x-show="node.type === 'number'"></div>
                <div x-flow-handle:source.right="'sum'" x-show="node.type === 'adder'"></div>
            </div>
        </template>
    </div>
</div>
```

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

### Straight Connection Line Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/connections/drag-connect.md

Uses the 'straight' connection line type, which is the default. Suitable for simple, direct connections.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Drag from me' } },
        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'To me' } },
    ],
    edges: [],
    connectionLineType: 'straight',
    defaultEdgeOptions: { type: 'straight' },
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Enable Easy Connect with Alt/Option Key

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/connections/easy-connect.md

This example demonstrates how to enable easy connect functionality and set 'alt' as the modifier key for initiating connections from a node's body.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Alt + drag me' } },
        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'Drop here' } },
    ],
    edges: [],
    easyConnect: true,
    easyConnectKey: 'alt',
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Edge Labels: Center, Start, and End Positions

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/edges/labels.md

Demonstrates how to define labels at the center, start, and end of an edge. This setup uses HTML divs for labels, supporting rich styling.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 330, y: 120 }, data: { label: 'Target' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b', label: 'center', labelStart: 'start', labelEnd: 'end' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Full Canvas Example with Left-to-Right Handles

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/handles/positions.md

A complete example of an Alpine.js flow canvas setup, featuring nodes with source handles on the right and target handles on the left. This configuration is ideal for visualizing left-to-right data flows.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'Target' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target.left></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source.right></div>
            </div>
        </template>
    </div>
</div>
```

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

### Disable Starting Connections in a Flow Canvas

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/handles/connectable.md

This example illustrates disabling the 'start' connection capability for a specific handle within a flow canvas. The 'no-start' node's source handle cannot initiate connections, but the 'normal' node's handles function as usual.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'no-start', position: { x: 0, y: 0 }, data: { label: 'No Start' } },
        { id: 'normal', position: { x: 300, y: 0 }, data: { label: 'Normal' } },
    ],
    edges: [],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <template x-if="node.id === 'no-start'">
                <div x-flow-node="node">
                    <div x-flow-handle:target></div>
                    <span x-text="node.data.label"></span>
                    <div x-flow-handle:source x-flow-handle-connectable.start="false"></div>
                </div>
            </template>
        </template>
        <template x-for="node in nodes" :key="'n-' + node.id">
            <template x-if="node.id === 'normal'">
                <div x-flow-node="node">
                    <div x-flow-handle:target></div>
                    <span x-text="node.data.label"></span>
                    <div x-flow-handle:source></div>
                </div>
            </template>
        </template>
    </div>
</div>
```

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

### Demo: Animate Node and Follow

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/animation/camera-follow.md

This example demonstrates animating a node and having the camera follow its movement. It includes buttons to play the animation and reset the view. The camera follows the animation handle with a zoom level of 2.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'mover', position: { x: 0, y: 0 }, data: { label: 'Follow me' } },
        { id: 'waypoint', position: { x: 500, y: 250 }, data: { label: 'Waypoint' }, draggable: false },
    ],
    edges: [],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
})" class="flow-container" style="height: 250px;"
   x-init="
       let anim = null;
       let followHandle = null;
       document.getElementById('demo-follow-node').addEventListener('click', () => {
           if (anim) anim.stop();
           if (followHandle) followHandle.stop();
           $flow.update({ nodes: { mover: { position: { x: 0, y: 0 } } } });
           anim = $flow.animate({
               nodes: { mover: { position: { x: 500, y: 250 } } },
           }, { duration: 3000, easing: 'easeInOut' });
           followHandle = $flow.follow(anim, { zoom: 2 });
       });
       document.getElementById('demo-follow-node-reset').addEventListener('click', () => {
           if (anim) { anim.stop(); anim = null; }
           if (followHandle) { followHandle.stop(); followHandle = null; }
           $flow.update({ nodes: { mover: { position: { x: 0, y: 0 } } } });
           $flow.fitView({ duration: 300 });
       });
   ">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Edge Configuration with Labels and Visibility

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/edges/labels.md

An example JavaScript object defining an edge with custom labels for center, start, and end positions, along with 'hover' visibility.

```javascript
{
  id: 'e1',
  source: 'a',
  target: 'b',
  label: 'main',
  labelStart: '1',
  labelEnd: '*',
  labelVisibility: 'hover',
}
```

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

### Demo: Multi-Layer Background with Nodes

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/canvas/background.md

This example demonstrates a canvas with a node and a multi-layer background, combining a dot grid with a coarser line grid. It also shows how to configure canvas behavior like `fitViewOnInit`, `controls`, `pannable`, and `zoomable`.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 80, y: 60 }, data: { label: 'Node' } },
    ],
    edges: [],
    background: [
        { type: 'dots', gap: 20 },
        { type: 'lines', gap: 80, color: 'rgba(218, 165, 50, 0.3)' },
    ],
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Initialize Alpine.js with AlpineFlow Plugin

Source: https://github.com/getartisanflow/alpineflow/blob/main/README.md

Import Alpine.js and the AlpineFlow plugin, then register the plugin with Alpine.js before starting the application. This setup is required for using AlpineFlow directives.

```javascript
import Alpine from 'alpinejs';
import AlpineFlow from '@getartisanflow/alpineflow';

Alpine.plugin(AlpineFlow);
Alpine.start();
```

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

### Enable Edge Reconnection Globally

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/connections/drag-connect.md

Use the `edgesReconnectable` option to globally enable or disable edge reconnection. This example demonstrates a basic flow setup with reconnection enabled.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Node B' } },
        { id: 'c', position: { x: 500, y: 0 }, data: { label: 'Node C' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    edgesReconnectable: true,
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Demo: Loading Overlay with Button Trigger

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/canvas/loading.md

This example demonstrates how to use the x-flow-loading directive with a button to manually trigger a loading state for a specified duration.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Node B' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 220px;"
   x-init="
       document.getElementById('demo-loading-trigger').addEventListener('click', () => {
           setLoading(true);
           setTimeout(() => setLoading(false), 2000);
       });
   ">
    <div x-flow-loading.fade></div>
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Complete Editable Edge Example

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/edges/editable.md

This example demonstrates a complete setup for an editable edge within an AlpineFlow canvas. It includes node and edge definitions, with the edge specified as 'editable' and configured with control points and path style. Users can interact with this edge by double-clicking to add waypoints, dragging them to reshape the path, and double-clicking waypoints to remove them.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 50, y: 100 }, data: { label: 'Start' } },
        { id: 'b', position: { x: 500, y: 100 }, data: { label: 'End' } },
    ],
    edges: [{
        id: 'e1',
        source: 'a',
        target: 'b',
        type: 'editable',
        controlPoints: [{ x: 275, y: 200 }],
        pathStyle: 'catmull-rom',
        showControlPoints: true,
    }])"
    class="flow-container" style="height: 400px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target.left></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source.right></div>
            </div>
        </template>
    </div>
</div>
```

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

### Handle Arrow Drawing Completion

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/addons/whiteboard.md

Use the `@flow-arrow-draw` event to capture arrow drawing data and create annotation nodes. This example extracts start and end points, `strokeColor`, `strokeWidth`, and `opacity`.

```html
@flow-arrow-draw="addNodes([{
    id: 'ann-' + Date.now() + '-' + Math.random().toString(36).slice(2, 7),
    position: { x: 0, y: 0 },
    draggable: false, selectable: false,
    class: 'flow-node-annotation',
    data: { annotation: 'arrow', start: $event.detail.start, end: $event.detail.end, strokeColor: $event.detail.strokeColor, strokeWidth: $event.detail.strokeWidth, opacity: $event.detail.opacity },
}])"

```

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

### Basic Drag to Connect Canvas Setup

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/connections/drag-connect.md

Sets up a canvas with nodes and handles for drag-to-connect functionality. Ensure the 'flow-container' class and 'x-flow-viewport' directive are applied.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 250, y: 100 }, data: { label: 'Target A' } },
        { id: 'c', position: { x: 500, y: 0 }, data: { label: 'Target B' } },
    ],
    edges: [],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 250px;">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>
                <span x-text="node.data.label"></span>
                <div x-flow-handle:source></div>
            </div>
        </template>
    </div>
</div>
```

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

### Set Edge Color to Gradient

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/edges/gradients.md

Use a gradient object with 'from' and 'to' properties to define a two-color linear gradient along the edge stroke. This example shows a basic setup for a gradient edge.

```javascript
{
  id: 'e1',
  source: 'a',
  target: 'b',
  color: { from: '#22c55e', to: '#ef4444' },
}
```

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

### init

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/api/events.md

Fired after the canvas is fully initialized. Config callback: `onInit`.

```APIDOC
## init

### Description
Fired after the canvas is fully initialized.

### Payload
```ts
undefined
```

### Config Callback
`onInit`
```

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

### Animate Node Along Wave Path

Source: https://github.com/getartisanflow/alpineflow/blob/main/docs/animation/paths.md

Animates a node named 'data' to follow a wave motion between specified start and end points. This example uses the `wave` path function with a 'reverse' loop for a ping-pong effect.

```javascript
$flow.animate({
    nodes: {
        'data': {
            followPath: wave({
                startX: 0, startY: 100,
                endX: 400, endY: 100,
                amplitude: 50,
                frequency: 2,
            }),
        },
    },
}, { duration: 2000, loop: 'reverse' });
```