@wizzard-packages/devtools 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Aziz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,418 @@
+'use strict';
+
+var react = require('react');
+var react$1 = require('@wizzard-packages/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/WizardDevTools.tsx
+function WizardDevTools() {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [activeTab, setActiveTab] = react.useState("state");
+  const { data, allErrors, store, ...state } = react$1.useWizardContext();
+  const [logs, setLogs] = react.useState([]);
+  react.useEffect(() => {
+    if (!store) return;
+    const s = store;
+    return s.subscribeToActions((action) => {
+      setLogs(
+        (prev) => [
+          {
+            timestamp: Date.now(),
+            action,
+            state: store.getSnapshot()
+          },
+          ...prev
+        ].slice(0, 50)
+      );
+    });
+  }, [store]);
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const search = new URLSearchParams(window.location.search);
+      const hash = window.location.hash;
+      const hashParams = hash.includes("?") ? hash.split("?")[1] : "";
+      const hashSearch = new URLSearchParams(hashParams);
+      if (search.get("devtools") === "true" || hashSearch.get("devtools") === "true") {
+        setIsOpen(true);
+      }
+    }
+  }, []);
+  if (!isOpen) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        "data-testid": "wizard-devtools-toggle",
+        onClick: () => setIsOpen(true),
+        style: {
+          position: "fixed",
+          bottom: "20px",
+          right: "20px",
+          zIndex: 9999,
+          padding: "10px 15px",
+          borderRadius: "50px",
+          background: "rgba(37, 99, 235, 0.9)",
+          color: "white",
+          border: "none",
+          boxShadow: "0 4px 15px rgba(0,0,0,0.2)",
+          cursor: "pointer",
+          fontWeight: "bold",
+          fontSize: "12px",
+          backdropFilter: "blur(5px)"
+        },
+        children: "Wizard DevTools"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "wizard-devtools",
+      style: {
+        position: "fixed",
+        bottom: "20px",
+        right: "20px",
+        width: "400px",
+        height: "500px",
+        backgroundColor: "rgba(15, 23, 42, 0.9)",
+        backdropFilter: "blur(12px)",
+        borderRadius: "16px",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "column",
+        color: "#e2e8f0",
+        fontFamily: "Inter, sans-serif",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              background: "rgba(255, 255, 255, 0.03)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: "14px" }, children: "Wizard DevTools" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    color: "#94a3b8",
+                    cursor: "pointer",
+                    fontSize: "18px"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              background: "rgba(255, 255, 255, 0.02)"
+            },
+            children: ["state", "actions", "errors"].map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                "data-testid": `devtools-tab-${tab}`,
+                onClick: () => setActiveTab(tab),
+                style: {
+                  flex: 1,
+                  padding: "10px",
+                  background: activeTab === tab ? "rgba(37, 99, 235, 0.2)" : "none",
+                  border: "none",
+                  color: activeTab === tab ? "#60a5fa" : "#94a3b8",
+                  borderBottom: activeTab === tab ? "2px solid #3b82f6" : "none",
+                  cursor: "pointer",
+                  fontSize: "12px",
+                  textTransform: "capitalize",
+                  fontWeight: activeTab === tab ? 600 : 400
+                },
+                children: tab
+              },
+              tab
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              fontSize: "12px"
+            },
+            children: [
+              activeTab === "state" && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(Section, { title: "Navigation", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyVal, { label: "Current Step", value: state.currentStepId }),
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyVal, { label: "Index", value: state.currentStepIndex }),
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyVal, { label: "Progress", value: `${state.progress}%` }),
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyVal, { label: "Total Steps", value: state.activeStepsCount }),
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyVal, { label: "Is Loading", value: String(state.isLoading) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(KeyVal, { label: "Is Busy", value: String(state.isBusy) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "History", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#94a3b8" }, children: state.history.join(" \u2192 ") || "Empty" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Data", children: /* @__PURE__ */ jsxRuntime.jsx(JsonView, { data }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(Section, { title: "Meta", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  JsonView,
+                  {
+                    data: {
+                      visited: Array.from(state.visitedSteps),
+                      completed: Array.from(state.completedSteps),
+                      busy: Array.from(state.busySteps)
+                    }
+                  }
+                ) })
+              ] }),
+              activeTab === "errors" && /* @__PURE__ */ jsxRuntime.jsx("div", { children: Object.keys(allErrors).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    color: "#94a3b8",
+                    textAlign: "center",
+                    marginTop: "20px"
+                  },
+                  children: "No active errors"
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(JsonView, { data: allErrors }) }),
+              activeTab === "actions" && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-testid": "devtools-action-list",
+                  style: { display: "flex", flexDirection: "column", gap: "8px" },
+                  children: logs.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        color: "#94a3b8",
+                        textAlign: "center",
+                        marginTop: "20px"
+                      },
+                      children: "No actions recorded yet"
+                    }
+                  ) : logs.map((log, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    ActionLogItem,
+                    {
+                      log,
+                      onJump: (s) => store.dispatch({
+                        type: "RESTORE_SNAPSHOT",
+                        payload: { snapshot: s }
+                      })
+                    },
+                    log.timestamp + i
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              fontSize: "10px",
+              color: "#64748b",
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              background: "rgba(255, 255, 255, 0.02)",
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "v2.1.0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Strict Mode: Active" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ActionLogItem = ({ log, onJump }) => {
+  const [isExpanded, setIsExpanded] = react.useState(false);
+  const time = new Date(log.timestamp).toLocaleTimeString();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-testid": "action-item",
+      style: {
+        background: "rgba(255, 255, 255, 0.05)",
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid rgba(255, 255, 255, 0.05)"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-testid": "action-item-header",
+            onClick: () => onJump(log.state),
+            style: {
+              padding: "8px 12px",
+              display: "flex",
+              justifyContent: "space-between",
+              cursor: "pointer",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#64748b", fontSize: "10px" }, children: time }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { "data-testid": "action-type", style: { color: "#60a5fa", fontWeight: 600 }, children: log.action.type }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    "data-testid": "jump-button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onJump(log.state);
+                    },
+                    style: {
+                      padding: "2px 6px",
+                      fontSize: "9px",
+                      background: "#1e293b",
+                      border: "1px solid #334155",
+                      color: "#60a5fa",
+                      borderRadius: "4px",
+                      cursor: "pointer"
+                    },
+                    children: "Jump"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    color: "#475569",
+                    transform: isExpanded ? "rotate(180deg)" : "none",
+                    transition: "transform 0.2s",
+                    padding: "4px"
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setIsExpanded(!isExpanded);
+                  },
+                  children: "\u25BE"
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: "0 12px 12px 12px",
+              borderTop: "1px solid rgba(255, 255, 255, 0.05)"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "8px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "#94a3b8",
+                      marginBottom: "4px",
+                      fontSize: "10px"
+                    },
+                    children: "Payload:"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(JsonView, { data: log.action.payload })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "8px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "#94a3b8",
+                      marginBottom: "4px",
+                      fontSize: "10px"
+                    },
+                    children: "State after:"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(JsonView, { data: log.state })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Section = ({ title, children }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "20px" }, children: [
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "h4",
+    {
+      style: {
+        margin: "0 0 8px 0",
+        color: "#3b82f6",
+        fontSize: "11px",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em"
+      },
+      children: title
+    }
+  ),
+  children
+] });
+var KeyVal = ({ label, value }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "4px"
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#94a3b8" }, children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#f8fafc", fontWeight: 500 }, children: value })
+    ]
+  }
+);
+var JsonView = ({ data }) => {
+  const replacer = (_key, value) => {
+    if (value instanceof Set) {
+      return Array.from(value);
+    }
+    return value;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "pre",
+    {
+      style: {
+        background: "rgba(0, 0, 0, 0.3)",
+        padding: "10px",
+        borderRadius: "8px",
+        overflowX: "auto",
+        color: "#60a5fa",
+        border: "1px solid rgba(255, 255, 255, 0.05)",
+        margin: 0
+      },
+      children: JSON.stringify(data, replacer, 2)
+    }
+  );
+};
+
+exports.WizardDevTools = WizardDevTools;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/WizardDevTools.tsx"],"names":["useState","useWizardContext","useEffect","jsx","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useWizardContext } from '@wizzard-packages/react';\nimport type { WizardAction, IWizardStore } from '@wizzard-packages/core';\n\ninterface IActionLog {\n  timestamp: number;\n  action: WizardAction<any, any>;\n  state: any;\n}\n\nexport function WizardDevTools() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeTab, setActiveTab] = useState<'state' | 'actions' | 'errors'>('state');\n  const { data, allErrors, store, ...state } = useWizardContext();\n  const [logs, setLogs] = useState<IActionLog[]>([]);\n\n  useEffect(() => {\n    if (!store) return;\n    const s = store as IWizardStore<any, any>;\n    return s.subscribeToActions((action: WizardAction<any, any>) => {\n      setLogs((prev) =>\n        [\n          {\n            timestamp: Date.now(),\n            action,\n            state: store.getSnapshot(),\n          },\n          ...prev,\n        ].slice(0, 50)\n      );\n    });\n  }, [store]);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      const search = new URLSearchParams(window.location.search);\n      const hash = window.location.hash;\n      const hashParams = hash.includes('?') ? hash.split('?')[1] : '';\n      const hashSearch = new URLSearchParams(hashParams);\n\n      if (search.get('devtools') === 'true' || hashSearch.get('devtools') === 'true') {\n        setIsOpen(true);\n      }\n    }\n  }, []);\n\n  if (!isOpen) {\n    return (\n      <button\n        data-testid=\"wizard-devtools-toggle\"\n        onClick={() => setIsOpen(true)}\n        style={{\n          position: 'fixed',\n          bottom: '20px',\n          right: '20px',\n          zIndex: 9999,\n          padding: '10px 15px',\n          borderRadius: '50px',\n          background: 'rgba(37, 99, 235, 0.9)',\n          color: 'white',\n          border: 'none',\n          boxShadow: '0 4px 15px rgba(0,0,0,0.2)',\n          cursor: 'pointer',\n          fontWeight: 'bold',\n          fontSize: '12px',\n          backdropFilter: 'blur(5px)',\n        }}\n      >\n        Wizard DevTools\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"wizard-devtools\"\n      style={{\n        position: 'fixed',\n        bottom: '20px',\n        right: '20px',\n        width: '400px',\n        height: '500px',\n        backgroundColor: 'rgba(15, 23, 42, 0.9)',\n        backdropFilter: 'blur(12px)',\n        borderRadius: '16px',\n        border: '1px solid rgba(255, 255, 255, 0.1)',\n        boxShadow: '0 10px 40px rgba(0,0,0,0.5)',\n        zIndex: 9999,\n        display: 'flex',\n        flexDirection: 'column',\n        color: '#e2e8f0',\n        fontFamily: 'Inter, sans-serif',\n        overflow: 'hidden',\n      }}\n    >\n      <div\n        style={{\n          padding: '12px 16px',\n          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          background: 'rgba(255, 255, 255, 0.03)',\n        }}\n      >\n        <span style={{ fontWeight: 600, fontSize: '14px' }}>Wizard DevTools</span>\n        <button\n          onClick={() => setIsOpen(false)}\n          style={{\n            background: 'none',\n            border: 'none',\n            color: '#94a3b8',\n            cursor: 'pointer',\n            fontSize: '18px',\n          }}\n        >\n          &times;\n        </button>\n      </div>\n\n      <div\n        style={{\n          display: 'flex',\n          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n          background: 'rgba(255, 255, 255, 0.02)',\n        }}\n      >\n        {['state', 'actions', 'errors'].map((tab) => (\n          <button\n            key={tab}\n            data-testid={`devtools-tab-${tab}`}\n            onClick={() => setActiveTab(tab as any)}\n            style={{\n              flex: 1,\n              padding: '10px',\n              background: activeTab === tab ? 'rgba(37, 99, 235, 0.2)' : 'none',\n              border: 'none',\n              color: activeTab === tab ? '#60a5fa' : '#94a3b8',\n              borderBottom: activeTab === tab ? '2px solid #3b82f6' : 'none',\n              cursor: 'pointer',\n              fontSize: '12px',\n              textTransform: 'capitalize',\n              fontWeight: activeTab === tab ? 600 : 400,\n            }}\n          >\n            {tab}\n          </button>\n        ))}\n      </div>\n\n      <div\n        style={{\n          flex: 1,\n          overflowY: 'auto',\n          padding: '16px',\n          fontSize: '12px',\n        }}\n      >\n        {activeTab === 'state' && (\n          <div>\n            <Section title=\"Navigation\">\n              <KeyVal label=\"Current Step\" value={state.currentStepId} />\n              <KeyVal label=\"Index\" value={state.currentStepIndex} />\n              <KeyVal label=\"Progress\" value={`${state.progress}%`} />\n              <KeyVal label=\"Total Steps\" value={state.activeStepsCount} />\n              <KeyVal label=\"Is Loading\" value={String(state.isLoading)} />\n              <KeyVal label=\"Is Busy\" value={String(state.isBusy)} />\n            </Section>\n\n            <Section title=\"History\">\n              <div style={{ color: '#94a3b8' }}>{state.history.join(' → ') || 'Empty'}</div>\n            </Section>\n\n            <Section title=\"Data\">\n              <JsonView data={data} />\n            </Section>\n\n            <Section title=\"Meta\">\n              <JsonView\n                data={{\n                  visited: Array.from(state.visitedSteps),\n                  completed: Array.from(state.completedSteps),\n                  busy: Array.from(state.busySteps),\n                }}\n              />\n            </Section>\n          </div>\n        )}\n\n        {activeTab === 'errors' && (\n          <div>\n            {Object.keys(allErrors).length === 0 ? (\n              <div\n                style={{\n                  color: '#94a3b8',\n                  textAlign: 'center',\n                  marginTop: '20px',\n                }}\n              >\n                No active errors\n              </div>\n            ) : (\n              <JsonView data={allErrors} />\n            )}\n          </div>\n        )}\n\n        {activeTab === 'actions' && (\n          <div\n            data-testid=\"devtools-action-list\"\n            style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}\n          >\n            {logs.length === 0 ? (\n              <div\n                style={{\n                  color: '#94a3b8',\n                  textAlign: 'center',\n                  marginTop: '20px',\n                }}\n              >\n                No actions recorded yet\n              </div>\n            ) : (\n              logs.map((log, i) => (\n                <ActionLogItem\n                  key={log.timestamp + i}\n                  log={log}\n                  onJump={(s) =>\n                    store.dispatch({\n                      type: 'RESTORE_SNAPSHOT',\n                      payload: { snapshot: s },\n                    })\n                  }\n                />\n              ))\n            )}\n          </div>\n        )}\n      </div>\n\n      <div\n        style={{\n          padding: '8px 16px',\n          fontSize: '10px',\n          color: '#64748b',\n          borderTop: '1px solid rgba(255, 255, 255, 0.1)',\n          background: 'rgba(255, 255, 255, 0.02)',\n          display: 'flex',\n          justifyContent: 'space-between',\n        }}\n      >\n        <span>v2.1.0</span>\n        <span>Strict Mode: Active</span>\n      </div>\n    </div>\n  );\n}\n\nconst ActionLogItem: React.FC<{\n  log: IActionLog;\n  onJump: (state: any) => void;\n}> = ({ log, onJump }) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const time = new Date(log.timestamp).toLocaleTimeString();\n\n  return (\n    <div\n      data-testid=\"action-item\"\n      style={{\n        background: 'rgba(255, 255, 255, 0.05)',\n        borderRadius: '8px',\n        overflow: 'hidden',\n        border: '1px solid rgba(255, 255, 255, 0.05)',\n      }}\n    >\n      <div\n        data-testid=\"action-item-header\"\n        onClick={() => onJump(log.state)}\n        style={{\n          padding: '8px 12px',\n          display: 'flex',\n          justifyContent: 'space-between',\n          cursor: 'pointer',\n          alignItems: 'center',\n        }}\n      >\n        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n          <span style={{ color: '#64748b', fontSize: '10px' }}>{time}</span>\n          <span data-testid=\"action-type\" style={{ color: '#60a5fa', fontWeight: 600 }}>\n            {log.action.type}\n          </span>\n          <button\n            data-testid=\"jump-button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onJump(log.state);\n            }}\n            style={{\n              padding: '2px 6px',\n              fontSize: '9px',\n              background: '#1e293b',\n              border: '1px solid #334155',\n              color: '#60a5fa',\n              borderRadius: '4px',\n              cursor: 'pointer',\n            }}\n          >\n            Jump\n          </button>\n        </div>\n        <span\n          style={{\n            color: '#475569',\n            transform: isExpanded ? 'rotate(180deg)' : 'none',\n            transition: 'transform 0.2s',\n            padding: '4px',\n          }}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsExpanded(!isExpanded);\n          }}\n        >\n          ▾\n        </span>\n      </div>\n      {isExpanded && (\n        <div\n          style={{\n            padding: '0 12px 12px 12px',\n            borderTop: '1px solid rgba(255, 255, 255, 0.05)',\n          }}\n        >\n          <div style={{ marginTop: '8px' }}>\n            <div\n              style={{\n                color: '#94a3b8',\n                marginBottom: '4px',\n                fontSize: '10px',\n              }}\n            >\n              Payload:\n            </div>\n            <JsonView data={log.action.payload} />\n          </div>\n          <div style={{ marginTop: '8px' }}>\n            <div\n              style={{\n                color: '#94a3b8',\n                marginBottom: '4px',\n                fontSize: '10px',\n              }}\n            >\n              State after:\n            </div>\n            <JsonView data={log.state} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst Section: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (\n  <div style={{ marginBottom: '20px' }}>\n    <h4\n      style={{\n        margin: '0 0 8px 0',\n        color: '#3b82f6',\n        fontSize: '11px',\n        textTransform: 'uppercase',\n        letterSpacing: '0.05em',\n      }}\n    >\n      {title}\n    </h4>\n    {children}\n  </div>\n);\n\nconst KeyVal: React.FC<{ label: string; value: any }> = ({ label, value }) => (\n  <div\n    style={{\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '4px',\n    }}\n  >\n    <span style={{ color: '#94a3b8' }}>{label}:</span>\n    <span style={{ color: '#f8fafc', fontWeight: 500 }}>{value}</span>\n  </div>\n);\n\nconst JsonView: React.FC<{ data: any }> = ({ data }) => {\n  const replacer = (_key: string, value: any) => {\n    if (value instanceof Set) {\n      return Array.from(value);\n    }\n    return value;\n  };\n\n  return (\n    <pre\n      style={{\n        background: 'rgba(0, 0, 0, 0.3)',\n        padding: '10px',\n        borderRadius: '8px',\n        overflowX: 'auto',\n        color: '#60a5fa',\n        border: '1px solid rgba(255, 255, 255, 0.05)',\n        margin: 0,\n      }}\n    >\n      {JSON.stringify(data, replacer, 2)}\n    </pre>\n  );\n};\n"]}

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function WizardDevTools(): react_jsx_runtime.JSX.Element;
+
+export { WizardDevTools };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function WizardDevTools(): react_jsx_runtime.JSX.Element;
+
+export { WizardDevTools };

package/dist/index.js

@@ -0,0 +1,416 @@
+import { useState, useEffect } from 'react';
+import { useWizardContext } from '@wizzard-packages/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/WizardDevTools.tsx
+function WizardDevTools() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("state");
+  const { data, allErrors, store, ...state } = useWizardContext();
+  const [logs, setLogs] = useState([]);
+  useEffect(() => {
+    if (!store) return;
+    const s = store;
+    return s.subscribeToActions((action) => {
+      setLogs(
+        (prev) => [
+          {
+            timestamp: Date.now(),
+            action,
+            state: store.getSnapshot()
+          },
+          ...prev
+        ].slice(0, 50)
+      );
+    });
+  }, [store]);
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const search = new URLSearchParams(window.location.search);
+      const hash = window.location.hash;
+      const hashParams = hash.includes("?") ? hash.split("?")[1] : "";
+      const hashSearch = new URLSearchParams(hashParams);
+      if (search.get("devtools") === "true" || hashSearch.get("devtools") === "true") {
+        setIsOpen(true);
+      }
+    }
+  }, []);
+  if (!isOpen) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "data-testid": "wizard-devtools-toggle",
+        onClick: () => setIsOpen(true),
+        style: {
+          position: "fixed",
+          bottom: "20px",
+          right: "20px",
+          zIndex: 9999,
+          padding: "10px 15px",
+          borderRadius: "50px",
+          background: "rgba(37, 99, 235, 0.9)",
+          color: "white",
+          border: "none",
+          boxShadow: "0 4px 15px rgba(0,0,0,0.2)",
+          cursor: "pointer",
+          fontWeight: "bold",
+          fontSize: "12px",
+          backdropFilter: "blur(5px)"
+        },
+        children: "Wizard DevTools"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "wizard-devtools",
+      style: {
+        position: "fixed",
+        bottom: "20px",
+        right: "20px",
+        width: "400px",
+        height: "500px",
+        backgroundColor: "rgba(15, 23, 42, 0.9)",
+        backdropFilter: "blur(12px)",
+        borderRadius: "16px",
+        border: "1px solid rgba(255, 255, 255, 0.1)",
+        boxShadow: "0 10px 40px rgba(0,0,0,0.5)",
+        zIndex: 9999,
+        display: "flex",
+        flexDirection: "column",
+        color: "#e2e8f0",
+        fontFamily: "Inter, sans-serif",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "12px 16px",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              background: "rgba(255, 255, 255, 0.03)"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "14px" }, children: "Wizard DevTools" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setIsOpen(false),
+                  style: {
+                    background: "none",
+                    border: "none",
+                    color: "#94a3b8",
+                    cursor: "pointer",
+                    fontSize: "18px"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
+              background: "rgba(255, 255, 255, 0.02)"
+            },
+            children: ["state", "actions", "errors"].map((tab) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                "data-testid": `devtools-tab-${tab}`,
+                onClick: () => setActiveTab(tab),
+                style: {
+                  flex: 1,
+                  padding: "10px",
+                  background: activeTab === tab ? "rgba(37, 99, 235, 0.2)" : "none",
+                  border: "none",
+                  color: activeTab === tab ? "#60a5fa" : "#94a3b8",
+                  borderBottom: activeTab === tab ? "2px solid #3b82f6" : "none",
+                  cursor: "pointer",
+                  fontSize: "12px",
+                  textTransform: "capitalize",
+                  fontWeight: activeTab === tab ? 600 : 400
+                },
+                children: tab
+              },
+              tab
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px",
+              fontSize: "12px"
+            },
+            children: [
+              activeTab === "state" && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs(Section, { title: "Navigation", children: [
+                  /* @__PURE__ */ jsx(KeyVal, { label: "Current Step", value: state.currentStepId }),
+                  /* @__PURE__ */ jsx(KeyVal, { label: "Index", value: state.currentStepIndex }),
+                  /* @__PURE__ */ jsx(KeyVal, { label: "Progress", value: `${state.progress}%` }),
+                  /* @__PURE__ */ jsx(KeyVal, { label: "Total Steps", value: state.activeStepsCount }),
+                  /* @__PURE__ */ jsx(KeyVal, { label: "Is Loading", value: String(state.isLoading) }),
+                  /* @__PURE__ */ jsx(KeyVal, { label: "Is Busy", value: String(state.isBusy) })
+                ] }),
+                /* @__PURE__ */ jsx(Section, { title: "History", children: /* @__PURE__ */ jsx("div", { style: { color: "#94a3b8" }, children: state.history.join(" \u2192 ") || "Empty" }) }),
+                /* @__PURE__ */ jsx(Section, { title: "Data", children: /* @__PURE__ */ jsx(JsonView, { data }) }),
+                /* @__PURE__ */ jsx(Section, { title: "Meta", children: /* @__PURE__ */ jsx(
+                  JsonView,
+                  {
+                    data: {
+                      visited: Array.from(state.visitedSteps),
+                      completed: Array.from(state.completedSteps),
+                      busy: Array.from(state.busySteps)
+                    }
+                  }
+                ) })
+              ] }),
+              activeTab === "errors" && /* @__PURE__ */ jsx("div", { children: Object.keys(allErrors).length === 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    color: "#94a3b8",
+                    textAlign: "center",
+                    marginTop: "20px"
+                  },
+                  children: "No active errors"
+                }
+              ) : /* @__PURE__ */ jsx(JsonView, { data: allErrors }) }),
+              activeTab === "actions" && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-testid": "devtools-action-list",
+                  style: { display: "flex", flexDirection: "column", gap: "8px" },
+                  children: logs.length === 0 ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        color: "#94a3b8",
+                        textAlign: "center",
+                        marginTop: "20px"
+                      },
+                      children: "No actions recorded yet"
+                    }
+                  ) : logs.map((log, i) => /* @__PURE__ */ jsx(
+                    ActionLogItem,
+                    {
+                      log,
+                      onJump: (s) => store.dispatch({
+                        type: "RESTORE_SNAPSHOT",
+                        payload: { snapshot: s }
+                      })
+                    },
+                    log.timestamp + i
+                  ))
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "8px 16px",
+              fontSize: "10px",
+              color: "#64748b",
+              borderTop: "1px solid rgba(255, 255, 255, 0.1)",
+              background: "rgba(255, 255, 255, 0.02)",
+              display: "flex",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "v2.1.0" }),
+              /* @__PURE__ */ jsx("span", { children: "Strict Mode: Active" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ActionLogItem = ({ log, onJump }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const time = new Date(log.timestamp).toLocaleTimeString();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "action-item",
+      style: {
+        background: "rgba(255, 255, 255, 0.05)",
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid rgba(255, 255, 255, 0.05)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "action-item-header",
+            onClick: () => onJump(log.state),
+            style: {
+              padding: "8px 12px",
+              display: "flex",
+              justifyContent: "space-between",
+              cursor: "pointer",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: "10px" }, children: time }),
+                /* @__PURE__ */ jsx("span", { "data-testid": "action-type", style: { color: "#60a5fa", fontWeight: 600 }, children: log.action.type }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "data-testid": "jump-button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onJump(log.state);
+                    },
+                    style: {
+                      padding: "2px 6px",
+                      fontSize: "9px",
+                      background: "#1e293b",
+                      border: "1px solid #334155",
+                      color: "#60a5fa",
+                      borderRadius: "4px",
+                      cursor: "pointer"
+                    },
+                    children: "Jump"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    color: "#475569",
+                    transform: isExpanded ? "rotate(180deg)" : "none",
+                    transition: "transform 0.2s",
+                    padding: "4px"
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setIsExpanded(!isExpanded);
+                  },
+                  children: "\u25BE"
+                }
+              )
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "0 12px 12px 12px",
+              borderTop: "1px solid rgba(255, 255, 255, 0.05)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "#94a3b8",
+                      marginBottom: "4px",
+                      fontSize: "10px"
+                    },
+                    children: "Payload:"
+                  }
+                ),
+                /* @__PURE__ */ jsx(JsonView, { data: log.action.payload })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { marginTop: "8px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      color: "#94a3b8",
+                      marginBottom: "4px",
+                      fontSize: "10px"
+                    },
+                    children: "State after:"
+                  }
+                ),
+                /* @__PURE__ */ jsx(JsonView, { data: log.state })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
+  /* @__PURE__ */ jsx(
+    "h4",
+    {
+      style: {
+        margin: "0 0 8px 0",
+        color: "#3b82f6",
+        fontSize: "11px",
+        textTransform: "uppercase",
+        letterSpacing: "0.05em"
+      },
+      children: title
+    }
+  ),
+  children
+] });
+var KeyVal = ({ label, value }) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      display: "flex",
+      justifyContent: "space-between",
+      marginBottom: "4px"
+    },
+    children: [
+      /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8" }, children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("span", { style: { color: "#f8fafc", fontWeight: 500 }, children: value })
+    ]
+  }
+);
+var JsonView = ({ data }) => {
+  const replacer = (_key, value) => {
+    if (value instanceof Set) {
+      return Array.from(value);
+    }
+    return value;
+  };
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      style: {
+        background: "rgba(0, 0, 0, 0.3)",
+        padding: "10px",
+        borderRadius: "8px",
+        overflowX: "auto",
+        color: "#60a5fa",
+        border: "1px solid rgba(255, 255, 255, 0.05)",
+        margin: 0
+      },
+      children: JSON.stringify(data, replacer, 2)
+    }
+  );
+};
+
+export { WizardDevTools };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/WizardDevTools.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { useWizardContext } from '@wizzard-packages/react';\nimport type { WizardAction, IWizardStore } from '@wizzard-packages/core';\n\ninterface IActionLog {\n  timestamp: number;\n  action: WizardAction<any, any>;\n  state: any;\n}\n\nexport function WizardDevTools() {\n  const [isOpen, setIsOpen] = useState(false);\n  const [activeTab, setActiveTab] = useState<'state' | 'actions' | 'errors'>('state');\n  const { data, allErrors, store, ...state } = useWizardContext();\n  const [logs, setLogs] = useState<IActionLog[]>([]);\n\n  useEffect(() => {\n    if (!store) return;\n    const s = store as IWizardStore<any, any>;\n    return s.subscribeToActions((action: WizardAction<any, any>) => {\n      setLogs((prev) =>\n        [\n          {\n            timestamp: Date.now(),\n            action,\n            state: store.getSnapshot(),\n          },\n          ...prev,\n        ].slice(0, 50)\n      );\n    });\n  }, [store]);\n\n  useEffect(() => {\n    if (typeof window !== 'undefined') {\n      const search = new URLSearchParams(window.location.search);\n      const hash = window.location.hash;\n      const hashParams = hash.includes('?') ? hash.split('?')[1] : '';\n      const hashSearch = new URLSearchParams(hashParams);\n\n      if (search.get('devtools') === 'true' || hashSearch.get('devtools') === 'true') {\n        setIsOpen(true);\n      }\n    }\n  }, []);\n\n  if (!isOpen) {\n    return (\n      <button\n        data-testid=\"wizard-devtools-toggle\"\n        onClick={() => setIsOpen(true)}\n        style={{\n          position: 'fixed',\n          bottom: '20px',\n          right: '20px',\n          zIndex: 9999,\n          padding: '10px 15px',\n          borderRadius: '50px',\n          background: 'rgba(37, 99, 235, 0.9)',\n          color: 'white',\n          border: 'none',\n          boxShadow: '0 4px 15px rgba(0,0,0,0.2)',\n          cursor: 'pointer',\n          fontWeight: 'bold',\n          fontSize: '12px',\n          backdropFilter: 'blur(5px)',\n        }}\n      >\n        Wizard DevTools\n      </button>\n    );\n  }\n\n  return (\n    <div\n      data-testid=\"wizard-devtools\"\n      style={{\n        position: 'fixed',\n        bottom: '20px',\n        right: '20px',\n        width: '400px',\n        height: '500px',\n        backgroundColor: 'rgba(15, 23, 42, 0.9)',\n        backdropFilter: 'blur(12px)',\n        borderRadius: '16px',\n        border: '1px solid rgba(255, 255, 255, 0.1)',\n        boxShadow: '0 10px 40px rgba(0,0,0,0.5)',\n        zIndex: 9999,\n        display: 'flex',\n        flexDirection: 'column',\n        color: '#e2e8f0',\n        fontFamily: 'Inter, sans-serif',\n        overflow: 'hidden',\n      }}\n    >\n      <div\n        style={{\n          padding: '12px 16px',\n          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          background: 'rgba(255, 255, 255, 0.03)',\n        }}\n      >\n        <span style={{ fontWeight: 600, fontSize: '14px' }}>Wizard DevTools</span>\n        <button\n          onClick={() => setIsOpen(false)}\n          style={{\n            background: 'none',\n            border: 'none',\n            color: '#94a3b8',\n            cursor: 'pointer',\n            fontSize: '18px',\n          }}\n        >\n          &times;\n        </button>\n      </div>\n\n      <div\n        style={{\n          display: 'flex',\n          borderBottom: '1px solid rgba(255, 255, 255, 0.1)',\n          background: 'rgba(255, 255, 255, 0.02)',\n        }}\n      >\n        {['state', 'actions', 'errors'].map((tab) => (\n          <button\n            key={tab}\n            data-testid={`devtools-tab-${tab}`}\n            onClick={() => setActiveTab(tab as any)}\n            style={{\n              flex: 1,\n              padding: '10px',\n              background: activeTab === tab ? 'rgba(37, 99, 235, 0.2)' : 'none',\n              border: 'none',\n              color: activeTab === tab ? '#60a5fa' : '#94a3b8',\n              borderBottom: activeTab === tab ? '2px solid #3b82f6' : 'none',\n              cursor: 'pointer',\n              fontSize: '12px',\n              textTransform: 'capitalize',\n              fontWeight: activeTab === tab ? 600 : 400,\n            }}\n          >\n            {tab}\n          </button>\n        ))}\n      </div>\n\n      <div\n        style={{\n          flex: 1,\n          overflowY: 'auto',\n          padding: '16px',\n          fontSize: '12px',\n        }}\n      >\n        {activeTab === 'state' && (\n          <div>\n            <Section title=\"Navigation\">\n              <KeyVal label=\"Current Step\" value={state.currentStepId} />\n              <KeyVal label=\"Index\" value={state.currentStepIndex} />\n              <KeyVal label=\"Progress\" value={`${state.progress}%`} />\n              <KeyVal label=\"Total Steps\" value={state.activeStepsCount} />\n              <KeyVal label=\"Is Loading\" value={String(state.isLoading)} />\n              <KeyVal label=\"Is Busy\" value={String(state.isBusy)} />\n            </Section>\n\n            <Section title=\"History\">\n              <div style={{ color: '#94a3b8' }}>{state.history.join(' → ') || 'Empty'}</div>\n            </Section>\n\n            <Section title=\"Data\">\n              <JsonView data={data} />\n            </Section>\n\n            <Section title=\"Meta\">\n              <JsonView\n                data={{\n                  visited: Array.from(state.visitedSteps),\n                  completed: Array.from(state.completedSteps),\n                  busy: Array.from(state.busySteps),\n                }}\n              />\n            </Section>\n          </div>\n        )}\n\n        {activeTab === 'errors' && (\n          <div>\n            {Object.keys(allErrors).length === 0 ? (\n              <div\n                style={{\n                  color: '#94a3b8',\n                  textAlign: 'center',\n                  marginTop: '20px',\n                }}\n              >\n                No active errors\n              </div>\n            ) : (\n              <JsonView data={allErrors} />\n            )}\n          </div>\n        )}\n\n        {activeTab === 'actions' && (\n          <div\n            data-testid=\"devtools-action-list\"\n            style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}\n          >\n            {logs.length === 0 ? (\n              <div\n                style={{\n                  color: '#94a3b8',\n                  textAlign: 'center',\n                  marginTop: '20px',\n                }}\n              >\n                No actions recorded yet\n              </div>\n            ) : (\n              logs.map((log, i) => (\n                <ActionLogItem\n                  key={log.timestamp + i}\n                  log={log}\n                  onJump={(s) =>\n                    store.dispatch({\n                      type: 'RESTORE_SNAPSHOT',\n                      payload: { snapshot: s },\n                    })\n                  }\n                />\n              ))\n            )}\n          </div>\n        )}\n      </div>\n\n      <div\n        style={{\n          padding: '8px 16px',\n          fontSize: '10px',\n          color: '#64748b',\n          borderTop: '1px solid rgba(255, 255, 255, 0.1)',\n          background: 'rgba(255, 255, 255, 0.02)',\n          display: 'flex',\n          justifyContent: 'space-between',\n        }}\n      >\n        <span>v2.1.0</span>\n        <span>Strict Mode: Active</span>\n      </div>\n    </div>\n  );\n}\n\nconst ActionLogItem: React.FC<{\n  log: IActionLog;\n  onJump: (state: any) => void;\n}> = ({ log, onJump }) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const time = new Date(log.timestamp).toLocaleTimeString();\n\n  return (\n    <div\n      data-testid=\"action-item\"\n      style={{\n        background: 'rgba(255, 255, 255, 0.05)',\n        borderRadius: '8px',\n        overflow: 'hidden',\n        border: '1px solid rgba(255, 255, 255, 0.05)',\n      }}\n    >\n      <div\n        data-testid=\"action-item-header\"\n        onClick={() => onJump(log.state)}\n        style={{\n          padding: '8px 12px',\n          display: 'flex',\n          justifyContent: 'space-between',\n          cursor: 'pointer',\n          alignItems: 'center',\n        }}\n      >\n        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n          <span style={{ color: '#64748b', fontSize: '10px' }}>{time}</span>\n          <span data-testid=\"action-type\" style={{ color: '#60a5fa', fontWeight: 600 }}>\n            {log.action.type}\n          </span>\n          <button\n            data-testid=\"jump-button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              onJump(log.state);\n            }}\n            style={{\n              padding: '2px 6px',\n              fontSize: '9px',\n              background: '#1e293b',\n              border: '1px solid #334155',\n              color: '#60a5fa',\n              borderRadius: '4px',\n              cursor: 'pointer',\n            }}\n          >\n            Jump\n          </button>\n        </div>\n        <span\n          style={{\n            color: '#475569',\n            transform: isExpanded ? 'rotate(180deg)' : 'none',\n            transition: 'transform 0.2s',\n            padding: '4px',\n          }}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsExpanded(!isExpanded);\n          }}\n        >\n          ▾\n        </span>\n      </div>\n      {isExpanded && (\n        <div\n          style={{\n            padding: '0 12px 12px 12px',\n            borderTop: '1px solid rgba(255, 255, 255, 0.05)',\n          }}\n        >\n          <div style={{ marginTop: '8px' }}>\n            <div\n              style={{\n                color: '#94a3b8',\n                marginBottom: '4px',\n                fontSize: '10px',\n              }}\n            >\n              Payload:\n            </div>\n            <JsonView data={log.action.payload} />\n          </div>\n          <div style={{ marginTop: '8px' }}>\n            <div\n              style={{\n                color: '#94a3b8',\n                marginBottom: '4px',\n                fontSize: '10px',\n              }}\n            >\n              State after:\n            </div>\n            <JsonView data={log.state} />\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst Section: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (\n  <div style={{ marginBottom: '20px' }}>\n    <h4\n      style={{\n        margin: '0 0 8px 0',\n        color: '#3b82f6',\n        fontSize: '11px',\n        textTransform: 'uppercase',\n        letterSpacing: '0.05em',\n      }}\n    >\n      {title}\n    </h4>\n    {children}\n  </div>\n);\n\nconst KeyVal: React.FC<{ label: string; value: any }> = ({ label, value }) => (\n  <div\n    style={{\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '4px',\n    }}\n  >\n    <span style={{ color: '#94a3b8' }}>{label}:</span>\n    <span style={{ color: '#f8fafc', fontWeight: 500 }}>{value}</span>\n  </div>\n);\n\nconst JsonView: React.FC<{ data: any }> = ({ data }) => {\n  const replacer = (_key: string, value: any) => {\n    if (value instanceof Set) {\n      return Array.from(value);\n    }\n    return value;\n  };\n\n  return (\n    <pre\n      style={{\n        background: 'rgba(0, 0, 0, 0.3)',\n        padding: '10px',\n        borderRadius: '8px',\n        overflowX: 'auto',\n        color: '#60a5fa',\n        border: '1px solid rgba(255, 255, 255, 0.05)',\n        margin: 0,\n      }}\n    >\n      {JSON.stringify(data, replacer, 2)}\n    </pre>\n  );\n};\n"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@wizzard-packages/devtools",
+  "version": "0.1.0",
+  "description": "DevTools UI for Wizzard Stepper.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "dependencies": {
+    "@wizzard-packages/react": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@wizzard-packages/core": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^4.0.16",
+    "@wizzard-packages/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "type-check": "tsc --noEmit"
+  }
+}