astar-visualizer 1.0.8 → 1.1.0

package/dist/astar-visualizer.js

@@ -1,22 +1,22 @@
-import { jsx as v, jsxs as N } from "react/jsx-runtime";
-import z, { useState as ee, useEffect as te, useRef as ne } from "react";
-const U = (e) => {
+import { jsx as l, jsxs as w, Fragment as V } from "react/jsx-runtime";
+import L, { useState as j, useEffect as se, useRef as re } from "react";
+const J = (e) => {
   let t;
-  const r = /* @__PURE__ */ new Set(), s = (d, c) => {
-    const u = typeof d == "function" ? d(t) : d;
-    if (!Object.is(u, t)) {
-      const f = t;
-      t = c ?? (typeof u != "object" || u === null) ? u : Object.assign({}, t, u), r.forEach((h) => h(t, f));
+  const n = /* @__PURE__ */ new Set(), r = (f, u) => {
+    const m = typeof f == "function" ? f(t) : f;
+    if (!Object.is(m, t)) {
+      const h = t;
+      t = u ?? (typeof m != "object" || m === null) ? m : Object.assign({}, t, m), n.forEach((g) => g(t, h));
     }
-  }, n = () => t, w = { setState: s, getState: n, getInitialState: () => i, subscribe: (d) => (r.add(d), () => r.delete(d)), destroy: () => {
-    r.clear();
-  } }, i = t = e(s, n, w);
-  return w;
-}, se = (e) => e ? U(e) : U;
-function ae(e) {
+  }, s = () => t, v = { setState: r, getState: s, getInitialState: () => i, subscribe: (f) => (n.add(f), () => n.delete(f)), destroy: () => {
+    n.clear();
+  } }, i = t = e(r, s, v);
+  return v;
+}, oe = (e) => e ? J(e) : J;
+function ie(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var B = { exports: {} }, k = {}, V = { exports: {} }, W = {};
+var B = { exports: {} }, z = {}, P = { exports: {} }, W = {};
 /**
  * @license React
  * use-sync-external-store-shim.production.js
@@ -26,49 +26,49 @@ var B = { exports: {} }, k = {}, V = { exports: {} }, W = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var q;
+var Y;
 function le() {
-  if (q)
+  if (Y)
     return W;
-  q = 1;
-  var e = z;
-  function t(c, u) {
-    return c === u && (c !== 0 || 1 / c === 1 / u) || c !== c && u !== u;
+  Y = 1;
+  var e = L;
+  function t(u, m) {
+    return u === m && (u !== 0 || 1 / u === 1 / m) || u !== u && m !== m;
   }
-  var r = typeof Object.is == "function" ? Object.is : t, s = e.useState, n = e.useEffect, o = e.useLayoutEffect, l = e.useDebugValue;
-  function p(c, u) {
-    var f = u(), h = s({ inst: { value: f, getSnapshot: u } }), m = h[0].inst, S = h[1];
-    return o(
+  var n = typeof Object.is == "function" ? Object.is : t, r = e.useState, s = e.useEffect, a = e.useLayoutEffect, c = e.useDebugValue;
+  function p(u, m) {
+    var h = m(), g = r({ inst: { value: h, getSnapshot: m } }), d = g[0].inst, y = g[1];
+    return a(
       function() {
-        m.value = f, m.getSnapshot = u, w(m) && S({ inst: m });
+        d.value = h, d.getSnapshot = m, v(d) && y({ inst: d });
       },
-      [c, f, u]
-    ), n(
+      [u, h, m]
+    ), s(
       function() {
-        return w(m) && S({ inst: m }), c(function() {
-          w(m) && S({ inst: m });
+        return v(d) && y({ inst: d }), u(function() {
+          v(d) && y({ inst: d });
         });
       },
-      [c]
-    ), l(f), f;
+      [u]
+    ), c(h), h;
   }
-  function w(c) {
-    var u = c.getSnapshot;
-    c = c.value;
+  function v(u) {
+    var m = u.getSnapshot;
+    u = u.value;
     try {
-      var f = u();
-      return !r(c, f);
+      var h = m();
+      return !n(u, h);
     } catch {
       return !0;
     }
   }
-  function i(c, u) {
-    return u();
+  function i(u, m) {
+    return m();
   }
-  var d = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? i : p;
-  return W.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : d, W;
+  var f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? i : p;
+  return W.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : f, W;
 }
-var P = {};
+var x = {};
 /**
  * @license React
  * use-sync-external-store-shim.development.js
@@ -78,62 +78,62 @@ var P = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var J;
-function ie() {
-  return J || (J = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(f, h) {
-      return f === h && (f !== 0 || 1 / f === 1 / h) || f !== f && h !== h;
+var Q;
+function ce() {
+  return Q || (Q = 1, process.env.NODE_ENV !== "production" && function() {
+    function e(h, g) {
+      return h === g && (h !== 0 || 1 / h === 1 / g) || h !== h && g !== g;
     }
-    function t(f, h) {
-      d || n.startTransition === void 0 || (d = !0, console.error(
+    function t(h, g) {
+      f || s.startTransition === void 0 || (f = !0, console.error(
         "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."
       ));
-      var m = h();
-      if (!c) {
-        var S = h();
-        o(m, S) || (console.error(
+      var d = g();
+      if (!u) {
+        var y = g();
+        a(d, y) || (console.error(
           "The result of getSnapshot should be cached to avoid an infinite loop"
-        ), c = !0);
+        ), u = !0);
       }
-      S = l({
-        inst: { value: m, getSnapshot: h }
+      y = c({
+        inst: { value: d, getSnapshot: g }
       });
-      var E = S[0].inst, O = S[1];
-      return w(
+      var E = y[0].inst, _ = y[1];
+      return v(
         function() {
-          E.value = m, E.getSnapshot = h, r(E) && O({ inst: E });
+          E.value = d, E.getSnapshot = g, n(E) && _({ inst: E });
         },
-        [f, m, h]
+        [h, d, g]
       ), p(
         function() {
-          return r(E) && O({ inst: E }), f(function() {
-            r(E) && O({ inst: E });
+          return n(E) && _({ inst: E }), h(function() {
+            n(E) && _({ inst: E });
           });
         },
-        [f]
-      ), i(m), m;
+        [h]
+      ), i(d), d;
     }
-    function r(f) {
-      var h = f.getSnapshot;
-      f = f.value;
+    function n(h) {
+      var g = h.getSnapshot;
+      h = h.value;
       try {
-        var m = h();
-        return !o(f, m);
+        var d = g();
+        return !a(h, d);
       } catch {
         return !0;
       }
     }
-    function s(f, h) {
-      return h();
+    function r(h, g) {
+      return g();
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var n = z, o = typeof Object.is == "function" ? Object.is : e, l = n.useState, p = n.useEffect, w = n.useLayoutEffect, i = n.useDebugValue, d = !1, c = !1, u = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? s : t;
-    P.useSyncExternalStore = n.useSyncExternalStore !== void 0 ? n.useSyncExternalStore : u, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  }()), P;
+    var s = L, a = typeof Object.is == "function" ? Object.is : e, c = s.useState, p = s.useEffect, v = s.useLayoutEffect, i = s.useDebugValue, f = !1, u = !1, m = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? r : t;
+    x.useSyncExternalStore = s.useSyncExternalStore !== void 0 ? s.useSyncExternalStore : m, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), x;
 }
-var Y;
-function re() {
-  return Y || (Y = 1, process.env.NODE_ENV === "production" ? V.exports = le() : V.exports = ie()), V.exports;
+var X;
+function ne() {
+  return X || (X = 1, process.env.NODE_ENV === "production" ? P.exports = le() : P.exports = ce()), P.exports;
 }
 /**
  * @license React
@@ -144,59 +144,59 @@ function re() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var Q;
-function ce() {
-  if (Q)
-    return k;
-  Q = 1;
-  var e = z, t = re();
-  function r(i, d) {
-    return i === d && (i !== 0 || 1 / i === 1 / d) || i !== i && d !== d;
+var Z;
+function ue() {
+  if (Z)
+    return z;
+  Z = 1;
+  var e = L, t = ne();
+  function n(i, f) {
+    return i === f && (i !== 0 || 1 / i === 1 / f) || i !== i && f !== f;
   }
-  var s = typeof Object.is == "function" ? Object.is : r, n = t.useSyncExternalStore, o = e.useRef, l = e.useEffect, p = e.useMemo, w = e.useDebugValue;
-  return k.useSyncExternalStoreWithSelector = function(i, d, c, u, f) {
-    var h = o(null);
-    if (h.current === null) {
-      var m = { hasValue: !1, value: null };
-      h.current = m;
+  var r = typeof Object.is == "function" ? Object.is : n, s = t.useSyncExternalStore, a = e.useRef, c = e.useEffect, p = e.useMemo, v = e.useDebugValue;
+  return z.useSyncExternalStoreWithSelector = function(i, f, u, m, h) {
+    var g = a(null);
+    if (g.current === null) {
+      var d = { hasValue: !1, value: null };
+      g.current = d;
     } else
-      m = h.current;
-    h = p(
+      d = g.current;
+    g = p(
       function() {
-        function E(_) {
-          if (!O) {
-            if (O = !0, b = _, _ = u(_), f !== void 0 && m.hasValue) {
-              var C = m.value;
-              if (f(C, _))
-                return M = C;
+        function E(S) {
+          if (!_) {
+            if (_ = !0, b = S, S = m(S), h !== void 0 && d.hasValue) {
+              var O = d.value;
+              if (h(O, S))
+                return M = O;
             }
-            return M = _;
+            return M = S;
           }
-          if (C = M, s(b, _))
-            return C;
-          var L = u(_);
-          return f !== void 0 && f(C, L) ? (b = _, C) : (b = _, M = L);
+          if (O = M, r(b, S))
+            return O;
+          var C = m(S);
+          return h !== void 0 && h(O, C) ? (b = S, O) : (b = S, M = C);
         }
-        var O = !1, b, M, R = c === void 0 ? null : c;
+        var _ = !1, b, M, N = u === void 0 ? null : u;
         return [
           function() {
-            return E(d());
+            return E(f());
           },
-          R === null ? void 0 : function() {
-            return E(R());
+          N === null ? void 0 : function() {
+            return E(N());
           }
         ];
       },
-      [d, c, u, f]
+      [f, u, m, h]
     );
-    var S = n(i, h[0], h[1]);
-    return l(
+    var y = s(i, g[0], g[1]);
+    return c(
       function() {
-        m.hasValue = !0, m.value = S;
+        d.hasValue = !0, d.value = y;
       },
-      [S]
-    ), w(S), S;
-  }, k;
+      [y]
+    ), v(y), y;
+  }, z;
 }
 var I = {};
 /**
@@ -208,152 +208,152 @@ var I = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var X;
-function ue() {
-  return X || (X = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(i, d) {
-      return i === d && (i !== 0 || 1 / i === 1 / d) || i !== i && d !== d;
+var ee;
+function de() {
+  return ee || (ee = 1, process.env.NODE_ENV !== "production" && function() {
+    function e(i, f) {
+      return i === f && (i !== 0 || 1 / i === 1 / f) || i !== i && f !== f;
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var t = z, r = re(), s = typeof Object.is == "function" ? Object.is : e, n = r.useSyncExternalStore, o = t.useRef, l = t.useEffect, p = t.useMemo, w = t.useDebugValue;
-    I.useSyncExternalStoreWithSelector = function(i, d, c, u, f) {
-      var h = o(null);
-      if (h.current === null) {
-        var m = { hasValue: !1, value: null };
-        h.current = m;
+    var t = L, n = ne(), r = typeof Object.is == "function" ? Object.is : e, s = n.useSyncExternalStore, a = t.useRef, c = t.useEffect, p = t.useMemo, v = t.useDebugValue;
+    I.useSyncExternalStoreWithSelector = function(i, f, u, m, h) {
+      var g = a(null);
+      if (g.current === null) {
+        var d = { hasValue: !1, value: null };
+        g.current = d;
       } else
-        m = h.current;
-      h = p(
+        d = g.current;
+      g = p(
         function() {
-          function E(_) {
-            if (!O) {
-              if (O = !0, b = _, _ = u(_), f !== void 0 && m.hasValue) {
-                var C = m.value;
-                if (f(C, _))
-                  return M = C;
+          function E(S) {
+            if (!_) {
+              if (_ = !0, b = S, S = m(S), h !== void 0 && d.hasValue) {
+                var O = d.value;
+                if (h(O, S))
+                  return M = O;
               }
-              return M = _;
+              return M = S;
             }
-            if (C = M, s(b, _))
-              return C;
-            var L = u(_);
-            return f !== void 0 && f(C, L) ? (b = _, C) : (b = _, M = L);
+            if (O = M, r(b, S))
+              return O;
+            var C = m(S);
+            return h !== void 0 && h(O, C) ? (b = S, O) : (b = S, M = C);
           }
-          var O = !1, b, M, R = c === void 0 ? null : c;
+          var _ = !1, b, M, N = u === void 0 ? null : u;
           return [
             function() {
-              return E(d());
+              return E(f());
             },
-            R === null ? void 0 : function() {
-              return E(R());
+            N === null ? void 0 : function() {
+              return E(N());
             }
           ];
         },
-        [d, c, u, f]
+        [f, u, m, h]
       );
-      var S = n(i, h[0], h[1]);
-      return l(
+      var y = s(i, g[0], g[1]);
+      return c(
         function() {
-          m.hasValue = !0, m.value = S;
+          d.hasValue = !0, d.value = y;
         },
-        [S]
-      ), w(S), S;
+        [y]
+      ), v(y), y;
     }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
   }()), I;
 }
-process.env.NODE_ENV === "production" ? B.exports = ce() : B.exports = ue();
-var de = B.exports;
-const fe = /* @__PURE__ */ ae(de), { useDebugValue: he } = z, { useSyncExternalStoreWithSelector: me } = fe;
-const pe = (e) => e;
-function ve(e, t = pe, r) {
-  const s = me(
+process.env.NODE_ENV === "production" ? B.exports = ue() : B.exports = de();
+var me = B.exports;
+const he = /* @__PURE__ */ ie(me), { useDebugValue: fe } = L, { useSyncExternalStoreWithSelector: pe } = he;
+const ve = (e) => e;
+function ge(e, t = ve, n) {
+  const r = pe(
     e.subscribe,
     e.getState,
     e.getServerState || e.getInitialState,
     t,
-    r
+    n
   );
-  return he(s), s;
+  return fe(r), r;
 }
-const Z = (e) => {
-  const t = typeof e == "function" ? se(e) : e, r = (s, n) => ve(t, s, n);
-  return Object.assign(r, t), r;
-}, we = (e) => e ? Z(e) : Z;
-var a = /* @__PURE__ */ ((e) => (e[e.Empty = 0] = "Empty", e[e.Start = 1] = "Start", e[e.End = 2] = "End", e[e.Obstacle = 3] = "Obstacle", e[e.Visited = 4] = "Visited", e[e.Path = 5] = "Path", e[e.Water = 6] = "Water", e[e.Forest = 7] = "Forest", e[e.Mountain = 8] = "Mountain", e))(a || {}), A = /* @__PURE__ */ ((e) => (e.Classic = "classic", e.Medieval = "medieval", e))(A || {});
-const x = (e, t) => {
-  const r = Math.abs(e.row - t.row), s = Math.abs(e.col - t.col);
-  return Math.floor(10 * Math.sqrt(r * r + s * s));
-}, be = (e, t) => ({
+const te = (e) => {
+  const t = typeof e == "function" ? oe(e) : e, n = (r, s) => ge(t, r, s);
+  return Object.assign(n, t), n;
+}, be = (e) => e ? te(e) : te;
+var o = /* @__PURE__ */ ((e) => (e[e.Empty = 0] = "Empty", e[e.Start = 1] = "Start", e[e.End = 2] = "End", e[e.Obstacle = 3] = "Obstacle", e[e.Visited = 4] = "Visited", e[e.Path = 5] = "Path", e[e.Water = 6] = "Water", e[e.Forest = 7] = "Forest", e[e.Mountain = 8] = "Mountain", e))(o || {}), A = /* @__PURE__ */ ((e) => (e.Classic = "classic", e.Medieval = "medieval", e))(A || {});
+const F = (e, t) => {
+  const n = Math.abs(e.row - t.row), r = Math.abs(e.col - t.col);
+  return Math.floor(10 * Math.sqrt(n * n + r * r));
+}, we = (e, t) => ({
   row: e.row,
   col: e.col,
   g: 0,
-  h: x(e, t),
-  f: x(e, t),
+  h: F(e, t),
+  f: F(e, t),
   parent: null
-}), ge = (e, t, r) => {
-  const s = [
+}), Se = (e, t, n) => {
+  const r = [
     { row: e.row - 1, col: e.col },
     { row: e.row + 1, col: e.col },
     { row: e.row, col: e.col - 1 },
     { row: e.row, col: e.col + 1 }
   ];
-  r && s.push(
+  n && r.push(
     { row: e.row - 1, col: e.col - 1 },
     { row: e.row - 1, col: e.col + 1 },
     { row: e.row + 1, col: e.col - 1 },
     { row: e.row + 1, col: e.col + 1 }
   );
-  const n = [a.Obstacle, a.Water, a.Mountain];
-  return s.filter((o) => o.row >= 0 && o.row < t.length && o.col >= 0 && o.col < t[0].length && !n.includes(t[o.row][o.col].state)).map((o) => ({
-    row: o.row,
-    col: o.col,
-    state: t[o.row][o.col].state
+  const s = [o.Obstacle, o.Water, o.Mountain];
+  return r.filter((a) => a.row >= 0 && a.row < t.length && a.col >= 0 && a.col < t[0].length && !s.includes(t[a.row][a.col].state)).map((a) => ({
+    row: a.row,
+    col: a.col,
+    state: t[a.row][a.col].state
   }));
-}, Ee = (e, t, r) => {
-  const s = Math.abs(e.row - t.row), n = Math.abs(e.col - t.col), o = e.g + (s === 0 || n === 0 ? 10 : 14), l = x(t, r), p = o + l;
-  return { g: o, h: l, f: p };
-}, Se = (e) => {
+}, Ee = (e, t, n) => {
+  const r = Math.abs(e.row - t.row), s = Math.abs(e.col - t.col), a = e.g + (r === 0 || s === 0 ? 10 : 14), c = F(t, n), p = a + c;
+  return { g: a, h: c, f: p };
+}, Ne = (e) => {
   const t = [];
-  let r = e;
-  for (; r; )
-    t.push(r), r = r.parent;
+  let n = e;
+  for (; n; )
+    t.push(n), n = n.parent;
   return t.reverse();
-}, _e = (e, t, r, s) => {
-  const n = [], o = [], l = be(t, r);
-  for (n.push(l); n.length > 0; ) {
-    n.sort((i, d) => i.f - d.f);
-    const p = n.shift();
-    if (p.row === r.row && p.col === r.col)
-      return o.push(p), { path: Se(p), visitedNodes: o };
-    o.push(p);
-    const w = ge(p, e, s);
-    for (const i of w) {
-      if (o.some((h) => h.row === i.row && h.col === i.col))
+}, ye = (e, t, n, r) => {
+  const s = [], a = [], c = we(t, n);
+  for (s.push(c); s.length > 0; ) {
+    s.sort((i, f) => i.f - f.f);
+    const p = s.shift();
+    if (p.row === n.row && p.col === n.col)
+      return a.push(p), { path: Ne(p), visitedNodes: a };
+    a.push(p);
+    const v = Se(p, e, r);
+    for (const i of v) {
+      if (a.some((g) => g.row === i.row && g.col === i.col))
         continue;
-      const { g: d, h: c, f: u } = Ee(p, i, r), f = n.find(
-        (h) => h.row === i.row && h.col === i.col
+      const { g: f, h: u, f: m } = Ee(p, i, n), h = s.find(
+        (g) => g.row === i.row && g.col === i.col
       );
-      if (!f || d < f.g) {
-        const h = {
+      if (!h || f < h.g) {
+        const g = {
           row: i.row,
           col: i.col,
-          g: d,
-          h: c,
-          f: u,
+          g: f,
+          h: u,
+          f: m,
           parent: p
         };
-        f ? (f.g = d, f.f = u, f.parent = p) : n.push(h);
+        h ? (h.g = f, h.f = m, h.parent = p) : s.push(g);
       }
     }
   }
-  return { path: [], visitedNodes: o };
-}, Oe = (e) => ({
+  return { path: [], visitedNodes: a };
+}, _e = (e) => ({
   cells: Array.from(
     { length: 8 },
-    (t, r) => Array.from({ length: 12 }, (s, n) => ({
-      row: r,
-      col: n,
-      state: a.Empty
+    (t, n) => Array.from({ length: 12 }, (r, s) => ({
+      row: n,
+      col: s,
+      state: o.Empty
     }))
   ),
   rows: 8,
@@ -364,73 +364,73 @@ const x = (e, t) => {
   path: [],
   visitedNodes: [],
   setNumberOfColumns: (t) => {
-    e((r) => {
-      const s = r.cells.map((n) => t > r.columns ? [
-        ...n,
+    e((n) => {
+      const r = n.cells.map((s) => t > n.columns ? [
+        ...s,
         ...Array.from(
-          { length: t - r.columns },
-          (o, l) => ({
-            row: n[0].row,
-            col: r.columns + l,
-            state: a.Empty
+          { length: t - n.columns },
+          (a, c) => ({
+            row: s[0].row,
+            col: n.columns + c,
+            state: o.Empty
           })
         )
-      ] : n.slice(0, t));
+      ] : s.slice(0, t));
       return {
-        ...r,
+        ...n,
         columns: t,
-        cells: s
+        cells: r
       };
     });
   },
   setNumberOfRows: (t) => {
-    e((r) => {
-      let s = [...r.cells];
-      return t > r.rows ? s = [
-        ...s,
+    e((n) => {
+      let r = [...n.cells];
+      return t > n.rows ? r = [
+        ...r,
         ...Array.from(
-          { length: t - r.rows },
-          (n, o) => Array.from({ length: r.columns }, (l, p) => ({
-            row: r.rows + o,
+          { length: t - n.rows },
+          (s, a) => Array.from({ length: n.columns }, (c, p) => ({
+            row: n.rows + a,
             col: p,
-            state: a.Empty
+            state: o.Empty
           }))
         )
-      ] : s = s.slice(0, t), {
-        ...r,
+      ] : r = r.slice(0, t), {
+        ...n,
         rows: t,
-        cells: s
+        cells: r
       };
     });
   },
-  setCellState: (t, r, s) => {
-    e((n) => {
-      const o = n.cells.map(
-        (i) => i.map((d) => ({ ...d }))
+  setCellState: (t, n, r) => {
+    e((s) => {
+      const a = s.cells.map(
+        (i) => i.map((f) => ({ ...f }))
       );
-      let l = n.startTile, p = n.endTile, w = [...n.obstacleTiles];
-      switch (s === a.Start && n.startTile && (o[n.startTile.row][n.startTile.col].state = a.Empty, l = null), s === a.End && n.endTile && (o[n.endTile.row][n.endTile.col].state = a.Empty, p = null), o[t][r].state = s, s) {
-        case a.Start:
-          l = { row: t, col: r };
+      let c = s.startTile, p = s.endTile, v = [...s.obstacleTiles];
+      switch (r === o.Start && s.startTile && (a[s.startTile.row][s.startTile.col].state = o.Empty, c = null), r === o.End && s.endTile && (a[s.endTile.row][s.endTile.col].state = o.Empty, p = null), a[t][n].state = r, r) {
+        case o.Start:
+          c = { row: t, col: n };
           break;
-        case a.End:
-          p = { row: t, col: r };
+        case o.End:
+          p = { row: t, col: n };
           break;
-        case a.Obstacle:
-          w.some((i) => i.row === t && i.col === r) || w.push({ row: t, col: r });
+        case o.Obstacle:
+          v.some((i) => i.row === t && i.col === n) || v.push({ row: t, col: n });
           break;
-        case a.Empty:
-          w = w.filter(
-            (i) => !(i.row === t && i.col === r)
+        case o.Empty:
+          v = v.filter(
+            (i) => !(i.row === t && i.col === n)
           );
           break;
       }
       return {
-        ...n,
-        cells: o,
-        startTile: l,
+        ...s,
+        cells: a,
+        startTile: c,
         endTile: p,
-        obstacleTiles: w
+        obstacleTiles: v
       };
     });
   },
@@ -438,9 +438,9 @@ const x = (e, t) => {
     e((t) => ({
       ...t,
       cells: t.cells.map(
-        (r) => r.map((s) => ({
-          ...s,
-          state: a.Empty
+        (n) => n.map((r) => ({
+          ...r,
+          state: o.Empty
         }))
       ),
       startTile: null,
@@ -451,170 +451,183 @@ const x = (e, t) => {
     }));
   },
   handleFindPath: (t) => {
-    e((r) => {
-      const s = r.cells.flat().find((o) => o.state === a.Start), n = r.cells.flat().find((o) => o.state === a.End);
-      if (s && n) {
-        const o = r.cells.map(
-          (i) => i.map((d) => ({
-            row: d.row,
-            col: d.col,
-            state: d.state
+    e((n) => {
+      const r = n.cells.flat().find((a) => a.state === o.Start), s = n.cells.flat().find((a) => a.state === o.End);
+      if (r && s) {
+        const a = n.cells.map(
+          (i) => i.map((f) => ({
+            row: f.row,
+            col: f.col,
+            state: f.state
           }))
-        ), { path: l, visitedNodes: p } = _e(o, s, n, t);
-        return (async (i, d) => {
-          for (let c of d)
-            await new Promise((u) => setTimeout(u, 100)), e((u) => {
-              const f = u.cells.map(
-                (h) => h.map((m) => ({
-                  ...m,
-                  state: c.row === m.row && c.col === m.col && m.state === a.Empty ? a.Visited : m.state
+        ), { path: c, visitedNodes: p } = ye(a, r, s, t);
+        return (async (i, f) => {
+          for (let u of f)
+            await new Promise((m) => setTimeout(m, 100)), e((m) => {
+              const h = m.cells.map(
+                (g) => g.map((d) => ({
+                  ...d,
+                  state: u.row === d.row && u.col === d.col && d.state === o.Empty ? o.Visited : d.state
                 }))
               );
               return {
-                ...u,
-                cells: f,
-                visitedNodes: [...u.visitedNodes, c]
+                ...m,
+                cells: h,
+                visitedNodes: [...m.visitedNodes, u]
               };
             });
-          for (let c of i)
-            await new Promise((u) => setTimeout(u, 250)), e((u) => {
-              const f = u.cells.map(
-                (h) => h.map((m) => ({
-                  ...m,
-                  state: c.row === m.row && c.col === m.col ? a.Path : m.state
+          for (let u of i)
+            await new Promise((m) => setTimeout(m, 250)), e((m) => {
+              const h = m.cells.map(
+                (g) => g.map((d) => ({
+                  ...d,
+                  state: u.row === d.row && u.col === d.col ? o.Path : d.state
                 }))
               );
               return {
-                ...u,
-                cells: f,
-                path: [...u.path, c]
+                ...m,
+                cells: h,
+                path: [...m.path, u]
               };
             });
-        })(l, p), { ...r, path: [], visitedNodes: [] };
+        })(c, p), { ...n, path: [], visitedNodes: [] };
       }
-      return r;
+      return n;
     });
   },
   setPath: (t) => {
-    e((r) => {
-      const s = r.cells.map(
-        (n) => n.map((o) => ({
-          ...o,
-          state: t.some((l) => l.row === o.row && l.col === o.col) ? a.Path : o.state
+    e((n) => {
+      const r = n.cells.map(
+        (s) => s.map((a) => ({
+          ...a,
+          state: t.some((c) => c.row === a.row && c.col === a.col) ? o.Path : a.state
         }))
       );
       return {
-        ...r,
-        cells: s
+        ...n,
+        cells: r
       };
     });
   },
   setVisitedNodes: (t) => {
-    e((r) => {
-      const s = r.cells.map(
-        (n) => n.map((o) => ({
-          ...o,
-          state: t.some((l) => l.row === o.row && l.col === o.col) && o.state === a.Empty ? a.Visited : o.state
+    e((n) => {
+      const r = n.cells.map(
+        (s) => s.map((a) => ({
+          ...a,
+          state: t.some((c) => c.row === a.row && c.col === a.col) && a.state === o.Empty ? o.Visited : a.state
         }))
       );
       return {
-        ...r,
-        cells: s
+        ...n,
+        cells: r
       };
     });
   }
-}), ye = (e) => ({
-  activeButton: a.Start,
+}), Oe = (e) => ({
+  activeButton: o.Start,
   setSelectedButtonState: (t) => e({ activeButton: t }),
   canTravelDiagonally: !0,
   setCanTravelDiagonally: (t) => e({ canTravelDiagonally: t })
-}), Ne = (e) => ({
+}), Me = (e) => ({
   visualTheme: A.Medieval,
   showCosts: !1,
   setVisualTheme: (t) => e({ visualTheme: t }),
   setShowCosts: (t) => e({ showCosts: t })
-}), j = we((e, t, r) => ({
+}), Te = (e) => ({
+  currentRun: null,
+  isAnimating: !1,
+  isPaused: !1,
+  animationSpeed: 1,
+  startAnimation: () => e({ isAnimating: !0, isPaused: !1 }),
+  stopAnimation: () => e({ isAnimating: !1, isPaused: !1 }),
+  pauseAnimation: () => e({ isPaused: !0 }),
+  resumeAnimation: () => e({ isPaused: !1 }),
+  setAnimationSpeed: (t) => e({ animationSpeed: t }),
+  setCurrentRun: (t) => e({ currentRun: t }),
+  clearCurrentRun: () => e({ currentRun: null })
+}), D = be((e, t, n) => ({
+  ..._e(e),
   ...Oe(e),
-  ...ye(e),
-  ...Ne(e)
-})), Me = {
+  ...Me(e),
+  ...Te(e)
+})), Ce = {
   id: A.Classic,
   name: "Classic",
   startIcon: "●",
   endIcon: "●",
   terrains: {
-    [a.Obstacle]: { name: "Wall", icon: "■", passable: !1 }
+    [o.Obstacle]: { name: "Wall", icon: "■", passable: !1 }
   },
   presets: [
-    { id: "random", name: "Random", icon: "🎲" },
-    { id: "maze", name: "Maze", icon: "🔲" }
+    { id: "random", name: "Random", icon: "" },
+    { id: "maze", name: "Maze", icon: "" }
   ]
-}, Ce = {
+}, Re = {
   id: A.Medieval,
   name: "Medieval",
   startIcon: "⚔️",
   endIcon: "🏰",
   terrains: {
-    [a.Obstacle]: { name: "Wall", icon: "🧱", passable: !1 },
-    [a.Water]: { name: "Water", icon: "🌊", passable: !1 },
-    [a.Forest]: { name: "Forest", icon: "🌲", passable: !0 },
-    [a.Mountain]: { name: "Mountain", icon: "⛰️", passable: !1 }
+    [o.Obstacle]: { name: "Wall", icon: "🧱", passable: !1 },
+    [o.Water]: { name: "Water", icon: "🌊", passable: !1 },
+    [o.Forest]: { name: "Forest", icon: "🌲", passable: !0 },
+    [o.Mountain]: { name: "Mountain", icon: "⛰️", passable: !1 }
   },
   presets: [
-    { id: "river", name: "River Crossing", icon: "🌊" },
-    { id: "mountains", name: "Mountain Range", icon: "⛰️" },
-    { id: "maze", name: "Castle Maze", icon: "🏰" },
-    { id: "random", name: "Random Forest", icon: "🎲" }
+    { id: "river", name: "River Crossing", icon: "" },
+    { id: "mountains", name: "Mountain Range", icon: "" },
+    { id: "maze", name: "Castle Maze", icon: "" },
+    { id: "random", name: "Random Forest", icon: "" }
   ]
-}, oe = {
-  [A.Classic]: Me,
-  [A.Medieval]: Ce
-}, F = (e) => oe[e], Te = (e) => {
-  const t = F(e);
-  return Object.entries(t.terrains).map(([r, s]) => ({
-    state: Number(r),
-    config: s
+}, ae = {
+  [A.Classic]: Ce,
+  [A.Medieval]: Re
+}, $ = (e) => ae[e], Ae = (e) => {
+  const t = $(e);
+  return Object.entries(t.terrains).map(([n, r]) => ({
+    state: Number(n),
+    config: r
   }));
 };
-const Re = () => {
-  var S;
-  const { cells: e, activeButton: t, setCellState: r, setSelectedButtonState: s, visitedNodes: n, path: o, visualTheme: l, showCosts: p } = j(), w = F(l), [i, d] = ee({ width: 0, height: 0 }), c = z.useRef(null);
-  te(() => {
+const Le = () => {
+  var y;
+  const { cells: e, activeButton: t, setCellState: n, setSelectedButtonState: r, visitedNodes: s, path: a, visualTheme: c, showCosts: p } = D(), v = $(c), [i, f] = j({ width: 0, height: 0 }), u = L.useRef(null);
+  se(() => {
     const E = () => {
-      if (c.current) {
-        const O = c.current.getBoundingClientRect();
-        d({ width: O.width, height: O.height });
+      if (u.current) {
+        const _ = u.current.getBoundingClientRect();
+        f({ width: _.width, height: _.height });
       }
     };
     return E(), window.addEventListener("resize", E), () => window.removeEventListener("resize", E);
   }, []);
-  const u = (E, O) => {
-    switch (r(E, O, t), t) {
-      case a.Start:
-        s(a.End);
+  const m = (E, _) => {
+    switch (n(E, _, t), t) {
+      case o.Start:
+        r(o.End);
         break;
-      case a.End:
-        s(a.Obstacle);
+      case o.End:
+        r(o.Obstacle);
         break;
     }
-  }, f = (E, O) => {
-    const b = n.find((M) => M.row === E && M.col === O);
+  }, h = (E, _) => {
+    const b = s.find((M) => M.row === E && M.col === _);
     return b ? { g: b.g, h: b.h, f: b.f } : { g: null, h: null, f: null };
-  }, m = (() => {
-    var y;
+  }, d = (() => {
+    var R;
     if (!i.width || !i.height)
       return 20;
-    const E = ((y = e[0]) == null ? void 0 : y.length) || 1, O = e.length || 1, b = 20, M = E + O, R = i.width - b - M, _ = i.height - b - M, C = R / E, L = _ / O, g = Math.min(C, L);
-    return Math.max(15, Math.min(g, 60));
+    const E = ((R = e[0]) == null ? void 0 : R.length) || 1, _ = e.length || 1, b = 20, M = E + _, N = i.width - b - M, S = i.height - b - M, O = N / E, C = S / _, k = Math.min(O, C);
+    return Math.max(15, Math.min(k, 60));
   })();
-  return /* @__PURE__ */ v("div", { className: "grid-wrapper", ref: c, children: /* @__PURE__ */ v(
+  return /* @__PURE__ */ l("div", { className: "grid-wrapper", ref: u, children: /* @__PURE__ */ l(
     "div",
     {
       className: "grid-container",
       style: {
         display: "grid",
-        gridTemplateColumns: `repeat(${((S = e[0]) == null ? void 0 : S.length) || 1}, ${m}px)`,
-        gridTemplateRows: `repeat(${e.length || 1}, ${m}px)`,
+        gridTemplateColumns: `repeat(${((y = e[0]) == null ? void 0 : y.length) || 1}, ${d}px)`,
+        gridTemplateRows: `repeat(${e.length || 1}, ${d}px)`,
         gap: "1px",
         padding: "8px",
         background: "var(--bg-secondary)",
@@ -623,23 +636,23 @@ const Re = () => {
         border: "1px solid var(--border-color)"
       },
       children: e.map(
-        (E, O) => E.map((b, M) => {
-          var D, G, $, H;
-          const R = o.some((T) => T.row === b.row && T.col === b.col), _ = n.some((T) => T.row === b.row && T.col === b.col), { g: C, h: L, f: g } = f(b.row, b.col);
-          let y = Le(b, _);
-          if (R) {
-            const T = o.findIndex((K) => K.row === b.row && K.col === b.col);
-            T === 0 ? y = "var(--cell-start)" : T === o.length - 1 ? y = "var(--cell-end)" : y = "var(--cell-path)";
+        (E, _) => E.map((b, M) => {
+          var G, H, K, U;
+          const N = a.some((T) => T.row === b.row && T.col === b.col), S = s.some((T) => T.row === b.row && T.col === b.col), { g: O, h: C, f: k } = h(b.row, b.col);
+          let R = De(b, S);
+          if (N) {
+            const T = a.findIndex((q) => q.row === b.row && q.col === b.col);
+            T === 0 ? R = "var(--cell-start)" : T === a.length - 1 ? R = "var(--cell-end)" : R = "var(--cell-path)";
           }
-          return /* @__PURE__ */ N(
+          return /* @__PURE__ */ w(
             "div",
             {
               className: "grid-cell",
-              onClick: () => u(O, M),
+              onClick: () => m(_, M),
               style: {
-                width: m,
-                height: m,
-                backgroundColor: y,
+                width: d,
+                height: d,
+                backgroundColor: R,
                 border: "1px solid var(--cell-border)",
                 cursor: "pointer",
                 transition: "all 0.15s ease",
@@ -650,373 +663,468 @@ const Re = () => {
                 borderRadius: "2px"
               },
               onMouseEnter: (T) => {
-                b.state === a.Empty && (T.currentTarget.style.backgroundColor = "var(--bg-tertiary)", T.currentTarget.style.transform = "scale(1.02)");
+                b.state === o.Empty && (T.currentTarget.style.backgroundColor = "var(--bg-tertiary)", T.currentTarget.style.transform = "scale(1.02)");
               },
               onMouseLeave: (T) => {
-                b.state === a.Empty && (T.currentTarget.style.backgroundColor = y, T.currentTarget.style.transform = "scale(1)");
+                b.state === o.Empty && (T.currentTarget.style.backgroundColor = R, T.currentTarget.style.transform = "scale(1)");
               },
               children: [
-                _ && p && /* @__PURE__ */ N("div", { className: "cell-values", children: [
-                  /* @__PURE__ */ N("div", { className: "value-h", children: [
+                S && p && /* @__PURE__ */ w("div", { className: "cell-values", children: [
+                  /* @__PURE__ */ w("div", { className: "value-h", children: [
                     "h",
-                    L
+                    C
                   ] }),
-                  /* @__PURE__ */ N("div", { className: "value-f", children: [
+                  /* @__PURE__ */ w("div", { className: "value-f", children: [
                     "f",
-                    g
+                    k
                   ] }),
-                  /* @__PURE__ */ N("div", { className: "value-g", children: [
+                  /* @__PURE__ */ w("div", { className: "value-g", children: [
                     "g",
-                    C
+                    O
                   ] })
                 ] }),
-                b.state === a.Start && /* @__PURE__ */ v("div", { className: "cell-indicator start", children: w.startIcon }),
-                b.state === a.End && /* @__PURE__ */ v("div", { className: "cell-indicator end", children: w.endIcon }),
-                b.state === a.Obstacle && /* @__PURE__ */ v("div", { className: "cell-indicator obstacle", children: ((D = w.terrains[a.Obstacle]) == null ? void 0 : D.icon) || "■" }),
-                b.state === a.Water && /* @__PURE__ */ v("div", { className: "cell-indicator water", children: ((G = w.terrains[a.Water]) == null ? void 0 : G.icon) || "🌊" }),
-                b.state === a.Forest && /* @__PURE__ */ v("div", { className: "cell-indicator forest", children: (($ = w.terrains[a.Forest]) == null ? void 0 : $.icon) || "🌲" }),
-                b.state === a.Mountain && /* @__PURE__ */ v("div", { className: "cell-indicator mountain", children: ((H = w.terrains[a.Mountain]) == null ? void 0 : H.icon) || "⛰️" })
+                b.state === o.Start && /* @__PURE__ */ l("div", { className: "cell-indicator start", style: { fontSize: d * 0.7 }, children: v.startIcon }),
+                b.state === o.End && /* @__PURE__ */ l("div", { className: "cell-indicator end", style: { fontSize: d * 0.7 }, children: v.endIcon }),
+                b.state === o.Obstacle && /* @__PURE__ */ l("div", { className: "cell-indicator obstacle", style: { fontSize: d * 0.7 }, children: ((G = v.terrains[o.Obstacle]) == null ? void 0 : G.icon) || "■" }),
+                b.state === o.Water && /* @__PURE__ */ l("div", { className: "cell-indicator water", style: { fontSize: d * 0.7 }, children: ((H = v.terrains[o.Water]) == null ? void 0 : H.icon) || "🌊" }),
+                b.state === o.Forest && /* @__PURE__ */ l("div", { className: "cell-indicator forest", style: { fontSize: d * 0.7 }, children: ((K = v.terrains[o.Forest]) == null ? void 0 : K.icon) || "🌲" }),
+                b.state === o.Mountain && /* @__PURE__ */ l("div", { className: "cell-indicator mountain", style: { fontSize: d * 0.7 }, children: ((U = v.terrains[o.Mountain]) == null ? void 0 : U.icon) || "⛰️" })
               ]
             },
-            `${O}-${M}`
+            `${_}-${M}`
           );
         })
       )
     }
   ) });
-}, Le = (e, t) => {
+}, De = (e, t) => {
   if (t)
-    return e.state === a.Start ? "var(--cell-start)" : e.state === a.End ? "var(--cell-end)" : "var(--cell-visited)";
+    return e.state === o.Start ? "var(--cell-start)" : e.state === o.End ? "var(--cell-end)" : "var(--cell-visited)";
   switch (e.state) {
-    case a.Start:
+    case o.Start:
       return "var(--cell-start)";
-    case a.End:
+    case o.End:
       return "var(--cell-end)";
-    case a.Obstacle:
+    case o.Obstacle:
       return "var(--cell-obstacle)";
-    case a.Water:
+    case o.Water:
       return "var(--cell-water)";
-    case a.Forest:
+    case o.Forest:
       return "var(--cell-forest)";
-    case a.Mountain:
+    case o.Mountain:
       return "var(--cell-mountain)";
-    case a.Empty:
+    case o.Empty:
       return "var(--cell-empty)";
     default:
       return "var(--cell-empty)";
   }
-}, Ae = (e, t) => {
-  const r = [], s = Math.floor(e / 2), n = Math.max(2, Math.floor(t / 6)), o = [];
-  for (let l = 0; l < n; l++) {
-    const p = Math.floor(t / (n + 1) * (l + 1));
-    o.push(p);
+};
+const Pe = () => {
+  const {
+    activeButton: e,
+    setSelectedButtonState: t,
+    handleFindPath: n,
+    canTravelDiagonally: r,
+    resetCells: s
+  } = D(), a = [
+    { label: "Start", state: o.Start, className: "start" },
+    { label: "End", state: o.End, className: "end" },
+    { label: "Wall", state: o.Obstacle, className: "wall" },
+    { label: "Erase", state: o.Empty, className: "erase" }
+  ], c = () => {
+    n(r);
+  }, p = () => {
+    s(), t(o.Start);
+  };
+  return /* @__PURE__ */ w("div", { className: "toolbar", children: [
+    /* @__PURE__ */ l("div", { className: "toolbar-section tools", children: a.map(({ label: v, state: i, className: f }) => /* @__PURE__ */ l(
+      "button",
+      {
+        className: `toolbar-button ${f} ${e === i ? "active" : ""}`,
+        onClick: () => t(i),
+        children: v
+      },
+      v
+    )) }),
+    /* @__PURE__ */ l("div", { className: "toolbar-divider" }),
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: "toolbar-button reset",
+        onClick: p,
+        children: "Clear All"
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "toolbar-spacer" }),
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: "toolbar-button primary find-path",
+        onClick: c,
+        children: "Find Path"
+      }
+    )
+  ] });
+};
+const ke = () => {
+  var v;
+  const { currentRun: e, isAnimating: t, visitedNodes: n, path: r } = D(), s = (e == null ? void 0 : e.nodesExplored) ?? n.length, a = (e == null ? void 0 : e.pathLength) ?? r.length, c = a > 0 && s > 0 ? (a / s * 100).toFixed(1) : null, p = ((v = e == null ? void 0 : e.executionTimeMs) == null ? void 0 : v.toFixed(0)) ?? null;
+  return s === 0 && a === 0 && !t ? null : /* @__PURE__ */ l("div", { className: "stats-panel", children: /* @__PURE__ */ w("div", { className: "stats-container", children: [
+    /* @__PURE__ */ w("div", { className: "stat-item", children: [
+      /* @__PURE__ */ l("span", { className: "stat-label", children: "Nodes Explored" }),
+      /* @__PURE__ */ l("span", { className: "stat-value", children: s })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "stat-divider" }),
+    /* @__PURE__ */ w("div", { className: "stat-item", children: [
+      /* @__PURE__ */ l("span", { className: "stat-label", children: "Path Length" }),
+      /* @__PURE__ */ l("span", { className: "stat-value", children: a > 0 ? a : "—" })
+    ] }),
+    c && /* @__PURE__ */ w(V, { children: [
+      /* @__PURE__ */ l("div", { className: "stat-divider" }),
+      /* @__PURE__ */ w("div", { className: "stat-item", children: [
+        /* @__PURE__ */ l("span", { className: "stat-label", children: "Efficiency" }),
+        /* @__PURE__ */ w("span", { className: "stat-value", children: [
+          c,
+          "%"
+        ] })
+      ] })
+    ] }),
+    p && /* @__PURE__ */ w(V, { children: [
+      /* @__PURE__ */ l("div", { className: "stat-divider" }),
+      /* @__PURE__ */ w("div", { className: "stat-item", children: [
+        /* @__PURE__ */ l("span", { className: "stat-label", children: "Time" }),
+        /* @__PURE__ */ w("span", { className: "stat-value", children: [
+          p,
+          "ms"
+        ] })
+      ] })
+    ] }),
+    t && /* @__PURE__ */ w(V, { children: [
+      /* @__PURE__ */ l("div", { className: "stat-divider" }),
+      /* @__PURE__ */ l("div", { className: "stat-item status", children: /* @__PURE__ */ l("span", { className: "stat-status animating", children: "Running..." }) })
+    ] })
+  ] }) });
+}, Ve = (e, t) => {
+  const n = [], r = Math.floor(e / 2), s = Math.max(2, Math.floor(t / 6)), a = [];
+  for (let c = 0; c < s; c++) {
+    const p = Math.floor(t / (s + 1) * (c + 1));
+    a.push(p);
   }
-  for (let l = 0; l < t; l++)
-    o.includes(l) || (r.push({ row: s, col: l, state: a.Water }), s + 1 < e && r.push({ row: s + 1, col: l, state: a.Water }));
-  for (let l = 0; l < t; l += 3)
-    s - 1 >= 0 && Math.random() > 0.5 && r.push({ row: s - 1, col: l, state: a.Forest }), s + 2 < e && Math.random() > 0.5 && r.push({ row: s + 2, col: l, state: a.Forest });
-  return r;
-}, De = (e, t) => {
-  const r = [], s = Math.floor(e * 0.2), n = Math.floor(t * 0.1), o = Math.floor(e * 0.8), l = Math.floor(t * 0.9), p = Math.max(2, Math.floor(Math.min(e, t) / 5)), w = [];
+  for (let c = 0; c < t; c++)
+    a.includes(c) || (n.push({ row: r, col: c, state: o.Water }), r + 1 < e && n.push({ row: r + 1, col: c, state: o.Water }));
+  for (let c = 0; c < t; c += 3)
+    r - 1 >= 0 && Math.random() > 0.5 && n.push({ row: r - 1, col: c, state: o.Forest }), r + 2 < e && Math.random() > 0.5 && n.push({ row: r + 2, col: c, state: o.Forest });
+  return n;
+}, ze = (e, t) => {
+  const n = [], r = Math.floor(e * 0.2), s = Math.floor(t * 0.1), a = Math.floor(e * 0.8), c = Math.floor(t * 0.9), p = Math.max(2, Math.floor(Math.min(e, t) / 5)), v = [];
   for (let i = 0; i < p; i++)
-    w.push(Math.floor((l - n) / (p + 1) * (i + 1)) + n);
-  for (let i = n; i <= l; i++) {
-    const d = (i - n) / (l - n), c = Math.floor(s + (o - s) * d);
-    w.some((u) => Math.abs(i - u) <= 1) || (c >= 0 && c < e && r.push({ row: c, col: i, state: a.Mountain }), c + 1 < e && Math.random() > 0.3 && r.push({ row: c + 1, col: i, state: a.Mountain }), c - 1 >= 0 && Math.random() > 0.3 && r.push({ row: c - 1, col: i, state: a.Mountain }));
+    v.push(Math.floor((c - s) / (p + 1) * (i + 1)) + s);
+  for (let i = s; i <= c; i++) {
+    const f = (i - s) / (c - s), u = Math.floor(r + (a - r) * f);
+    v.some((m) => Math.abs(i - m) <= 1) || (u >= 0 && u < e && n.push({ row: u, col: i, state: o.Mountain }), u + 1 < e && Math.random() > 0.3 && n.push({ row: u + 1, col: i, state: o.Mountain }), u - 1 >= 0 && Math.random() > 0.3 && n.push({ row: u - 1, col: i, state: o.Mountain }));
   }
-  for (const i of [...r])
-    if (i.state === a.Mountain) {
-      const d = [
+  for (const i of [...n])
+    if (i.state === o.Mountain) {
+      const f = [
         { row: i.row - 2, col: i.col },
         { row: i.row + 2, col: i.col },
         { row: i.row, col: i.col - 2 },
         { row: i.row, col: i.col + 2 }
       ];
-      for (const c of d)
-        c.row >= 0 && c.row < e && c.col >= 0 && c.col < t && Math.random() > 0.7 && (r.some((u) => u.row === c.row && u.col === c.col) || r.push({ row: c.row, col: c.col, state: a.Forest }));
+      for (const u of f)
+        u.row >= 0 && u.row < e && u.col >= 0 && u.col < t && Math.random() > 0.7 && (n.some((m) => m.row === u.row && m.col === u.col) || n.push({ row: u.row, col: u.col, state: o.Forest }));
     }
-  return r;
-}, ze = (e, t) => {
-  const r = [];
-  for (let n = 0; n < e; n++)
-    for (let o = 0; o < t; o++) {
-      const l = n % 3 === 1, p = o % 3 === 1;
-      (l || p) && Math.random() > 0.35 && r.push({ row: n, col: o, state: a.Obstacle });
+  return n;
+}, We = (e, t) => {
+  const n = [];
+  for (let s = 0; s < e; s++)
+    for (let a = 0; a < t; a++) {
+      const c = s % 3 === 1, p = a % 3 === 1;
+      (c || p) && Math.random() > 0.35 && n.push({ row: s, col: a, state: o.Obstacle });
     }
-  const s = 2;
-  return r.filter((n) => {
-    const o = n.row < s && n.col < s, l = n.row >= e - s && n.col >= t - s;
-    return !o && !l;
+  const r = 2;
+  return n.filter((s) => {
+    const a = s.row < r && s.col < r, c = s.row >= e - r && s.col >= t - r;
+    return !a && !c;
   });
-}, Ve = (e, t, r = 0.25) => {
-  const s = [];
-  for (let n = 0; n < e; n++)
-    for (let o = 0; o < t; o++)
-      if (!(n < 2 && o < 2 || n >= e - 2 && o >= t - 2) && Math.random() < r) {
+}, xe = (e, t, n = 0.25) => {
+  const r = [];
+  for (let s = 0; s < e; s++)
+    for (let a = 0; a < t; a++)
+      if (!(s < 2 && a < 2 || s >= e - 2 && a >= t - 2) && Math.random() < n) {
         const p = Math.random();
-        let w;
-        p < 0.4 ? w = a.Forest : p < 0.6 ? w = a.Obstacle : p < 0.8 ? w = a.Water : w = a.Mountain, s.push({ row: n, col: o, state: w });
+        let v;
+        p < 0.4 ? v = o.Forest : p < 0.6 ? v = o.Obstacle : p < 0.8 ? v = o.Water : v = o.Mountain, r.push({ row: s, col: a, state: v });
       }
-  return s;
-}, ke = (e, t, r = 0.2) => {
-  const s = [];
-  for (let n = 0; n < e; n++)
-    for (let o = 0; o < t; o++)
-      !(n < 2 && o < 2 || n >= e - 2 && o >= t - 2) && Math.random() < r && s.push({ row: n, col: o, state: a.Obstacle });
-  return s;
-}, We = (e, t) => {
+  return r;
+}, Ie = (e, t, n = 0.2) => {
   const r = [];
-  for (let n = 0; n < e; n++)
-    for (let o = 0; o < t; o++) {
-      const l = n % 3 === 1, p = o % 3 === 1;
-      (l || p) && Math.random() > 0.35 && r.push({ row: n, col: o, state: a.Obstacle });
+  for (let s = 0; s < e; s++)
+    for (let a = 0; a < t; a++)
+      !(s < 2 && a < 2 || s >= e - 2 && a >= t - 2) && Math.random() < n && r.push({ row: s, col: a, state: o.Obstacle });
+  return r;
+}, Be = (e, t) => {
+  const n = [];
+  for (let s = 0; s < e; s++)
+    for (let a = 0; a < t; a++) {
+      const c = s % 3 === 1, p = a % 3 === 1;
+      (c || p) && Math.random() > 0.35 && n.push({ row: s, col: a, state: o.Obstacle });
     }
-  const s = 2;
-  return r.filter((n) => {
-    const o = n.row < s && n.col < s, l = n.row >= e - s && n.col >= t - s;
-    return !o && !l;
+  const r = 2;
+  return n.filter((s) => {
+    const a = s.row < r && s.col < r, c = s.row >= e - r && s.col >= t - r;
+    return !a && !c;
   });
 };
-const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
-  const {
-    activeButton: r,
-    setSelectedButtonState: s,
-    resetCells: n,
-    rows: o,
-    columns: l,
-    setNumberOfRows: p,
-    setNumberOfColumns: w,
-    handleFindPath: i,
-    canTravelDiagonally: d,
-    setCanTravelDiagonally: c,
-    visualTheme: u,
-    setVisualTheme: f,
-    showCosts: h,
-    setShowCosts: m,
-    setCellState: S
-  } = j(), E = F(u), O = Te(u), b = () => {
-    t(!e);
-  }, M = [
-    { label: "Start", state: a.Start },
-    { label: "End", state: a.End },
-    { label: "Obstacle", state: a.Obstacle },
-    { label: "Clear", state: a.Empty },
-    { label: "Reset", state: null }
-  ], R = (g) => {
-    g === null ? _() : s(g);
-  }, _ = () => {
-    n(), s(a.Start);
-  }, C = () => {
-    i(d);
-  }, L = (g) => {
-    n();
-    let y;
-    if (u === A.Medieval)
-      switch (g) {
+const Fe = ({ isDarkMode: e, setIsDarkMode: t }) => {
+  const [n, r] = j(!1), {
+    rows: s,
+    columns: a,
+    setNumberOfRows: c,
+    setNumberOfColumns: p,
+    visualTheme: v,
+    setVisualTheme: i,
+    canTravelDiagonally: f,
+    setCanTravelDiagonally: u,
+    showCosts: m,
+    setShowCosts: h,
+    activeButton: g,
+    setSelectedButtonState: d,
+    setCellState: y,
+    resetCells: E
+  } = D(), _ = $(v), b = Ae(v), M = (N) => {
+    E();
+    let S;
+    if (v === A.Medieval)
+      switch (N) {
         case "river":
-          y = Ae(o, l);
+          S = Ve(s, a);
           break;
         case "mountains":
-          y = De(o, l);
+          S = ze(s, a);
           break;
         case "maze":
-          y = ze(o, l);
+          S = We(s, a);
           break;
         case "random":
-          y = Ve(o, l);
+          S = xe(s, a);
           break;
         default:
           return;
       }
     else
-      switch (g) {
+      switch (N) {
         case "random":
-          y = ke(o, l);
+          S = Ie(s, a);
           break;
         case "maze":
-          y = We(o, l);
+          S = Be(s, a);
           break;
         default:
           return;
       }
-    for (const D of y)
-      S(D.row, D.col, D.state);
-    S(0, 0, a.Start), S(o - 1, l - 1, a.End), s(a.Obstacle);
+    for (const O of S)
+      y(O.row, O.col, O.state);
+    y(0, 0, o.Start), y(s - 1, a - 1, o.End), d(o.Obstacle);
   };
-  return /* @__PURE__ */ v("div", { className: "control-panel", children: /* @__PURE__ */ N("div", { className: "control-grid", children: [
-    /* @__PURE__ */ N("div", { className: "control-group theme-section", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Theme" }),
-      /* @__PURE__ */ N("div", { className: "button-group", children: [
-        /* @__PURE__ */ v(
-          "select",
-          {
-            className: "theme-select",
-            value: u,
-            onChange: (g) => f(g.target.value),
-            children: Object.values(oe).map((g) => /* @__PURE__ */ v("option", { value: g.id, children: g.name }, g.id))
-          }
-        ),
-        /* @__PURE__ */ v(
-          "button",
-          {
-            className: `control-button theme-toggle ${e ? "active" : ""}`,
-            onClick: b,
-            title: e ? "Switch to light mode" : "Switch to dark mode",
-            children: e ? "☀️ Light" : "🌙 Dark"
-          }
-        ),
-        /* @__PURE__ */ v(
-          "button",
-          {
-            className: `control-button show-costs ${h ? "active" : ""}`,
-            onClick: () => m(!h),
-            title: h ? "Hide costs" : "Show costs",
-            children: h ? "📊 Costs On" : "📊 Costs Off"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ N("div", { className: "control-group tools", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Tools" }),
-      /* @__PURE__ */ v("div", { className: "button-group", children: M.map((g, y) => /* @__PURE__ */ v(
-        "button",
-        {
-          className: `control-button ${g.label.toLowerCase()} ${r === g.state ? "active" : ""}`,
-          onClick: () => R(g.state),
-          children: g.label
-        },
-        y
-      )) })
-    ] }),
-    u === A.Medieval && /* @__PURE__ */ N("div", { className: "control-group terrain", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Terrain" }),
-      /* @__PURE__ */ v("div", { className: "button-group", children: O.filter(({ state: g }) => g !== a.Obstacle).map(({ state: g, config: y }) => /* @__PURE__ */ N(
-        "button",
-        {
-          className: `control-button terrain-btn ${y.name.toLowerCase()} ${r === g ? "active" : ""}`,
-          onClick: () => s(g),
-          title: y.passable ? "Passable terrain" : "Impassable terrain",
-          children: [
-            y.icon,
-            " ",
-            y.name
-          ]
-        },
-        g
-      )) })
-    ] }),
-    /* @__PURE__ */ N("div", { className: "control-group presets", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Generate Map" }),
-      /* @__PURE__ */ v("div", { className: "button-group", children: E.presets.map((g) => /* @__PURE__ */ N(
-        "button",
-        {
-          className: "control-button preset-btn",
-          onClick: () => L(g.id),
-          children: [
-            g.icon,
-            " ",
-            g.name
-          ]
-        },
-        g.id
-      )) })
-    ] }),
-    /* @__PURE__ */ N("div", { className: "control-group actions", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Actions" }),
-      /* @__PURE__ */ N("div", { className: "button-group", children: [
-        /* @__PURE__ */ v(
-          "button",
-          {
-            className: "control-button find-path",
-            onClick: C,
-            children: "Find Path"
-          }
-        ),
-        /* @__PURE__ */ v(
-          "button",
-          {
-            className: `control-button diagonal ${d ? "active" : ""}`,
-            onClick: () => c(!d),
-            children: d ? "Diagonal On" : "Diagonal Off"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ N("div", { className: "control-group size", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Grid Size" }),
-      /* @__PURE__ */ N("div", { className: "size-controls", children: [
-        /* @__PURE__ */ N("div", { className: "size-control", children: [
-          /* @__PURE__ */ v("label", { className: "size-label", children: "Rows" }),
-          /* @__PURE__ */ N("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ v(
+  return /* @__PURE__ */ w("div", { className: `settings-container ${n ? "open" : ""}`, children: [
+    /* @__PURE__ */ w(
+      "button",
+      {
+        className: "settings-toggle",
+        onClick: () => r(!n),
+        "aria-label": "Toggle settings",
+        "aria-expanded": n,
+        children: [
+          /* @__PURE__ */ l("span", { className: "settings-icon", children: "⚙" }),
+          /* @__PURE__ */ l("span", { className: "settings-label", children: "Settings" }),
+          /* @__PURE__ */ l("span", { className: `settings-chevron ${n ? "open" : ""}`, children: "▼" })
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ l("div", { className: "settings-panel", children: /* @__PURE__ */ w("div", { className: "settings-content", children: [
+      /* @__PURE__ */ w("div", { className: "settings-section", children: [
+        /* @__PURE__ */ l("h3", { className: "settings-section-title", children: "Appearance" }),
+        /* @__PURE__ */ w("div", { className: "settings-row", children: [
+          /* @__PURE__ */ l("label", { children: "Theme" }),
+          /* @__PURE__ */ l(
+            "select",
+            {
+              className: "settings-select",
+              value: v,
+              onChange: (N) => i(N.target.value),
+              children: Object.values(ae).map((N) => /* @__PURE__ */ l("option", { value: N.id, children: N.name }, N.id))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ w("div", { className: "settings-row", children: [
+          /* @__PURE__ */ l("label", { children: "Color Mode" }),
+          /* @__PURE__ */ w("div", { className: "settings-toggle-group", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                className: `settings-toggle-btn ${e ? "" : "active"}`,
+                onClick: () => t(!1),
+                children: "Light"
+              }
+            ),
+            /* @__PURE__ */ l(
               "button",
               {
-                className: "size-button",
-                onClick: () => p(Math.max(5, o - 1)),
-                disabled: o <= 5,
+                className: `settings-toggle-btn ${e ? "active" : ""}`,
+                onClick: () => t(!0),
+                children: "Dark"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ w("div", { className: "settings-section", children: [
+        /* @__PURE__ */ l("h3", { className: "settings-section-title", children: "Grid" }),
+        /* @__PURE__ */ w("div", { className: "settings-row", children: [
+          /* @__PURE__ */ l("label", { children: "Rows" }),
+          /* @__PURE__ */ w("div", { className: "settings-stepper", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                onClick: () => c(Math.max(5, s - 1)),
+                disabled: s <= 5,
                 children: "−"
               }
             ),
-            /* @__PURE__ */ v("span", { className: "size-value", children: o }),
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ l("span", { className: "stepper-value", children: s }),
+            /* @__PURE__ */ l(
               "button",
               {
-                className: "size-button",
-                onClick: () => p(Math.min(50, o + 1)),
-                disabled: o >= 50,
+                onClick: () => c(Math.min(50, s + 1)),
+                disabled: s >= 50,
                 children: "+"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ N("div", { className: "size-control", children: [
-          /* @__PURE__ */ v("label", { className: "size-label", children: "Columns" }),
-          /* @__PURE__ */ N("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ v(
+        /* @__PURE__ */ w("div", { className: "settings-row", children: [
+          /* @__PURE__ */ l("label", { children: "Columns" }),
+          /* @__PURE__ */ w("div", { className: "settings-stepper", children: [
+            /* @__PURE__ */ l(
               "button",
               {
-                className: "size-button",
-                onClick: () => w(Math.max(5, l - 1)),
-                disabled: l <= 5,
+                onClick: () => p(Math.max(5, a - 1)),
+                disabled: a <= 5,
                 children: "−"
               }
             ),
-            /* @__PURE__ */ v("span", { className: "size-value", children: l }),
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ l("span", { className: "stepper-value", children: a }),
+            /* @__PURE__ */ l(
               "button",
               {
-                className: "size-button",
-                onClick: () => w(Math.min(50, l + 1)),
-                disabled: l >= 50,
+                onClick: () => p(Math.min(50, a + 1)),
+                disabled: a >= 50,
                 children: "+"
               }
             )
           ] })
         ] })
+      ] }),
+      /* @__PURE__ */ w("div", { className: "settings-section", children: [
+        /* @__PURE__ */ l("h3", { className: "settings-section-title", children: "Algorithm" }),
+        /* @__PURE__ */ w("div", { className: "settings-row", children: [
+          /* @__PURE__ */ l("label", { children: "Diagonal Movement" }),
+          /* @__PURE__ */ w("div", { className: "settings-toggle-group", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                className: `settings-toggle-btn ${f ? "" : "active"}`,
+                onClick: () => u(!1),
+                children: "Off"
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                className: `settings-toggle-btn ${f ? "active" : ""}`,
+                onClick: () => u(!0),
+                children: "On"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ w("div", { className: "settings-row", children: [
+          /* @__PURE__ */ l("label", { children: "Show Costs" }),
+          /* @__PURE__ */ w("div", { className: "settings-toggle-group", children: [
+            /* @__PURE__ */ l(
+              "button",
+              {
+                className: `settings-toggle-btn ${m ? "" : "active"}`,
+                onClick: () => h(!1),
+                children: "Off"
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                className: `settings-toggle-btn ${m ? "active" : ""}`,
+                onClick: () => h(!0),
+                children: "On"
+              }
+            )
+          ] })
+        ] })
+      ] }),
+      v === A.Medieval && /* @__PURE__ */ w("div", { className: "settings-section", children: [
+        /* @__PURE__ */ l("h3", { className: "settings-section-title", children: "Terrain Tools" }),
+        /* @__PURE__ */ l("div", { className: "settings-terrain-grid", children: b.filter(({ state: N }) => N !== o.Obstacle).map(({ state: N, config: S }) => /* @__PURE__ */ w(
+          "button",
+          {
+            className: `settings-terrain-btn ${g === N ? "active" : ""}`,
+            onClick: () => d(N),
+            title: S.passable ? "Passable terrain" : "Impassable terrain",
+            children: [
+              S.icon,
+              " ",
+              S.name
+            ]
+          },
+          N
+        )) })
+      ] }),
+      /* @__PURE__ */ w("div", { className: "settings-section", children: [
+        /* @__PURE__ */ l("h3", { className: "settings-section-title", children: "Generate Map" }),
+        /* @__PURE__ */ l("div", { className: "settings-preset-grid", children: _.presets.map((N) => /* @__PURE__ */ l(
+          "button",
+          {
+            className: "settings-preset-btn",
+            onClick: () => M(N.id),
+            children: N.name
+          },
+          N.id
+        )) })
       ] })
-    ] })
-  ] }) });
-}, Ie = ({ defaultDarkMode: e }) => {
-  const t = ne(null), { visualTheme: r } = j(), [s, n] = ee(() => {
+    ] }) })
+  ] });
+}, je = ({ defaultDarkMode: e }) => {
+  const t = re(null), { visualTheme: n } = D(), [r, s] = j(() => {
     if (e !== void 0)
       return e;
-    const o = localStorage.getItem("astar-darkMode");
-    return o ? JSON.parse(o) : !1;
+    const a = localStorage.getItem("astar-darkMode");
+    return a ? JSON.parse(a) : !1;
   });
-  return te(() => {
-    e === void 0 && localStorage.setItem("astar-darkMode", JSON.stringify(s)), t.current && (t.current.setAttribute("data-theme", s ? "dark" : "light"), t.current.setAttribute("data-visual-theme", r));
-  }, [s, e, r]), /* @__PURE__ */ v("div", { ref: t, className: "astar-visualizer-root", "data-theme": s ? "dark" : "light", "data-visual-theme": r, children: /* @__PURE__ */ N("div", { className: "app-container", children: [
-    /* @__PURE__ */ v("header", { className: "app-header", children: /* @__PURE__ */ v("h1", { className: "app-title", children: "A* Pathfinding" }) }),
-    /* @__PURE__ */ v("main", { className: "app-main", children: /* @__PURE__ */ v(Re, {}) }),
-    /* @__PURE__ */ v("footer", { className: "app-footer", children: /* @__PURE__ */ v(Pe, { isDarkMode: s, setIsDarkMode: n }) })
+  return se(() => {
+    e === void 0 && localStorage.setItem("astar-darkMode", JSON.stringify(r)), t.current && (t.current.setAttribute("data-theme", r ? "dark" : "light"), t.current.setAttribute("data-visual-theme", n));
+  }, [r, e, n]), /* @__PURE__ */ l("div", { ref: t, className: "astar-visualizer-root", "data-theme": r ? "dark" : "light", "data-visual-theme": n, children: /* @__PURE__ */ w("div", { className: "app-container", children: [
+    /* @__PURE__ */ l("header", { className: "app-header", children: /* @__PURE__ */ l("h1", { className: "app-title", children: "A* Pathfinding Visualizer" }) }),
+    /* @__PURE__ */ l(Pe, {}),
+    /* @__PURE__ */ l("main", { className: "app-main", children: /* @__PURE__ */ l(Le, {}) }),
+    /* @__PURE__ */ l(ke, {}),
+    /* @__PURE__ */ l(Fe, { isDarkMode: r, setIsDarkMode: s })
   ] }) });
 };
-function je({ defaultDarkMode: e }) {
-  return /* @__PURE__ */ v(Ie, { defaultDarkMode: e });
+function He({ defaultDarkMode: e }) {
+  return /* @__PURE__ */ l(je, { defaultDarkMode: e });
 }
 export {
-  je as AStarVisualizer,
-  a as CellState,
-  Ie as Layout,
+  He as AStarVisualizer,
+  o as CellState,
+  je as Layout,
   A as VisualTheme
 };