astar-visualizer 1.0.6 → 1.0.8

package/dist/astar-visualizer.js

@@ -1,22 +1,22 @@
-import { jsx as S, jsxs as y } from "react/jsx-runtime";
-import D, { useState as H, useEffect as F } from "react";
-const P = (e) => {
+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) => {
   let t;
-  const r = /* @__PURE__ */ new Set(), s = (i, m) => {
-    const c = typeof i == "function" ? i(t) : i;
-    if (!Object.is(c, t)) {
-      const l = t;
-      t = m ?? (typeof c != "object" || c === null) ? c : Object.assign({}, t, c), r.forEach((n) => n(t, l));
+  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));
     }
-  }, o = () => t, w = { setState: s, getState: o, getInitialState: () => d, subscribe: (i) => (r.add(i), () => r.delete(i)), destroy: () => {
+  }, n = () => t, w = { setState: s, getState: n, getInitialState: () => i, subscribe: (d) => (r.add(d), () => r.delete(d)), destroy: () => {
     r.clear();
-  } }, d = t = e(s, o, w);
+  } }, i = t = e(s, n, w);
   return w;
-}, q = (e) => e ? P(e) : P;
-function J(e) {
+}, se = (e) => e ? U(e) : U;
+function ae(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var V = { exports: {} }, L = {}, R = { exports: {} }, A = {};
+var B = { exports: {} }, k = {}, V = { exports: {} }, W = {};
 /**
  * @license React
  * use-sync-external-store-shim.production.js
@@ -26,49 +26,49 @@ var V = { exports: {} }, L = {}, R = { exports: {} }, A = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var I;
-function Y() {
-  if (I)
-    return A;
-  I = 1;
-  var e = D;
-  function t(m, c) {
-    return m === c && (m !== 0 || 1 / m === 1 / c) || m !== m && c !== c;
+var q;
+function le() {
+  if (q)
+    return W;
+  q = 1;
+  var e = z;
+  function t(c, u) {
+    return c === u && (c !== 0 || 1 / c === 1 / u) || c !== c && u !== u;
   }
-  var r = typeof Object.is == "function" ? Object.is : t, s = e.useState, o = e.useEffect, u = e.useLayoutEffect, p = e.useDebugValue;
-  function E(m, c) {
-    var l = c(), n = s({ inst: { value: l, getSnapshot: c } }), a = n[0].inst, f = n[1];
-    return u(
+  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(
       function() {
-        a.value = l, a.getSnapshot = c, w(a) && f({ inst: a });
+        m.value = f, m.getSnapshot = u, w(m) && S({ inst: m });
       },
-      [m, l, c]
-    ), o(
+      [c, f, u]
+    ), n(
       function() {
-        return w(a) && f({ inst: a }), m(function() {
-          w(a) && f({ inst: a });
+        return w(m) && S({ inst: m }), c(function() {
+          w(m) && S({ inst: m });
         });
       },
-      [m]
-    ), p(l), l;
+      [c]
+    ), l(f), f;
   }
-  function w(m) {
-    var c = m.getSnapshot;
-    m = m.value;
+  function w(c) {
+    var u = c.getSnapshot;
+    c = c.value;
     try {
-      var l = c();
-      return !r(m, l);
+      var f = u();
+      return !r(c, f);
     } catch {
       return !0;
     }
   }
-  function d(m, c) {
-    return c();
+  function i(c, u) {
+    return u();
   }
-  var i = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : E;
-  return A.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : i, A;
+  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 z = {};
+var P = {};
 /**
  * @license React
  * use-sync-external-store-shim.development.js
@@ -78,62 +78,62 @@ var z = {};
  * 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 Q() {
-  return x || (x = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(l, n) {
-      return l === n && (l !== 0 || 1 / l === 1 / n) || l !== l && n !== n;
+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;
     }
-    function t(l, n) {
-      i || o.startTransition === void 0 || (i = !0, console.error(
+    function t(f, h) {
+      d || n.startTransition === void 0 || (d = !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 a = n();
-      if (!m) {
-        var f = n();
-        u(a, f) || (console.error(
+      var m = h();
+      if (!c) {
+        var S = h();
+        o(m, S) || (console.error(
           "The result of getSnapshot should be cached to avoid an infinite loop"
-        ), m = !0);
+        ), c = !0);
       }
-      f = p({
-        inst: { value: a, getSnapshot: n }
+      S = l({
+        inst: { value: m, getSnapshot: h }
       });
-      var v = f[0].inst, O = f[1];
+      var E = S[0].inst, O = S[1];
       return w(
         function() {
-          v.value = a, v.getSnapshot = n, r(v) && O({ inst: v });
+          E.value = m, E.getSnapshot = h, r(E) && O({ inst: E });
         },
-        [l, a, n]
-      ), E(
+        [f, m, h]
+      ), p(
         function() {
-          return r(v) && O({ inst: v }), l(function() {
-            r(v) && O({ inst: v });
+          return r(E) && O({ inst: E }), f(function() {
+            r(E) && O({ inst: E });
           });
         },
-        [l]
-      ), d(a), a;
+        [f]
+      ), i(m), m;
     }
-    function r(l) {
-      var n = l.getSnapshot;
-      l = l.value;
+    function r(f) {
+      var h = f.getSnapshot;
+      f = f.value;
       try {
-        var a = n();
-        return !u(l, a);
+        var m = h();
+        return !o(f, m);
       } catch {
         return !0;
       }
     }
-    function s(l, n) {
-      return n();
+    function s(f, h) {
+      return h();
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var o = D, u = typeof Object.is == "function" ? Object.is : e, p = o.useState, E = o.useEffect, w = o.useLayoutEffect, d = o.useDebugValue, i = !1, m = !1, c = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? s : t;
-    z.useSyncExternalStore = o.useSyncExternalStore !== void 0 ? o.useSyncExternalStore : c, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  }()), z;
+    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 j;
-function K() {
-  return j || (j = 1, process.env.NODE_ENV === "production" ? R.exports = Y() : R.exports = Q()), R.exports;
+var Y;
+function re() {
+  return Y || (Y = 1, process.env.NODE_ENV === "production" ? V.exports = le() : V.exports = ie()), V.exports;
 }
 /**
  * @license React
@@ -144,61 +144,61 @@ function K() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var G;
-function X() {
-  if (G)
-    return L;
-  G = 1;
-  var e = D, t = K();
-  function r(d, i) {
-    return d === i && (d !== 0 || 1 / d === 1 / i) || d !== d && i !== i;
+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 s = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, u = e.useRef, p = e.useEffect, E = e.useMemo, w = e.useDebugValue;
-  return L.useSyncExternalStoreWithSelector = function(d, i, m, c, l) {
-    var n = u(null);
-    if (n.current === null) {
-      var a = { hasValue: !1, value: null };
-      n.current = a;
+  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;
     } else
-      a = n.current;
-    n = E(
+      m = h.current;
+    h = p(
       function() {
-        function v(g) {
+        function E(_) {
           if (!O) {
-            if (O = !0, N = g, g = c(g), l !== void 0 && a.hasValue) {
-              var b = a.value;
-              if (l(b, g))
-                return T = b;
+            if (O = !0, b = _, _ = u(_), f !== void 0 && m.hasValue) {
+              var C = m.value;
+              if (f(C, _))
+                return M = C;
             }
-            return T = g;
+            return M = _;
           }
-          if (b = T, s(N, g))
-            return b;
-          var _ = c(g);
-          return l !== void 0 && l(b, _) ? (N = g, b) : (N = g, T = _);
+          if (C = M, s(b, _))
+            return C;
+          var L = u(_);
+          return f !== void 0 && f(C, L) ? (b = _, C) : (b = _, M = L);
         }
-        var O = !1, N, T, C = m === void 0 ? null : m;
+        var O = !1, b, M, R = c === void 0 ? null : c;
         return [
           function() {
-            return v(i());
+            return E(d());
           },
-          C === null ? void 0 : function() {
-            return v(C());
+          R === null ? void 0 : function() {
+            return E(R());
           }
         ];
       },
-      [i, m, c, l]
+      [d, c, u, f]
     );
-    var f = o(d, n[0], n[1]);
-    return p(
+    var S = n(i, h[0], h[1]);
+    return l(
       function() {
-        a.hasValue = !0, a.value = f;
+        m.hasValue = !0, m.value = S;
       },
-      [f]
-    ), w(f), f;
-  }, L;
+      [S]
+    ), w(S), S;
+  }, k;
 }
-var M = {};
+var I = {};
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.development.js
@@ -208,150 +208,152 @@ var M = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var W;
-function Z() {
-  return W || (W = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(d, i) {
-      return d === i && (d !== 0 || 1 / d === 1 / i) || d !== d && i !== i;
+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;
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var t = D, r = K(), s = typeof Object.is == "function" ? Object.is : e, o = r.useSyncExternalStore, u = t.useRef, p = t.useEffect, E = t.useMemo, w = t.useDebugValue;
-    M.useSyncExternalStoreWithSelector = function(d, i, m, c, l) {
-      var n = u(null);
-      if (n.current === null) {
-        var a = { hasValue: !1, value: null };
-        n.current = a;
+    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;
       } else
-        a = n.current;
-      n = E(
+        m = h.current;
+      h = p(
         function() {
-          function v(g) {
+          function E(_) {
             if (!O) {
-              if (O = !0, N = g, g = c(g), l !== void 0 && a.hasValue) {
-                var b = a.value;
-                if (l(b, g))
-                  return T = b;
+              if (O = !0, b = _, _ = u(_), f !== void 0 && m.hasValue) {
+                var C = m.value;
+                if (f(C, _))
+                  return M = C;
               }
-              return T = g;
+              return M = _;
             }
-            if (b = T, s(N, g))
-              return b;
-            var _ = c(g);
-            return l !== void 0 && l(b, _) ? (N = g, b) : (N = g, T = _);
+            if (C = M, s(b, _))
+              return C;
+            var L = u(_);
+            return f !== void 0 && f(C, L) ? (b = _, C) : (b = _, M = L);
           }
-          var O = !1, N, T, C = m === void 0 ? null : m;
+          var O = !1, b, M, R = c === void 0 ? null : c;
           return [
             function() {
-              return v(i());
+              return E(d());
             },
-            C === null ? void 0 : function() {
-              return v(C());
+            R === null ? void 0 : function() {
+              return E(R());
             }
           ];
         },
-        [i, m, c, l]
+        [d, c, u, f]
       );
-      var f = o(d, n[0], n[1]);
-      return p(
+      var S = n(i, h[0], h[1]);
+      return l(
         function() {
-          a.hasValue = !0, a.value = f;
+          m.hasValue = !0, m.value = S;
         },
-        [f]
-      ), w(f), f;
+        [S]
+      ), w(S), S;
     }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  }()), M;
+  }()), I;
 }
-process.env.NODE_ENV === "production" ? V.exports = X() : V.exports = Z();
-var ee = V.exports;
-const te = /* @__PURE__ */ J(ee), { useDebugValue: re } = D, { useSyncExternalStoreWithSelector: oe } = te;
-const ne = (e) => e;
-function se(e, t = ne, r) {
-  const s = oe(
+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(
     e.subscribe,
     e.getState,
     e.getServerState || e.getInitialState,
     t,
     r
   );
-  return re(s), s;
+  return he(s), s;
 }
-const $ = (e) => {
-  const t = typeof e == "function" ? q(e) : e, r = (s, o) => se(t, s, o);
+const Z = (e) => {
+  const t = typeof e == "function" ? se(e) : e, r = (s, n) => ve(t, s, n);
   return Object.assign(r, t), r;
-}, ae = (e) => e ? $(e) : $;
-var h = /* @__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))(h || {});
-const k = (e, t) => {
+}, 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));
-}, le = (e, t) => ({
+}, be = (e, t) => ({
   row: e.row,
   col: e.col,
   g: 0,
-  h: k(e, t),
-  f: k(e, t),
+  h: x(e, t),
+  f: x(e, t),
   parent: null
-}), ie = (e, t, r) => {
+}), ge = (e, t, r) => {
   const s = [
     { 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 }
   ];
-  return r && s.push(
+  r && s.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 }
-  ), s.filter((o) => o.row >= 0 && o.row < t.length && o.col >= 0 && o.col < t[0].length && t[o.row][o.col].state !== h.Obstacle).map((o) => ({
+  );
+  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
   }));
-}, ce = (e, t, r) => {
-  const s = Math.abs(e.row - t.row), o = Math.abs(e.col - t.col), u = e.g + (s === 0 || o === 0 ? 10 : 14), p = k(t, r), E = u + p;
-  return { g: u, h: p, f: E };
-}, ue = (e) => {
+}, 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) => {
   const t = [];
   let r = e;
   for (; r; )
     t.push(r), r = r.parent;
   return t.reverse();
-}, de = (e, t, r, s) => {
-  const o = [], u = [], p = le(t, r);
-  for (o.push(p); o.length > 0; ) {
-    o.sort((d, i) => d.f - i.f);
-    const E = o.shift();
-    if (E.row === r.row && E.col === r.col)
-      return u.push(E), { path: ue(E), visitedNodes: u };
-    u.push(E);
-    const w = ie(E, e, s);
-    for (const d of w) {
-      if (u.some((n) => n.row === d.row && n.col === d.col))
+}, _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))
         continue;
-      const { g: i, h: m, f: c } = ce(E, d, r), l = o.find(
-        (n) => n.row === d.row && n.col === d.col
+      const { g: d, h: c, f: u } = Ee(p, i, r), f = n.find(
+        (h) => h.row === i.row && h.col === i.col
       );
-      if (!l || i < l.g) {
-        const n = {
-          row: d.row,
-          col: d.col,
-          g: i,
-          h: m,
-          f: c,
-          parent: E
+      if (!f || d < f.g) {
+        const h = {
+          row: i.row,
+          col: i.col,
+          g: d,
+          h: c,
+          f: u,
+          parent: p
         };
-        l ? (l.g = i, l.f = c, l.parent = E) : o.push(n);
+        f ? (f.g = d, f.f = u, f.parent = p) : n.push(h);
       }
     }
   }
-  return { path: [], visitedNodes: u };
-}, fe = (e) => ({
+  return { path: [], visitedNodes: o };
+}, Oe = (e) => ({
   cells: Array.from(
     { length: 8 },
-    (t, r) => Array.from({ length: 12 }, (s, o) => ({
+    (t, r) => Array.from({ length: 12 }, (s, n) => ({
       row: r,
-      col: o,
-      state: h.Empty
+      col: n,
+      state: a.Empty
     }))
   ),
   rows: 8,
@@ -363,17 +365,17 @@ const k = (e, t) => {
   visitedNodes: [],
   setNumberOfColumns: (t) => {
     e((r) => {
-      const s = r.cells.map((o) => t > r.columns ? [
-        ...o,
+      const s = r.cells.map((n) => t > r.columns ? [
+        ...n,
         ...Array.from(
           { length: t - r.columns },
-          (u, p) => ({
-            row: o[0].row,
-            col: r.columns + p,
-            state: h.Empty
+          (o, l) => ({
+            row: n[0].row,
+            col: r.columns + l,
+            state: a.Empty
           })
         )
-      ] : o.slice(0, t));
+      ] : n.slice(0, t));
       return {
         ...r,
         columns: t,
@@ -388,10 +390,10 @@ const k = (e, t) => {
         ...s,
         ...Array.from(
           { length: t - r.rows },
-          (o, u) => Array.from({ length: r.columns }, (p, E) => ({
-            row: r.rows + u,
-            col: E,
-            state: h.Empty
+          (n, o) => Array.from({ length: r.columns }, (l, p) => ({
+            row: r.rows + o,
+            col: p,
+            state: a.Empty
           }))
         )
       ] : s = s.slice(0, t), {
@@ -402,32 +404,32 @@ const k = (e, t) => {
     });
   },
   setCellState: (t, r, s) => {
-    e((o) => {
-      const u = o.cells.map(
-        (d) => d.map((i) => ({ ...i }))
+    e((n) => {
+      const o = n.cells.map(
+        (i) => i.map((d) => ({ ...d }))
       );
-      let p = o.startTile, E = o.endTile, w = [...o.obstacleTiles];
-      switch (s === h.Start && o.startTile && (u[o.startTile.row][o.startTile.col].state = h.Empty, p = null), s === h.End && o.endTile && (u[o.endTile.row][o.endTile.col].state = h.Empty, E = null), u[t][r].state = s, s) {
-        case h.Start:
-          p = { row: t, col: r };
+      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 };
           break;
-        case h.End:
-          E = { row: t, col: r };
+        case a.End:
+          p = { row: t, col: r };
           break;
-        case h.Obstacle:
-          w.some((d) => d.row === t && d.col === r) || w.push({ row: t, col: r });
+        case a.Obstacle:
+          w.some((i) => i.row === t && i.col === r) || w.push({ row: t, col: r });
           break;
-        case h.Empty:
+        case a.Empty:
           w = w.filter(
-            (d) => !(d.row === t && d.col === r)
+            (i) => !(i.row === t && i.col === r)
           );
           break;
       }
       return {
-        ...o,
-        cells: u,
-        startTile: p,
-        endTile: E,
+        ...n,
+        cells: o,
+        startTile: l,
+        endTile: p,
         obstacleTiles: w
       };
     });
@@ -438,7 +440,7 @@ const k = (e, t) => {
       cells: t.cells.map(
         (r) => r.map((s) => ({
           ...s,
-          state: h.Empty
+          state: a.Empty
         }))
       ),
       startTile: null,
@@ -450,45 +452,45 @@ const k = (e, t) => {
   },
   handleFindPath: (t) => {
     e((r) => {
-      const s = r.cells.flat().find((u) => u.state === h.Start), o = r.cells.flat().find((u) => u.state === h.End);
-      if (s && o) {
-        const u = r.cells.map(
-          (d) => d.map((i) => ({
-            row: i.row,
-            col: i.col,
-            state: i.state
+      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
           }))
-        ), { path: p, visitedNodes: E } = de(u, s, o, t);
-        return (async (d, i) => {
-          for (let m of i)
-            await new Promise((c) => setTimeout(c, 100)), e((c) => {
-              const l = c.cells.map(
-                (n) => n.map((a) => ({
-                  ...a,
-                  state: m.row === a.row && m.col === a.col && a.state === h.Empty ? h.Visited : a.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
                 }))
               );
               return {
-                ...c,
-                cells: l,
-                visitedNodes: [...c.visitedNodes, m]
+                ...u,
+                cells: f,
+                visitedNodes: [...u.visitedNodes, c]
               };
             });
-          for (let m of d)
-            await new Promise((c) => setTimeout(c, 250)), e((c) => {
-              const l = c.cells.map(
-                (n) => n.map((a) => ({
-                  ...a,
-                  state: m.row === a.row && m.col === a.col ? h.Path : a.state
+          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
                 }))
               );
               return {
-                ...c,
-                cells: l,
-                path: [...c.path, m]
+                ...u,
+                cells: f,
+                path: [...u.path, c]
               };
             });
-        })(p, E), { ...r, path: [], visitedNodes: [] };
+        })(l, p), { ...r, path: [], visitedNodes: [] };
       }
       return r;
     });
@@ -496,9 +498,9 @@ const k = (e, t) => {
   setPath: (t) => {
     e((r) => {
       const s = r.cells.map(
-        (o) => o.map((u) => ({
-          ...u,
-          state: t.some((p) => p.row === u.row && p.col === u.col) ? h.Path : u.state
+        (n) => n.map((o) => ({
+          ...o,
+          state: t.some((l) => l.row === o.row && l.col === o.col) ? a.Path : o.state
         }))
       );
       return {
@@ -510,9 +512,9 @@ const k = (e, t) => {
   setVisitedNodes: (t) => {
     e((r) => {
       const s = r.cells.map(
-        (o) => o.map((u) => ({
-          ...u,
-          state: t.some((p) => p.row === u.row && p.col === u.col) && u.state === h.Empty ? h.Visited : u.state
+        (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
         }))
       );
       return {
@@ -521,54 +523,98 @@ const k = (e, t) => {
       };
     });
   }
-}), he = (e) => ({
-  activeButton: h.Start,
+}), ye = (e) => ({
+  activeButton: a.Start,
   setSelectedButtonState: (t) => e({ activeButton: t }),
   canTravelDiagonally: !0,
   setCanTravelDiagonally: (t) => e({ canTravelDiagonally: t })
-}), U = ae((e, t, r) => ({
-  ...fe(e),
-  ...he(e)
-}));
-const me = () => {
-  var l;
-  const { cells: e, activeButton: t, setCellState: r, setSelectedButtonState: s, visitedNodes: o, path: u } = U(), [p, E] = H({ width: 0, height: 0 }), w = D.useRef(null);
-  F(() => {
-    const n = () => {
-      if (w.current) {
-        const a = w.current.getBoundingClientRect();
-        E({ width: a.width, height: a.height });
+}), Ne = (e) => ({
+  visualTheme: A.Medieval,
+  showCosts: !1,
+  setVisualTheme: (t) => e({ visualTheme: t }),
+  setShowCosts: (t) => e({ showCosts: t })
+}), j = we((e, t, r) => ({
+  ...Oe(e),
+  ...ye(e),
+  ...Ne(e)
+})), Me = {
+  id: A.Classic,
+  name: "Classic",
+  startIcon: "●",
+  endIcon: "●",
+  terrains: {
+    [a.Obstacle]: { name: "Wall", icon: "■", passable: !1 }
+  },
+  presets: [
+    { id: "random", name: "Random", icon: "🎲" },
+    { id: "maze", name: "Maze", icon: "🔲" }
+  ]
+}, Ce = {
+  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 }
+  },
+  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: "🎲" }
+  ]
+}, 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
+  }));
+};
+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 E = () => {
+      if (c.current) {
+        const O = c.current.getBoundingClientRect();
+        d({ width: O.width, height: O.height });
       }
     };
-    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+    return E(), window.addEventListener("resize", E), () => window.removeEventListener("resize", E);
   }, []);
-  const d = (n, a) => {
-    switch (r(n, a, t), t) {
-      case h.Start:
-        s(h.End);
+  const u = (E, O) => {
+    switch (r(E, O, t), t) {
+      case a.Start:
+        s(a.End);
         break;
-      case h.End:
-        s(h.Obstacle);
+      case a.End:
+        s(a.Obstacle);
         break;
     }
-  }, i = (n, a) => {
-    const f = o.find((v) => v.row === n && v.col === a);
-    return f ? { g: f.g, h: f.h, f: f.f } : { g: null, h: null, f: null };
-  }, c = (() => {
-    var b;
-    if (!p.width || !p.height)
+  }, f = (E, O) => {
+    const b = n.find((M) => M.row === E && M.col === O);
+    return b ? { g: b.g, h: b.h, f: b.f } : { g: null, h: null, f: null };
+  }, m = (() => {
+    var y;
+    if (!i.width || !i.height)
       return 20;
-    const n = ((b = e[0]) == null ? void 0 : b.length) || 1, a = e.length || 1, f = 20, v = n + a, O = p.width - f - v, N = p.height - f - v, T = O / n, C = N / a, g = Math.min(T, C);
+    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));
   })();
-  return /* @__PURE__ */ S("div", { className: "grid-wrapper", ref: w, children: /* @__PURE__ */ S(
+  return /* @__PURE__ */ v("div", { className: "grid-wrapper", ref: c, children: /* @__PURE__ */ v(
     "div",
     {
       className: "grid-container",
       style: {
         display: "grid",
-        gridTemplateColumns: `repeat(${((l = e[0]) == null ? void 0 : l.length) || 1}, ${c}px)`,
-        gridTemplateRows: `repeat(${e.length || 1}, ${c}px)`,
+        gridTemplateColumns: `repeat(${((S = e[0]) == null ? void 0 : S.length) || 1}, ${m}px)`,
+        gridTemplateRows: `repeat(${e.length || 1}, ${m}px)`,
         gap: "1px",
         padding: "8px",
         background: "var(--bg-secondary)",
@@ -577,22 +623,23 @@ const me = () => {
         border: "1px solid var(--border-color)"
       },
       children: e.map(
-        (n, a) => n.map((f, v) => {
-          const O = u.some((_) => _.row === f.row && _.col === f.col), N = o.some((_) => _.row === f.row && _.col === f.col), { g: T, h: C, f: g } = i(f.row, f.col);
-          let b = pe(f, N);
-          if (O) {
-            const _ = u.findIndex((B) => B.row === f.row && B.col === f.col);
-            _ === 0 ? b = "var(--cell-start)" : _ === u.length - 1 ? b = "var(--cell-end)" : b = "var(--cell-path)";
+        (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)";
           }
-          return /* @__PURE__ */ y(
+          return /* @__PURE__ */ N(
             "div",
             {
               className: "grid-cell",
-              onClick: () => d(a, v),
+              onClick: () => u(O, M),
               style: {
-                width: c,
-                height: c,
-                backgroundColor: b,
+                width: m,
+                height: m,
+                backgroundColor: y,
                 border: "1px solid var(--cell-border)",
                 cursor: "pointer",
                 transition: "all 0.15s ease",
@@ -602,177 +649,345 @@ const me = () => {
                 alignItems: "center",
                 borderRadius: "2px"
               },
-              onMouseEnter: (_) => {
-                f.state === h.Empty && (_.currentTarget.style.backgroundColor = "var(--bg-tertiary)", _.currentTarget.style.transform = "scale(1.02)");
+              onMouseEnter: (T) => {
+                b.state === a.Empty && (T.currentTarget.style.backgroundColor = "var(--bg-tertiary)", T.currentTarget.style.transform = "scale(1.02)");
               },
-              onMouseLeave: (_) => {
-                f.state === h.Empty && (_.currentTarget.style.backgroundColor = b, _.currentTarget.style.transform = "scale(1)");
+              onMouseLeave: (T) => {
+                b.state === a.Empty && (T.currentTarget.style.backgroundColor = y, T.currentTarget.style.transform = "scale(1)");
               },
               children: [
-                N && /* @__PURE__ */ y("div", { className: "cell-values", children: [
-                  /* @__PURE__ */ y("div", { className: "value-h", children: [
+                _ && p && /* @__PURE__ */ N("div", { className: "cell-values", children: [
+                  /* @__PURE__ */ N("div", { className: "value-h", children: [
                     "h",
-                    C
+                    L
                   ] }),
-                  /* @__PURE__ */ y("div", { className: "value-f", children: [
+                  /* @__PURE__ */ N("div", { className: "value-f", children: [
                     "f",
                     g
                   ] }),
-                  /* @__PURE__ */ y("div", { className: "value-g", children: [
+                  /* @__PURE__ */ N("div", { className: "value-g", children: [
                     "g",
-                    T
+                    C
                   ] })
                 ] }),
-                f.state === h.Start && /* @__PURE__ */ S("div", { className: "cell-indicator start", children: "●" }),
-                f.state === h.End && /* @__PURE__ */ S("div", { className: "cell-indicator end", children: "●" }),
-                f.state === h.Obstacle && /* @__PURE__ */ S("div", { className: "cell-indicator obstacle", children: "■" })
+                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) || "⛰️" })
               ]
             },
-            `${a}-${v}`
+            `${O}-${M}`
           );
         })
       )
     }
   ) });
-}, pe = (e, t) => {
+}, Le = (e, t) => {
   if (t)
-    return e.state === h.Start ? "var(--cell-start)" : e.state === h.End ? "var(--cell-end)" : "var(--cell-visited)";
+    return e.state === a.Start ? "var(--cell-start)" : e.state === a.End ? "var(--cell-end)" : "var(--cell-visited)";
   switch (e.state) {
-    case h.Start:
+    case a.Start:
       return "var(--cell-start)";
-    case h.End:
+    case a.End:
       return "var(--cell-end)";
-    case h.Obstacle:
+    case a.Obstacle:
       return "var(--cell-obstacle)";
-    case h.Empty:
+    case a.Water:
+      return "var(--cell-water)";
+    case a.Forest:
+      return "var(--cell-forest)";
+    case a.Mountain:
+      return "var(--cell-mountain)";
+    case a.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);
+  }
+  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 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 }));
+  }
+  for (const i of [...r])
+    if (i.state === a.Mountain) {
+      const d = [
+        { 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 }));
+    }
+  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 });
+    }
+  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;
+  });
+}, 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) {
+        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 });
+      }
+  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) => {
+  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 });
+    }
+  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 ve = () => {
+const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
   const {
-    activeButton: e,
-    setSelectedButtonState: t,
-    resetCells: r,
-    rows: s,
-    columns: o,
-    setNumberOfRows: u,
-    setNumberOfColumns: p,
-    handleFindPath: E,
-    canTravelDiagonally: w,
-    setCanTravelDiagonally: d
-  } = U(), [i, m] = H(() => {
-    const v = localStorage.getItem("darkMode");
-    return v ? JSON.parse(v) : !1;
-  });
-  F(() => {
-    localStorage.setItem("darkMode", JSON.stringify(i)), document.documentElement.setAttribute("data-theme", i ? "dark" : "light");
-  }, [i]);
-  const c = () => {
-    m(!i);
-  }, l = [
-    { label: "Start", state: h.Start },
-    { label: "End", state: h.End },
-    { label: "Obstacle", state: h.Obstacle },
-    { label: "Clear", state: h.Empty },
+    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 }
-  ], n = (v) => {
-    v === null ? a() : t(v);
-  }, a = () => {
-    r(), t(h.Start);
-  }, f = () => {
-    E(w);
+  ], R = (g) => {
+    g === null ? _() : s(g);
+  }, _ = () => {
+    n(), s(a.Start);
+  }, C = () => {
+    i(d);
+  }, L = (g) => {
+    n();
+    let y;
+    if (u === A.Medieval)
+      switch (g) {
+        case "river":
+          y = Ae(o, l);
+          break;
+        case "mountains":
+          y = De(o, l);
+          break;
+        case "maze":
+          y = ze(o, l);
+          break;
+        case "random":
+          y = Ve(o, l);
+          break;
+        default:
+          return;
+      }
+    else
+      switch (g) {
+        case "random":
+          y = ke(o, l);
+          break;
+        case "maze":
+          y = We(o, l);
+          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);
   };
-  return /* @__PURE__ */ S("div", { className: "control-panel", children: /* @__PURE__ */ y("div", { className: "control-grid", children: [
-    /* @__PURE__ */ y("div", { className: "control-group tools", children: [
-      /* @__PURE__ */ S("h3", { className: "group-title", children: "Tools" }),
-      /* @__PURE__ */ S("div", { className: "button-group", children: l.map((v, O) => /* @__PURE__ */ S(
+  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 ${v.label.toLowerCase()} ${e === v.state ? "active" : ""}`,
-          onClick: () => n(v.state),
-          children: v.label
+          className: `control-button ${g.label.toLowerCase()} ${r === g.state ? "active" : ""}`,
+          onClick: () => R(g.state),
+          children: g.label
         },
-        O
+        y
       )) })
     ] }),
-    /* @__PURE__ */ y("div", { className: "control-group actions", children: [
-      /* @__PURE__ */ S("h3", { className: "group-title", children: "Actions" }),
-      /* @__PURE__ */ y("div", { className: "button-group", children: [
-        /* @__PURE__ */ S(
+    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: f,
+            onClick: C,
             children: "Find Path"
           }
         ),
-        /* @__PURE__ */ S(
-          "button",
-          {
-            className: `control-button diagonal ${w ? "active" : ""}`,
-            onClick: () => d(!w),
-            children: w ? "Diagonal On" : "Diagonal Off"
-          }
-        ),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ v(
           "button",
           {
-            className: `control-button theme-toggle ${i ? "active" : ""}`,
-            onClick: c,
-            title: i ? "Switch to light mode" : "Switch to dark mode",
-            children: i ? "☀️ Light" : "🌙 Dark"
+            className: `control-button diagonal ${d ? "active" : ""}`,
+            onClick: () => c(!d),
+            children: d ? "Diagonal On" : "Diagonal Off"
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ y("div", { className: "control-group size", children: [
-      /* @__PURE__ */ S("h3", { className: "group-title", children: "Grid Size" }),
-      /* @__PURE__ */ y("div", { className: "size-controls", children: [
-        /* @__PURE__ */ y("div", { className: "size-control", children: [
-          /* @__PURE__ */ S("label", { className: "size-label", children: "Rows" }),
-          /* @__PURE__ */ y("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ S(
+    /* @__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(
               "button",
               {
                 className: "size-button",
-                onClick: () => u(Math.max(5, s - 1)),
-                disabled: s <= 5,
+                onClick: () => p(Math.max(5, o - 1)),
+                disabled: o <= 5,
                 children: "−"
               }
             ),
-            /* @__PURE__ */ S("span", { className: "size-value", children: s }),
-            /* @__PURE__ */ S(
+            /* @__PURE__ */ v("span", { className: "size-value", children: o }),
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
-                onClick: () => u(Math.min(50, s + 1)),
-                disabled: s >= 50,
+                onClick: () => p(Math.min(50, o + 1)),
+                disabled: o >= 50,
                 children: "+"
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ y("div", { className: "size-control", children: [
-          /* @__PURE__ */ S("label", { className: "size-label", children: "Columns" }),
-          /* @__PURE__ */ y("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ S(
+        /* @__PURE__ */ N("div", { className: "size-control", children: [
+          /* @__PURE__ */ v("label", { className: "size-label", children: "Columns" }),
+          /* @__PURE__ */ N("div", { className: "size-buttons", children: [
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
-                onClick: () => p(Math.max(5, o - 1)),
-                disabled: o <= 5,
+                onClick: () => w(Math.max(5, l - 1)),
+                disabled: l <= 5,
                 children: "−"
               }
             ),
-            /* @__PURE__ */ S("span", { className: "size-value", children: o }),
-            /* @__PURE__ */ S(
+            /* @__PURE__ */ v("span", { className: "size-value", children: l }),
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
-                onClick: () => p(Math.min(50, o + 1)),
-                disabled: o >= 50,
+                onClick: () => w(Math.min(50, l + 1)),
+                disabled: l >= 50,
                 children: "+"
               }
             )
@@ -781,16 +996,27 @@ const ve = () => {
       ] })
     ] })
   ] }) });
-}, Ee = () => /* @__PURE__ */ S("div", { className: "astar-visualizer-root", children: /* @__PURE__ */ y("div", { className: "app-container", children: [
-  /* @__PURE__ */ S("header", { className: "app-header", children: /* @__PURE__ */ S("h1", { className: "app-title", children: "A* Pathfinding" }) }),
-  /* @__PURE__ */ S("main", { className: "app-main", children: /* @__PURE__ */ S(me, {}) }),
-  /* @__PURE__ */ S("footer", { className: "app-footer", children: /* @__PURE__ */ S(ve, {}) })
-] }) });
-function ge() {
-  return /* @__PURE__ */ S(Ee, {});
+}, Ie = ({ defaultDarkMode: e }) => {
+  const t = ne(null), { visualTheme: r } = j(), [s, n] = ee(() => {
+    if (e !== void 0)
+      return e;
+    const o = localStorage.getItem("astar-darkMode");
+    return o ? JSON.parse(o) : !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 }) })
+  ] }) });
+};
+function je({ defaultDarkMode: e }) {
+  return /* @__PURE__ */ v(Ie, { defaultDarkMode: e });
 }
 export {
-  ge as AStarVisualizer,
-  h as CellState,
-  Ee as Layout
+  je as AStarVisualizer,
+  a as CellState,
+  Ie as Layout,
+  A as VisualTheme
 };