astar-visualizer 1.0.4 → 1.0.6

package/dist/astar-visualizer.js

@@ -1,22 +1,22 @@
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import D, { useState as $, useEffect as H } from "react";
-const x = (e) => {
+import { jsx as S, jsxs as y } from "react/jsx-runtime";
+import D, { useState as H, useEffect as F } from "react";
+const P = (e) => {
   let t;
-  const r = /* @__PURE__ */ new Set(), l = (c, f) => {
-    const u = typeof c == "function" ? c(t) : c;
-    if (!Object.is(u, t)) {
-      const s = t;
-      t = f ?? (typeof u != "object" || u === null) ? u : Object.assign({}, t, u), r.forEach((a) => a(t, s));
+  const r = /* @__PURE__ */ new Set(), s = (i, m) => {
+    const c = typeof i == "function" ? i(t) : i;
+    if (!Object.is(c, t)) {
+      const l = t;
+      t = m ?? (typeof c != "object" || c === null) ? c : Object.assign({}, t, c), r.forEach((n) => n(t, l));
     }
-  }, o = () => t, g = { setState: l, getState: o, getInitialState: () => d, subscribe: (c) => (r.add(c), () => r.delete(c)), destroy: () => {
+  }, o = () => t, w = { setState: s, getState: o, getInitialState: () => d, subscribe: (i) => (r.add(i), () => r.delete(i)), destroy: () => {
     r.clear();
-  } }, d = t = e(l, o, g);
-  return g;
-}, U = (e) => e ? x(e) : x;
-function q(e) {
+  } }, d = t = e(s, o, w);
+  return w;
+}, q = (e) => e ? P(e) : P;
+function J(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var V = { exports: {} }, R = {}, L = { exports: {} }, A = {};
+var V = { exports: {} }, L = {}, R = { exports: {} }, A = {};
 /**
  * @license React
  * use-sync-external-store-shim.production.js
@@ -26,49 +26,49 @@ var V = { exports: {} }, R = {}, L = { exports: {} }, A = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var P;
-function J() {
-  if (P)
+var I;
+function Y() {
+  if (I)
     return A;
-  P = 1;
+  I = 1;
   var e = D;
-  function t(f, u) {
-    return f === u && (f !== 0 || 1 / f === 1 / u) || f !== f && u !== u;
+  function t(m, c) {
+    return m === c && (m !== 0 || 1 / m === 1 / c) || m !== m && c !== c;
   }
-  var r = typeof Object.is == "function" ? Object.is : t, l = e.useState, o = e.useEffect, i = e.useLayoutEffect, m = e.useDebugValue;
-  function p(f, u) {
-    var s = u(), a = l({ inst: { value: s, getSnapshot: u } }), n = a[0].inst, w = a[1];
-    return i(
+  var r = typeof Object.is == "function" ? Object.is : t, s = e.useState, o = e.useEffect, u = e.useLayoutEffect, p = e.useDebugValue;
+  function E(m, c) {
+    var l = c(), n = s({ inst: { value: l, getSnapshot: c } }), a = n[0].inst, f = n[1];
+    return u(
       function() {
-        n.value = s, n.getSnapshot = u, g(n) && w({ inst: n });
+        a.value = l, a.getSnapshot = c, w(a) && f({ inst: a });
       },
-      [f, s, u]
+      [m, l, c]
     ), o(
       function() {
-        return g(n) && w({ inst: n }), f(function() {
-          g(n) && w({ inst: n });
+        return w(a) && f({ inst: a }), m(function() {
+          w(a) && f({ inst: a });
         });
       },
-      [f]
-    ), m(s), s;
+      [m]
+    ), p(l), l;
   }
-  function g(f) {
-    var u = f.getSnapshot;
-    f = f.value;
+  function w(m) {
+    var c = m.getSnapshot;
+    m = m.value;
     try {
-      var s = u();
-      return !r(f, s);
+      var l = c();
+      return !r(m, l);
     } catch {
       return !0;
     }
   }
-  function d(f, u) {
-    return u();
+  function d(m, c) {
+    return c();
   }
-  var c = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : p;
-  return A.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : c, A;
+  var i = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : E;
+  return A.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : i, A;
 }
-var M = {};
+var z = {};
 /**
  * @license React
  * use-sync-external-store-shim.development.js
@@ -78,62 +78,62 @@ var M = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var B;
-function Y() {
-  return B || (B = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(s, a) {
-      return s === a && (s !== 0 || 1 / s === 1 / a) || s !== s && a !== a;
+var x;
+function Q() {
+  return x || (x = 1, process.env.NODE_ENV !== "production" && function() {
+    function e(l, n) {
+      return l === n && (l !== 0 || 1 / l === 1 / n) || l !== l && n !== n;
     }
-    function t(s, a) {
-      c || o.startTransition === void 0 || (c = !0, console.error(
+    function t(l, n) {
+      i || o.startTransition === void 0 || (i = !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 n = a();
-      if (!f) {
-        var w = a();
-        i(n, w) || (console.error(
+      var a = n();
+      if (!m) {
+        var f = n();
+        u(a, f) || (console.error(
           "The result of getSnapshot should be cached to avoid an infinite loop"
-        ), f = !0);
+        ), m = !0);
       }
-      w = m({
-        inst: { value: n, getSnapshot: a }
+      f = p({
+        inst: { value: a, getSnapshot: n }
       });
-      var E = w[0].inst, _ = w[1];
-      return g(
+      var v = f[0].inst, O = f[1];
+      return w(
         function() {
-          E.value = n, E.getSnapshot = a, r(E) && _({ inst: E });
+          v.value = a, v.getSnapshot = n, r(v) && O({ inst: v });
         },
-        [s, n, a]
-      ), p(
+        [l, a, n]
+      ), E(
         function() {
-          return r(E) && _({ inst: E }), s(function() {
-            r(E) && _({ inst: E });
+          return r(v) && O({ inst: v }), l(function() {
+            r(v) && O({ inst: v });
           });
         },
-        [s]
-      ), d(n), n;
+        [l]
+      ), d(a), a;
     }
-    function r(s) {
-      var a = s.getSnapshot;
-      s = s.value;
+    function r(l) {
+      var n = l.getSnapshot;
+      l = l.value;
       try {
-        var n = a();
-        return !i(s, n);
+        var a = n();
+        return !u(l, a);
       } catch {
         return !0;
       }
     }
-    function l(s, a) {
-      return a();
+    function s(l, n) {
+      return n();
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var o = D, i = typeof Object.is == "function" ? Object.is : e, m = o.useState, p = o.useEffect, g = o.useLayoutEffect, d = o.useDebugValue, c = !1, f = !1, u = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? l : t;
-    M.useSyncExternalStore = o.useSyncExternalStore !== void 0 ? o.useSyncExternalStore : u, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  }()), M;
+    var o = D, u = typeof Object.is == "function" ? Object.is : e, p = o.useState, E = o.useEffect, w = o.useLayoutEffect, d = o.useDebugValue, i = !1, m = !1, c = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? s : t;
+    z.useSyncExternalStore = o.useSyncExternalStore !== void 0 ? o.useSyncExternalStore : c, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), z;
 }
-var I;
-function F() {
-  return I || (I = 1, process.env.NODE_ENV === "production" ? L.exports = J() : L.exports = Y()), L.exports;
+var j;
+function K() {
+  return j || (j = 1, process.env.NODE_ENV === "production" ? R.exports = Y() : R.exports = Q()), R.exports;
 }
 /**
  * @license React
@@ -144,61 +144,61 @@ function F() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var j;
-function Q() {
-  if (j)
-    return R;
-  j = 1;
-  var e = D, t = F();
-  function r(d, c) {
-    return d === c && (d !== 0 || 1 / d === 1 / c) || d !== d && c !== c;
+var G;
+function X() {
+  if (G)
+    return L;
+  G = 1;
+  var e = D, t = K();
+  function r(d, i) {
+    return d === i && (d !== 0 || 1 / d === 1 / i) || d !== d && i !== i;
   }
-  var l = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, i = e.useRef, m = e.useEffect, p = e.useMemo, g = e.useDebugValue;
-  return R.useSyncExternalStoreWithSelector = function(d, c, f, u, s) {
-    var a = i(null);
-    if (a.current === null) {
-      var n = { hasValue: !1, value: null };
-      a.current = n;
+  var s = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, u = e.useRef, p = e.useEffect, E = e.useMemo, w = e.useDebugValue;
+  return L.useSyncExternalStoreWithSelector = function(d, i, m, c, l) {
+    var n = u(null);
+    if (n.current === null) {
+      var a = { hasValue: !1, value: null };
+      n.current = a;
     } else
-      n = a.current;
-    a = p(
+      a = n.current;
+    n = E(
       function() {
-        function E(b) {
-          if (!_) {
-            if (_ = !0, O = b, b = u(b), s !== void 0 && n.hasValue) {
-              var S = n.value;
-              if (s(S, b))
-                return N = S;
+        function v(g) {
+          if (!O) {
+            if (O = !0, N = g, g = c(g), l !== void 0 && a.hasValue) {
+              var b = a.value;
+              if (l(b, g))
+                return T = b;
             }
-            return N = b;
+            return T = g;
           }
-          if (S = N, l(O, b))
-            return S;
-          var T = u(b);
-          return s !== void 0 && s(S, T) ? (O = b, S) : (O = b, N = T);
+          if (b = T, s(N, g))
+            return b;
+          var _ = c(g);
+          return l !== void 0 && l(b, _) ? (N = g, b) : (N = g, T = _);
         }
-        var _ = !1, O, N, C = f === void 0 ? null : f;
+        var O = !1, N, T, C = m === void 0 ? null : m;
         return [
           function() {
-            return E(c());
+            return v(i());
           },
           C === null ? void 0 : function() {
-            return E(C());
+            return v(C());
           }
         ];
       },
-      [c, f, u, s]
+      [i, m, c, l]
     );
-    var w = o(d, a[0], a[1]);
-    return m(
+    var f = o(d, n[0], n[1]);
+    return p(
       function() {
-        n.hasValue = !0, n.value = w;
+        a.hasValue = !0, a.value = f;
       },
-      [w]
-    ), g(w), w;
-  }, R;
+      [f]
+    ), w(f), f;
+  }, L;
 }
-var z = {};
+var M = {};
 /**
  * @license React
  * use-sync-external-store-shim/with-selector.development.js
@@ -209,146 +209,146 @@ var z = {};
  * LICENSE file in the root directory of this source tree.
  */
 var W;
-function X() {
+function Z() {
   return W || (W = 1, process.env.NODE_ENV !== "production" && function() {
-    function e(d, c) {
-      return d === c && (d !== 0 || 1 / d === 1 / c) || d !== d && c !== c;
+    function e(d, i) {
+      return d === i && (d !== 0 || 1 / d === 1 / i) || d !== d && i !== i;
     }
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-    var t = D, r = F(), l = typeof Object.is == "function" ? Object.is : e, o = r.useSyncExternalStore, i = t.useRef, m = t.useEffect, p = t.useMemo, g = t.useDebugValue;
-    z.useSyncExternalStoreWithSelector = function(d, c, f, u, s) {
-      var a = i(null);
-      if (a.current === null) {
-        var n = { hasValue: !1, value: null };
-        a.current = n;
+    var t = D, r = K(), s = typeof Object.is == "function" ? Object.is : e, o = r.useSyncExternalStore, u = t.useRef, p = t.useEffect, E = t.useMemo, w = t.useDebugValue;
+    M.useSyncExternalStoreWithSelector = function(d, i, m, c, l) {
+      var n = u(null);
+      if (n.current === null) {
+        var a = { hasValue: !1, value: null };
+        n.current = a;
       } else
-        n = a.current;
-      a = p(
+        a = n.current;
+      n = E(
         function() {
-          function E(b) {
-            if (!_) {
-              if (_ = !0, O = b, b = u(b), s !== void 0 && n.hasValue) {
-                var S = n.value;
-                if (s(S, b))
-                  return N = S;
+          function v(g) {
+            if (!O) {
+              if (O = !0, N = g, g = c(g), l !== void 0 && a.hasValue) {
+                var b = a.value;
+                if (l(b, g))
+                  return T = b;
               }
-              return N = b;
+              return T = g;
             }
-            if (S = N, l(O, b))
-              return S;
-            var T = u(b);
-            return s !== void 0 && s(S, T) ? (O = b, S) : (O = b, N = T);
+            if (b = T, s(N, g))
+              return b;
+            var _ = c(g);
+            return l !== void 0 && l(b, _) ? (N = g, b) : (N = g, T = _);
           }
-          var _ = !1, O, N, C = f === void 0 ? null : f;
+          var O = !1, N, T, C = m === void 0 ? null : m;
           return [
             function() {
-              return E(c());
+              return v(i());
             },
             C === null ? void 0 : function() {
-              return E(C());
+              return v(C());
             }
           ];
         },
-        [c, f, u, s]
+        [i, m, c, l]
       );
-      var w = o(d, a[0], a[1]);
-      return m(
+      var f = o(d, n[0], n[1]);
+      return p(
         function() {
-          n.hasValue = !0, n.value = w;
+          a.hasValue = !0, a.value = f;
         },
-        [w]
-      ), g(w), w;
+        [f]
+      ), w(f), f;
     }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
-  }()), z;
+  }()), M;
 }
-process.env.NODE_ENV === "production" ? V.exports = Q() : V.exports = X();
-var Z = V.exports;
-const ee = /* @__PURE__ */ q(Z), { useDebugValue: te } = D, { useSyncExternalStoreWithSelector: re } = ee;
-const oe = (e) => e;
-function ne(e, t = oe, r) {
-  const l = re(
+process.env.NODE_ENV === "production" ? V.exports = X() : V.exports = Z();
+var ee = V.exports;
+const te = /* @__PURE__ */ J(ee), { useDebugValue: re } = D, { useSyncExternalStoreWithSelector: oe } = te;
+const ne = (e) => e;
+function se(e, t = ne, r) {
+  const s = oe(
     e.subscribe,
     e.getState,
     e.getServerState || e.getInitialState,
     t,
     r
   );
-  return te(l), l;
+  return re(s), s;
 }
-const G = (e) => {
-  const t = typeof e == "function" ? U(e) : e, r = (l, o) => ne(t, l, o);
+const $ = (e) => {
+  const t = typeof e == "function" ? q(e) : e, r = (s, o) => se(t, s, o);
   return Object.assign(r, t), r;
-}, se = (e) => e ? G(e) : G;
+}, ae = (e) => e ? $(e) : $;
 var h = /* @__PURE__ */ ((e) => (e[e.Empty = 0] = "Empty", e[e.Start = 1] = "Start", e[e.End = 2] = "End", e[e.Obstacle = 3] = "Obstacle", e[e.Visited = 4] = "Visited", e[e.Path = 5] = "Path", e))(h || {});
 const k = (e, t) => {
-  const r = Math.abs(e.row - t.row), l = Math.abs(e.col - t.col);
-  return Math.floor(10 * Math.sqrt(r * r + l * l));
-}, ae = (e, t) => ({
+  const r = Math.abs(e.row - t.row), s = Math.abs(e.col - t.col);
+  return Math.floor(10 * Math.sqrt(r * r + s * s));
+}, le = (e, t) => ({
   row: e.row,
   col: e.col,
   g: 0,
   h: k(e, t),
   f: k(e, t),
   parent: null
-}), le = (e, t, r) => {
-  const l = [
+}), ie = (e, t, r) => {
+  const s = [
     { row: e.row - 1, col: e.col },
     { row: e.row + 1, col: e.col },
     { row: e.row, col: e.col - 1 },
     { row: e.row, col: e.col + 1 }
   ];
-  return r && l.push(
+  return r && s.push(
     { row: e.row - 1, col: e.col - 1 },
     { row: e.row - 1, col: e.col + 1 },
     { row: e.row + 1, col: e.col - 1 },
     { row: e.row + 1, col: e.col + 1 }
-  ), l.filter((o) => o.row >= 0 && o.row < t.length && o.col >= 0 && o.col < t[0].length && t[o.row][o.col].state !== h.Obstacle).map((o) => ({
+  ), s.filter((o) => o.row >= 0 && o.row < t.length && o.col >= 0 && o.col < t[0].length && t[o.row][o.col].state !== h.Obstacle).map((o) => ({
     row: o.row,
     col: o.col,
     state: t[o.row][o.col].state
   }));
-}, ie = (e, t, r) => {
-  const l = Math.abs(e.row - t.row), o = Math.abs(e.col - t.col), i = e.g + (l === 0 || o === 0 ? 10 : 14), m = k(t, r), p = i + m;
-  return { g: i, h: m, f: p };
-}, ce = (e) => {
+}, ce = (e, t, r) => {
+  const s = Math.abs(e.row - t.row), o = Math.abs(e.col - t.col), u = e.g + (s === 0 || o === 0 ? 10 : 14), p = k(t, r), E = u + p;
+  return { g: u, h: p, f: E };
+}, ue = (e) => {
   const t = [];
   let r = e;
   for (; r; )
     t.push(r), r = r.parent;
   return t.reverse();
-}, ue = (e, t, r, l) => {
-  const o = [], i = [], m = ae(t, r);
-  for (o.push(m); o.length > 0; ) {
-    o.sort((d, c) => d.f - c.f);
-    const p = o.shift();
-    if (p.row === r.row && p.col === r.col)
-      return i.push(p), { path: ce(p), visitedNodes: i };
-    i.push(p);
-    const g = le(p, e, l);
-    for (const d of g) {
-      if (i.some((a) => a.row === d.row && a.col === d.col))
+}, de = (e, t, r, s) => {
+  const o = [], u = [], p = le(t, r);
+  for (o.push(p); o.length > 0; ) {
+    o.sort((d, i) => d.f - i.f);
+    const E = o.shift();
+    if (E.row === r.row && E.col === r.col)
+      return u.push(E), { path: ue(E), visitedNodes: u };
+    u.push(E);
+    const w = ie(E, e, s);
+    for (const d of w) {
+      if (u.some((n) => n.row === d.row && n.col === d.col))
         continue;
-      const { g: c, h: f, f: u } = ie(p, d, r), s = o.find(
-        (a) => a.row === d.row && a.col === d.col
+      const { g: i, h: m, f: c } = ce(E, d, r), l = o.find(
+        (n) => n.row === d.row && n.col === d.col
       );
-      if (!s || c < s.g) {
-        const a = {
+      if (!l || i < l.g) {
+        const n = {
           row: d.row,
           col: d.col,
-          g: c,
-          h: f,
-          f: u,
-          parent: p
+          g: i,
+          h: m,
+          f: c,
+          parent: E
         };
-        s ? (s.g = c, s.f = u, s.parent = p) : o.push(a);
+        l ? (l.g = i, l.f = c, l.parent = E) : o.push(n);
       }
     }
   }
-  return { path: [], visitedNodes: i };
-}, de = (e) => ({
+  return { path: [], visitedNodes: u };
+}, fe = (e) => ({
   cells: Array.from(
     { length: 8 },
-    (t, r) => Array.from({ length: 12 }, (l, o) => ({
+    (t, r) => Array.from({ length: 12 }, (s, o) => ({
       row: r,
       col: o,
       state: h.Empty
@@ -363,13 +363,13 @@ const k = (e, t) => {
   visitedNodes: [],
   setNumberOfColumns: (t) => {
     e((r) => {
-      const l = r.cells.map((o) => t > r.columns ? [
+      const s = r.cells.map((o) => t > r.columns ? [
         ...o,
         ...Array.from(
           { length: t - r.columns },
-          (i, m) => ({
+          (u, p) => ({
             row: o[0].row,
-            col: r.columns + m,
+            col: r.columns + p,
             state: h.Empty
           })
         )
@@ -377,58 +377,58 @@ const k = (e, t) => {
       return {
         ...r,
         columns: t,
-        cells: l
+        cells: s
       };
     });
   },
   setNumberOfRows: (t) => {
     e((r) => {
-      let l = [...r.cells];
-      return t > r.rows ? l = [
-        ...l,
+      let s = [...r.cells];
+      return t > r.rows ? s = [
+        ...s,
         ...Array.from(
           { length: t - r.rows },
-          (o, i) => Array.from({ length: r.columns }, (m, p) => ({
-            row: r.rows + i,
-            col: p,
+          (o, u) => Array.from({ length: r.columns }, (p, E) => ({
+            row: r.rows + u,
+            col: E,
             state: h.Empty
           }))
         )
-      ] : l = l.slice(0, t), {
+      ] : s = s.slice(0, t), {
         ...r,
         rows: t,
-        cells: l
+        cells: s
       };
     });
   },
-  setCellState: (t, r, l) => {
+  setCellState: (t, r, s) => {
     e((o) => {
-      const i = o.cells.map(
-        (d) => d.map((c) => ({ ...c }))
+      const u = o.cells.map(
+        (d) => d.map((i) => ({ ...i }))
       );
-      let m = o.startTile, p = o.endTile, g = [...o.obstacleTiles];
-      switch (l === h.Start && o.startTile && (i[o.startTile.row][o.startTile.col].state = h.Empty, m = null), l === h.End && o.endTile && (i[o.endTile.row][o.endTile.col].state = h.Empty, p = null), i[t][r].state = l, l) {
+      let p = o.startTile, E = o.endTile, w = [...o.obstacleTiles];
+      switch (s === h.Start && o.startTile && (u[o.startTile.row][o.startTile.col].state = h.Empty, p = null), s === h.End && o.endTile && (u[o.endTile.row][o.endTile.col].state = h.Empty, E = null), u[t][r].state = s, s) {
         case h.Start:
-          m = { row: t, col: r };
+          p = { row: t, col: r };
           break;
         case h.End:
-          p = { row: t, col: r };
+          E = { row: t, col: r };
           break;
         case h.Obstacle:
-          g.some((d) => d.row === t && d.col === r) || g.push({ row: t, col: r });
+          w.some((d) => d.row === t && d.col === r) || w.push({ row: t, col: r });
           break;
         case h.Empty:
-          g = g.filter(
+          w = w.filter(
             (d) => !(d.row === t && d.col === r)
           );
           break;
       }
       return {
         ...o,
-        cells: i,
-        startTile: m,
-        endTile: p,
-        obstacleTiles: g
+        cells: u,
+        startTile: p,
+        endTile: E,
+        obstacleTiles: w
       };
     });
   },
@@ -436,8 +436,8 @@ const k = (e, t) => {
     e((t) => ({
       ...t,
       cells: t.cells.map(
-        (r) => r.map((l) => ({
-          ...l,
+        (r) => r.map((s) => ({
+          ...s,
           state: h.Empty
         }))
       ),
@@ -450,120 +450,125 @@ const k = (e, t) => {
   },
   handleFindPath: (t) => {
     e((r) => {
-      const l = r.cells.flat().find((i) => i.state === h.Start), o = r.cells.flat().find((i) => i.state === h.End);
-      if (l && o) {
-        const i = r.cells.map(
-          (d) => d.map((c) => ({
-            row: c.row,
-            col: c.col,
-            state: c.state
+      const s = r.cells.flat().find((u) => u.state === h.Start), o = r.cells.flat().find((u) => u.state === h.End);
+      if (s && o) {
+        const u = r.cells.map(
+          (d) => d.map((i) => ({
+            row: i.row,
+            col: i.col,
+            state: i.state
           }))
-        ), { path: m, visitedNodes: p } = ue(i, l, o, t);
-        return (async (d, c) => {
-          for (let f of c)
-            await new Promise((u) => setTimeout(u, 100)), e((u) => {
-              const s = u.cells.map(
-                (a) => a.map((n) => ({
-                  ...n,
-                  state: f.row === n.row && f.col === n.col && n.state === h.Empty ? h.Visited : n.state
+        ), { path: p, visitedNodes: E } = de(u, s, o, t);
+        return (async (d, i) => {
+          for (let m of i)
+            await new Promise((c) => setTimeout(c, 100)), e((c) => {
+              const l = c.cells.map(
+                (n) => n.map((a) => ({
+                  ...a,
+                  state: m.row === a.row && m.col === a.col && a.state === h.Empty ? h.Visited : a.state
                 }))
               );
               return {
-                ...u,
-                cells: s,
-                visitedNodes: [...u.visitedNodes, f]
+                ...c,
+                cells: l,
+                visitedNodes: [...c.visitedNodes, m]
               };
             });
-          for (let f of d)
-            await new Promise((u) => setTimeout(u, 250)), e((u) => {
-              const s = u.cells.map(
-                (a) => a.map((n) => ({
-                  ...n,
-                  state: f.row === n.row && f.col === n.col ? h.Path : n.state
+          for (let m of d)
+            await new Promise((c) => setTimeout(c, 250)), e((c) => {
+              const l = c.cells.map(
+                (n) => n.map((a) => ({
+                  ...a,
+                  state: m.row === a.row && m.col === a.col ? h.Path : a.state
                 }))
               );
               return {
-                ...u,
-                cells: s,
-                path: [...u.path, f]
+                ...c,
+                cells: l,
+                path: [...c.path, m]
               };
             });
-        })(m, p), { ...r, path: [], visitedNodes: [] };
+        })(p, E), { ...r, path: [], visitedNodes: [] };
       }
       return r;
     });
   },
   setPath: (t) => {
     e((r) => {
-      const l = r.cells.map(
-        (o) => o.map((i) => ({
-          ...i,
-          state: t.some((m) => m.row === i.row && m.col === i.col) ? h.Path : i.state
+      const s = r.cells.map(
+        (o) => o.map((u) => ({
+          ...u,
+          state: t.some((p) => p.row === u.row && p.col === u.col) ? h.Path : u.state
         }))
       );
       return {
         ...r,
-        cells: l
+        cells: s
       };
     });
   },
   setVisitedNodes: (t) => {
     e((r) => {
-      const l = r.cells.map(
-        (o) => o.map((i) => ({
-          ...i,
-          state: t.some((m) => m.row === i.row && m.col === i.col) && i.state === h.Empty ? h.Visited : i.state
+      const s = r.cells.map(
+        (o) => o.map((u) => ({
+          ...u,
+          state: t.some((p) => p.row === u.row && p.col === u.col) && u.state === h.Empty ? h.Visited : u.state
         }))
       );
       return {
         ...r,
-        cells: l
+        cells: s
       };
     });
   }
-}), fe = (e) => ({
+}), he = (e) => ({
   activeButton: h.Start,
   setSelectedButtonState: (t) => e({ activeButton: t }),
   canTravelDiagonally: !0,
   setCanTravelDiagonally: (t) => e({ canTravelDiagonally: t })
-}), K = se((e, t, r) => ({
-  ...de(e),
-  ...fe(e)
+}), U = ae((e, t, r) => ({
+  ...fe(e),
+  ...he(e)
 }));
-const he = () => {
-  var u;
-  const { cells: e, activeButton: t, setCellState: r, setSelectedButtonState: l, visitedNodes: o, path: i } = K(), [m, p] = $({ width: window.innerWidth, height: window.innerHeight });
-  H(() => {
-    const s = () => {
-      p({ width: window.innerWidth, height: window.innerHeight });
+const me = () => {
+  var l;
+  const { cells: e, activeButton: t, setCellState: r, setSelectedButtonState: s, visitedNodes: o, path: u } = U(), [p, E] = H({ width: 0, height: 0 }), w = D.useRef(null);
+  F(() => {
+    const n = () => {
+      if (w.current) {
+        const a = w.current.getBoundingClientRect();
+        E({ width: a.width, height: a.height });
+      }
     };
-    return window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
+    return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
   }, []);
-  const g = (s, a) => {
-    switch (r(s, a, t), t) {
+  const d = (n, a) => {
+    switch (r(n, a, t), t) {
       case h.Start:
-        l(h.End);
+        s(h.End);
         break;
       case h.End:
-        l(h.Obstacle);
+        s(h.Obstacle);
         break;
     }
-  }, d = (s, a) => {
-    const n = o.find((w) => w.row === s && w.col === a);
-    return n ? { g: n.g, h: n.h, f: n.f } : { g: null, h: null, f: null };
-  }, f = (() => {
-    var T;
-    const s = m.width < 768, a = m.width < 1024, n = s ? Math.min(m.width * 0.98, 500) : a ? Math.min(m.width * 0.95, 800) : Math.min(m.width * 0.9, 1e3), w = s ? Math.min(m.height * 0.75, 500) : a ? Math.min(m.height * 0.8, 700) : Math.min(m.height * 0.85, 800), E = ((T = e[0]) == null ? void 0 : T.length) || 1, _ = e.length || 1, O = s ? 16 : 24, N = (n - O) / E, C = (w - O) / _;
-    return Math.max(s ? 30 : 40, Math.min(N, C, s ? 50 : a ? 70 : 90));
+  }, i = (n, a) => {
+    const f = o.find((v) => v.row === n && v.col === a);
+    return f ? { g: f.g, h: f.h, f: f.f } : { g: null, h: null, f: null };
+  }, c = (() => {
+    var b;
+    if (!p.width || !p.height)
+      return 20;
+    const n = ((b = e[0]) == null ? void 0 : b.length) || 1, a = e.length || 1, f = 20, v = n + a, O = p.width - f - v, N = p.height - f - v, T = O / n, C = N / a, g = Math.min(T, C);
+    return Math.max(15, Math.min(g, 60));
   })();
-  return /* @__PURE__ */ v("div", { className: "grid-wrapper", children: /* @__PURE__ */ v(
+  return /* @__PURE__ */ S("div", { className: "grid-wrapper", ref: w, children: /* @__PURE__ */ S(
     "div",
     {
       className: "grid-container",
       style: {
         display: "grid",
-        gridTemplateColumns: `repeat(${((u = e[0]) == null ? void 0 : u.length) || 1}, ${f}px)`,
-        gridTemplateRows: `repeat(${e.length || 1}, ${f}px)`,
+        gridTemplateColumns: `repeat(${((l = e[0]) == null ? void 0 : l.length) || 1}, ${c}px)`,
+        gridTemplateRows: `repeat(${e.length || 1}, ${c}px)`,
         gap: "1px",
         padding: "8px",
         background: "var(--bg-secondary)",
@@ -572,21 +577,21 @@ const he = () => {
         border: "1px solid var(--border-color)"
       },
       children: e.map(
-        (s, a) => s.map((n, w) => {
-          const E = i.some((S) => S.row === n.row && S.col === n.col), _ = o.some((S) => S.row === n.row && S.col === n.col), { g: O, h: N, f: C } = d(n.row, n.col);
-          let b = me(n, _);
-          if (E) {
-            const S = i.findIndex((T) => T.row === n.row && T.col === n.col);
-            S === 0 ? b = "var(--cell-start)" : S === i.length - 1 ? b = "var(--cell-end)" : b = "var(--cell-path)";
+        (n, a) => n.map((f, v) => {
+          const O = u.some((_) => _.row === f.row && _.col === f.col), N = o.some((_) => _.row === f.row && _.col === f.col), { g: T, h: C, f: g } = i(f.row, f.col);
+          let b = pe(f, N);
+          if (O) {
+            const _ = u.findIndex((B) => B.row === f.row && B.col === f.col);
+            _ === 0 ? b = "var(--cell-start)" : _ === u.length - 1 ? b = "var(--cell-end)" : b = "var(--cell-path)";
           }
           return /* @__PURE__ */ y(
             "div",
             {
               className: "grid-cell",
-              onClick: () => g(a, w),
+              onClick: () => d(a, v),
               style: {
-                width: f,
-                height: f,
+                width: c,
+                height: c,
                 backgroundColor: b,
                 border: "1px solid var(--cell-border)",
                 cursor: "pointer",
@@ -597,39 +602,39 @@ const he = () => {
                 alignItems: "center",
                 borderRadius: "2px"
               },
-              onMouseEnter: (S) => {
-                n.state === h.Empty && (S.currentTarget.style.backgroundColor = "var(--bg-tertiary)", S.currentTarget.style.transform = "scale(1.02)");
+              onMouseEnter: (_) => {
+                f.state === h.Empty && (_.currentTarget.style.backgroundColor = "var(--bg-tertiary)", _.currentTarget.style.transform = "scale(1.02)");
               },
-              onMouseLeave: (S) => {
-                n.state === h.Empty && (S.currentTarget.style.backgroundColor = b, S.currentTarget.style.transform = "scale(1)");
+              onMouseLeave: (_) => {
+                f.state === h.Empty && (_.currentTarget.style.backgroundColor = b, _.currentTarget.style.transform = "scale(1)");
               },
               children: [
-                _ && /* @__PURE__ */ y("div", { className: "cell-values", children: [
+                N && /* @__PURE__ */ y("div", { className: "cell-values", children: [
                   /* @__PURE__ */ y("div", { className: "value-h", children: [
                     "h",
-                    N
+                    C
                   ] }),
                   /* @__PURE__ */ y("div", { className: "value-f", children: [
                     "f",
-                    C
+                    g
                   ] }),
                   /* @__PURE__ */ y("div", { className: "value-g", children: [
                     "g",
-                    O
+                    T
                   ] })
                 ] }),
-                n.state === h.Start && /* @__PURE__ */ v("div", { className: "cell-indicator start", children: "●" }),
-                n.state === h.End && /* @__PURE__ */ v("div", { className: "cell-indicator end", children: "●" }),
-                n.state === h.Obstacle && /* @__PURE__ */ v("div", { className: "cell-indicator obstacle", children: "■" })
+                f.state === h.Start && /* @__PURE__ */ S("div", { className: "cell-indicator start", children: "●" }),
+                f.state === h.End && /* @__PURE__ */ S("div", { className: "cell-indicator end", children: "●" }),
+                f.state === h.Obstacle && /* @__PURE__ */ S("div", { className: "cell-indicator obstacle", children: "■" })
               ]
             },
-            `${a}-${w}`
+            `${a}-${v}`
           );
         })
       )
     }
   ) });
-}, me = (e, t) => {
+}, pe = (e, t) => {
   if (t)
     return e.state === h.Start ? "var(--cell-start)" : e.state === h.End ? "var(--cell-end)" : "var(--cell-visited)";
   switch (e.state) {
@@ -645,128 +650,128 @@ const he = () => {
       return "var(--cell-empty)";
   }
 };
-const pe = () => {
+const ve = () => {
   const {
     activeButton: e,
     setSelectedButtonState: t,
     resetCells: r,
-    rows: l,
+    rows: s,
     columns: o,
-    setNumberOfRows: i,
-    setNumberOfColumns: m,
-    handleFindPath: p,
-    canTravelDiagonally: g,
+    setNumberOfRows: u,
+    setNumberOfColumns: p,
+    handleFindPath: E,
+    canTravelDiagonally: w,
     setCanTravelDiagonally: d
-  } = K(), [c, f] = $(() => {
-    const E = localStorage.getItem("darkMode");
-    return E ? JSON.parse(E) : !1;
+  } = U(), [i, m] = H(() => {
+    const v = localStorage.getItem("darkMode");
+    return v ? JSON.parse(v) : !1;
   });
-  H(() => {
-    localStorage.setItem("darkMode", JSON.stringify(c)), document.documentElement.setAttribute("data-theme", c ? "dark" : "light");
-  }, [c]);
-  const u = () => {
-    f(!c);
-  }, s = [
+  F(() => {
+    localStorage.setItem("darkMode", JSON.stringify(i)), document.documentElement.setAttribute("data-theme", i ? "dark" : "light");
+  }, [i]);
+  const c = () => {
+    m(!i);
+  }, l = [
     { label: "Start", state: h.Start },
     { label: "End", state: h.End },
     { label: "Obstacle", state: h.Obstacle },
     { label: "Clear", state: h.Empty },
     { label: "Reset", state: null }
-  ], a = (E) => {
-    E === null ? n() : t(E);
-  }, n = () => {
+  ], n = (v) => {
+    v === null ? a() : t(v);
+  }, a = () => {
     r(), t(h.Start);
-  }, w = () => {
-    p(g);
+  }, f = () => {
+    E(w);
   };
-  return /* @__PURE__ */ v("div", { className: "control-panel", children: /* @__PURE__ */ y("div", { className: "control-grid", children: [
+  return /* @__PURE__ */ S("div", { className: "control-panel", children: /* @__PURE__ */ y("div", { className: "control-grid", children: [
     /* @__PURE__ */ y("div", { className: "control-group tools", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Tools" }),
-      /* @__PURE__ */ v("div", { className: "button-group", children: s.map((E, _) => /* @__PURE__ */ v(
+      /* @__PURE__ */ S("h3", { className: "group-title", children: "Tools" }),
+      /* @__PURE__ */ S("div", { className: "button-group", children: l.map((v, O) => /* @__PURE__ */ S(
         "button",
         {
-          className: `control-button ${E.label.toLowerCase()} ${e === E.state ? "active" : ""}`,
-          onClick: () => a(E.state),
-          children: E.label
+          className: `control-button ${v.label.toLowerCase()} ${e === v.state ? "active" : ""}`,
+          onClick: () => n(v.state),
+          children: v.label
         },
-        _
+        O
       )) })
     ] }),
     /* @__PURE__ */ y("div", { className: "control-group actions", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Actions" }),
+      /* @__PURE__ */ S("h3", { className: "group-title", children: "Actions" }),
       /* @__PURE__ */ y("div", { className: "button-group", children: [
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ S(
           "button",
           {
             className: "control-button find-path",
-            onClick: w,
+            onClick: f,
             children: "Find Path"
           }
         ),
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ S(
           "button",
           {
-            className: `control-button diagonal ${g ? "active" : ""}`,
-            onClick: () => d(!g),
-            children: g ? "Diagonal On" : "Diagonal Off"
+            className: `control-button diagonal ${w ? "active" : ""}`,
+            onClick: () => d(!w),
+            children: w ? "Diagonal On" : "Diagonal Off"
           }
         ),
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ S(
           "button",
           {
-            className: `control-button theme-toggle ${c ? "active" : ""}`,
-            onClick: u,
-            title: c ? "Switch to light mode" : "Switch to dark mode",
-            children: c ? "☀️ Light" : "🌙 Dark"
+            className: `control-button theme-toggle ${i ? "active" : ""}`,
+            onClick: c,
+            title: i ? "Switch to light mode" : "Switch to dark mode",
+            children: i ? "☀️ Light" : "🌙 Dark"
           }
         )
       ] })
     ] }),
     /* @__PURE__ */ y("div", { className: "control-group size", children: [
-      /* @__PURE__ */ v("h3", { className: "group-title", children: "Grid Size" }),
+      /* @__PURE__ */ S("h3", { className: "group-title", children: "Grid Size" }),
       /* @__PURE__ */ y("div", { className: "size-controls", children: [
         /* @__PURE__ */ y("div", { className: "size-control", children: [
-          /* @__PURE__ */ v("label", { className: "size-label", children: "Rows" }),
+          /* @__PURE__ */ S("label", { className: "size-label", children: "Rows" }),
           /* @__PURE__ */ y("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ S(
               "button",
               {
                 className: "size-button",
-                onClick: () => i(Math.max(5, l - 1)),
-                disabled: l <= 5,
+                onClick: () => u(Math.max(5, s - 1)),
+                disabled: s <= 5,
                 children: "−"
               }
             ),
-            /* @__PURE__ */ v("span", { className: "size-value", children: l }),
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ S("span", { className: "size-value", children: s }),
+            /* @__PURE__ */ S(
               "button",
               {
                 className: "size-button",
-                onClick: () => i(Math.min(50, l + 1)),
-                disabled: l >= 50,
+                onClick: () => u(Math.min(50, s + 1)),
+                disabled: s >= 50,
                 children: "+"
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ y("div", { className: "size-control", children: [
-          /* @__PURE__ */ v("label", { className: "size-label", children: "Columns" }),
+          /* @__PURE__ */ S("label", { className: "size-label", children: "Columns" }),
           /* @__PURE__ */ y("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ S(
               "button",
               {
                 className: "size-button",
-                onClick: () => m(Math.max(5, o - 1)),
+                onClick: () => p(Math.max(5, o - 1)),
                 disabled: o <= 5,
                 children: "−"
               }
             ),
-            /* @__PURE__ */ v("span", { className: "size-value", children: o }),
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ S("span", { className: "size-value", children: o }),
+            /* @__PURE__ */ S(
               "button",
               {
                 className: "size-button",
-                onClick: () => m(Math.min(50, o + 1)),
+                onClick: () => p(Math.min(50, o + 1)),
                 disabled: o >= 50,
                 children: "+"
               }
@@ -776,16 +781,16 @@ const pe = () => {
       ] })
     ] })
   ] }) });
-}, ve = () => /* @__PURE__ */ v("div", { className: "astar-visualizer-root", children: /* @__PURE__ */ y("div", { className: "app-container", children: [
-  /* @__PURE__ */ v("header", { className: "app-header", children: /* @__PURE__ */ v("h1", { className: "app-title", children: "A* Pathfinding" }) }),
-  /* @__PURE__ */ v("main", { className: "app-main", children: /* @__PURE__ */ v(he, {}) }),
-  /* @__PURE__ */ v("footer", { className: "app-footer", children: /* @__PURE__ */ v(pe, {}) })
+}, Ee = () => /* @__PURE__ */ S("div", { className: "astar-visualizer-root", children: /* @__PURE__ */ y("div", { className: "app-container", children: [
+  /* @__PURE__ */ S("header", { className: "app-header", children: /* @__PURE__ */ S("h1", { className: "app-title", children: "A* Pathfinding" }) }),
+  /* @__PURE__ */ S("main", { className: "app-main", children: /* @__PURE__ */ S(me, {}) }),
+  /* @__PURE__ */ S("footer", { className: "app-footer", children: /* @__PURE__ */ S(ve, {}) })
 ] }) });
-function Se() {
-  return /* @__PURE__ */ v(ve, {});
+function ge() {
+  return /* @__PURE__ */ S(Ee, {});
 }
 export {
-  Se as AStarVisualizer,
+  ge as AStarVisualizer,
   h as CellState,
-  ve as Layout
+  Ee as Layout
 };