1850 lines
61 KiB
JavaScript
1850 lines
61 KiB
JavaScript
/*
|
|
* Extracted from browser-delivered Turbopack chunk: 2cd465e94e439d21.d295534e06.js
|
|
* Module id: 171656
|
|
* For reading/searching only; this factory depends on the original Turbopack runtime.
|
|
*/
|
|
|
|
const moduleFactory = (e) => {
|
|
"use strict";
|
|
e.s([], 216371);
|
|
class t {
|
|
constructor(e = {}) {
|
|
(this.stores = new Map()),
|
|
(this.listeners = new Map()),
|
|
(this.paused = !1),
|
|
(this.listenerIdCounter = 0),
|
|
(this.config = {
|
|
enabled: !0,
|
|
maxHistorySize: 100,
|
|
debugMode: !1,
|
|
autoRegister: !1,
|
|
logChanges: !1,
|
|
filters: { storeNames: [], excludeKeys: [] },
|
|
...e,
|
|
}),
|
|
this.config.debugMode &&
|
|
console.log("[StateMonitor] Initialized with config:", this.config);
|
|
}
|
|
register(e, t) {
|
|
if (!this.config.enabled) return;
|
|
if (this.stores.has(e))
|
|
return void console.warn(
|
|
`[StateMonitor] Store "${e}" is already registered`,
|
|
);
|
|
if (this.shouldFilterStore(e)) {
|
|
this.config.debugMode &&
|
|
console.log(`[StateMonitor] Store "${e}" filtered out`);
|
|
return;
|
|
}
|
|
let r = t.getState(),
|
|
o = t.subscribe((t, r) => {
|
|
if (this.paused) return;
|
|
let o = {
|
|
storeName: e,
|
|
oldState: r,
|
|
newState: t,
|
|
timestamp: Date.now(),
|
|
diff: this.computeDiff(r, t),
|
|
};
|
|
this.recordStateChange(e, o),
|
|
this.notifyListeners(o),
|
|
this.config.logChanges &&
|
|
console.log(`[StateMonitor] State changed in "${e}":`, o);
|
|
});
|
|
this.stores.set(e, {
|
|
name: e,
|
|
store: t,
|
|
unsubscribe: o,
|
|
currentState: r,
|
|
history: [],
|
|
}),
|
|
this.config.debugMode &&
|
|
console.log(`[StateMonitor] Registered store "${e}"`);
|
|
}
|
|
unregister(e) {
|
|
let t = this.stores.get(e);
|
|
t
|
|
? (t.unsubscribe(),
|
|
this.stores.delete(e),
|
|
this.config.debugMode &&
|
|
console.log(`[StateMonitor] Unregistered store "${e}"`))
|
|
: console.warn(`[StateMonitor] Store "${e}" is not registered`);
|
|
}
|
|
addListener(e) {
|
|
let t = `listener_${++this.listenerIdCounter}`;
|
|
return (
|
|
this.listeners.set(t, { ...e, id: t }),
|
|
this.config.debugMode &&
|
|
console.log(`[StateMonitor] Added listener "${t}"`),
|
|
t
|
|
);
|
|
}
|
|
removeListener(e) {
|
|
let t = this.listeners.delete(e);
|
|
this.config.debugMode &&
|
|
console.log(
|
|
`[StateMonitor] ${t ? "Removed" : "Failed to remove"} listener "${e}"`,
|
|
);
|
|
}
|
|
getState(e) {
|
|
let t = this.stores.get(e);
|
|
return null == t ? void 0 : t.store.getState();
|
|
}
|
|
getAllStates() {
|
|
let e = {};
|
|
for (let [t, r] of this.stores) e[t] = r.store.getState();
|
|
return e;
|
|
}
|
|
getHistory(e) {
|
|
if (e) {
|
|
let t = this.stores.get(e);
|
|
return (null == t ? void 0 : t.history) || [];
|
|
}
|
|
let t = [];
|
|
for (let e of this.stores.values()) t.push(...e.history);
|
|
return t.sort((e, t) => e.timestamp - t.timestamp);
|
|
}
|
|
clearHistory(e) {
|
|
if (e) {
|
|
let t = this.stores.get(e);
|
|
t && (t.history = []);
|
|
} else for (let e of this.stores.values()) e.history = [];
|
|
this.config.debugMode &&
|
|
console.log(
|
|
`[StateMonitor] Cleared history for ${e || "all stores"}`,
|
|
);
|
|
}
|
|
isRegistered(e) {
|
|
return this.stores.has(e);
|
|
}
|
|
getRegisteredStores() {
|
|
return Array.from(this.stores.keys());
|
|
}
|
|
pause() {
|
|
(this.paused = !0),
|
|
this.config.debugMode && console.log("[StateMonitor] Paused");
|
|
}
|
|
resume() {
|
|
(this.paused = !1),
|
|
this.config.debugMode && console.log("[StateMonitor] Resumed");
|
|
}
|
|
isPaused() {
|
|
return this.paused;
|
|
}
|
|
shouldFilterStore(e) {
|
|
let { filters: t } = this.config;
|
|
return (
|
|
!!t.storeNames && t.storeNames.length > 0 && !t.storeNames.includes(e)
|
|
);
|
|
}
|
|
recordStateChange(e, t) {
|
|
let r = this.stores.get(e);
|
|
r &&
|
|
(r.history.push(t),
|
|
(r.currentState = t.newState),
|
|
r.history.length > this.config.maxHistorySize && r.history.shift());
|
|
}
|
|
notifyListeners(e) {
|
|
for (let t of this.listeners.values())
|
|
if (!t.storeNames || t.storeNames.includes(e.storeName))
|
|
try {
|
|
t.callback(e);
|
|
} catch (e) {
|
|
console.error("[StateMonitor] Error in listener callback:", e);
|
|
}
|
|
}
|
|
computeDiff(e, t) {
|
|
if ("object" != typeof e || "object" != typeof t) return t;
|
|
let r = {};
|
|
for (let o of new Set([...Object.keys(e), ...Object.keys(t)])) {
|
|
let n = e[o],
|
|
i = t[o];
|
|
n !== i && (r[o] = i);
|
|
}
|
|
return r;
|
|
}
|
|
destroy() {
|
|
for (let e of this.stores.values()) e.unsubscribe();
|
|
this.stores.clear(),
|
|
this.listeners.clear(),
|
|
this.config.debugMode && console.log("[StateMonitor] Destroyed");
|
|
}
|
|
}
|
|
e.s(["StateMonitor", () => t], 805332);
|
|
var r = e.i(358379);
|
|
let o = null;
|
|
function n(e) {
|
|
return new t(e);
|
|
}
|
|
function i(e) {
|
|
return o || (o = new t(e)), o;
|
|
}
|
|
function a(e) {
|
|
let t = (0, r.useRef)();
|
|
return (
|
|
t.current || (t.current = i(e)),
|
|
(0, r.useEffect)(() => () => {}, []),
|
|
t.current
|
|
);
|
|
}
|
|
function s(e) {
|
|
let t = a(),
|
|
[o, n] = (0, r.useState)(0),
|
|
i = (0, r.useMemo)(() => t.getHistory(e), [t, e, o]);
|
|
return (
|
|
(0, r.useEffect)(() => {
|
|
let r = t.addListener({
|
|
id: `history-listener-${e || "all"}-${Date.now()}`,
|
|
callback: () => {
|
|
n((e) => e + 1);
|
|
},
|
|
storeNames: e ? [e] : void 0,
|
|
});
|
|
return () => {
|
|
t.removeListener(r);
|
|
};
|
|
}, [t, e]),
|
|
{
|
|
history: i,
|
|
clearHistory: (0, r.useCallback)(() => {
|
|
t.clearHistory(e), n((e) => e + 1);
|
|
}, [t, e]),
|
|
}
|
|
);
|
|
}
|
|
function l(e, t) {
|
|
let o = a(),
|
|
n = (0, r.useRef)(e);
|
|
(0, r.useEffect)(() => {
|
|
n.current = e;
|
|
}, [e]),
|
|
(0, r.useEffect)(() => {
|
|
let e = o.addListener({
|
|
id: "hook-listener",
|
|
callback: (e) => n.current(e),
|
|
storeNames: t,
|
|
});
|
|
return () => {
|
|
o.removeListener(e);
|
|
};
|
|
}, [o, t]);
|
|
}
|
|
function c(e, t, o = !0) {
|
|
let n = a(),
|
|
[i, s] = (0, r.useState)(!1);
|
|
return (
|
|
(0, r.useEffect)(
|
|
() => (
|
|
o && t && !n.isRegistered(e) && (n.register(e, t), s(!0)),
|
|
() => {
|
|
o && n.isRegistered(e) && (n.unregister(e), s(!1));
|
|
}
|
|
),
|
|
[n, e, t, o],
|
|
),
|
|
{
|
|
isRegistered: i,
|
|
register: (0, r.useCallback)(() => {
|
|
t && !n.isRegistered(e) && (n.register(e, t), s(!0));
|
|
}, [n, e, t]),
|
|
unregister: (0, r.useCallback)(() => {
|
|
n.isRegistered(e) && (n.unregister(e), s(!1));
|
|
}, [n, e]),
|
|
}
|
|
);
|
|
}
|
|
e.s(
|
|
[
|
|
"createStateMonitor",
|
|
() => n,
|
|
"getGlobalStateMonitor",
|
|
() => i,
|
|
"useStateHistory",
|
|
() => s,
|
|
"useStateListener",
|
|
() => l,
|
|
"useStateMonitor",
|
|
() => a,
|
|
"useStoreRegistration",
|
|
() => c,
|
|
],
|
|
506929,
|
|
);
|
|
let u = new Set(),
|
|
d = 0;
|
|
function f(e = {}) {
|
|
let t = i(e),
|
|
r = e.storeNameExtractor || ((e) => `zustand-store-${++d}`),
|
|
o = new Set(e.exclude || []);
|
|
return function (n) {
|
|
return function (i, ...a) {
|
|
let s = n(i, ...a);
|
|
if (u.has(s)) return s;
|
|
let l = r(s);
|
|
if (o.has(l)) return s;
|
|
try {
|
|
t.register(l, s),
|
|
u.add(s),
|
|
e.debugMode &&
|
|
console.log(`[StateMonitor] Auto-registered store: ${l}`);
|
|
} catch (e) {
|
|
console.error(
|
|
`[StateMonitor] Failed to auto-register store: ${l}`,
|
|
e,
|
|
);
|
|
}
|
|
return s;
|
|
};
|
|
};
|
|
}
|
|
function p(e = {}) {
|
|
if ("u" < typeof window) return;
|
|
let t = () => {
|
|
try {
|
|
let t = window.__ZUSTAND_MODULE__;
|
|
if (t && t.create) {
|
|
let r = f(e),
|
|
o = t.create;
|
|
return (
|
|
(t.create = r(o)),
|
|
e.debugMode &&
|
|
console.log(
|
|
"[StateMonitor] Global auto-register setup completed",
|
|
),
|
|
!0
|
|
);
|
|
}
|
|
} catch (t) {
|
|
e.debugMode &&
|
|
console.warn(
|
|
"[StateMonitor] Failed to setup global auto-register:",
|
|
t,
|
|
);
|
|
}
|
|
return !1;
|
|
};
|
|
t() || setTimeout(t, 100);
|
|
}
|
|
function g(e, t, r) {
|
|
let o = t(),
|
|
n = i(r);
|
|
try {
|
|
n.register(e, o),
|
|
(null == r ? void 0 : r.debugMode) &&
|
|
console.log(
|
|
`[StateMonitor] Auto-registered store with withAutoRegister: ${e}`,
|
|
);
|
|
} catch (t) {
|
|
console.error(`[StateMonitor] Failed to register store: ${e}`, t);
|
|
}
|
|
return o;
|
|
}
|
|
function m(e, t, r) {
|
|
return function (o) {
|
|
return g(e, () => o(() => t), r);
|
|
};
|
|
}
|
|
function h(e, t, r) {
|
|
let o = i(r);
|
|
try {
|
|
o.register(e, t),
|
|
u.add(t),
|
|
(null == r ? void 0 : r.debugMode) &&
|
|
console.log(
|
|
`[StateMonitor] Manually registered existing store: ${e}`,
|
|
);
|
|
} catch (t) {
|
|
console.error(
|
|
`[StateMonitor] Failed to register existing store: ${e}`,
|
|
t,
|
|
);
|
|
}
|
|
}
|
|
function b(e, t) {
|
|
i(t).unregister(e),
|
|
(null == t ? void 0 : t.debugMode) &&
|
|
console.log(`[StateMonitor] Unregistered store: ${e}`);
|
|
}
|
|
e.s(
|
|
[
|
|
"createAutoRegisterWrapper",
|
|
() => f,
|
|
"createMonitoredStore",
|
|
() => m,
|
|
"registerExistingStore",
|
|
() => h,
|
|
"setupGlobalAutoRegister",
|
|
() => p,
|
|
"unregisterStore",
|
|
() => b,
|
|
"withAutoRegister",
|
|
() => g,
|
|
],
|
|
210680,
|
|
);
|
|
var y = e.i(462214);
|
|
let x = {
|
|
padding: "12px 16px",
|
|
backgroundColor: "#4f46e5",
|
|
color: "white",
|
|
border: "none",
|
|
borderRadius: "12px",
|
|
cursor: "pointer",
|
|
zIndex: 9999,
|
|
fontSize: "14px",
|
|
fontWeight: "600",
|
|
boxShadow: "0 8px 25px rgba(79, 70, 229, 0.3)",
|
|
transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
|
|
backdropFilter: "blur(10px)",
|
|
},
|
|
v = {
|
|
backgroundColor: "#ffffff",
|
|
border: "1px solid rgba(148, 163, 184, 0.2)",
|
|
borderRadius: "16px",
|
|
boxShadow:
|
|
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
|
|
zIndex: 9999,
|
|
fontFamily:
|
|
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
|
|
fontSize: "13px",
|
|
backdropFilter: "blur(20px)",
|
|
background: "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)",
|
|
position: "relative",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
overflow: "hidden",
|
|
},
|
|
S = {
|
|
padding: "16px 20px",
|
|
background: "linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)",
|
|
borderBottom: "none",
|
|
borderRadius: "16px 16px 0 0",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
|
|
},
|
|
k = { margin: 0, fontSize: "16px", fontWeight: "700", color: "white" },
|
|
w = {
|
|
background: "rgba(255, 255, 255, 0.1)",
|
|
border: "none",
|
|
fontSize: "16px",
|
|
cursor: "pointer",
|
|
color: "white",
|
|
borderRadius: "8px",
|
|
padding: "6px 8px",
|
|
transition: "all 0.2s ease",
|
|
},
|
|
C = { padding: "20px", flex: 1, overflow: "auto", minHeight: 0 },
|
|
j = { marginBottom: "16px" },
|
|
E = {
|
|
display: "flex",
|
|
gap: "8px",
|
|
borderBottom: "2px solid #e5e7eb",
|
|
marginBottom: "16px",
|
|
},
|
|
M = {
|
|
padding: "10px 16px",
|
|
fontSize: "13px",
|
|
fontWeight: "600",
|
|
color: "#9ca3af",
|
|
border: "none",
|
|
background: "transparent",
|
|
cursor: "pointer",
|
|
transition: "all 0.2s ease",
|
|
marginBottom: "-2px",
|
|
},
|
|
$ = { color: "#4f46e5" },
|
|
T = { minHeight: "200px" },
|
|
_ = { marginBottom: "16px" },
|
|
R = {
|
|
display: "block",
|
|
marginBottom: "8px",
|
|
fontWeight: "600",
|
|
color: "#374151",
|
|
fontSize: "14px",
|
|
},
|
|
L = {
|
|
width: "100%",
|
|
padding: "10px 12px",
|
|
border: "2px solid #e5e7eb",
|
|
borderRadius: "10px",
|
|
backgroundColor: "#ffffff",
|
|
fontSize: "13px",
|
|
transition: "all 0.2s ease",
|
|
outline: "none",
|
|
},
|
|
A = { marginBottom: "16px" },
|
|
I = {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
marginBottom: "8px",
|
|
},
|
|
P = { fontWeight: "600", color: "#374151", fontSize: "14px" },
|
|
z = {
|
|
padding: "6px 12px",
|
|
fontSize: "12px",
|
|
backgroundColor: "#ef4444",
|
|
color: "white",
|
|
border: "none",
|
|
borderRadius: "8px",
|
|
cursor: "pointer",
|
|
fontWeight: "500",
|
|
transition: "all 0.2s ease",
|
|
},
|
|
N = {
|
|
maxHeight: "300px",
|
|
overflowY: "auto",
|
|
border: "2px solid #f1f5f9",
|
|
borderRadius: "12px",
|
|
backgroundColor: "#fafbfc",
|
|
scrollbarWidth: "thin",
|
|
scrollbarColor: "#cbd5e1 #f1f5f9",
|
|
},
|
|
O = {
|
|
padding: "32px",
|
|
textAlign: "center",
|
|
color: "#9ca3af",
|
|
fontSize: "14px",
|
|
},
|
|
D = { fontSize: "24px", marginBottom: "8px" },
|
|
W = {
|
|
marginTop: "16px",
|
|
fontSize: "12px",
|
|
color: "#6b7280",
|
|
backgroundColor: "#f8fafc",
|
|
padding: "12px",
|
|
borderRadius: "10px",
|
|
},
|
|
B = {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
marginBottom: "8px",
|
|
},
|
|
F = { color: "#10b981" },
|
|
U = { color: "#ef4444" },
|
|
H = { marginTop: "8px", display: "flex", gap: "8px" },
|
|
V = {
|
|
padding: "6px 12px",
|
|
fontSize: "12px",
|
|
color: "white",
|
|
border: "none",
|
|
borderRadius: "8px",
|
|
cursor: "pointer",
|
|
fontWeight: "500",
|
|
transition: "all 0.2s ease",
|
|
flex: 1,
|
|
},
|
|
G = { backgroundColor: "#4f46e5" },
|
|
K = {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
right: 0,
|
|
width: "20px",
|
|
height: "20px",
|
|
cursor: "nwse-resize",
|
|
zIndex: 10,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
Y = {
|
|
width: "12px",
|
|
height: "12px",
|
|
borderRight: "2px solid #cbd5e1",
|
|
borderBottom: "2px solid #cbd5e1",
|
|
borderRadius: "0 0 3px 0",
|
|
transition: "border-color 0.2s",
|
|
},
|
|
J = {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "4px",
|
|
height: "100%",
|
|
cursor: "ew-resize",
|
|
zIndex: 10,
|
|
},
|
|
X = {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
height: "4px",
|
|
cursor: "ns-resize",
|
|
zIndex: 10,
|
|
},
|
|
Z = {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "12px",
|
|
height: "12px",
|
|
cursor: "nw-resize",
|
|
zIndex: 11,
|
|
},
|
|
Q = {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "6px",
|
|
padding: "8px 20px",
|
|
borderBottom: "1px solid #f1f5f9",
|
|
backgroundColor: "#fafbfc",
|
|
},
|
|
q = {
|
|
flex: 1,
|
|
padding: "6px 10px",
|
|
border: "1.5px solid #e5e7eb",
|
|
borderRadius: "8px",
|
|
fontSize: "12px",
|
|
outline: "none",
|
|
backgroundColor: "#fff",
|
|
transition: "border-color 0.2s, box-shadow 0.2s",
|
|
minWidth: 0,
|
|
},
|
|
ee = { display: "flex", alignItems: "center", gap: "2px", flexShrink: 0 },
|
|
et = {
|
|
padding: "3px 6px",
|
|
border: "none",
|
|
backgroundColor: "transparent",
|
|
cursor: "pointer",
|
|
fontSize: "14px",
|
|
color: "#6b7280",
|
|
borderRadius: "4px",
|
|
transition: "all 0.15s",
|
|
lineHeight: 1,
|
|
},
|
|
er = {
|
|
fontSize: "11px",
|
|
color: "#9ca3af",
|
|
whiteSpace: "nowrap",
|
|
minWidth: "40px",
|
|
textAlign: "center",
|
|
},
|
|
eo = {
|
|
backgroundColor: "#fef08a",
|
|
borderRadius: "2px",
|
|
padding: "0 1px",
|
|
},
|
|
en = {
|
|
backgroundColor: "#fb923c",
|
|
color: "#fff",
|
|
borderRadius: "2px",
|
|
padding: "0 1px",
|
|
},
|
|
ei = {
|
|
padding: "12px 16px",
|
|
borderBottom: "1px solid #e2e8f0",
|
|
cursor: "pointer",
|
|
transition: "all 0.2s ease",
|
|
},
|
|
ea = "#f8fafc",
|
|
es = {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
},
|
|
el = { display: "flex", alignItems: "center", gap: "8px" },
|
|
ec = { fontSize: "12px", transition: "all 0.2s ease" },
|
|
eu = "#4f46e5",
|
|
ed = "#6b7280",
|
|
ef = { fontWeight: "600", color: "#4f46e5", fontSize: "14px" },
|
|
ep = { fontSize: "11px", color: "#9ca3af", fontWeight: "500" },
|
|
eg = {
|
|
marginTop: "12px",
|
|
fontSize: "11px",
|
|
animation: "fadeIn 0.2s ease-in",
|
|
textAlign: "left",
|
|
},
|
|
em = { marginBottom: "8px", textAlign: "left" },
|
|
eh = { color: "#374151", fontSize: "12px", textAlign: "left" },
|
|
eb = {
|
|
margin: "6px 0",
|
|
padding: "12px",
|
|
backgroundColor: "#f8f9fa",
|
|
borderRadius: "8px",
|
|
whiteSpace: "pre-wrap",
|
|
wordBreak: "break-word",
|
|
border: "1px solid #e9ecef",
|
|
fontFamily:
|
|
'Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
fontSize: "11px",
|
|
lineHeight: "1.4",
|
|
cursor: "text",
|
|
userSelect: "text",
|
|
textAlign: "left",
|
|
},
|
|
ey = { marginTop: "8px", textAlign: "left" },
|
|
ex = {
|
|
cursor: "pointer",
|
|
fontSize: "12px",
|
|
fontWeight: "600",
|
|
color: "#6b7280",
|
|
padding: "4px 0",
|
|
borderRadius: "4px",
|
|
transition: "color 0.2s ease",
|
|
textAlign: "left",
|
|
},
|
|
ev = {
|
|
margin: "6px 0",
|
|
padding: "12px",
|
|
backgroundColor: "#f8f9fa",
|
|
borderRadius: "8px",
|
|
whiteSpace: "pre-wrap",
|
|
wordBreak: "break-word",
|
|
overflowY: "auto",
|
|
border: "1px solid #e9ecef",
|
|
fontFamily:
|
|
'Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
fontSize: "11px",
|
|
lineHeight: "1.4",
|
|
cursor: "text",
|
|
userSelect: "text",
|
|
textAlign: "left",
|
|
},
|
|
eS = {
|
|
onMouseEnter: (e) => {
|
|
(e.currentTarget.style.transform = "translateY(-2px) scale(1.02)"),
|
|
(e.currentTarget.style.boxShadow =
|
|
"0 12px 35px rgba(79, 70, 229, 0.4)"),
|
|
(e.currentTarget.style.backgroundColor = "#3b38f0");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
(e.currentTarget.style.transform = "translateY(0) scale(1)"),
|
|
(e.currentTarget.style.boxShadow =
|
|
"0 8px 25px rgba(79, 70, 229, 0.3)"),
|
|
(e.currentTarget.style.backgroundColor = "#4f46e5");
|
|
},
|
|
},
|
|
ek = {
|
|
onMouseEnter: (e) => {
|
|
(e.currentTarget.style.background = "rgba(255, 255, 255, 0.2)"),
|
|
(e.currentTarget.style.transform = "scale(1.05)");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
(e.currentTarget.style.background = "rgba(255, 255, 255, 0.1)"),
|
|
(e.currentTarget.style.transform = "scale(1)");
|
|
},
|
|
},
|
|
ew = {
|
|
onMouseEnter: (e) => {
|
|
(e.currentTarget.style.backgroundColor = "#dc2626"),
|
|
(e.currentTarget.style.transform = "scale(1.02)");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
(e.currentTarget.style.backgroundColor = "#ef4444"),
|
|
(e.currentTarget.style.transform = "scale(1)");
|
|
},
|
|
},
|
|
eC = {
|
|
onMouseEnter: (e) => {
|
|
(e.currentTarget.style.transform = "scale(1.02)"),
|
|
(e.currentTarget.style.opacity = "0.9");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
(e.currentTarget.style.transform = "scale(1)"),
|
|
(e.currentTarget.style.opacity = "1");
|
|
},
|
|
},
|
|
ej = {
|
|
onMouseEnter: (e) => {
|
|
(e.currentTarget.style.transform = "scale(1.02)"),
|
|
(e.currentTarget.style.backgroundColor = "#3b38f0");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
(e.currentTarget.style.transform = "scale(1)"),
|
|
(e.currentTarget.style.backgroundColor = "#4f46e5");
|
|
},
|
|
},
|
|
eE = {
|
|
onFocus: (e) => {
|
|
(e.currentTarget.style.borderColor = "#4f46e5"),
|
|
(e.currentTarget.style.boxShadow =
|
|
"0 0 0 3px rgba(79, 70, 229, 0.1)");
|
|
},
|
|
onBlur: (e) => {
|
|
(e.currentTarget.style.borderColor = "#e5e7eb"),
|
|
(e.currentTarget.style.boxShadow = "none");
|
|
},
|
|
},
|
|
eM = (e, t) => {
|
|
t || (e.currentTarget.style.backgroundColor = "#f1f5f9");
|
|
},
|
|
e$ = (e, t) => {
|
|
t || (e.currentTarget.style.backgroundColor = "transparent");
|
|
},
|
|
eT = ({ change: e }) => {
|
|
let [t, o] = r.default.useState(!1);
|
|
return (0, y.jsxs)("div", {
|
|
style: { ...ei, backgroundColor: t ? ea : "transparent" },
|
|
onClick: () => o(!t),
|
|
onMouseEnter: (e) => eM(e, t),
|
|
onMouseLeave: (e) => e$(e, t),
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: es,
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: el,
|
|
children: [
|
|
(0, y.jsx)("span", {
|
|
style: { ...ec, color: t ? eu : ed },
|
|
children: t ? "▼" : "▶",
|
|
}),
|
|
(0, y.jsx)("span", { style: ef, children: e.storeName }),
|
|
],
|
|
}),
|
|
(0, y.jsx)("span", {
|
|
style: ep,
|
|
children: new Date(e.timestamp).toLocaleTimeString(),
|
|
}),
|
|
],
|
|
}),
|
|
t &&
|
|
(0, y.jsxs)("div", {
|
|
style: eg,
|
|
onClick: (e) => e.stopPropagation(),
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: em,
|
|
children: [
|
|
(0, y.jsx)("strong", { style: eh, children: "Changes:" }),
|
|
(0, y.jsx)("pre", {
|
|
style: eb,
|
|
children: JSON.stringify(e.diff, null, 2),
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("details", {
|
|
style: ey,
|
|
children: [
|
|
(0, y.jsx)("summary", {
|
|
style: ex,
|
|
children: "Full New State",
|
|
}),
|
|
(0, y.jsx)("pre", {
|
|
style: ev,
|
|
children: JSON.stringify(e.newState, null, 2),
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
});
|
|
},
|
|
e_ = ({ history: e, clearHistory: t }) =>
|
|
(0, y.jsxs)(y.Fragment, {
|
|
children: [
|
|
(0, y.jsx)("div", {
|
|
style: A,
|
|
children: (0, y.jsxs)("div", {
|
|
style: I,
|
|
children: [
|
|
(0, y.jsxs)("span", {
|
|
style: P,
|
|
children: ["变更历史 (", e.length, ")"],
|
|
}),
|
|
(0, y.jsx)("button", {
|
|
onClick: t,
|
|
style: z,
|
|
...ew,
|
|
children: "Clear",
|
|
}),
|
|
],
|
|
}),
|
|
}),
|
|
(0, y.jsx)("div", {
|
|
style: N,
|
|
children:
|
|
0 === e.length
|
|
? (0, y.jsxs)("div", {
|
|
style: O,
|
|
children: [
|
|
(0, y.jsx)("div", { style: D, children: "📊" }),
|
|
"No state changes recorded",
|
|
],
|
|
})
|
|
: e
|
|
.slice()
|
|
.reverse()
|
|
.map((e, t) =>
|
|
(0, y.jsx)(eT, { change: e }, `${e.timestamp}-${t}`),
|
|
),
|
|
}),
|
|
],
|
|
});
|
|
function eR(e, t, r) {
|
|
if (!t) return [];
|
|
let o = t.toLowerCase(),
|
|
n = [];
|
|
return (
|
|
Array.isArray(e)
|
|
? e.forEach((e, i) => {
|
|
let a = `${r}[${i}]`;
|
|
`[${i}]`.toLowerCase().includes(o) &&
|
|
n.push({ path: a, type: "key" }),
|
|
"object" == typeof e && null !== e
|
|
? n.push(...eR(e, t, a))
|
|
: (null === e
|
|
? "null"
|
|
: void 0 === e
|
|
? "undefined"
|
|
: String(e)
|
|
)
|
|
.toLowerCase()
|
|
.includes(o) && n.push({ path: a, type: "value" });
|
|
})
|
|
: "object" == typeof e &&
|
|
null !== e &&
|
|
Object.keys(e).forEach((i) => {
|
|
let a = r ? `${r}.${i}` : i;
|
|
i.toLowerCase().includes(o) && n.push({ path: a, type: "key" });
|
|
let s = e[i];
|
|
"object" == typeof s && null !== s
|
|
? n.push(...eR(s, t, a))
|
|
: (null === s ? "null" : void 0 === s ? "undefined" : String(s))
|
|
.toLowerCase()
|
|
.includes(o) && n.push({ path: a, type: "value" });
|
|
}),
|
|
n
|
|
);
|
|
}
|
|
function eL(e, t) {
|
|
return t && e
|
|
? Array.isArray(e)
|
|
? eR(e, t, "root")
|
|
: "object" == typeof e && null !== e
|
|
? eR(e, t, "")
|
|
: []
|
|
: [];
|
|
}
|
|
function eA(e, t, r) {
|
|
if (!t) return e;
|
|
let o = e.toLowerCase(),
|
|
n = t.toLowerCase(),
|
|
i = o.indexOf(n);
|
|
if (-1 === i) return e;
|
|
let a = [],
|
|
s = 0,
|
|
l = i;
|
|
for (; -1 !== l; )
|
|
l > s && a.push(e.substring(s, l)),
|
|
a.push(
|
|
(0, y.jsx)(
|
|
"span",
|
|
{ style: r ? en : eo, children: e.substring(l, l + t.length) },
|
|
l,
|
|
),
|
|
),
|
|
(s = l + t.length),
|
|
(l = o.indexOf(n, s));
|
|
return (
|
|
s < e.length && a.push(e.substring(s)),
|
|
(0, y.jsx)(y.Fragment, { children: a })
|
|
);
|
|
}
|
|
let eI = ({
|
|
label: e,
|
|
value: t,
|
|
path: o,
|
|
level: n,
|
|
expandedPaths: i,
|
|
onToggle: a,
|
|
searchQuery: s,
|
|
activeMatch: l,
|
|
matchPaths: c,
|
|
}) => {
|
|
let u,
|
|
d = (0, r.useRef)(null),
|
|
[f, p] = (0, r.useState)(null),
|
|
g = (0, r.useRef)(null),
|
|
m = i.has(o),
|
|
h = "object" == typeof t && null !== t,
|
|
b = "object" == typeof t && null !== t && !Array.isArray(t),
|
|
x = Array.isArray(t),
|
|
v = (0, r.useCallback)((e, t) => {
|
|
!(function (e) {
|
|
if (navigator.clipboard) return navigator.clipboard.writeText(e);
|
|
let t = document.createElement("textarea");
|
|
(t.value = e),
|
|
(t.style.position = "fixed"),
|
|
(t.style.opacity = "0"),
|
|
document.body.appendChild(t),
|
|
t.select(),
|
|
document.execCommand("copy"),
|
|
document.body.removeChild(t),
|
|
Promise.resolve();
|
|
})(e),
|
|
p(t),
|
|
g.current && clearTimeout(g.current),
|
|
(g.current = setTimeout(() => p(null), 1200));
|
|
}, []),
|
|
S = (null == l ? void 0 : l.path) === o;
|
|
return (
|
|
(0, r.useEffect)(() => {
|
|
S &&
|
|
d.current &&
|
|
d.current.scrollIntoView({ behavior: "smooth", block: "center" });
|
|
}, [S]),
|
|
(0, y.jsxs)("div", {
|
|
style: { marginLeft: `${16 * n}px` },
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
ref: d,
|
|
style: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "2px 4px",
|
|
cursor: h ? "pointer" : "default",
|
|
borderRadius: "4px",
|
|
transition: "background-color 0.15s",
|
|
fontSize: "13px",
|
|
lineHeight: "1.5",
|
|
backgroundColor: S ? "rgba(79, 70, 229, 0.08)" : void 0,
|
|
outline: S ? "1.5px solid rgba(79, 70, 229, 0.3)" : void 0,
|
|
},
|
|
onMouseEnter: (e) => {
|
|
S || (e.currentTarget.style.backgroundColor = "#f9fafb");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
S ||
|
|
(e.currentTarget.style.backgroundColor = S
|
|
? "rgba(79, 70, 229, 0.08)"
|
|
: "transparent");
|
|
},
|
|
onClick: () => {
|
|
h && a(o);
|
|
},
|
|
children: [
|
|
(0, y.jsx)("span", {
|
|
style: {
|
|
width: "16px",
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "10px",
|
|
color: "#6b7280",
|
|
marginRight: "6px",
|
|
transition: "transform 0.2s",
|
|
transform: m ? "rotate(90deg)" : "rotate(0deg)",
|
|
opacity: +!!h,
|
|
flexShrink: 0,
|
|
},
|
|
children: "▶",
|
|
}),
|
|
(0, y.jsxs)("span", {
|
|
style: {
|
|
fontWeight: h ? "600" : "400",
|
|
color: "#374151",
|
|
marginRight: "6px",
|
|
flexShrink: 0,
|
|
cursor: "pointer",
|
|
position: "relative",
|
|
borderRadius: "3px",
|
|
transition: "background-color 0.15s",
|
|
},
|
|
title: "点击复制属性名",
|
|
onClick: (t) => {
|
|
t.stopPropagation(), v(e, "key");
|
|
},
|
|
onMouseEnter: (e) => {
|
|
e.currentTarget.style.backgroundColor =
|
|
"rgba(79, 70, 229, 0.08)";
|
|
},
|
|
onMouseLeave: (e) => {
|
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
},
|
|
children: [
|
|
eA(
|
|
e,
|
|
c.has(o) && s ? s : "",
|
|
S && (null == l ? void 0 : l.type) === "key",
|
|
),
|
|
":",
|
|
"key" === f &&
|
|
(0, y.jsx)("span", {
|
|
style: {
|
|
position: "absolute",
|
|
top: "-20px",
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
fontSize: "10px",
|
|
color: "#fff",
|
|
backgroundColor: "#10b981",
|
|
padding: "1px 6px",
|
|
borderRadius: "4px",
|
|
whiteSpace: "nowrap",
|
|
pointerEvents: "none",
|
|
zIndex: 100,
|
|
},
|
|
children: "已复制",
|
|
}),
|
|
],
|
|
}),
|
|
h &&
|
|
(0, y.jsx)("span", {
|
|
style: {
|
|
color: "#9ca3af",
|
|
fontSize: "12px",
|
|
marginRight: "6px",
|
|
},
|
|
children: x
|
|
? `[${t.length}]`
|
|
: b
|
|
? `{${Object.keys(t).length}}`
|
|
: "",
|
|
}),
|
|
!h &&
|
|
(0, y.jsxs)("span", {
|
|
style: {
|
|
color: "#6b7280",
|
|
fontSize: "12px",
|
|
wordBreak: "break-all",
|
|
cursor: "pointer",
|
|
position: "relative",
|
|
borderRadius: "3px",
|
|
transition: "background-color 0.15s",
|
|
},
|
|
title: "点击复制值",
|
|
onClick: (e) => {
|
|
e.stopPropagation(),
|
|
v(
|
|
null === t
|
|
? "null"
|
|
: void 0 === t
|
|
? "undefined"
|
|
: "string" == typeof t
|
|
? t
|
|
: String(t),
|
|
"value",
|
|
);
|
|
},
|
|
onMouseEnter: (e) => {
|
|
e.currentTarget.style.backgroundColor =
|
|
"rgba(79, 70, 229, 0.08)";
|
|
},
|
|
onMouseLeave: (e) => {
|
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
},
|
|
children: [
|
|
((u =
|
|
null === t
|
|
? "null"
|
|
: void 0 === t
|
|
? "undefined"
|
|
: "string" == typeof t
|
|
? `"${t}"`
|
|
: "number" == typeof t || "boolean" == typeof t
|
|
? String(t)
|
|
: ""),
|
|
s
|
|
? eA(
|
|
u,
|
|
c.has(o) ? s : "",
|
|
S && (null == l ? void 0 : l.type) === "value",
|
|
)
|
|
: u),
|
|
"value" === f &&
|
|
(0, y.jsx)("span", {
|
|
style: {
|
|
position: "absolute",
|
|
top: "-20px",
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
fontSize: "10px",
|
|
color: "#fff",
|
|
backgroundColor: "#10b981",
|
|
padding: "1px 6px",
|
|
borderRadius: "4px",
|
|
whiteSpace: "nowrap",
|
|
pointerEvents: "none",
|
|
zIndex: 100,
|
|
},
|
|
children: "已复制",
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
h && m
|
|
? x
|
|
? t.map((e, t) => {
|
|
let r = `${o}[${t}]`;
|
|
return (0, y.jsx)(
|
|
eI,
|
|
{
|
|
label: `[${t}]`,
|
|
value: e,
|
|
path: r,
|
|
level: n + 1,
|
|
expandedPaths: i,
|
|
onToggle: a,
|
|
searchQuery: s,
|
|
activeMatch: l,
|
|
matchPaths: c,
|
|
},
|
|
r,
|
|
);
|
|
})
|
|
: b
|
|
? Object.keys(t).map((e) => {
|
|
let r = `${o}.${e}`;
|
|
return (0, y.jsx)(
|
|
eI,
|
|
{
|
|
label: e,
|
|
value: t[e],
|
|
path: r,
|
|
level: n + 1,
|
|
expandedPaths: i,
|
|
onToggle: a,
|
|
searchQuery: s,
|
|
activeMatch: l,
|
|
matchPaths: c,
|
|
},
|
|
r,
|
|
);
|
|
})
|
|
: null
|
|
: null,
|
|
],
|
|
})
|
|
);
|
|
},
|
|
eP = ({
|
|
data: e,
|
|
defaultExpanded: t = !0,
|
|
searchQuery: o = "",
|
|
externalMatches: n,
|
|
externalActiveMatch: i,
|
|
activeMatchIndex: a = 0,
|
|
onMatchCountChange: s,
|
|
}) => {
|
|
var l;
|
|
let [c, u] = (0, r.useState)(new Set()),
|
|
[d, f] = (0, r.useState)([]),
|
|
p = (0, r.useRef)(new Set()),
|
|
g = void 0 !== n,
|
|
m = g ? n : d,
|
|
h = g ? (null != i ? i : null) : null != (l = d[a]) ? l : null;
|
|
(0, r.useEffect)(() => {
|
|
if (t && e) {
|
|
let t = new Set();
|
|
"object" == typeof e &&
|
|
null !== e &&
|
|
(Array.isArray(e)
|
|
? e.forEach((e, r) => {
|
|
"object" == typeof e && null !== e && t.add(`root[${r}]`);
|
|
})
|
|
: Object.keys(e).forEach((r) => {
|
|
"object" == typeof e[r] && null !== e[r] && t.add(r);
|
|
})),
|
|
u(t);
|
|
}
|
|
}, [e, t]),
|
|
(0, r.useEffect)(() => {
|
|
if (g) {
|
|
p.current = new Set(m.map((e) => e.path));
|
|
return;
|
|
}
|
|
if (!o || !e) {
|
|
f([]), (p.current = new Set()), null == s || s(0);
|
|
return;
|
|
}
|
|
let t = eL(e, o);
|
|
f(t),
|
|
(p.current = new Set(t.map((e) => e.path))),
|
|
null == s || s(t.length);
|
|
}, [o, e, g, m, s]),
|
|
(0, r.useEffect)(() => {
|
|
h &&
|
|
u((e) => {
|
|
let t = (function (e) {
|
|
let t = [],
|
|
r = e;
|
|
for (;;) {
|
|
let e = Math.max(r.lastIndexOf("."), r.lastIndexOf("["));
|
|
if (e <= 0) break;
|
|
(r = r.substring(0, e)), t.push(r);
|
|
}
|
|
return t;
|
|
})(h.path);
|
|
if (t.every((t) => e.has(t))) return e;
|
|
let r = new Set(e);
|
|
return t.forEach((e) => r.add(e)), r;
|
|
});
|
|
}, [h]);
|
|
let b = (0, r.useCallback)((e) => {
|
|
u((t) => {
|
|
let r = new Set(t);
|
|
return r.has(e) ? r.delete(e) : r.add(e), r;
|
|
});
|
|
}, []);
|
|
if (null == e)
|
|
return (0, y.jsx)("div", {
|
|
style: { padding: "8px", color: "#9ca3af", fontSize: "13px" },
|
|
children: String(e),
|
|
});
|
|
let x = "object" == typeof e && null !== e && !Array.isArray(e),
|
|
v = Array.isArray(e);
|
|
return x || v
|
|
? (0, y.jsx)("div", {
|
|
style: { fontFamily: "system-ui, -apple-system, sans-serif" },
|
|
children: v
|
|
? e.map((e, t) =>
|
|
(0, y.jsx)(
|
|
eI,
|
|
{
|
|
label: `[${t}]`,
|
|
value: e,
|
|
path: `root[${t}]`,
|
|
level: 0,
|
|
expandedPaths: c,
|
|
onToggle: b,
|
|
searchQuery: o,
|
|
activeMatch: h,
|
|
matchPaths: p.current,
|
|
},
|
|
`root[${t}]`,
|
|
),
|
|
)
|
|
: Object.keys(e).map((t) =>
|
|
(0, y.jsx)(
|
|
eI,
|
|
{
|
|
label: t,
|
|
value: e[t],
|
|
path: t,
|
|
level: 0,
|
|
expandedPaths: c,
|
|
onToggle: b,
|
|
searchQuery: o,
|
|
activeMatch: h,
|
|
matchPaths: p.current,
|
|
},
|
|
t,
|
|
),
|
|
),
|
|
})
|
|
: (0, y.jsx)("div", {
|
|
style: {
|
|
fontFamily: "system-ui, -apple-system, sans-serif",
|
|
padding: "8px",
|
|
color: "#6b7280",
|
|
fontSize: "13px",
|
|
},
|
|
children: "string" == typeof e ? `"${e}"` : String(e),
|
|
});
|
|
},
|
|
ez = ({
|
|
monitor: e,
|
|
selectedStore: t,
|
|
searchQuery: o = "",
|
|
activeMatchIndex: n = 0,
|
|
onMatchCountChange: i,
|
|
}) => {
|
|
var a;
|
|
let [s, l] = r.default.useState({}),
|
|
[c, u] = r.default.useState(new Set()),
|
|
d = r.default.useRef([]);
|
|
r.default.useEffect(() => {
|
|
let r = () => {
|
|
if (t) {
|
|
let r = e.getState(t);
|
|
l(r ? { [t]: r } : {});
|
|
} else l(e.getAllStates());
|
|
};
|
|
r();
|
|
let o = setInterval(r, 100);
|
|
return () => clearInterval(o);
|
|
}, [e, t]),
|
|
r.default.useEffect(() => {
|
|
if (!o) {
|
|
(d.current = []), null == i || i(0);
|
|
return;
|
|
}
|
|
let e = [],
|
|
t = Object.keys(s),
|
|
r = new Set();
|
|
if (
|
|
(t.forEach((t) => {
|
|
let n = eL(s[t], o);
|
|
n.length > 0 &&
|
|
(r.add(t),
|
|
n.forEach((r) => e.push({ storeName: t, match: r })));
|
|
}),
|
|
(d.current = e),
|
|
null == i || i(e.length),
|
|
e.length > 0)
|
|
) {
|
|
let t = e[0];
|
|
u((e) => {
|
|
if (e.has(t.storeName)) return e;
|
|
let r = new Set(e);
|
|
return r.add(t.storeName), r;
|
|
});
|
|
}
|
|
}, [o, s, i]),
|
|
r.default.useEffect(() => {
|
|
if (0 === d.current.length) return;
|
|
let e = d.current[n];
|
|
e &&
|
|
u((t) => {
|
|
if (t.has(e.storeName)) return t;
|
|
let r = new Set(t);
|
|
return r.add(e.storeName), r;
|
|
});
|
|
}, [n]);
|
|
let f = Object.keys(s),
|
|
p = null != (a = d.current[n]) ? a : null;
|
|
return (0, y.jsx)("div", {
|
|
style: N,
|
|
children:
|
|
0 === f.length
|
|
? (0, y.jsxs)("div", {
|
|
style: O,
|
|
children: [
|
|
(0, y.jsx)("div", { style: D, children: "📦" }),
|
|
t
|
|
? `No state found for store: ${t}`
|
|
: "No stores registered",
|
|
],
|
|
})
|
|
: f.map((e) => {
|
|
let t,
|
|
r,
|
|
n = c.has(e),
|
|
i = s[e],
|
|
{ storeMatches: a, storeActiveMatch: l } =
|
|
((t = d.current
|
|
.filter((t) => t.storeName === e)
|
|
.map((e) => e.match)),
|
|
(r = null),
|
|
p && p.storeName === e && (r = p.match),
|
|
{ storeMatches: t, storeActiveMatch: r });
|
|
return (0, y.jsxs)(
|
|
"div",
|
|
{
|
|
style: { ...ei, backgroundColor: n ? ea : "transparent" },
|
|
onClick: () => {
|
|
u((t) => {
|
|
let r = new Set(t);
|
|
return r.has(e) ? r.delete(e) : r.add(e), r;
|
|
});
|
|
},
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: es,
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: el,
|
|
children: [
|
|
(0, y.jsx)("span", {
|
|
style: { ...ec, color: n ? eu : ed },
|
|
children: n ? "▼" : "▶",
|
|
}),
|
|
(0, y.jsx)("span", { style: ef, children: e }),
|
|
],
|
|
}),
|
|
(0, y.jsx)("span", {
|
|
style: ep,
|
|
children: "Current State",
|
|
}),
|
|
],
|
|
}),
|
|
n &&
|
|
(0, y.jsx)("div", {
|
|
style: eg,
|
|
onClick: (e) => e.stopPropagation(),
|
|
children: (0, y.jsx)("pre", {
|
|
style: ev,
|
|
children: (0, y.jsx)(eP, {
|
|
data: i,
|
|
defaultExpanded: !1,
|
|
searchQuery: o,
|
|
externalMatches: a,
|
|
externalActiveMatch: l,
|
|
}),
|
|
}),
|
|
}),
|
|
],
|
|
},
|
|
e,
|
|
);
|
|
}),
|
|
});
|
|
},
|
|
eN = "zustand-state-monitor-size";
|
|
function eO() {
|
|
var e, t;
|
|
try {
|
|
let r = localStorage.getItem(eN);
|
|
if (r) {
|
|
let o = JSON.parse(r);
|
|
return {
|
|
width: Math.max(320, null != (e = o.width) ? e : 420),
|
|
height: Math.max(300, null != (t = o.height) ? t : 520),
|
|
};
|
|
}
|
|
} catch (e) {}
|
|
return { width: 420, height: 520 };
|
|
}
|
|
e.s(
|
|
[
|
|
"StateMonitorDevTools",
|
|
0,
|
|
({ className: e, style: t, defaultVisible: o = !1 }) => {
|
|
let n = a(),
|
|
[i, l] = (0, r.useState)(o),
|
|
[c, u] = (0, r.useState)(""),
|
|
[d, f] = (0, r.useState)([]),
|
|
[p, g] = (0, r.useState)("current"),
|
|
{ history: m, clearHistory: h } = s(c),
|
|
[b, A] = (0, r.useState)(eO),
|
|
I = (0, r.useRef)(null),
|
|
[P, z] = (0, r.useState)(""),
|
|
[N, O] = (0, r.useState)(""),
|
|
[D, eo] = (0, r.useState)(0),
|
|
[en, ei] = (0, r.useState)(0);
|
|
(0, r.useEffect)(() => {
|
|
let e = () => {
|
|
f(n.getRegisteredStores());
|
|
};
|
|
e();
|
|
let t = setInterval(e, 1e3);
|
|
return () => clearInterval(t);
|
|
}, [n]);
|
|
let ea = (0, r.useCallback)(
|
|
(e, t) => {
|
|
e.preventDefault(),
|
|
e.stopPropagation(),
|
|
(I.current = {
|
|
startX: e.clientX,
|
|
startY: e.clientY,
|
|
startW: b.width,
|
|
startH: b.height,
|
|
edge: t,
|
|
});
|
|
let r = (e) => {
|
|
if (!I.current) return;
|
|
let {
|
|
startX: t,
|
|
startY: r,
|
|
startW: o,
|
|
startH: n,
|
|
edge: i,
|
|
} = I.current,
|
|
a = e.clientX - t,
|
|
s = e.clientY - r,
|
|
l = o,
|
|
c = n;
|
|
i.includes("right") && (l = Math.max(320, o + a)),
|
|
i.includes("left") && (l = Math.max(320, o - a)),
|
|
i.includes("bottom") && (c = Math.max(300, n + s)),
|
|
i.includes("top") && (c = Math.max(300, n - s)),
|
|
A({ width: l, height: c });
|
|
},
|
|
o = () => {
|
|
I.current &&
|
|
A((e) => {
|
|
var t = e.width,
|
|
r = e.height;
|
|
try {
|
|
localStorage.setItem(
|
|
eN,
|
|
JSON.stringify({ width: t, height: r }),
|
|
);
|
|
} catch (e) {}
|
|
return e;
|
|
}),
|
|
(I.current = null),
|
|
document.removeEventListener("mousemove", r),
|
|
document.removeEventListener("mouseup", o);
|
|
};
|
|
document.addEventListener("mousemove", r),
|
|
document.addEventListener("mouseup", o);
|
|
},
|
|
[b],
|
|
),
|
|
es = (0, r.useCallback)(
|
|
(e) => {
|
|
if ("Enter" === e.key) {
|
|
e.preventDefault();
|
|
let t = e.currentTarget.value;
|
|
t !== N
|
|
? O(t)
|
|
: D > 0 &&
|
|
(e.shiftKey
|
|
? ei((e) => (e - 1 + D) % D)
|
|
: ei((e) => (e + 1) % D));
|
|
}
|
|
},
|
|
[D, N],
|
|
),
|
|
el = (0, r.useCallback)(() => {
|
|
0 !== D && ei((e) => (e - 1 + D) % D);
|
|
}, [D]),
|
|
ec = (0, r.useCallback)(() => {
|
|
0 !== D && ei((e) => (e + 1) % D);
|
|
}, [D]);
|
|
(0, r.useEffect)(() => {
|
|
ei(0);
|
|
}, [N]),
|
|
(0, r.useEffect)(() => {
|
|
P || O("");
|
|
}, [P]);
|
|
let eu = (0, r.useCallback)((e) => {
|
|
eo(e), ei((t) => (0 === e ? 0 : Math.min(t, e - 1)));
|
|
}, []);
|
|
return i
|
|
? (0, y.jsxs)("div", {
|
|
style: {
|
|
...v,
|
|
width: `${b.width}px`,
|
|
height: `${b.height}px`,
|
|
...t,
|
|
},
|
|
className: e,
|
|
children: [
|
|
(0, y.jsx)("div", {
|
|
style: J,
|
|
onMouseDown: (e) => ea(e, "left"),
|
|
}),
|
|
(0, y.jsx)("div", {
|
|
style: X,
|
|
onMouseDown: (e) => ea(e, "top"),
|
|
}),
|
|
(0, y.jsx)("div", {
|
|
style: Z,
|
|
onMouseDown: (e) => ea(e, "top-left"),
|
|
}),
|
|
(0, y.jsxs)("div", {
|
|
style: S,
|
|
children: [
|
|
(0, y.jsx)("h3", {
|
|
style: k,
|
|
children: "Zustand State Monitor",
|
|
}),
|
|
(0, y.jsx)("button", {
|
|
onClick: () => l(!1),
|
|
style: w,
|
|
...ek,
|
|
children: "✕",
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("div", {
|
|
style: Q,
|
|
children: [
|
|
(0, y.jsx)("input", {
|
|
type: "text",
|
|
placeholder: "搜索属性或值 (Enter 搜索)",
|
|
value: P,
|
|
onChange: (e) => z(e.target.value),
|
|
onKeyDown: es,
|
|
onFocus: (e) => {
|
|
(e.currentTarget.style.borderColor = "#4f46e5"),
|
|
(e.currentTarget.style.boxShadow =
|
|
"0 0 0 2px rgba(79, 70, 229, 0.1)");
|
|
},
|
|
onBlur: (e) => {
|
|
(e.currentTarget.style.borderColor = "#e5e7eb"),
|
|
(e.currentTarget.style.boxShadow = "none");
|
|
},
|
|
style: q,
|
|
}),
|
|
P &&
|
|
(0, y.jsxs)("div", {
|
|
style: ee,
|
|
children: [
|
|
(0, y.jsx)("span", {
|
|
style: er,
|
|
children: D > 0 ? `${en + 1}/${D}` : "0",
|
|
}),
|
|
(0, y.jsx)("button", {
|
|
onClick: el,
|
|
style: et,
|
|
title: "上一个 (Shift+Enter)",
|
|
onMouseEnter: (e) => {
|
|
e.currentTarget.style.backgroundColor =
|
|
"#f1f5f9";
|
|
},
|
|
onMouseLeave: (e) => {
|
|
e.currentTarget.style.backgroundColor =
|
|
"transparent";
|
|
},
|
|
children: "▲",
|
|
}),
|
|
(0, y.jsx)("button", {
|
|
onClick: ec,
|
|
style: et,
|
|
title: "下一个 (Enter)",
|
|
onMouseEnter: (e) => {
|
|
e.currentTarget.style.backgroundColor =
|
|
"#f1f5f9";
|
|
},
|
|
onMouseLeave: (e) => {
|
|
e.currentTarget.style.backgroundColor =
|
|
"transparent";
|
|
},
|
|
children: "▼",
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("div", {
|
|
style: C,
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: _,
|
|
children: [
|
|
(0, y.jsx)("label", { style: R, children: "Store:" }),
|
|
(0, y.jsxs)("select", {
|
|
value: c,
|
|
onChange: (e) => u(e.target.value),
|
|
style: L,
|
|
...eE,
|
|
children: [
|
|
(0, y.jsx)("option", {
|
|
value: "",
|
|
children: "All Stores",
|
|
}),
|
|
d.map((e) =>
|
|
(0, y.jsx)(
|
|
"option",
|
|
{ value: e, children: e },
|
|
e,
|
|
),
|
|
),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("div", {
|
|
style: j,
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: E,
|
|
children: [
|
|
(0, y.jsx)("button", {
|
|
onClick: () => g("current"),
|
|
style: { ...M, ...("current" === p ? $ : {}) },
|
|
children: "当前状态",
|
|
}),
|
|
(0, y.jsx)("button", {
|
|
onClick: () => g("history"),
|
|
style: { ...M, ...("history" === p ? $ : {}) },
|
|
children: "变更历史",
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsx)("div", {
|
|
style: T,
|
|
children:
|
|
"history" === p
|
|
? (0, y.jsx)(e_, {
|
|
history: m,
|
|
clearHistory: h,
|
|
})
|
|
: (0, y.jsx)(ez, {
|
|
monitor: n,
|
|
selectedStore: c,
|
|
searchQuery: N,
|
|
activeMatchIndex: en,
|
|
onMatchCountChange: eu,
|
|
}),
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("div", {
|
|
style: W,
|
|
children: [
|
|
(0, y.jsxs)("div", {
|
|
style: B,
|
|
children: [
|
|
(0, y.jsxs)("span", {
|
|
children: [
|
|
"Registered stores: ",
|
|
(0, y.jsx)("strong", { children: d.length }),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("span", {
|
|
children: [
|
|
"Status:",
|
|
" ",
|
|
(0, y.jsx)("strong", {
|
|
style: n.isPaused() ? U : F,
|
|
children: n.isPaused()
|
|
? "Paused"
|
|
: "Active",
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsxs)("div", {
|
|
style: H,
|
|
children: [
|
|
(0, y.jsx)("button", {
|
|
onClick: () =>
|
|
n.isPaused() ? n.resume() : n.pause(),
|
|
style: {
|
|
...V,
|
|
backgroundColor: n.isPaused()
|
|
? "#10b981"
|
|
: "#f59e0b",
|
|
},
|
|
...eC,
|
|
children: n.isPaused()
|
|
? "▶️ Resume"
|
|
: "⏸️ Pause",
|
|
}),
|
|
(0, y.jsx)("button", {
|
|
onClick: () => {
|
|
console.log("All States:", n.getAllStates()),
|
|
console.log("All History:", n.getHistory());
|
|
},
|
|
style: { ...V, ...G },
|
|
...ej,
|
|
children: "🖥️ Log to Console",
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
],
|
|
}),
|
|
(0, y.jsx)("div", {
|
|
style: K,
|
|
onMouseDown: (e) => ea(e, "bottom-right"),
|
|
onMouseEnter: (e) => {
|
|
let t = e.currentTarget.firstElementChild;
|
|
t && (t.style.borderColor = "#4f46e5");
|
|
},
|
|
onMouseLeave: (e) => {
|
|
let t = e.currentTarget.firstElementChild;
|
|
t && (t.style.borderColor = "#cbd5e1");
|
|
},
|
|
children: (0, y.jsx)("div", { style: Y }),
|
|
}),
|
|
],
|
|
})
|
|
: (0, y.jsx)("button", {
|
|
onClick: () => l(!0),
|
|
style: { ...x, ...t },
|
|
className: e,
|
|
...eS,
|
|
children: "🔍 Zustand State Monitor",
|
|
});
|
|
},
|
|
],
|
|
171656,
|
|
),
|
|
e.s([], 397264);
|
|
};
|
|
|
|
export default moduleFactory;
|