sales-frontend-debug 0.0.3 → 0.0.5

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