astar-visualizer 1.0.6 → 1.0.7

package/dist/astar-visualizer.js

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

package/dist/astar-visualizer.umd.cjs

@@ -1,4 +1,4 @@
-(function(T,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],u):(T=typeof globalThis<"u"?globalThis:T||self,u(T.AStarVisualizer={},T["react/jsx-runtime"],T.React))})(this,function(T,u,C){"use strict";const Ee="",Se="",B=e=>{let t;const r=new Set,s=(c,v)=>{const i=typeof c=="function"?c(t):c;if(!Object.is(i,t)){const l=t;t=v??(typeof i!="object"||i===null)?i:Object.assign({},t,i),r.forEach(n=>n(t,l))}},o=()=>t,w={setState:s,getState:o,getInitialState:()=>f,subscribe:c=>(r.add(c),()=>r.delete(c)),destroy:()=>{r.clear()}},f=t=e(s,o,w);return w},q=e=>e?B(e):B;function J(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}},z={},L={exports:{}},M={};/**
+(function(C,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],u):(C=typeof globalThis<"u"?globalThis:C||self,u(C.AStarVisualizer={},C["react/jsx-runtime"],C.React))})(this,function(C,u,T){"use strict";const Ee="",Se="",B=e=>{let t;const r=new Set,a=(d,v)=>{const i=typeof d=="function"?d(t):d;if(!Object.is(i,t)){const c=t;t=v??(typeof i!="object"||i===null)?i:Object.assign({},t,i),r.forEach(n=>n(t,c))}},o=()=>t,w={setState:a,getState:o,getInitialState:()=>f,subscribe:d=>(r.add(d),()=>r.delete(d)),destroy:()=>{r.clear()}},f=t=e(a,o,w);return w},J=e=>e?B(e):B;function q(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var D={exports:{}},z={},A={exports:{}},V={};/**
  * @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 j;function Y(){if(j)return M;j=1;var e=C;function t(v,i){return v===i&&(v!==0||1/v===1/i)||v!==v&&i!==i}var r=typeof Object.is=="function"?Object.is:t,s=e.useState,o=e.useEffect,d=e.useLayoutEffect,m=e.useDebugValue;function S(v,i){var l=i(),n=s({inst:{value:l,getSnapshot:i}}),a=n[0].inst,p=n[1];return d(function(){a.value=l,a.getSnapshot=i,w(a)&&p({inst:a})},[v,l,i]),o(function(){return w(a)&&p({inst:a}),v(function(){w(a)&&p({inst:a})})},[v]),m(l),l}function w(v){var i=v.getSnapshot;v=v.value;try{var l=i();return!r(v,l)}catch{return!0}}function f(v,i){return i()}var c=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?f:S;return M.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:c,M}var V={};/**
+ */var j;function Y(){if(j)return V;j=1;var e=T;function t(v,i){return v===i&&(v!==0||1/v===1/i)||v!==v&&i!==i}var r=typeof Object.is=="function"?Object.is:t,a=e.useState,o=e.useEffect,l=e.useLayoutEffect,m=e.useDebugValue;function E(v,i){var c=i(),n=a({inst:{value:c,getSnapshot:i}}),s=n[0].inst,p=n[1];return l(function(){s.value=c,s.getSnapshot=i,w(s)&&p({inst:s})},[v,c,i]),o(function(){return w(s)&&p({inst:s}),v(function(){w(s)&&p({inst:s})})},[v]),m(c),c}function w(v){var i=v.getSnapshot;v=v.value;try{var c=i();return!r(v,c)}catch{return!0}}function f(v,i){return i()}var d=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?f:E;return V.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:d,V}var M={};/**
  * @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 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(l,n){c||o.startTransition===void 0||(c=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var a=n();if(!v){var p=n();d(a,p)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),v=!0)}p=m({inst:{value:a,getSnapshot:n}});var E=p[0].inst,y=p[1];return w(function(){E.value=a,E.getSnapshot=n,r(E)&&y({inst:E})},[l,a,n]),S(function(){return r(E)&&y({inst:E}),l(function(){r(E)&&y({inst:E})})},[l]),f(a),a}function r(l){var n=l.getSnapshot;l=l.value;try{var a=n();return!d(l,a)}catch{return!0}}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=C,d=typeof Object.is=="function"?Object.is:e,m=o.useState,S=o.useEffect,w=o.useLayoutEffect,f=o.useDebugValue,c=!1,v=!1,i=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?s:t;V.useSyncExternalStore=o.useSyncExternalStore!==void 0?o.useSyncExternalStore:i,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),V}var I;function G(){return I||(I=1,process.env.NODE_ENV==="production"?L.exports=Y():L.exports=Q()),L.exports}/**
+ */var x;function Q(){return x||(x=1,process.env.NODE_ENV!=="production"&&function(){function e(c,n){return c===n&&(c!==0||1/c===1/n)||c!==c&&n!==n}function t(c,n){d||o.startTransition===void 0||(d=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var s=n();if(!v){var p=n();l(s,p)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),v=!0)}p=m({inst:{value:s,getSnapshot:n}});var S=p[0].inst,y=p[1];return w(function(){S.value=s,S.getSnapshot=n,r(S)&&y({inst:S})},[c,s,n]),E(function(){return r(S)&&y({inst:S}),c(function(){r(S)&&y({inst:S})})},[c]),f(s),s}function r(c){var n=c.getSnapshot;c=c.value;try{var s=n();return!l(c,s)}catch{return!0}}function a(c,n){return n()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var o=T,l=typeof Object.is=="function"?Object.is:e,m=o.useState,E=o.useEffect,w=o.useLayoutEffect,f=o.useDebugValue,d=!1,v=!1,i=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?a:t;M.useSyncExternalStore=o.useSyncExternalStore!==void 0?o.useSyncExternalStore:i,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),M}var I;function G(){return I||(I=1,process.env.NODE_ENV==="production"?A.exports=Y():A.exports=Q()),A.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 W;function X(){if(W)return z;W=1;var e=C,t=G();function r(f,c){return f===c&&(f!==0||1/f===1/c)||f!==f&&c!==c}var s=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,d=e.useRef,m=e.useEffect,S=e.useMemo,w=e.useDebugValue;return z.useSyncExternalStoreWithSelector=function(f,c,v,i,l){var n=d(null);if(n.current===null){var a={hasValue:!1,value:null};n.current=a}else a=n.current;n=S(function(){function E(g){if(!y){if(y=!0,O=g,g=i(g),l!==void 0&&a.hasValue){var b=a.value;if(l(b,g))return N=b}return N=g}if(b=N,s(O,g))return b;var _=i(g);return l!==void 0&&l(b,_)?(O=g,b):(O=g,N=_)}var y=!1,O,N,D=v===void 0?null:v;return[function(){return E(c())},D===null?void 0:function(){return E(D())}]},[c,v,i,l]);var p=o(f,n[0],n[1]);return m(function(){a.hasValue=!0,a.value=p},[p]),w(p),p},z}var k={};/**
+ */var W;function X(){if(W)return z;W=1;var e=T,t=G();function r(f,d){return f===d&&(f!==0||1/f===1/d)||f!==f&&d!==d}var a=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,l=e.useRef,m=e.useEffect,E=e.useMemo,w=e.useDebugValue;return z.useSyncExternalStoreWithSelector=function(f,d,v,i,c){var n=l(null);if(n.current===null){var s={hasValue:!1,value:null};n.current=s}else s=n.current;n=E(function(){function S(g){if(!y){if(y=!0,O=g,g=i(g),c!==void 0&&s.hasValue){var b=s.value;if(c(b,g))return N=b}return N=g}if(b=N,a(O,g))return b;var _=i(g);return c!==void 0&&c(b,_)?(O=g,b):(O=g,N=_)}var y=!1,O,N,L=v===void 0?null:v;return[function(){return S(d())},L===null?void 0:function(){return S(L())}]},[d,v,i,c]);var p=o(f,n[0],n[1]);return m(function(){s.hasValue=!0,s.value=p},[p]),w(p),p},z}var k={};/**
  * @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 H;function Z(){return H||(H=1,process.env.NODE_ENV!=="production"&&function(){function e(f,c){return f===c&&(f!==0||1/f===1/c)||f!==f&&c!==c}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=C,r=G(),s=typeof Object.is=="function"?Object.is:e,o=r.useSyncExternalStore,d=t.useRef,m=t.useEffect,S=t.useMemo,w=t.useDebugValue;k.useSyncExternalStoreWithSelector=function(f,c,v,i,l){var n=d(null);if(n.current===null){var a={hasValue:!1,value:null};n.current=a}else a=n.current;n=S(function(){function E(g){if(!y){if(y=!0,O=g,g=i(g),l!==void 0&&a.hasValue){var b=a.value;if(l(b,g))return N=b}return N=g}if(b=N,s(O,g))return b;var _=i(g);return l!==void 0&&l(b,_)?(O=g,b):(O=g,N=_)}var y=!1,O,N,D=v===void 0?null:v;return[function(){return E(c())},D===null?void 0:function(){return E(D())}]},[c,v,i,l]);var p=o(f,n[0],n[1]);return m(function(){a.hasValue=!0,a.value=p},[p]),w(p),p},typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),k}process.env.NODE_ENV==="production"?A.exports=X():A.exports=Z();var $=A.exports;const ee=J($),{useDebugValue:te}=C,{useSyncExternalStoreWithSelector:re}=ee;let we=!1;const oe=e=>e;function ne(e,t=oe,r){const s=re(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,r);return te(s),s}const F=e=>{const t=typeof e=="function"?q(e):e,r=(s,o)=>ne(t,s,o);return Object.assign(r,t),r},se=e=>e?F(e):F;var h=(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 P=(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))},ae=(e,t)=>({row:e.row,col:e.col,g:0,h:P(e,t),f:P(e,t),parent:null}),le=(e,t,r)=>{const s=[{row:e.row-1,col:e.col},{row:e.row+1,col:e.col},{row:e.row,col:e.col-1},{row:e.row,col:e.col+1}];return r&&s.push({row:e.row-1,col:e.col-1},{row:e.row-1,col:e.col+1},{row:e.row+1,col:e.col-1},{row:e.row+1,col:e.col+1}),s.filter(o=>o.row>=0&&o.row<t.length&&o.col>=0&&o.col<t[0].length&&t[o.row][o.col].state!==h.Obstacle).map(o=>({row:o.row,col:o.col,state:t[o.row][o.col].state}))},ce=(e,t,r)=>{const s=Math.abs(e.row-t.row),o=Math.abs(e.col-t.col),d=e.g+(s===0||o===0?10:14),m=P(t,r),S=d+m;return{g:d,h:m,f:S}},ie=e=>{const t=[];let r=e;for(;r;)t.push(r),r=r.parent;return t.reverse()},ue=(e,t,r,s)=>{const o=[],d=[],m=ae(t,r);for(o.push(m);o.length>0;){o.sort((f,c)=>f.f-c.f);const S=o.shift();if(S.row===r.row&&S.col===r.col)return d.push(S),{path:ie(S),visitedNodes:d};d.push(S);const w=le(S,e,s);for(const f of w){if(d.some(n=>n.row===f.row&&n.col===f.col))continue;const{g:c,h:v,f:i}=ce(S,f,r),l=o.find(n=>n.row===f.row&&n.col===f.col);if(!l||c<l.g){const n={row:f.row,col:f.col,g:c,h:v,f:i,parent:S};l?(l.g=c,l.f=i,l.parent=S):o.push(n)}}}return{path:[],visitedNodes:d}},de=e=>({cells:Array.from({length:8},(t,r)=>Array.from({length:12},(s,o)=>({row:r,col:o,state:h.Empty}))),rows:8,columns:12,startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[],setNumberOfColumns:t=>{e(r=>{const s=r.cells.map(o=>t>r.columns?[...o,...Array.from({length:t-r.columns},(d,m)=>({row:o[0].row,col:r.columns+m,state:h.Empty}))]:o.slice(0,t));return{...r,columns:t,cells:s}})},setNumberOfRows:t=>{e(r=>{let s=[...r.cells];return t>r.rows?s=[...s,...Array.from({length:t-r.rows},(o,d)=>Array.from({length:r.columns},(m,S)=>({row:r.rows+d,col:S,state:h.Empty})))]:s=s.slice(0,t),{...r,rows:t,cells:s}})},setCellState:(t,r,s)=>{e(o=>{const d=o.cells.map(f=>f.map(c=>({...c})));let m=o.startTile,S=o.endTile,w=[...o.obstacleTiles];switch(s===h.Start&&o.startTile&&(d[o.startTile.row][o.startTile.col].state=h.Empty,m=null),s===h.End&&o.endTile&&(d[o.endTile.row][o.endTile.col].state=h.Empty,S=null),d[t][r].state=s,s){case h.Start:m={row:t,col:r};break;case h.End:S={row:t,col:r};break;case h.Obstacle:w.some(f=>f.row===t&&f.col===r)||w.push({row:t,col:r});break;case h.Empty:w=w.filter(f=>!(f.row===t&&f.col===r));break}return{...o,cells:d,startTile:m,endTile:S,obstacleTiles:w}})},resetCells:()=>{e(t=>({...t,cells:t.cells.map(r=>r.map(s=>({...s,state:h.Empty}))),startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[]}))},handleFindPath:t=>{e(r=>{const s=r.cells.flat().find(d=>d.state===h.Start),o=r.cells.flat().find(d=>d.state===h.End);if(s&&o){const d=r.cells.map(f=>f.map(c=>({row:c.row,col:c.col,state:c.state}))),{path:m,visitedNodes:S}=ue(d,s,o,t);return(async(f,c)=>{for(let v of c)await new Promise(i=>setTimeout(i,100)),e(i=>{const l=i.cells.map(n=>n.map(a=>({...a,state:v.row===a.row&&v.col===a.col&&a.state===h.Empty?h.Visited:a.state})));return{...i,cells:l,visitedNodes:[...i.visitedNodes,v]}});for(let v of f)await new Promise(i=>setTimeout(i,250)),e(i=>{const l=i.cells.map(n=>n.map(a=>({...a,state:v.row===a.row&&v.col===a.col?h.Path:a.state})));return{...i,cells:l,path:[...i.path,v]}})})(m,S),{...r,path:[],visitedNodes:[]}}return r})},setPath:t=>{e(r=>{const s=r.cells.map(o=>o.map(d=>({...d,state:t.some(m=>m.row===d.row&&m.col===d.col)?h.Path:d.state})));return{...r,cells:s}})},setVisitedNodes:t=>{e(r=>{const s=r.cells.map(o=>o.map(d=>({...d,state:t.some(m=>m.row===d.row&&m.col===d.col)&&d.state===h.Empty?h.Visited:d.state})));return{...r,cells:s}})}}),fe=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)})),ge="",he=()=>{var l;const{cells:e,activeButton:t,setCellState:r,setSelectedButtonState:s,visitedNodes:o,path:d}=K(),[m,S]=C.useState({width:0,height:0}),w=C.useRef(null);C.useEffect(()=>{const n=()=>{if(w.current){const a=w.current.getBoundingClientRect();S({width:a.width,height:a.height})}};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]);const f=(n,a)=>{switch(r(n,a,t),t){case h.Start:s(h.End);break;case h.End:s(h.Obstacle);break}},c=(n,a)=>{const p=o.find(E=>E.row===n&&E.col===a);return p?{g:p.g,h:p.h,f:p.f}:{g:null,h:null,f:null}},i=(()=>{var b;if(!m.width||!m.height)return 20;const n=((b=e[0])==null?void 0:b.length)||1,a=e.length||1,p=20,E=n+a,y=m.width-p-E,O=m.height-p-E,N=y/n,D=O/a,g=Math.min(N,D);return Math.max(15,Math.min(g,60))})();return u.jsx("div",{className:"grid-wrapper",ref:w,children:u.jsx("div",{className:"grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${((l=e[0])==null?void 0:l.length)||1}, ${i}px)`,gridTemplateRows:`repeat(${e.length||1}, ${i}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((n,a)=>n.map((p,E)=>{const y=d.some(_=>_.row===p.row&&_.col===p.col),O=o.some(_=>_.row===p.row&&_.col===p.col),{g:N,h:D,f:g}=c(p.row,p.col);let b=pe(p,O);if(y){const _=d.findIndex(R=>R.row===p.row&&R.col===p.col);_===0?b="var(--cell-start)":_===d.length-1?b="var(--cell-end)":b="var(--cell-path)"}return u.jsxs("div",{className:"grid-cell",onClick:()=>f(a,E),style:{width:i,height:i,backgroundColor:b,border:"1px solid var(--cell-border)",cursor:"pointer",transition:"all 0.15s ease",position:"relative",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"2px"},onMouseEnter:_=>{p.state===h.Empty&&(_.currentTarget.style.backgroundColor="var(--bg-tertiary)",_.currentTarget.style.transform="scale(1.02)")},onMouseLeave:_=>{p.state===h.Empty&&(_.currentTarget.style.backgroundColor=b,_.currentTarget.style.transform="scale(1)")},children:[O&&u.jsxs("div",{className:"cell-values",children:[u.jsxs("div",{className:"value-h",children:["h",D]}),u.jsxs("div",{className:"value-f",children:["f",g]}),u.jsxs("div",{className:"value-g",children:["g",N]})]}),p.state===h.Start&&u.jsx("div",{className:"cell-indicator start",children:"●"}),p.state===h.End&&u.jsx("div",{className:"cell-indicator end",children:"●"}),p.state===h.Obstacle&&u.jsx("div",{className:"cell-indicator obstacle",children:"■"})]},`${a}-${E}`)}))})})},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){case h.Start:return"var(--cell-start)";case h.End:return"var(--cell-end)";case h.Obstacle:return"var(--cell-obstacle)";case h.Empty:return"var(--cell-empty)";default:return"var(--cell-empty)"}},be="",ve=()=>{const{activeButton:e,setSelectedButtonState:t,resetCells:r,rows:s,columns:o,setNumberOfRows:d,setNumberOfColumns:m,handleFindPath:S,canTravelDiagonally:w,setCanTravelDiagonally:f}=K(),[c,v]=C.useState(()=>{const E=localStorage.getItem("darkMode");return E?JSON.parse(E):!1});C.useEffect(()=>{localStorage.setItem("darkMode",JSON.stringify(c)),document.documentElement.setAttribute("data-theme",c?"dark":"light")},[c]);const i=()=>{v(!c)},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}],n=E=>{E===null?a():t(E)},a=()=>{r(),t(h.Start)},p=()=>{S(w)};return u.jsx("div",{className:"control-panel",children:u.jsxs("div",{className:"control-grid",children:[u.jsxs("div",{className:"control-group tools",children:[u.jsx("h3",{className:"group-title",children:"Tools"}),u.jsx("div",{className:"button-group",children:l.map((E,y)=>u.jsx("button",{className:`control-button ${E.label.toLowerCase()} ${e===E.state?"active":""}`,onClick:()=>n(E.state),children:E.label},y))})]}),u.jsxs("div",{className:"control-group actions",children:[u.jsx("h3",{className:"group-title",children:"Actions"}),u.jsxs("div",{className:"button-group",children:[u.jsx("button",{className:"control-button find-path",onClick:p,children:"Find Path"}),u.jsx("button",{className:`control-button diagonal ${w?"active":""}`,onClick:()=>f(!w),children:w?"Diagonal On":"Diagonal Off"}),u.jsx("button",{className:`control-button theme-toggle ${c?"active":""}`,onClick:i,title:c?"Switch to light mode":"Switch to dark mode",children:c?"☀️ Light":"🌙 Dark"})]})]}),u.jsxs("div",{className:"control-group size",children:[u.jsx("h3",{className:"group-title",children:"Grid Size"}),u.jsxs("div",{className:"size-controls",children:[u.jsxs("div",{className:"size-control",children:[u.jsx("label",{className:"size-label",children:"Rows"}),u.jsxs("div",{className:"size-buttons",children:[u.jsx("button",{className:"size-button",onClick:()=>d(Math.max(5,s-1)),disabled:s<=5,children:"−"}),u.jsx("span",{className:"size-value",children:s}),u.jsx("button",{className:"size-button",onClick:()=>d(Math.min(50,s+1)),disabled:s>=50,children:"+"})]})]}),u.jsxs("div",{className:"size-control",children:[u.jsx("label",{className:"size-label",children:"Columns"}),u.jsxs("div",{className:"size-buttons",children:[u.jsx("button",{className:"size-button",onClick:()=>m(Math.max(5,o-1)),disabled:o<=5,children:"−"}),u.jsx("span",{className:"size-value",children:o}),u.jsx("button",{className:"size-button",onClick:()=>m(Math.min(50,o+1)),disabled:o>=50,children:"+"})]})]})]})]})]})})},U=()=>u.jsx("div",{className:"astar-visualizer-root",children:u.jsxs("div",{className:"app-container",children:[u.jsx("header",{className:"app-header",children:u.jsx("h1",{className:"app-title",children:"A* Pathfinding"})}),u.jsx("main",{className:"app-main",children:u.jsx(he,{})}),u.jsx("footer",{className:"app-footer",children:u.jsx(ve,{})})]})});function me(){return u.jsx(U,{})}T.AStarVisualizer=me,T.CellState=h,T.Layout=U,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
+ */var H;function Z(){return H||(H=1,process.env.NODE_ENV!=="production"&&function(){function e(f,d){return f===d&&(f!==0||1/f===1/d)||f!==f&&d!==d}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=T,r=G(),a=typeof Object.is=="function"?Object.is:e,o=r.useSyncExternalStore,l=t.useRef,m=t.useEffect,E=t.useMemo,w=t.useDebugValue;k.useSyncExternalStoreWithSelector=function(f,d,v,i,c){var n=l(null);if(n.current===null){var s={hasValue:!1,value:null};n.current=s}else s=n.current;n=E(function(){function S(g){if(!y){if(y=!0,O=g,g=i(g),c!==void 0&&s.hasValue){var b=s.value;if(c(b,g))return N=b}return N=g}if(b=N,a(O,g))return b;var _=i(g);return c!==void 0&&c(b,_)?(O=g,b):(O=g,N=_)}var y=!1,O,N,L=v===void 0?null:v;return[function(){return S(d())},L===null?void 0:function(){return S(L())}]},[d,v,i,c]);var p=o(f,n[0],n[1]);return m(function(){s.hasValue=!0,s.value=p},[p]),w(p),p},typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),k}process.env.NODE_ENV==="production"?D.exports=X():D.exports=Z();var $=D.exports;const ee=q($),{useDebugValue:te}=T,{useSyncExternalStoreWithSelector:re}=ee;let we=!1;const oe=e=>e;function ne(e,t=oe,r){const a=re(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,r);return te(a),a}const F=e=>{const t=typeof e=="function"?J(e):e,r=(a,o)=>ne(t,a,o);return Object.assign(r,t),r},se=e=>e?F(e):F;var h=(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 P=(e,t)=>{const r=Math.abs(e.row-t.row),a=Math.abs(e.col-t.col);return Math.floor(10*Math.sqrt(r*r+a*a))},ae=(e,t)=>({row:e.row,col:e.col,g:0,h:P(e,t),f:P(e,t),parent:null}),le=(e,t,r)=>{const a=[{row:e.row-1,col:e.col},{row:e.row+1,col:e.col},{row:e.row,col:e.col-1},{row:e.row,col:e.col+1}];return r&&a.push({row:e.row-1,col:e.col-1},{row:e.row-1,col:e.col+1},{row:e.row+1,col:e.col-1},{row:e.row+1,col:e.col+1}),a.filter(o=>o.row>=0&&o.row<t.length&&o.col>=0&&o.col<t[0].length&&t[o.row][o.col].state!==h.Obstacle).map(o=>({row:o.row,col:o.col,state:t[o.row][o.col].state}))},ce=(e,t,r)=>{const a=Math.abs(e.row-t.row),o=Math.abs(e.col-t.col),l=e.g+(a===0||o===0?10:14),m=P(t,r),E=l+m;return{g:l,h:m,f:E}},ie=e=>{const t=[];let r=e;for(;r;)t.push(r),r=r.parent;return t.reverse()},ue=(e,t,r,a)=>{const o=[],l=[],m=ae(t,r);for(o.push(m);o.length>0;){o.sort((f,d)=>f.f-d.f);const E=o.shift();if(E.row===r.row&&E.col===r.col)return l.push(E),{path:ie(E),visitedNodes:l};l.push(E);const w=le(E,e,a);for(const f of w){if(l.some(n=>n.row===f.row&&n.col===f.col))continue;const{g:d,h:v,f:i}=ce(E,f,r),c=o.find(n=>n.row===f.row&&n.col===f.col);if(!c||d<c.g){const n={row:f.row,col:f.col,g:d,h:v,f:i,parent:E};c?(c.g=d,c.f=i,c.parent=E):o.push(n)}}}return{path:[],visitedNodes:l}},de=e=>({cells:Array.from({length:8},(t,r)=>Array.from({length:12},(a,o)=>({row:r,col:o,state:h.Empty}))),rows:8,columns:12,startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[],setNumberOfColumns:t=>{e(r=>{const a=r.cells.map(o=>t>r.columns?[...o,...Array.from({length:t-r.columns},(l,m)=>({row:o[0].row,col:r.columns+m,state:h.Empty}))]:o.slice(0,t));return{...r,columns:t,cells:a}})},setNumberOfRows:t=>{e(r=>{let a=[...r.cells];return t>r.rows?a=[...a,...Array.from({length:t-r.rows},(o,l)=>Array.from({length:r.columns},(m,E)=>({row:r.rows+l,col:E,state:h.Empty})))]:a=a.slice(0,t),{...r,rows:t,cells:a}})},setCellState:(t,r,a)=>{e(o=>{const l=o.cells.map(f=>f.map(d=>({...d})));let m=o.startTile,E=o.endTile,w=[...o.obstacleTiles];switch(a===h.Start&&o.startTile&&(l[o.startTile.row][o.startTile.col].state=h.Empty,m=null),a===h.End&&o.endTile&&(l[o.endTile.row][o.endTile.col].state=h.Empty,E=null),l[t][r].state=a,a){case h.Start:m={row:t,col:r};break;case h.End:E={row:t,col:r};break;case h.Obstacle:w.some(f=>f.row===t&&f.col===r)||w.push({row:t,col:r});break;case h.Empty:w=w.filter(f=>!(f.row===t&&f.col===r));break}return{...o,cells:l,startTile:m,endTile:E,obstacleTiles:w}})},resetCells:()=>{e(t=>({...t,cells:t.cells.map(r=>r.map(a=>({...a,state:h.Empty}))),startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[]}))},handleFindPath:t=>{e(r=>{const a=r.cells.flat().find(l=>l.state===h.Start),o=r.cells.flat().find(l=>l.state===h.End);if(a&&o){const l=r.cells.map(f=>f.map(d=>({row:d.row,col:d.col,state:d.state}))),{path:m,visitedNodes:E}=ue(l,a,o,t);return(async(f,d)=>{for(let v of d)await new Promise(i=>setTimeout(i,100)),e(i=>{const c=i.cells.map(n=>n.map(s=>({...s,state:v.row===s.row&&v.col===s.col&&s.state===h.Empty?h.Visited:s.state})));return{...i,cells:c,visitedNodes:[...i.visitedNodes,v]}});for(let v of f)await new Promise(i=>setTimeout(i,250)),e(i=>{const c=i.cells.map(n=>n.map(s=>({...s,state:v.row===s.row&&v.col===s.col?h.Path:s.state})));return{...i,cells:c,path:[...i.path,v]}})})(m,E),{...r,path:[],visitedNodes:[]}}return r})},setPath:t=>{e(r=>{const a=r.cells.map(o=>o.map(l=>({...l,state:t.some(m=>m.row===l.row&&m.col===l.col)?h.Path:l.state})));return{...r,cells:a}})},setVisitedNodes:t=>{e(r=>{const a=r.cells.map(o=>o.map(l=>({...l,state:t.some(m=>m.row===l.row&&m.col===l.col)&&l.state===h.Empty?h.Visited:l.state})));return{...r,cells:a}})}}),fe=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)})),ge="",he=()=>{var c;const{cells:e,activeButton:t,setCellState:r,setSelectedButtonState:a,visitedNodes:o,path:l}=K(),[m,E]=T.useState({width:0,height:0}),w=T.useRef(null);T.useEffect(()=>{const n=()=>{if(w.current){const s=w.current.getBoundingClientRect();E({width:s.width,height:s.height})}};return n(),window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]);const f=(n,s)=>{switch(r(n,s,t),t){case h.Start:a(h.End);break;case h.End:a(h.Obstacle);break}},d=(n,s)=>{const p=o.find(S=>S.row===n&&S.col===s);return p?{g:p.g,h:p.h,f:p.f}:{g:null,h:null,f:null}},i=(()=>{var b;if(!m.width||!m.height)return 20;const n=((b=e[0])==null?void 0:b.length)||1,s=e.length||1,p=20,S=n+s,y=m.width-p-S,O=m.height-p-S,N=y/n,L=O/s,g=Math.min(N,L);return Math.max(15,Math.min(g,60))})();return u.jsx("div",{className:"grid-wrapper",ref:w,children:u.jsx("div",{className:"grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${((c=e[0])==null?void 0:c.length)||1}, ${i}px)`,gridTemplateRows:`repeat(${e.length||1}, ${i}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((n,s)=>n.map((p,S)=>{const y=l.some(_=>_.row===p.row&&_.col===p.col),O=o.some(_=>_.row===p.row&&_.col===p.col),{g:N,h:L,f:g}=d(p.row,p.col);let b=pe(p,O);if(y){const _=l.findIndex(R=>R.row===p.row&&R.col===p.col);_===0?b="var(--cell-start)":_===l.length-1?b="var(--cell-end)":b="var(--cell-path)"}return u.jsxs("div",{className:"grid-cell",onClick:()=>f(s,S),style:{width:i,height:i,backgroundColor:b,border:"1px solid var(--cell-border)",cursor:"pointer",transition:"all 0.15s ease",position:"relative",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"2px"},onMouseEnter:_=>{p.state===h.Empty&&(_.currentTarget.style.backgroundColor="var(--bg-tertiary)",_.currentTarget.style.transform="scale(1.02)")},onMouseLeave:_=>{p.state===h.Empty&&(_.currentTarget.style.backgroundColor=b,_.currentTarget.style.transform="scale(1)")},children:[O&&u.jsxs("div",{className:"cell-values",children:[u.jsxs("div",{className:"value-h",children:["h",L]}),u.jsxs("div",{className:"value-f",children:["f",g]}),u.jsxs("div",{className:"value-g",children:["g",N]})]}),p.state===h.Start&&u.jsx("div",{className:"cell-indicator start",children:"●"}),p.state===h.End&&u.jsx("div",{className:"cell-indicator end",children:"●"}),p.state===h.Obstacle&&u.jsx("div",{className:"cell-indicator obstacle",children:"■"})]},`${s}-${S}`)}))})})},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){case h.Start:return"var(--cell-start)";case h.End:return"var(--cell-end)";case h.Obstacle:return"var(--cell-obstacle)";case h.Empty:return"var(--cell-empty)";default:return"var(--cell-empty)"}},be="",ve=({isDarkMode:e,setIsDarkMode:t})=>{const{activeButton:r,setSelectedButtonState:a,resetCells:o,rows:l,columns:m,setNumberOfRows:E,setNumberOfColumns:w,handleFindPath:f,canTravelDiagonally:d,setCanTravelDiagonally:v}=K(),i=()=>{t(!e)},c=[{label:"Start",state:h.Start},{label:"End",state:h.End},{label:"Obstacle",state:h.Obstacle},{label:"Clear",state:h.Empty},{label:"Reset",state:null}],n=S=>{S===null?s():a(S)},s=()=>{o(),a(h.Start)},p=()=>{f(d)};return u.jsx("div",{className:"control-panel",children:u.jsxs("div",{className:"control-grid",children:[u.jsxs("div",{className:"control-group tools",children:[u.jsx("h3",{className:"group-title",children:"Tools"}),u.jsx("div",{className:"button-group",children:c.map((S,y)=>u.jsx("button",{className:`control-button ${S.label.toLowerCase()} ${r===S.state?"active":""}`,onClick:()=>n(S.state),children:S.label},y))})]}),u.jsxs("div",{className:"control-group actions",children:[u.jsx("h3",{className:"group-title",children:"Actions"}),u.jsxs("div",{className:"button-group",children:[u.jsx("button",{className:"control-button find-path",onClick:p,children:"Find Path"}),u.jsx("button",{className:`control-button diagonal ${d?"active":""}`,onClick:()=>v(!d),children:d?"Diagonal On":"Diagonal Off"}),u.jsx("button",{className:`control-button theme-toggle ${e?"active":""}`,onClick:i,title:e?"Switch to light mode":"Switch to dark mode",children:e?"☀️ Light":"🌙 Dark"})]})]}),u.jsxs("div",{className:"control-group size",children:[u.jsx("h3",{className:"group-title",children:"Grid Size"}),u.jsxs("div",{className:"size-controls",children:[u.jsxs("div",{className:"size-control",children:[u.jsx("label",{className:"size-label",children:"Rows"}),u.jsxs("div",{className:"size-buttons",children:[u.jsx("button",{className:"size-button",onClick:()=>E(Math.max(5,l-1)),disabled:l<=5,children:"−"}),u.jsx("span",{className:"size-value",children:l}),u.jsx("button",{className:"size-button",onClick:()=>E(Math.min(50,l+1)),disabled:l>=50,children:"+"})]})]}),u.jsxs("div",{className:"size-control",children:[u.jsx("label",{className:"size-label",children:"Columns"}),u.jsxs("div",{className:"size-buttons",children:[u.jsx("button",{className:"size-button",onClick:()=>w(Math.max(5,m-1)),disabled:m<=5,children:"−"}),u.jsx("span",{className:"size-value",children:m}),u.jsx("button",{className:"size-button",onClick:()=>w(Math.min(50,m+1)),disabled:m>=50,children:"+"})]})]})]})]})]})})},U=({defaultDarkMode:e})=>{const t=T.useRef(null),[r,a]=T.useState(()=>{if(e!==void 0)return e;const o=localStorage.getItem("astar-darkMode");return o?JSON.parse(o):!1});return T.useEffect(()=>{e===void 0&&localStorage.setItem("astar-darkMode",JSON.stringify(r)),t.current&&t.current.setAttribute("data-theme",r?"dark":"light")},[r,e]),u.jsx("div",{ref:t,className:"astar-visualizer-root","data-theme":r?"dark":"light",children:u.jsxs("div",{className:"app-container",children:[u.jsx("header",{className:"app-header",children:u.jsx("h1",{className:"app-title",children:"A* Pathfinding"})}),u.jsx("main",{className:"app-main",children:u.jsx(he,{})}),u.jsx("footer",{className:"app-footer",children:u.jsx(ve,{isDarkMode:r,setIsDarkMode:a})})]})})};function me({defaultDarkMode:e}){return u.jsx(U,{defaultDarkMode:e})}C.AStarVisualizer=me,C.CellState=h,C.Layout=U,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;--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%}[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;--primary: #2196f3;--primary-hover: #1976d2;--success: #4caf50;--success-hover: #388e3c;--danger: #f44336;--danger-hover: #d32f2f;--warning: #ff9800;--warning-hover: #f57c00}*{box-sizing:border-box;margin:0;padding:0}html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}#root{width:100%;height:100%;margin:0;padding:0}*,*:before,*: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 .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;--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;--primary: #2196f3;--primary-hover: #1976d2;--success: #4caf50;--success-hover: #388e3c;--danger: #f44336;--danger-hover: #d32f2f;--warning: #ff9800;--warning-hover: #f57c00}.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 .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.6",
+  "version": "1.0.7",
   "type": "module",
   "description": "A React component for visualizing A* pathfinding algorithm",
   "main": "./dist/astar-visualizer.umd.cjs",