astar-visualizer 1.0.8 → 1.0.9

package/dist/astar-visualizer.js

@@ -1,14 +1,14 @@
 import { jsx as v, jsxs as N } from "react/jsx-runtime";
-import z, { useState as ee, useEffect as te, useRef as ne } from "react";
+import D, { useState as ee, useEffect as te, useRef as ne } from "react";
 const U = (e) => {
   let t;
-  const r = /* @__PURE__ */ new Set(), s = (d, c) => {
-    const u = typeof d == "function" ? d(t) : d;
+  const r = /* @__PURE__ */ new Set(), s = (f, c) => {
+    const u = typeof f == "function" ? f(t) : f;
     if (!Object.is(u, t)) {
-      const f = t;
-      t = c ?? (typeof u != "object" || u === null) ? u : Object.assign({}, t, u), r.forEach((h) => h(t, f));
+      const h = t;
+      t = c ?? (typeof u != "object" || u === null) ? u : Object.assign({}, t, u), r.forEach((m) => m(t, h));
     }
-  }, n = () => t, w = { setState: s, getState: n, getInitialState: () => i, subscribe: (d) => (r.add(d), () => r.delete(d)), destroy: () => {
+  }, n = () => t, w = { setState: s, getState: n, getInitialState: () => i, subscribe: (f) => (r.add(f), () => r.delete(f)), destroy: () => {
     r.clear();
   } }, i = t = e(s, n, w);
   return w;
@@ -31,33 +31,33 @@ function le() {
   if (q)
     return W;
   q = 1;
-  var e = z;
+  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, 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];
+    var h = u(), m = s({ inst: { value: h, getSnapshot: u } }), d = m[0].inst, S = m[1];
     return o(
       function() {
-        m.value = f, m.getSnapshot = u, w(m) && S({ inst: m });
+        d.value = h, d.getSnapshot = u, w(d) && S({ inst: d });
       },
-      [c, f, u]
+      [c, h, u]
     ), n(
       function() {
-        return w(m) && S({ inst: m }), c(function() {
-          w(m) && S({ inst: m });
+        return w(d) && S({ inst: d }), c(function() {
+          w(d) && S({ inst: d });
         });
       },
       [c]
-    ), l(f), f;
+    ), l(h), h;
   }
   function w(c) {
     var u = c.getSnapshot;
     c = c.value;
     try {
-      var f = u();
-      return !r(c, f);
+      var h = u();
+      return !r(c, h);
     } catch {
       return !0;
     }
@@ -65,8 +65,8 @@ function le() {
   function i(c, u) {
     return u();
   }
-  var d = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? i : p;
-  return W.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : d, W;
+  var f = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? i : p;
+  return W.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : f, W;
 }
 var P = {};
 /**
@@ -81,53 +81,53 @@ var P = {};
 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 e(h, m) {
+      return h === m && (h !== 0 || 1 / h === 1 / m) || h !== h && m !== m;
     }
-    function t(f, h) {
-      d || n.startTransition === void 0 || (d = !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 m = h();
+      var d = m();
       if (!c) {
-        var S = h();
-        o(m, S) || (console.error(
+        var S = m();
+        o(d, S) || (console.error(
           "The result of getSnapshot should be cached to avoid an infinite loop"
         ), c = !0);
       }
       S = l({
-        inst: { value: m, getSnapshot: h }
+        inst: { value: d, getSnapshot: m }
       });
-      var E = S[0].inst, O = S[1];
+      var E = S[0].inst, y = S[1];
       return w(
         function() {
-          E.value = m, E.getSnapshot = h, r(E) && O({ inst: E });
+          E.value = d, E.getSnapshot = m, r(E) && y({ inst: E });
         },
-        [f, m, h]
+        [h, d, m]
       ), p(
         function() {
-          return r(E) && O({ inst: E }), f(function() {
-            r(E) && O({ inst: E });
+          return r(E) && y({ inst: E }), h(function() {
+            r(E) && y({ inst: E });
           });
         },
-        [f]
-      ), i(m), m;
+        [h]
+      ), i(d), d;
     }
-    function r(f) {
-      var h = f.getSnapshot;
-      f = f.value;
+    function r(h) {
+      var m = h.getSnapshot;
+      h = h.value;
       try {
-        var m = h();
-        return !o(f, m);
+        var d = m();
+        return !o(h, d);
       } catch {
         return !0;
       }
     }
-    function s(f, h) {
-      return h();
+    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 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;
+    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;
 }
@@ -149,25 +149,25 @@ 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 e = D, t = re();
+  function r(i, f) {
+    return i === f && (i !== 0 || 1 / i === 1 / f) || i !== i && f !== f;
   }
   var s = typeof Object.is == "function" ? Object.is : r, n = t.useSyncExternalStore, o = e.useRef, l = e.useEffect, p = e.useMemo, w = e.useDebugValue;
-  return k.useSyncExternalStoreWithSelector = function(i, d, c, u, f) {
-    var h = o(null);
-    if (h.current === null) {
-      var m = { hasValue: !1, value: null };
-      h.current = m;
+  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
-      m = h.current;
-    h = p(
+      d = m.current;
+    m = p(
       function() {
         function E(_) {
-          if (!O) {
-            if (O = !0, b = _, _ = u(_), f !== void 0 && m.hasValue) {
-              var C = m.value;
-              if (f(C, _))
+          if (!y) {
+            if (y = !0, b = _, _ = u(_), h !== void 0 && d.hasValue) {
+              var C = d.value;
+              if (h(C, _))
                 return M = C;
             }
             return M = _;
@@ -175,24 +175,24 @@ function ce() {
           if (C = M, s(b, _))
             return C;
           var L = u(_);
-          return f !== void 0 && f(C, L) ? (b = _, C) : (b = _, M = L);
+          return h !== void 0 && h(C, L) ? (b = _, C) : (b = _, M = L);
         }
-        var O = !1, b, M, R = c === void 0 ? null : c;
+        var y = !1, b, M, R = c === void 0 ? null : c;
         return [
           function() {
-            return E(d());
+            return E(f());
           },
           R === null ? void 0 : function() {
             return E(R());
           }
         ];
       },
-      [d, c, u, f]
+      [f, c, u, h]
     );
-    var S = n(i, h[0], h[1]);
+    var S = n(i, m[0], m[1]);
     return l(
       function() {
-        m.hasValue = !0, m.value = S;
+        d.hasValue = !0, d.value = S;
       },
       [S]
     ), w(S), S;
@@ -211,25 +211,25 @@ var 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;
+    function e(i, f) {
+      return i === f && (i !== 0 || 1 / i === 1 / f) || i !== i && f !== f;
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var t = z, r = re(), s = typeof Object.is == "function" ? Object.is : e, n = r.useSyncExternalStore, o = t.useRef, l = t.useEffect, p = t.useMemo, w = t.useDebugValue;
-    I.useSyncExternalStoreWithSelector = function(i, d, c, u, f) {
-      var h = o(null);
-      if (h.current === null) {
-        var m = { hasValue: !1, value: null };
-        h.current = m;
+    var t = 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
-        m = h.current;
-      h = p(
+        d = m.current;
+      m = p(
         function() {
           function E(_) {
-            if (!O) {
-              if (O = !0, b = _, _ = u(_), f !== void 0 && m.hasValue) {
-                var C = m.value;
-                if (f(C, _))
+            if (!y) {
+              if (y = !0, b = _, _ = u(_), h !== void 0 && d.hasValue) {
+                var C = d.value;
+                if (h(C, _))
                   return M = C;
               }
               return M = _;
@@ -237,24 +237,24 @@ function ue() {
             if (C = M, s(b, _))
               return C;
             var L = u(_);
-            return f !== void 0 && f(C, L) ? (b = _, C) : (b = _, M = L);
+            return h !== void 0 && h(C, L) ? (b = _, C) : (b = _, M = L);
           }
-          var O = !1, b, M, R = c === void 0 ? null : c;
+          var y = !1, b, M, R = c === void 0 ? null : c;
           return [
             function() {
-              return E(d());
+              return E(f());
             },
             R === null ? void 0 : function() {
               return E(R());
             }
           ];
         },
-        [d, c, u, f]
+        [f, c, u, h]
       );
-      var S = n(i, h[0], h[1]);
+      var S = n(i, m[0], m[1]);
       return l(
         function() {
-          m.hasValue = !0, m.value = S;
+          d.hasValue = !0, d.value = S;
         },
         [S]
       ), w(S), S;
@@ -263,7 +263,7 @@ function ue() {
 }
 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 fe = /* @__PURE__ */ ae(de), { useDebugValue: he } = D, { useSyncExternalStoreWithSelector: me } = fe;
 const pe = (e) => e;
 function ve(e, t = pe, r) {
   const s = me(
@@ -279,7 +279,7 @@ const Z = (e) => {
   const t = typeof e == "function" ? se(e) : e, r = (s, n) => ve(t, s, n);
   return Object.assign(r, t), r;
 }, we = (e) => e ? Z(e) : Z;
-var a = /* @__PURE__ */ ((e) => (e[e.Empty = 0] = "Empty", e[e.Start = 1] = "Start", e[e.End = 2] = "End", e[e.Obstacle = 3] = "Obstacle", e[e.Visited = 4] = "Visited", e[e.Path = 5] = "Path", e[e.Water = 6] = "Water", e[e.Forest = 7] = "Forest", e[e.Mountain = 8] = "Mountain", e))(a || {}), A = /* @__PURE__ */ ((e) => (e.Classic = "classic", e.Medieval = "medieval", e))(A || {});
+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));
@@ -321,33 +321,33 @@ const x = (e, t) => {
 }, _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);
+    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((h) => h.row === i.row && h.col === i.col))
+      if (o.some((m) => m.row === i.row && m.col === i.col))
         continue;
-      const { g: d, h: c, f: u } = Ee(p, i, r), f = n.find(
-        (h) => h.row === i.row && h.col === i.col
+      const { g: f, h: c, f: u } = Ee(p, i, r), h = n.find(
+        (m) => m.row === i.row && m.col === i.col
       );
-      if (!f || d < f.g) {
-        const h = {
+      if (!h || f < h.g) {
+        const m = {
           row: i.row,
           col: i.col,
-          g: d,
+          g: f,
           h: c,
           f: u,
           parent: p
         };
-        f ? (f.g = d, f.f = u, f.parent = p) : n.push(h);
+        h ? (h.g = f, h.f = u, h.parent = p) : n.push(m);
       }
     }
   }
   return { path: [], visitedNodes: o };
-}, Oe = (e) => ({
+}, ye = (e) => ({
   cells: Array.from(
     { length: 8 },
     (t, r) => Array.from({ length: 12 }, (s, n) => ({
@@ -406,7 +406,7 @@ const x = (e, t) => {
   setCellState: (t, r, s) => {
     e((n) => {
       const o = n.cells.map(
-        (i) => i.map((d) => ({ ...d }))
+        (i) => i.map((f) => ({ ...f }))
       );
       let l = n.startTile, p = n.endTile, w = [...n.obstacleTiles];
       switch (s === a.Start && n.startTile && (o[n.startTile.row][n.startTile.col].state = a.Empty, l = null), s === a.End && n.endTile && (o[n.endTile.row][n.endTile.col].state = a.Empty, p = null), o[t][r].state = s, s) {
@@ -455,38 +455,38 @@ const x = (e, t) => {
       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
+          (i) => i.map((f) => ({
+            row: f.row,
+            col: f.col,
+            state: f.state
           }))
         ), { path: l, visitedNodes: p } = _e(o, s, n, t);
-        return (async (i, d) => {
-          for (let c of d)
+        return (async (i, f) => {
+          for (let c of f)
             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
+              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 {
                 ...u,
-                cells: f,
+                cells: h,
                 visitedNodes: [...u.visitedNodes, c]
               };
             });
           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
+              const h = u.cells.map(
+                (m) => m.map((d) => ({
+                  ...d,
+                  state: c.row === d.row && c.col === d.col ? a.Path : d.state
                 }))
               );
               return {
                 ...u,
-                cells: f,
+                cells: h,
                 path: [...u.path, c]
               };
             });
@@ -523,22 +523,22 @@ const x = (e, t) => {
       };
     });
   }
-}), ye = (e) => ({
+}), Oe = (e) => ({
   activeButton: a.Start,
   setSelectedButtonState: (t) => e({ activeButton: t }),
   canTravelDiagonally: !0,
   setCanTravelDiagonally: (t) => e({ canTravelDiagonally: t })
 }), Ne = (e) => ({
-  visualTheme: A.Medieval,
+  visualTheme: z.Medieval,
   showCosts: !1,
   setVisualTheme: (t) => e({ visualTheme: t }),
   setShowCosts: (t) => e({ showCosts: t })
 }), j = we((e, t, r) => ({
-  ...Oe(e),
   ...ye(e),
+  ...Oe(e),
   ...Ne(e)
 })), Me = {
-  id: A.Classic,
+  id: z.Classic,
   name: "Classic",
   startIcon: "●",
   endIcon: "●",
@@ -550,7 +550,7 @@ const x = (e, t) => {
     { id: "maze", name: "Maze", icon: "🔲" }
   ]
 }, Ce = {
-  id: A.Medieval,
+  id: z.Medieval,
   name: "Medieval",
   startIcon: "⚔️",
   endIcon: "🏰",
@@ -567,8 +567,8 @@ const x = (e, t) => {
     { id: "random", name: "Random Forest", icon: "🎲" }
   ]
 }, oe = {
-  [A.Classic]: Me,
-  [A.Medieval]: Ce
+  [z.Classic]: Me,
+  [z.Medieval]: Ce
 }, F = (e) => oe[e], Te = (e) => {
   const t = F(e);
   return Object.entries(t.terrains).map(([r, s]) => ({
@@ -578,18 +578,18 @@ const x = (e, t) => {
 };
 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);
+  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 O = c.current.getBoundingClientRect();
-        d({ width: O.width, height: O.height });
+        const y = c.current.getBoundingClientRect();
+        f({ width: y.width, height: y.height });
       }
     };
     return E(), window.addEventListener("resize", E), () => window.removeEventListener("resize", E);
   }, []);
-  const u = (E, O) => {
-    switch (r(E, O, t), t) {
+  const u = (E, y) => {
+    switch (r(E, y, t), t) {
       case a.Start:
         s(a.End);
         break;
@@ -597,14 +597,14 @@ const Re = () => {
         s(a.Obstacle);
         break;
     }
-  }, f = (E, O) => {
-    const b = n.find((M) => M.row === E && M.col === O);
+  }, 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 };
-  }, m = (() => {
-    var y;
+  }, d = (() => {
+    var O;
     if (!i.width || !i.height)
       return 20;
-    const E = ((y = e[0]) == null ? void 0 : y.length) || 1, O = e.length || 1, b = 20, M = E + O, R = i.width - b - M, _ = i.height - b - M, C = R / E, L = _ / O, g = Math.min(C, L);
+    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__ */ v("div", { className: "grid-wrapper", ref: c, children: /* @__PURE__ */ v(
@@ -613,8 +613,8 @@ const Re = () => {
       className: "grid-container",
       style: {
         display: "grid",
-        gridTemplateColumns: `repeat(${((S = e[0]) == null ? void 0 : S.length) || 1}, ${m}px)`,
-        gridTemplateRows: `repeat(${e.length || 1}, ${m}px)`,
+        gridTemplateColumns: `repeat(${((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)",
@@ -623,23 +623,23 @@ const Re = () => {
         border: "1px solid var(--border-color)"
       },
       children: e.map(
-        (E, O) => E.map((b, M) => {
-          var D, G, $, H;
-          const R = o.some((T) => T.row === b.row && T.col === b.col), _ = n.some((T) => T.row === b.row && T.col === b.col), { g: C, h: L, f: g } = f(b.row, b.col);
-          let y = Le(b, _);
+        (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 ? y = "var(--cell-start)" : T === o.length - 1 ? y = "var(--cell-end)" : y = "var(--cell-path)";
+            T === 0 ? O = "var(--cell-start)" : T === o.length - 1 ? O = "var(--cell-end)" : O = "var(--cell-path)";
           }
           return /* @__PURE__ */ N(
             "div",
             {
               className: "grid-cell",
-              onClick: () => u(O, M),
+              onClick: () => u(y, M),
               style: {
-                width: m,
-                height: m,
-                backgroundColor: y,
+                width: d,
+                height: d,
+                backgroundColor: O,
                 border: "1px solid var(--cell-border)",
                 cursor: "pointer",
                 transition: "all 0.15s ease",
@@ -653,7 +653,7 @@ const Re = () => {
                 b.state === a.Empty && (T.currentTarget.style.backgroundColor = "var(--bg-tertiary)", T.currentTarget.style.transform = "scale(1.02)");
               },
               onMouseLeave: (T) => {
-                b.state === a.Empty && (T.currentTarget.style.backgroundColor = y, T.currentTarget.style.transform = "scale(1)");
+                b.state === a.Empty && (T.currentTarget.style.backgroundColor = O, T.currentTarget.style.transform = "scale(1)");
               },
               children: [
                 _ && p && /* @__PURE__ */ N("div", { className: "cell-values", children: [
@@ -670,15 +670,15 @@ const Re = () => {
                     C
                   ] })
                 ] }),
-                b.state === a.Start && /* @__PURE__ */ v("div", { className: "cell-indicator start", children: w.startIcon }),
-                b.state === a.End && /* @__PURE__ */ v("div", { className: "cell-indicator end", children: w.endIcon }),
-                b.state === a.Obstacle && /* @__PURE__ */ v("div", { className: "cell-indicator obstacle", children: ((D = w.terrains[a.Obstacle]) == null ? void 0 : D.icon) || "■" }),
-                b.state === a.Water && /* @__PURE__ */ v("div", { className: "cell-indicator water", children: ((G = w.terrains[a.Water]) == null ? void 0 : G.icon) || "🌊" }),
-                b.state === a.Forest && /* @__PURE__ */ v("div", { className: "cell-indicator forest", children: (($ = w.terrains[a.Forest]) == null ? void 0 : $.icon) || "🌲" }),
-                b.state === a.Mountain && /* @__PURE__ */ v("div", { className: "cell-indicator mountain", children: ((H = w.terrains[a.Mountain]) == null ? void 0 : H.icon) || "⛰️" })
+                b.state === 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) || "⛰️" })
               ]
             },
-            `${O}-${M}`
+            `${y}-${M}`
           );
         })
       )
@@ -705,7 +705,7 @@ const Re = () => {
     default:
       return "var(--cell-empty)";
   }
-}, Ae = (e, t) => {
+}, 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));
@@ -716,27 +716,27 @@ const Re = () => {
   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) => {
+}, 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 d = (i - n) / (l - n), c = Math.floor(s + (o - s) * d);
+    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 d = [
+      const f = [
         { row: i.row - 2, col: i.col },
         { row: i.row + 2, col: i.col },
         { row: i.row, col: i.col - 2 },
         { row: i.row, col: i.col + 2 }
       ];
-      for (const c of d)
+      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;
-}, ze = (e, t) => {
+}, De = (e, t) => {
   const r = [];
   for (let n = 0; n < e; n++)
     for (let o = 0; o < t; o++) {
@@ -787,14 +787,14 @@ const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
     setNumberOfRows: p,
     setNumberOfColumns: w,
     handleFindPath: i,
-    canTravelDiagonally: d,
+    canTravelDiagonally: f,
     setCanTravelDiagonally: c,
     visualTheme: u,
-    setVisualTheme: f,
-    showCosts: h,
-    setShowCosts: m,
+    setVisualTheme: h,
+    showCosts: m,
+    setShowCosts: d,
     setCellState: S
-  } = j(), E = F(u), O = Te(u), b = () => {
+  } = j(), E = F(u), y = Te(u), b = () => {
     t(!e);
   }, M = [
     { label: "Start", state: a.Start },
@@ -807,23 +807,23 @@ const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
   }, _ = () => {
     n(), s(a.Start);
   }, C = () => {
-    i(d);
+    i(f);
   }, L = (g) => {
     n();
-    let y;
-    if (u === A.Medieval)
+    let O;
+    if (u === z.Medieval)
       switch (g) {
         case "river":
-          y = Ae(o, l);
+          O = ze(o, l);
           break;
         case "mountains":
-          y = De(o, l);
+          O = Ae(o, l);
           break;
         case "maze":
-          y = ze(o, l);
+          O = De(o, l);
           break;
         case "random":
-          y = Ve(o, l);
+          O = Ve(o, l);
           break;
         default:
           return;
@@ -831,16 +831,16 @@ const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
     else
       switch (g) {
         case "random":
-          y = ke(o, l);
+          O = ke(o, l);
           break;
         case "maze":
-          y = We(o, l);
+          O = We(o, l);
           break;
         default:
           return;
       }
-    for (const D of y)
-      S(D.row, D.col, D.state);
+    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__ */ v("div", { className: "control-panel", children: /* @__PURE__ */ N("div", { className: "control-grid", children: [
@@ -852,7 +852,7 @@ const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
           {
             className: "theme-select",
             value: u,
-            onChange: (g) => f(g.target.value),
+            onChange: (g) => h(g.target.value),
             children: Object.values(oe).map((g) => /* @__PURE__ */ v("option", { value: g.id, children: g.name }, g.id))
           }
         ),
@@ -868,38 +868,38 @@ const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
         /* @__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"
+            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, y) => /* @__PURE__ */ v(
+      /* @__PURE__ */ v("div", { className: "button-group", children: M.map((g, O) => /* @__PURE__ */ v(
         "button",
         {
           className: `control-button ${g.label.toLowerCase()} ${r === g.state ? "active" : ""}`,
           onClick: () => R(g.state),
           children: g.label
         },
-        y
+        O
       )) })
     ] }),
-    u === A.Medieval && /* @__PURE__ */ N("div", { className: "control-group terrain", children: [
+    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: O.filter(({ state: g }) => g !== a.Obstacle).map(({ state: g, config: y }) => /* @__PURE__ */ N(
+      /* @__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 ${y.name.toLowerCase()} ${r === g ? "active" : ""}`,
+          className: `control-button terrain-btn ${O.name.toLowerCase()} ${r === g ? "active" : ""}`,
           onClick: () => s(g),
-          title: y.passable ? "Passable terrain" : "Impassable terrain",
+          title: O.passable ? "Passable terrain" : "Impassable terrain",
           children: [
-            y.icon,
+            O.icon,
             " ",
-            y.name
+            O.name
           ]
         },
         g
@@ -935,9 +935,9 @@ const Pe = ({ isDarkMode: e, setIsDarkMode: t }) => {
         /* @__PURE__ */ v(
           "button",
           {
-            className: `control-button diagonal ${d ? "active" : ""}`,
-            onClick: () => c(!d),
-            children: d ? "Diagonal On" : "Diagonal Off"
+            className: `control-button diagonal ${f ? "active" : ""}`,
+            onClick: () => c(!f),
+            children: f ? "Diagonal On" : "Diagonal Off"
           }
         )
       ] })
@@ -1018,5 +1018,5 @@ export {
   je as AStarVisualizer,
   a as CellState,
   Ie as Layout,
-  A as VisualTheme
+  z as VisualTheme
 };

package/dist/astar-visualizer.umd.cjs

@@ -1,4 +1,4 @@
-(function(C,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(C=typeof globalThis<"u"?globalThis:C||self,i(C.AStarVisualizer={},C["react/jsx-runtime"],C.React))})(this,function(C,i,L){"use strict";const Ie="",Be="",H=e=>{let t;const o=new Set,n=(f,u)=>{const d=typeof f=="function"?f(t):f;if(!Object.is(d,t)){const h=t;t=u??(typeof d!="object"||d===null)?d:Object.assign({},t,d),o.forEach(m=>m(t,h))}},s=()=>t,w={setState:n,getState:s,getInitialState:()=>c,subscribe:f=>(o.add(f),()=>o.delete(f)),destroy:()=>{o.clear()}},c=t=e(n,s,w);return w},re=e=>e?H(e):H;function se(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var P={exports:{}},W={},k={exports:{}},I={};/**
+(function(C,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(C=typeof globalThis<"u"?globalThis:C||self,i(C.AStarVisualizer={},C["react/jsx-runtime"],C.React))})(this,function(C,i,L){"use strict";const Ie="",Be="",H=e=>{let t;const o=new Set,n=(h,u)=>{const d=typeof h=="function"?h(t):h;if(!Object.is(d,t)){const m=t;t=u??(typeof d!="object"||d===null)?d:Object.assign({},t,d),o.forEach(p=>p(t,m))}},s=()=>t,w={setState:n,getState:s,getInitialState:()=>c,subscribe:h=>(o.add(h),()=>o.delete(h)),destroy:()=>{o.clear()}},c=t=e(n,s,w);return w},re=e=>e?H(e):H;function se(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var P={exports:{}},W={},k={exports:{}},I={};/**
  * @license React
  * use-sync-external-store-shim.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var K;function ne(){if(K)return I;K=1;var e=L;function t(u,d){return u===d&&(u!==0||1/u===1/d)||u!==u&&d!==d}var o=typeof Object.is=="function"?Object.is:t,n=e.useState,s=e.useEffect,r=e.useLayoutEffect,l=e.useDebugValue;function v(u,d){var h=d(),m=n({inst:{value:h,getSnapshot:d}}),p=m[0].inst,S=m[1];return r(function(){p.value=h,p.getSnapshot=d,w(p)&&S({inst:p})},[u,h,d]),s(function(){return w(p)&&S({inst:p}),u(function(){w(p)&&S({inst:p})})},[u]),l(h),h}function w(u){var d=u.getSnapshot;u=u.value;try{var h=d();return!o(u,h)}catch{return!0}}function c(u,d){return d()}var f=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?c:v;return I.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:f,I}var B={};/**
+ */var K;function ne(){if(K)return I;K=1;var e=L;function t(u,d){return u===d&&(u!==0||1/u===1/d)||u!==u&&d!==d}var o=typeof Object.is=="function"?Object.is:t,n=e.useState,s=e.useEffect,r=e.useLayoutEffect,l=e.useDebugValue;function v(u,d){var m=d(),p=n({inst:{value:m,getSnapshot:d}}),f=p[0].inst,E=p[1];return r(function(){f.value=m,f.getSnapshot=d,w(f)&&E({inst:f})},[u,m,d]),s(function(){return w(f)&&E({inst:f}),u(function(){w(f)&&E({inst:f})})},[u]),l(m),m}function w(u){var d=u.getSnapshot;u=u.value;try{var m=d();return!o(u,m)}catch{return!0}}function c(u,d){return d()}var h=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?c:v;return I.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:h,I}var B={};/**
  * @license React
  * use-sync-external-store-shim.development.js
  *
@@ -14,7 +14,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var U;function ae(){return U||(U=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(h,m){f||s.startTransition===void 0||(f=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var p=m();if(!u){var S=m();r(p,S)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),u=!0)}S=l({inst:{value:p,getSnapshot:m}});var E=S[0].inst,y=S[1];return w(function(){E.value=p,E.getSnapshot=m,o(E)&&y({inst:E})},[h,p,m]),v(function(){return o(E)&&y({inst:E}),h(function(){o(E)&&y({inst:E})})},[h]),c(p),p}function o(h){var m=h.getSnapshot;h=h.value;try{var p=m();return!r(h,p)}catch{return!0}}function n(h,m){return m()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var s=L,r=typeof Object.is=="function"?Object.is:e,l=s.useState,v=s.useEffect,w=s.useLayoutEffect,c=s.useDebugValue,f=!1,u=!1,d=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?n:t;B.useSyncExternalStore=s.useSyncExternalStore!==void 0?s.useSyncExternalStore:d,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),B}var R;function J(){return R||(R=1,process.env.NODE_ENV==="production"?k.exports=ne():k.exports=ae()),k.exports}/**
+ */var U;function ae(){return U||(U=1,process.env.NODE_ENV!=="production"&&function(){function e(m,p){return m===p&&(m!==0||1/m===1/p)||m!==m&&p!==p}function t(m,p){h||s.startTransition===void 0||(h=!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 f=p();if(!u){var E=p();r(f,E)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),u=!0)}E=l({inst:{value:f,getSnapshot:p}});var S=E[0].inst,_=E[1];return w(function(){S.value=f,S.getSnapshot=p,o(S)&&_({inst:S})},[m,f,p]),v(function(){return o(S)&&_({inst:S}),m(function(){o(S)&&_({inst:S})})},[m]),c(f),f}function o(m){var p=m.getSnapshot;m=m.value;try{var f=p();return!r(m,f)}catch{return!0}}function n(m,p){return p()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var s=L,r=typeof Object.is=="function"?Object.is:e,l=s.useState,v=s.useEffect,w=s.useLayoutEffect,c=s.useDebugValue,h=!1,u=!1,d=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?n:t;B.useSyncExternalStore=s.useSyncExternalStore!==void 0?s.useSyncExternalStore:d,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),B}var R;function J(){return R||(R=1,process.env.NODE_ENV==="production"?k.exports=ne():k.exports=ae()),k.exports}/**
  * @license React
  * use-sync-external-store-shim/with-selector.production.js
  *
@@ -22,7 +22,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var q;function le(){if(q)return W;q=1;var e=L,t=J();function o(c,f){return c===f&&(c!==0||1/c===1/f)||c!==c&&f!==f}var n=typeof Object.is=="function"?Object.is:o,s=t.useSyncExternalStore,r=e.useRef,l=e.useEffect,v=e.useMemo,w=e.useDebugValue;return W.useSyncExternalStoreWithSelector=function(c,f,u,d,h){var m=r(null);if(m.current===null){var p={hasValue:!1,value:null};m.current=p}else p=m.current;m=v(function(){function E(_){if(!y){if(y=!0,b=_,_=d(_),h!==void 0&&p.hasValue){var M=p.value;if(h(M,_))return N=M}return N=_}if(M=N,n(b,_))return M;var D=d(_);return h!==void 0&&h(M,D)?(b=_,M):(b=_,N=D)}var y=!1,b,N,A=u===void 0?null:u;return[function(){return E(f())},A===null?void 0:function(){return E(A())}]},[f,u,d,h]);var S=s(c,m[0],m[1]);return l(function(){p.hasValue=!0,p.value=S},[S]),w(S),S},W}var j={};/**
+ */var q;function le(){if(q)return W;q=1;var e=L,t=J();function o(c,h){return c===h&&(c!==0||1/c===1/h)||c!==c&&h!==h}var n=typeof Object.is=="function"?Object.is:o,s=t.useSyncExternalStore,r=e.useRef,l=e.useEffect,v=e.useMemo,w=e.useDebugValue;return W.useSyncExternalStoreWithSelector=function(c,h,u,d,m){var p=r(null);if(p.current===null){var f={hasValue:!1,value:null};p.current=f}else f=p.current;p=v(function(){function S(y){if(!_){if(_=!0,b=y,y=d(y),m!==void 0&&f.hasValue){var M=f.value;if(m(M,y))return N=M}return N=y}if(M=N,n(b,y))return M;var A=d(y);return m!==void 0&&m(M,A)?(b=y,M):(b=y,N=A)}var _=!1,b,N,z=u===void 0?null:u;return[function(){return S(h())},z===null?void 0:function(){return S(z())}]},[h,u,d,m]);var E=s(c,p[0],p[1]);return l(function(){f.hasValue=!0,f.value=E},[E]),w(E),E},W}var j={};/**
  * @license React
  * use-sync-external-store-shim/with-selector.development.js
  *
@@ -30,4 +30,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Y;function ce(){return Y||(Y=1,process.env.NODE_ENV!=="production"&&function(){function e(c,f){return c===f&&(c!==0||1/c===1/f)||c!==c&&f!==f}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=L,o=J(),n=typeof Object.is=="function"?Object.is:e,s=o.useSyncExternalStore,r=t.useRef,l=t.useEffect,v=t.useMemo,w=t.useDebugValue;j.useSyncExternalStoreWithSelector=function(c,f,u,d,h){var m=r(null);if(m.current===null){var p={hasValue:!1,value:null};m.current=p}else p=m.current;m=v(function(){function E(_){if(!y){if(y=!0,b=_,_=d(_),h!==void 0&&p.hasValue){var M=p.value;if(h(M,_))return N=M}return N=_}if(M=N,n(b,_))return M;var D=d(_);return h!==void 0&&h(M,D)?(b=_,M):(b=_,N=D)}var y=!1,b,N,A=u===void 0?null:u;return[function(){return E(f())},A===null?void 0:function(){return E(A())}]},[f,u,d,h]);var S=s(c,m[0],m[1]);return l(function(){p.hasValue=!0,p.value=S},[S]),w(S),S},typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),j}process.env.NODE_ENV==="production"?P.exports=le():P.exports=ce();var ie=P.exports;const ue=se(ie),{useDebugValue:de}=L,{useSyncExternalStoreWithSelector:fe}=ue;let je=!1;const he=e=>e;function me(e,t=he,o){const n=fe(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,o);return de(n),n}const Q=e=>{const t=typeof e=="function"?re(e):e,o=(n,s)=>me(t,n,s);return Object.assign(o,t),o},pe=e=>e?Q(e):Q;var a=(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=(e=>(e.Classic="classic",e.Medieval="medieval",e))(z||{});const x=(e,t)=>{const o=Math.abs(e.row-t.row),n=Math.abs(e.col-t.col);return Math.floor(10*Math.sqrt(o*o+n*n))},ve=(e,t)=>({row:e.row,col:e.col,g:0,h:x(e,t),f:x(e,t),parent:null}),we=(e,t,o)=>{const n=[{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}];o&&n.push({row:e.row-1,col:e.col-1},{row:e.row-1,col:e.col+1},{row:e.row+1,col:e.col-1},{row:e.row+1,col:e.col+1});const s=[a.Obstacle,a.Water,a.Mountain];return n.filter(r=>r.row>=0&&r.row<t.length&&r.col>=0&&r.col<t[0].length&&!s.includes(t[r.row][r.col].state)).map(r=>({row:r.row,col:r.col,state:t[r.row][r.col].state}))},be=(e,t,o)=>{const n=Math.abs(e.row-t.row),s=Math.abs(e.col-t.col),r=e.g+(n===0||s===0?10:14),l=x(t,o),v=r+l;return{g:r,h:l,f:v}},ge=e=>{const t=[];let o=e;for(;o;)t.push(o),o=o.parent;return t.reverse()},Ee=(e,t,o,n)=>{const s=[],r=[],l=ve(t,o);for(s.push(l);s.length>0;){s.sort((c,f)=>c.f-f.f);const v=s.shift();if(v.row===o.row&&v.col===o.col)return r.push(v),{path:ge(v),visitedNodes:r};r.push(v);const w=we(v,e,n);for(const c of w){if(r.some(m=>m.row===c.row&&m.col===c.col))continue;const{g:f,h:u,f:d}=be(v,c,o),h=s.find(m=>m.row===c.row&&m.col===c.col);if(!h||f<h.g){const m={row:c.row,col:c.col,g:f,h:u,f:d,parent:v};h?(h.g=f,h.f=d,h.parent=v):s.push(m)}}}return{path:[],visitedNodes:r}},Se=e=>({cells:Array.from({length:8},(t,o)=>Array.from({length:12},(n,s)=>({row:o,col:s,state:a.Empty}))),rows:8,columns:12,startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[],setNumberOfColumns:t=>{e(o=>{const n=o.cells.map(s=>t>o.columns?[...s,...Array.from({length:t-o.columns},(r,l)=>({row:s[0].row,col:o.columns+l,state:a.Empty}))]:s.slice(0,t));return{...o,columns:t,cells:n}})},setNumberOfRows:t=>{e(o=>{let n=[...o.cells];return t>o.rows?n=[...n,...Array.from({length:t-o.rows},(s,r)=>Array.from({length:o.columns},(l,v)=>({row:o.rows+r,col:v,state:a.Empty})))]:n=n.slice(0,t),{...o,rows:t,cells:n}})},setCellState:(t,o,n)=>{e(s=>{const r=s.cells.map(c=>c.map(f=>({...f})));let l=s.startTile,v=s.endTile,w=[...s.obstacleTiles];switch(n===a.Start&&s.startTile&&(r[s.startTile.row][s.startTile.col].state=a.Empty,l=null),n===a.End&&s.endTile&&(r[s.endTile.row][s.endTile.col].state=a.Empty,v=null),r[t][o].state=n,n){case a.Start:l={row:t,col:o};break;case a.End:v={row:t,col:o};break;case a.Obstacle:w.some(c=>c.row===t&&c.col===o)||w.push({row:t,col:o});break;case a.Empty:w=w.filter(c=>!(c.row===t&&c.col===o));break}return{...s,cells:r,startTile:l,endTile:v,obstacleTiles:w}})},resetCells:()=>{e(t=>({...t,cells:t.cells.map(o=>o.map(n=>({...n,state:a.Empty}))),startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[]}))},handleFindPath:t=>{e(o=>{const n=o.cells.flat().find(r=>r.state===a.Start),s=o.cells.flat().find(r=>r.state===a.End);if(n&&s){const r=o.cells.map(c=>c.map(f=>({row:f.row,col:f.col,state:f.state}))),{path:l,visitedNodes:v}=Ee(r,n,s,t);return(async(c,f)=>{for(let u of f)await new Promise(d=>setTimeout(d,100)),e(d=>{const h=d.cells.map(m=>m.map(p=>({...p,state:u.row===p.row&&u.col===p.col&&p.state===a.Empty?a.Visited:p.state})));return{...d,cells:h,visitedNodes:[...d.visitedNodes,u]}});for(let u of c)await new Promise(d=>setTimeout(d,250)),e(d=>{const h=d.cells.map(m=>m.map(p=>({...p,state:u.row===p.row&&u.col===p.col?a.Path:p.state})));return{...d,cells:h,path:[...d.path,u]}})})(l,v),{...o,path:[],visitedNodes:[]}}return o})},setPath:t=>{e(o=>{const n=o.cells.map(s=>s.map(r=>({...r,state:t.some(l=>l.row===r.row&&l.col===r.col)?a.Path:r.state})));return{...o,cells:n}})},setVisitedNodes:t=>{e(o=>{const n=o.cells.map(s=>s.map(r=>({...r,state:t.some(l=>l.row===r.row&&l.col===r.col)&&r.state===a.Empty?a.Visited:r.state})));return{...o,cells:n}})}}),_e=e=>({activeButton:a.Start,setSelectedButtonState:t=>e({activeButton:t}),canTravelDiagonally:!0,setCanTravelDiagonally:t=>e({canTravelDiagonally:t})}),ye=e=>({visualTheme:z.Medieval,showCosts:!1,setVisualTheme:t=>e({visualTheme:t}),setShowCosts:t=>e({showCosts:t})}),F=pe((e,t,o)=>({...Se(e),..._e(e),...ye(e)})),Oe={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:"🔲"}]},Ne={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:"🎲"}]},X={[z.Classic]:Oe,[z.Medieval]:Ne},G=e=>X[e],Me=e=>{const t=G(e);return Object.entries(t.terrains).map(([o,n])=>({state:Number(o),config:n}))},xe="",Te=()=>{var S;const{cells:e,activeButton:t,setCellState:o,setSelectedButtonState:n,visitedNodes:s,path:r,visualTheme:l,showCosts:v}=F(),w=G(l),[c,f]=L.useState({width:0,height:0}),u=L.useRef(null);L.useEffect(()=>{const E=()=>{if(u.current){const y=u.current.getBoundingClientRect();f({width:y.width,height:y.height})}};return E(),window.addEventListener("resize",E),()=>window.removeEventListener("resize",E)},[]);const d=(E,y)=>{switch(o(E,y,t),t){case a.Start:n(a.End);break;case a.End:n(a.Obstacle);break}},h=(E,y)=>{const b=s.find(N=>N.row===E&&N.col===y);return b?{g:b.g,h:b.h,f:b.f}:{g:null,h:null,f:null}},p=(()=>{var O;if(!c.width||!c.height)return 20;const E=((O=e[0])==null?void 0:O.length)||1,y=e.length||1,b=20,N=E+y,A=c.width-b-N,_=c.height-b-N,M=A/E,D=_/y,g=Math.min(M,D);return Math.max(15,Math.min(g,60))})();return i.jsx("div",{className:"grid-wrapper",ref:u,children:i.jsx("div",{className:"grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${((S=e[0])==null?void 0:S.length)||1}, ${p}px)`,gridTemplateRows:`repeat(${e.length||1}, ${p}px)`,gap:"1px",padding:"8px",background:"var(--bg-secondary)",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",border:"1px solid var(--border-color)"},children:e.map((E,y)=>E.map((b,N)=>{var V,$,ee,te;const A=r.some(T=>T.row===b.row&&T.col===b.col),_=s.some(T=>T.row===b.row&&T.col===b.col),{g:M,h:D,f:g}=h(b.row,b.col);let O=Ce(b,_);if(A){const T=r.findIndex(oe=>oe.row===b.row&&oe.col===b.col);T===0?O="var(--cell-start)":T===r.length-1?O="var(--cell-end)":O="var(--cell-path)"}return i.jsxs("div",{className:"grid-cell",onClick:()=>d(y,N),style:{width:p,height:p,backgroundColor:O,border:"1px solid var(--cell-border)",cursor:"pointer",transition:"all 0.15s ease",position:"relative",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"2px"},onMouseEnter:T=>{b.state===a.Empty&&(T.currentTarget.style.backgroundColor="var(--bg-tertiary)",T.currentTarget.style.transform="scale(1.02)")},onMouseLeave:T=>{b.state===a.Empty&&(T.currentTarget.style.backgroundColor=O,T.currentTarget.style.transform="scale(1)")},children:[_&&v&&i.jsxs("div",{className:"cell-values",children:[i.jsxs("div",{className:"value-h",children:["h",D]}),i.jsxs("div",{className:"value-f",children:["f",g]}),i.jsxs("div",{className:"value-g",children:["g",M]})]}),b.state===a.Start&&i.jsx("div",{className:"cell-indicator start",children:w.startIcon}),b.state===a.End&&i.jsx("div",{className:"cell-indicator end",children:w.endIcon}),b.state===a.Obstacle&&i.jsx("div",{className:"cell-indicator obstacle",children:((V=w.terrains[a.Obstacle])==null?void 0:V.icon)||"■"}),b.state===a.Water&&i.jsx("div",{className:"cell-indicator water",children:(($=w.terrains[a.Water])==null?void 0:$.icon)||"🌊"}),b.state===a.Forest&&i.jsx("div",{className:"cell-indicator forest",children:((ee=w.terrains[a.Forest])==null?void 0:ee.icon)||"🌲"}),b.state===a.Mountain&&i.jsx("div",{className:"cell-indicator mountain",children:((te=w.terrains[a.Mountain])==null?void 0:te.icon)||"⛰️"})]},`${y}-${N}`)}))})})},Ce=(e,t)=>{if(t)return e.state===a.Start?"var(--cell-start)":e.state===a.End?"var(--cell-end)":"var(--cell-visited)";switch(e.state){case a.Start:return"var(--cell-start)";case a.End:return"var(--cell-end)";case a.Obstacle:return"var(--cell-obstacle)";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)"}},Le=(e,t)=>{const o=[],n=Math.floor(e/2),s=Math.max(2,Math.floor(t/6)),r=[];for(let l=0;l<s;l++){const v=Math.floor(t/(s+1)*(l+1));r.push(v)}for(let l=0;l<t;l++)r.includes(l)||(o.push({row:n,col:l,state:a.Water}),n+1<e&&o.push({row:n+1,col:l,state:a.Water}));for(let l=0;l<t;l+=3)n-1>=0&&Math.random()>.5&&o.push({row:n-1,col:l,state:a.Forest}),n+2<e&&Math.random()>.5&&o.push({row:n+2,col:l,state:a.Forest});return o},Ae=(e,t)=>{const o=[],n=Math.floor(e*.2),s=Math.floor(t*.1),r=Math.floor(e*.8),l=Math.floor(t*.9),v=Math.max(2,Math.floor(Math.min(e,t)/5)),w=[];for(let c=0;c<v;c++)w.push(Math.floor((l-s)/(v+1)*(c+1))+s);for(let c=s;c<=l;c++){const f=(c-s)/(l-s),u=Math.floor(n+(r-n)*f);w.some(d=>Math.abs(c-d)<=1)||(u>=0&&u<e&&o.push({row:u,col:c,state:a.Mountain}),u+1<e&&Math.random()>.3&&o.push({row:u+1,col:c,state:a.Mountain}),u-1>=0&&Math.random()>.3&&o.push({row:u-1,col:c,state:a.Mountain}))}for(const c of[...o])if(c.state===a.Mountain){const f=[{row:c.row-2,col:c.col},{row:c.row+2,col:c.col},{row:c.row,col:c.col-2},{row:c.row,col:c.col+2}];for(const u of f)u.row>=0&&u.row<e&&u.col>=0&&u.col<t&&Math.random()>.7&&(o.some(d=>d.row===u.row&&d.col===u.col)||o.push({row:u.row,col:u.col,state:a.Forest}))}return o},De=(e,t)=>{const o=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++){const l=s%3===1,v=r%3===1;(l||v)&&Math.random()>.35&&o.push({row:s,col:r,state:a.Obstacle})}const n=2;return o.filter(s=>{const r=s.row<n&&s.col<n,l=s.row>=e-n&&s.col>=t-n;return!r&&!l})},ze=(e,t,o=.25)=>{const n=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++)if(!(s<2&&r<2||s>=e-2&&r>=t-2)&&Math.random()<o){const v=Math.random();let w;v<.4?w=a.Forest:v<.6?w=a.Obstacle:v<.8?w=a.Water:w=a.Mountain,n.push({row:s,col:r,state:w})}return n},Ve=(e,t,o=.2)=>{const n=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++)!(s<2&&r<2||s>=e-2&&r>=t-2)&&Math.random()<o&&n.push({row:s,col:r,state:a.Obstacle});return n},ke=(e,t)=>{const o=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++){const l=s%3===1,v=r%3===1;(l||v)&&Math.random()>.35&&o.push({row:s,col:r,state:a.Obstacle})}const n=2;return o.filter(s=>{const r=s.row<n&&s.col<n,l=s.row>=e-n&&s.col>=t-n;return!r&&!l})},Fe="",Pe=({isDarkMode:e,setIsDarkMode:t})=>{const{activeButton:o,setSelectedButtonState:n,resetCells:s,rows:r,columns:l,setNumberOfRows:v,setNumberOfColumns:w,handleFindPath:c,canTravelDiagonally:f,setCanTravelDiagonally:u,visualTheme:d,setVisualTheme:h,showCosts:m,setShowCosts:p,setCellState:S}=F(),E=G(d),y=Me(d),b=()=>{t(!e)},N=[{label:"Start",state:a.Start},{label:"End",state:a.End},{label:"Obstacle",state:a.Obstacle},{label:"Clear",state:a.Empty},{label:"Reset",state:null}],A=g=>{g===null?_():n(g)},_=()=>{s(),n(a.Start)},M=()=>{c(f)},D=g=>{s();let O;if(d===z.Medieval)switch(g){case"river":O=Le(r,l);break;case"mountains":O=Ae(r,l);break;case"maze":O=De(r,l);break;case"random":O=ze(r,l);break;default:return}else switch(g){case"random":O=Ve(r,l);break;case"maze":O=ke(r,l);break;default:return}for(const V of O)S(V.row,V.col,V.state);S(0,0,a.Start),S(r-1,l-1,a.End),n(a.Obstacle)};return i.jsx("div",{className:"control-panel",children:i.jsxs("div",{className:"control-grid",children:[i.jsxs("div",{className:"control-group theme-section",children:[i.jsx("h3",{className:"group-title",children:"Theme"}),i.jsxs("div",{className:"button-group",children:[i.jsx("select",{className:"theme-select",value:d,onChange:g=>h(g.target.value),children:Object.values(X).map(g=>i.jsx("option",{value:g.id,children:g.name},g.id))}),i.jsx("button",{className:`control-button theme-toggle ${e?"active":""}`,onClick:b,title:e?"Switch to light mode":"Switch to dark mode",children:e?"☀️ Light":"🌙 Dark"}),i.jsx("button",{className:`control-button show-costs ${m?"active":""}`,onClick:()=>p(!m),title:m?"Hide costs":"Show costs",children:m?"📊 Costs On":"📊 Costs Off"})]})]}),i.jsxs("div",{className:"control-group tools",children:[i.jsx("h3",{className:"group-title",children:"Tools"}),i.jsx("div",{className:"button-group",children:N.map((g,O)=>i.jsx("button",{className:`control-button ${g.label.toLowerCase()} ${o===g.state?"active":""}`,onClick:()=>A(g.state),children:g.label},O))})]}),d===z.Medieval&&i.jsxs("div",{className:"control-group terrain",children:[i.jsx("h3",{className:"group-title",children:"Terrain"}),i.jsx("div",{className:"button-group",children:y.filter(({state:g})=>g!==a.Obstacle).map(({state:g,config:O})=>i.jsxs("button",{className:`control-button terrain-btn ${O.name.toLowerCase()} ${o===g?"active":""}`,onClick:()=>n(g),title:O.passable?"Passable terrain":"Impassable terrain",children:[O.icon," ",O.name]},g))})]}),i.jsxs("div",{className:"control-group presets",children:[i.jsx("h3",{className:"group-title",children:"Generate Map"}),i.jsx("div",{className:"button-group",children:E.presets.map(g=>i.jsxs("button",{className:"control-button preset-btn",onClick:()=>D(g.id),children:[g.icon," ",g.name]},g.id))})]}),i.jsxs("div",{className:"control-group actions",children:[i.jsx("h3",{className:"group-title",children:"Actions"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:"control-button find-path",onClick:M,children:"Find Path"}),i.jsx("button",{className:`control-button diagonal ${f?"active":""}`,onClick:()=>u(!f),children:f?"Diagonal On":"Diagonal Off"})]})]}),i.jsxs("div",{className:"control-group size",children:[i.jsx("h3",{className:"group-title",children:"Grid Size"}),i.jsxs("div",{className:"size-controls",children:[i.jsxs("div",{className:"size-control",children:[i.jsx("label",{className:"size-label",children:"Rows"}),i.jsxs("div",{className:"size-buttons",children:[i.jsx("button",{className:"size-button",onClick:()=>v(Math.max(5,r-1)),disabled:r<=5,children:"−"}),i.jsx("span",{className:"size-value",children:r}),i.jsx("button",{className:"size-button",onClick:()=>v(Math.min(50,r+1)),disabled:r>=50,children:"+"})]})]}),i.jsxs("div",{className:"size-control",children:[i.jsx("label",{className:"size-label",children:"Columns"}),i.jsxs("div",{className:"size-buttons",children:[i.jsx("button",{className:"size-button",onClick:()=>w(Math.max(5,l-1)),disabled:l<=5,children:"−"}),i.jsx("span",{className:"size-value",children:l}),i.jsx("button",{className:"size-button",onClick:()=>w(Math.min(50,l+1)),disabled:l>=50,children:"+"})]})]})]})]})]})})},Z=({defaultDarkMode:e})=>{const t=L.useRef(null),{visualTheme:o}=F(),[n,s]=L.useState(()=>{if(e!==void 0)return e;const r=localStorage.getItem("astar-darkMode");return r?JSON.parse(r):!1});return L.useEffect(()=>{e===void 0&&localStorage.setItem("astar-darkMode",JSON.stringify(n)),t.current&&(t.current.setAttribute("data-theme",n?"dark":"light"),t.current.setAttribute("data-visual-theme",o))},[n,e,o]),i.jsx("div",{ref:t,className:"astar-visualizer-root","data-theme":n?"dark":"light","data-visual-theme":o,children:i.jsxs("div",{className:"app-container",children:[i.jsx("header",{className:"app-header",children:i.jsx("h1",{className:"app-title",children:"A* Pathfinding"})}),i.jsx("main",{className:"app-main",children:i.jsx(Te,{})}),i.jsx("footer",{className:"app-footer",children:i.jsx(Pe,{isDarkMode:n,setIsDarkMode:s})})]})})};function We({defaultDarkMode:e}){return i.jsx(Z,{defaultDarkMode:e})}C.AStarVisualizer=We,C.CellState=a,C.Layout=Z,C.VisualTheme=z,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
+ */var Y;function ce(){return Y||(Y=1,process.env.NODE_ENV!=="production"&&function(){function e(c,h){return c===h&&(c!==0||1/c===1/h)||c!==c&&h!==h}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=L,o=J(),n=typeof Object.is=="function"?Object.is:e,s=o.useSyncExternalStore,r=t.useRef,l=t.useEffect,v=t.useMemo,w=t.useDebugValue;j.useSyncExternalStoreWithSelector=function(c,h,u,d,m){var p=r(null);if(p.current===null){var f={hasValue:!1,value:null};p.current=f}else f=p.current;p=v(function(){function S(y){if(!_){if(_=!0,b=y,y=d(y),m!==void 0&&f.hasValue){var M=f.value;if(m(M,y))return N=M}return N=y}if(M=N,n(b,y))return M;var A=d(y);return m!==void 0&&m(M,A)?(b=y,M):(b=y,N=A)}var _=!1,b,N,z=u===void 0?null:u;return[function(){return S(h())},z===null?void 0:function(){return S(z())}]},[h,u,d,m]);var E=s(c,p[0],p[1]);return l(function(){f.hasValue=!0,f.value=E},[E]),w(E),E},typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),j}process.env.NODE_ENV==="production"?P.exports=le():P.exports=ce();var ie=P.exports;const ue=se(ie),{useDebugValue:de}=L,{useSyncExternalStoreWithSelector:fe}=ue;let je=!1;const he=e=>e;function me(e,t=he,o){const n=fe(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,o);return de(n),n}const Q=e=>{const t=typeof e=="function"?re(e):e,o=(n,s)=>me(t,n,s);return Object.assign(o,t),o},pe=e=>e?Q(e):Q;var a=(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||{}),D=(e=>(e.Classic="classic",e.Medieval="medieval",e))(D||{});const x=(e,t)=>{const o=Math.abs(e.row-t.row),n=Math.abs(e.col-t.col);return Math.floor(10*Math.sqrt(o*o+n*n))},ve=(e,t)=>({row:e.row,col:e.col,g:0,h:x(e,t),f:x(e,t),parent:null}),we=(e,t,o)=>{const n=[{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}];o&&n.push({row:e.row-1,col:e.col-1},{row:e.row-1,col:e.col+1},{row:e.row+1,col:e.col-1},{row:e.row+1,col:e.col+1});const s=[a.Obstacle,a.Water,a.Mountain];return n.filter(r=>r.row>=0&&r.row<t.length&&r.col>=0&&r.col<t[0].length&&!s.includes(t[r.row][r.col].state)).map(r=>({row:r.row,col:r.col,state:t[r.row][r.col].state}))},be=(e,t,o)=>{const n=Math.abs(e.row-t.row),s=Math.abs(e.col-t.col),r=e.g+(n===0||s===0?10:14),l=x(t,o),v=r+l;return{g:r,h:l,f:v}},ge=e=>{const t=[];let o=e;for(;o;)t.push(o),o=o.parent;return t.reverse()},Se=(e,t,o,n)=>{const s=[],r=[],l=ve(t,o);for(s.push(l);s.length>0;){s.sort((c,h)=>c.f-h.f);const v=s.shift();if(v.row===o.row&&v.col===o.col)return r.push(v),{path:ge(v),visitedNodes:r};r.push(v);const w=we(v,e,n);for(const c of w){if(r.some(p=>p.row===c.row&&p.col===c.col))continue;const{g:h,h:u,f:d}=be(v,c,o),m=s.find(p=>p.row===c.row&&p.col===c.col);if(!m||h<m.g){const p={row:c.row,col:c.col,g:h,h:u,f:d,parent:v};m?(m.g=h,m.f=d,m.parent=v):s.push(p)}}}return{path:[],visitedNodes:r}},Ee=e=>({cells:Array.from({length:8},(t,o)=>Array.from({length:12},(n,s)=>({row:o,col:s,state:a.Empty}))),rows:8,columns:12,startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[],setNumberOfColumns:t=>{e(o=>{const n=o.cells.map(s=>t>o.columns?[...s,...Array.from({length:t-o.columns},(r,l)=>({row:s[0].row,col:o.columns+l,state:a.Empty}))]:s.slice(0,t));return{...o,columns:t,cells:n}})},setNumberOfRows:t=>{e(o=>{let n=[...o.cells];return t>o.rows?n=[...n,...Array.from({length:t-o.rows},(s,r)=>Array.from({length:o.columns},(l,v)=>({row:o.rows+r,col:v,state:a.Empty})))]:n=n.slice(0,t),{...o,rows:t,cells:n}})},setCellState:(t,o,n)=>{e(s=>{const r=s.cells.map(c=>c.map(h=>({...h})));let l=s.startTile,v=s.endTile,w=[...s.obstacleTiles];switch(n===a.Start&&s.startTile&&(r[s.startTile.row][s.startTile.col].state=a.Empty,l=null),n===a.End&&s.endTile&&(r[s.endTile.row][s.endTile.col].state=a.Empty,v=null),r[t][o].state=n,n){case a.Start:l={row:t,col:o};break;case a.End:v={row:t,col:o};break;case a.Obstacle:w.some(c=>c.row===t&&c.col===o)||w.push({row:t,col:o});break;case a.Empty:w=w.filter(c=>!(c.row===t&&c.col===o));break}return{...s,cells:r,startTile:l,endTile:v,obstacleTiles:w}})},resetCells:()=>{e(t=>({...t,cells:t.cells.map(o=>o.map(n=>({...n,state:a.Empty}))),startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[]}))},handleFindPath:t=>{e(o=>{const n=o.cells.flat().find(r=>r.state===a.Start),s=o.cells.flat().find(r=>r.state===a.End);if(n&&s){const r=o.cells.map(c=>c.map(h=>({row:h.row,col:h.col,state:h.state}))),{path:l,visitedNodes:v}=Se(r,n,s,t);return(async(c,h)=>{for(let u of h)await new Promise(d=>setTimeout(d,100)),e(d=>{const m=d.cells.map(p=>p.map(f=>({...f,state:u.row===f.row&&u.col===f.col&&f.state===a.Empty?a.Visited:f.state})));return{...d,cells:m,visitedNodes:[...d.visitedNodes,u]}});for(let u of c)await new Promise(d=>setTimeout(d,250)),e(d=>{const m=d.cells.map(p=>p.map(f=>({...f,state:u.row===f.row&&u.col===f.col?a.Path:f.state})));return{...d,cells:m,path:[...d.path,u]}})})(l,v),{...o,path:[],visitedNodes:[]}}return o})},setPath:t=>{e(o=>{const n=o.cells.map(s=>s.map(r=>({...r,state:t.some(l=>l.row===r.row&&l.col===r.col)?a.Path:r.state})));return{...o,cells:n}})},setVisitedNodes:t=>{e(o=>{const n=o.cells.map(s=>s.map(r=>({...r,state:t.some(l=>l.row===r.row&&l.col===r.col)&&r.state===a.Empty?a.Visited:r.state})));return{...o,cells:n}})}}),ye=e=>({activeButton:a.Start,setSelectedButtonState:t=>e({activeButton:t}),canTravelDiagonally:!0,setCanTravelDiagonally:t=>e({canTravelDiagonally:t})}),_e=e=>({visualTheme:D.Medieval,showCosts:!1,setVisualTheme:t=>e({visualTheme:t}),setShowCosts:t=>e({showCosts:t})}),F=pe((e,t,o)=>({...Ee(e),...ye(e),..._e(e)})),Oe={id:D.Classic,name:"Classic",startIcon:"●",endIcon:"●",terrains:{[a.Obstacle]:{name:"Wall",icon:"■",passable:!1}},presets:[{id:"random",name:"Random",icon:"🎲"},{id:"maze",name:"Maze",icon:"🔲"}]},Ne={id:D.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:"🎲"}]},X={[D.Classic]:Oe,[D.Medieval]:Ne},G=e=>X[e],Me=e=>{const t=G(e);return Object.entries(t.terrains).map(([o,n])=>({state:Number(o),config:n}))},xe="",Te=()=>{var E;const{cells:e,activeButton:t,setCellState:o,setSelectedButtonState:n,visitedNodes:s,path:r,visualTheme:l,showCosts:v}=F(),w=G(l),[c,h]=L.useState({width:0,height:0}),u=L.useRef(null);L.useEffect(()=>{const S=()=>{if(u.current){const _=u.current.getBoundingClientRect();h({width:_.width,height:_.height})}};return S(),window.addEventListener("resize",S),()=>window.removeEventListener("resize",S)},[]);const d=(S,_)=>{switch(o(S,_,t),t){case a.Start:n(a.End);break;case a.End:n(a.Obstacle);break}},m=(S,_)=>{const b=s.find(N=>N.row===S&&N.col===_);return b?{g:b.g,h:b.h,f:b.f}:{g:null,h:null,f:null}},f=(()=>{var O;if(!c.width||!c.height)return 20;const S=((O=e[0])==null?void 0:O.length)||1,_=e.length||1,b=20,N=S+_,z=c.width-b-N,y=c.height-b-N,M=z/S,A=y/_,g=Math.min(M,A);return Math.max(15,Math.min(g,60))})();return i.jsx("div",{className:"grid-wrapper",ref:u,children:i.jsx("div",{className:"grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${((E=e[0])==null?void 0:E.length)||1}, ${f}px)`,gridTemplateRows:`repeat(${e.length||1}, ${f}px)`,gap:"1px",padding:"8px",background:"var(--bg-secondary)",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",border:"1px solid var(--border-color)"},children:e.map((S,_)=>S.map((b,N)=>{var V,$,ee,te;const z=r.some(T=>T.row===b.row&&T.col===b.col),y=s.some(T=>T.row===b.row&&T.col===b.col),{g:M,h:A,f:g}=m(b.row,b.col);let O=Ce(b,y);if(z){const T=r.findIndex(oe=>oe.row===b.row&&oe.col===b.col);T===0?O="var(--cell-start)":T===r.length-1?O="var(--cell-end)":O="var(--cell-path)"}return i.jsxs("div",{className:"grid-cell",onClick:()=>d(_,N),style:{width:f,height:f,backgroundColor:O,border:"1px solid var(--cell-border)",cursor:"pointer",transition:"all 0.15s ease",position:"relative",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"2px"},onMouseEnter:T=>{b.state===a.Empty&&(T.currentTarget.style.backgroundColor="var(--bg-tertiary)",T.currentTarget.style.transform="scale(1.02)")},onMouseLeave:T=>{b.state===a.Empty&&(T.currentTarget.style.backgroundColor=O,T.currentTarget.style.transform="scale(1)")},children:[y&&v&&i.jsxs("div",{className:"cell-values",children:[i.jsxs("div",{className:"value-h",children:["h",A]}),i.jsxs("div",{className:"value-f",children:["f",g]}),i.jsxs("div",{className:"value-g",children:["g",M]})]}),b.state===a.Start&&i.jsx("div",{className:"cell-indicator start",style:{fontSize:f*.7},children:w.startIcon}),b.state===a.End&&i.jsx("div",{className:"cell-indicator end",style:{fontSize:f*.7},children:w.endIcon}),b.state===a.Obstacle&&i.jsx("div",{className:"cell-indicator obstacle",style:{fontSize:f*.7},children:((V=w.terrains[a.Obstacle])==null?void 0:V.icon)||"■"}),b.state===a.Water&&i.jsx("div",{className:"cell-indicator water",style:{fontSize:f*.7},children:(($=w.terrains[a.Water])==null?void 0:$.icon)||"🌊"}),b.state===a.Forest&&i.jsx("div",{className:"cell-indicator forest",style:{fontSize:f*.7},children:((ee=w.terrains[a.Forest])==null?void 0:ee.icon)||"🌲"}),b.state===a.Mountain&&i.jsx("div",{className:"cell-indicator mountain",style:{fontSize:f*.7},children:((te=w.terrains[a.Mountain])==null?void 0:te.icon)||"⛰️"})]},`${_}-${N}`)}))})})},Ce=(e,t)=>{if(t)return e.state===a.Start?"var(--cell-start)":e.state===a.End?"var(--cell-end)":"var(--cell-visited)";switch(e.state){case a.Start:return"var(--cell-start)";case a.End:return"var(--cell-end)";case a.Obstacle:return"var(--cell-obstacle)";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)"}},Le=(e,t)=>{const o=[],n=Math.floor(e/2),s=Math.max(2,Math.floor(t/6)),r=[];for(let l=0;l<s;l++){const v=Math.floor(t/(s+1)*(l+1));r.push(v)}for(let l=0;l<t;l++)r.includes(l)||(o.push({row:n,col:l,state:a.Water}),n+1<e&&o.push({row:n+1,col:l,state:a.Water}));for(let l=0;l<t;l+=3)n-1>=0&&Math.random()>.5&&o.push({row:n-1,col:l,state:a.Forest}),n+2<e&&Math.random()>.5&&o.push({row:n+2,col:l,state:a.Forest});return o},ze=(e,t)=>{const o=[],n=Math.floor(e*.2),s=Math.floor(t*.1),r=Math.floor(e*.8),l=Math.floor(t*.9),v=Math.max(2,Math.floor(Math.min(e,t)/5)),w=[];for(let c=0;c<v;c++)w.push(Math.floor((l-s)/(v+1)*(c+1))+s);for(let c=s;c<=l;c++){const h=(c-s)/(l-s),u=Math.floor(n+(r-n)*h);w.some(d=>Math.abs(c-d)<=1)||(u>=0&&u<e&&o.push({row:u,col:c,state:a.Mountain}),u+1<e&&Math.random()>.3&&o.push({row:u+1,col:c,state:a.Mountain}),u-1>=0&&Math.random()>.3&&o.push({row:u-1,col:c,state:a.Mountain}))}for(const c of[...o])if(c.state===a.Mountain){const h=[{row:c.row-2,col:c.col},{row:c.row+2,col:c.col},{row:c.row,col:c.col-2},{row:c.row,col:c.col+2}];for(const u of h)u.row>=0&&u.row<e&&u.col>=0&&u.col<t&&Math.random()>.7&&(o.some(d=>d.row===u.row&&d.col===u.col)||o.push({row:u.row,col:u.col,state:a.Forest}))}return o},Ae=(e,t)=>{const o=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++){const l=s%3===1,v=r%3===1;(l||v)&&Math.random()>.35&&o.push({row:s,col:r,state:a.Obstacle})}const n=2;return o.filter(s=>{const r=s.row<n&&s.col<n,l=s.row>=e-n&&s.col>=t-n;return!r&&!l})},De=(e,t,o=.25)=>{const n=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++)if(!(s<2&&r<2||s>=e-2&&r>=t-2)&&Math.random()<o){const v=Math.random();let w;v<.4?w=a.Forest:v<.6?w=a.Obstacle:v<.8?w=a.Water:w=a.Mountain,n.push({row:s,col:r,state:w})}return n},Ve=(e,t,o=.2)=>{const n=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++)!(s<2&&r<2||s>=e-2&&r>=t-2)&&Math.random()<o&&n.push({row:s,col:r,state:a.Obstacle});return n},ke=(e,t)=>{const o=[];for(let s=0;s<e;s++)for(let r=0;r<t;r++){const l=s%3===1,v=r%3===1;(l||v)&&Math.random()>.35&&o.push({row:s,col:r,state:a.Obstacle})}const n=2;return o.filter(s=>{const r=s.row<n&&s.col<n,l=s.row>=e-n&&s.col>=t-n;return!r&&!l})},Fe="",Pe=({isDarkMode:e,setIsDarkMode:t})=>{const{activeButton:o,setSelectedButtonState:n,resetCells:s,rows:r,columns:l,setNumberOfRows:v,setNumberOfColumns:w,handleFindPath:c,canTravelDiagonally:h,setCanTravelDiagonally:u,visualTheme:d,setVisualTheme:m,showCosts:p,setShowCosts:f,setCellState:E}=F(),S=G(d),_=Me(d),b=()=>{t(!e)},N=[{label:"Start",state:a.Start},{label:"End",state:a.End},{label:"Obstacle",state:a.Obstacle},{label:"Clear",state:a.Empty},{label:"Reset",state:null}],z=g=>{g===null?y():n(g)},y=()=>{s(),n(a.Start)},M=()=>{c(h)},A=g=>{s();let O;if(d===D.Medieval)switch(g){case"river":O=Le(r,l);break;case"mountains":O=ze(r,l);break;case"maze":O=Ae(r,l);break;case"random":O=De(r,l);break;default:return}else switch(g){case"random":O=Ve(r,l);break;case"maze":O=ke(r,l);break;default:return}for(const V of O)E(V.row,V.col,V.state);E(0,0,a.Start),E(r-1,l-1,a.End),n(a.Obstacle)};return i.jsx("div",{className:"control-panel",children:i.jsxs("div",{className:"control-grid",children:[i.jsxs("div",{className:"control-group theme-section",children:[i.jsx("h3",{className:"group-title",children:"Theme"}),i.jsxs("div",{className:"button-group",children:[i.jsx("select",{className:"theme-select",value:d,onChange:g=>m(g.target.value),children:Object.values(X).map(g=>i.jsx("option",{value:g.id,children:g.name},g.id))}),i.jsx("button",{className:`control-button theme-toggle ${e?"active":""}`,onClick:b,title:e?"Switch to light mode":"Switch to dark mode",children:e?"☀️ Light":"🌙 Dark"}),i.jsx("button",{className:`control-button show-costs ${p?"active":""}`,onClick:()=>f(!p),title:p?"Hide costs":"Show costs",children:p?"📊 Costs On":"📊 Costs Off"})]})]}),i.jsxs("div",{className:"control-group tools",children:[i.jsx("h3",{className:"group-title",children:"Tools"}),i.jsx("div",{className:"button-group",children:N.map((g,O)=>i.jsx("button",{className:`control-button ${g.label.toLowerCase()} ${o===g.state?"active":""}`,onClick:()=>z(g.state),children:g.label},O))})]}),d===D.Medieval&&i.jsxs("div",{className:"control-group terrain",children:[i.jsx("h3",{className:"group-title",children:"Terrain"}),i.jsx("div",{className:"button-group",children:_.filter(({state:g})=>g!==a.Obstacle).map(({state:g,config:O})=>i.jsxs("button",{className:`control-button terrain-btn ${O.name.toLowerCase()} ${o===g?"active":""}`,onClick:()=>n(g),title:O.passable?"Passable terrain":"Impassable terrain",children:[O.icon," ",O.name]},g))})]}),i.jsxs("div",{className:"control-group presets",children:[i.jsx("h3",{className:"group-title",children:"Generate Map"}),i.jsx("div",{className:"button-group",children:S.presets.map(g=>i.jsxs("button",{className:"control-button preset-btn",onClick:()=>A(g.id),children:[g.icon," ",g.name]},g.id))})]}),i.jsxs("div",{className:"control-group actions",children:[i.jsx("h3",{className:"group-title",children:"Actions"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:"control-button find-path",onClick:M,children:"Find Path"}),i.jsx("button",{className:`control-button diagonal ${h?"active":""}`,onClick:()=>u(!h),children:h?"Diagonal On":"Diagonal Off"})]})]}),i.jsxs("div",{className:"control-group size",children:[i.jsx("h3",{className:"group-title",children:"Grid Size"}),i.jsxs("div",{className:"size-controls",children:[i.jsxs("div",{className:"size-control",children:[i.jsx("label",{className:"size-label",children:"Rows"}),i.jsxs("div",{className:"size-buttons",children:[i.jsx("button",{className:"size-button",onClick:()=>v(Math.max(5,r-1)),disabled:r<=5,children:"−"}),i.jsx("span",{className:"size-value",children:r}),i.jsx("button",{className:"size-button",onClick:()=>v(Math.min(50,r+1)),disabled:r>=50,children:"+"})]})]}),i.jsxs("div",{className:"size-control",children:[i.jsx("label",{className:"size-label",children:"Columns"}),i.jsxs("div",{className:"size-buttons",children:[i.jsx("button",{className:"size-button",onClick:()=>w(Math.max(5,l-1)),disabled:l<=5,children:"−"}),i.jsx("span",{className:"size-value",children:l}),i.jsx("button",{className:"size-button",onClick:()=>w(Math.min(50,l+1)),disabled:l>=50,children:"+"})]})]})]})]})]})})},Z=({defaultDarkMode:e})=>{const t=L.useRef(null),{visualTheme:o}=F(),[n,s]=L.useState(()=>{if(e!==void 0)return e;const r=localStorage.getItem("astar-darkMode");return r?JSON.parse(r):!1});return L.useEffect(()=>{e===void 0&&localStorage.setItem("astar-darkMode",JSON.stringify(n)),t.current&&(t.current.setAttribute("data-theme",n?"dark":"light"),t.current.setAttribute("data-visual-theme",o))},[n,e,o]),i.jsx("div",{ref:t,className:"astar-visualizer-root","data-theme":n?"dark":"light","data-visual-theme":o,children:i.jsxs("div",{className:"app-container",children:[i.jsx("header",{className:"app-header",children:i.jsx("h1",{className:"app-title",children:"A* Pathfinding"})}),i.jsx("main",{className:"app-main",children:i.jsx(Te,{})}),i.jsx("footer",{className:"app-footer",children:i.jsx(Pe,{isDarkMode:n,setIsDarkMode:s})})]})})};function We({defaultDarkMode:e}){return i.jsx(Z,{defaultDarkMode:e})}C.AStarVisualizer=We,C.CellState=a,C.Layout=Z,C.VisualTheme=D,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -1 +1 @@
-:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;--bg-primary: #fafafa;--bg-secondary: #ffffff;--bg-tertiary: #f5f5f5;--text-primary: #1a1a1a;--text-secondary: #666666;--text-muted: #999999;--border-color: #e0e0e0;--border-hover: #d0d0d0;--cell-empty: #ffffff;--cell-start: #4caf50;--cell-end: #f44336;--cell-obstacle: #424242;--cell-visited: #2196f3;--cell-path: #ff9800;--cell-border: #e0e0e0;--cell-water: #4A90D9;--cell-forest: #228B22;--cell-mountain: #8B7355;--primary: #2196f3;--primary-hover: #1976d2;--success: #4caf50;--success-hover: #388e3c;--danger: #f44336;--danger-hover: #d32f2f;--warning: #ff9800;--warning-hover: #f57c00;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.astar-visualizer-root[data-theme=dark]{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #2a2a2a;--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-muted: #808080;--border-color: #404040;--border-hover: #505050;--cell-empty: #2a2a2a;--cell-start: #4caf50;--cell-end: #f44336;--cell-obstacle: #1a1a1a;--cell-visited: #2196f3;--cell-path: #ff9800;--cell-border: #404040;--cell-water: #1E5A8F;--cell-forest: #1B5E20;--cell-mountain: #5D4E37;--primary: #2196f3;--primary-hover: #1976d2;--success: #4caf50;--success-hover: #388e3c;--danger: #f44336;--danger-hover: #d32f2f;--warning: #ff9800;--warning-hover: #f57c00}.astar-visualizer-root[data-visual-theme=medieval]{--cell-empty: #90EE90;--cell-start: #4caf50;--cell-end: #8B0000;--cell-obstacle: #696969;--cell-visited: #87CEEB;--cell-path: #FFD700;--cell-border: #556B2F;--cell-water: #4A90D9;--cell-forest: #228B22;--cell-mountain: #8B7355}.astar-visualizer-root[data-visual-theme=medieval][data-theme=dark]{--cell-empty: #2D5A2D;--cell-start: #2E7D32;--cell-end: #5C0000;--cell-obstacle: #3D3D3D;--cell-visited: #4682B4;--cell-path: #B8860B;--cell-border: #3B4A29;--cell-water: #1E3A5F;--cell-forest: #1B4D1B;--cell-mountain: #4A3728}.astar-visualizer-root,.astar-visualizer-root *,.astar-visualizer-root *:before,.astar-visualizer-root *:after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}.astar-visualizer-root{width:100%;height:100%;display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);position:relative}.astar-visualizer-root *{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.astar-visualizer-root .app-container{display:flex;flex-direction:column;height:100%;width:100%}.astar-visualizer-root .app-header{padding:.5rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);text-align:center;flex-shrink:0}.astar-visualizer-root .app-title{font-size:1.25rem;font-weight:600;margin:0;color:var(--text-primary);letter-spacing:-.025em}.astar-visualizer-root .app-main{flex:1;display:flex;justify-content:center;align-items:center;padding:.5rem;overflow:hidden;min-height:0}.astar-visualizer-root .app-footer{padding:.5rem 1rem;background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0;overflow-y:auto;max-height:30%}.astar-visualizer-root button{border:1px solid var(--border-color);border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;font-family:inherit;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .2s ease;outline:none}.astar-visualizer-root button:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.astar-visualizer-root button:active{transform:translateY(1px)}.astar-visualizer-root button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-width: 768px){.astar-visualizer-root .app-header{padding:.75rem 1.5rem}.astar-visualizer-root .app-title{font-size:1.5rem}.astar-visualizer-root .app-main{padding:.25rem}.astar-visualizer-root .app-footer{padding:.75rem 1.5rem}}@media (max-width: 480px){.astar-visualizer-root .app-header{padding:.5rem 1rem}.astar-visualizer-root .app-title{font-size:1.25rem}.astar-visualizer-root .app-main{padding:.125rem}.astar-visualizer-root .app-footer{padding:.5rem 1rem}}@media (max-height: 600px){.astar-visualizer-root .app-header{padding:.5rem 1rem}.astar-visualizer-root .app-title{font-size:1.25rem}.astar-visualizer-root .app-footer{padding:.5rem 1rem}}@media (max-height: 400px){.astar-visualizer-root .app-header{padding:.25rem .5rem}.astar-visualizer-root .app-title{font-size:1rem}.astar-visualizer-root .app-footer{padding:.25rem .5rem}}.astar-visualizer-root #root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}.astar-visualizer-root .loading{display:flex;justify-content:center;align-items:center;height:100%;font-size:1.5rem;color:var(--text-secondary)}.astar-visualizer-root .error{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.astar-visualizer-root .error h2{color:var(--danger);margin-bottom:1rem}.astar-visualizer-root .error p{color:var(--text-secondary);max-width:500px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*{transition:none!important}}@media (prefers-contrast: high){:root{--cell-border: #000000;--text-primary: #000000;--text-secondary: #000000;--bg-primary: #ffffff;--bg-secondary: #ffffff}[data-theme=dark]{--cell-border: #ffffff;--text-primary: #ffffff;--text-secondary: #ffffff;--bg-primary: #000000;--bg-secondary: #000000}}@media print{.astar-visualizer-root .app-footer{display:none}.astar-visualizer-root .app-header{background:white!important;color:#000!important}.astar-visualizer-root .grid-container{box-shadow:none!important;border:2px solid black!important}}.astar-visualizer-root .grid-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:.5rem;box-sizing:border-box;overflow:hidden}.astar-visualizer-root .grid-container{display:grid;gap:1px;padding:4px;background:var(--bg-secondary);border-radius:4px;box-shadow:0 2px 8px #0000001a;border:1px solid var(--border-color);width:fit-content;height:fit-content}.astar-visualizer-root .grid-cell{position:relative;display:flex;justify-content:center;align-items:center;border:1px solid var(--cell-border);cursor:pointer;transition:all .15s ease;border-radius:2px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.astar-visualizer-root .grid-cell:hover{transform:scale(1.02)}.astar-visualizer-root .grid-cell:active{transform:scale(.98)}.astar-visualizer-root .cell-values{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;font-size:.75rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9);pointer-events:none}.astar-visualizer-root .value-h{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;font-size:.65rem}.astar-visualizer-root .value-f{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;font-size:.65rem}.astar-visualizer-root .value-g{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;font-size:.65rem}.astar-visualizer-root .cell-indicator{font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9)}.astar-visualizer-root .cell-indicator.start,.astar-visualizer-root .cell-indicator.end,.astar-visualizer-root .cell-indicator.obstacle{color:#fff}@media (max-width: 768px){.astar-visualizer-root .cell-values{font-size:.6rem}.astar-visualizer-root .value-h,.astar-visualizer-root .value-f,.astar-visualizer-root .value-g{font-size:.5rem}.astar-visualizer-root .cell-indicator{font-size:1rem}}@media (max-width: 480px){.astar-visualizer-root .cell-values{font-size:.5rem}.astar-visualizer-root .value-h,.astar-visualizer-root .value-f,.astar-visualizer-root .value-g{font-size:.4rem}.astar-visualizer-root .cell-indicator{font-size:.9rem}}.astar-visualizer-root .control-panel{padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);box-shadow:0 2px 8px #0000001a}.astar-visualizer-root .control-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}.astar-visualizer-root .control-group{display:flex;flex-direction:column;gap:.75rem}.astar-visualizer-root .group-title{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.astar-visualizer-root .button-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center}.astar-visualizer-root .control-button{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;outline:none;min-width:fit-content}.astar-visualizer-root .control-button:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.astar-visualizer-root .control-button:active{transform:translateY(1px)}.astar-visualizer-root .control-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.astar-visualizer-root .control-button.start.active{background:var(--success);border-color:var(--success);color:#fff}.astar-visualizer-root .control-button.end.active{background:var(--danger);border-color:var(--danger);color:#fff}.astar-visualizer-root .control-button.obstacle.active{background:var(--text-primary);border-color:var(--text-primary);color:#fff}.astar-visualizer-root .control-button.clear.active{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.astar-visualizer-root .control-button.reset{background:var(--danger);border-color:var(--danger);color:#fff}.astar-visualizer-root .control-button.reset:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.astar-visualizer-root .control-button.find-path{background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .control-button.find-path:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.astar-visualizer-root .control-button.diagonal.active{background:var(--warning);border-color:var(--warning);color:#fff}.astar-visualizer-root .control-button.diagonal:hover{background:var(--warning-hover);border-color:var(--warning-hover)}.astar-visualizer-root .control-button.theme-toggle{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.astar-visualizer-root .control-button.theme-toggle:hover{background:var(--text-secondary);border-color:var(--text-secondary)}.astar-visualizer-root .control-button.theme-toggle.active{background:var(--warning);border-color:var(--warning);color:#fff}.astar-visualizer-root .control-button.theme-toggle.active:hover{background:var(--warning-hover);border-color:var(--warning-hover)}.astar-visualizer-root .theme-select{padding:.5rem 1rem;font-size:.875rem;font-weight:500;font-family:inherit;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;outline:none;min-width:120px}.astar-visualizer-root .theme-select:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.astar-visualizer-root .theme-select:focus{outline:2px solid var(--primary);outline-offset:2px}.astar-visualizer-root .control-button.show-costs{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.astar-visualizer-root .control-button.show-costs:hover{background:var(--text-secondary);border-color:var(--text-secondary)}.astar-visualizer-root .control-button.show-costs.active{background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .control-button.terrain-btn{background:var(--bg-secondary);border-color:var(--border-color)}.astar-visualizer-root .control-button.terrain-btn:hover{background:var(--bg-tertiary);border-color:var(--border-hover)}.astar-visualizer-root .control-button.terrain-btn.water.active{background:#4A90D9;border-color:#4a90d9;color:#fff}.astar-visualizer-root .control-button.terrain-btn.forest.active{background:#228B22;border-color:#228b22;color:#fff}.astar-visualizer-root .control-button.terrain-btn.mountain.active{background:#8B7355;border-color:#8b7355;color:#fff}.astar-visualizer-root .control-button.preset-btn{background:var(--bg-tertiary);border-color:var(--border-color)}.astar-visualizer-root .control-button.preset-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .size-controls{display:flex;flex-direction:column;gap:.75rem;align-items:center}.astar-visualizer-root .size-control{display:flex;flex-direction:column;gap:.25rem;align-items:center}.astar-visualizer-root .size-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.astar-visualizer-root .size-buttons{display:flex;align-items:center;gap:.5rem}.astar-visualizer-root .size-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:1rem;font-weight:600;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s ease;outline:none}.astar-visualizer-root .size-button:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .size-button:active:not(:disabled){transform:scale(.95)}.astar-visualizer-root .size-button:disabled{opacity:.4;cursor:not-allowed}.astar-visualizer-root .size-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.astar-visualizer-root .size-value{display:flex;align-items:center;justify-content:center;min-width:2.5rem;height:1.75rem;font-size:.875rem;font-weight:600;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px}@media (min-width: 1024px){.astar-visualizer-root .control-grid{grid-template-columns:2fr 1fr 1fr;gap:2rem}.astar-visualizer-root .control-group.tools{grid-column:1}.astar-visualizer-root .control-group.actions{grid-column:2}.astar-visualizer-root .control-group.size{grid-column:3}}@media (min-width: 768px) and (max-width: 1023px){.astar-visualizer-root .control-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.astar-visualizer-root .control-group.tools{grid-column:1 / -1}.astar-visualizer-root .control-group.actions{grid-column:1}.astar-visualizer-root .control-group.size{grid-column:2}}@media (max-width: 768px){.astar-visualizer-root .control-panel{padding:.75rem}.astar-visualizer-root .control-grid{gap:1rem}.astar-visualizer-root .button-group{gap:.375rem}.astar-visualizer-root .control-button{padding:.375rem .75rem;font-size:.8125rem}.astar-visualizer-root .size-controls{gap:.5rem}.astar-visualizer-root .size-buttons{gap:.375rem}.astar-visualizer-root .size-button{width:1.5rem;height:1.5rem;font-size:.875rem}.astar-visualizer-root .size-value{min-width:2rem;height:1.5rem;font-size:.8125rem}}@media (max-width: 480px){.astar-visualizer-root .control-panel{padding:.5rem}.astar-visualizer-root .control-grid{gap:.75rem}.astar-visualizer-root .button-group{flex-direction:column;gap:.25rem}.astar-visualizer-root .control-button{width:100%;padding:.5rem;font-size:.75rem}.astar-visualizer-root .size-controls{gap:.375rem}.astar-visualizer-root .size-buttons{gap:.25rem}.astar-visualizer-root .size-button{width:1.25rem;height:1.25rem;font-size:.75rem}.astar-visualizer-root .size-value{min-width:1.75rem;height:1.25rem;font-size:.75rem}}
+:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5;font-weight:400;--bg-primary: #fafafa;--bg-secondary: #ffffff;--bg-tertiary: #f5f5f5;--text-primary: #1a1a1a;--text-secondary: #666666;--text-muted: #999999;--border-color: #e0e0e0;--border-hover: #d0d0d0;--cell-empty: #ffffff;--cell-start: #4caf50;--cell-end: #f44336;--cell-obstacle: #424242;--cell-visited: #2196f3;--cell-path: #ff9800;--cell-border: #e0e0e0;--cell-water: #4A90D9;--cell-forest: #228B22;--cell-mountain: #8B7355;--primary: #2196f3;--primary-hover: #1976d2;--success: #4caf50;--success-hover: #388e3c;--danger: #f44336;--danger-hover: #d32f2f;--warning: #ff9800;--warning-hover: #f57c00;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}.astar-visualizer-root[data-theme=dark]{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #2a2a2a;--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-muted: #808080;--border-color: #404040;--border-hover: #505050;--cell-empty: #2a2a2a;--cell-start: #4caf50;--cell-end: #f44336;--cell-obstacle: #1a1a1a;--cell-visited: #2196f3;--cell-path: #ff9800;--cell-border: #404040;--cell-water: #1E5A8F;--cell-forest: #1B5E20;--cell-mountain: #5D4E37;--primary: #2196f3;--primary-hover: #1976d2;--success: #4caf50;--success-hover: #388e3c;--danger: #f44336;--danger-hover: #d32f2f;--warning: #ff9800;--warning-hover: #f57c00}.astar-visualizer-root[data-visual-theme=medieval]{--cell-empty: #90EE90;--cell-start: #4caf50;--cell-end: #8B0000;--cell-obstacle: #696969;--cell-visited: #87CEEB;--cell-path: #FFD700;--cell-border: #556B2F;--cell-water: #4A90D9;--cell-forest: #228B22;--cell-mountain: #8B7355}.astar-visualizer-root[data-visual-theme=medieval][data-theme=dark]{--cell-empty: #2D5A2D;--cell-start: #2E7D32;--cell-end: #5C0000;--cell-obstacle: #3D3D3D;--cell-visited: #4682B4;--cell-path: #B8860B;--cell-border: #3B4A29;--cell-water: #1E3A5F;--cell-forest: #1B4D1B;--cell-mountain: #4A3728}.astar-visualizer-root,.astar-visualizer-root *,.astar-visualizer-root *:before,.astar-visualizer-root *:after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}.astar-visualizer-root{width:100%;height:100%;display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);position:relative}.astar-visualizer-root *{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.astar-visualizer-root .app-container{display:flex;flex-direction:column;height:100%;width:100%}.astar-visualizer-root .app-header{padding:.5rem 1rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);text-align:center;flex-shrink:0}.astar-visualizer-root .app-title{font-size:1.25rem;font-weight:600;margin:0;color:var(--text-primary);letter-spacing:-.025em}.astar-visualizer-root .app-main{flex:1;display:flex;justify-content:center;align-items:center;padding:.5rem;overflow:hidden;min-height:0}.astar-visualizer-root .app-footer{padding:.5rem 1rem;background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0;overflow-y:auto;max-height:30%}.astar-visualizer-root button{border:1px solid var(--border-color);border-radius:6px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;font-family:inherit;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;transition:all .2s ease;outline:none}.astar-visualizer-root button:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.astar-visualizer-root button:active{transform:translateY(1px)}.astar-visualizer-root button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-width: 768px){.astar-visualizer-root .app-header{padding:.75rem 1.5rem}.astar-visualizer-root .app-title{font-size:1.5rem}.astar-visualizer-root .app-main{padding:.25rem}.astar-visualizer-root .app-footer{padding:.75rem 1.5rem}}@media (max-width: 480px){.astar-visualizer-root .app-header{padding:.5rem 1rem}.astar-visualizer-root .app-title{font-size:1.25rem}.astar-visualizer-root .app-main{padding:.125rem}.astar-visualizer-root .app-footer{padding:.5rem 1rem}}@media (max-height: 600px){.astar-visualizer-root .app-header{padding:.5rem 1rem}.astar-visualizer-root .app-title{font-size:1.25rem}.astar-visualizer-root .app-footer{padding:.5rem 1rem}}@media (max-height: 400px){.astar-visualizer-root .app-header{padding:.25rem .5rem}.astar-visualizer-root .app-title{font-size:1rem}.astar-visualizer-root .app-footer{padding:.25rem .5rem}}.astar-visualizer-root #root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}.astar-visualizer-root .loading{display:flex;justify-content:center;align-items:center;height:100%;font-size:1.5rem;color:var(--text-secondary)}.astar-visualizer-root .error{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:2rem;text-align:center}.astar-visualizer-root .error h2{color:var(--danger);margin-bottom:1rem}.astar-visualizer-root .error p{color:var(--text-secondary);max-width:500px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*{transition:none!important}}@media (prefers-contrast: high){:root{--cell-border: #000000;--text-primary: #000000;--text-secondary: #000000;--bg-primary: #ffffff;--bg-secondary: #ffffff}[data-theme=dark]{--cell-border: #ffffff;--text-primary: #ffffff;--text-secondary: #ffffff;--bg-primary: #000000;--bg-secondary: #000000}}@media print{.astar-visualizer-root .app-footer{display:none}.astar-visualizer-root .app-header{background:white!important;color:#000!important}.astar-visualizer-root .grid-container{box-shadow:none!important;border:2px solid black!important}}.astar-visualizer-root .grid-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:.5rem;box-sizing:border-box;overflow:hidden}.astar-visualizer-root .grid-container{display:grid;gap:1px;padding:4px;background:var(--bg-secondary);border-radius:4px;box-shadow:0 2px 8px #0000001a;border:1px solid var(--border-color);width:fit-content;height:fit-content}.astar-visualizer-root .grid-cell{position:relative;display:flex;justify-content:center;align-items:center;border:1px solid var(--cell-border);cursor:pointer;transition:all .15s ease;border-radius:2px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.astar-visualizer-root .grid-cell:hover{transform:scale(1.02)}.astar-visualizer-root .grid-cell:active{transform:scale(.98)}.astar-visualizer-root .cell-values{position:absolute;top:0;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;font-size:.75rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9);pointer-events:none}.astar-visualizer-root .value-h{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;font-size:.65rem}.astar-visualizer-root .value-f{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;font-size:.65rem}.astar-visualizer-root .value-g{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;font-size:.65rem}.astar-visualizer-root .cell-indicator{font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9)}.astar-visualizer-root .cell-indicator.start,.astar-visualizer-root .cell-indicator.end,.astar-visualizer-root .cell-indicator.obstacle{color:#fff}@media (max-width: 768px){.astar-visualizer-root .cell-values{font-size:.6rem}.astar-visualizer-root .value-h,.astar-visualizer-root .value-f,.astar-visualizer-root .value-g{font-size:.5rem}}@media (max-width: 480px){.astar-visualizer-root .cell-values{font-size:.5rem}.astar-visualizer-root .value-h,.astar-visualizer-root .value-f,.astar-visualizer-root .value-g{font-size:.4rem}}.astar-visualizer-root .control-panel{padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);box-shadow:0 2px 8px #0000001a}.astar-visualizer-root .control-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}.astar-visualizer-root .control-group{display:flex;flex-direction:column;gap:.75rem}.astar-visualizer-root .group-title{font-size:.875rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.astar-visualizer-root .button-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center}.astar-visualizer-root .control-button{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;outline:none;min-width:fit-content}.astar-visualizer-root .control-button:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.astar-visualizer-root .control-button:active{transform:translateY(1px)}.astar-visualizer-root .control-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.astar-visualizer-root .control-button.start.active{background:var(--success);border-color:var(--success);color:#fff}.astar-visualizer-root .control-button.end.active{background:var(--danger);border-color:var(--danger);color:#fff}.astar-visualizer-root .control-button.obstacle.active{background:var(--text-primary);border-color:var(--text-primary);color:#fff}.astar-visualizer-root .control-button.clear.active{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.astar-visualizer-root .control-button.reset{background:var(--danger);border-color:var(--danger);color:#fff}.astar-visualizer-root .control-button.reset:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.astar-visualizer-root .control-button.find-path{background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .control-button.find-path:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.astar-visualizer-root .control-button.diagonal.active{background:var(--warning);border-color:var(--warning);color:#fff}.astar-visualizer-root .control-button.diagonal:hover{background:var(--warning-hover);border-color:var(--warning-hover)}.astar-visualizer-root .control-button.theme-toggle{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.astar-visualizer-root .control-button.theme-toggle:hover{background:var(--text-secondary);border-color:var(--text-secondary)}.astar-visualizer-root .control-button.theme-toggle.active{background:var(--warning);border-color:var(--warning);color:#fff}.astar-visualizer-root .control-button.theme-toggle.active:hover{background:var(--warning-hover);border-color:var(--warning-hover)}.astar-visualizer-root .theme-select{padding:.5rem 1rem;font-size:.875rem;font-weight:500;font-family:inherit;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;outline:none;min-width:120px}.astar-visualizer-root .theme-select:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.astar-visualizer-root .theme-select:focus{outline:2px solid var(--primary);outline-offset:2px}.astar-visualizer-root .control-button.show-costs{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.astar-visualizer-root .control-button.show-costs:hover{background:var(--text-secondary);border-color:var(--text-secondary)}.astar-visualizer-root .control-button.show-costs.active{background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .control-button.terrain-btn{background:var(--bg-secondary);border-color:var(--border-color)}.astar-visualizer-root .control-button.terrain-btn:hover{background:var(--bg-tertiary);border-color:var(--border-hover)}.astar-visualizer-root .control-button.terrain-btn.water.active{background:#4A90D9;border-color:#4a90d9;color:#fff}.astar-visualizer-root .control-button.terrain-btn.forest.active{background:#228B22;border-color:#228b22;color:#fff}.astar-visualizer-root .control-button.terrain-btn.mountain.active{background:#8B7355;border-color:#8b7355;color:#fff}.astar-visualizer-root .control-button.preset-btn{background:var(--bg-tertiary);border-color:var(--border-color)}.astar-visualizer-root .control-button.preset-btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .size-controls{display:flex;flex-direction:column;gap:.75rem;align-items:center}.astar-visualizer-root .size-control{display:flex;flex-direction:column;gap:.25rem;align-items:center}.astar-visualizer-root .size-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.astar-visualizer-root .size-buttons{display:flex;align-items:center;gap:.5rem}.astar-visualizer-root .size-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;font-size:1rem;font-weight:600;color:var(--text-primary);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:all .2s ease;outline:none}.astar-visualizer-root .size-button:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff}.astar-visualizer-root .size-button:active:not(:disabled){transform:scale(.95)}.astar-visualizer-root .size-button:disabled{opacity:.4;cursor:not-allowed}.astar-visualizer-root .size-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.astar-visualizer-root .size-value{display:flex;align-items:center;justify-content:center;min-width:2.5rem;height:1.75rem;font-size:.875rem;font-weight:600;color:var(--text-primary);background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px}@media (min-width: 1024px){.astar-visualizer-root .control-grid{grid-template-columns:2fr 1fr 1fr;gap:2rem}.astar-visualizer-root .control-group.tools{grid-column:1}.astar-visualizer-root .control-group.actions{grid-column:2}.astar-visualizer-root .control-group.size{grid-column:3}}@media (min-width: 768px) and (max-width: 1023px){.astar-visualizer-root .control-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.astar-visualizer-root .control-group.tools{grid-column:1 / -1}.astar-visualizer-root .control-group.actions{grid-column:1}.astar-visualizer-root .control-group.size{grid-column:2}}@media (max-width: 768px){.astar-visualizer-root .control-panel{padding:.75rem}.astar-visualizer-root .control-grid{gap:1rem}.astar-visualizer-root .button-group{gap:.375rem}.astar-visualizer-root .control-button{padding:.375rem .75rem;font-size:.8125rem}.astar-visualizer-root .size-controls{gap:.5rem}.astar-visualizer-root .size-buttons{gap:.375rem}.astar-visualizer-root .size-button{width:1.5rem;height:1.5rem;font-size:.875rem}.astar-visualizer-root .size-value{min-width:2rem;height:1.5rem;font-size:.8125rem}}@media (max-width: 480px){.astar-visualizer-root .control-panel{padding:.5rem}.astar-visualizer-root .control-grid{gap:.75rem}.astar-visualizer-root .button-group{flex-direction:column;gap:.25rem}.astar-visualizer-root .control-button{width:100%;padding:.5rem;font-size:.75rem}.astar-visualizer-root .size-controls{gap:.375rem}.astar-visualizer-root .size-buttons{gap:.25rem}.astar-visualizer-root .size-button{width:1.25rem;height:1.25rem;font-size:.75rem}.astar-visualizer-root .size-value{min-width:1.75rem;height:1.25rem;font-size:.75rem}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astar-visualizer",
   "private": false,
-  "version": "1.0.8",
+  "version": "1.0.9",
   "type": "module",
   "description": "A React component for visualizing A* pathfinding algorithm",
   "main": "./dist/astar-visualizer.umd.cjs",