@berenjena/react-dev-panel 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,239 +0,0 @@
1
- import { useSyncExternalStore as o } from "react";
2
- const n = "dev-panel-storage", a = { x: 20, y: 20 };
3
- class d {
4
- /** The current state of the dev panel */
5
- state = {
6
- isVisible: !1,
7
- isCollapsed: !1,
8
- sections: {},
9
- position: a
10
- };
11
- /** Set of listeners subscribed to state changes */
12
- listeners = /* @__PURE__ */ new Set();
13
- /**
14
- * Creates a new DevPanelService instance and loads persisted state from localStorage.
15
- */
16
- constructor() {
17
- this.loadState();
18
- }
19
- /**
20
- * Saves the current state to localStorage.
21
- * Only persists visibility, collapse state, position, and section collapse states.
22
- * Sections themselves are not persisted as they are dynamic and recreated on mount.
23
- *
24
- * @private
25
- */
26
- saveState() {
27
- try {
28
- const e = {
29
- isVisible: this.state.isVisible,
30
- isCollapsed: this.state.isCollapsed,
31
- position: this.state.position,
32
- sectionCollapseState: Object.fromEntries(
33
- Object.entries(this.state.sections).map(([t, i]) => [t, i.isCollapsed ?? !1])
34
- )
35
- };
36
- localStorage.setItem(n, JSON.stringify(e));
37
- } catch {
38
- console.warn("Failed to save state to localStorage");
39
- }
40
- }
41
- /**
42
- * Loads previously persisted state from localStorage.
43
- * If no state exists or loading fails, uses default values.
44
- *
45
- * @private
46
- */
47
- loadState() {
48
- try {
49
- const e = localStorage.getItem(n);
50
- if (e) {
51
- const t = JSON.parse(e);
52
- this.state = {
53
- ...this.state,
54
- isVisible: t.isVisible ?? !1,
55
- isCollapsed: t.isCollapsed ?? !1,
56
- position: t.position ?? a
57
- };
58
- }
59
- } catch {
60
- console.warn("Failed to load persisted state from localStorage");
61
- }
62
- }
63
- /**
64
- * Notifies all subscribed listeners about state changes.
65
- *
66
- * @private
67
- */
68
- notifySubscribers() {
69
- this.listeners.forEach((e) => e());
70
- }
71
- /**
72
- * Updates the state using an updater function, persists the new state,
73
- * and notifies all subscribers.
74
- *
75
- * @param updater - Function that receives current state and returns new state
76
- * @private
77
- */
78
- setState(e) {
79
- this.state = e(this.state), this.saveState(), this.notifySubscribers();
80
- }
81
- /**
82
- * Returns the current state snapshot for useSyncExternalStore.
83
- *
84
- * @returns The current dev panel state
85
- */
86
- getSnapshot = () => this.state;
87
- /**
88
- * Subscribes a listener to state changes for useSyncExternalStore.
89
- *
90
- * @param listener - Function to call when state changes
91
- * @returns Unsubscribe function
92
- */
93
- subscribe = (e) => (this.listeners.add(e), () => {
94
- this.listeners.delete(e);
95
- });
96
- /**
97
- * Sets the visibility state of the dev panel.
98
- *
99
- * @param visible - Whether the panel should be visible
100
- */
101
- setVisible = (e) => {
102
- this.setState((t) => ({ ...t, isVisible: e }));
103
- };
104
- /**
105
- * Sets the collapsed state of the dev panel.
106
- *
107
- * @param collapsed - Whether the panel should be collapsed
108
- */
109
- setCollapsed = (e) => {
110
- this.setState((t) => ({ ...t, isCollapsed: e }));
111
- };
112
- /**
113
- * Updates the position of the dev panel.
114
- *
115
- * @param position - New position coordinates {x, y}
116
- */
117
- setPosition = (e) => {
118
- this.setState((t) => ({ ...t, position: e }));
119
- };
120
- /**
121
- * Registers a new section with the dev panel.
122
- * If a section with the same name already exists, it preserves the existing collapse state.
123
- * Otherwise, it attempts to restore the collapse state from localStorage.
124
- *
125
- * @param name - Unique name for the section
126
- * @param controls - Array of control configurations for the section
127
- */
128
- registerSection = (e, t) => {
129
- this.setState((i) => {
130
- const l = i.sections[e];
131
- let r = !1;
132
- try {
133
- const c = localStorage.getItem(n);
134
- c && (r = JSON.parse(c).sectionCollapseState?.[e] ?? !1);
135
- } catch {
136
- console.warn("Failed to read section collapse state from localStorage");
137
- }
138
- const p = l?.isCollapsed ?? r;
139
- return {
140
- ...i,
141
- sections: {
142
- ...i.sections,
143
- [e]: {
144
- name: e,
145
- controls: t,
146
- isCollapsed: p
147
- }
148
- }
149
- };
150
- });
151
- };
152
- /**
153
- * Removes a section from the dev panel.
154
- *
155
- * @param name - Name of the section to remove
156
- */
157
- unregisterSection = (e) => {
158
- this.setState((t) => {
159
- const { [e]: i, ...l } = t.sections;
160
- return { ...t, sections: l };
161
- });
162
- };
163
- /**
164
- * Toggles the collapsed state of a specific section.
165
- *
166
- * @param name - Name of the section to toggle
167
- */
168
- toggleSectionCollapse = (e) => {
169
- this.setState((t) => {
170
- const i = t.sections[e];
171
- return i ? {
172
- ...t,
173
- sections: {
174
- ...t.sections,
175
- [e]: {
176
- ...i,
177
- isCollapsed: !i.isCollapsed
178
- }
179
- }
180
- } : t;
181
- });
182
- };
183
- /**
184
- * Resets the dev panel to its default state.
185
- * Clears all sections, resets position, and sets visibility and collapse to false.
186
- */
187
- reset = () => {
188
- this.setState(() => ({
189
- isVisible: !1,
190
- isCollapsed: !1,
191
- sections: {},
192
- position: a
193
- }));
194
- };
195
- }
196
- const s = new d();
197
- function b() {
198
- return {
199
- ...o(s.subscribe, s.getSnapshot),
200
- setVisible: s.setVisible,
201
- setCollapsed: s.setCollapsed,
202
- setPosition: s.setPosition,
203
- registerSection: s.registerSection,
204
- unregisterSection: s.unregisterSection,
205
- toggleSectionCollapse: s.toggleSectionCollapse,
206
- reset: s.reset
207
- };
208
- }
209
- function h() {
210
- return o(s.subscribe, () => s.getSnapshot().isVisible);
211
- }
212
- function f() {
213
- return o(s.subscribe, () => s.getSnapshot().isCollapsed);
214
- }
215
- function C() {
216
- return o(s.subscribe, () => s.getSnapshot().position);
217
- }
218
- function v() {
219
- return o(s.subscribe, () => s.getSnapshot().sections);
220
- }
221
- function P() {
222
- return {
223
- setVisible: s.setVisible,
224
- setCollapsed: s.setCollapsed,
225
- setPosition: s.setPosition,
226
- registerSection: s.registerSection,
227
- unregisterSection: s.unregisterSection,
228
- toggleSectionCollapse: s.toggleSectionCollapse,
229
- reset: s.reset
230
- };
231
- }
232
- export {
233
- P as useDevPanelActions,
234
- f as useDevPanelCollapsed,
235
- C as useDevPanelPosition,
236
- v as useDevPanelSections,
237
- b as useDevPanelStore,
238
- h as useDevPanelVisible
239
- };