astar-visualizer 1.0.7 → 1.0.9

package/dist/astar-visualizer.js

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