### Guide Path CSS Styling

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

Provides CSS rules for styling the guide path overlay. This example sets the stroke color, width, dash array, and opacity for the guide path.

```css
.flow-guide-path {
    stroke: var(--flow-accent);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    fill: none;
    opacity: 0.4;
}
```

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

### Install WireFlow

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

Install the WireFlow package and run the necessary artisan command to set up the components.

```bash
composer require getartisanflow/wireflow
php artisan wireflow:install
```

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

### Build assets after installation

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/commands.md

After running the installation command, build your project's assets to reflect the changes.

```bash
npm run build
```

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

### Install Dependencies and Build

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

Install the necessary peer dependencies and the AlpineFlow npm package, then rebuild the project.

```bash
npm install @getartisanflow/alpineflow yjs y-websocket y-protocols

npm run build
```

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

### Full Example with Nodes and Edges

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/edges/styling.md

Defines nodes and edges with various status classes and marker ends, then renders them using a Blade component. This demonstrates a complete setup for a flow diagram.

```php
public array $nodes = [
    ['id' => 'a', 'position' => ['x' => 0, 'y' => 0], 'data' => ['label' => 'Success']],
    ['id' => 'b', 'position' => ['x' => 250, 'y' => 0], 'data' => ['label' => 'Warning']],
    ['id' => 'c', 'position' => ['x' => 500, 'y' => 0], 'data' => ['label' => 'Danger']],
    ['id' => 'd', 'position' => ['x' => 125, 'y' => 150], 'data' => ['label' => 'Info']],
    ['id' => 'e', 'position' => ['x' => 375, 'y' => 150], 'data' => ['label' => 'Primary']],
];

public array $edges = [
    ['id' => 'e1', 'source' => 'a', 'target' => 'd', 'class' => 'flow-edge-success', 'markerEnd' => 'arrowclosed'],
    ['id' => 'e2', 'source' => 'b', 'target' => 'd', 'class' => 'flow-edge-warning', 'markerEnd' => 'arrowclosed'],
    ['id' => 'e3', 'source' => 'b', 'target' => 'e', 'class' => 'flow-edge-danger', 'markerEnd' => 'arrowclosed'],
    ['id' => 'e4', 'source' => 'c', 'target' => 'e', 'class' => 'flow-edge-info', 'markerEnd' => 'arrowclosed'],
];
```

```blade
<x-flow :nodes="$nodes" :edges="$edges">
    <x-slot:node>
        <x-flow-handle type="target" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" />
    </x-slot:node>
</x-flow>
```

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

### Quick Setup with Artisan Command

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/getting-started/installation.md

Run the Artisan command to automatically publish configuration, assets, and include necessary JS/CSS imports. This is the recommended setup method.

```bash
php artisan wireflow:install
npm run build
```

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

### Interactive Demo Setup

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/server/patterns.md

This HTML and JavaScript setup demonstrates a simplified workflow canvas. It initializes nodes and edges, and includes basic controls for interacting with the workflow, such as an 'Approve Step' button.

```toolbar
<button id="demo-wf-approve" class="rounded-md border border-border-subtle bg-elevated px-3 py-1 font-mono text-[11px] text-text-muted cursor-pointer hover:text-text-body">Approve Step</button>
<span id="demo-wf-status" class="font-mono text-[10px] text-text-faint">Status: pending</span>

```

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'draft', position: { x: 0, y: 50 }, data: { label: 'Draft' }, class: 'flow-node-success' },
        { id: 'review', position: { x: 200, y: 50 }, data: { label: 'Review' } },
        { id: 'approved', position: { x: 400, y: 50 }, data: { label: 'Approved' } },
    ],
    edges: [
        { id: 'e1', source: 'draft', target: 'review' },
        { id: 'e2', source: 'review', target: 'approved' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 200px;"
   x-init="
        let step = 1;

```

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

### Install WireFlow with Artisan

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/commands.md

Run this command to automate the installation of WireFlow, including publishing configuration and assets, and adding necessary imports to your project files.

```bash
php artisan wireflow:install
```

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

### Configure Background Pattern with Demo

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

Demonstrates setting the background pattern to 'dots' within a live WireFlow canvas component. This example includes basic node and edge setup, and disables pan and zoom for a static view.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 80, y: 60 }, data: { label: 'Node' } },
    ],
    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">
            <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 Layout Addons

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/addons/layouts.md

Install the core AlpineFlow package and any desired layout engine peer dependencies using npm.

```bash
npm install @getartisanflow/alpineflow

npm install @dagrejs/dagre    # for dagre layout
npm install d3-force          # for force-directed layout
npm install d3-hierarchy      # for tree/cluster layout
npm install elkjs             # for ELK layout engine
```

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

### Install Whiteboard Addon

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

Install the AlpineFlow npm package and register the whiteboard plugin. Rebuild your project after adding the import.

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

```bash
npm run build
```

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

### Install WireFlow with a Specific Theme

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/theming/themes.md

When installing WireFlow, you can specify a theme to be used. Remember to rebuild assets afterward.

```bash
php artisan wireflow:install --theme=flux
npm run build
```

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

### Persistent Flow Component Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/server/events.md

A complete Livewire component example demonstrating how to persist node positions and handle connections, integrating with database models.

```php
<?php

namespace App\Livewire;

use ArtisanFlow\WireFlow\Concerns\WithWireFlow;
use App\Models\FlowNode;
use App\Models\FlowEdge;
use Livewire\Component;

class PersistentFlow extends Component
{
    use WithWireFlow;

    public array $nodes = [];
    public array $edges = [];

    public function mount(): void
    {
        $this->nodes = FlowNode::all()->map(fn ($n) => [
            'id' => (string) $n->id,
            'position' => ['x' => $n->x, 'y' => $n->y],
            'data' => ['label' => $n->label],
        ])->toArray();

        $this->edges = FlowEdge::all()->map(fn ($e) => [
            'id' => (string) $e->id,
            'source' => (string) $e->source_id,
            'target' => (string) $e->target_id,
        ])->toArray();
    }

    public function onNodeDragEnd(string $nodeId, array $position): void
    {
        FlowNode::where('id', $nodeId)->update([
            'x' => $position['x'],
            'y' => $position['y'],
        ]);
    }

    public function onConnect(string $source, string $target, ?string $sourceHandle, ?string $targetHandle): void
    {
        $edge = FlowEdge::create([
            'source_id' => $source,
            'target_id' => $target,
        ]);

        $this->edges[] = [
            'id' => (string) $edge->id,
            'source' => $source,
            'target' => $target,
        ];
    }

    public function onPaneClick(array $position): void
    {
        $this->flowDeselectAll();
    }

    public function render()
    {
        return view('livewire.persistent-flow');
    }
}
```

```blade
{{-- resources/views/livewire/persistent-flow.blade.php --}}
<div>
    <x-flow
        :nodes="$nodes"
        :edges="$edges"
        @connect="onConnect"
        @node-drag-end="onNodeDragEnd"
        @pane-click="onPaneClick"
        style="height: 500px;"
    >
        <x-slot:node>
            <x-flow-handle type="target" position="top" />
            <span x-text="node.data.label"></span>
            <x-flow-handle type="source" position="bottom" />
        </x-slot:node>
    </x-flow>
</div>
```

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

### Interactive Flow Canvas Demo

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/server/patterns.md

This example demonstrates sending particles along edges in a flow canvas upon a button click. It includes custom toolbar elements for interaction and a simplified flow setup.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'api', position: { x: 0, y: 80 }, data: { label: 'API' } },
        { id: 'cache', position: { x: 200, y: 0 }, data: { label: 'Cache' } },
        { id: 'db', position: { x: 200, y: 160 }, data: { label: 'Database' } },
        { id: 'queue', position: { x: 400, y: 80 }, data: { label: 'Queue' } },
    ],
    edges: [
        { id: 'e1', source: 'api', target: 'cache' },
        { id: 'e2', source: 'api', target: 'db' },
        { id: 'e3', source: 'cache', target: 'queue' },
        { id: 'e4', source: 'db', target: 'queue' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 280px;"
   x-init="
        let count = 0;
        document.getElementById('demo-dash-pulse').addEventListener('click', () => {
            count++;
            document.getElementById('demo-dash-count').textContent = 'Events: ' + count;
            edges.forEach(e => {
                setTimeout(() => $flow.sendParticle(e.id, { color: '#8B5CF6', size: 4, duration: '0.8s' }), Math.random() * 500);
            });
        });
   ">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <div x-flow-handle:target></div>

```

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

### Follow Node with Options

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/animation/camera.md

Starts following a node with customizable options for zoom level, camera smoothing speed, and padding around the node.

```php
$this->flowFollow('active-node', [
    'zoom' => 1.5,
    'speed' => 0.1,
    'padding' => 80,
]);
```

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

### Livewire Server Events for Node Resize

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/resizer.md

Provides examples of Livewire component methods that are triggered when a node resize operation starts (`onNodeResizeStart`) and ends (`onNodeResizeEnd`). These methods receive the node ID and its dimensions.

```php
public function onNodeResizeStart(string $nodeId, array $dimensions): void
{
    // $dimensions = ['width' => float, 'height' => float]
}

public function onNodeResizeEnd(string $nodeId, array $dimensions): void
{
    // Persist the new dimensions
}
```

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

### Inspector Sidebar Example

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

An example of an <x-flow-panel> configured as a resizable inspector sidebar. It dynamically displays details of the currently selected node in the flow.

```blade
<x-flow :nodes="$nodes" :edges="$edges" @node-click="onNodeClick">
    <x-slot:node>
        <x-flow-handle type="target" position="top" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" position="bottom" />
    </x-slot:node>

    <x-flow-panel position="top-right" :resizable="true">
        @if ($selectedNode)
            <h3 class="text-sm font-semibold">{{ $selectedNode['data']['label'] }}</h3>
            <p class="text-xs text-gray-500">ID: {{ $selectedNode['id'] }}</p>
            <p class="text-xs text-gray-500">
                Position: {{ $selectedNode['position']['x'] }}, {{ $selectedNode['position']['y'] }}
            </p>
        @else
            <p class="text-xs text-gray-500">Click a node to inspect it.</p>
        @endif
    </x-flow-panel>
</x-flow>
```

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

### Start Following a Node

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/animation/camera.md

Initiates continuous camera tracking on a specified node. The camera will follow the node's position as it moves.

```php
$this->flowFollow('active-node');
```

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

### Interactive Demo with Fit View Button

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/canvas/viewport.md

An interactive example demonstrating viewport control, including a button to fit the view with custom padding and duration.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Pan & zoom me' } },
        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'Drag to pan' } },
        { id: 'c', position: { x: 150, y: 120 }, data: { label: 'Scroll to zoom' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { id: 'e2', source: 'a', target: 'c' },
        { id: 'e3', source: 'b', target: 'c' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
    minZoom: 0.2,
    maxZoom: 4,
})" class="flow-container" style="height: 250px;"
   x-init="document.getElementById('demo-vp-fit').addEventListener('click', () => fitView({ padding: 0.2, 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>
```

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

### HTML Demo Canvas Setup

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/edges/animation.md

This HTML structure sets up a Wireflow canvas with nodes and edges, demonstrating different animation modes.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a1', position: { x: 0, y: 0 }, data: { label: 'Dash' } },
        { id: 'a2', position: { x: 85, y: 130 }, data: { label: 'Dash' } },
        { id: 'b1', position: { x: 220, y: 0 }, data: { label: 'Pulse' } },
        { id: 'b2', position: { x: 305, y: 130 }, data: { label: 'Pulse' } },
        { id: 'c1', position: { x: 440, y: 0 }, data: { label: 'Dot' } },
        { id: 'c2', position: { x: 525, y: 130 }, data: { label: 'Dot' } },
    ],
    edges: [
        { id: 'e1', source: 'a1', target: 'a2', animated: true },
        { id: 'e2', source: 'b1', target: 'b2', animated: 'pulse' },
        { id: 'e3', source: 'c1', target: 'c2', animated: 'dot' },
    ],
    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>
```

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

### Animated Path with Guide Overlay

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

Displays a visible guide overlay for an SVG path during animation. The guide path can be styled and automatically removed upon animation completion.

```js
$flow.animate({
    nodes: {
        'n1': {
            followPath: 'M 0 100 Q 200 0 400 100',
            guidePath: {
                visible: true,
                class: 'my-guide',
                autoRemove: true,
            },
        },
    },
}, { duration: 2000 });
```

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

### Basic Toolbar Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/toolbar.md

A basic implementation of the x-flow-toolbar within a flow canvas. It displays delete and edit buttons when a node is selected.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 30, y: 50 }, data: { label: 'Select me' } },
        { id: 'b', position: { x: 260, y: 50 }, data: { label: 'Or me' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    background: 'dots',
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 200px;">
    <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 x-flow-node-toolbar:top style="display: flex; gap: 4px;">
                    <button class="rounded border border-border-subtle bg-elevated px-2 py-0.5 text-[11px] cursor-pointer hover:text-text-body" @click="removeNodes([node.id])">Delete</button>
                    <button class="rounded border border-border-subtle bg-elevated px-2 py-0.5 text-[11px] cursor-pointer hover:text-text-body" @click="console.log('edit', node.id)">Edit</button>
                </div>
            </div>
        </template>
    </div>
</div>
```

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

### Minimap Demo

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/canvas/minimap.md

A full example demonstrating the minimap functionality within a canvas component, including initial fit view and pannable/zoomable options.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Start' } },
        { id: 'b', position: { x: 250, y: 0 }, data: { label: 'Process' } },
        { id: 'c', position: { x: 500, y: 0 }, data: { label: 'End' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { id: 'e2', source: 'b', target: 'c' },
    ],
    background: 'dots',
    minimap: true,
    minimapPannable: true,
    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>
```

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

### Import Core and Layout Addons in app.js

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/addons/layouts.md

Import the core AlpineFlow bundle and installed layout addons, then register them with Alpine.js.

```javascript
// resources/js/app.js

// Core from WireFlow vendor bundle
import AlpineFlow from '../../vendor/getartisanflow/wireflow/dist/alpineflow.bundle.esm.js';

// Layout addons from npm (only import what you installed)
import AlpineFlowDagre from '@getartisanflow/alpineflow/dagre';
import AlpineFlowForce from '@getartisanflow/alpineflow/force';
import AlpineFlowHierarchy from '@getartisanflow/alpineflow/hierarchy';
import AlpineFlowElk from '@getartisanflow/alpineflow/elk';

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(AlpineFlow);
    window.Alpine.plugin(AlpineFlowDagre);
    window.Alpine.plugin(AlpineFlowForce);
    window.Alpine.plugin(AlpineFlowHierarchy);
    window.Alpine.plugin(AlpineFlowElk);
});
```

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

### WireFlow Whiteboard Component Setup

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

Configure the `<x-flow>` component with nodes, edges, and initial tool settings. Use `x-init` for scope injection and tool directives.

```blade
<x-flow
    :nodes="$nodes" :edges="$edges"
    :config="['selectionOnDrag' => true, 'panOnDrag' => [2]]"
    x-init="Object.assign($data, {
        tool: null,
        toolSettings: { strokeColor: '#334155', strokeWidth: 2, opacity: 1 },
    })"
    x-flow-freehand.filled="tool === 'draw'"
    x-flow-highlighter="tool === 'highlighter'"
    x-flow-eraser="tool === 'eraser'"
>
```

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

### Context Menu Usage Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/context-menu.md

Shows how to implement context menus for nodes with options to delete or duplicate. Ensure the 'node' scope is used for node-specific actions.

```blade
<x-flow-context-menu scope="node">
    <button @click="removeNodes([contextMenu.node.id]); closeContextMenu()">
        Delete Node
    </button>
    <button @click="duplicateNode(contextMenu.node.id); closeContextMenu()">
        Duplicate
    </button>
</x-flow-context-menu>
```

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

### Interactive Demo with x-flow-panel

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

An interactive example showcasing an <x-flow-panel> with custom styling and content within a dynamic flow canvas. This panel acts as an inspector.

```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: 125, y: 100 }, data: { label: 'Node C' } },
    ],
    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-panel:top-right.static style="padding: 8px 12px; font-size: 12px;">
        <div style="font-weight: 600; margin-bottom: 4px;">Inspector</div>
        <div style="opacity: 0.6;">Select a node to view details</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>
```

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

### Basic x-flow-handle Usage

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/handle.md

Illustrates the fundamental setup for a node with source and target handles using Blade syntax. Ensure the x-flow component is correctly configured.

```blade
<x-flow :nodes="$nodes" :edges="$edges">
    <x-slot:node>
        <x-flow-handle type="target" position="top" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" position="bottom" />
    </x-slot:node>
</x-flow>
```

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

### Interactive Flow Canvas Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/connections/basics.md

Demonstrates an interactive WireFlow canvas with predefined nodes and an empty edge list. Configured for a static, non-interactive view.

```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>
```

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

### Toolbar Positioning and Alignment

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/toolbar.md

Demonstrates different positioning and alignment options for the toolbar. Includes examples for bottom-right alignment and left-side positioning with an offset.

```blade
{{-- Bottom-right aligned --}}
<x-flow-toolbar position="bottom" align="right">
    <button @click="removeNodes([node.id])">Delete</button>
</x-flow-toolbar>

{{-- Left side with extra offset --}}
<x-flow-toolbar position="left" :offset="20">
    <span class="text-xs">Settings</span>
</x-flow-toolbar>
```

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

### Interactive Demo with Resizable Nodes

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

This is a full HTML example demonstrating resizable nodes within a flow canvas. It includes nodes with and without resizability enabled.

```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>
```

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

### Offset Positioning Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/context-menu.md

Shows how to apply custom offsets to the context menu's position relative to the cursor. This is useful for fine-tuning menu placement.

```blade
<x-flow-context-menu scope="pane" :offset-x="8" :offset-y="8">
    <button @click="addNode(contextMenu.position); closeContextMenu()">
        Add Node Here
    </button>
</x-flow-context-menu>
```

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

### Install AlpineFlow npm Package

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/getting-started/installation.md

Install the AlpineFlow npm package to access addon sub-path imports. This is a prerequisite for installing specific addons.

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

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

### Combining Focus and Follow in Livewire

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/animation/camera.md

This method demonstrates a common pattern where the camera is first focused on a node and then immediately starts following it, providing a smooth transition for tracking.

```php
<?php
#[Renderless]
public function trackNode(string $id): void
{
    // Smooth pan to the node first
    $this->flowFocusNode($id, duration: 400);

    // Then start following
    $this->flowFollow($id, [
        'zoom' => 1.3,
        'speed' => 0.1,
    ]);
}

```

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

### Install Addon Peer Dependencies

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/getting-started/installation.md

Install the necessary peer dependencies for various WireFlow addons, such as layout engines or collaboration tools. Install only what you need.

```bash
npm install @dagrejs/dagre    # for dagre layout
npm install d3-force          # for force-directed layout
npm install d3-hierarchy      # for tree/cluster layout
npm install elkjs             # for ELK layout engine
npm install yjs y-websocket y-protocols  # for real-time collaboration
# whiteboard has no peer deps
```

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

### Install WireFlow via Composer

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/getting-started/installation.md

Use Composer to add the WireFlow package to your Laravel project. This is the primary installation method.

```bash
composer require getartisanflow/wireflow
```

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

### Interactive Flow Canvas Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/getting-started/first-flow.md

An example of an interactive flow canvas using Alpine.js. It initializes with predefined nodes and edges, and enables zooming and panning.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 50, y: 50 }, data: { label: 'Node A' } },
        { id: 'b', position: { x: 250, y: 50 }, data: { label: 'Node B' } },
        { id: 'c', position: { x: 150, y: 180 }, data: { label: 'Node C' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
    ],
    fitViewOnInit: 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>
```

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

### Legend Panel Example

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

A static <x-flow-panel> example used to display a legend for node types or statuses within the flow. It's positioned in the top-left corner.

```blade
<x-flow :nodes="$nodes" :edges="$edges">
    <x-slot:node>
        <x-flow-handle type="target" position="top" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" position="bottom" />
    </x-slot:node>

    <x-flow-panel position="top-left">
        <h4 class="text-sm font-semibold">Legend</h4>
        <ul class="text-xs">
            <li class="text-blue-500">Blue = Active</li>
            <li class="text-gray-400">Gray = Inactive</li>
        </ul>
    </x-flow-panel>
</x-flow>
```

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

### Bidirectional Marker Configuration

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/edges/markers.md

Apply different markers to both the start and end of an edge. The end marker is configured with a specific color, while the start marker uses the default 'arrow' type.

```php
[
    'id' => 'e1',
    'source' => 'a',
    'target' => 'b',
    'markerStart' => 'arrow',
    'markerEnd' => [
        'type' => 'arrowclosed',
        'color' => '#3b82f6',
    ],
]
```

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

### Interactive Flow Canvas Example

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/nodes/basics.md

An example of an interactive WireFlow canvas using Alpine.js. It initializes with predefined nodes and edges, and configures canvas behavior like background, zooming, and panning.

```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: 'Process' } },
        { id: 'c', position: { x: 500, y: 0 }, data: { label: 'End' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { 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>
```

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

### Interactive Demo: Update and Animate Nodes

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/animation/basics.md

This example demonstrates instant updates with `flowUpdate()` and smooth animations with `flowAnimate()` using buttons to control node positions. It initializes two nodes and uses Alpine.js directives to manage click events and flow interactions.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'u1', position: { x: 30, y: 15 }, data: { label: 'update()' } },
        { id: 'a1', position: { x: 250, y: 15 }, data: { label: 'animate()' } },
    ],
    edges: [],
    background: 'dots',
    controls: false,
    pannable: false,
    zoomable: false,
})" class="flow-container" style="height: 200px;"
   x-init="
       let uDown = false, aDown = false;
       document.getElementById('demo-top-update').addEventListener('click', () => {
           uDown = !uDown;
           $flow.update({ nodes: { u1: { position: { x: 30, y: uDown ? 80 : 15 } } } });
       });
       document.getElementById('demo-top-animate').addEventListener('click', () => {
           aDown = !aDown;
           $flow.animate({ nodes: { a1: { position: { x: 250, y: aDown ? 80 : 15 } } } }, { duration: 600, easing: 'easeInOut' });
       });
       document.getElementById('demo-top-reset').addEventListener('click', () => {
           uDown = false; aDown = false;
           $flow.update({ nodes: {
               u1: { position: { x: 30, y: 15 } },
               a1: { position: { x: 250, y: 15 } },
           }});
       });
   ">
    <div x-flow-viewport>
        <template x-for="node in nodes" :key="node.id">
            <div x-flow-node="node">
                <span x-text="node.data.label"></span>
            </div>
        </template>
    </div>
</div>
```

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

### Interactive Flow Canvas Example

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

An interactive example showcasing a simple flow canvas with two nodes and an edge. It demonstrates the visual representation of nodes with default source and target handles.

```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>
```

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

### Interactive Camera Control Demo

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/animation/camera.md

This demo showcases various camera control functionalities including focusing on specific nodes, following a node, and fitting the entire view. It requires buttons to trigger these actions.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Step A' } },
        { id: 'b', position: { x: 300, y: 0 }, data: { label: 'Step B' } },
        { id: 'c', position: { x: 600, y: 0 }, data: { label: 'Step C' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b' },
        { id: 'e2', source: 'b', target: 'c' },
    ],
    background: 'dots',
    fitViewOnInit: true,
    controls: false,
})" class="flow-container" style="height: 220px;"
   x-init="
       let fh = null;
       document.getElementById('demo-cam-top-a').addEventListener('click', () => { if (fh) { fh.stop(); fh = null; } fh = $flow.follow({ x: 0, y: 0 }, { zoom: 2 }); });
       document.getElementById('demo-cam-top-c').addEventListener('click', () => { if (fh) { fh.stop(); fh = null; } fh = $flow.follow({ x: 600, y: 0 }, { zoom: 2 }); });
       document.getElementById('demo-cam-top-follow').addEventListener('click', () => { if (fh) fh.stop(); fh = $flow.follow('b', { zoom: 1.5 }); });
       document.getElementById('demo-cam-top-reset').addEventListener('click', () => { if (fh) { fh.stop(); fh = null; } $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>
```

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

### Usage Example with Interactive Content

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/drag-handle.md

This example shows how to use x-flow-drag-handle within a node template to ensure that only the title area is draggable, while other interactive elements like buttons remain functional without initiating a drag.

```blade
<x-slot:node>
    <x-flow-drag-handle>
        <strong x-text="node.data.title"></strong>
    </x-flow-drag-handle>
    <p x-text="node.data.body" class="text-sm text-gray-500"></p>
    <button @click="$wire.editNode(node.id)" class="text-xs text-blue-500">
        Edit
    </button>
</x-slot:node>
```

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

### Override Panel Z-Index

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/theming/css-variables.md

Example of how to override the default z-index for panels to place them above controls.

```css
.flow-panel {
    z-index: 15; /* put panels above controls */
}
```

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

### Use the x-flow component in Blade

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/commands.md

Example of how to integrate the WireFlow component into your Blade views to display nodes and edges.

```blade
<x-flow :nodes="$nodes" :edges="$edges" style="height: 400px;">
    <x-slot:node>
        <x-flow-handle type="target" />
        <span x-text="node.data.label"></span>
        <x-flow-handle type="source" />
    </x-slot:node>
</x-flow>
```

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

### Batch Collapse/Expand Operations

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/nodes/groups.md

These Blade examples demonstrate how to use the `<x-flow-collapse>` component with the `:all="true"` prop to trigger collapse or expand actions on all collapsible nodes within the flow. Options for instant expansion are also shown.

```blade
<x-flow-collapse :all="true">Collapse All</x-flow-collapse>
<x-flow-collapse :all="true" :expand="true">Expand All</x-flow-collapse>
<x-flow-collapse :all="true" :expand="true" :instant="true">Expand All (Instant)</x-flow-collapse>
```

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

### Usage with Node Slot

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/toolbar.md

Integrating the x-flow-toolbar within the node slot of a component. This example shows delete and duplicate actions.

```blade
<x-slot:node>
    <x-flow-handle type="target" position="top" />
    <span x-text="node.data.label"></span>
    <x-flow-handle type="source" position="bottom" />

    <x-flow-toolbar position="top">
        <button @click="removeNodes([node.id])">Delete</button>
        <button @click="$wire.duplicate(node.id)">Duplicate</button>
    </x-flow-toolbar>
</x-slot:node>
```

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

### Interactive Demo with Markers

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/edges/markers.md

Demonstrates the use of 'arrow' for markerStart and 'arrowclosed' for markerEnd on an edge within an interactive Wireflow canvas.

```html
<div x-data="flowCanvas({
    nodes: [
        { id: 'a', position: { x: 0, y: 0 }, data: { label: 'Source' } },
        { id: 'b', position: { x: 300, y: 80 }, data: { label: 'Target' } },
    ],
    edges: [
        { id: 'e1', source: 'a', target: 'b', markerStart: 'arrow', markerEnd: 'arrowclosed' },
    ],
    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>
```

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

### Server-Side Loading Control with Livewire

Source: https://github.com/getartisanflow/wireflow/blob/main/docs/components/loading.md

Illustrates how to control the loading overlay state from a Livewire component using the `WithWireFlow` trait's `flowSetLoading` method.

```php
$this->flowSetLoading(true);   // Show loading overlay
$this->flowSetLoading(false);  // Hide loading overlay
```