astar-visualizer 1.0.1 → 1.0.3

package/dist/astar-visualizer.js

@@ -1,4 +1,4 @@
-import { jsx as S, jsxs as y } from "react/jsx-runtime";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
 import D, { useState as $, useEffect as H } from "react";
 const x = (e) => {
   let t;
@@ -37,16 +37,16 @@ function J() {
   }
   var r = typeof Object.is == "function" ? Object.is : t, l = e.useState, o = e.useEffect, i = e.useLayoutEffect, m = e.useDebugValue;
   function p(f, u) {
-    var s = u(), a = l({ inst: { value: s, getSnapshot: u } }), n = a[0].inst, v = a[1];
+    var s = u(), a = l({ inst: { value: s, getSnapshot: u } }), n = a[0].inst, w = a[1];
     return i(
       function() {
-        n.value = s, n.getSnapshot = u, g(n) && v({ inst: n });
+        n.value = s, n.getSnapshot = u, g(n) && w({ inst: n });
       },
       [f, s, u]
     ), o(
       function() {
-        return g(n) && v({ inst: n }), f(function() {
-          g(n) && v({ inst: n });
+        return g(n) && w({ inst: n }), f(function() {
+          g(n) && w({ inst: n });
         });
       },
       [f]
@@ -90,24 +90,24 @@ function Y() {
       ));
       var n = a();
       if (!f) {
-        var v = a();
-        i(n, v) || (console.error(
+        var w = a();
+        i(n, w) || (console.error(
           "The result of getSnapshot should be cached to avoid an infinite loop"
         ), f = !0);
       }
-      v = m({
+      w = m({
         inst: { value: n, getSnapshot: a }
       });
-      var w = v[0].inst, _ = v[1];
+      var E = w[0].inst, _ = w[1];
       return g(
         function() {
-          w.value = n, w.getSnapshot = a, r(w) && _({ inst: w });
+          E.value = n, E.getSnapshot = a, r(E) && _({ inst: E });
         },
         [s, n, a]
       ), p(
         function() {
-          return r(w) && _({ inst: w }), s(function() {
-            r(w) && _({ inst: w });
+          return r(E) && _({ inst: E }), s(function() {
+            r(E) && _({ inst: E });
           });
         },
         [s]
@@ -163,39 +163,39 @@ function Q() {
       n = a.current;
     a = p(
       function() {
-        function w(b) {
+        function E(b) {
           if (!_) {
             if (_ = !0, O = b, b = u(b), s !== void 0 && n.hasValue) {
-              var E = n.value;
-              if (s(E, b))
-                return N = E;
+              var S = n.value;
+              if (s(S, b))
+                return N = S;
             }
             return N = b;
           }
-          if (E = N, l(O, b))
-            return E;
+          if (S = N, l(O, b))
+            return S;
           var T = u(b);
-          return s !== void 0 && s(E, T) ? (O = b, E) : (O = b, N = T);
+          return s !== void 0 && s(S, T) ? (O = b, S) : (O = b, N = T);
         }
         var _ = !1, O, N, C = f === void 0 ? null : f;
         return [
           function() {
-            return w(c());
+            return E(c());
           },
           C === null ? void 0 : function() {
-            return w(C());
+            return E(C());
           }
         ];
       },
       [c, f, u, s]
     );
-    var v = o(d, a[0], a[1]);
+    var w = o(d, a[0], a[1]);
     return m(
       function() {
-        n.hasValue = !0, n.value = v;
+        n.hasValue = !0, n.value = w;
       },
-      [v]
-    ), g(v), v;
+      [w]
+    ), g(w), w;
   }, R;
 }
 var z = {};
@@ -225,39 +225,39 @@ function X() {
         n = a.current;
       a = p(
         function() {
-          function w(b) {
+          function E(b) {
             if (!_) {
               if (_ = !0, O = b, b = u(b), s !== void 0 && n.hasValue) {
-                var E = n.value;
-                if (s(E, b))
-                  return N = E;
+                var S = n.value;
+                if (s(S, b))
+                  return N = S;
               }
               return N = b;
             }
-            if (E = N, l(O, b))
-              return E;
+            if (S = N, l(O, b))
+              return S;
             var T = u(b);
-            return s !== void 0 && s(E, T) ? (O = b, E) : (O = b, N = T);
+            return s !== void 0 && s(S, T) ? (O = b, S) : (O = b, N = T);
           }
           var _ = !1, O, N, C = f === void 0 ? null : f;
           return [
             function() {
-              return w(c());
+              return E(c());
             },
             C === null ? void 0 : function() {
-              return w(C());
+              return E(C());
             }
           ];
         },
         [c, f, u, s]
       );
-      var v = o(d, a[0], a[1]);
+      var w = o(d, a[0], a[1]);
       return m(
         function() {
-          n.hasValue = !0, n.value = v;
+          n.hasValue = !0, n.value = w;
         },
-        [v]
-      ), g(v), v;
+        [w]
+      ), g(w), w;
     }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
   }()), z;
 }
@@ -549,14 +549,14 @@ const he = () => {
         break;
     }
   }, d = (s, a) => {
-    const n = o.find((v) => v.row === s && v.col === a);
+    const n = o.find((w) => w.row === s && w.col === a);
     return n ? { g: n.g, h: n.h, f: n.f } : { g: null, h: null, f: null };
   }, f = (() => {
     var T;
-    const s = m.width < 768, a = m.width < 1024, n = s ? Math.min(m.width * 0.98, 500) : a ? Math.min(m.width * 0.95, 800) : Math.min(m.width * 0.9, 1e3), v = s ? Math.min(m.height * 0.75, 500) : a ? Math.min(m.height * 0.8, 700) : Math.min(m.height * 0.85, 800), w = ((T = e[0]) == null ? void 0 : T.length) || 1, _ = e.length || 1, O = s ? 16 : 24, N = (n - O) / w, C = (v - O) / _;
+    const s = m.width < 768, a = m.width < 1024, n = s ? Math.min(m.width * 0.98, 500) : a ? Math.min(m.width * 0.95, 800) : Math.min(m.width * 0.9, 1e3), w = s ? Math.min(m.height * 0.75, 500) : a ? Math.min(m.height * 0.8, 700) : Math.min(m.height * 0.85, 800), E = ((T = e[0]) == null ? void 0 : T.length) || 1, _ = e.length || 1, O = s ? 16 : 24, N = (n - O) / E, C = (w - O) / _;
     return Math.max(s ? 30 : 40, Math.min(N, C, s ? 50 : a ? 70 : 90));
   })();
-  return /* @__PURE__ */ S("div", { className: "grid-wrapper", children: /* @__PURE__ */ S(
+  return /* @__PURE__ */ v("div", { className: "grid-wrapper", children: /* @__PURE__ */ v(
     "div",
     {
       className: "grid-container",
@@ -572,18 +572,18 @@ const he = () => {
         border: "1px solid var(--border-color)"
       },
       children: e.map(
-        (s, a) => s.map((n, v) => {
-          const w = i.some((E) => E.row === n.row && E.col === n.col), _ = o.some((E) => E.row === n.row && E.col === n.col), { g: O, h: N, f: C } = d(n.row, n.col);
+        (s, a) => s.map((n, w) => {
+          const E = i.some((S) => S.row === n.row && S.col === n.col), _ = o.some((S) => S.row === n.row && S.col === n.col), { g: O, h: N, f: C } = d(n.row, n.col);
           let b = me(n, _);
-          if (w) {
-            const E = i.findIndex((T) => T.row === n.row && T.col === n.col);
-            E === 0 ? b = "var(--cell-start)" : E === i.length - 1 ? b = "var(--cell-end)" : b = "var(--cell-path)";
+          if (E) {
+            const S = i.findIndex((T) => T.row === n.row && T.col === n.col);
+            S === 0 ? b = "var(--cell-start)" : S === i.length - 1 ? b = "var(--cell-end)" : b = "var(--cell-path)";
           }
           return /* @__PURE__ */ y(
             "div",
             {
               className: "grid-cell",
-              onClick: () => g(a, v),
+              onClick: () => g(a, w),
               style: {
                 width: f,
                 height: f,
@@ -597,11 +597,11 @@ const he = () => {
                 alignItems: "center",
                 borderRadius: "2px"
               },
-              onMouseEnter: (E) => {
-                n.state === h.Empty && (E.currentTarget.style.backgroundColor = "var(--bg-tertiary)", E.currentTarget.style.transform = "scale(1.02)");
+              onMouseEnter: (S) => {
+                n.state === h.Empty && (S.currentTarget.style.backgroundColor = "var(--bg-tertiary)", S.currentTarget.style.transform = "scale(1.02)");
               },
-              onMouseLeave: (E) => {
-                n.state === h.Empty && (E.currentTarget.style.backgroundColor = b, E.currentTarget.style.transform = "scale(1)");
+              onMouseLeave: (S) => {
+                n.state === h.Empty && (S.currentTarget.style.backgroundColor = b, S.currentTarget.style.transform = "scale(1)");
               },
               children: [
                 _ && /* @__PURE__ */ y("div", { className: "cell-values", children: [
@@ -618,12 +618,12 @@ const he = () => {
                     O
                   ] })
                 ] }),
-                n.state === h.Start && /* @__PURE__ */ S("div", { className: "cell-indicator start", children: "●" }),
-                n.state === h.End && /* @__PURE__ */ S("div", { className: "cell-indicator end", children: "●" }),
-                n.state === h.Obstacle && /* @__PURE__ */ S("div", { className: "cell-indicator obstacle", children: "■" })
+                n.state === h.Start && /* @__PURE__ */ v("div", { className: "cell-indicator start", children: "●" }),
+                n.state === h.End && /* @__PURE__ */ v("div", { className: "cell-indicator end", children: "●" }),
+                n.state === h.Obstacle && /* @__PURE__ */ v("div", { className: "cell-indicator obstacle", children: "■" })
               ]
             },
-            `${a}-${v}`
+            `${a}-${w}`
           );
         })
       )
@@ -658,8 +658,8 @@ const pe = () => {
     canTravelDiagonally: g,
     setCanTravelDiagonally: d
   } = K(), [c, f] = $(() => {
-    const w = localStorage.getItem("darkMode");
-    return w ? JSON.parse(w) : !1;
+    const E = localStorage.getItem("darkMode");
+    return E ? JSON.parse(E) : !1;
   });
   H(() => {
     localStorage.setItem("darkMode", JSON.stringify(c)), document.documentElement.setAttribute("data-theme", c ? "dark" : "light");
@@ -672,38 +672,38 @@ const pe = () => {
     { label: "Obstacle", state: h.Obstacle },
     { label: "Clear", state: h.Empty },
     { label: "Reset", state: null }
-  ], a = (w) => {
-    w === null ? n() : t(w);
+  ], a = (E) => {
+    E === null ? n() : t(E);
   }, n = () => {
     r(), t(h.Start);
-  }, v = () => {
+  }, w = () => {
     p(g);
   };
-  return /* @__PURE__ */ S("div", { className: "control-panel", children: /* @__PURE__ */ y("div", { className: "control-grid", children: [
+  return /* @__PURE__ */ v("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: s.map((w, _) => /* @__PURE__ */ S(
+      /* @__PURE__ */ v("h3", { className: "group-title", children: "Tools" }),
+      /* @__PURE__ */ v("div", { className: "button-group", children: s.map((E, _) => /* @__PURE__ */ v(
         "button",
         {
-          className: `control-button ${w.label.toLowerCase()} ${e === w.state ? "active" : ""}`,
-          onClick: () => a(w.state),
-          children: w.label
+          className: `control-button ${E.label.toLowerCase()} ${e === E.state ? "active" : ""}`,
+          onClick: () => a(E.state),
+          children: E.label
         },
         _
       )) })
     ] }),
     /* @__PURE__ */ y("div", { className: "control-group actions", children: [
-      /* @__PURE__ */ S("h3", { className: "group-title", children: "Actions" }),
+      /* @__PURE__ */ v("h3", { className: "group-title", children: "Actions" }),
       /* @__PURE__ */ y("div", { className: "button-group", children: [
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ v(
           "button",
           {
             className: "control-button find-path",
-            onClick: v,
+            onClick: w,
             children: "Find Path"
           }
         ),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ v(
           "button",
           {
             className: `control-button diagonal ${g ? "active" : ""}`,
@@ -711,7 +711,7 @@ const pe = () => {
             children: g ? "Diagonal On" : "Diagonal Off"
           }
         ),
-        /* @__PURE__ */ S(
+        /* @__PURE__ */ v(
           "button",
           {
             className: `control-button theme-toggle ${c ? "active" : ""}`,
@@ -723,12 +723,12 @@ const pe = () => {
       ] })
     ] }),
     /* @__PURE__ */ y("div", { className: "control-group size", children: [
-      /* @__PURE__ */ S("h3", { className: "group-title", children: "Grid Size" }),
+      /* @__PURE__ */ v("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__ */ v("label", { className: "size-label", children: "Rows" }),
           /* @__PURE__ */ y("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ S(
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
@@ -737,8 +737,8 @@ const pe = () => {
                 children: "−"
               }
             ),
-            /* @__PURE__ */ S("span", { className: "size-value", children: l }),
-            /* @__PURE__ */ S(
+            /* @__PURE__ */ v("span", { className: "size-value", children: l }),
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
@@ -750,9 +750,9 @@ const pe = () => {
           ] })
         ] }),
         /* @__PURE__ */ y("div", { className: "size-control", children: [
-          /* @__PURE__ */ S("label", { className: "size-label", children: "Columns" }),
+          /* @__PURE__ */ v("label", { className: "size-label", children: "Columns" }),
           /* @__PURE__ */ y("div", { className: "size-buttons", children: [
-            /* @__PURE__ */ S(
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
@@ -761,8 +761,8 @@ const pe = () => {
                 children: "−"
               }
             ),
-            /* @__PURE__ */ S("span", { className: "size-value", children: o }),
-            /* @__PURE__ */ S(
+            /* @__PURE__ */ v("span", { className: "size-value", children: o }),
+            /* @__PURE__ */ v(
               "button",
               {
                 className: "size-button",
@@ -776,13 +776,13 @@ const pe = () => {
       ] })
     ] })
   ] }) });
-}, ve = () => /* @__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(he, {}) }),
-  /* @__PURE__ */ S("footer", { className: "app-footer", children: /* @__PURE__ */ S(pe, {}) })
-] });
+}, ve = () => /* @__PURE__ */ v("div", { className: "astar-visualizer-root", children: /* @__PURE__ */ y("div", { className: "app-container", children: [
+  /* @__PURE__ */ v("header", { className: "app-header", children: /* @__PURE__ */ v("h1", { className: "app-title", children: "A* Pathfinding" }) }),
+  /* @__PURE__ */ v("main", { className: "app-main", children: /* @__PURE__ */ v(he, {}) }),
+  /* @__PURE__ */ v("footer", { className: "app-footer", children: /* @__PURE__ */ v(pe, {}) })
+] }) });
 function Se() {
-  return /* @__PURE__ */ S(ve, {});
+  return /* @__PURE__ */ v(ve, {});
 }
 export {
   Se as AStarVisualizer,

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 ve="",we="",P=e=>{let t;const r=new Set,l=(i,h)=>{const d=typeof i=="function"?i(t):i;if(!Object.is(d,t)){const s=t;t=h??(typeof d!="object"||d===null)?d:Object.assign({},t,d),r.forEach(a=>a(t,s))}},o=()=>t,g={setState:l,getState:o,getInitialState:()=>f,subscribe:i=>(r.add(i),()=>r.delete(i)),destroy:()=>{r.clear()}},f=t=e(l,o,g);return g},R=e=>e?P(e):P;function q(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}},M={},L={exports:{}},z={};/**
+(function(T,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],c):(T=typeof globalThis<"u"?globalThis:T||self,c(T.AStarVisualizer={},T["react/jsx-runtime"],T.React))})(this,function(T,c,C){"use strict";const ve="",we="",P=e=>{let t;const r=new Set,l=(u,h)=>{const d=typeof u=="function"?u(t):u;if(!Object.is(d,t)){const s=t;t=h??(typeof d!="object"||d===null)?d:Object.assign({},t,d),r.forEach(a=>a(t,s))}},o=()=>t,g={setState:l,getState:o,getInitialState:()=>f,subscribe:u=>(r.add(u),()=>r.delete(u)),destroy:()=>{r.clear()}},f=t=e(l,o,g);return g},R=e=>e?P(e):P;function q(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}},M={},L={exports:{}},z={};/**
  * @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 B;function J(){if(B)return z;B=1;var e=C;function t(h,d){return h===d&&(h!==0||1/h===1/d)||h!==h&&d!==d}var r=typeof Object.is=="function"?Object.is:t,l=e.useState,o=e.useEffect,c=e.useLayoutEffect,m=e.useDebugValue;function v(h,d){var s=d(),a=l({inst:{value:s,getSnapshot:d}}),n=a[0].inst,w=a[1];return c(function(){n.value=s,n.getSnapshot=d,g(n)&&w({inst:n})},[h,s,d]),o(function(){return g(n)&&w({inst:n}),h(function(){g(n)&&w({inst:n})})},[h]),m(s),s}function g(h){var d=h.getSnapshot;h=h.value;try{var s=d();return!r(h,s)}catch{return!0}}function f(h,d){return d()}var i=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?f:v;return z.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:i,z}var V={};/**
+ */var B;function J(){if(B)return z;B=1;var e=C;function t(h,d){return h===d&&(h!==0||1/h===1/d)||h!==h&&d!==d}var r=typeof Object.is=="function"?Object.is:t,l=e.useState,o=e.useEffect,i=e.useLayoutEffect,m=e.useDebugValue;function v(h,d){var s=d(),a=l({inst:{value:s,getSnapshot:d}}),n=a[0].inst,w=a[1];return i(function(){n.value=s,n.getSnapshot=d,g(n)&&w({inst:n})},[h,s,d]),o(function(){return g(n)&&w({inst:n}),h(function(){g(n)&&w({inst:n})})},[h]),m(s),s}function g(h){var d=h.getSnapshot;h=h.value;try{var s=d();return!r(h,s)}catch{return!0}}function f(h,d){return d()}var u=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?f:v;return z.useSyncExternalStore=e.useSyncExternalStore!==void 0?e.useSyncExternalStore:u,z}var V={};/**
  * @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 j;function Y(){return j||(j=1,process.env.NODE_ENV!=="production"&&function(){function e(s,a){return s===a&&(s!==0||1/s===1/a)||s!==s&&a!==a}function t(s,a){i||o.startTransition===void 0||(i=!0,console.error("You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release."));var n=a();if(!h){var w=a();c(n,w)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),h=!0)}w=m({inst:{value:n,getSnapshot:a}});var S=w[0].inst,_=w[1];return g(function(){S.value=n,S.getSnapshot=a,r(S)&&_({inst:S})},[s,n,a]),v(function(){return r(S)&&_({inst:S}),s(function(){r(S)&&_({inst:S})})},[s]),f(n),n}function r(s){var a=s.getSnapshot;s=s.value;try{var n=a();return!c(s,n)}catch{return!0}}function l(s,a){return a()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var o=C,c=typeof Object.is=="function"?Object.is:e,m=o.useState,v=o.useEffect,g=o.useLayoutEffect,f=o.useDebugValue,i=!1,h=!1,d=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?l:t;V.useSyncExternalStore=o.useSyncExternalStore!==void 0?o.useSyncExternalStore:d,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),V}var I;function W(){return I||(I=1,process.env.NODE_ENV==="production"?L.exports=J():L.exports=Y()),L.exports}/**
+ */var j;function Y(){return j||(j=1,process.env.NODE_ENV!=="production"&&function(){function e(s,a){return s===a&&(s!==0||1/s===1/a)||s!==s&&a!==a}function t(s,a){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 n=a();if(!h){var w=a();i(n,w)||(console.error("The result of getSnapshot should be cached to avoid an infinite loop"),h=!0)}w=m({inst:{value:n,getSnapshot:a}});var S=w[0].inst,_=w[1];return g(function(){S.value=n,S.getSnapshot=a,r(S)&&_({inst:S})},[s,n,a]),v(function(){return r(S)&&_({inst:S}),s(function(){r(S)&&_({inst:S})})},[s]),f(n),n}function r(s){var a=s.getSnapshot;s=s.value;try{var n=a();return!i(s,n)}catch{return!0}}function l(s,a){return a()}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var o=C,i=typeof Object.is=="function"?Object.is:e,m=o.useState,v=o.useEffect,g=o.useLayoutEffect,f=o.useDebugValue,u=!1,h=!1,d=typeof window>"u"||typeof window.document>"u"||typeof window.document.createElement>"u"?l:t;V.useSyncExternalStore=o.useSyncExternalStore!==void 0?o.useSyncExternalStore:d,typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error())}()),V}var I;function W(){return I||(I=1,process.env.NODE_ENV==="production"?L.exports=J():L.exports=Y()),L.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 G;function Q(){if(G)return M;G=1;var e=C,t=W();function r(f,i){return f===i&&(f!==0||1/f===1/i)||f!==f&&i!==i}var l=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,c=e.useRef,m=e.useEffect,v=e.useMemo,g=e.useDebugValue;return M.useSyncExternalStoreWithSelector=function(f,i,h,d,s){var a=c(null);if(a.current===null){var n={hasValue:!1,value:null};a.current=n}else n=a.current;a=v(function(){function S(b){if(!_){if(_=!0,y=b,b=d(b),s!==void 0&&n.hasValue){var E=n.value;if(s(E,b))return O=E}return O=b}if(E=O,l(y,b))return E;var N=d(b);return s!==void 0&&s(E,N)?(y=b,E):(y=b,O=N)}var _=!1,y,O,D=h===void 0?null:h;return[function(){return S(i())},D===null?void 0:function(){return S(D())}]},[i,h,d,s]);var w=o(f,a[0],a[1]);return m(function(){n.hasValue=!0,n.value=w},[w]),g(w),w},M}var k={};/**
+ */var G;function Q(){if(G)return M;G=1;var e=C,t=W();function r(f,u){return f===u&&(f!==0||1/f===1/u)||f!==f&&u!==u}var l=typeof Object.is=="function"?Object.is:r,o=t.useSyncExternalStore,i=e.useRef,m=e.useEffect,v=e.useMemo,g=e.useDebugValue;return M.useSyncExternalStoreWithSelector=function(f,u,h,d,s){var a=i(null);if(a.current===null){var n={hasValue:!1,value:null};a.current=n}else n=a.current;a=v(function(){function S(b){if(!_){if(_=!0,y=b,b=d(b),s!==void 0&&n.hasValue){var E=n.value;if(s(E,b))return O=E}return O=b}if(E=O,l(y,b))return E;var N=d(b);return s!==void 0&&s(E,N)?(y=b,E):(y=b,O=N)}var _=!1,y,O,D=h===void 0?null:h;return[function(){return S(u())},D===null?void 0:function(){return S(D())}]},[u,h,d,s]);var w=o(f,a[0],a[1]);return m(function(){n.hasValue=!0,n.value=w},[w]),g(w),w},M}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 X(){return H||(H=1,process.env.NODE_ENV!=="production"&&function(){function e(f,i){return f===i&&(f!==0||1/f===1/i)||f!==f&&i!==i}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=C,r=W(),l=typeof Object.is=="function"?Object.is:e,o=r.useSyncExternalStore,c=t.useRef,m=t.useEffect,v=t.useMemo,g=t.useDebugValue;k.useSyncExternalStoreWithSelector=function(f,i,h,d,s){var a=c(null);if(a.current===null){var n={hasValue:!1,value:null};a.current=n}else n=a.current;a=v(function(){function S(b){if(!_){if(_=!0,y=b,b=d(b),s!==void 0&&n.hasValue){var E=n.value;if(s(E,b))return O=E}return O=b}if(E=O,l(y,b))return E;var N=d(b);return s!==void 0&&s(E,N)?(y=b,E):(y=b,O=N)}var _=!1,y,O,D=h===void 0?null:h;return[function(){return S(i())},D===null?void 0:function(){return S(D())}]},[i,h,d,s]);var w=o(f,a[0],a[1]);return m(function(){n.hasValue=!0,n.value=w},[w]),g(w),w},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=Q():A.exports=X();var Z=A.exports;const $=q(Z),{useDebugValue:ee}=C,{useSyncExternalStoreWithSelector:te}=$;let Se=!1;const re=e=>e;function oe(e,t=re,r){const l=te(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,r);return ee(l),l}const F=e=>{const t=typeof e=="function"?R(e):e,r=(l,o)=>oe(t,l,o);return Object.assign(r,t),r},ne=e=>e?F(e):F;var p=(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))(p||{});const x=(e,t)=>{const r=Math.abs(e.row-t.row),l=Math.abs(e.col-t.col);return Math.floor(10*Math.sqrt(r*r+l*l))},se=(e,t)=>({row:e.row,col:e.col,g:0,h:x(e,t),f:x(e,t),parent:null}),ae=(e,t,r)=>{const l=[{row:e.row-1,col:e.col},{row:e.row+1,col:e.col},{row:e.row,col:e.col-1},{row:e.row,col:e.col+1}];return r&&l.push({row:e.row-1,col:e.col-1},{row:e.row-1,col:e.col+1},{row:e.row+1,col:e.col-1},{row:e.row+1,col:e.col+1}),l.filter(o=>o.row>=0&&o.row<t.length&&o.col>=0&&o.col<t[0].length&&t[o.row][o.col].state!==p.Obstacle).map(o=>({row:o.row,col:o.col,state:t[o.row][o.col].state}))},le=(e,t,r)=>{const l=Math.abs(e.row-t.row),o=Math.abs(e.col-t.col),c=e.g+(l===0||o===0?10:14),m=x(t,r),v=c+m;return{g:c,h:m,f:v}},ce=e=>{const t=[];let r=e;for(;r;)t.push(r),r=r.parent;return t.reverse()},ie=(e,t,r,l)=>{const o=[],c=[],m=se(t,r);for(o.push(m);o.length>0;){o.sort((f,i)=>f.f-i.f);const v=o.shift();if(v.row===r.row&&v.col===r.col)return c.push(v),{path:ce(v),visitedNodes:c};c.push(v);const g=ae(v,e,l);for(const f of g){if(c.some(a=>a.row===f.row&&a.col===f.col))continue;const{g:i,h,f:d}=le(v,f,r),s=o.find(a=>a.row===f.row&&a.col===f.col);if(!s||i<s.g){const a={row:f.row,col:f.col,g:i,h,f:d,parent:v};s?(s.g=i,s.f=d,s.parent=v):o.push(a)}}}return{path:[],visitedNodes:c}},ue=e=>({cells:Array.from({length:8},(t,r)=>Array.from({length:12},(l,o)=>({row:r,col:o,state:p.Empty}))),rows:8,columns:12,startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[],setNumberOfColumns:t=>{e(r=>{const l=r.cells.map(o=>t>r.columns?[...o,...Array.from({length:t-r.columns},(c,m)=>({row:o[0].row,col:r.columns+m,state:p.Empty}))]:o.slice(0,t));return{...r,columns:t,cells:l}})},setNumberOfRows:t=>{e(r=>{let l=[...r.cells];return t>r.rows?l=[...l,...Array.from({length:t-r.rows},(o,c)=>Array.from({length:r.columns},(m,v)=>({row:r.rows+c,col:v,state:p.Empty})))]:l=l.slice(0,t),{...r,rows:t,cells:l}})},setCellState:(t,r,l)=>{e(o=>{const c=o.cells.map(f=>f.map(i=>({...i})));let m=o.startTile,v=o.endTile,g=[...o.obstacleTiles];switch(l===p.Start&&o.startTile&&(c[o.startTile.row][o.startTile.col].state=p.Empty,m=null),l===p.End&&o.endTile&&(c[o.endTile.row][o.endTile.col].state=p.Empty,v=null),c[t][r].state=l,l){case p.Start:m={row:t,col:r};break;case p.End:v={row:t,col:r};break;case p.Obstacle:g.some(f=>f.row===t&&f.col===r)||g.push({row:t,col:r});break;case p.Empty:g=g.filter(f=>!(f.row===t&&f.col===r));break}return{...o,cells:c,startTile:m,endTile:v,obstacleTiles:g}})},resetCells:()=>{e(t=>({...t,cells:t.cells.map(r=>r.map(l=>({...l,state:p.Empty}))),startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[]}))},handleFindPath:t=>{e(r=>{const l=r.cells.flat().find(c=>c.state===p.Start),o=r.cells.flat().find(c=>c.state===p.End);if(l&&o){const c=r.cells.map(f=>f.map(i=>({row:i.row,col:i.col,state:i.state}))),{path:m,visitedNodes:v}=ie(c,l,o,t);return(async(f,i)=>{for(let h of i)await new Promise(d=>setTimeout(d,100)),e(d=>{const s=d.cells.map(a=>a.map(n=>({...n,state:h.row===n.row&&h.col===n.col&&n.state===p.Empty?p.Visited:n.state})));return{...d,cells:s,visitedNodes:[...d.visitedNodes,h]}});for(let h of f)await new Promise(d=>setTimeout(d,250)),e(d=>{const s=d.cells.map(a=>a.map(n=>({...n,state:h.row===n.row&&h.col===n.col?p.Path:n.state})));return{...d,cells:s,path:[...d.path,h]}})})(m,v),{...r,path:[],visitedNodes:[]}}return r})},setPath:t=>{e(r=>{const l=r.cells.map(o=>o.map(c=>({...c,state:t.some(m=>m.row===c.row&&m.col===c.col)?p.Path:c.state})));return{...r,cells:l}})},setVisitedNodes:t=>{e(r=>{const l=r.cells.map(o=>o.map(c=>({...c,state:t.some(m=>m.row===c.row&&m.col===c.col)&&c.state===p.Empty?p.Visited:c.state})));return{...r,cells:l}})}}),de=e=>({activeButton:p.Start,setSelectedButtonState:t=>e({activeButton:t}),canTravelDiagonally:!0,setCanTravelDiagonally:t=>e({canTravelDiagonally:t})}),K=ne((e,t,r)=>({...ue(e),...de(e)})),Ee="",fe=()=>{var d;const{cells:e,activeButton:t,setCellState:r,setSelectedButtonState:l,visitedNodes:o,path:c}=K(),[m,v]=C.useState({width:window.innerWidth,height:window.innerHeight});C.useEffect(()=>{const s=()=>{v({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const g=(s,a)=>{switch(r(s,a,t),t){case p.Start:l(p.End);break;case p.End:l(p.Obstacle);break}},f=(s,a)=>{const n=o.find(w=>w.row===s&&w.col===a);return n?{g:n.g,h:n.h,f:n.f}:{g:null,h:null,f:null}},h=(()=>{var N;const s=m.width<768,a=m.width<1024,n=s?Math.min(m.width*.98,500):a?Math.min(m.width*.95,800):Math.min(m.width*.9,1e3),w=s?Math.min(m.height*.75,500):a?Math.min(m.height*.8,700):Math.min(m.height*.85,800),S=((N=e[0])==null?void 0:N.length)||1,_=e.length||1,y=s?16:24,O=(n-y)/S,D=(w-y)/_;return Math.max(s?30:40,Math.min(O,D,s?50:a?70:90))})();return u.jsx("div",{className:"grid-wrapper",children:u.jsx("div",{className:"grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${((d=e[0])==null?void 0:d.length)||1}, ${h}px)`,gridTemplateRows:`repeat(${e.length||1}, ${h}px)`,gap:"1px",padding:"8px",background:"var(--bg-secondary)",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",border:"1px solid var(--border-color)"},children:e.map((s,a)=>s.map((n,w)=>{const S=c.some(E=>E.row===n.row&&E.col===n.col),_=o.some(E=>E.row===n.row&&E.col===n.col),{g:y,h:O,f:D}=f(n.row,n.col);let b=he(n,_);if(S){const E=c.findIndex(N=>N.row===n.row&&N.col===n.col);E===0?b="var(--cell-start)":E===c.length-1?b="var(--cell-end)":b="var(--cell-path)"}return u.jsxs("div",{className:"grid-cell",onClick:()=>g(a,w),style:{width:h,height:h,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:E=>{n.state===p.Empty&&(E.currentTarget.style.backgroundColor="var(--bg-tertiary)",E.currentTarget.style.transform="scale(1.02)")},onMouseLeave:E=>{n.state===p.Empty&&(E.currentTarget.style.backgroundColor=b,E.currentTarget.style.transform="scale(1)")},children:[_&&u.jsxs("div",{className:"cell-values",children:[u.jsxs("div",{className:"value-h",children:["h",O]}),u.jsxs("div",{className:"value-f",children:["f",D]}),u.jsxs("div",{className:"value-g",children:["g",y]})]}),n.state===p.Start&&u.jsx("div",{className:"cell-indicator start",children:"●"}),n.state===p.End&&u.jsx("div",{className:"cell-indicator end",children:"●"}),n.state===p.Obstacle&&u.jsx("div",{className:"cell-indicator obstacle",children:"■"})]},`${a}-${w}`)}))})})},he=(e,t)=>{if(t)return e.state===p.Start?"var(--cell-start)":e.state===p.End?"var(--cell-end)":"var(--cell-visited)";switch(e.state){case p.Start:return"var(--cell-start)";case p.End:return"var(--cell-end)";case p.Obstacle:return"var(--cell-obstacle)";case p.Empty:return"var(--cell-empty)";default:return"var(--cell-empty)"}},ge="",pe=()=>{const{activeButton:e,setSelectedButtonState:t,resetCells:r,rows:l,columns:o,setNumberOfRows:c,setNumberOfColumns:m,handleFindPath:v,canTravelDiagonally:g,setCanTravelDiagonally:f}=K(),[i,h]=C.useState(()=>{const S=localStorage.getItem("darkMode");return S?JSON.parse(S):!1});C.useEffect(()=>{localStorage.setItem("darkMode",JSON.stringify(i)),document.documentElement.setAttribute("data-theme",i?"dark":"light")},[i]);const d=()=>{h(!i)},s=[{label:"Start",state:p.Start},{label:"End",state:p.End},{label:"Obstacle",state:p.Obstacle},{label:"Clear",state:p.Empty},{label:"Reset",state:null}],a=S=>{S===null?n():t(S)},n=()=>{r(),t(p.Start)},w=()=>{v(g)};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:s.map((S,_)=>u.jsx("button",{className:`control-button ${S.label.toLowerCase()} ${e===S.state?"active":""}`,onClick:()=>a(S.state),children:S.label},_))})]}),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:w,children:"Find Path"}),u.jsx("button",{className:`control-button diagonal ${g?"active":""}`,onClick:()=>f(!g),children:g?"Diagonal On":"Diagonal Off"}),u.jsx("button",{className:`control-button theme-toggle ${i?"active":""}`,onClick:d,title:i?"Switch to light mode":"Switch to dark mode",children:i?"☀️ 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:()=>c(Math.max(5,l-1)),disabled:l<=5,children:"−"}),u.jsx("span",{className:"size-value",children:l}),u.jsx("button",{className:"size-button",onClick:()=>c(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:()=>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.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(fe,{})}),u.jsx("footer",{className:"app-footer",children:u.jsx(pe,{})})]});function me(){return u.jsx(U,{})}T.AStarVisualizer=me,T.CellState=p,T.Layout=U,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
+ */var H;function X(){return H||(H=1,process.env.NODE_ENV!=="production"&&function(){function e(f,u){return f===u&&(f!==0||1/f===1/u)||f!==f&&u!==u}typeof __REACT_DEVTOOLS_GLOBAL_HOOK__<"u"&&typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart=="function"&&__REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());var t=C,r=W(),l=typeof Object.is=="function"?Object.is:e,o=r.useSyncExternalStore,i=t.useRef,m=t.useEffect,v=t.useMemo,g=t.useDebugValue;k.useSyncExternalStoreWithSelector=function(f,u,h,d,s){var a=i(null);if(a.current===null){var n={hasValue:!1,value:null};a.current=n}else n=a.current;a=v(function(){function S(b){if(!_){if(_=!0,y=b,b=d(b),s!==void 0&&n.hasValue){var E=n.value;if(s(E,b))return O=E}return O=b}if(E=O,l(y,b))return E;var N=d(b);return s!==void 0&&s(E,N)?(y=b,E):(y=b,O=N)}var _=!1,y,O,D=h===void 0?null:h;return[function(){return S(u())},D===null?void 0:function(){return S(D())}]},[u,h,d,s]);var w=o(f,a[0],a[1]);return m(function(){n.hasValue=!0,n.value=w},[w]),g(w),w},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=Q():A.exports=X();var Z=A.exports;const $=q(Z),{useDebugValue:ee}=C,{useSyncExternalStoreWithSelector:te}=$;let Se=!1;const re=e=>e;function oe(e,t=re,r){const l=te(e.subscribe,e.getState,e.getServerState||e.getInitialState,t,r);return ee(l),l}const F=e=>{const t=typeof e=="function"?R(e):e,r=(l,o)=>oe(t,l,o);return Object.assign(r,t),r},ne=e=>e?F(e):F;var p=(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))(p||{});const x=(e,t)=>{const r=Math.abs(e.row-t.row),l=Math.abs(e.col-t.col);return Math.floor(10*Math.sqrt(r*r+l*l))},se=(e,t)=>({row:e.row,col:e.col,g:0,h:x(e,t),f:x(e,t),parent:null}),ae=(e,t,r)=>{const l=[{row:e.row-1,col:e.col},{row:e.row+1,col:e.col},{row:e.row,col:e.col-1},{row:e.row,col:e.col+1}];return r&&l.push({row:e.row-1,col:e.col-1},{row:e.row-1,col:e.col+1},{row:e.row+1,col:e.col-1},{row:e.row+1,col:e.col+1}),l.filter(o=>o.row>=0&&o.row<t.length&&o.col>=0&&o.col<t[0].length&&t[o.row][o.col].state!==p.Obstacle).map(o=>({row:o.row,col:o.col,state:t[o.row][o.col].state}))},le=(e,t,r)=>{const l=Math.abs(e.row-t.row),o=Math.abs(e.col-t.col),i=e.g+(l===0||o===0?10:14),m=x(t,r),v=i+m;return{g:i,h:m,f:v}},ce=e=>{const t=[];let r=e;for(;r;)t.push(r),r=r.parent;return t.reverse()},ie=(e,t,r,l)=>{const o=[],i=[],m=se(t,r);for(o.push(m);o.length>0;){o.sort((f,u)=>f.f-u.f);const v=o.shift();if(v.row===r.row&&v.col===r.col)return i.push(v),{path:ce(v),visitedNodes:i};i.push(v);const g=ae(v,e,l);for(const f of g){if(i.some(a=>a.row===f.row&&a.col===f.col))continue;const{g:u,h,f:d}=le(v,f,r),s=o.find(a=>a.row===f.row&&a.col===f.col);if(!s||u<s.g){const a={row:f.row,col:f.col,g:u,h,f:d,parent:v};s?(s.g=u,s.f=d,s.parent=v):o.push(a)}}}return{path:[],visitedNodes:i}},ue=e=>({cells:Array.from({length:8},(t,r)=>Array.from({length:12},(l,o)=>({row:r,col:o,state:p.Empty}))),rows:8,columns:12,startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[],setNumberOfColumns:t=>{e(r=>{const l=r.cells.map(o=>t>r.columns?[...o,...Array.from({length:t-r.columns},(i,m)=>({row:o[0].row,col:r.columns+m,state:p.Empty}))]:o.slice(0,t));return{...r,columns:t,cells:l}})},setNumberOfRows:t=>{e(r=>{let l=[...r.cells];return t>r.rows?l=[...l,...Array.from({length:t-r.rows},(o,i)=>Array.from({length:r.columns},(m,v)=>({row:r.rows+i,col:v,state:p.Empty})))]:l=l.slice(0,t),{...r,rows:t,cells:l}})},setCellState:(t,r,l)=>{e(o=>{const i=o.cells.map(f=>f.map(u=>({...u})));let m=o.startTile,v=o.endTile,g=[...o.obstacleTiles];switch(l===p.Start&&o.startTile&&(i[o.startTile.row][o.startTile.col].state=p.Empty,m=null),l===p.End&&o.endTile&&(i[o.endTile.row][o.endTile.col].state=p.Empty,v=null),i[t][r].state=l,l){case p.Start:m={row:t,col:r};break;case p.End:v={row:t,col:r};break;case p.Obstacle:g.some(f=>f.row===t&&f.col===r)||g.push({row:t,col:r});break;case p.Empty:g=g.filter(f=>!(f.row===t&&f.col===r));break}return{...o,cells:i,startTile:m,endTile:v,obstacleTiles:g}})},resetCells:()=>{e(t=>({...t,cells:t.cells.map(r=>r.map(l=>({...l,state:p.Empty}))),startTile:null,endTile:null,obstacleTiles:[],path:[],visitedNodes:[]}))},handleFindPath:t=>{e(r=>{const l=r.cells.flat().find(i=>i.state===p.Start),o=r.cells.flat().find(i=>i.state===p.End);if(l&&o){const i=r.cells.map(f=>f.map(u=>({row:u.row,col:u.col,state:u.state}))),{path:m,visitedNodes:v}=ie(i,l,o,t);return(async(f,u)=>{for(let h of u)await new Promise(d=>setTimeout(d,100)),e(d=>{const s=d.cells.map(a=>a.map(n=>({...n,state:h.row===n.row&&h.col===n.col&&n.state===p.Empty?p.Visited:n.state})));return{...d,cells:s,visitedNodes:[...d.visitedNodes,h]}});for(let h of f)await new Promise(d=>setTimeout(d,250)),e(d=>{const s=d.cells.map(a=>a.map(n=>({...n,state:h.row===n.row&&h.col===n.col?p.Path:n.state})));return{...d,cells:s,path:[...d.path,h]}})})(m,v),{...r,path:[],visitedNodes:[]}}return r})},setPath:t=>{e(r=>{const l=r.cells.map(o=>o.map(i=>({...i,state:t.some(m=>m.row===i.row&&m.col===i.col)?p.Path:i.state})));return{...r,cells:l}})},setVisitedNodes:t=>{e(r=>{const l=r.cells.map(o=>o.map(i=>({...i,state:t.some(m=>m.row===i.row&&m.col===i.col)&&i.state===p.Empty?p.Visited:i.state})));return{...r,cells:l}})}}),de=e=>({activeButton:p.Start,setSelectedButtonState:t=>e({activeButton:t}),canTravelDiagonally:!0,setCanTravelDiagonally:t=>e({canTravelDiagonally:t})}),K=ne((e,t,r)=>({...ue(e),...de(e)})),Ee="",fe=()=>{var d;const{cells:e,activeButton:t,setCellState:r,setSelectedButtonState:l,visitedNodes:o,path:i}=K(),[m,v]=C.useState({width:window.innerWidth,height:window.innerHeight});C.useEffect(()=>{const s=()=>{v({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const g=(s,a)=>{switch(r(s,a,t),t){case p.Start:l(p.End);break;case p.End:l(p.Obstacle);break}},f=(s,a)=>{const n=o.find(w=>w.row===s&&w.col===a);return n?{g:n.g,h:n.h,f:n.f}:{g:null,h:null,f:null}},h=(()=>{var N;const s=m.width<768,a=m.width<1024,n=s?Math.min(m.width*.98,500):a?Math.min(m.width*.95,800):Math.min(m.width*.9,1e3),w=s?Math.min(m.height*.75,500):a?Math.min(m.height*.8,700):Math.min(m.height*.85,800),S=((N=e[0])==null?void 0:N.length)||1,_=e.length||1,y=s?16:24,O=(n-y)/S,D=(w-y)/_;return Math.max(s?30:40,Math.min(O,D,s?50:a?70:90))})();return c.jsx("div",{className:"grid-wrapper",children:c.jsx("div",{className:"grid-container",style:{display:"grid",gridTemplateColumns:`repeat(${((d=e[0])==null?void 0:d.length)||1}, ${h}px)`,gridTemplateRows:`repeat(${e.length||1}, ${h}px)`,gap:"1px",padding:"8px",background:"var(--bg-secondary)",borderRadius:"8px",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.1)",border:"1px solid var(--border-color)"},children:e.map((s,a)=>s.map((n,w)=>{const S=i.some(E=>E.row===n.row&&E.col===n.col),_=o.some(E=>E.row===n.row&&E.col===n.col),{g:y,h:O,f:D}=f(n.row,n.col);let b=he(n,_);if(S){const E=i.findIndex(N=>N.row===n.row&&N.col===n.col);E===0?b="var(--cell-start)":E===i.length-1?b="var(--cell-end)":b="var(--cell-path)"}return c.jsxs("div",{className:"grid-cell",onClick:()=>g(a,w),style:{width:h,height:h,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:E=>{n.state===p.Empty&&(E.currentTarget.style.backgroundColor="var(--bg-tertiary)",E.currentTarget.style.transform="scale(1.02)")},onMouseLeave:E=>{n.state===p.Empty&&(E.currentTarget.style.backgroundColor=b,E.currentTarget.style.transform="scale(1)")},children:[_&&c.jsxs("div",{className:"cell-values",children:[c.jsxs("div",{className:"value-h",children:["h",O]}),c.jsxs("div",{className:"value-f",children:["f",D]}),c.jsxs("div",{className:"value-g",children:["g",y]})]}),n.state===p.Start&&c.jsx("div",{className:"cell-indicator start",children:"●"}),n.state===p.End&&c.jsx("div",{className:"cell-indicator end",children:"●"}),n.state===p.Obstacle&&c.jsx("div",{className:"cell-indicator obstacle",children:"■"})]},`${a}-${w}`)}))})})},he=(e,t)=>{if(t)return e.state===p.Start?"var(--cell-start)":e.state===p.End?"var(--cell-end)":"var(--cell-visited)";switch(e.state){case p.Start:return"var(--cell-start)";case p.End:return"var(--cell-end)";case p.Obstacle:return"var(--cell-obstacle)";case p.Empty:return"var(--cell-empty)";default:return"var(--cell-empty)"}},ge="",pe=()=>{const{activeButton:e,setSelectedButtonState:t,resetCells:r,rows:l,columns:o,setNumberOfRows:i,setNumberOfColumns:m,handleFindPath:v,canTravelDiagonally:g,setCanTravelDiagonally:f}=K(),[u,h]=C.useState(()=>{const S=localStorage.getItem("darkMode");return S?JSON.parse(S):!1});C.useEffect(()=>{localStorage.setItem("darkMode",JSON.stringify(u)),document.documentElement.setAttribute("data-theme",u?"dark":"light")},[u]);const d=()=>{h(!u)},s=[{label:"Start",state:p.Start},{label:"End",state:p.End},{label:"Obstacle",state:p.Obstacle},{label:"Clear",state:p.Empty},{label:"Reset",state:null}],a=S=>{S===null?n():t(S)},n=()=>{r(),t(p.Start)},w=()=>{v(g)};return c.jsx("div",{className:"control-panel",children:c.jsxs("div",{className:"control-grid",children:[c.jsxs("div",{className:"control-group tools",children:[c.jsx("h3",{className:"group-title",children:"Tools"}),c.jsx("div",{className:"button-group",children:s.map((S,_)=>c.jsx("button",{className:`control-button ${S.label.toLowerCase()} ${e===S.state?"active":""}`,onClick:()=>a(S.state),children:S.label},_))})]}),c.jsxs("div",{className:"control-group actions",children:[c.jsx("h3",{className:"group-title",children:"Actions"}),c.jsxs("div",{className:"button-group",children:[c.jsx("button",{className:"control-button find-path",onClick:w,children:"Find Path"}),c.jsx("button",{className:`control-button diagonal ${g?"active":""}`,onClick:()=>f(!g),children:g?"Diagonal On":"Diagonal Off"}),c.jsx("button",{className:`control-button theme-toggle ${u?"active":""}`,onClick:d,title:u?"Switch to light mode":"Switch to dark mode",children:u?"☀️ Light":"🌙 Dark"})]})]}),c.jsxs("div",{className:"control-group size",children:[c.jsx("h3",{className:"group-title",children:"Grid Size"}),c.jsxs("div",{className:"size-controls",children:[c.jsxs("div",{className:"size-control",children:[c.jsx("label",{className:"size-label",children:"Rows"}),c.jsxs("div",{className:"size-buttons",children:[c.jsx("button",{className:"size-button",onClick:()=>i(Math.max(5,l-1)),disabled:l<=5,children:"−"}),c.jsx("span",{className:"size-value",children:l}),c.jsx("button",{className:"size-button",onClick:()=>i(Math.min(50,l+1)),disabled:l>=50,children:"+"})]})]}),c.jsxs("div",{className:"size-control",children:[c.jsx("label",{className:"size-label",children:"Columns"}),c.jsxs("div",{className:"size-buttons",children:[c.jsx("button",{className:"size-button",onClick:()=>m(Math.max(5,o-1)),disabled:o<=5,children:"−"}),c.jsx("span",{className:"size-value",children:o}),c.jsx("button",{className:"size-button",onClick:()=>m(Math.min(50,o+1)),disabled:o>=50,children:"+"})]})]})]})]})]})})},U=()=>c.jsx("div",{className:"astar-visualizer-root",children:c.jsxs("div",{className:"app-container",children:[c.jsx("header",{className:"app-header",children:c.jsx("h1",{className:"app-title",children:"A* Pathfinding"})}),c.jsx("main",{className:"app-main",children:c.jsx(fe,{})}),c.jsx("footer",{className:"app-footer",children:c.jsx(pe,{})})]})});function me(){return c.jsx(U,{})}T.AStarVisualizer=me,T.CellState=p,T.Layout=U,Object.defineProperty(T,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}*,*:before,*:after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}body{margin:0;padding:0;min-height:100vh;background:var(--bg-primary);color:var(--text-primary);overflow-x:hidden}html,body{width:100%;height:100%;overflow:hidden;margin:0;padding:0}#root{width:100%;height:100%;display:flex;flex-direction:column;margin:0;padding:0}*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}iframe{border:none;width:100%;height:100%}.app-container{display:flex;flex-direction:column;height:100%;width:100%;flex:1}.app-header{padding:1rem 2rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-color);text-align:center}.app-title{font-size:1.75rem;font-weight:600;margin:0;color:var(--text-primary);letter-spacing:-.025em}.app-main{flex:1;display:flex;justify-content:center;align-items:center;padding:.5rem;min-height:0}.app-footer{padding:1rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border-color)}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}button:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}button:active{transform:translateY(1px)}button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-width: 768px){.app-header{padding:.75rem 1.5rem}.app-title{font-size:1.5rem}.app-main{padding:.25rem}.app-footer{padding:.75rem 1.5rem}}@media (max-width: 480px){.app-header{padding:.5rem 1rem}.app-title{font-size:1.25rem}.app-main{padding:.125rem}.app-footer{padding:.5rem 1rem}}@media (max-height: 600px){.app-header{padding:.5rem 1rem}.app-title{font-size:1.25rem}.app-footer{padding:.5rem 1rem}}@media (max-height: 400px){.app-header{padding:.25rem .5rem}.app-title{font-size:1rem}.app-footer{padding:.25rem .5rem}}#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.5rem;color:var(--text-secondary)}.error{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:2rem;text-align:center}.error h2{color:var(--danger);margin-bottom:1rem}.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{.app-footer{display:none}.app-header{background:white!important;color:#000!important}.grid-container{box-shadow:none!important;border:2px solid black!important}}.grid-wrapper{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.grid-container{display:grid;gap:1px;padding:8px;background:var(--bg-secondary);border-radius:8px;box-shadow:0 2px 8px #0000001a;border:1px solid var(--border-color)}.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}.grid-cell:hover{transform:scale(1.02)}.grid-cell:active{transform:scale(.98)}.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}.value-h{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;font-size:.65rem}.value-f{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:center;font-size:.65rem}.value-g{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;font-size:.65rem}.cell-indicator{font-size:1.2rem;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.9)}.cell-indicator.start,.cell-indicator.end,.cell-indicator.obstacle{color:#fff}@media (max-width: 768px){.cell-values{font-size:.6rem}.value-h,.value-f,.value-g{font-size:.5rem}.cell-indicator{font-size:1rem}}@media (max-width: 480px){.cell-values{font-size:.5rem}.value-h,.value-f,.value-g{font-size:.4rem}.cell-indicator{font-size:.9rem}}.control-panel{padding:1rem;background:var(--bg-secondary);border-radius:8px;border:1px solid var(--border-color);box-shadow:0 2px 8px #0000001a}.control-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}.control-group{display:flex;flex-direction:column;gap:.75rem}.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)}.button-group{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center}.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}.control-button:hover{border-color:var(--border-hover);background:var(--bg-tertiary)}.control-button:active{transform:translateY(1px)}.control-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.control-button.start.active{background:var(--success);border-color:var(--success);color:#fff}.control-button.end.active{background:var(--danger);border-color:var(--danger);color:#fff}.control-button.obstacle.active{background:var(--text-primary);border-color:var(--text-primary);color:#fff}.control-button.clear.active{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.control-button.reset{background:var(--danger);border-color:var(--danger);color:#fff}.control-button.reset:hover{background:var(--danger-hover);border-color:var(--danger-hover)}.control-button.find-path{background:var(--primary);border-color:var(--primary);color:#fff}.control-button.find-path:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.control-button.diagonal.active{background:var(--warning);border-color:var(--warning);color:#fff}.control-button.diagonal:hover{background:var(--warning-hover);border-color:var(--warning-hover)}.control-button.theme-toggle{background:var(--text-muted);border-color:var(--text-muted);color:#fff}.control-button.theme-toggle:hover{background:var(--text-secondary);border-color:var(--text-secondary)}.control-button.theme-toggle.active{background:var(--warning);border-color:var(--warning);color:#fff}.control-button.theme-toggle.active:hover{background:var(--warning-hover);border-color:var(--warning-hover)}.size-controls{display:flex;flex-direction:column;gap:.75rem;align-items:center}.size-control{display:flex;flex-direction:column;gap:.25rem;align-items:center}.size-label{font-size:.75rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em}.size-buttons{display:flex;align-items:center;gap:.5rem}.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}.size-button:hover:not(:disabled){background:var(--primary);border-color:var(--primary);color:#fff}.size-button:active:not(:disabled){transform:scale(.95)}.size-button:disabled{opacity:.4;cursor:not-allowed}.size-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.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){.control-grid{grid-template-columns:2fr 1fr 1fr;gap:2rem}.control-group.tools{grid-column:1}.control-group.actions{grid-column:2}.control-group.size{grid-column:3}}@media (min-width: 768px) and (max-width: 1023px){.control-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.control-group.tools{grid-column:1 / -1}.control-group.actions{grid-column:1}.control-group.size{grid-column:2}}@media (max-width: 768px){.control-panel{padding:.75rem}.control-grid{gap:1rem}.button-group{gap:.375rem}.control-button{padding:.375rem .75rem;font-size:.8125rem}.size-controls{gap:.5rem}.size-buttons{gap:.375rem}.size-button{width:1.5rem;height:1.5rem;font-size:.875rem}.size-value{min-width:2rem;height:1.5rem;font-size:.8125rem}}@media (max-width: 480px){.control-panel{padding:.5rem}.control-grid{gap:.75rem}.button-group{flex-direction:column;gap:.25rem}.control-button{width:100%;padding:.5rem;font-size:.75rem}.size-controls{gap:.375rem}.size-buttons{gap:.25rem}.size-button{width:1.25rem;height:1.25rem;font-size:.75rem}.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%}[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}*,*:before,*:after{transition:background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}.astar-visualizer-root{background:var(--bg-primary);color:var(--text-primary)}.astar-visualizer-root{width:100%;height:100%;display:flex;flex-direction:column;margin:0;padding:0;overflow:auto;min-height:600px}.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;min-height:100%;width:100%;flex:1}.astar-visualizer-root .app-header{padding:1rem 2rem;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.75rem;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;min-height:400px;overflow:auto}.astar-visualizer-root .app-footer{padding:1rem 2rem;background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0}.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}}#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.5rem;color:var(--text-secondary)}.error{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:2rem;text-align:center}.error h2{color:var(--danger);margin-bottom:1rem}.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{.app-footer{display:none}.app-header{background:white!important;color:#000!important}.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:1rem;box-sizing:border-box}.astar-visualizer-root .grid-container{display:grid;gap:1px;padding:8px;background:var(--bg-secondary);border-radius:8px;box-shadow:0 2px 8px #0000001a;border:1px solid var(--border-color);max-width:100%;max-height:100%;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.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "A React component for visualizing A* pathfinding algorithm",
   "main": "./dist/astar-visualizer.umd.cjs",