astar-visualizer 1.0.0

package/README.md

@@ -0,0 +1,54 @@
+# A* Pathfinding Visualizer
+
+A React component for visualizing the A* pathfinding algorithm with an interactive grid interface.
+
+## Installation
+
+```bash
+npm install astar-visualizer
+```
+
+## Usage
+
+```tsx
+import { AStarVisualizer } from 'astar-visualizer';
+import 'astar-visualizer/style.css';
+
+function App() {
+  return (
+    <div>
+      <AStarVisualizer />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Features
+
+- Interactive grid for setting start/end points and obstacles
+- Real-time visualization of the A* algorithm
+- Customizable grid size
+- Control panel for algorithm execution
+- Smooth animations with Framer Motion
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run development server
+npm run dev
+
+# Build library for publishing
+npm run build:lib
+
+# Run tests
+npm test
+```
+
+## License
+
+MIT

package/dist/astar-visualizer.js

@@ -0,0 +1,791 @@
+import { jsx as S, jsxs as y } from "react/jsx-runtime";
+import D, { useState as H, useEffect as $ } from "react";
+const P = (e) => {
+  let t;
+  const r = /* @__PURE__ */ new Set(), l = (c, f) => {
+    const u = typeof c == "function" ? c(t) : c;
+    if (!Object.is(u, t)) {
+      const s = t;
+      t = f ?? (typeof u != "object" || u === null) ? u : Object.assign({}, t, u), r.forEach((a) => a(t, s));
+    }
+  }, o = () => t, g = { setState: l, getState: o, getInitialState: () => d, subscribe: (c) => (r.add(c), () => r.delete(c)), destroy: () => {
+    r.clear();
+  } }, d = t = e(l, o, g);
+  return g;
+}, U = (e) => e ? P(e) : P;
+function q(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var V = { exports: {} }, R = {}, L = { exports: {} }, A = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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 J() {
+  if (x)
+    return A;
+  x = 1;
+  var e = D;
+  function t(f, u) {
+    return f === u && (f !== 0 || 1 / f === 1 / u) || f !== f && u !== u;
+  }
+  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];
+    return i(
+      function() {
+        n.value = s, n.getSnapshot = u, g(n) && v({ inst: n });
+      },
+      [f, s, u]
+    ), o(
+      function() {
+        return g(n) && v({ inst: n }), f(function() {
+          g(n) && v({ inst: n });
+        });
+      },
+      [f]
+    ), m(s), s;
+  }
+  function g(f) {
+    var u = f.getSnapshot;
+    f = f.value;
+    try {
+      var s = u();
+      return !r(f, s);
+    } catch {
+      return !0;
+    }
+  }
+  function d(f, u) {
+    return u();
+  }
+  var c = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? d : p;
+  return A.useSyncExternalStore = e.useSyncExternalStore !== void 0 ? e.useSyncExternalStore : c, A;
+}
+var M = {};
+/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var B;
+function Y() {
+  return B || (B = 1, process.env.NODE_ENV !== "production" && function() {
+    function e(s, a) {
+      return s === a && (s !== 0 || 1 / s === 1 / a) || s !== s && a !== a;
+    }
+    function t(s, a) {
+      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 n = a();
+      if (!f) {
+        var v = a();
+        i(n, v) || (console.error(
+          "The result of getSnapshot should be cached to avoid an infinite loop"
+        ), f = !0);
+      }
+      v = m({
+        inst: { value: n, getSnapshot: a }
+      });
+      var w = v[0].inst, _ = v[1];
+      return g(
+        function() {
+          w.value = n, w.getSnapshot = a, r(w) && _({ inst: w });
+        },
+        [s, n, a]
+      ), p(
+        function() {
+          return r(w) && _({ inst: w }), s(function() {
+            r(w) && _({ inst: w });
+          });
+        },
+        [s]
+      ), d(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 = D, i = typeof Object.is == "function" ? Object.is : e, m = o.useState, p = o.useEffect, g = o.useLayoutEffect, d = o.useDebugValue, c = !1, f = !1, u = typeof window > "u" || typeof window.document > "u" || typeof window.document.createElement > "u" ? l : t;
+    M.useSyncExternalStore = o.useSyncExternalStore !== void 0 ? o.useSyncExternalStore : u, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), M;
+}
+var I;
+function F() {
+  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
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var j;
+function Q() {
+  if (j)
+    return R;
+  j = 1;
+  var e = D, t = F();
+  function r(d, c) {
+    return d === c && (d !== 0 || 1 / d === 1 / c) || d !== d && c !== c;
+  }
+  var l = typeof Object.is == "function" ? Object.is : r, o = t.useSyncExternalStore, i = e.useRef, m = e.useEffect, p = e.useMemo, g = e.useDebugValue;
+  return R.useSyncExternalStoreWithSelector = function(d, c, f, u, s) {
+    var a = i(null);
+    if (a.current === null) {
+      var n = { hasValue: !1, value: null };
+      a.current = n;
+    } else
+      n = a.current;
+    a = p(
+      function() {
+        function w(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;
+            }
+            return N = b;
+          }
+          if (E = N, l(O, b))
+            return E;
+          var T = u(b);
+          return s !== void 0 && s(E, T) ? (O = b, E) : (O = b, N = T);
+        }
+        var _ = !1, O, N, C = f === void 0 ? null : f;
+        return [
+          function() {
+            return w(c());
+          },
+          C === null ? void 0 : function() {
+            return w(C());
+          }
+        ];
+      },
+      [c, f, u, s]
+    );
+    var v = o(d, a[0], a[1]);
+    return m(
+      function() {
+        n.hasValue = !0, n.value = v;
+      },
+      [v]
+    ), g(v), v;
+  }, R;
+}
+var z = {};
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && function() {
+    function e(d, c) {
+      return d === c && (d !== 0 || 1 / d === 1 / c) || d !== d && c !== c;
+    }
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
+    var t = D, r = F(), l = typeof Object.is == "function" ? Object.is : e, o = r.useSyncExternalStore, i = t.useRef, m = t.useEffect, p = t.useMemo, g = t.useDebugValue;
+    z.useSyncExternalStoreWithSelector = function(d, c, f, u, s) {
+      var a = i(null);
+      if (a.current === null) {
+        var n = { hasValue: !1, value: null };
+        a.current = n;
+      } else
+        n = a.current;
+      a = p(
+        function() {
+          function w(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;
+              }
+              return N = b;
+            }
+            if (E = N, l(O, b))
+              return E;
+            var T = u(b);
+            return s !== void 0 && s(E, T) ? (O = b, E) : (O = b, N = T);
+          }
+          var _ = !1, O, N, C = f === void 0 ? null : f;
+          return [
+            function() {
+              return w(c());
+            },
+            C === null ? void 0 : function() {
+              return w(C());
+            }
+          ];
+        },
+        [c, f, u, s]
+      );
+      var v = o(d, a[0], a[1]);
+      return m(
+        function() {
+          n.hasValue = !0, n.value = v;
+        },
+        [v]
+      ), g(v), v;
+    }, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error());
+  }()), z;
+}
+process.env.NODE_ENV === "production" ? V.exports = Q() : V.exports = X();
+var Z = V.exports;
+const ee = /* @__PURE__ */ q(Z), { useDebugValue: te } = D, { useSyncExternalStoreWithSelector: re } = ee;
+const oe = (e) => e;
+function ne(e, t = oe, r) {
+  const l = re(
+    e.subscribe,
+    e.getState,
+    e.getServerState || e.getInitialState,
+    t,
+    r
+  );
+  return te(l), l;
+}
+const G = (e) => {
+  const t = typeof e == "function" ? U(e) : e, r = (l, o) => ne(t, l, o);
+  return Object.assign(r, t), r;
+}, se = (e) => e ? G(e) : G;
+var h = /* @__PURE__ */ ((e) => (e[e.Empty = 0] = "Empty", e[e.Start = 1] = "Start", e[e.End = 2] = "End", e[e.Obstacle = 3] = "Obstacle", e[e.Visited = 4] = "Visited", e[e.Path = 5] = "Path", e))(h || {});
+const k = (e, t) => {
+  const r = Math.abs(e.row - t.row), l = Math.abs(e.col - t.col);
+  return Math.floor(10 * Math.sqrt(r * r + l * l));
+}, ae = (e, t) => ({
+  row: e.row,
+  col: e.col,
+  g: 0,
+  h: k(e, t),
+  f: k(e, t),
+  parent: null
+}), le = (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 !== h.Obstacle).map((o) => ({
+    row: o.row,
+    col: o.col,
+    state: t[o.row][o.col].state
+  }));
+}, ie = (e, t, r) => {
+  const l = Math.abs(e.row - t.row), o = Math.abs(e.col - t.col), i = e.g + (l === 0 || o === 0 ? 10 : 14), m = k(t, r), p = i + m;
+  return { g: i, h: m, f: p };
+}, ce = (e) => {
+  const t = [];
+  let r = e;
+  for (; r; )
+    t.push(r), r = r.parent;
+  return t.reverse();
+}, ue = (e, t, r, l) => {
+  const o = [], i = [], m = ae(t, r);
+  for (o.push(m); o.length > 0; ) {
+    o.sort((d, c) => d.f - c.f);
+    const p = o.shift();
+    if (p.row === r.row && p.col === r.col)
+      return i.push(p), { path: ce(p), visitedNodes: i };
+    i.push(p);
+    const g = le(p, e, l);
+    for (const d of g) {
+      if (i.some((a) => a.row === d.row && a.col === d.col))
+        continue;
+      const { g: c, h: f, f: u } = ie(p, d, r), s = o.find(
+        (a) => a.row === d.row && a.col === d.col
+      );
+      if (!s || c < s.g) {
+        const a = {
+          row: d.row,
+          col: d.col,
+          g: c,
+          h: f,
+          f: u,
+          parent: p
+        };
+        s ? (s.g = c, s.f = u, s.parent = p) : o.push(a);
+      }
+    }
+  }
+  return { path: [], visitedNodes: i };
+}, de = (e) => ({
+  cells: Array.from(
+    { length: 8 },
+    (t, r) => Array.from({ length: 12 }, (l, o) => ({
+      row: r,
+      col: o,
+      state: h.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: h.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, p) => ({
+            row: r.rows + i,
+            col: p,
+            state: h.Empty
+          }))
+        )
+      ] : l = l.slice(0, t), {
+        ...r,
+        rows: t,
+        cells: l
+      };
+    });
+  },
+  setCellState: (t, r, l) => {
+    e((o) => {
+      const i = o.cells.map(
+        (d) => d.map((c) => ({ ...c }))
+      );
+      let m = o.startTile, p = o.endTile, g = [...o.obstacleTiles];
+      switch (l === h.Start && o.startTile && (i[o.startTile.row][o.startTile.col].state = h.Empty, m = null), l === h.End && o.endTile && (i[o.endTile.row][o.endTile.col].state = h.Empty, p = null), i[t][r].state = l, l) {
+        case h.Start:
+          m = { row: t, col: r };
+          break;
+        case h.End:
+          p = { row: t, col: r };
+          break;
+        case h.Obstacle:
+          g.some((d) => d.row === t && d.col === r) || g.push({ row: t, col: r });
+          break;
+        case h.Empty:
+          g = g.filter(
+            (d) => !(d.row === t && d.col === r)
+          );
+          break;
+      }
+      return {
+        ...o,
+        cells: i,
+        startTile: m,
+        endTile: p,
+        obstacleTiles: g
+      };
+    });
+  },
+  resetCells: () => {
+    e((t) => ({
+      ...t,
+      cells: t.cells.map(
+        (r) => r.map((l) => ({
+          ...l,
+          state: h.Empty
+        }))
+      ),
+      startTile: null,
+      endTile: null,
+      obstacleTiles: [],
+      path: [],
+      visitedNodes: []
+    }));
+  },
+  handleFindPath: (t) => {
+    e((r) => {
+      const l = r.cells.flat().find((i) => i.state === h.Start), o = r.cells.flat().find((i) => i.state === h.End);
+      if (l && o) {
+        const i = r.cells.map(
+          (d) => d.map((c) => ({
+            row: c.row,
+            col: c.col,
+            state: c.state
+          }))
+        ), { path: m, visitedNodes: p } = ue(i, l, o, t);
+        return (async (d, c) => {
+          for (let f of c)
+            await new Promise((u) => setTimeout(u, 100)), e((u) => {
+              const s = u.cells.map(
+                (a) => a.map((n) => ({
+                  ...n,
+                  state: f.row === n.row && f.col === n.col && n.state === h.Empty ? h.Visited : n.state
+                }))
+              );
+              return {
+                ...u,
+                cells: s,
+                visitedNodes: [...u.visitedNodes, f]
+              };
+            });
+          for (let f of d)
+            await new Promise((u) => setTimeout(u, 250)), e((u) => {
+              const s = u.cells.map(
+                (a) => a.map((n) => ({
+                  ...n,
+                  state: f.row === n.row && f.col === n.col ? h.Path : n.state
+                }))
+              );
+              return {
+                ...u,
+                cells: s,
+                path: [...u.path, f]
+              };
+            });
+        })(m, p), { ...r, path: [], visitedNodes: [] };
+      }
+      return r;
+    });
+  },
+  setPath: (t) => {
+    e((r) => {
+      const l = r.cells.map(
+        (o) => o.map((i) => ({
+          ...i,
+          state: t.some((m) => m.row === i.row && m.col === i.col) ? h.Path : i.state
+        }))
+      );
+      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 === h.Empty ? h.Visited : i.state
+        }))
+      );
+      return {
+        ...r,
+        cells: l
+      };
+    });
+  }
+}), 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)
+}));
+const he = () => {
+  var u;
+  const { cells: e, activeButton: t, setCellState: r, setSelectedButtonState: l, visitedNodes: o, path: i } = K(), [m, p] = H({ width: window.innerWidth, height: window.innerHeight });
+  $(() => {
+    const s = () => {
+      p({ 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 h.Start:
+        l(h.End);
+        break;
+      case h.End:
+        l(h.Obstacle);
+        break;
+    }
+  }, d = (s, a) => {
+    const n = o.find((v) => v.row === s && v.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) / _;
+    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(
+    "div",
+    {
+      className: "grid-container",
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${((u = e[0]) == null ? void 0 : u.length) || 1}, ${f}px)`,
+        gridTemplateRows: `repeat(${e.length || 1}, ${f}px)`,
+        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, 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);
+          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)";
+          }
+          return /* @__PURE__ */ y(
+            "div",
+            {
+              className: "grid-cell",
+              onClick: () => g(a, v),
+              style: {
+                width: f,
+                height: f,
+                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 === h.Empty && (E.currentTarget.style.backgroundColor = "var(--bg-tertiary)", E.currentTarget.style.transform = "scale(1.02)");
+              },
+              onMouseLeave: (E) => {
+                n.state === h.Empty && (E.currentTarget.style.backgroundColor = b, E.currentTarget.style.transform = "scale(1)");
+              },
+              children: [
+                _ && /* @__PURE__ */ y("div", { className: "cell-values", children: [
+                  /* @__PURE__ */ y("div", { className: "value-h", children: [
+                    "h",
+                    N
+                  ] }),
+                  /* @__PURE__ */ y("div", { className: "value-f", children: [
+                    "f",
+                    C
+                  ] }),
+                  /* @__PURE__ */ y("div", { className: "value-g", children: [
+                    "g",
+                    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: "■" })
+              ]
+            },
+            `${a}-${v}`
+          );
+        })
+      )
+    }
+  ) });
+}, me = (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)";
+  }
+};
+const pe = () => {
+  const {
+    activeButton: e,
+    setSelectedButtonState: t,
+    resetCells: r,
+    rows: l,
+    columns: o,
+    setNumberOfRows: i,
+    setNumberOfColumns: m,
+    handleFindPath: p,
+    canTravelDiagonally: g,
+    setCanTravelDiagonally: d
+  } = K(), [c, f] = H(() => {
+    const w = localStorage.getItem("darkMode");
+    return w ? JSON.parse(w) : !1;
+  });
+  $(() => {
+    localStorage.setItem("darkMode", JSON.stringify(c)), document.documentElement.setAttribute("data-theme", c ? "dark" : "light");
+  }, [c]);
+  const u = () => {
+    f(!c);
+  }, s = [
+    { label: "Start", state: h.Start },
+    { label: "End", state: h.End },
+    { label: "Obstacle", state: h.Obstacle },
+    { label: "Clear", state: h.Empty },
+    { label: "Reset", state: null }
+  ], a = (w) => {
+    w === null ? n() : t(w);
+  }, n = () => {
+    r(), t(h.Start);
+  }, v = () => {
+    p(g);
+  };
+  return /* @__PURE__ */ S("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(
+        "button",
+        {
+          className: `control-button ${w.label.toLowerCase()} ${e === w.state ? "active" : ""}`,
+          onClick: () => a(w.state),
+          children: w.label
+        },
+        _
+      )) })
+    ] }),
+    /* @__PURE__ */ y("div", { className: "control-group actions", children: [
+      /* @__PURE__ */ S("h3", { className: "group-title", children: "Actions" }),
+      /* @__PURE__ */ y("div", { className: "button-group", children: [
+        /* @__PURE__ */ S(
+          "button",
+          {
+            className: "control-button find-path",
+            onClick: v,
+            children: "Find Path"
+          }
+        ),
+        /* @__PURE__ */ S(
+          "button",
+          {
+            className: `control-button diagonal ${g ? "active" : ""}`,
+            onClick: () => d(!g),
+            children: g ? "Diagonal On" : "Diagonal Off"
+          }
+        ),
+        /* @__PURE__ */ S(
+          "button",
+          {
+            className: `control-button theme-toggle ${c ? "active" : ""}`,
+            onClick: u,
+            title: c ? "Switch to light mode" : "Switch to dark mode",
+            children: c ? "☀️ Light" : "🌙 Dark"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ y("div", { className: "control-group size", children: [
+      /* @__PURE__ */ S("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__ */ y("div", { className: "size-buttons", children: [
+            /* @__PURE__ */ S(
+              "button",
+              {
+                className: "size-button",
+                onClick: () => i(Math.max(5, l - 1)),
+                disabled: l <= 5,
+                children: "−"
+              }
+            ),
+            /* @__PURE__ */ S("span", { className: "size-value", children: l }),
+            /* @__PURE__ */ S(
+              "button",
+              {
+                className: "size-button",
+                onClick: () => i(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__ */ y("div", { className: "size-buttons", children: [
+            /* @__PURE__ */ S(
+              "button",
+              {
+                className: "size-button",
+                onClick: () => m(Math.max(5, o - 1)),
+                disabled: o <= 5,
+                children: "−"
+              }
+            ),
+            /* @__PURE__ */ S("span", { className: "size-value", children: o }),
+            /* @__PURE__ */ S(
+              "button",
+              {
+                className: "size-button",
+                onClick: () => m(Math.min(50, o + 1)),
+                disabled: o >= 50,
+                children: "+"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}, 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, {}) })
+] });
+function Se() {
+  return /* @__PURE__ */ S(ve, {});
+}
+export {
+  Se as AStarVisualizer,
+  h as CellState,
+  ve as Layout
+};

package/dist/astar-visualizer.umd.cjs

@@ -0,0 +1,33 @@
+(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 x=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?x(e):x;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
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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={};/**
+ * @license React
+ * use-sync-external-store-shim.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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}/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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={};/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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 ve=!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 P=(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:P(e,t),f:P(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=P(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)})),we="",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)"}},Se="",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"})});

package/dist/style.css

@@ -0,0 +1 @@
+.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}}

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "astar-visualizer",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A React component for visualizing A* pathfinding algorithm",
+  "main": "./dist/astar-visualizer.umd.cjs",
+  "module": "./dist/astar-visualizer.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/astar-visualizer.js",
+      "require": "./dist/astar-visualizer.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "astar",
+    "pathfinding",
+    "visualizer",
+    "react",
+    "algorithm",
+    "visualization"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "tsc --project tsconfig.lib.json && vite build --config vite.config.lib.ts",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "format": "prettier --write .",
+    "test": "vitest",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "framer-motion": "^10.16.4",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "storybook": "^7.4.2",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vitest": "^3.0.4"
+  }
+}