sales-frontend-debug 0.0.2 → 0.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.
Files changed (5) hide show
  1. package/dist/index.cjs +348 -508
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +348 -508
  4. package/dist/index.js.map +1 -1
  5. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -3,6 +3,8 @@ import { getEnvironmentFromHostname, isClient } from 'sales-frontend-utils';
3
3
  import { useDebugStore } from 'sales-frontend-stores';
4
4
 
5
5
  // src/debug-tool.tsx
6
+
7
+ // src/styles/styles.ts
6
8
  var debugFloatingButtonStyle = {
7
9
  position: "fixed",
8
10
  right: "10px",
@@ -14,6 +16,212 @@ var debugFloatingButtonStyle = {
14
16
  fontWeight: "bold",
15
17
  zIndex: 9999
16
18
  };
19
+ var debugMenuPanelStyle = {
20
+ position: "fixed",
21
+ right: "20px",
22
+ bottom: "90px",
23
+ display: "flex",
24
+ flexDirection: "column",
25
+ maxHeight: "500px",
26
+ backgroundColor: "#ffffff",
27
+ border: "1px solid #e0e0e0",
28
+ borderRadius: "8px",
29
+ boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
30
+ zIndex: 9999
31
+ };
32
+ var panelHeaderStyle = {
33
+ display: "flex",
34
+ alignItems: "center",
35
+ justifyContent: "space-between",
36
+ padding: "10px 15px",
37
+ backgroundColor: "#f5f5f5",
38
+ borderBottom: "1px solid #e0e0e0",
39
+ flexShrink: 0
40
+ };
41
+ var h2Style = {
42
+ margin: 0,
43
+ fontSize: "16px"
44
+ };
45
+ var modalOverlayStyle = {
46
+ position: "fixed",
47
+ top: 0,
48
+ left: 0,
49
+ width: "100%",
50
+ height: "100%",
51
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
52
+ zIndex: 1e4
53
+ };
54
+ var debugFeaturePanelStyle = {
55
+ margin: "20px",
56
+ position: "fixed",
57
+ top: 0,
58
+ left: 0,
59
+ width: "calc(100% - 40px)",
60
+ height: "calc(100% - 40px)",
61
+ backgroundColor: "#ffffff",
62
+ zIndex: 10001,
63
+ display: "flex",
64
+ flexDirection: "column"
65
+ };
66
+ var panelToolbarStyle = {
67
+ display: "flex",
68
+ alignItems: "center",
69
+ padding: "10px",
70
+ borderBottom: "1px solid #e0e0e0",
71
+ gap: "8px",
72
+ flexShrink: 0
73
+ };
74
+ var logListContainerStyle = {
75
+ flex: 1,
76
+ padding: "10px",
77
+ overflowY: "auto",
78
+ fontFamily: "monospace",
79
+ fontSize: "12px",
80
+ backgroundColor: "#ffffff"
81
+ };
82
+ var logItemStyle = {
83
+ display: "flex",
84
+ alignItems: "flex-start",
85
+ padding: "4px 0",
86
+ borderBottom: "1px solid #e0e0e0"
87
+ };
88
+ var logTimestampStyle = {
89
+ marginRight: "10px",
90
+ color: "#888888"
91
+ };
92
+ var logMessageStyle = {
93
+ margin: 0,
94
+ wordBreak: "break-all",
95
+ whiteSpace: "pre-wrap"
96
+ };
97
+ var logTypeStyles = {
98
+ log: { color: "#333333" },
99
+ info: { color: "#007bff" },
100
+ warn: { color: "#ffc107" },
101
+ error: { color: "#dc3545" },
102
+ debug: { color: "#6c757d" },
103
+ return: { color: "#8a2be2" }
104
+ };
105
+ var loginFormContainerStyle = {
106
+ display: "flex",
107
+ flex: 1,
108
+ flexDirection: "column",
109
+ gap: "15px",
110
+ padding: "20px",
111
+ overflowY: "auto"
112
+ };
113
+ var formActionsStyle = {
114
+ display: "flex",
115
+ justifyContent: "flex-end",
116
+ marginTop: "10px"
117
+ };
118
+ var searchContainerStyle = {
119
+ display: "flex",
120
+ gap: "8px",
121
+ marginBottom: "16px",
122
+ alignItems: "center"
123
+ };
124
+ var logListStyle = {
125
+ overflowY: "auto"
126
+ };
127
+ var logSummaryStyle = {
128
+ wordBreak: "break-all",
129
+ margin: 0,
130
+ cursor: "pointer"
131
+ };
132
+ var logContentStyle = {
133
+ padding: "8px",
134
+ wordBreak: "break-all",
135
+ whiteSpace: "pre-wrap",
136
+ backgroundColor: "#f5f5f5",
137
+ borderRadius: "4px"
138
+ };
139
+ var pageNavigationContentStyle = {
140
+ display: "flex",
141
+ gap: "10px",
142
+ alignItems: "center",
143
+ padding: "20px"
144
+ };
145
+ var h3Style = {
146
+ margin: 0,
147
+ fontSize: "16px"
148
+ };
149
+ var scriptExecutorContentStyle = {
150
+ display: "flex",
151
+ flex: 1,
152
+ flexDirection: "column",
153
+ overflow: "hidden"
154
+ };
155
+ var scriptInputSectionStyle = {
156
+ display: "flex",
157
+ flex: 1,
158
+ flexDirection: "column",
159
+ minHeight: "150px",
160
+ borderBottom: "1px solid #e0e0e0"
161
+ };
162
+ var scriptTextareaStyle = {
163
+ flex: 1,
164
+ width: "100%",
165
+ padding: "10px",
166
+ fontFamily: "monospace",
167
+ fontSize: "14px",
168
+ resize: "none",
169
+ outline: "none",
170
+ border: "none"
171
+ };
172
+ var scriptActionsStyle = {
173
+ display: "flex",
174
+ justifyContent: "flex-end",
175
+ gap: "8px",
176
+ padding: "8px",
177
+ borderTop: "1px solid #e0e0e0"
178
+ };
179
+ var scriptOutputSectionStyle = {
180
+ display: "flex",
181
+ flex: 1,
182
+ flexDirection: "column",
183
+ overflow: "hidden"
184
+ };
185
+ var storageSearchInputStyle = {
186
+ width: "100%",
187
+ padding: "8px",
188
+ border: "1px solid #ccc",
189
+ borderRadius: "4px"
190
+ };
191
+ var storageTableContainerStyle = {
192
+ flex: 1,
193
+ overflowY: "auto",
194
+ padding: "10px"
195
+ };
196
+ var menuItemStyle = {
197
+ cursor: "pointer",
198
+ padding: "8px 12px"
199
+ };
200
+ var clearButtonStyle = {
201
+ marginLeft: "auto"
202
+ };
203
+ var networkLogContainerStyle = {
204
+ padding: "10px",
205
+ display: "flex",
206
+ flexDirection: "column",
207
+ flex: 1,
208
+ overflow: "hidden"
209
+ };
210
+ var flex1Style = {
211
+ flex: 1
212
+ };
213
+ var holdButtonsContainerStyle = {
214
+ display: "flex",
215
+ flexDirection: "row",
216
+ gap: "8px",
217
+ marginBottom: "10px"
218
+ };
219
+ var textareaStyle = {
220
+ width: "100%",
221
+ minHeight: "80px"
222
+ };
223
+
224
+ // src/components/floating-button.tsx
17
225
  var FloatingButton = ({ onClick }) => {
18
226
  const [position, setPosition] = useState({ x: 0, y: 0 });
19
227
  const [isDragging, setIsDragging] = useState(false);
@@ -71,42 +279,8 @@ var FloatingButton = ({ onClick }) => {
71
279
  );
72
280
  };
73
281
  var floating_button_default = FloatingButton;
74
- var debugMenuPanelStyle = {
75
- position: "fixed",
76
- right: "20px",
77
- bottom: "90px",
78
- display: "flex",
79
- flexDirection: "column",
80
- maxHeight: "500px",
81
- backgroundColor: "#ffffff",
82
- border: "1px solid #e0e0e0",
83
- borderRadius: "8px",
84
- boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
85
- zIndex: 9999
86
- };
87
- var panelHeaderStyle = {
88
- display: "flex",
89
- alignItems: "center",
90
- justifyContent: "space-between",
91
- padding: "10px 15px",
92
- backgroundColor: "#f5f5f5",
93
- borderBottom: "1px solid #e0e0e0",
94
- flexShrink: 0
95
- };
96
- var h2Style = {
97
- margin: 0,
98
- fontSize: "16px"
99
- };
100
282
  var MenuPanel = ({ menuItems: menuItems2, onMenuItemClick, onClose }) => {
101
- return /* @__PURE__ */ React5.createElement("div", { style: debugMenuPanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "Debug Menu"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("ul", null, menuItems2.map((item) => /* @__PURE__ */ React5.createElement(
102
- "li",
103
- {
104
- key: item.id,
105
- onClick: () => onMenuItemClick(item.component),
106
- style: { cursor: "pointer", padding: "8px 12px" }
107
- },
108
- item.label
109
- ))));
283
+ return /* @__PURE__ */ React5.createElement("div", { style: debugMenuPanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "Debug Menu"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("ul", null, menuItems2.map((item) => /* @__PURE__ */ React5.createElement("li", { key: item.id, onClick: () => onMenuItemClick(item.component), style: menuItemStyle }, item.label))));
110
284
  };
111
285
  var menu_panel_default = MenuPanel;
112
286
  var globalLogs = [];
@@ -167,78 +341,6 @@ var useConsoleLog = () => {
167
341
  };
168
342
 
169
343
  // src/features/console-log/console-log-panel.tsx
170
- var modalOverlayStyle = {
171
- position: "fixed",
172
- top: 0,
173
- left: 0,
174
- width: "100vw",
175
- height: "100vh",
176
- backgroundColor: "rgba(0, 0, 0, 0.5)",
177
- zIndex: 1e4
178
- };
179
- var debugFeaturePanelStyle = {
180
- position: "fixed",
181
- top: 0,
182
- left: 0,
183
- width: "100vw",
184
- height: "100vh",
185
- backgroundColor: "#ffffff",
186
- zIndex: 10001,
187
- display: "flex",
188
- flexDirection: "column"
189
- };
190
- var panelHeaderStyle2 = {
191
- display: "flex",
192
- alignItems: "center",
193
- justifyContent: "space-between",
194
- padding: "10px 15px",
195
- backgroundColor: "#f5f5f5",
196
- borderBottom: "1px solid #e0e0e0",
197
- flexShrink: 0
198
- };
199
- var h2Style2 = {
200
- margin: 0,
201
- fontSize: "16px"
202
- };
203
- var panelToolbarStyle = {
204
- display: "flex",
205
- alignItems: "center",
206
- padding: "10px",
207
- borderBottom: "1px solid #e0e0e0",
208
- gap: "8px",
209
- flexShrink: 0
210
- };
211
- var logListContainerStyle = {
212
- flex: 1,
213
- padding: "10px",
214
- overflowY: "auto",
215
- fontFamily: "monospace",
216
- fontSize: "12px",
217
- backgroundColor: "#ffffff"
218
- };
219
- var logItemStyle = {
220
- display: "flex",
221
- alignItems: "flex-start",
222
- padding: "4px 0",
223
- borderBottom: "1px solid #e0e0e0"
224
- };
225
- var logTimestampStyle = {
226
- marginRight: "10px",
227
- color: "#888888"
228
- };
229
- var logMessageStyle = {
230
- margin: 0,
231
- wordBreak: "break-all",
232
- whiteSpace: "pre-wrap"
233
- };
234
- var logTypeStyles = {
235
- log: { color: "#333333" },
236
- info: { color: "#007bff" },
237
- warn: { color: "#ffc107" },
238
- error: { color: "#dc3545" },
239
- debug: { color: "#6c757d" },
240
- return: { color: "#8a2be2" }
241
- };
242
344
  var safeStringify = (obj) => {
243
345
  try {
244
346
  return JSON.stringify(obj, null, 2);
@@ -254,7 +356,7 @@ var LogMessage = ({ entry }) => {
254
356
  return String(part);
255
357
  });
256
358
  const style = { ...logMessageStyle, ...logTypeStyles[entry.type] };
257
- return /* @__PURE__ */ React5.createElement("pre", { style }, messageParts.join(" "));
359
+ return /* @__PURE__ */ React.createElement("pre", { style }, messageParts.join(" "));
258
360
  };
259
361
  var ConsoleLogPanel = ({ onClose }) => {
260
362
  const { logs, clearLogs } = useConsoleLog();
@@ -272,150 +374,140 @@ var ConsoleLogPanel = ({ onClose }) => {
272
374
  }
273
375
  }, [filteredLogs]);
274
376
  const segmentOptions = ["all", "log", "warn", "error"];
275
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle2 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style2 }, "Console Logs"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React5.createElement("div", null, segmentOptions.map((option) => /* @__PURE__ */ React5.createElement("button", { key: option, onClick: () => setFilter(option), disabled: filter === option }, option.charAt(0).toUpperCase() + option.slice(1)))), /* @__PURE__ */ React5.createElement("button", { onClick: clearLogs, style: { marginLeft: "auto" } }, "Clear")), /* @__PURE__ */ React5.createElement("div", { style: logListContainerStyle, ref: logContainerRef }, filteredLogs.map((log) => /* @__PURE__ */ React5.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React5.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React5.createElement(LogMessage, { entry: log }))))));
377
+ return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React.createElement("h2", { style: h2Style }, "Console Logs"), /* @__PURE__ */ React.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React.createElement("div", null, segmentOptions.map((option) => /* @__PURE__ */ React.createElement("button", { key: option, onClick: () => setFilter(option), disabled: filter === option }, option.charAt(0).toUpperCase() + option.slice(1)))), /* @__PURE__ */ React.createElement("button", { onClick: clearLogs, style: clearButtonStyle }, "Clear")), /* @__PURE__ */ React.createElement("div", { style: logListContainerStyle, ref: logContainerRef }, filteredLogs.map((log) => /* @__PURE__ */ React.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React.createElement(LogMessage, { entry: log }))))));
276
378
  };
277
379
  var console_log_panel_default = ConsoleLogPanel;
278
- var modalOverlayStyle2 = {
279
- position: "fixed",
280
- top: 0,
281
- left: 0,
282
- width: "100vw",
283
- height: "100vh",
284
- backgroundColor: "rgba(0, 0, 0, 0.5)",
285
- zIndex: 1e4
286
- };
287
- var debugFeaturePanelStyle2 = {
288
- position: "fixed",
289
- top: 0,
290
- left: 0,
291
- width: "100vw",
292
- height: "100vh",
293
- backgroundColor: "#ffffff",
294
- zIndex: 10001,
295
- display: "flex",
296
- flexDirection: "column"
297
- };
298
- var panelHeaderStyle3 = {
299
- display: "flex",
300
- alignItems: "center",
301
- justifyContent: "space-between",
302
- padding: "10px 15px",
303
- backgroundColor: "#f5f5f5",
304
- borderBottom: "1px solid #e0e0e0",
305
- flexShrink: 0
306
- };
307
- var h2Style3 = {
308
- margin: 0,
309
- fontSize: "16px"
310
- };
311
- var loginFormContainerStyle = {
312
- display: "flex",
313
- flex: 1,
314
- flexDirection: "column",
315
- gap: "15px",
316
- padding: "20px",
317
- overflowY: "auto"
318
- };
319
- var formActionsStyle = {
320
- display: "flex",
321
- justifyContent: "flex-end",
322
- marginTop: "10px"
380
+ var cookieClient = {
381
+ getCookie(name) {
382
+ if (typeof document === "undefined") {
383
+ return "";
384
+ }
385
+ const match = document.cookie.match(new RegExp(`(^|; *)${name}=([^;]*)`));
386
+ return match ? decodeURIComponent(match[2] || "") : "";
387
+ },
388
+ setCookie(name, value, options = {}) {
389
+ if (typeof document === "undefined") {
390
+ return;
391
+ }
392
+ let cookieString = `${name}=${encodeURIComponent(value)}`;
393
+ if (options.expires) {
394
+ let expiresDate;
395
+ if (typeof options.expires === "number") {
396
+ expiresDate = /* @__PURE__ */ new Date();
397
+ expiresDate.setDate(expiresDate.getDate() + options.expires);
398
+ } else {
399
+ expiresDate = options.expires;
400
+ }
401
+ cookieString += `; expires=${expiresDate.toUTCString()}`;
402
+ }
403
+ cookieString += `; path=${options.path || "/"}`;
404
+ if (options.domain) {
405
+ cookieString += `; domain=${options.domain}`;
406
+ }
407
+ if (options.secure) {
408
+ cookieString += "; secure";
409
+ }
410
+ document.cookie = cookieString;
411
+ },
412
+ deleteCookie(name, options = {}) {
413
+ cookieClient.setCookie(name, "", { ...options, expires: -1 });
414
+ }
323
415
  };
324
- var LoginPanel = ({ onClose, onLogin }) => {
325
- const [selectedTypeId, setSelectedTypeId] = useState(loginTypes[0]?.id || "");
326
- const [formData, setFormData] = useState({});
327
- const selectedType = useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
328
- const handleInputChange = (e) => {
329
- const { name, value } = e.target;
330
- setFormData((prev) => ({ ...prev, [name]: value }));
331
- };
332
- const handleSubmit = (e) => {
333
- e.preventDefault();
334
- if (selectedType) {
335
- onLogin(selectedType.id, formData);
336
- onClose();
416
+ var useStorage = (storageType) => {
417
+ const [items, setItems] = useState([]);
418
+ const loadItems = useCallback(() => {
419
+ const newItems = [];
420
+ if (storageType === "localStorage") {
421
+ for (let i = 0; i < localStorage.length; i++) {
422
+ const key = localStorage.key(i);
423
+ if (key) {
424
+ newItems.push({ key, value: localStorage.getItem(key) || "" });
425
+ }
426
+ }
427
+ } else {
428
+ const cookies = document.cookie.split(";");
429
+ cookies.forEach((cookie) => {
430
+ const parts = cookie.split("=");
431
+ const key = parts.shift()?.trim();
432
+ if (key) {
433
+ newItems.push({ key, value: decodeURIComponent(parts.join("=")) });
434
+ }
435
+ });
337
436
  }
338
- };
437
+ setItems(newItems);
438
+ }, [storageType]);
339
439
  useEffect(() => {
340
- setFormData({});
341
- }, [selectedType]);
342
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle2, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle2 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle3 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style3 }, "\uAC04\uD3B8 \uB85C\uADF8\uC778"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("form", { style: loginFormContainerStyle, onSubmit: handleSubmit }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { htmlFor: "login-type-select" }, "\uB85C\uADF8\uC778 \uC720\uD615"), /* @__PURE__ */ React5.createElement(
343
- "select",
344
- {
345
- id: "login-type-select",
346
- value: selectedTypeId,
347
- onChange: (e) => setSelectedTypeId(e.target.value)
440
+ loadItems();
441
+ }, [loadItems]);
442
+ const setItem = useCallback(
443
+ (key, value) => {
444
+ if (storageType === "localStorage") {
445
+ localStorage.setItem(key, value);
446
+ } else {
447
+ cookieClient.setCookie(key, value);
448
+ }
449
+ loadItems();
348
450
  },
349
- loginTypes.map((type) => /* @__PURE__ */ React5.createElement("option", { key: type.id, value: type.id }, type.label))
350
- )), selectedType?.fields.map((field) => /* @__PURE__ */ React5.createElement("div", { key: field.name }, /* @__PURE__ */ React5.createElement("label", { htmlFor: field.name }, field.label), /* @__PURE__ */ React5.createElement(
351
- "input",
352
- {
353
- type: field.type,
354
- id: field.name,
355
- name: field.name,
356
- placeholder: field.placeholder,
357
- value: formData[field.name] || "",
358
- onChange: handleInputChange,
359
- required: true
360
- }
361
- ))), /* @__PURE__ */ React5.createElement("div", { style: formActionsStyle }, /* @__PURE__ */ React5.createElement("button", { type: "submit" }, "\uB85C\uADF8\uC778")))));
362
- };
363
- var login_panel_default = LoginPanel;
364
- var modalOverlayStyle3 = {
365
- position: "fixed",
366
- top: 0,
367
- left: 0,
368
- width: "100vw",
369
- height: "100vh",
370
- backgroundColor: "rgba(0, 0, 0, 0.5)",
371
- zIndex: 1e4
372
- };
373
- var debugFeaturePanelStyle3 = {
374
- position: "fixed",
375
- top: 0,
376
- left: 0,
377
- width: "100vw",
378
- height: "100vh",
379
- backgroundColor: "#ffffff",
380
- zIndex: 10001,
381
- display: "flex",
382
- flexDirection: "column"
383
- };
384
- var panelHeaderStyle4 = {
385
- display: "flex",
386
- alignItems: "center",
387
- justifyContent: "space-between",
388
- padding: "10px 15px",
389
- backgroundColor: "#f5f5f5",
390
- borderBottom: "1px solid #e0e0e0",
391
- flexShrink: 0
392
- };
393
- var h2Style4 = {
394
- margin: 0,
395
- fontSize: "16px"
396
- };
397
- var searchContainerStyle = {
398
- display: "flex",
399
- gap: "8px",
400
- marginBottom: "16px",
401
- alignItems: "center"
402
- };
403
- var logListStyle = {
404
- maxHeight: "60vh",
405
- overflowY: "auto"
406
- };
407
- var logSummaryStyle = {
408
- wordBreak: "break-all",
409
- margin: 0,
410
- cursor: "pointer"
451
+ [storageType, loadItems]
452
+ );
453
+ const removeItem = useCallback(
454
+ (key) => {
455
+ if (storageType === "localStorage") {
456
+ localStorage.removeItem(key);
457
+ } else {
458
+ cookieClient.deleteCookie(key);
459
+ }
460
+ loadItems();
461
+ },
462
+ [storageType, loadItems]
463
+ );
464
+ return { items, setItem, removeItem, loadItems };
411
465
  };
412
- var logContentStyle = {
413
- padding: "8px",
414
- wordBreak: "break-all",
415
- whiteSpace: "pre-wrap",
416
- backgroundColor: "#f5f5f5",
417
- borderRadius: "4px"
466
+
467
+ // src/features/login-dsp/login-panel.tsx
468
+ var LoginPanel = ({ onClose, onLogin }) => {
469
+ const [selectedTypeId, setSelectedTypeId] = useState(loginTypes[0]?.id || "");
470
+ const [formData, setFormData] = useState({});
471
+ const [mode, setMode] = useState(cookieClient.getCookie("dsp-debug-mode") === "on");
472
+ const selectedType = useMemo(() => loginTypes.find((t) => t.id === selectedTypeId), [selectedTypeId]);
473
+ const handleInputChange = (e) => {
474
+ const { name, value } = e.target;
475
+ setFormData((prev) => ({ ...prev, [name]: value }));
476
+ };
477
+ const handleSubmit = (e) => {
478
+ e.preventDefault();
479
+ if (selectedType) {
480
+ onLogin(selectedType.id, formData);
481
+ onClose();
482
+ }
483
+ };
484
+ const handleDebugOn = (e) => {
485
+ const checkbox = e.target;
486
+ if (checkbox.checked) {
487
+ cookieClient.setCookie("dsp-debug-mode", "on", { path: "/" });
488
+ setMode(true);
489
+ } else {
490
+ cookieClient.setCookie("dsp-debug-mode", "off", { path: "/" });
491
+ setMode(false);
492
+ }
493
+ };
494
+ useEffect(() => {
495
+ setFormData({});
496
+ }, [selectedType]);
497
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "\uAC04\uD3B8 \uB85C\uADF8\uC778"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("form", { style: loginFormContainerStyle, onSubmit: handleSubmit }, /* @__PURE__ */ React5.createElement("div", null, /* @__PURE__ */ React5.createElement("label", { htmlFor: "debug-on" }, "Debug On"), /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "debug-on", onChange: handleDebugOn, checked: mode }), /* @__PURE__ */ React5.createElement("br", null), /* @__PURE__ */ React5.createElement("label", { htmlFor: "login-type-select" }, "\uB85C\uADF8\uC778 \uC720\uD615"), /* @__PURE__ */ React5.createElement("select", { id: "login-type-select", value: selectedTypeId, onChange: (e) => setSelectedTypeId(e.target.value) }, loginTypes.map((type) => /* @__PURE__ */ React5.createElement("option", { key: type.id, value: type.id }, type.label)))), selectedType?.fields.map((field) => /* @__PURE__ */ React5.createElement("div", { key: field.name }, /* @__PURE__ */ React5.createElement("label", { htmlFor: field.name }, field.label), /* @__PURE__ */ React5.createElement(
498
+ "input",
499
+ {
500
+ type: field.type,
501
+ id: field.name,
502
+ name: field.name,
503
+ placeholder: field.placeholder,
504
+ value: formData[field.name] || "",
505
+ onChange: handleInputChange,
506
+ required: true
507
+ }
508
+ ))), /* @__PURE__ */ React5.createElement("div", { style: formActionsStyle }, /* @__PURE__ */ React5.createElement("button", { type: "submit" }, "\uB85C\uADF8\uC778")))));
418
509
  };
510
+ var login_panel_default = LoginPanel;
419
511
  var SEARCH_SECTIONS = [
420
512
  { value: "all", label: "\uC804\uCCB4" },
421
513
  { value: "url", label: "\uC8FC\uC18C" },
@@ -516,57 +608,18 @@ var NetworkLog = ({ onClose }) => {
516
608
  const logInfo = getLogInfo(log);
517
609
  return /* @__PURE__ */ React5.createElement("pre", null, JSON.stringify(logInfo, null, 2));
518
610
  };
519
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle3, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle3 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle4 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style4 }, "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: { padding: "10px", display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" } }, /* @__PURE__ */ React5.createElement("div", { style: searchContainerStyle }, /* @__PURE__ */ React5.createElement("select", { value: searchSection, onChange: (e) => setSearchSection(e.target.value) }, SEARCH_SECTIONS.map((option) => /* @__PURE__ */ React5.createElement("option", { key: option.value, value: option.value }, option.label))), /* @__PURE__ */ React5.createElement(
611
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "\uB124\uD2B8\uC6CC\uD06C \uB85C\uADF8"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: networkLogContainerStyle }, /* @__PURE__ */ React5.createElement("div", { style: searchContainerStyle }, /* @__PURE__ */ React5.createElement("select", { value: searchSection, onChange: (e) => setSearchSection(e.target.value) }, SEARCH_SECTIONS.map((option) => /* @__PURE__ */ React5.createElement("option", { key: option.value, value: option.value }, option.label))), /* @__PURE__ */ React5.createElement(
520
612
  "input",
521
613
  {
522
614
  type: "text",
523
615
  placeholder: "\uAC80\uC0C9...",
524
616
  value: searchTerm,
525
617
  onChange: (e) => setSearchTerm(e.target.value),
526
- style: { flex: 1 }
618
+ style: flex1Style
527
619
  }
528
- ), /* @__PURE__ */ React5.createElement("label", null, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "hold-checkbox", checked: isHold, onChange: toggleHold }), "Hold"), /* @__PURE__ */ React5.createElement("button", { onClick: clear }, "clear")), isHold && /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", flexDirection: "row", gap: "8px", marginBottom: "10px" } }, /* @__PURE__ */ React5.createElement("button", { onClick: () => playAllRequests() }, "REQ Resolve"), /* @__PURE__ */ React5.createElement("button", { onClick: () => playAllResponses() }, "RES Resolve")), /* @__PURE__ */ React5.createElement("div", { style: logListStyle }, filteredLogs.length === 0 ? /* @__PURE__ */ React5.createElement("p", null, "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.") : /* @__PURE__ */ React5.createElement("div", null, filteredLogs.map((log, index) => /* @__PURE__ */ React5.createElement("details", { key: index }, /* @__PURE__ */ React5.createElement("summary", { style: logSummaryStyle }, renderLogSummary(log)), /* @__PURE__ */ React5.createElement("div", { style: logContentStyle }, renderLogContent(log)))))))));
620
+ ), /* @__PURE__ */ React5.createElement("label", null, /* @__PURE__ */ React5.createElement("input", { type: "checkbox", id: "hold-checkbox", checked: isHold, onChange: toggleHold }), "Hold"), /* @__PURE__ */ React5.createElement("button", { onClick: clear }, "clear")), isHold && /* @__PURE__ */ React5.createElement("div", { style: holdButtonsContainerStyle }, /* @__PURE__ */ React5.createElement("button", { onClick: () => playAllRequests() }, "REQ Resolve"), /* @__PURE__ */ React5.createElement("button", { onClick: () => playAllResponses() }, "RES Resolve")), /* @__PURE__ */ React5.createElement("div", { style: logListStyle }, filteredLogs.length === 0 ? /* @__PURE__ */ React5.createElement("p", null, "\uD45C\uC2DC\uD560 \uB85C\uADF8\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.") : /* @__PURE__ */ React5.createElement("div", null, filteredLogs.map((log, index) => /* @__PURE__ */ React5.createElement("details", { key: index }, /* @__PURE__ */ React5.createElement("summary", { style: logSummaryStyle }, renderLogSummary(log)), /* @__PURE__ */ React5.createElement("div", { style: logContentStyle }, renderLogContent(log)))))))));
529
621
  };
530
622
  var network_log_default = NetworkLog;
531
- var modalOverlayStyle4 = {
532
- position: "fixed",
533
- top: 0,
534
- left: 0,
535
- width: "100vw",
536
- height: "100vh",
537
- backgroundColor: "rgba(0, 0, 0, 0.5)",
538
- zIndex: 1e4
539
- };
540
- var debugFeaturePanelStyle4 = {
541
- position: "fixed",
542
- top: 0,
543
- left: 0,
544
- width: "100vw",
545
- height: "100vh",
546
- backgroundColor: "#ffffff",
547
- zIndex: 10001,
548
- display: "flex",
549
- flexDirection: "column"
550
- };
551
- var panelHeaderStyle5 = {
552
- display: "flex",
553
- alignItems: "center",
554
- justifyContent: "space-between",
555
- padding: "10px 15px",
556
- backgroundColor: "#f5f5f5",
557
- borderBottom: "1px solid #e0e0e0",
558
- flexShrink: 0
559
- };
560
- var h2Style5 = {
561
- margin: 0,
562
- fontSize: "16px"
563
- };
564
- var pageNavigationContentStyle = {
565
- display: "flex",
566
- gap: "10px",
567
- alignItems: "center",
568
- padding: "20px"
569
- };
570
623
  var PageNavigationPanel = ({ onClose }) => {
571
624
  const [url, setUrl] = useState("");
572
625
  const handleNavigate = () => {
@@ -574,114 +627,18 @@ var PageNavigationPanel = ({ onClose }) => {
574
627
  self.location.href = url;
575
628
  }
576
629
  };
577
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle4, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle4 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle5 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style5 }, "\uD398\uC774\uC9C0 \uC774\uB3D9"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: pageNavigationContentStyle }, /* @__PURE__ */ React5.createElement(
630
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "\uD398\uC774\uC9C0 \uC774\uB3D9"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: pageNavigationContentStyle }, /* @__PURE__ */ React5.createElement(
578
631
  "input",
579
632
  {
580
633
  type: "text",
581
634
  value: url,
582
635
  onChange: (e) => setUrl(e.target.value),
583
636
  placeholder: "\uC774\uB3D9\uD560 URL\uC744 \uC785\uB825\uD558\uC138\uC694 (\uC608: /main)",
584
- style: { flex: 1 }
637
+ style: flex1Style
585
638
  }
586
639
  ), /* @__PURE__ */ React5.createElement("button", { onClick: handleNavigate }, "\uC774\uB3D9"))));
587
640
  };
588
641
  var page_navigation_panel_default = PageNavigationPanel;
589
- var modalOverlayStyle5 = {
590
- position: "fixed",
591
- top: 0,
592
- left: 0,
593
- width: "100vw",
594
- height: "100vh",
595
- backgroundColor: "rgba(0, 0, 0, 0.5)",
596
- zIndex: 1e4
597
- };
598
- var debugFeaturePanelStyle5 = {
599
- position: "fixed",
600
- top: 0,
601
- left: 0,
602
- width: "100vw",
603
- height: "100vh",
604
- backgroundColor: "#ffffff",
605
- zIndex: 10001,
606
- display: "flex",
607
- flexDirection: "column"
608
- };
609
- var panelHeaderStyle6 = {
610
- display: "flex",
611
- alignItems: "center",
612
- justifyContent: "space-between",
613
- padding: "10px 15px",
614
- backgroundColor: "#f5f5f5",
615
- borderBottom: "1px solid #e0e0e0",
616
- flexShrink: 0
617
- };
618
- var h2Style6 = {
619
- margin: 0,
620
- fontSize: "16px"
621
- };
622
- var h3Style = {
623
- margin: 0,
624
- fontSize: "16px"
625
- };
626
- var scriptExecutorContentStyle = {
627
- display: "flex",
628
- flex: 1,
629
- flexDirection: "column",
630
- overflow: "hidden"
631
- };
632
- var scriptInputSectionStyle = {
633
- display: "flex",
634
- flex: 1,
635
- flexDirection: "column",
636
- minHeight: "150px",
637
- borderBottom: "1px solid #e0e0e0"
638
- };
639
- var scriptTextareaStyle = {
640
- flex: 1,
641
- width: "100%",
642
- padding: "10px",
643
- fontFamily: "monospace",
644
- fontSize: "14px",
645
- resize: "none",
646
- outline: "none",
647
- border: "none"
648
- };
649
- var scriptActionsStyle = {
650
- display: "flex",
651
- justifyContent: "flex-end",
652
- gap: "8px",
653
- padding: "8px",
654
- borderTop: "1px solid #e0e0e0"
655
- };
656
- var scriptOutputSectionStyle = {
657
- display: "flex",
658
- flex: 1,
659
- flexDirection: "column",
660
- overflow: "hidden"
661
- };
662
- var logListContainerStyle2 = {
663
- flex: 1,
664
- padding: "10px",
665
- overflowY: "auto",
666
- fontFamily: "monospace",
667
- fontSize: "12px",
668
- backgroundColor: "#ffffff"
669
- };
670
- var logItemStyle2 = {
671
- display: "flex",
672
- alignItems: "flex-start",
673
- padding: "4px 0",
674
- borderBottom: "1px solid #e0e0e0"
675
- };
676
- var logTimestampStyle2 = {
677
- marginRight: "10px",
678
- color: "#888888"
679
- };
680
- var logMessageStyle2 = {
681
- margin: 0,
682
- wordBreak: "break-all",
683
- whiteSpace: "pre-wrap"
684
- };
685
642
  var logTypeStyles2 = {
686
643
  log: { color: "#333333" },
687
644
  warn: { color: "#ffc107" },
@@ -704,7 +661,7 @@ var ResultMessage = ({ log }) => {
704
661
  return String(part);
705
662
  });
706
663
  const prefix = log.type === "return" ? "\u21A9 " : "";
707
- const style = { ...logMessageStyle2, ...logTypeStyles2[log.type] };
664
+ const style = { ...logMessageStyle, ...logTypeStyles2[log.type] };
708
665
  return /* @__PURE__ */ React5.createElement("pre", { style }, prefix, messageParts.join(" "));
709
666
  };
710
667
  var ScriptExecutorPanel = ({ onClose }) => {
@@ -752,7 +709,7 @@ var ScriptExecutorPanel = ({ onClose }) => {
752
709
  const handleClear = () => {
753
710
  setResults([]);
754
711
  };
755
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle5, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: { ...debugFeaturePanelStyle5, ...scriptExecutorContentStyle } }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle6 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style6 }, "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: scriptExecutorContentStyle }, /* @__PURE__ */ React5.createElement("div", { style: scriptInputSectionStyle }, /* @__PURE__ */ React5.createElement(
712
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: { ...debugFeaturePanelStyle, ...scriptExecutorContentStyle } }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, "\uC2A4\uD06C\uB9BD\uD2B8 \uC2E4\uD589"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: scriptExecutorContentStyle }, /* @__PURE__ */ React5.createElement("div", { style: scriptInputSectionStyle }, /* @__PURE__ */ React5.createElement(
756
713
  "textarea",
757
714
  {
758
715
  style: scriptTextareaStyle,
@@ -760,135 +717,18 @@ var ScriptExecutorPanel = ({ onClose }) => {
760
717
  onChange: (e) => setCode(e.target.value),
761
718
  spellCheck: "false"
762
719
  }
763
- ), /* @__PURE__ */ React5.createElement("div", { style: scriptActionsStyle }, /* @__PURE__ */ React5.createElement("button", { onClick: handleExecute }, "\uC2E4\uD589 (\u25B6)"), /* @__PURE__ */ React5.createElement("button", { onClick: handleClear }, "\uACB0\uACFC \uC9C0\uC6B0\uAE30"))), /* @__PURE__ */ React5.createElement("div", { style: scriptOutputSectionStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle6 }, /* @__PURE__ */ React5.createElement("h3", { style: h3Style }, "\uACB0\uACFC")), /* @__PURE__ */ React5.createElement("div", { style: logListContainerStyle2 }, results.map((log) => /* @__PURE__ */ React5.createElement("div", { key: log.id, style: logItemStyle2 }, /* @__PURE__ */ React5.createElement("span", { style: logTimestampStyle2 }, log.timestamp), /* @__PURE__ */ React5.createElement(ResultMessage, { log }))))))));
720
+ ), /* @__PURE__ */ React5.createElement("div", { style: scriptActionsStyle }, /* @__PURE__ */ React5.createElement("button", { onClick: handleExecute }, "\uC2E4\uD589 (\u25B6)"), /* @__PURE__ */ React5.createElement("button", { onClick: handleClear }, "\uACB0\uACFC \uC9C0\uC6B0\uAE30"))), /* @__PURE__ */ React5.createElement("div", { style: scriptOutputSectionStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h3", { style: h3Style }, "\uACB0\uACFC")), /* @__PURE__ */ React5.createElement("div", { style: logListContainerStyle }, results.map((log) => /* @__PURE__ */ React5.createElement("div", { key: log.id, style: logItemStyle }, /* @__PURE__ */ React5.createElement("span", { style: logTimestampStyle }, log.timestamp), /* @__PURE__ */ React5.createElement(ResultMessage, { log }))))))));
764
721
  };
765
722
  var script_executor_panel_default = ScriptExecutorPanel;
766
- var setCookie = (name, value) => {
767
- document.cookie = `${name}=${encodeURIComponent(value)};path=/`;
768
- };
769
- var removeCookie = (name) => {
770
- document.cookie = `${name}=;path=/;expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
771
- };
772
- var useStorage = (storageType) => {
773
- const [items, setItems] = useState([]);
774
- const loadItems = useCallback(() => {
775
- const newItems = [];
776
- if (storageType === "localStorage") {
777
- for (let i = 0; i < localStorage.length; i++) {
778
- const key = localStorage.key(i);
779
- if (key) {
780
- newItems.push({ key, value: localStorage.getItem(key) || "" });
781
- }
782
- }
783
- } else {
784
- const cookies = document.cookie.split(";");
785
- cookies.forEach((cookie) => {
786
- const parts = cookie.split("=");
787
- const key = parts.shift()?.trim();
788
- if (key) {
789
- newItems.push({ key, value: decodeURIComponent(parts.join("=")) });
790
- }
791
- });
792
- }
793
- setItems(newItems);
794
- }, [storageType]);
795
- useEffect(() => {
796
- loadItems();
797
- }, [loadItems]);
798
- const setItem = useCallback(
799
- (key, value) => {
800
- if (storageType === "localStorage") {
801
- localStorage.setItem(key, value);
802
- } else {
803
- setCookie(key, value);
804
- }
805
- loadItems();
806
- },
807
- [storageType, loadItems]
808
- );
809
- const removeItem = useCallback(
810
- (key) => {
811
- if (storageType === "localStorage") {
812
- localStorage.removeItem(key);
813
- } else {
814
- removeCookie(key);
815
- }
816
- loadItems();
817
- },
818
- [storageType, loadItems]
819
- );
820
- return { items, setItem, removeItem, loadItems };
821
- };
822
-
823
- // src/features/storage/storage-panel.tsx
824
- var modalOverlayStyle6 = {
825
- position: "fixed",
826
- top: 0,
827
- left: 0,
828
- width: "100vw",
829
- height: "100vh",
830
- backgroundColor: "rgba(0, 0, 0, 0.5)",
831
- zIndex: 1e4
832
- };
833
- var debugFeaturePanelStyle6 = {
834
- position: "fixed",
835
- top: 0,
836
- left: 0,
837
- width: "100vw",
838
- height: "100vh",
839
- backgroundColor: "#ffffff",
840
- zIndex: 10001,
841
- display: "flex",
842
- flexDirection: "column"
843
- };
844
- var panelHeaderStyle7 = {
845
- display: "flex",
846
- alignItems: "center",
847
- justifyContent: "space-between",
848
- padding: "10px 15px",
849
- backgroundColor: "#f5f5f5",
850
- borderBottom: "1px solid #e0e0e0",
851
- flexShrink: 0
852
- };
853
- var h2Style7 = {
854
- margin: 0,
855
- fontSize: "16px"
856
- };
857
- var panelToolbarStyle2 = {
858
- display: "flex",
859
- alignItems: "center",
860
- padding: "10px",
861
- borderBottom: "1px solid #e0e0e0",
862
- gap: "8px",
863
- flexShrink: 0
864
- };
865
- var storageSearchInputStyle = {
866
- width: "100%",
867
- padding: "8px",
868
- border: "1px solid #ccc",
869
- borderRadius: "4px"
870
- };
871
- var storageTableContainerStyle = {
872
- flex: 1,
873
- overflowY: "auto",
874
- padding: "10px"
875
- };
876
- var logContentStyle2 = {
877
- padding: "8px",
878
- wordBreak: "break-all",
879
- whiteSpace: "pre-wrap",
880
- backgroundColor: "#f5f5f5",
881
- borderRadius: "4px"
882
- };
883
723
  var ValueDisplay = ({ value }) => {
884
724
  try {
885
725
  const parsed = JSON.parse(value);
886
726
  if (typeof parsed === "object" && parsed !== null) {
887
- return /* @__PURE__ */ React5.createElement("pre", { style: logContentStyle2 }, JSON.stringify(parsed, null, 2));
727
+ return /* @__PURE__ */ React5.createElement("pre", { style: logContentStyle }, JSON.stringify(parsed, null, 2));
888
728
  }
889
729
  } catch (e) {
890
730
  }
891
- return /* @__PURE__ */ React5.createElement("div", { style: logContentStyle2 }, value);
731
+ return /* @__PURE__ */ React5.createElement("div", { style: logContentStyle }, value);
892
732
  };
893
733
  var EditableRow = ({ item, onSave, onRemove }) => {
894
734
  const [isEditing, setIsEditing] = useState(false);
@@ -901,7 +741,7 @@ var EditableRow = ({ item, onSave, onRemove }) => {
901
741
  setValue(item.value);
902
742
  setIsEditing(true);
903
743
  };
904
- return /* @__PURE__ */ React5.createElement("details", null, /* @__PURE__ */ React5.createElement("summary", null, item.key), /* @__PURE__ */ React5.createElement("div", null, isEditing ? /* @__PURE__ */ React5.createElement("button", { onClick: handleSave }, "Save") : /* @__PURE__ */ React5.createElement("button", { onClick: handleEdit }, "Edit"), /* @__PURE__ */ React5.createElement("button", { onClick: () => onRemove(item.key) }, "Remove"), isEditing ? /* @__PURE__ */ React5.createElement("textarea", { value, onChange: (e) => setValue(e.target.value), style: { width: "100%", minHeight: "80px" } }) : /* @__PURE__ */ React5.createElement(ValueDisplay, { value: item.value })));
744
+ return /* @__PURE__ */ React5.createElement("details", null, /* @__PURE__ */ React5.createElement("summary", null, item.key), /* @__PURE__ */ React5.createElement("div", null, isEditing ? /* @__PURE__ */ React5.createElement("button", { onClick: handleSave }, "Save") : /* @__PURE__ */ React5.createElement("button", { onClick: handleEdit }, "Edit"), /* @__PURE__ */ React5.createElement("button", { onClick: () => onRemove(item.key) }, "Remove"), isEditing ? /* @__PURE__ */ React5.createElement("textarea", { value, onChange: (e) => setValue(e.target.value), style: textareaStyle }) : /* @__PURE__ */ React5.createElement(ValueDisplay, { value: item.value })));
905
745
  };
906
746
  var StoragePanel = ({ onClose, storageType }) => {
907
747
  const { items, setItem, removeItem } = useStorage(storageType);
@@ -914,7 +754,7 @@ var StoragePanel = ({ onClose, storageType }) => {
914
754
  (item) => item.key.toLowerCase().includes(filter.toLowerCase()) || item.value.toLowerCase().includes(filter.toLowerCase())
915
755
  );
916
756
  }, [items, filter]);
917
- return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle6, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle6 }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle7 }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style7 }, storageType === "localStorage" ? "Local Storage" : "Cookies"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: panelToolbarStyle2 }, /* @__PURE__ */ React5.createElement(
757
+ return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { style: modalOverlayStyle, onClick: onClose }), /* @__PURE__ */ React5.createElement("div", { style: debugFeaturePanelStyle }, /* @__PURE__ */ React5.createElement("div", { style: panelHeaderStyle }, /* @__PURE__ */ React5.createElement("h2", { style: h2Style }, storageType === "localStorage" ? "Local Storage" : "Cookies"), /* @__PURE__ */ React5.createElement("button", { onClick: onClose }, "X")), /* @__PURE__ */ React5.createElement("div", { style: panelToolbarStyle }, /* @__PURE__ */ React5.createElement(
918
758
  "input",
919
759
  {
920
760
  type: "text",