@hayro_o7/labyrinth 0.0.1

package/README.md

@@ -0,0 +1,243 @@
+# Labyrinth
+
+A Svelte package for visualizing graph pathfinding algorithms with interactive maze generation and solving.
+
+## Features
+
+- 🎯 **Algorithm Visualization**: Step-by-step visualization of Dijkstra's and A* pathfinding algorithms
+- 🌀 **Maze Generation**: Generates perfect mazes using Recursive Backtracking algorithm
+- 🎨 **Interactive Component**: Fully customizable Svelte component with play/pause controls
+- 📊 **Graph-based**: Uses proper graph data structures for efficient pathfinding
+- 🔧 **TypeScript**: Fully typed for excellent developer experience
+- ⚡ **Configurable**: Adjustable maze size, cell size, and animation speed
+
+## Installation
+
+```bash
+npm install labyrinth
+```
+
+## Usage
+
+### Basic Example
+
+```svelte
+<script>
+  import { generateLabyrinth, Labyrinth } from 'labyrinth';
+  
+  const graph = generateLabyrinth(20, 20);
+</script>
+
+<Labyrinth {graph} algorithm="astar" />
+```
+
+### Advanced Example
+
+```svelte
+<script>
+  import { generateLabyrinth, Labyrinth } from 'labyrinth';
+  import type { Graph, AlgorithmType, ColorScheme } from 'labyrinth';
+  
+  let width = 25;
+  let height = 25;
+  let algorithm: AlgorithmType = 'dijkstra';
+  
+  const graph = generateLabyrinth(width, height);
+  
+  const customColors: ColorScheme = {
+    start: '#10b981',
+    end: '#dc2626',
+    path: '#8b5cf6',
+    wall: '#374151'
+  };
+</script>
+
+<Labyrinth
+  {graph}
+  {algorithm}
+  cellSize={30}
+  animationSpeed={50}
+  autoPlay={false}
+  showGrid={true}
+  colors={customColors}
+/>
+```
+
+## API Reference
+
+### `generateLabyrinth(width: number, height: number): Graph`
+
+Generates a perfect maze (exactly one path between any two points) using the Recursive Backtracking algorithm.
+
+**Parameters:**
+- `width`: Number of cells horizontally
+- `height`: Number of cells vertically
+
+**Returns:** A `Graph` object representing the maze
+
+### `Labyrinth` Component Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `graph` | `Graph` | **required** | The maze graph to visualize |
+| `algorithm` | `'dijkstra' \| 'astar'` | `'astar'` | Pathfinding algorithm to use |
+| `cellSize` | `number` | `30` | Size of each cell in pixels |
+| `wallThickness` | `number` | `2` | Thickness of walls in pixels |
+| `startNode` | `string` | `'0,0'` | Starting node ID (format: "x,y") |
+| `endNode` | `string` | `'{width-1},{height-1}'` | Ending node ID (format: "x,y"), auto-computed from graph size |
+| `autoPlay` | `boolean` | `false` | Start animation automatically |
+| `animationSpeed` | `number` | `50` | Delay between steps in milliseconds |
+| `showGrid` | `boolean` | `true` | Show grid lines |
+| `legend` | `boolean` | `true` | Toggle the legend panel |
+| `stepCount` | `boolean` | `true` | Toggle the step counter |
+| `colors` | `ColorScheme` | default theme | Custom color scheme (see below) |
+
+### Algorithms
+
+#### Dijkstra's Algorithm
+- Explores all nodes systematically
+- Guarantees shortest path
+- Works well for unweighted graphs
+- Time complexity: O((V+E) log V)
+
+#### A* Algorithm
+- Uses Manhattan distance heuristic
+- More efficient than Dijkstra for pathfinding
+- Explores fewer nodes by prioritizing promising paths
+- Guarantees shortest path with admissible heuristic
+
+### Functions
+
+```typescript
+// Generate a maze
+import { generateLabyrinth } from 'labyrinth';
+const graph = generateLabyrinth(20, 20);
+
+// Run algorithms programmatically
+import { dijkstra, astar } from 'labyrinth';
+const result = dijkstra(graph, '0,0', '19,19');
+const result2 = astar(graph, '0,0', '19,19');
+```
+
+### Color Customization
+
+You can customize all colors used in the visualization by passing a `colors` object:
+
+```typescript
+import type { ColorScheme } from 'labyrinth';
+
+const customColors: ColorScheme = {
+  start: '#10b981',        // Start node color
+  end: '#dc2626',          // End node color
+  current: '#f59e0b',      // Current node being explored
+  visiting: '#fef3c7',     // Nodes in the frontier
+  visited: '#e5e7eb',      // Already visited nodes
+  path: '#8b5cf6',         // Final path color
+  background: '#ffffff',   // Cell background
+  wall: '#374151',         // Wall color
+  grid: '#e5e7eb',         // Grid line color
+  legend: '#f3f4f6',       // Legend background
+  legendtext: '#1f2937',   // Legend text color
+  buttons: '#0ea5e9',      // Button background
+  buttonshover: '#0284c7', // Button hover background
+  buttonsdisabled: '#94a3b8', // Disabled button background
+  buttonstext: '#ffffff'   // Button text color
+};
+```
+
+All color properties are optional - only specify the ones you want to override.
+
+### Types
+
+```typescript
+interface Graph {
+  nodes: Map<string, GraphNode>;
+  width: number;
+  height: number;
+}
+
+interface GraphNode {
+  id: string;
+  x: number;
+  y: number;
+  neighbors: string[];
+}
+
+interface AlgorithmResult {
+  path: string[];
+  steps: PathStep[];
+  found: boolean;
+}
+
+interface PathStep {
+  nodeId: string;
+  type: 'visiting' | 'visited' | 'path' | 'current';
+  distance?: number;
+  heuristic?: number;
+  fScore?: number;
+}
+
+interface ColorScheme {
+  start?: string;
+  end?: string;
+  current?: string;
+  visiting?: string;
+  visited?: string;
+  path?: string;
+  background?: string;
+  wall?: string;
+  grid?: string;
+  legend?: string;
+  legendtext?: string;
+  buttons?: string;
+  buttonshover?: string;
+  buttonsdisabled?: string;
+  buttonstext?: string;
+}
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server with demo
+npm run dev
+
+# Build the package
+npm run package
+
+# Type check
+npm run check
+```
+
+## How It Works
+
+### Maze Generation
+The package uses **Recursive Backtracking** (a DFS-based algorithm) to generate perfect mazes:
+1. Start at a random cell and mark it as visited
+2. While there are unvisited neighbors:
+   - Choose a random unvisited neighbor
+   - Remove the wall between current cell and chosen neighbor
+   - Recursively visit the neighbor
+3. Backtrack when stuck
+
+This guarantees a maze with exactly one path between any two points.
+
+### Pathfinding Visualization
+The component visualizes the algorithm's execution step-by-step:
+- **Green**: Start node
+- **Red**: End node
+- **Orange**: Current node being explored
+- **Yellow**: Nodes in the frontier (being considered)
+- **Gray**: Visited nodes
+- **Blue**: Final shortest path
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/algorithms/astar.d.ts

@@ -0,0 +1,2 @@
+import type { Graph, AlgorithmResult } from '../types';
+export declare function astar(graph: Graph, startId: string, endId: string): AlgorithmResult;

package/dist/algorithms/astar.js

@@ -0,0 +1,105 @@
+import { PriorityQueue } from '../utils/priority-queue';
+function parseKey(key) {
+    const [x, y] = key.split(',').map(Number);
+    return { x, y };
+}
+function manhattanDistance(id1, id2) {
+    const pos1 = parseKey(id1);
+    const pos2 = parseKey(id2);
+    return Math.abs(pos1.x - pos2.x) + Math.abs(pos1.y - pos2.y);
+}
+export function astar(graph, startId, endId) {
+    const gScore = new Map();
+    const fScore = new Map();
+    const previous = new Map();
+    const visited = new Set();
+    const steps = [];
+    const pq = new PriorityQueue();
+    for (const nodeId of graph.nodes.keys()) {
+        gScore.set(nodeId, Infinity);
+        fScore.set(nodeId, Infinity);
+        previous.set(nodeId, null);
+    }
+    const h = manhattanDistance(startId, endId);
+    gScore.set(startId, 0);
+    fScore.set(startId, h);
+    pq.enqueue(startId, h);
+    while (!pq.isEmpty()) {
+        const currentId = pq.dequeue();
+        if (!currentId)
+            break;
+        if (visited.has(currentId))
+            continue;
+        visited.add(currentId);
+        const currentG = gScore.get(currentId) ?? Infinity;
+        const currentF = fScore.get(currentId) ?? Infinity;
+        const currentH = manhattanDistance(currentId, endId);
+        steps.push({
+            nodeId: currentId,
+            type: 'current',
+            distance: currentG,
+            heuristic: currentH,
+            fScore: currentF
+        });
+        if (currentId === endId) {
+            break;
+        }
+        const currentNode = graph.nodes.get(currentId);
+        if (!currentNode)
+            continue;
+        for (const neighborId of currentNode.neighbors) {
+            if (visited.has(neighborId))
+                continue;
+            const tentativeGScore = currentG + 1;
+            const oldGScore = gScore.get(neighborId) ?? Infinity;
+            if (tentativeGScore < oldGScore) {
+                previous.set(neighborId, currentId);
+                gScore.set(neighborId, tentativeGScore);
+                const heuristic = manhattanDistance(neighborId, endId);
+                const newFScore = tentativeGScore + heuristic;
+                fScore.set(neighborId, newFScore);
+                pq.enqueue(neighborId, newFScore);
+                steps.push({
+                    nodeId: neighborId,
+                    type: 'visiting',
+                    distance: tentativeGScore,
+                    heuristic,
+                    fScore: newFScore
+                });
+            }
+        }
+        steps.push({
+            nodeId: currentId,
+            type: 'visited',
+            distance: currentG,
+            heuristic: currentH,
+            fScore: currentF
+        });
+    }
+    const path = reconstructPath(previous, startId, endId);
+    for (const nodeId of path) {
+        steps.push({
+            nodeId,
+            type: 'path'
+        });
+    }
+    return {
+        path,
+        steps,
+        found: path.length > 0 && path[path.length - 1] === endId
+    };
+}
+function reconstructPath(previous, startId, endId) {
+    const path = [];
+    let current = endId;
+    while (current !== null) {
+        path.unshift(current);
+        if (current === startId)
+            break;
+        current = previous.get(current) ?? null;
+    }
+    if (path[0] !== startId) {
+        return [];
+    }
+    return path;
+}

package/dist/algorithms/dijkstra.d.ts

@@ -0,0 +1,2 @@
+import type { Graph, AlgorithmResult } from '../types';
+export declare function dijkstra(graph: Graph, startId: string, endId: string): AlgorithmResult;

package/dist/algorithms/dijkstra.js

@@ -0,0 +1,81 @@
+import { PriorityQueue } from '../utils/priority-queue';
+export function dijkstra(graph, startId, endId) {
+    const distances = new Map();
+    const previous = new Map();
+    const visited = new Set();
+    const steps = [];
+    const pq = new PriorityQueue();
+    for (const nodeId of graph.nodes.keys()) {
+        distances.set(nodeId, Infinity);
+        previous.set(nodeId, null);
+    }
+    distances.set(startId, 0);
+    pq.enqueue(startId, 0);
+    while (!pq.isEmpty()) {
+        const currentId = pq.dequeue();
+        if (!currentId)
+            break;
+        if (visited.has(currentId))
+            continue;
+        visited.add(currentId);
+        steps.push({
+            nodeId: currentId,
+            type: 'current',
+            distance: distances.get(currentId)
+        });
+        if (currentId === endId) {
+            break;
+        }
+        const currentNode = graph.nodes.get(currentId);
+        if (!currentNode)
+            continue;
+        const currentDistance = distances.get(currentId) ?? Infinity;
+        for (const neighborId of currentNode.neighbors) {
+            if (visited.has(neighborId))
+                continue;
+            const newDistance = currentDistance + 1;
+            const oldDistance = distances.get(neighborId) ?? Infinity;
+            if (newDistance < oldDistance) {
+                distances.set(neighborId, newDistance);
+                previous.set(neighborId, currentId);
+                pq.enqueue(neighborId, newDistance);
+                steps.push({
+                    nodeId: neighborId,
+                    type: 'visiting',
+                    distance: newDistance
+                });
+            }
+        }
+        steps.push({
+            nodeId: currentId,
+            type: 'visited',
+            distance: distances.get(currentId)
+        });
+    }
+    const path = reconstructPath(previous, startId, endId);
+    for (const nodeId of path) {
+        steps.push({
+            nodeId,
+            type: 'path'
+        });
+    }
+    return {
+        path,
+        steps,
+        found: path.length > 0 && path[path.length - 1] === endId
+    };
+}
+function reconstructPath(previous, startId, endId) {
+    const path = [];
+    let current = endId;
+    while (current !== null) {
+        path.unshift(current);
+        if (current === startId)
+            break;
+        current = previous.get(current) ?? null;
+    }
+    if (path[0] !== startId) {
+        return [];
+    }
+    return path;
+}

package/dist/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/dist/components/Labyrinth.svelte

@@ -0,0 +1,370 @@
+<script lang="ts">
+	import type { Graph, AlgorithmType, PathStep } from '../types';
+	import { dijkstra } from '../algorithms/dijkstra';
+	import { astar } from '../algorithms/astar';
+
+	import type { ColorScheme } from '../types';
+
+	interface Props {
+		graph: Graph;
+		cellSize?: number;
+		wallThickness?: number;
+		algorithm?: AlgorithmType;
+		startNode?: string;
+		endNode?: string;
+		autoPlay?: boolean;
+		legend?: boolean;
+		stepCount?: boolean;
+		animationSpeed?: number;
+		showGrid?: boolean;
+		colors?: ColorScheme;
+	}
+
+	let {
+		graph,
+		cellSize = 30,
+		wallThickness = 2,
+		algorithm = 'astar',
+		startNode = '0,0',
+		endNode,
+		autoPlay = false,
+		legend = true,
+		stepCount = true,
+		animationSpeed = 50,
+		showGrid = true,
+		colors
+	}: Props = $props();
+
+	const defaultColors: Required<ColorScheme> = {
+		start: '#22c55e',
+		end: '#ef4444',
+		current: '#f59e0b',
+		visiting: '#fef3c7',
+		visited: '#e5e7eb',
+		path: '#3b82f6',
+		background: '#ffffff',
+		wall: '#1f2937',
+		grid: '#e5e7eb',
+		legend: '#f9fafb',
+		legendtext: '#1f2937',
+		buttons: '#3b82f6',
+		buttonshover: '#2563eb',
+		buttonsdisabled: '#9ca3af',
+		buttonstext: '#ffffff'
+	};
+
+	const colorScheme = $derived({ ...defaultColors, ...colors });
+	const computedEndNode = $derived(endNode ?? `${graph.width - 1},${graph.height - 1}`);
+	const cssVars = $derived(
+		`--lab-buttons:${colorScheme.buttons};
+		--lab-buttonstext:${colorScheme.buttonstext};
+		--lab-buttonshover:${colorScheme.buttonshover};
+		--lab-buttonsdisabled:${colorScheme.buttonsdisabled};
+		--lab-legend:${colorScheme.legend};
+		--lab-legend-text:${colorScheme.legendtext};`
+	);
+
+	let currentStepIndex = $state(0);
+	let isPlaying = $state(false);
+	let steps: PathStep[] = $state([]);
+	let intervalId: number | null = null;
+
+	const visitedNodes = $derived(new Set(
+		steps.slice(0, currentStepIndex).filter(s => s.type === 'visited').map(s => s.nodeId)
+	));
+	
+	const visitingNodes = $derived(new Set(
+		steps.slice(0, currentStepIndex).filter(s => s.type === 'visiting').map(s => s.nodeId)
+	));
+	
+	const currentNode = $derived(
+		steps[currentStepIndex - 1]?.type === 'current' ? steps[currentStepIndex - 1]?.nodeId : null
+	);
+	
+	const pathNodes = $derived(new Set(
+		steps.slice(0, currentStepIndex).filter(s => s.type === 'path').map(s => s.nodeId)
+	));
+
+	function runAlgorithm() {
+		const result = algorithm === 'dijkstra' 
+			? dijkstra(graph, startNode, computedEndNode)
+			: astar(graph, startNode, computedEndNode);
+		
+		steps = result.steps;
+		currentStepIndex = 0;
+	}
+
+	$effect(() => {
+		algorithm;
+		reset();
+	});
+
+	function play() {
+		if (steps.length === 0) {
+			runAlgorithm();
+		}
+		
+		isPlaying = true;
+		intervalId = window.setInterval(() => {
+			if (currentStepIndex < steps.length) {
+				currentStepIndex++;
+			} else {
+				pause();
+			}
+		}, animationSpeed);
+	}
+
+	function pause() {
+		isPlaying = false;
+		if (intervalId !== null) {
+			clearInterval(intervalId);
+			intervalId = null;
+		}
+	}
+
+	function reset() {
+		pause();
+		currentStepIndex = 0;
+		steps = [];
+	}
+
+	function stepForward() {
+		if (steps.length === 0) {
+			runAlgorithm();
+		}
+		if (currentStepIndex < steps.length) {
+			currentStepIndex++;
+		}
+	}
+
+	function stepBackward() {
+		if (currentStepIndex > 0) {
+			currentStepIndex--;
+		}
+	}
+
+	function getCellColor(nodeId: string): string {
+		if (nodeId === startNode) return colorScheme.start;
+		if (nodeId === computedEndNode) return colorScheme.end;
+		if (pathNodes.has(nodeId)) return colorScheme.path;
+		if (nodeId === currentNode) return colorScheme.current;
+		if (visitedNodes.has(nodeId)) return colorScheme.visited;
+		if (visitingNodes.has(nodeId)) return colorScheme.visiting;
+		return colorScheme.background;
+	}
+
+	function getWalls(nodeId: string): { top: boolean; right: boolean; bottom: boolean; left: boolean } {
+		const node = graph.nodes.get(nodeId);
+		if (!node) return { top: true, right: true, bottom: true, left: true };
+
+		const { x, y } = node;
+		const hasTop = !node.neighbors.includes(`${x},${y - 1}`);
+		const hasRight = !node.neighbors.includes(`${x + 1},${y}`);
+		const hasBottom = !node.neighbors.includes(`${x},${y + 1}`);
+		const hasLeft = !node.neighbors.includes(`${x - 1},${y}`);
+
+		return { top: hasTop, right: hasRight, bottom: hasBottom, left: hasLeft };
+	}
+
+	$effect(() => {
+		if (autoPlay && steps.length === 0) {
+			play();
+		}
+	});
+
+	$effect(() => {
+		return () => {
+			if (intervalId !== null) {
+				clearInterval(intervalId);
+			}
+		};
+	});
+
+	const width = $derived(graph.width * cellSize);
+	const height = $derived(graph.height * cellSize);
+</script>
+
+<div class="labyrinth-container" style={cssVars}>
+	<svg 
+		{width} 
+		{height}
+		class="labyrinth-svg"
+		style="border: {wallThickness}px solid {colorScheme.wall};"
+	>
+		{#each Array.from(graph.nodes.values()) as node}
+			{@const walls = getWalls(node.id)}
+			{@const x = node.x * cellSize}
+			{@const y = node.y * cellSize}
+			{@const color = getCellColor(node.id)}
+			
+			<rect
+				{x}
+				{y}
+				width={cellSize}
+				height={cellSize}
+				fill={color}
+				stroke={showGrid ? colorScheme.grid : 'none'}
+				stroke-width="0.5"
+			/>
+			
+			{#if walls.top}
+				<line
+					x1={x}
+					y1={y}
+					x2={x + cellSize}
+					y2={y}
+					stroke={colorScheme.wall}
+					stroke-width={wallThickness}
+				/>
+			{/if}
+			
+			{#if walls.right}
+				<line
+					x1={x + cellSize}
+					y1={y}
+					x2={x + cellSize}
+					y2={y + cellSize}
+					stroke={colorScheme.wall}
+					stroke-width={wallThickness}
+				/>
+			{/if}
+			
+			{#if walls.bottom}
+				<line
+					x1={x}
+					y1={y + cellSize}
+					x2={x + cellSize}
+					y2={y + cellSize}
+					stroke={colorScheme.wall}
+					stroke-width={wallThickness}
+				/>
+			{/if}
+			
+			{#if walls.left}
+				<line
+					x1={x}
+					y1={y}
+					x2={x}
+					y2={y + cellSize}
+					stroke={colorScheme.wall}
+					stroke-width={wallThickness}
+				/>
+			{/if}
+		{/each}
+	</svg>
+
+	<div class="controls">
+		<button onclick={play} disabled={isPlaying}>Play</button>
+		<button onclick={pause} disabled={!isPlaying}>Pause</button>
+		<button onclick={reset}>Reset</button>
+		<button onclick={stepBackward} disabled={isPlaying || currentStepIndex === 0}>Step Back</button>
+		<button onclick={stepForward} disabled={isPlaying || currentStepIndex === steps.length}>Step Forward</button>
+		{#if stepCount}
+			<span class="step-counter">
+				Step: {currentStepIndex} / {steps.length}
+			</span>
+		{/if}
+	</div>
+
+	{#if legend}
+		<div class="legend">
+			<div class="legend-item">
+				<div class="legend-color" style="background-color: {colorScheme.start};"></div>
+				<span>Start</span>
+			</div>
+			<div class="legend-item">
+				<div class="legend-color" style="background-color: {colorScheme.end};"></div>
+				<span>End</span>
+			</div>
+			<div class="legend-item">
+				<div class="legend-color" style="background-color: {colorScheme.current};"></div>
+				<span>Current</span>
+			</div>
+			<div class="legend-item">
+				<div class="legend-color" style="background-color: {colorScheme.visiting};"></div>
+				<span>Visiting</span>
+			</div>
+			<div class="legend-item">
+				<div class="legend-color" style="background-color: {colorScheme.visited};"></div>
+				<span>Visited</span>
+			</div>
+			<div class="legend-item">
+				<div class="legend-color" style="background-color: {colorScheme.path};"></div>
+				<span>Path</span>
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.labyrinth-container {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+		padding: 1rem;
+	}
+
+	.labyrinth-svg {
+		background-color: white;
+		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+	}
+
+	.controls {
+		display: flex;
+		gap: 0.5rem;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.controls button {
+		padding: 0.5rem 1rem;
+		border: none;
+		border-radius: 0.375rem;
+		cursor: pointer;
+		font-weight: 500;
+		transition: background-color 0.2s;
+		background-color: var(--lab-buttons);
+		color: var(--lab-buttonstext);
+	}
+
+	.controls button:hover:not(:disabled) {
+		background-color: var(--lab-buttonshover);
+	}
+
+	.controls button:disabled {
+		background-color: var(--lab-buttonsdisabled);
+		cursor: not-allowed;
+	}
+
+	.step-counter {
+		padding: 0.5rem 1rem;
+		border-radius: 0.375rem;
+		font-weight: 500;
+		background-color: var(--lab-legend);
+		color: var(--lab-legend-text);
+	}
+
+	.legend {
+		display: flex;
+		gap: 1rem;
+		flex-wrap: wrap;
+		padding: 0.75rem;
+		border-radius: 0.5rem;
+		background-color: var(--lab-legend);
+		color: var(--lab-legend-text);
+	}
+
+	.legend-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.legend-color {
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 0.25rem;
+		border: 1px solid var(--lab-legend-text);
+	}
+</style>

package/dist/components/Labyrinth.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Graph, AlgorithmType } from '../types';
+import type { ColorScheme } from '../types';
+interface Props {
+    graph: Graph;
+    cellSize?: number;
+    wallThickness?: number;
+    algorithm?: AlgorithmType;
+    startNode?: string;
+    endNode?: string;
+    autoPlay?: boolean;
+    legend?: boolean;
+    stepCount?: boolean;
+    animationSpeed?: number;
+    showGrid?: boolean;
+    colors?: ColorScheme;
+}
+declare const Labyrinth: import("svelte").Component<Props, {}, "">;
+type Labyrinth = ReturnType<typeof Labyrinth>;
+export default Labyrinth;

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { generateLabyrinth } from './labyrinth-generator';
+export { dijkstra } from './algorithms/dijkstra';
+export { astar } from './algorithms/astar';
+export { default as Labyrinth } from './components/Labyrinth.svelte';
+export type { Graph, GraphNode, Point, Cell, PathStep, AlgorithmResult, AlgorithmType, ColorScheme } from './types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { generateLabyrinth } from './labyrinth-generator';
+export { dijkstra } from './algorithms/dijkstra';
+export { astar } from './algorithms/astar';
+export { default as Labyrinth } from './components/Labyrinth.svelte';

package/dist/labyrinth-generator.d.ts

@@ -0,0 +1,2 @@
+import type { Graph } from './types';
+export declare function generateLabyrinth(width: number, height: number): Graph;

package/dist/labyrinth-generator.js

@@ -0,0 +1,106 @@
+function createKey(x, y) {
+    return `${x},${y}`;
+}
+function parseKey(key) {
+    const [x, y] = key.split(',').map(Number);
+    return { x, y };
+}
+export function generateLabyrinth(width, height) {
+    const cells = [];
+    for (let y = 0; y < height; y++) {
+        cells[y] = [];
+        for (let x = 0; x < width; x++) {
+            cells[y][x] = {
+                x,
+                y,
+                walls: {
+                    top: true,
+                    right: true,
+                    bottom: true,
+                    left: true
+                },
+                visited: false
+            };
+        }
+    }
+    const stack = [];
+    const startCell = cells[0][0];
+    startCell.visited = true;
+    stack.push(startCell);
+    while (stack.length > 0) {
+        const current = stack[stack.length - 1];
+        const neighbors = getUnvisitedNeighbors(current, cells, width, height);
+        if (neighbors.length > 0) {
+            const next = neighbors[Math.floor(Math.random() * neighbors.length)];
+            removeWall(current, next);
+            next.visited = true;
+            stack.push(next);
+        }
+        else {
+            stack.pop();
+        }
+    }
+    return cellsToGraph(cells, width, height);
+}
+function getUnvisitedNeighbors(cell, cells, width, height) {
+    const neighbors = [];
+    const { x, y } = cell;
+    if (y > 0 && !cells[y - 1][x].visited)
+        neighbors.push(cells[y - 1][x]);
+    if (x < width - 1 && !cells[y][x + 1].visited)
+        neighbors.push(cells[y][x + 1]);
+    if (y < height - 1 && !cells[y + 1][x].visited)
+        neighbors.push(cells[y + 1][x]);
+    if (x > 0 && !cells[y][x - 1].visited)
+        neighbors.push(cells[y][x - 1]);
+    return neighbors;
+}
+function removeWall(cell1, cell2) {
+    const dx = cell2.x - cell1.x;
+    const dy = cell2.y - cell1.y;
+    if (dx === 1) {
+        cell1.walls.right = false;
+        cell2.walls.left = false;
+    }
+    else if (dx === -1) {
+        cell1.walls.left = false;
+        cell2.walls.right = false;
+    }
+    else if (dy === 1) {
+        cell1.walls.bottom = false;
+        cell2.walls.top = false;
+    }
+    else if (dy === -1) {
+        cell1.walls.top = false;
+        cell2.walls.bottom = false;
+    }
+}
+function cellsToGraph(cells, width, height) {
+    const nodes = new Map();
+    for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+            const cell = cells[y][x];
+            const nodeId = createKey(x, y);
+            const neighbors = [];
+            if (!cell.walls.top && y > 0) {
+                neighbors.push(createKey(x, y - 1));
+            }
+            if (!cell.walls.right && x < width - 1) {
+                neighbors.push(createKey(x + 1, y));
+            }
+            if (!cell.walls.bottom && y < height - 1) {
+                neighbors.push(createKey(x, y + 1));
+            }
+            if (!cell.walls.left && x > 0) {
+                neighbors.push(createKey(x - 1, y));
+            }
+            nodes.set(nodeId, {
+                id: nodeId,
+                x,
+                y,
+                neighbors
+            });
+        }
+    }
+    return { nodes, width, height };
+}

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Cell {
+    x: number;
+    y: number;
+    walls: {
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+    };
+    visited: boolean;
+}
+export interface GraphNode {
+    id: string;
+    x: number;
+    y: number;
+    neighbors: string[];
+}
+export interface Graph {
+    nodes: Map<string, GraphNode>;
+    width: number;
+    height: number;
+}
+export interface PathStep {
+    nodeId: string;
+    type: 'visiting' | 'visited' | 'path' | 'current';
+    distance?: number;
+    heuristic?: number;
+    fScore?: number;
+}
+export interface AlgorithmResult {
+    path: string[];
+    steps: PathStep[];
+    found: boolean;
+}
+export type AlgorithmType = 'dijkstra' | 'astar';
+export interface ColorScheme {
+    start?: string;
+    end?: string;
+    current?: string;
+    visiting?: string;
+    visited?: string;
+    path?: string;
+    background?: string;
+    wall?: string;
+    grid?: string;
+    legend?: string;
+    legendtext?: string;
+    buttons?: string;
+    buttonshover?: string;
+    buttonsdisabled?: string;
+    buttonstext?: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/priority-queue.d.ts

@@ -0,0 +1,7 @@
+export declare class PriorityQueue<T> {
+    private items;
+    enqueue(element: T, priority: number): void;
+    dequeue(): T | undefined;
+    isEmpty(): boolean;
+    size(): number;
+}

package/dist/utils/priority-queue.js

@@ -0,0 +1,26 @@
+export class PriorityQueue {
+    items = [];
+    enqueue(element, priority) {
+        const item = { element, priority };
+        let added = false;
+        for (let i = 0; i < this.items.length; i++) {
+            if (item.priority < this.items[i].priority) {
+                this.items.splice(i, 0, item);
+                added = true;
+                break;
+            }
+        }
+        if (!added) {
+            this.items.push(item);
+        }
+    }
+    dequeue() {
+        return this.items.shift()?.element;
+    }
+    isEmpty() {
+        return this.items.length === 0;
+    }
+    size() {
+        return this.items.length;
+    }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@hayro_o7/labyrinth",
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.17",
+		"publint": "^0.2.12",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.17",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.6"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts"
+}