@motiadev/plugin-endpoint 0.13.0-beta.162-687645 → 0.13.0-beta.162-945354

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 (4) hide show
  1. package/dist/index.js +737 -2047
  2. package/dist/index.js.map +1 -1
  3. package/dist/plugin.js.map +1 -1
  4. package/package.json +4 -6
package/dist/index.js CHANGED
@@ -1,4 +1,3 @@
1
- import { c } from "react/compiler-runtime";
2
1
  import { BackgroundEffect, Badge, Button, Checkbox, Input, Panel, Sidebar, Tabs, TabsContent, TabsList, TabsTrigger, cn, useThemeStore } from "@motiadev/ui";
3
2
  import { Fragment, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
4
3
  import { AlertCircle, Book, Check, ChevronDown, CircleX, Copy, Download, Loader2, Plus, Search, Trash2, X } from "lucide-react";
@@ -16,74 +15,31 @@ import { atomDark, oneLight } from "react-syntax-highlighter/dist/esm/styles/pri
16
15
 
17
16
  import './index.css';
18
17
  //#region src/components/endpoints-search.tsx
19
- const EndpointsSearch = (t0) => {
20
- const $ = c(15);
21
- const { value, onChange, onClear } = t0;
22
- let t1;
23
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
24
- t1 = /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" });
25
- $[0] = t1;
26
- } else t1 = $[0];
27
- let t2;
28
- if ($[1] !== onChange) {
29
- t2 = (e) => onChange(e.target.value);
30
- $[1] = onChange;
31
- $[2] = t2;
32
- } else t2 = $[2];
33
- let t3;
34
- if ($[3] !== t2 || $[4] !== value) {
35
- t3 = /* @__PURE__ */ jsx(Input, {
36
- variant: "shade",
37
- value,
38
- onChange: t2,
39
- className: "px-9! font-medium",
40
- placeholder: "Search by Method or Path"
41
- });
42
- $[3] = t2;
43
- $[4] = value;
44
- $[5] = t3;
45
- } else t3 = $[5];
46
- const t4 = value !== "";
47
- const t5 = value === "";
48
- let t6;
49
- if ($[6] !== t4 || $[7] !== t5) {
50
- t6 = cn("cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", {
51
- visible: t4,
52
- invisible: t5
53
- });
54
- $[6] = t4;
55
- $[7] = t5;
56
- $[8] = t6;
57
- } else t6 = $[8];
58
- let t7;
59
- if ($[9] !== onClear || $[10] !== t6) {
60
- t7 = /* @__PURE__ */ jsx(X, {
61
- className: t6,
62
- onClick: onClear
63
- });
64
- $[9] = onClear;
65
- $[10] = t6;
66
- $[11] = t7;
67
- } else t7 = $[11];
68
- let t8;
69
- if ($[12] !== t3 || $[13] !== t7) {
70
- t8 = /* @__PURE__ */ jsx("div", {
71
- className: "p-2 border-b gap-4",
72
- "data-testid": "endpoints-search-container",
73
- children: /* @__PURE__ */ jsxs("div", {
74
- className: "relative",
75
- children: [
76
- t1,
77
- t3,
78
- t7
79
- ]
80
- })
81
- });
82
- $[12] = t3;
83
- $[13] = t7;
84
- $[14] = t8;
85
- } else t8 = $[14];
86
- return t8;
18
+ const EndpointsSearch = ({ value, onChange, onClear }) => {
19
+ return /* @__PURE__ */ jsx("div", {
20
+ className: "p-2 border-b gap-4",
21
+ "data-testid": "endpoints-search-container",
22
+ children: /* @__PURE__ */ jsxs("div", {
23
+ className: "relative",
24
+ children: [
25
+ /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50" }),
26
+ /* @__PURE__ */ jsx(Input, {
27
+ variant: "shade",
28
+ value,
29
+ onChange: (e) => onChange(e.target.value),
30
+ className: "px-9! font-medium",
31
+ placeholder: "Search by Method or Path"
32
+ }),
33
+ /* @__PURE__ */ jsx(X, {
34
+ className: cn("cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/50 hover:text-muted-foreground", {
35
+ visible: value !== "",
36
+ invisible: value === ""
37
+ }),
38
+ onClick: onClear
39
+ })
40
+ ]
41
+ })
42
+ });
87
43
  };
88
44
 
89
45
  //#endregion
@@ -100,358 +56,129 @@ const getMethodStyles = (method) => {
100
56
  default: return "bg-[#258DC3]/15 text-[#258DC3]";
101
57
  }
102
58
  };
103
- const EndpointBadge = memo((t0) => {
104
- const $ = c(10);
105
- let className;
106
- let props;
107
- let variant;
108
- if ($[0] !== t0) {
109
- ({className, variant, ...props} = t0);
110
- $[0] = t0;
111
- $[1] = className;
112
- $[2] = props;
113
- $[3] = variant;
114
- } else {
115
- className = $[1];
116
- props = $[2];
117
- variant = $[3];
118
- }
119
- let t1;
120
- if ($[4] !== className || $[5] !== variant) {
121
- t1 = cn("rounded-lg px-2 py-0.5 text-xs font-mono font-bold transition-colors", getMethodStyles(variant), className);
122
- $[4] = className;
123
- $[5] = variant;
124
- $[6] = t1;
125
- } else t1 = $[6];
126
- let t2;
127
- if ($[7] !== props || $[8] !== t1) {
128
- t2 = /* @__PURE__ */ jsx("div", {
129
- className: t1,
130
- ...props
131
- });
132
- $[7] = props;
133
- $[8] = t1;
134
- $[9] = t2;
135
- } else t2 = $[9];
136
- return t2;
59
+ const EndpointBadge = memo(({ className, variant, ...props }) => {
60
+ return /* @__PURE__ */ jsx("div", {
61
+ className: cn("rounded-lg px-2 py-0.5 text-xs font-mono font-bold transition-colors", getMethodStyles(variant), className),
62
+ ...props
63
+ });
137
64
  });
138
65
 
139
66
  //#endregion
140
67
  //#region src/components/endpoint-path.tsx
141
68
  const PathSeparator = () => {
142
- const $ = c(1);
143
- let t0;
144
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
145
- t0 = /* @__PURE__ */ jsx("div", {
146
- className: "text-muted-foreground",
147
- children: "/"
148
- });
149
- $[0] = t0;
150
- } else t0 = $[0];
151
- return t0;
69
+ return /* @__PURE__ */ jsx("div", {
70
+ className: "text-muted-foreground",
71
+ children: "/"
72
+ });
152
73
  };
153
- const EndpointPath = (t0) => {
154
- const $ = c(13);
155
- const { method, path } = t0;
156
- let t1;
157
- if ($[0] !== path) {
74
+ const EndpointPath = ({ method, path }) => {
75
+ const pathView = useMemo(() => {
158
76
  const parts = path.split("/").filter(Boolean);
159
77
  const partsLength = parts.length - 1;
160
- let t2$1;
161
- if ($[2] !== partsLength) {
162
- t2$1 = (part, index) => {
163
- const isLast = index === partsLength;
164
- const key = `part-${part}-${index}`;
165
- const separator = isLast ? void 0 : /* @__PURE__ */ jsx(PathSeparator, {}, `separator-${key}`);
166
- if (part.startsWith(":")) return [/* @__PURE__ */ jsx("div", {
167
- className: "bg-[#2862FE]/20 text-[#2862FE] rounded-sm px-1 py-0.5 text-sm font-mono font-bold font-medium",
168
- children: part
169
- }, key), separator];
170
- return [/* @__PURE__ */ jsx("div", { children: part }, key), separator];
171
- };
172
- $[2] = partsLength;
173
- $[3] = t2$1;
174
- } else t2$1 = $[3];
175
- t1 = parts.flatMap(t2$1);
176
- $[0] = path;
177
- $[1] = t1;
178
- } else t1 = $[1];
179
- const pathView = t1;
180
- const t2 = method;
181
- let t3;
182
- if ($[4] !== method || $[5] !== t2) {
183
- t3 = /* @__PURE__ */ jsx(EndpointBadge, {
184
- variant: t2,
185
- children: method
78
+ return parts.flatMap((part, index) => {
79
+ const isLast = index === partsLength;
80
+ const key = `part-${part}-${index}`;
81
+ const separator = isLast ? void 0 : /* @__PURE__ */ jsx(PathSeparator, {}, `separator-${key}`);
82
+ if (part.startsWith(":")) return [/* @__PURE__ */ jsx("div", {
83
+ className: "bg-[#2862FE]/20 text-[#2862FE] rounded-sm px-1 py-0.5 text-sm font-mono font-bold font-medium",
84
+ children: part
85
+ }, key), separator];
86
+ return [/* @__PURE__ */ jsx("div", { children: part }, key), separator];
186
87
  });
187
- $[4] = method;
188
- $[5] = t2;
189
- $[6] = t3;
190
- } else t3 = $[6];
191
- let t4;
192
- if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
193
- t4 = /* @__PURE__ */ jsx(PathSeparator, {});
194
- $[7] = t4;
195
- } else t4 = $[7];
196
- let t5;
197
- if ($[8] !== pathView) {
198
- t5 = /* @__PURE__ */ jsxs("span", {
88
+ }, [path]);
89
+ return /* @__PURE__ */ jsxs("div", {
90
+ className: "grid grid-cols-[auto_1fr] gap-2 items-center",
91
+ children: [/* @__PURE__ */ jsx(EndpointBadge, {
92
+ variant: method,
93
+ children: method
94
+ }), /* @__PURE__ */ jsxs("span", {
199
95
  className: "font-mono font-bold whitespace-nowrap flex flex-row gap-2 items-center truncate",
200
- children: [t4, pathView]
201
- });
202
- $[8] = pathView;
203
- $[9] = t5;
204
- } else t5 = $[9];
205
- let t6;
206
- if ($[10] !== t3 || $[11] !== t5) {
207
- t6 = /* @__PURE__ */ jsxs("div", {
208
- className: "grid grid-cols-[auto_1fr] gap-2 items-center",
209
- children: [t3, t5]
210
- });
211
- $[10] = t3;
212
- $[11] = t5;
213
- $[12] = t6;
214
- } else t6 = $[12];
215
- return t6;
96
+ children: [/* @__PURE__ */ jsx(PathSeparator, {}), pathView]
97
+ })]
98
+ });
216
99
  };
217
100
 
218
101
  //#endregion
219
102
  //#region src/components/endpoint-item.tsx
220
- const EndpointItem = (t0) => {
221
- const $ = c(21);
222
- const { endpoint, isSelected, isLast, onSelect } = t0;
223
- const t1 = `endpoint-${endpoint.method}-${endpoint.path}`;
224
- let t2;
225
- if ($[0] !== endpoint.id || $[1] !== onSelect) {
226
- t2 = () => onSelect(endpoint.id);
227
- $[0] = endpoint.id;
228
- $[1] = onSelect;
229
- $[2] = t2;
230
- } else t2 = $[2];
231
- const t3 = isSelected && "bg-muted-foreground/10";
232
- let t4;
233
- if ($[3] !== t3) {
234
- t4 = cn("grid grid-cols-[auto_1fr] items-center justify-center px-[17px] select-none hover:bg-muted-foreground/10 cursor-pointer", t3);
235
- $[3] = t3;
236
- $[4] = t4;
237
- } else t4 = $[4];
238
- let t5;
239
- if ($[5] !== isLast) {
240
- t5 = isLast ? /* @__PURE__ */ jsx("svg", {
241
- width: "14",
242
- height: "34",
243
- viewBox: "0 0 12 34",
244
- fill: "none",
245
- xmlns: "http://www.w3.org/2000/svg",
246
- children: /* @__PURE__ */ jsx("path", {
247
- d: "M6.5 16.5C6.50006 19.2614 8.7386 21.4999 11.5 21.5C11.7759 21.5003 12 21.724 12 22C12 22.276 11.7759 22.4997 11.5 22.5C8.18632 22.4999 5.50006 19.8137 5.5 16.5V0H6.5V16.5Z",
248
- className: "fill-[#555]"
249
- })
250
- }) : /* @__PURE__ */ jsx("svg", {
251
- width: "14",
252
- height: "34",
253
- viewBox: "0 0 12 34",
254
- fill: "none",
255
- xmlns: "http://www.w3.org/2000/svg",
256
- children: /* @__PURE__ */ jsx("path", {
257
- d: "M6.5 0V11.5C6.50007 14.2614 8.73861 16.4999 11.5 16.5C11.7759 16.5003 12 16.724 12 17C12 17.276 11.7759 17.4997 11.5 17.5C9.41273 17.5 7.57486 16.4335 6.5 14.8164V34H5.5V0H6.5Z",
258
- className: "fill-[#555]"
259
- })
260
- });
261
- $[5] = isLast;
262
- $[6] = t5;
263
- } else t5 = $[6];
264
- let t6;
265
- if ($[7] !== endpoint.method || $[8] !== endpoint.path) {
266
- t6 = /* @__PURE__ */ jsx(EndpointPath, {
103
+ const EndpointItem = ({ endpoint, isSelected, isLast, onSelect }) => /* @__PURE__ */ jsxs("div", {
104
+ "data-testid": `endpoint-${endpoint.method}-${endpoint.path}`,
105
+ onClick: () => onSelect(endpoint.id),
106
+ className: cn("grid grid-cols-[auto_1fr] items-center justify-center px-[17px] select-none hover:bg-muted-foreground/10 cursor-pointer", isSelected && "bg-muted-foreground/10"),
107
+ children: [isLast ? /* @__PURE__ */ jsx("svg", {
108
+ width: "14",
109
+ height: "34",
110
+ viewBox: "0 0 12 34",
111
+ fill: "none",
112
+ xmlns: "http://www.w3.org/2000/svg",
113
+ children: /* @__PURE__ */ jsx("path", {
114
+ d: "M6.5 16.5C6.50006 19.2614 8.7386 21.4999 11.5 21.5C11.7759 21.5003 12 21.724 12 22C12 22.276 11.7759 22.4997 11.5 22.5C8.18632 22.4999 5.50006 19.8137 5.5 16.5V0H6.5V16.5Z",
115
+ className: "fill-[#555]"
116
+ })
117
+ }) : /* @__PURE__ */ jsx("svg", {
118
+ width: "14",
119
+ height: "34",
120
+ viewBox: "0 0 12 34",
121
+ fill: "none",
122
+ xmlns: "http://www.w3.org/2000/svg",
123
+ children: /* @__PURE__ */ jsx("path", {
124
+ d: "M6.5 0V11.5C6.50007 14.2614 8.73861 16.4999 11.5 16.5C11.7759 16.5003 12 16.724 12 17C12 17.276 11.7759 17.4997 11.5 17.5C9.41273 17.5 7.57486 16.4335 6.5 14.8164V34H5.5V0H6.5Z",
125
+ className: "fill-[#555]"
126
+ })
127
+ }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
128
+ className: "grid grid-cols-[auto_1fr] items-center gap-3 px-2",
129
+ children: [/* @__PURE__ */ jsx(EndpointPath, {
267
130
  method: endpoint.method,
268
131
  path: endpoint.path
269
- });
270
- $[7] = endpoint.method;
271
- $[8] = endpoint.path;
272
- $[9] = t6;
273
- } else t6 = $[9];
274
- let t7;
275
- if ($[10] !== endpoint.description) {
276
- t7 = /* @__PURE__ */ jsx("span", {
132
+ }), /* @__PURE__ */ jsx("span", {
277
133
  className: "text-sm text-muted-foreground truncate",
278
134
  children: endpoint.description
279
- });
280
- $[10] = endpoint.description;
281
- $[11] = t7;
282
- } else t7 = $[11];
283
- let t8;
284
- if ($[12] !== t6 || $[13] !== t7) {
285
- t8 = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
286
- className: "grid grid-cols-[auto_1fr] items-center gap-3 px-2",
287
- children: [t6, t7]
288
- }) });
289
- $[12] = t6;
290
- $[13] = t7;
291
- $[14] = t8;
292
- } else t8 = $[14];
293
- let t9;
294
- if ($[15] !== t1 || $[16] !== t2 || $[17] !== t4 || $[18] !== t5 || $[19] !== t8) {
295
- t9 = /* @__PURE__ */ jsxs("div", {
296
- "data-testid": t1,
297
- onClick: t2,
298
- className: t4,
299
- children: [t5, t8]
300
- });
301
- $[15] = t1;
302
- $[16] = t2;
303
- $[17] = t4;
304
- $[18] = t5;
305
- $[19] = t8;
306
- $[20] = t9;
307
- } else t9 = $[20];
308
- return t9;
309
- };
135
+ })]
136
+ }) })]
137
+ });
310
138
 
311
139
  //#endregion
312
140
  //#region src/components/flow-group.tsx
313
- const FlowGroup = (t0) => {
314
- const $ = c(40);
315
- const { flow, endpoints, isOpen, isSelected, onToggle, onClearSelection, selectedEndpointId, onSelectEndpoint } = t0;
316
- const t1 = `flow-group-${flow}`;
317
- let t2;
318
- if ($[0] !== flow || $[1] !== isSelected || $[2] !== onClearSelection || $[3] !== onToggle) {
319
- t2 = () => {
320
- if (isSelected) onClearSelection();
321
- onToggle(flow);
322
- };
323
- $[0] = flow;
324
- $[1] = isSelected;
325
- $[2] = onClearSelection;
326
- $[3] = onToggle;
327
- $[4] = t2;
328
- } else t2 = $[4];
329
- let t3;
330
- if ($[5] !== isOpen) {
331
- t3 = cn("w-4 h-4 transition-transform duration-300 text-[#555]", { "rotate-180 mt-2.5": isOpen });
332
- $[5] = isOpen;
333
- $[6] = t3;
334
- } else t3 = $[6];
335
- let t4;
336
- if ($[7] !== t3) {
337
- t4 = /* @__PURE__ */ jsx(ChevronDown, {
338
- className: t3,
339
- strokeWidth: 1.5
340
- });
341
- $[7] = t3;
342
- $[8] = t4;
343
- } else t4 = $[8];
344
- const t5 = !isOpen;
345
- let t6;
346
- if ($[9] !== t5) {
347
- t6 = cn("ml-[7px]", { hidden: t5 });
348
- $[9] = t5;
349
- $[10] = t6;
350
- } else t6 = $[10];
351
- let t7;
352
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
353
- t7 = /* @__PURE__ */ jsx("path", {
354
- d: "M1.5 1C1.5 0.723858 1.27614 0.5 1 0.5C0.723858 0.5 0.5 0.723858 0.5 1H1H1.5ZM1 1H0.5V10H1H1.5V1H1Z",
355
- className: "fill-[#555]"
356
- });
357
- $[11] = t7;
358
- } else t7 = $[11];
359
- let t8;
360
- if ($[12] !== t6) {
361
- t8 = /* @__PURE__ */ jsx("svg", {
362
- xmlns: "http://www.w3.org/2000/svg",
363
- width: "2",
364
- height: "10",
365
- viewBox: "0 0 2 10",
366
- fill: "none",
367
- className: t6,
368
- children: t7
369
- });
370
- $[12] = t6;
371
- $[13] = t8;
372
- } else t8 = $[13];
373
- let t9;
374
- if ($[14] !== t4 || $[15] !== t8) {
375
- t9 = /* @__PURE__ */ jsxs("div", {
376
- className: "grid grid-cols-1",
377
- children: [t4, t8]
378
- });
379
- $[14] = t4;
380
- $[15] = t8;
381
- $[16] = t9;
382
- } else t9 = $[16];
383
- let t10;
384
- if ($[17] !== flow) {
385
- t10 = /* @__PURE__ */ jsx("h3", {
386
- className: "text-sm font-medium text-left",
387
- children: flow
388
- });
389
- $[17] = flow;
390
- $[18] = t10;
391
- } else t10 = $[18];
392
- let t11;
393
- if ($[19] !== t1 || $[20] !== t10 || $[21] !== t2 || $[22] !== t9) {
394
- t11 = /* @__PURE__ */ jsxs("button", {
395
- "data-testid": t1,
141
+ const FlowGroup = ({ flow, endpoints, isOpen, isSelected, onToggle, onClearSelection, selectedEndpointId, onSelectEndpoint }) => {
142
+ return /* @__PURE__ */ jsxs("div", {
143
+ className: "pt-2",
144
+ children: [/* @__PURE__ */ jsxs("button", {
145
+ "data-testid": `flow-group-${flow}`,
396
146
  className: "w-full grid grid-cols-[auto_1fr] items-center gap-3 hover:bg-muted/40 cursor-pointer min-h-8.5 select-none hover:bg-muted-foreground/10 px-4",
397
- onClick: t2,
398
- children: [t9, t10]
399
- });
400
- $[19] = t1;
401
- $[20] = t10;
402
- $[21] = t2;
403
- $[22] = t9;
404
- $[23] = t11;
405
- } else t11 = $[23];
406
- const t12 = !isOpen;
407
- let t13;
408
- if ($[24] !== t12) {
409
- t13 = cn("grid grid-cols-1 items-center justify-center", { hidden: t12 });
410
- $[24] = t12;
411
- $[25] = t13;
412
- } else t13 = $[25];
413
- let t14;
414
- if ($[26] !== endpoints || $[27] !== onSelectEndpoint || $[28] !== selectedEndpointId) {
415
- let t15$1;
416
- if ($[30] !== endpoints.length || $[31] !== onSelectEndpoint || $[32] !== selectedEndpointId) {
417
- t15$1 = (endpoint, index) => /* @__PURE__ */ jsx(EndpointItem, {
147
+ onClick: () => {
148
+ if (isSelected) onClearSelection();
149
+ onToggle(flow);
150
+ },
151
+ children: [/* @__PURE__ */ jsxs("div", {
152
+ className: "grid grid-cols-1",
153
+ children: [/* @__PURE__ */ jsx(ChevronDown, {
154
+ className: cn("w-4 h-4 transition-transform duration-300 text-[#555]", { "rotate-180 mt-2.5": isOpen }),
155
+ strokeWidth: 1.5
156
+ }), /* @__PURE__ */ jsx("svg", {
157
+ xmlns: "http://www.w3.org/2000/svg",
158
+ width: "2",
159
+ height: "10",
160
+ viewBox: "0 0 2 10",
161
+ fill: "none",
162
+ className: cn("ml-[7px]", { hidden: !isOpen }),
163
+ children: /* @__PURE__ */ jsx("path", {
164
+ d: "M1.5 1C1.5 0.723858 1.27614 0.5 1 0.5C0.723858 0.5 0.5 0.723858 0.5 1H1H1.5ZM1 1H0.5V10H1H1.5V1H1Z",
165
+ className: "fill-[#555]"
166
+ })
167
+ })]
168
+ }), /* @__PURE__ */ jsx("h3", {
169
+ className: "text-sm font-medium text-left",
170
+ children: flow
171
+ })]
172
+ }), /* @__PURE__ */ jsx("div", {
173
+ className: cn("grid grid-cols-1 items-center justify-center", { hidden: !isOpen }),
174
+ children: endpoints.map((endpoint, index) => /* @__PURE__ */ jsx(EndpointItem, {
418
175
  endpoint,
419
176
  isSelected: selectedEndpointId === endpoint.id,
420
177
  isLast: index === endpoints.length - 1,
421
178
  onSelect: onSelectEndpoint
422
- }, endpoint.id);
423
- $[30] = endpoints.length;
424
- $[31] = onSelectEndpoint;
425
- $[32] = selectedEndpointId;
426
- $[33] = t15$1;
427
- } else t15$1 = $[33];
428
- t14 = endpoints.map(t15$1);
429
- $[26] = endpoints;
430
- $[27] = onSelectEndpoint;
431
- $[28] = selectedEndpointId;
432
- $[29] = t14;
433
- } else t14 = $[29];
434
- let t15;
435
- if ($[34] !== t13 || $[35] !== t14) {
436
- t15 = /* @__PURE__ */ jsx("div", {
437
- className: t13,
438
- children: t14
439
- });
440
- $[34] = t13;
441
- $[35] = t14;
442
- $[36] = t15;
443
- } else t15 = $[36];
444
- let t16;
445
- if ($[37] !== t11 || $[38] !== t15) {
446
- t16 = /* @__PURE__ */ jsxs("div", {
447
- className: "pt-2",
448
- children: [t11, t15]
449
- });
450
- $[37] = t11;
451
- $[38] = t15;
452
- $[39] = t16;
453
- } else t16 = $[39];
454
- return t16;
179
+ }, endpoint.id))
180
+ })]
181
+ });
455
182
  };
456
183
 
457
184
  //#endregion
@@ -598,46 +325,27 @@ const useEndpointConfiguration = create()(persist(devtools((set) => ({
598
325
  //#endregion
599
326
  //#region src/hooks/use-get-endpoints.ts
600
327
  const useGetEndpoints = () => {
601
- const $ = c(6);
602
- let t0;
603
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
604
- t0 = {
605
- streamName: "__motia.api-endpoints",
606
- groupId: "default"
607
- };
608
- $[0] = t0;
609
- } else t0 = $[0];
610
- const { data: endpoints } = useStreamGroup(t0);
611
- let t1;
612
- if ($[1] !== endpoints) {
613
- t1 = endpoints.reduce(_temp$8, {});
614
- $[1] = endpoints;
615
- $[2] = t1;
616
- } else t1 = $[2];
617
- const groupedEndpoints = t1;
618
- let t2;
619
- if ($[3] !== endpoints || $[4] !== groupedEndpoints) {
620
- t2 = {
621
- endpoints,
622
- groupedEndpoints
623
- };
624
- $[3] = endpoints;
625
- $[4] = groupedEndpoints;
626
- $[5] = t2;
627
- } else t2 = $[5];
628
- return t2;
629
- };
630
- function _temp$8(acc, endpoint) {
631
- if (endpoint.flows && endpoint.flows.length > 0) endpoint.flows.forEach((flow) => {
632
- acc[flow] = acc[flow] || [];
633
- acc[flow].push(endpoint);
328
+ const { data: endpoints } = useStreamGroup({
329
+ streamName: "__motia.api-endpoints",
330
+ groupId: "default"
634
331
  });
635
- else {
636
- acc["no-flow"] = acc["no-flow"] || [];
637
- acc["no-flow"].push(endpoint);
638
- }
639
- return acc;
640
- }
332
+ return {
333
+ endpoints,
334
+ groupedEndpoints: useMemo(() => {
335
+ return endpoints.reduce((acc, endpoint) => {
336
+ if (endpoint.flows && endpoint.flows.length > 0) endpoint.flows.forEach((flow) => {
337
+ acc[flow] = acc[flow] || [];
338
+ acc[flow].push(endpoint);
339
+ });
340
+ else {
341
+ acc["no-flow"] = acc["no-flow"] || [];
342
+ acc["no-flow"].push(endpoint);
343
+ }
344
+ return acc;
345
+ }, {});
346
+ }, [endpoints])
347
+ };
348
+ };
641
349
 
642
350
  //#endregion
643
351
  //#region src/hooks/use-path-params.ts
@@ -692,190 +400,93 @@ const convertSchemaToJson = (schema, rootSchema) => {
692
400
  //#endregion
693
401
  //#region src/hooks/use-json-schema-to-json.tsx
694
402
  const useJsonSchemaToJson = (schema) => {
695
- const $ = c(5);
696
403
  const [body, setBody] = useState("");
697
- let t0;
698
- let t1;
699
- if ($[0] !== schema) {
700
- t0 = () => {
701
- if (schema) setBody(JSON.stringify(convertSchemaToJson(schema), null, 2));
702
- };
703
- t1 = [schema];
704
- $[0] = schema;
705
- $[1] = t0;
706
- $[2] = t1;
707
- } else {
708
- t0 = $[1];
709
- t1 = $[2];
710
- }
711
- useEffect(t0, t1);
712
- let t2;
713
- if ($[3] !== body) {
714
- t2 = {
715
- body,
716
- setBody
717
- };
718
- $[3] = body;
719
- $[4] = t2;
720
- } else t2 = $[4];
721
- return t2;
404
+ useEffect(() => {
405
+ if (schema) setBody(JSON.stringify(convertSchemaToJson(schema), null, 2));
406
+ }, [schema]);
407
+ return {
408
+ body,
409
+ setBody
410
+ };
722
411
  };
723
412
 
724
413
  //#endregion
725
414
  //#region src/spec/spec-body-panel.tsx
726
- const EndpointBodyPanel = (t0) => {
727
- const $ = c(8);
728
- const { endpoint, panelName, value } = t0;
415
+ const EndpointBodyPanel = ({ endpoint, panelName, value }) => {
729
416
  if (![
730
417
  "post",
731
418
  "put",
732
419
  "patch"
733
420
  ].includes(endpoint.method.toLowerCase())) return null;
734
- const t1 = `endpoint-body-panel__${panelName}`;
735
- let t2;
736
- if ($[0] !== value) {
737
- t2 = value ? JSON.parse(value) : {};
738
- $[0] = value;
739
- $[1] = t2;
740
- } else t2 = $[1];
741
- let t3;
742
- if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
743
- t3 = { backgroundColor: "transparent" };
744
- $[2] = t3;
745
- } else t3 = $[2];
746
- let t4;
747
- if ($[3] !== t2) {
748
- t4 = /* @__PURE__ */ jsx(ReactJson, {
749
- src: t2,
421
+ return /* @__PURE__ */ jsx(Panel, {
422
+ title: "Body",
423
+ size: "sm",
424
+ contentClassName: "p-0",
425
+ "data-testid": `endpoint-body-panel__${panelName}`,
426
+ children: /* @__PURE__ */ jsx(ReactJson, {
427
+ src: value ? JSON.parse(value) : {},
750
428
  theme: "default",
751
429
  enableClipboard: false,
752
- style: t3
753
- });
754
- $[3] = t2;
755
- $[4] = t4;
756
- } else t4 = $[4];
757
- let t5;
758
- if ($[5] !== t1 || $[6] !== t4) {
759
- t5 = /* @__PURE__ */ jsx(Panel, {
760
- title: "Body",
761
- size: "sm",
762
- contentClassName: "p-0",
763
- "data-testid": t1,
764
- children: t4
765
- });
766
- $[5] = t1;
767
- $[6] = t4;
768
- $[7] = t5;
769
- } else t5 = $[7];
770
- return t5;
430
+ style: { backgroundColor: "transparent" }
431
+ })
432
+ });
771
433
  };
772
434
 
773
435
  //#endregion
774
436
  //#region src/spec/spec-path-params-panel.tsx
775
- const EndpointPathParamsPanel = (t0) => {
776
- const $ = c(5);
777
- const { endpoint } = t0;
437
+ const EndpointPathParamsPanel = ({ endpoint }) => {
778
438
  const pathParams = usePathParams(endpoint.path);
779
439
  if (!pathParams.length) return null;
780
- let t1;
781
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
782
- t1 = { gridTemplateColumns: "1fr 2fr" };
783
- $[0] = t1;
784
- } else t1 = $[0];
785
- let t2;
786
- if ($[1] !== pathParams) {
787
- t2 = pathParams.map(_temp$7);
788
- $[1] = pathParams;
789
- $[2] = t2;
790
- } else t2 = $[2];
791
- let t3;
792
- if ($[3] !== t2) {
793
- t3 = /* @__PURE__ */ jsx(Panel, {
794
- title: "Path params",
795
- size: "sm",
796
- variant: "default",
797
- children: /* @__PURE__ */ jsx("div", {
798
- className: "grid gap-3",
799
- style: t1,
800
- children: t2
801
- })
802
- });
803
- $[3] = t2;
804
- $[4] = t3;
805
- } else t3 = $[4];
806
- return t3;
440
+ return /* @__PURE__ */ jsx(Panel, {
441
+ title: "Path params",
442
+ size: "sm",
443
+ variant: "default",
444
+ children: /* @__PURE__ */ jsx("div", {
445
+ className: "grid gap-3",
446
+ style: { gridTemplateColumns: "1fr 2fr" },
447
+ children: pathParams.map((param) => /* @__PURE__ */ jsx("div", {
448
+ className: "font-bold leading-[36px] flex text-xs",
449
+ children: param
450
+ }, param))
451
+ })
452
+ });
807
453
  };
808
- function _temp$7(param) {
809
- return /* @__PURE__ */ jsx("div", {
810
- className: "font-bold leading-[36px] flex text-xs",
811
- children: param
812
- }, param);
813
- }
814
454
 
815
455
  //#endregion
816
456
  //#region src/spec/spec-query-params-panel.tsx
817
- const EndpointQueryParamsPanel = (t0) => {
818
- const $ = c(5);
819
- const { endpoint } = t0;
457
+ const EndpointQueryParamsPanel = ({ endpoint }) => {
820
458
  if (!endpoint.queryParams?.length) return null;
821
- let t1;
822
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
823
- t1 = {
824
- gridTemplateColumns: "1fr 2fr",
825
- gridTemplateRows: "1fr 1fr"
826
- };
827
- $[0] = t1;
828
- } else t1 = $[0];
829
- let t2;
830
- if ($[1] !== endpoint.queryParams) {
831
- t2 = endpoint.queryParams.map(_temp$6);
832
- $[1] = endpoint.queryParams;
833
- $[2] = t2;
834
- } else t2 = $[2];
835
- let t3;
836
- if ($[3] !== t2) {
837
- t3 = /* @__PURE__ */ jsx(Panel, {
838
- title: "Query params",
839
- size: "sm",
840
- variant: "outlined",
841
- children: /* @__PURE__ */ jsx("div", {
842
- className: "grid gap-3",
843
- style: t1,
844
- children: t2
845
- })
846
- });
847
- $[3] = t2;
848
- $[4] = t3;
849
- } else t3 = $[4];
850
- return t3;
459
+ return /* @__PURE__ */ jsx(Panel, {
460
+ title: "Query params",
461
+ size: "sm",
462
+ variant: "outlined",
463
+ children: /* @__PURE__ */ jsx("div", {
464
+ className: "grid gap-3",
465
+ style: {
466
+ gridTemplateColumns: "1fr 2fr",
467
+ gridTemplateRows: "1fr 1fr"
468
+ },
469
+ children: endpoint.queryParams.map((param) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
470
+ className: "font-bold leading-[36px] flex text-xs",
471
+ children: param.name
472
+ }), /* @__PURE__ */ jsx("div", {
473
+ className: "flex items-center text-xs ",
474
+ children: /* @__PURE__ */ jsx("span", { children: param.description })
475
+ })] }, param.name))
476
+ })
477
+ });
851
478
  };
852
- function _temp$6(param) {
853
- return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
854
- className: "font-bold leading-[36px] flex text-xs",
855
- children: param.name
856
- }), /* @__PURE__ */ jsx("div", {
857
- className: "flex items-center text-xs ",
858
- children: /* @__PURE__ */ jsx("span", { children: param.description })
859
- })] }, param.name);
860
- }
861
479
 
862
480
  //#endregion
863
481
  //#region src/spec/spec-response-schema.tsx
864
- const EndpointResponseSchemaItem = (t0) => {
865
- const $ = c(9);
866
- const { responseCode, bodySchema } = t0;
867
- const theme = useThemeStore(_temp$5);
868
- let t1;
869
- if ($[0] !== bodySchema) {
870
- t1 = convertSchemaToJson(bodySchema);
871
- $[0] = bodySchema;
872
- $[1] = t1;
873
- } else t1 = $[1];
874
- const schema = t1;
482
+ const EndpointResponseSchemaItem = ({ responseCode, bodySchema }) => {
483
+ const theme = useThemeStore((store) => store.theme);
484
+ const schema = useMemo(() => convertSchemaToJson(bodySchema), [bodySchema]);
875
485
  const description = typeof bodySchema.description === "string" ? bodySchema.description : "";
876
- let t2;
877
- if ($[2] !== description || $[3] !== schema || $[4] !== theme) {
878
- t2 = /* @__PURE__ */ jsx("div", {
486
+ return /* @__PURE__ */ jsx(TabsContent, {
487
+ value: responseCode,
488
+ className: "border-t",
489
+ children: /* @__PURE__ */ jsx("div", {
879
490
  className: "text-xs font-mono rounded-lg whitespace-pre-wrap",
880
491
  children: schema ? /* @__PURE__ */ jsx(ReactJson, {
881
492
  src: schema,
@@ -886,729 +497,315 @@ const EndpointResponseSchemaItem = (t0) => {
886
497
  className: "text-xs font-mono rounded-lg whitespace-pre-wrap p-4",
887
498
  children: description
888
499
  })
889
- });
890
- $[2] = description;
891
- $[3] = schema;
892
- $[4] = theme;
893
- $[5] = t2;
894
- } else t2 = $[5];
895
- let t3;
896
- if ($[6] !== responseCode || $[7] !== t2) {
897
- t3 = /* @__PURE__ */ jsx(TabsContent, {
898
- value: responseCode,
899
- className: "border-t",
900
- children: t2
901
- }, responseCode);
902
- $[6] = responseCode;
903
- $[7] = t2;
904
- $[8] = t3;
905
- } else t3 = $[8];
906
- return t3;
500
+ })
501
+ }, responseCode);
907
502
  };
908
- const EndpointResponseSchema = (t0) => {
909
- const $ = c(10);
910
- const { items } = t0;
503
+ const EndpointResponseSchema = ({ items }) => {
911
504
  if (items.length === 0) return null;
912
- const t1 = items[0].responseCode;
913
- let t2;
914
- if ($[0] !== items) {
915
- t2 = items.map(_temp2);
916
- $[0] = items;
917
- $[1] = t2;
918
- } else t2 = $[1];
919
- let t3;
920
- if ($[2] !== t2) {
921
- t3 = /* @__PURE__ */ jsx("div", {
922
- className: "flex items-center justify-between bg-card",
923
- children: /* @__PURE__ */ jsx(TabsList, {
924
- className: "bg-transparent p-0",
925
- children: t2
926
- })
927
- });
928
- $[2] = t2;
929
- $[3] = t3;
930
- } else t3 = $[3];
931
- let t4;
932
- if ($[4] !== items) {
933
- t4 = items.map(_temp3);
934
- $[4] = items;
935
- $[5] = t4;
936
- } else t4 = $[5];
937
- let t5;
938
- if ($[6] !== items[0].responseCode || $[7] !== t3 || $[8] !== t4) {
939
- t5 = /* @__PURE__ */ jsx("div", {
940
- className: "flex flex-col rounded-lg border",
941
- children: /* @__PURE__ */ jsxs(Tabs, {
942
- defaultValue: t1,
943
- children: [t3, t4]
944
- })
945
- });
946
- $[6] = items[0].responseCode;
947
- $[7] = t3;
948
- $[8] = t4;
949
- $[9] = t5;
950
- } else t5 = $[9];
951
- return t5;
505
+ return /* @__PURE__ */ jsx("div", {
506
+ className: "flex flex-col rounded-lg border",
507
+ children: /* @__PURE__ */ jsxs(Tabs, {
508
+ defaultValue: items[0].responseCode,
509
+ children: [/* @__PURE__ */ jsx("div", {
510
+ className: "flex items-center justify-between bg-card",
511
+ children: /* @__PURE__ */ jsx(TabsList, {
512
+ className: "bg-transparent p-0",
513
+ children: items.map((item) => /* @__PURE__ */ jsx(TabsTrigger, {
514
+ value: item.responseCode,
515
+ className: "text-xs font-bold cursor-pointer",
516
+ children: item.responseCode
517
+ }, item.responseCode))
518
+ })
519
+ }), items.map((props) => /* @__PURE__ */ jsx(EndpointResponseSchemaItem, { ...props }, props.responseCode))]
520
+ })
521
+ });
952
522
  };
953
- function _temp$5(store) {
954
- return store.theme;
955
- }
956
- function _temp2(item) {
957
- return /* @__PURE__ */ jsx(TabsTrigger, {
958
- value: item.responseCode,
959
- className: "text-xs font-bold cursor-pointer",
960
- children: item.responseCode
961
- }, item.responseCode);
962
- }
963
- function _temp3(props) {
964
- return /* @__PURE__ */ jsx(EndpointResponseSchemaItem, { ...props }, props.responseCode);
965
- }
966
523
 
967
524
  //#endregion
968
525
  //#region src/spec/spec-side-panel.tsx
969
- const SpecSidePanel = (t0) => {
970
- const $ = c(25);
971
- const { endpoint, onClose } = t0;
526
+ const SpecSidePanel = ({ endpoint, onClose }) => {
972
527
  const { body } = useJsonSchemaToJson(endpoint.bodySchema);
973
- let t1;
974
- if ($[0] !== endpoint.method || $[1] !== endpoint.path) {
975
- t1 = /* @__PURE__ */ jsx(EndpointPath, {
528
+ return /* @__PURE__ */ jsxs(Sidebar, {
529
+ initialWidth: 600,
530
+ subtitle: endpoint.description,
531
+ title: /* @__PURE__ */ jsx(EndpointPath, {
976
532
  method: endpoint.method,
977
533
  path: endpoint.path
978
- });
979
- $[0] = endpoint.method;
980
- $[1] = endpoint.path;
981
- $[2] = t1;
982
- } else t1 = $[2];
983
- let t2;
984
- if ($[3] !== onClose) {
985
- t2 = /* @__PURE__ */ jsx(X, {
986
- className: "cursor-pointer w-4 h-4",
987
- onClick: onClose
988
- });
989
- $[3] = onClose;
990
- $[4] = t2;
991
- } else t2 = $[4];
992
- let t3;
993
- if ($[5] !== onClose || $[6] !== t2) {
994
- t3 = [{
995
- icon: t2,
534
+ }),
535
+ onClose,
536
+ actions: [{
537
+ icon: /* @__PURE__ */ jsx(X, {
538
+ className: "cursor-pointer w-4 h-4",
539
+ onClick: onClose
540
+ }),
996
541
  onClick: onClose
997
- }];
998
- $[5] = onClose;
999
- $[6] = t2;
1000
- $[7] = t3;
1001
- } else t3 = $[7];
1002
- let t4;
1003
- let t5;
1004
- if ($[8] !== endpoint) {
1005
- t4 = /* @__PURE__ */ jsx(EndpointPathParamsPanel, { endpoint });
1006
- t5 = /* @__PURE__ */ jsx(EndpointQueryParamsPanel, { endpoint });
1007
- $[8] = endpoint;
1008
- $[9] = t4;
1009
- $[10] = t5;
1010
- } else {
1011
- t4 = $[9];
1012
- t5 = $[10];
1013
- }
1014
- let t6;
1015
- if ($[11] !== body || $[12] !== endpoint) {
1016
- t6 = /* @__PURE__ */ jsx(EndpointBodyPanel, {
1017
- endpoint,
1018
- panelName: "details",
1019
- value: body
1020
- });
1021
- $[11] = body;
1022
- $[12] = endpoint;
1023
- $[13] = t6;
1024
- } else t6 = $[13];
1025
- let t7;
1026
- if ($[14] !== endpoint.responseSchema) {
1027
- t7 = /* @__PURE__ */ jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(_temp$4) });
1028
- $[14] = endpoint.responseSchema;
1029
- $[15] = t7;
1030
- } else t7 = $[15];
1031
- let t8;
1032
- if ($[16] !== endpoint.description || $[17] !== onClose || $[18] !== t1 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7) {
1033
- t8 = /* @__PURE__ */ jsxs(Sidebar, {
1034
- initialWidth: 600,
1035
- subtitle: endpoint.description,
1036
- title: t1,
1037
- onClose,
1038
- actions: t3,
1039
- children: [
1040
- t4,
1041
- t5,
1042
- t6,
1043
- t7
1044
- ]
1045
- });
1046
- $[16] = endpoint.description;
1047
- $[17] = onClose;
1048
- $[18] = t1;
1049
- $[19] = t3;
1050
- $[20] = t4;
1051
- $[21] = t5;
1052
- $[22] = t6;
1053
- $[23] = t7;
1054
- $[24] = t8;
1055
- } else t8 = $[24];
1056
- return t8;
542
+ }],
543
+ children: [
544
+ /* @__PURE__ */ jsx(EndpointPathParamsPanel, { endpoint }),
545
+ /* @__PURE__ */ jsx(EndpointQueryParamsPanel, { endpoint }),
546
+ /* @__PURE__ */ jsx(EndpointBodyPanel, {
547
+ endpoint,
548
+ panelName: "details",
549
+ value: body
550
+ }),
551
+ /* @__PURE__ */ jsx(EndpointResponseSchema, { items: Object.entries(endpoint?.responseSchema ?? {}).map(([status, schema]) => ({
552
+ responseCode: status,
553
+ bodySchema: schema
554
+ })) })
555
+ ]
556
+ });
1057
557
  };
1058
- function _temp$4(t0) {
1059
- const [status, schema] = t0;
1060
- return {
1061
- responseCode: status,
1062
- bodySchema: schema
1063
- };
1064
- }
1065
558
 
1066
559
  //#endregion
1067
560
  //#region src/components/json-editor.tsx
1068
- const JsonEditor = (t0) => {
1069
- const $ = c(40);
1070
- const { value, schema, onChange, onValidate, language: t1, readOnly: t2 } = t0;
1071
- const language = t1 === void 0 ? "json" : t1;
1072
- const readOnly = t2 === void 0 ? false : t2;
561
+ const JsonEditor = ({ value, schema, onChange, onValidate, language = "json", readOnly = false }) => {
1073
562
  const monaco = useMonaco();
1074
- const editorTheme = useThemeStore(_temp$3) === "dark" ? "transparent-dark" : "transparent-light";
563
+ const theme = useThemeStore((state) => state.theme);
564
+ const editorTheme = useMemo(() => theme === "dark" ? "transparent-dark" : "transparent-light", [theme]);
1075
565
  const [editor, setEditor] = useState(null);
1076
566
  const resizeAnimationFrameRef = useRef(null);
1077
567
  const isValidatingRef = useRef(false);
1078
- let t3;
1079
- let t4;
1080
- if ($[0] !== monaco) {
1081
- t3 = () => {
1082
- if (!monaco) return;
1083
- monaco.editor.defineTheme("transparent-light", {
1084
- base: "vs",
1085
- inherit: true,
1086
- rules: [],
1087
- colors: {
1088
- "editor.background": "#00000000",
1089
- "editor.lineHighlightBackground": "#00000000",
1090
- "editorLineNumber.foreground": "#999999",
1091
- "editorLineNumber.activeForeground": "#000000",
1092
- focusBorder: "#00000000",
1093
- "widget.border": "#00000000",
1094
- "editor.border": "#00000000",
1095
- "editorWidget.border": "#00000000"
1096
- }
1097
- });
1098
- monaco.editor.defineTheme("transparent-dark", {
1099
- base: "vs-dark",
1100
- inherit: true,
1101
- rules: [],
1102
- colors: {
1103
- "editor.background": "#00000000",
1104
- "editor.lineHighlightBackground": "#00000000",
1105
- "editorLineNumber.foreground": "#666666",
1106
- "editorLineNumber.activeForeground": "#ffffff",
1107
- focusBorder: "#00000000",
1108
- "widget.border": "#00000000",
1109
- "editor.border": "#00000000",
1110
- "editorWidget.border": "#00000000"
1111
- }
568
+ useLayoutEffect(() => {
569
+ if (!monaco) return;
570
+ monaco.editor.defineTheme("transparent-light", {
571
+ base: "vs",
572
+ inherit: true,
573
+ rules: [],
574
+ colors: {
575
+ "editor.background": "#00000000",
576
+ "editor.lineHighlightBackground": "#00000000",
577
+ "editorLineNumber.foreground": "#999999",
578
+ "editorLineNumber.activeForeground": "#000000",
579
+ focusBorder: "#00000000",
580
+ "widget.border": "#00000000",
581
+ "editor.border": "#00000000",
582
+ "editorWidget.border": "#00000000"
583
+ }
584
+ });
585
+ monaco.editor.defineTheme("transparent-dark", {
586
+ base: "vs-dark",
587
+ inherit: true,
588
+ rules: [],
589
+ colors: {
590
+ "editor.background": "#00000000",
591
+ "editor.lineHighlightBackground": "#00000000",
592
+ "editorLineNumber.foreground": "#666666",
593
+ "editorLineNumber.activeForeground": "#ffffff",
594
+ focusBorder: "#00000000",
595
+ "widget.border": "#00000000",
596
+ "editor.border": "#00000000",
597
+ "editorWidget.border": "#00000000"
598
+ }
599
+ });
600
+ }, [monaco]);
601
+ useEffect(() => {
602
+ if (!monaco) return;
603
+ monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: true });
604
+ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ schemas: schema ? [{
605
+ uri: window.location.href,
606
+ fileMatch: ["*"],
607
+ schema
608
+ }] : [] });
609
+ }, [monaco, schema]);
610
+ useLayoutEffect(() => {
611
+ if (!monaco) return;
612
+ monaco.editor.setTheme(editorTheme);
613
+ }, [monaco, editorTheme]);
614
+ useEffect(() => {
615
+ if (!editor) return;
616
+ const container = editor.getContainerDomNode().parentElement?.parentElement;
617
+ if (!container) return;
618
+ const handleResize = () => {
619
+ if (resizeAnimationFrameRef.current !== null) cancelAnimationFrame(resizeAnimationFrameRef.current);
620
+ resizeAnimationFrameRef.current = requestAnimationFrame(() => {
621
+ const { width, height } = container.getBoundingClientRect();
622
+ editor.layout({
623
+ width,
624
+ height
625
+ });
626
+ resizeAnimationFrameRef.current = null;
1112
627
  });
1113
628
  };
1114
- t4 = [monaco];
1115
- $[0] = monaco;
1116
- $[1] = t3;
1117
- $[2] = t4;
1118
- } else {
1119
- t3 = $[1];
1120
- t4 = $[2];
1121
- }
1122
- useLayoutEffect(t3, t4);
1123
- let t5;
1124
- let t6;
1125
- if ($[3] !== monaco || $[4] !== schema) {
1126
- t5 = () => {
1127
- if (!monaco) return;
1128
- monaco.languages.typescript.javascriptDefaults.setCompilerOptions({ isolatedModules: true });
1129
- monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ schemas: schema ? [{
1130
- uri: window.location.href,
1131
- fileMatch: ["*"],
1132
- schema
1133
- }] : [] });
1134
- };
1135
- t6 = [monaco, schema];
1136
- $[3] = monaco;
1137
- $[4] = schema;
1138
- $[5] = t5;
1139
- $[6] = t6;
1140
- } else {
1141
- t5 = $[5];
1142
- t6 = $[6];
1143
- }
1144
- useEffect(t5, t6);
1145
- let t7;
1146
- let t8;
1147
- if ($[7] !== editorTheme || $[8] !== monaco) {
1148
- t7 = () => {
1149
- if (!monaco) return;
1150
- monaco.editor.setTheme(editorTheme);
1151
- };
1152
- t8 = [monaco, editorTheme];
1153
- $[7] = editorTheme;
1154
- $[8] = monaco;
1155
- $[9] = t7;
1156
- $[10] = t8;
1157
- } else {
1158
- t7 = $[9];
1159
- t8 = $[10];
1160
- }
1161
- useLayoutEffect(t7, t8);
1162
- let t10;
1163
- let t9;
1164
- if ($[11] !== editor) {
1165
- t9 = () => {
1166
- if (!editor) return;
1167
- const container = editor.getContainerDomNode().parentElement?.parentElement;
1168
- if (!container) return;
1169
- const handleResize = () => {
1170
- if (resizeAnimationFrameRef.current !== null) cancelAnimationFrame(resizeAnimationFrameRef.current);
1171
- resizeAnimationFrameRef.current = requestAnimationFrame(() => {
1172
- const { width, height } = container.getBoundingClientRect();
1173
- editor.layout({
1174
- width,
1175
- height
1176
- });
1177
- resizeAnimationFrameRef.current = null;
1178
- });
1179
- };
1180
- handleResize();
1181
- const resizeObserver = new ResizeObserver(handleResize);
1182
- resizeObserver.observe(container);
1183
- return () => {
1184
- resizeObserver.disconnect();
1185
- if (resizeAnimationFrameRef.current !== null) cancelAnimationFrame(resizeAnimationFrameRef.current);
1186
- };
629
+ handleResize();
630
+ const resizeObserver = new ResizeObserver(handleResize);
631
+ resizeObserver.observe(container);
632
+ return () => {
633
+ resizeObserver.disconnect();
634
+ if (resizeAnimationFrameRef.current !== null) cancelAnimationFrame(resizeAnimationFrameRef.current);
1187
635
  };
1188
- t10 = [editor];
1189
- $[11] = editor;
1190
- $[12] = t10;
1191
- $[13] = t9;
1192
- } else {
1193
- t10 = $[12];
1194
- t9 = $[13];
1195
- }
1196
- useEffect(t9, t10);
1197
- let t11;
1198
- let t12;
1199
- if ($[14] !== editor || $[15] !== monaco || $[16] !== onValidate || $[17] !== schema || $[18] !== value) {
1200
- t11 = () => {
1201
- if (!editor || !monaco || !onValidate || isValidatingRef.current) return;
1202
- const model = editor.getModel();
1203
- if (!model) return;
1204
- if (schema && !value) {
1205
- isValidatingRef.current = true;
1206
- onValidate(false);
1207
- isValidatingRef.current = false;
1208
- return;
1209
- }
636
+ }, [editor]);
637
+ useEffect(() => {
638
+ if (!editor || !monaco || !onValidate || isValidatingRef.current) return;
639
+ const model = editor.getModel();
640
+ if (!model) return;
641
+ if (schema && !value) {
1210
642
  isValidatingRef.current = true;
1211
- const timeoutId = setTimeout(() => {
1212
- onValidate(monaco.editor.getModelMarkers({ resource: model.uri }).length === 0);
1213
- isValidatingRef.current = false;
1214
- }, 100);
1215
- return () => {
1216
- clearTimeout(timeoutId);
1217
- isValidatingRef.current = false;
1218
- };
1219
- };
1220
- t12 = [
1221
- editor,
1222
- monaco,
1223
- onValidate,
1224
- value,
1225
- schema
1226
- ];
1227
- $[14] = editor;
1228
- $[15] = monaco;
1229
- $[16] = onValidate;
1230
- $[17] = schema;
1231
- $[18] = value;
1232
- $[19] = t11;
1233
- $[20] = t12;
1234
- } else {
1235
- t11 = $[19];
1236
- t12 = $[20];
1237
- }
1238
- useEffect(t11, t12);
1239
- let t13;
1240
- if ($[21] !== schema) {
1241
- t13 = schema ? JSON.stringify(schema) : "no-schema";
1242
- $[21] = schema;
1243
- $[22] = t13;
1244
- } else t13 = $[22];
1245
- const editorKey = t13;
1246
- let t14;
1247
- if ($[23] !== onChange) {
1248
- t14 = (value_0) => {
1249
- onChange?.(value_0 ?? "");
643
+ onValidate(false);
644
+ isValidatingRef.current = false;
645
+ return;
646
+ }
647
+ isValidatingRef.current = true;
648
+ const timeoutId = setTimeout(() => {
649
+ onValidate(monaco.editor.getModelMarkers({ resource: model.uri }).length === 0);
650
+ isValidatingRef.current = false;
651
+ }, 100);
652
+ return () => {
653
+ clearTimeout(timeoutId);
654
+ isValidatingRef.current = false;
1250
655
  };
1251
- $[23] = onChange;
1252
- $[24] = t14;
1253
- } else t14 = $[24];
1254
- let t15;
1255
- if ($[25] !== onValidate || $[26] !== schema || $[27] !== value) {
1256
- t15 = (markers_0) => {
656
+ }, [
657
+ editor,
658
+ monaco,
659
+ onValidate,
660
+ value,
661
+ schema
662
+ ]);
663
+ const editorKey = useMemo(() => schema ? JSON.stringify(schema) : "no-schema", [schema]);
664
+ return /* @__PURE__ */ jsx(Editor, {
665
+ "data-testid": "json-editor",
666
+ language,
667
+ value,
668
+ loading: "",
669
+ theme: editorTheme,
670
+ onMount: setEditor,
671
+ onChange: (value$1) => {
672
+ onChange?.(value$1 ?? "");
673
+ },
674
+ onValidate: (markers) => {
1257
675
  if (!onValidate || isValidatingRef.current) return;
1258
676
  isValidatingRef.current = true;
1259
677
  if (schema && !value) onValidate(false);
1260
- else onValidate(markers_0.length === 0);
678
+ else onValidate(markers.length === 0);
1261
679
  isValidatingRef.current = false;
1262
- };
1263
- $[25] = onValidate;
1264
- $[26] = schema;
1265
- $[27] = value;
1266
- $[28] = t15;
1267
- } else t15 = $[28];
1268
- let t16;
1269
- if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
1270
- t16 = { enabled: false };
1271
- $[29] = t16;
1272
- } else t16 = $[29];
1273
- let t17;
1274
- if ($[30] !== readOnly) {
1275
- t17 = {
680
+ },
681
+ options: {
1276
682
  automaticLayout: false,
1277
683
  readOnly,
1278
684
  scrollBeyondLastLine: false,
1279
- minimap: t16,
685
+ minimap: { enabled: false },
1280
686
  overviewRulerLanes: 0
1281
- };
1282
- $[30] = readOnly;
1283
- $[31] = t17;
1284
- } else t17 = $[31];
1285
- let t18;
1286
- if ($[32] !== editorKey || $[33] !== editorTheme || $[34] !== language || $[35] !== t14 || $[36] !== t15 || $[37] !== t17 || $[38] !== value) {
1287
- t18 = /* @__PURE__ */ jsx(Editor, {
1288
- "data-testid": "json-editor",
1289
- language,
1290
- value,
1291
- loading: "",
1292
- theme: editorTheme,
1293
- onMount: setEditor,
1294
- onChange: t14,
1295
- onValidate: t15,
1296
- options: t17
1297
- }, editorKey);
1298
- $[32] = editorKey;
1299
- $[33] = editorTheme;
1300
- $[34] = language;
1301
- $[35] = t14;
1302
- $[36] = t15;
1303
- $[37] = t17;
1304
- $[38] = value;
1305
- $[39] = t18;
1306
- } else t18 = $[39];
1307
- return t18;
687
+ }
688
+ }, editorKey);
1308
689
  };
1309
- function _temp$3(state) {
1310
- return state.theme;
1311
- }
1312
690
 
1313
691
  //#endregion
1314
692
  //#region src/play/side-panel-body-tab.tsx
1315
- const SidePanelBodyTab = memo((t0) => {
1316
- const $ = c(20);
1317
- const { schema } = t0;
693
+ const SidePanelBodyTab = memo(({ schema }) => {
1318
694
  const { setBody, setBodyIsValid } = useEndpointConfiguration();
1319
695
  const bodyIsValid = useEndpointConfiguration(useShallow(getBodyIsValidSelector));
1320
696
  const body = useEndpointConfiguration(getBodySelector);
1321
697
  const previousSchemaRef = useRef(schema);
1322
698
  const userClearedRef = useRef(false);
1323
- let t1;
1324
- let t2;
1325
- if ($[0] !== body || $[1] !== schema || $[2] !== setBody || $[3] !== setBodyIsValid) {
1326
- t1 = () => {
1327
- const schemaChanged = previousSchemaRef.current !== schema;
1328
- previousSchemaRef.current = schema;
1329
- if (schemaChanged) userClearedRef.current = false;
1330
- if (schema && !body && !userClearedRef.current) {
1331
- setBody(JSON.stringify(convertSchemaToJson(schema), null, 2));
1332
- return;
1333
- }
1334
- if (!schema) {
1335
- setBody(body || "");
1336
- setBodyIsValid(true);
1337
- }
1338
- };
1339
- t2 = [
1340
- schema,
1341
- body,
1342
- setBody,
1343
- setBodyIsValid
1344
- ];
1345
- $[0] = body;
1346
- $[1] = schema;
1347
- $[2] = setBody;
1348
- $[3] = setBodyIsValid;
1349
- $[4] = t1;
1350
- $[5] = t2;
1351
- } else {
1352
- t1 = $[4];
1353
- t2 = $[5];
1354
- }
1355
- useEffect(t1, t2);
1356
- let t3;
1357
- if ($[6] !== schema || $[7] !== setBody || $[8] !== setBodyIsValid) {
1358
- t3 = (value) => {
1359
- setBody(value);
1360
- if (schema && !value) {
1361
- setBodyIsValid(false);
1362
- userClearedRef.current = true;
1363
- } else userClearedRef.current = false;
1364
- };
1365
- $[6] = schema;
1366
- $[7] = setBody;
1367
- $[8] = setBodyIsValid;
1368
- $[9] = t3;
1369
- } else t3 = $[9];
1370
- const handleBodyChange = t3;
1371
- let t4;
1372
- if ($[10] !== body || $[11] !== handleBodyChange || $[12] !== schema || $[13] !== setBodyIsValid) {
1373
- t4 = /* @__PURE__ */ jsx(JsonEditor, {
699
+ useEffect(() => {
700
+ const schemaChanged = previousSchemaRef.current !== schema;
701
+ previousSchemaRef.current = schema;
702
+ if (schemaChanged) userClearedRef.current = false;
703
+ if (schema && !body && !userClearedRef.current) {
704
+ setBody(JSON.stringify(convertSchemaToJson(schema), null, 2));
705
+ return;
706
+ }
707
+ if (!schema) {
708
+ setBody(body || "");
709
+ setBodyIsValid(true);
710
+ }
711
+ }, [
712
+ schema,
713
+ body,
714
+ setBody,
715
+ setBodyIsValid
716
+ ]);
717
+ return /* @__PURE__ */ jsxs("div", {
718
+ className: "max-h-full h-full relative",
719
+ children: [/* @__PURE__ */ jsx(JsonEditor, {
1374
720
  value: body,
1375
721
  schema,
1376
- onChange: handleBodyChange,
722
+ onChange: useCallback((value) => {
723
+ setBody(value);
724
+ if (schema && !value) {
725
+ setBodyIsValid(false);
726
+ userClearedRef.current = true;
727
+ } else userClearedRef.current = false;
728
+ }, [
729
+ setBody,
730
+ schema,
731
+ setBodyIsValid
732
+ ]),
1377
733
  onValidate: setBodyIsValid
1378
- });
1379
- $[10] = body;
1380
- $[11] = handleBodyChange;
1381
- $[12] = schema;
1382
- $[13] = setBodyIsValid;
1383
- $[14] = t4;
1384
- } else t4 = $[14];
1385
- let t5;
1386
- if ($[15] !== bodyIsValid) {
1387
- t5 = bodyIsValid === false && /* @__PURE__ */ jsxs("div", {
734
+ }), bodyIsValid === false && /* @__PURE__ */ jsxs("div", {
1388
735
  className: "absolute bottom-0 left-0 right-0 border-t border-border p-3 text-sm dark:text-yellow-500 text-yellow-700 flex items-center gap-1 font-medium",
1389
736
  "data-testid": "endpoint-body-tab-invalid",
1390
737
  children: [/* @__PURE__ */ jsx(CircleX, { className: "w-4 h-4" }), "The body payload is invalid"]
1391
- });
1392
- $[15] = bodyIsValid;
1393
- $[16] = t5;
1394
- } else t5 = $[16];
1395
- let t6;
1396
- if ($[17] !== t4 || $[18] !== t5) {
1397
- t6 = /* @__PURE__ */ jsxs("div", {
1398
- className: "max-h-full h-full relative",
1399
- children: [t4, t5]
1400
- });
1401
- $[17] = t4;
1402
- $[18] = t5;
1403
- $[19] = t6;
1404
- } else t6 = $[19];
1405
- return t6;
738
+ })]
739
+ });
1406
740
  });
1407
741
 
1408
742
  //#endregion
1409
743
  //#region src/components/configuration-list-item.tsx
1410
- const ConfigurationListItem = memo((t0) => {
1411
- const $ = c(58);
1412
- const { value, id, onUpdate, onRemove, required: t1 } = t0;
1413
- const required = t1 === void 0 ? false : t1;
744
+ const ConfigurationListItem = memo(({ value, id, onUpdate, onRemove, required = false }) => {
1414
745
  const [activeConfiguration, setActiveConfiguration] = useState(null);
1415
746
  const [valueToDelete, setValueToDelete] = useState(null);
1416
747
  const deleteTimeout = useRef(void 0);
1417
748
  const isActive = activeConfiguration === id;
1418
- let t2;
1419
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
1420
- t2 = (key) => {
1421
- clearTimeout(deleteTimeout.current);
1422
- setValueToDelete(key);
1423
- deleteTimeout.current = setTimeout(() => {
1424
- setValueToDelete(null);
1425
- }, 5e3);
1426
- };
1427
- $[0] = t2;
1428
- } else t2 = $[0];
1429
- const onDelete = t2;
1430
- let t3;
1431
- if ($[1] !== id || $[2] !== required) {
1432
- t3 = () => {
1433
- if (required) return;
1434
- setActiveConfiguration(id);
1435
- };
1436
- $[1] = id;
1437
- $[2] = required;
1438
- $[3] = t3;
1439
- } else t3 = $[3];
1440
- const onMouseOver = t3;
1441
- let t4;
1442
- if ($[4] !== required) {
1443
- t4 = () => {
1444
- if (required) return;
1445
- setActiveConfiguration(null);
1446
- };
1447
- $[4] = required;
1448
- $[5] = t4;
1449
- } else t4 = $[5];
1450
- const onMouseLeave = t4;
1451
- const t5 = isActive && "bg-card";
1452
- let t6;
1453
- if ($[6] !== t5) {
1454
- t6 = cn("grid grid-cols-[auto_1fr_auto] items-center py-2 px-4 bg-muted/30 rounded-lg gap-2", t5);
1455
- $[6] = t5;
1456
- $[7] = t6;
1457
- } else t6 = $[7];
1458
- let t7;
1459
- if ($[8] !== id || $[9] !== onUpdate) {
1460
- t7 = (checked) => onUpdate(id, "active", checked);
1461
- $[8] = id;
1462
- $[9] = onUpdate;
1463
- $[10] = t7;
1464
- } else t7 = $[10];
1465
- let t8;
1466
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
1467
- t8 = /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" });
1468
- $[11] = t8;
1469
- } else t8 = $[11];
1470
- let t9;
1471
- if ($[12] !== required || $[13] !== t7 || $[14] !== value.active) {
1472
- t9 = /* @__PURE__ */ jsx(Checkbox, {
1473
- checked: value.active,
1474
- onCheckedChange: t7,
1475
- disabled: required,
1476
- children: t8
1477
- });
1478
- $[12] = required;
1479
- $[13] = t7;
1480
- $[14] = value.active;
1481
- $[15] = t9;
1482
- } else t9 = $[15];
1483
- const t10 = !value.active;
1484
- const t11 = required ? "outlineReadonly" : "outline";
1485
- const t12 = `name-${id}`;
1486
- let t13;
1487
- if ($[16] !== id || $[17] !== onUpdate) {
1488
- t13 = (e) => onUpdate(id, "name", e.target.value);
1489
- $[16] = id;
1490
- $[17] = onUpdate;
1491
- $[18] = t13;
1492
- } else t13 = $[18];
1493
- let t14;
1494
- if ($[19] !== required || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t13 || $[24] !== value.name) {
1495
- t14 = /* @__PURE__ */ jsx(Input, {
1496
- readOnly: required,
1497
- disabled: t10,
1498
- variant: t11,
1499
- id: t12,
1500
- defaultValue: value.name,
1501
- onBlur: t13,
1502
- placeholder: "Name",
1503
- className: "h-8"
1504
- });
1505
- $[19] = required;
1506
- $[20] = t10;
1507
- $[21] = t11;
1508
- $[22] = t12;
1509
- $[23] = t13;
1510
- $[24] = value.name;
1511
- $[25] = t14;
1512
- } else t14 = $[25];
1513
- const t15 = !value.active;
1514
- const t16 = `value-${id}`;
1515
- let t17;
1516
- if ($[26] !== id || $[27] !== onUpdate) {
1517
- t17 = (e_0) => onUpdate(id, "value", e_0.target.value);
1518
- $[26] = id;
1519
- $[27] = onUpdate;
1520
- $[28] = t17;
1521
- } else t17 = $[28];
1522
- let t18;
1523
- if ($[29] !== t15 || $[30] !== t16 || $[31] !== t17 || $[32] !== value.value) {
1524
- t18 = /* @__PURE__ */ jsx(Input, {
1525
- disabled: t15,
1526
- variant: "outline",
1527
- id: t16,
1528
- defaultValue: value.value,
1529
- onBlur: t17,
1530
- placeholder: "Value",
1531
- className: "h-8"
1532
- });
1533
- $[29] = t15;
1534
- $[30] = t16;
1535
- $[31] = t17;
1536
- $[32] = value.value;
1537
- $[33] = t18;
1538
- } else t18 = $[33];
1539
- let t19;
1540
- if ($[34] !== t14 || $[35] !== t18) {
1541
- t19 = /* @__PURE__ */ jsxs("div", {
1542
- className: "grid grid-cols-2 gap-2",
1543
- children: [t14, t18]
1544
- });
1545
- $[34] = t14;
1546
- $[35] = t18;
1547
- $[36] = t19;
1548
- } else t19 = $[36];
1549
- let t20;
1550
- if ($[37] !== id || $[38] !== onRemove || $[39] !== valueToDelete) {
1551
- t20 = () => {
1552
- if (valueToDelete === id) onRemove?.(id);
1553
- else onDelete(id);
1554
- };
1555
- $[37] = id;
1556
- $[38] = onRemove;
1557
- $[39] = valueToDelete;
1558
- $[40] = t20;
1559
- } else t20 = $[40];
1560
- const t21 = isActive && "opacity-100";
1561
- let t22;
1562
- if ($[41] !== t21) {
1563
- t22 = cn("h-6 w-6 opacity-0 transition-opacity duration-200", t21);
1564
- $[41] = t21;
1565
- $[42] = t22;
1566
- } else t22 = $[42];
1567
- const t23 = valueToDelete === id && isActive ? "Click again to remove" : "Remove";
1568
- let t24;
1569
- if ($[43] !== id || $[44] !== valueToDelete) {
1570
- t24 = valueToDelete === id ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" });
1571
- $[43] = id;
1572
- $[44] = valueToDelete;
1573
- $[45] = t24;
1574
- } else t24 = $[45];
1575
- let t25;
1576
- if ($[46] !== t20 || $[47] !== t22 || $[48] !== t23 || $[49] !== t24) {
1577
- t25 = /* @__PURE__ */ jsx(Button, {
1578
- variant: "ghost",
1579
- size: "icon",
1580
- onClick: t20,
1581
- className: t22,
1582
- title: t23,
1583
- children: t24
1584
- });
1585
- $[46] = t20;
1586
- $[47] = t22;
1587
- $[48] = t23;
1588
- $[49] = t24;
1589
- $[50] = t25;
1590
- } else t25 = $[50];
1591
- let t26;
1592
- if ($[51] !== onMouseLeave || $[52] !== onMouseOver || $[53] !== t19 || $[54] !== t25 || $[55] !== t6 || $[56] !== t9) {
1593
- t26 = /* @__PURE__ */ jsxs("div", {
1594
- className: t6,
1595
- onMouseOver,
1596
- onMouseLeave,
1597
- children: [
1598
- t9,
1599
- t19,
1600
- t25
1601
- ]
1602
- });
1603
- $[51] = onMouseLeave;
1604
- $[52] = onMouseOver;
1605
- $[53] = t19;
1606
- $[54] = t25;
1607
- $[55] = t6;
1608
- $[56] = t9;
1609
- $[57] = t26;
1610
- } else t26 = $[57];
1611
- return t26;
749
+ const onDelete = useCallback((key) => {
750
+ clearTimeout(deleteTimeout.current);
751
+ setValueToDelete(key);
752
+ deleteTimeout.current = setTimeout(() => {
753
+ setValueToDelete(null);
754
+ }, 5e3);
755
+ }, [setValueToDelete]);
756
+ const onMouseOver = useCallback(() => {
757
+ if (required) return;
758
+ setActiveConfiguration(id);
759
+ }, [id, required]);
760
+ const onMouseLeave = useCallback(() => {
761
+ if (required) return;
762
+ setActiveConfiguration(null);
763
+ }, [required]);
764
+ return /* @__PURE__ */ jsxs("div", {
765
+ className: cn("grid grid-cols-[auto_1fr_auto] items-center py-2 px-4 bg-muted/30 rounded-lg gap-2", isActive && "bg-card"),
766
+ onMouseOver,
767
+ onMouseLeave,
768
+ children: [
769
+ /* @__PURE__ */ jsx(Checkbox, {
770
+ checked: value.active,
771
+ onCheckedChange: (checked) => onUpdate(id, "active", checked),
772
+ disabled: required,
773
+ children: /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" })
774
+ }),
775
+ /* @__PURE__ */ jsxs("div", {
776
+ className: "grid grid-cols-2 gap-2",
777
+ children: [/* @__PURE__ */ jsx(Input, {
778
+ readOnly: required,
779
+ disabled: !value.active,
780
+ variant: required ? "outlineReadonly" : "outline",
781
+ id: `name-${id}`,
782
+ defaultValue: value.name,
783
+ onBlur: (e) => onUpdate(id, "name", e.target.value),
784
+ placeholder: "Name",
785
+ className: "h-8"
786
+ }), /* @__PURE__ */ jsx(Input, {
787
+ disabled: !value.active,
788
+ variant: "outline",
789
+ id: `value-${id}`,
790
+ defaultValue: value.value,
791
+ onBlur: (e) => onUpdate(id, "value", e.target.value),
792
+ placeholder: "Value",
793
+ className: "h-8"
794
+ })]
795
+ }),
796
+ /* @__PURE__ */ jsx(Button, {
797
+ variant: "ghost",
798
+ size: "icon",
799
+ onClick: () => {
800
+ if (valueToDelete === id) onRemove?.(id);
801
+ else onDelete(id);
802
+ },
803
+ className: cn("h-6 w-6 opacity-0 transition-opacity duration-200", isActive && "opacity-100"),
804
+ title: valueToDelete === id && isActive ? "Click again to remove" : "Remove",
805
+ children: valueToDelete === id ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3 w-3 text-destructive" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3" })
806
+ })
807
+ ]
808
+ });
1612
809
  });
1613
810
 
1614
811
  //#endregion
@@ -1648,12 +845,12 @@ const SidePanelHeadersTab = () => {
1648
845
  })
1649
846
  }), /* @__PURE__ */ jsxs("div", {
1650
847
  className: "p-2",
1651
- children: [Object.entries(headers).map(([key_0, header]) => /* @__PURE__ */ jsx(ConfigurationListItem, {
848
+ children: [Object.entries(headers).map(([key, header]) => /* @__PURE__ */ jsx(ConfigurationListItem, {
1652
849
  value: header,
1653
- id: key_0,
850
+ id: key,
1654
851
  onUpdate: updateHeader,
1655
852
  onRemove: removeHeaders
1656
- }, key_0)), Object.entries(headers).length === 0 && /* @__PURE__ */ jsx("div", {
853
+ }, key)), Object.entries(headers).length === 0 && /* @__PURE__ */ jsx("div", {
1657
854
  className: "grid grid-cols-1 items-center h-full",
1658
855
  children: /* @__PURE__ */ jsx("div", {
1659
856
  className: "text-sm text-muted-foreground text-center",
@@ -1668,119 +865,57 @@ const SidePanelHeadersTab = () => {
1668
865
  //#region src/hooks/use-path-url.ts
1669
866
  const queryParamsSelector = (state) => Object.values(getQueryParamsSelector(state)).filter((param) => param.active && param.value !== "" && param.name !== "");
1670
867
  const usePathUrl = (path) => {
1671
- const $ = c(5);
1672
868
  const pathParams = useEndpointConfiguration(useShallow(getPathParamsSelector));
1673
869
  const queryParams = useEndpointConfiguration(useShallow(queryParamsSelector));
1674
- let t0;
1675
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
1676
- t0 = /:(\w+)/g;
1677
- $[0] = t0;
1678
- } else t0 = $[0];
1679
- let t1;
1680
- if ($[1] !== pathParams) {
1681
- t1 = (match, p1) => pathParams[p1]?.value || match;
1682
- $[1] = pathParams;
1683
- $[2] = t1;
1684
- } else t1 = $[2];
1685
- const url = path.replace(t0, t1);
1686
- let t2;
1687
- if ($[3] !== queryParams) {
1688
- t2 = queryParams.length > 0 ? `?${queryParams.map(_temp$2).join("&")}` : "";
1689
- $[3] = queryParams;
1690
- $[4] = t2;
1691
- } else t2 = $[4];
1692
- return url + t2;
870
+ return useMemo(() => {
871
+ return path.replace(/:(\w+)/g, (match, p1) => {
872
+ return pathParams[p1]?.value || match;
873
+ }) + (queryParams.length > 0 ? `?${queryParams.map((param) => `${param.name}=${param.value}`).join("&")}` : "");
874
+ }, [
875
+ path,
876
+ pathParams,
877
+ queryParams
878
+ ]);
1693
879
  };
1694
- function _temp$2(param) {
1695
- return `${param.name}=${param.value}`;
1696
- }
1697
880
 
1698
881
  //#endregion
1699
882
  //#region src/components/endpoint-path-preview.tsx
1700
- const EndpointPathPreview = (t0) => {
1701
- const $ = c(16);
1702
- const { path, baseUrl: t1 } = t0;
1703
- const fullUrl = `${t1 === void 0 ? window.location.origin : t1}${usePathUrl(path)}`;
883
+ const EndpointPathPreview = ({ path, baseUrl = window.location.origin }) => {
884
+ const fullUrl = `${baseUrl}${usePathUrl(path)}`;
1704
885
  const [copied, setCopied] = useState(false);
1705
- let t2;
1706
- if ($[0] !== fullUrl) {
1707
- t2 = async () => {
1708
- try {
1709
- await navigator.clipboard.writeText(fullUrl);
1710
- setCopied(true);
1711
- setTimeout(() => setCopied(false), 2e3);
1712
- } catch (t3$1) {
1713
- const err = t3$1;
1714
- console.error("Failed to copy URL:", err);
1715
- }
1716
- };
1717
- $[0] = fullUrl;
1718
- $[1] = t2;
1719
- } else t2 = $[1];
1720
- const handleCopy = t2;
1721
- let t3;
1722
- if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
1723
- t3 = /* @__PURE__ */ jsx("div", {
886
+ const handleCopy = async () => {
887
+ try {
888
+ await navigator.clipboard.writeText(fullUrl);
889
+ setCopied(true);
890
+ setTimeout(() => setCopied(false), 2e3);
891
+ } catch (err) {
892
+ console.error("Failed to copy URL:", err);
893
+ }
894
+ };
895
+ return /* @__PURE__ */ jsxs("div", {
896
+ className: "grid grid-cols-[auto_1fr] items-center gap-5 px-5 relative border-b border-border",
897
+ children: [/* @__PURE__ */ jsx("div", {
1724
898
  className: "text-sm font-medium py-2",
1725
899
  children: "URL Preview"
1726
- });
1727
- $[2] = t3;
1728
- } else t3 = $[2];
1729
- let t4;
1730
- if ($[3] !== fullUrl) {
1731
- t4 = /* @__PURE__ */ jsx("div", {
1732
- className: "min-w-0",
1733
- children: /* @__PURE__ */ jsx("div", {
1734
- className: "font-medium text-xs text-muted-foreground truncate",
1735
- title: fullUrl,
1736
- children: fullUrl
1737
- })
1738
- });
1739
- $[3] = fullUrl;
1740
- $[4] = t4;
1741
- } else t4 = $[4];
1742
- const t5 = copied ? "text-green-400" : "text-muted-foreground";
1743
- let t6;
1744
- if ($[5] !== t5) {
1745
- t6 = cn("w-3 h-3 grid place-items-center transition-colors cursor-pointer", t5);
1746
- $[5] = t5;
1747
- $[6] = t6;
1748
- } else t6 = $[6];
1749
- let t7;
1750
- if ($[7] !== copied) {
1751
- t7 = copied ? /* @__PURE__ */ jsx(Check, { className: "w-2.5 h-2.5" }) : /* @__PURE__ */ jsx(Copy, { className: "w-2.5 h-2.5" });
1752
- $[7] = copied;
1753
- $[8] = t7;
1754
- } else t7 = $[8];
1755
- let t8;
1756
- if ($[9] !== handleCopy || $[10] !== t6 || $[11] !== t7) {
1757
- t8 = /* @__PURE__ */ jsx(Button, {
1758
- onClick: handleCopy,
1759
- className: t6,
1760
- variant: "icon",
1761
- size: "sm",
1762
- "aria-label": "Copy URL",
1763
- children: t7
1764
- });
1765
- $[9] = handleCopy;
1766
- $[10] = t6;
1767
- $[11] = t7;
1768
- $[12] = t8;
1769
- } else t8 = $[12];
1770
- let t9;
1771
- if ($[13] !== t4 || $[14] !== t8) {
1772
- t9 = /* @__PURE__ */ jsxs("div", {
1773
- className: "grid grid-cols-[auto_1fr] items-center gap-5 px-5 relative border-b border-border",
1774
- children: [t3, /* @__PURE__ */ jsxs("div", {
1775
- className: "bg-muted-foreground/10 box-border grid grid-cols-[1fr_auto] gap-1 h-6 items-center px-2 py-1 rounded border border-border",
1776
- children: [t4, t8]
900
+ }), /* @__PURE__ */ jsxs("div", {
901
+ className: "bg-muted-foreground/10 box-border grid grid-cols-[1fr_auto] gap-1 h-6 items-center px-2 py-1 rounded border border-border",
902
+ children: [/* @__PURE__ */ jsx("div", {
903
+ className: "min-w-0",
904
+ children: /* @__PURE__ */ jsx("div", {
905
+ className: "font-medium text-xs text-muted-foreground truncate",
906
+ title: fullUrl,
907
+ children: fullUrl
908
+ })
909
+ }), /* @__PURE__ */ jsx(Button, {
910
+ onClick: handleCopy,
911
+ className: cn("w-3 h-3 grid place-items-center transition-colors cursor-pointer", copied ? "text-green-400" : "text-muted-foreground"),
912
+ variant: "icon",
913
+ size: "sm",
914
+ "aria-label": "Copy URL",
915
+ children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-2.5 h-2.5" }) : /* @__PURE__ */ jsx(Copy, { className: "w-2.5 h-2.5" })
1777
916
  })]
1778
- });
1779
- $[13] = t4;
1780
- $[14] = t8;
1781
- $[15] = t9;
1782
- } else t9 = $[15];
1783
- return t9;
917
+ })]
918
+ });
1784
919
  };
1785
920
 
1786
921
  //#endregion
@@ -1819,13 +954,13 @@ const SidePanelParamsTab = ({ path }) => {
1819
954
  }
1820
955
  });
1821
956
  }, [queryParams, setQueryParams]);
1822
- const updatePathParam = useCallback((key_0, field_0, value_0) => {
1823
- if (!key_0) return;
957
+ const updatePathParam = useCallback((key, field, value) => {
958
+ if (!key) return;
1824
959
  setPathParams({
1825
960
  ...pathParams,
1826
- [key_0]: {
1827
- ...pathParams[key_0],
1828
- [field_0]: value_0
961
+ [key]: {
962
+ ...pathParams[key],
963
+ [field]: value
1829
964
  }
1830
965
  });
1831
966
  }, [pathParams, setPathParams]);
@@ -1865,12 +1000,12 @@ const SidePanelParamsTab = ({ path }) => {
1865
1000
  className: "text-sm font-medium pl-3",
1866
1001
  children: "Query parameters"
1867
1002
  }),
1868
- Object.entries(queryParams).map(([key_1, param_0]) => /* @__PURE__ */ jsx(ConfigurationListItem, {
1869
- value: param_0,
1870
- id: key_1,
1003
+ Object.entries(queryParams).map(([key, param]) => /* @__PURE__ */ jsx(ConfigurationListItem, {
1004
+ value: param,
1005
+ id: key,
1871
1006
  onUpdate: updateParam,
1872
1007
  onRemove: removeQueryParams
1873
- }, key_1)),
1008
+ }, key)),
1874
1009
  Object.entries(queryParams).length === 0 && /* @__PURE__ */ jsx("div", {
1875
1010
  className: "grid grid-cols-1 items-center h-full",
1876
1011
  children: /* @__PURE__ */ jsx("div", {
@@ -1888,60 +1023,19 @@ const SidePanelParamsTab = ({ path }) => {
1888
1023
  //#endregion
1889
1024
  //#region src/hooks/use-state-stream.ts
1890
1025
  const useStateStream = (object) => {
1891
- const $ = c(14);
1892
- let t0;
1893
- if ($[0] !== object) {
1894
- t0 = typeof object === "string" ? {} : object || {};
1895
- $[0] = object;
1896
- $[1] = t0;
1897
- } else t0 = $[1];
1898
- let __motia;
1899
- let rest;
1900
- if ($[2] !== t0) {
1901
- ({__motia, ...rest} = t0);
1902
- $[2] = t0;
1903
- $[3] = __motia;
1904
- $[4] = rest;
1905
- } else {
1906
- __motia = $[3];
1907
- rest = $[4];
1908
- }
1026
+ const { __motia, ...rest } = typeof object === "string" ? {} : object || {};
1909
1027
  const { data } = useStreamItem(__motia);
1910
1028
  const originalData = Array.isArray(object) ? object : rest || object;
1911
- if (typeof object === "string") {
1912
- let t1$1;
1913
- if ($[5] !== object) {
1914
- t1$1 = {
1915
- data: object,
1916
- originalData: object,
1917
- isStreamed: false
1918
- };
1919
- $[5] = object;
1920
- $[6] = t1$1;
1921
- } else t1$1 = $[6];
1922
- return t1$1;
1923
- }
1924
- let t1;
1925
- if ($[7] !== data || $[8] !== originalData) {
1926
- t1 = JSON.stringify(data || originalData, null, 2);
1927
- $[7] = data;
1928
- $[8] = originalData;
1929
- $[9] = t1;
1930
- } else t1 = $[9];
1931
- const t2 = !!__motia;
1932
- let t3;
1933
- if ($[10] !== originalData || $[11] !== t1 || $[12] !== t2) {
1934
- t3 = {
1935
- data: t1,
1936
- originalData,
1937
- isStreamed: t2
1938
- };
1939
- $[10] = originalData;
1940
- $[11] = t1;
1941
- $[12] = t2;
1942
- $[13] = t3;
1943
- } else t3 = $[13];
1944
- return t3;
1029
+ if (typeof object === "string") return {
1030
+ data: object,
1031
+ originalData: object,
1032
+ isStreamed: false
1033
+ };
1034
+ return {
1035
+ data: JSON.stringify(data || originalData, null, 2),
1036
+ originalData,
1037
+ isStreamed: !!__motia
1038
+ };
1945
1039
  };
1946
1040
 
1947
1041
  //#endregion
@@ -2016,55 +1110,19 @@ const getStatusMessage = (statusCode) => {
2016
1110
 
2017
1111
  //#endregion
2018
1112
  //#region src/play/response-code.tsx
2019
- const ResponseCode = (t0) => {
2020
- const $ = c(12);
2021
- const { statusCode } = t0;
2022
- let t1;
2023
- if ($[0] !== statusCode) {
2024
- t1 = getStatusMessage(statusCode);
2025
- $[0] = statusCode;
2026
- $[1] = t1;
2027
- } else t1 = $[1];
2028
- const statusMessage = t1;
2029
- const isSuccess = statusCode > 0 && statusCode < 400;
2030
- const isWarning = statusCode >= 400 && statusCode < 500;
2031
- const isError = statusCode >= 500;
2032
- const t2 = isWarning && "dark:bg-[#EAB71F]/20 dark:text-[#EAB71F] bg-[#EAB71F] text-white";
2033
- const t3 = isError && "dark:bg-[#F8367D]/20 dark:text-[#F8367D] bg-[#F8367D] text-white";
2034
- const t4 = isSuccess && "dark:bg-accent-200 dark:text-primary bg-accent text-white";
2035
- let t5;
2036
- if ($[2] !== t2 || $[3] !== t3 || $[4] !== t4) {
2037
- t5 = cn("px-2 py-1 rounded-sm flex items-center gap-1", t2, t3, t4);
2038
- $[2] = t2;
2039
- $[3] = t3;
2040
- $[4] = t4;
2041
- $[5] = t5;
2042
- } else t5 = $[5];
2043
- let t6;
2044
- if ($[6] !== statusCode) {
2045
- t6 = /* @__PURE__ */ jsx("span", {
2046
- className: "font-bold font-mono",
2047
- children: statusCode
2048
- });
2049
- $[6] = statusCode;
2050
- $[7] = t6;
2051
- } else t6 = $[7];
2052
- let t7;
2053
- if ($[8] !== statusMessage || $[9] !== t5 || $[10] !== t6) {
2054
- t7 = /* @__PURE__ */ jsxs("div", {
2055
- className: t5,
2056
- children: [
2057
- t6,
2058
- " ",
2059
- statusMessage
2060
- ]
2061
- });
2062
- $[8] = statusMessage;
2063
- $[9] = t5;
2064
- $[10] = t6;
2065
- $[11] = t7;
2066
- } else t7 = $[11];
2067
- return t7;
1113
+ const ResponseCode = ({ statusCode }) => {
1114
+ const statusMessage = getStatusMessage(statusCode);
1115
+ return /* @__PURE__ */ jsxs("div", {
1116
+ className: cn("px-2 py-1 rounded-sm flex items-center gap-1", statusCode >= 400 && statusCode < 500 && "dark:bg-[#EAB71F]/20 dark:text-[#EAB71F] bg-[#EAB71F] text-white", statusCode >= 500 && "dark:bg-[#F8367D]/20 dark:text-[#F8367D] bg-[#F8367D] text-white", statusCode > 0 && statusCode < 400 && "dark:bg-accent-200 dark:text-primary bg-accent text-white"),
1117
+ children: [
1118
+ /* @__PURE__ */ jsx("span", {
1119
+ className: "font-bold font-mono",
1120
+ children: statusCode
1121
+ }),
1122
+ " ",
1123
+ statusMessage
1124
+ ]
1125
+ });
2068
1126
  };
2069
1127
 
2070
1128
  //#endregion
@@ -2083,40 +1141,25 @@ const useLanguage = (contentType) => {
2083
1141
  if (contentType?.includes("html")) return "html";
2084
1142
  return "text";
2085
1143
  };
2086
- const ResponseContent = (t0) => {
2087
- const $ = c(13);
2088
- const { code, blob, contentType } = t0;
2089
- const themeStyle = useThemeStore(_temp$1) === "dark" ? atomDark : oneLight;
1144
+ const ResponseContent = ({ code, blob, contentType }) => {
1145
+ const themeStyle = useThemeStore((state) => state.theme) === "dark" ? atomDark : oneLight;
2090
1146
  const language = useLanguage(contentType);
2091
- let t1;
2092
- if ($[0] !== blob) {
2093
- t1 = () => {
2094
- if (blob) {
2095
- const url = URL.createObjectURL(blob);
2096
- window.open(url, "_blank");
2097
- }
2098
- };
2099
- $[0] = blob;
2100
- $[1] = t1;
2101
- } else t1 = $[1];
2102
- const onDownload = t1;
2103
- let t2;
2104
- if ($[2] !== blob || $[3] !== onDownload) {
2105
- t2 = blob && /* @__PURE__ */ jsx("div", {
1147
+ const onDownload = () => {
1148
+ if (blob) {
1149
+ const url = URL.createObjectURL(blob);
1150
+ window.open(url, "_blank");
1151
+ }
1152
+ };
1153
+ return /* @__PURE__ */ jsxs("div", {
1154
+ className: "flex flex-col h-full overflow-y-auto",
1155
+ children: [blob && /* @__PURE__ */ jsx("div", {
2106
1156
  className: "flex p-8 justify-center",
2107
1157
  children: /* @__PURE__ */ jsxs(Button, {
2108
1158
  variant: "default",
2109
1159
  onClick: onDownload,
2110
1160
  children: [/* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }), " Download"]
2111
1161
  })
2112
- });
2113
- $[2] = blob;
2114
- $[3] = onDownload;
2115
- $[4] = t2;
2116
- } else t2 = $[4];
2117
- let t3;
2118
- if ($[5] !== blob || $[6] !== code || $[7] !== language || $[8] !== themeStyle) {
2119
- t3 = !blob && code && /* @__PURE__ */ jsx(Prism, {
1162
+ }), !blob && code && /* @__PURE__ */ jsx(Prism, {
2120
1163
  showLineNumbers: true,
2121
1164
  language,
2122
1165
  style: themeStyle,
@@ -2124,178 +1167,76 @@ const ResponseContent = (t0) => {
2124
1167
  customStyle,
2125
1168
  wrapLines: true,
2126
1169
  children: code
2127
- });
2128
- $[5] = blob;
2129
- $[6] = code;
2130
- $[7] = language;
2131
- $[8] = themeStyle;
2132
- $[9] = t3;
2133
- } else t3 = $[9];
2134
- let t4;
2135
- if ($[10] !== t2 || $[11] !== t3) {
2136
- t4 = /* @__PURE__ */ jsxs("div", {
2137
- className: "flex flex-col h-full overflow-y-auto",
2138
- children: [t2, t3]
2139
- });
2140
- $[10] = t2;
2141
- $[11] = t3;
2142
- $[12] = t4;
2143
- } else t4 = $[12];
2144
- return t4;
1170
+ })]
1171
+ });
2145
1172
  };
2146
- function _temp$1(state) {
2147
- return state.theme;
2148
- }
2149
1173
 
2150
1174
  //#endregion
2151
1175
  //#region src/play/side-panel-response.tsx
2152
1176
  const SidePanelResponse = memo(() => {
2153
- const $ = c(28);
2154
1177
  const { setResponse } = useEndpointConfiguration();
2155
1178
  const response = useEndpointConfiguration(getResponseSelector);
2156
1179
  const { data } = useStateStream(response?.body instanceof Blob ? void 0 : response?.body);
2157
1180
  const [activeTab, setActiveTab] = useState("preview");
2158
- let t0;
2159
- if ($[0] !== setResponse) {
2160
- t0 = () => setResponse(void 0);
2161
- $[0] = setResponse;
2162
- $[1] = t0;
2163
- } else t0 = $[1];
2164
- const onClose = t0;
1181
+ const onClose = () => setResponse(void 0);
2165
1182
  if (!response) return null;
2166
- let t1;
2167
- if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
2168
- t1 = (value) => setActiveTab(value);
2169
- $[2] = t1;
2170
- } else t1 = $[2];
2171
- let t2;
2172
- if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
2173
- t2 = /* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
2174
- value: "preview",
2175
- className: "cursor-pointer",
2176
- children: "Preview"
2177
- }), /* @__PURE__ */ jsx(TabsTrigger, {
2178
- value: "headers",
2179
- className: "grid grid-cols-[auto_auto] gap-2 items-center cursor-pointer",
2180
- children: "Headers"
2181
- })] });
2182
- $[3] = t2;
2183
- } else t2 = $[3];
2184
- let t3;
2185
- if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
2186
- t3 = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" });
2187
- $[4] = t3;
2188
- } else t3 = $[4];
2189
- let t4;
2190
- if ($[5] !== onClose) {
2191
- t4 = /* @__PURE__ */ jsxs("div", {
2192
- className: "grid grid-cols-[1fr_auto] items-center h-10 border-b px-5 bg-card",
2193
- children: [t2, /* @__PURE__ */ jsx(Button, {
2194
- variant: "ghost",
2195
- size: "icon",
2196
- onClick: onClose,
2197
- children: t3
2198
- })]
2199
- });
2200
- $[5] = onClose;
2201
- $[6] = t4;
2202
- } else t4 = $[6];
2203
- let t5;
2204
- if ($[7] !== response.statusCode) {
2205
- t5 = /* @__PURE__ */ jsx(ResponseCode, { statusCode: response.statusCode });
2206
- $[7] = response.statusCode;
2207
- $[8] = t5;
2208
- } else t5 = $[8];
2209
- let t6;
2210
- if ($[9] !== response.executionTime) {
2211
- t6 = !!response.executionTime && /* @__PURE__ */ jsxs("div", {
2212
- className: "text-muted-foreground bg-muted-foreground/10 px-2 py-1 rounded-sm",
2213
- children: [response.executionTime, "ms"]
2214
- });
2215
- $[9] = response.executionTime;
2216
- $[10] = t6;
2217
- } else t6 = $[10];
2218
- let t7;
2219
- if ($[11] !== t5 || $[12] !== t6) {
2220
- t7 = /* @__PURE__ */ jsx("div", {
2221
- className: "sticky bottom-0 border-b border-border p-3 text-sm flex items-center gap-1 font-medium",
2222
- children: /* @__PURE__ */ jsxs("div", {
2223
- className: "flex flex-row items-center flex-1 gap-3",
2224
- children: [t5, t6]
2225
- })
2226
- });
2227
- $[11] = t5;
2228
- $[12] = t6;
2229
- $[13] = t7;
2230
- } else t7 = $[13];
2231
- const t8 = response?.body instanceof Blob ? response.body : void 0;
2232
- const t9 = response.headers["content-type"];
2233
- let t10;
2234
- if ($[14] !== data || $[15] !== t8 || $[16] !== t9) {
2235
- t10 = /* @__PURE__ */ jsx(TabsContent, {
2236
- value: "preview",
2237
- children: /* @__PURE__ */ jsx(ResponseContent, {
2238
- code: data,
2239
- blob: t8,
2240
- contentType: t9
2241
- })
2242
- });
2243
- $[14] = data;
2244
- $[15] = t8;
2245
- $[16] = t9;
2246
- $[17] = t10;
2247
- } else t10 = $[17];
2248
- let t11;
2249
- if ($[18] !== response.headers) {
2250
- t11 = response.headers && Object.entries(response.headers).map(_temp);
2251
- $[18] = response.headers;
2252
- $[19] = t11;
2253
- } else t11 = $[19];
2254
- let t12;
2255
- if ($[20] !== t11) {
2256
- t12 = /* @__PURE__ */ jsx(TabsContent, {
2257
- value: "headers",
2258
- children: /* @__PURE__ */ jsx("div", {
2259
- className: "grid grid-cols-[auto_minmax(0,1fr)] gap-4 p-4 overflow-auto auto-rows-max h-full",
2260
- children: t11
1183
+ return /* @__PURE__ */ jsxs(Tabs, {
1184
+ value: activeTab,
1185
+ onValueChange: (value) => setActiveTab(value),
1186
+ className: "border-l border-border",
1187
+ "data-testid": "endpoint-response-container",
1188
+ children: [
1189
+ /* @__PURE__ */ jsxs("div", {
1190
+ className: "grid grid-cols-[1fr_auto] items-center h-10 border-b px-5 bg-card",
1191
+ children: [/* @__PURE__ */ jsxs(TabsList, { children: [/* @__PURE__ */ jsx(TabsTrigger, {
1192
+ value: "preview",
1193
+ className: "cursor-pointer",
1194
+ children: "Preview"
1195
+ }), /* @__PURE__ */ jsx(TabsTrigger, {
1196
+ value: "headers",
1197
+ className: "grid grid-cols-[auto_auto] gap-2 items-center cursor-pointer",
1198
+ children: "Headers"
1199
+ })] }), /* @__PURE__ */ jsx(Button, {
1200
+ variant: "ghost",
1201
+ size: "icon",
1202
+ onClick: onClose,
1203
+ children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
1204
+ })]
1205
+ }),
1206
+ /* @__PURE__ */ jsx("div", {
1207
+ className: "sticky bottom-0 border-b border-border p-3 text-sm flex items-center gap-1 font-medium",
1208
+ children: /* @__PURE__ */ jsxs("div", {
1209
+ className: "flex flex-row items-center flex-1 gap-3",
1210
+ children: [/* @__PURE__ */ jsx(ResponseCode, { statusCode: response.statusCode }), !!response.executionTime && /* @__PURE__ */ jsxs("div", {
1211
+ className: "text-muted-foreground bg-muted-foreground/10 px-2 py-1 rounded-sm",
1212
+ children: [response.executionTime, "ms"]
1213
+ })]
1214
+ })
1215
+ }),
1216
+ /* @__PURE__ */ jsx(TabsContent, {
1217
+ value: "preview",
1218
+ children: /* @__PURE__ */ jsx(ResponseContent, {
1219
+ code: data,
1220
+ blob: response?.body instanceof Blob ? response.body : void 0,
1221
+ contentType: response.headers["content-type"]
1222
+ })
1223
+ }),
1224
+ /* @__PURE__ */ jsx(TabsContent, {
1225
+ value: "headers",
1226
+ children: /* @__PURE__ */ jsx("div", {
1227
+ className: "grid grid-cols-[auto_minmax(0,1fr)] gap-4 p-4 overflow-auto auto-rows-max h-full",
1228
+ children: response.headers && Object.entries(response.headers).map(([key, value]) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
1229
+ className: "font-bold text-sm h-8 items-center grid whitespace-nowrap",
1230
+ children: key
1231
+ }), /* @__PURE__ */ jsx("span", {
1232
+ className: "text-sm text-muted-foreground h-8 items-center grid whitespace-nowrap",
1233
+ children: value
1234
+ })] }))
1235
+ })
2261
1236
  })
2262
- });
2263
- $[20] = t11;
2264
- $[21] = t12;
2265
- } else t12 = $[21];
2266
- let t13;
2267
- if ($[22] !== activeTab || $[23] !== t10 || $[24] !== t12 || $[25] !== t4 || $[26] !== t7) {
2268
- t13 = /* @__PURE__ */ jsxs(Tabs, {
2269
- value: activeTab,
2270
- onValueChange: t1,
2271
- className: "border-l border-border",
2272
- "data-testid": "endpoint-response-container",
2273
- children: [
2274
- t4,
2275
- t7,
2276
- t10,
2277
- t12
2278
- ]
2279
- });
2280
- $[22] = activeTab;
2281
- $[23] = t10;
2282
- $[24] = t12;
2283
- $[25] = t4;
2284
- $[26] = t7;
2285
- $[27] = t13;
2286
- } else t13 = $[27];
2287
- return t13;
1237
+ ]
1238
+ });
2288
1239
  });
2289
- function _temp(t0) {
2290
- const [key, value_0] = t0;
2291
- return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
2292
- className: "font-bold text-sm h-8 items-center grid whitespace-nowrap",
2293
- children: key
2294
- }), /* @__PURE__ */ jsx("span", {
2295
- className: "text-sm text-muted-foreground h-8 items-center grid whitespace-nowrap",
2296
- children: value_0
2297
- })] });
2298
- }
2299
1240
 
2300
1241
  //#endregion
2301
1242
  //#region src/play/trigger-button.tsx
@@ -2308,8 +1249,8 @@ const TriggerButton = memo(({ method, path }) => {
2308
1249
  const onClick = async () => {
2309
1250
  try {
2310
1251
  setIsLoading(true);
2311
- const _headers = Object.values(headers).filter((header) => header.active && header.name !== "" && header.value !== "").reduce((acc, header_0) => {
2312
- acc[header_0.name.toLowerCase()] = header_0.value;
1252
+ const _headers = Object.values(headers).filter((header) => header.active && header.name !== "" && header.value !== "").reduce((acc, header) => {
1253
+ acc[header.name.toLowerCase()] = header.value;
2313
1254
  return acc;
2314
1255
  }, {});
2315
1256
  const startTime = Date.now();
@@ -2344,408 +1285,157 @@ const TriggerButton = memo(({ method, path }) => {
2344
1285
  const headersCountSelector = (state) => Object.keys(getHeadersSelector(state)).length;
2345
1286
  const hasResponseSelector = (state) => getResponseSelector(state) !== void 0;
2346
1287
  const paramsCountSelector = (state) => Object.keys(getQueryParamsSelector(state)).length;
2347
- const SidePanel = memo((t0) => {
2348
- const $ = c(61);
2349
- const { endpoint, onClose } = t0;
1288
+ const SidePanel = memo(({ endpoint, onClose }) => {
2350
1289
  const [activeTab, setActiveTab] = useState(endpoint.method === "GET" || endpoint.method === "DELETE" ? "params" : "body");
2351
1290
  const [isSpecOpen, setIsSpecOpen] = useState(false);
2352
1291
  const headersCount = useEndpointConfiguration(useShallow(headersCountSelector));
2353
1292
  const hasResponse = useEndpointConfiguration(useShallow(hasResponseSelector));
2354
1293
  const pathParamsCount = usePathParams(endpoint.path).length;
2355
1294
  const paramsCount = useEndpointConfiguration(useShallow(paramsCountSelector)) + pathParamsCount;
2356
- let t1;
2357
- if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
2358
- t1 = /* @__PURE__ */ jsx(BackgroundEffect, {});
2359
- $[0] = t1;
2360
- } else t1 = $[0];
2361
- let t2;
2362
- if ($[1] !== endpoint.method || $[2] !== endpoint.path) {
2363
- t2 = /* @__PURE__ */ jsx(EndpointPath, {
2364
- method: endpoint.method,
2365
- path: endpoint.path
2366
- });
2367
- $[1] = endpoint.method;
2368
- $[2] = endpoint.path;
2369
- $[3] = t2;
2370
- } else t2 = $[3];
2371
- let t3;
2372
- if ($[4] !== endpoint.description) {
2373
- t3 = endpoint.description && /* @__PURE__ */ jsx("p", {
2374
- className: "text-sm text-muted-foreground",
2375
- children: endpoint.description
2376
- });
2377
- $[4] = endpoint.description;
2378
- $[5] = t3;
2379
- } else t3 = $[5];
2380
- let t4;
2381
- if ($[6] !== t2 || $[7] !== t3) {
2382
- t4 = /* @__PURE__ */ jsxs("div", {
2383
- className: "grid grid-rows-2 gap-2",
2384
- children: [t2, t3]
2385
- });
2386
- $[6] = t2;
2387
- $[7] = t3;
2388
- $[8] = t4;
2389
- } else t4 = $[8];
2390
- let t5;
2391
- if ($[9] !== isSpecOpen) {
2392
- t5 = () => setIsSpecOpen(!isSpecOpen);
2393
- $[9] = isSpecOpen;
2394
- $[10] = t5;
2395
- } else t5 = $[10];
2396
- let t6;
2397
- if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
2398
- t6 = /* @__PURE__ */ jsx(Book, {});
2399
- $[11] = t6;
2400
- } else t6 = $[11];
2401
- let t7;
2402
- if ($[12] !== t5) {
2403
- t7 = /* @__PURE__ */ jsx("div", {
2404
- className: "flex items-end justify-end",
2405
- children: /* @__PURE__ */ jsx(Button, {
2406
- variant: "icon",
2407
- size: "icon",
2408
- onClick: t5,
2409
- "data-testid": "endpoint-spec-button",
2410
- children: t6
1295
+ return /* @__PURE__ */ jsxs("div", {
1296
+ className: "isolate grid grid-cols-1 overflow-y-auto min-w-0 grid-rows-[auto_1fr] border-l border-border",
1297
+ "data-testid": "endpoint-details-panel",
1298
+ children: [
1299
+ /* @__PURE__ */ jsx(BackgroundEffect, {}),
1300
+ /* @__PURE__ */ jsxs("div", {
1301
+ className: "grid grid-cols-[1fr_1fr_auto] items-start gap-4 px-5 py-4 border-b bg-card w-full",
1302
+ children: [
1303
+ /* @__PURE__ */ jsxs("div", {
1304
+ className: "grid grid-rows-2 gap-2",
1305
+ children: [/* @__PURE__ */ jsx(EndpointPath, {
1306
+ method: endpoint.method,
1307
+ path: endpoint.path
1308
+ }), endpoint.description && /* @__PURE__ */ jsx("p", {
1309
+ className: "text-sm text-muted-foreground",
1310
+ children: endpoint.description
1311
+ })]
1312
+ }),
1313
+ /* @__PURE__ */ jsx("div", {
1314
+ className: "flex items-end justify-end",
1315
+ children: /* @__PURE__ */ jsx(Button, {
1316
+ variant: "icon",
1317
+ size: "icon",
1318
+ onClick: () => setIsSpecOpen(!isSpecOpen),
1319
+ "data-testid": "endpoint-spec-button",
1320
+ children: /* @__PURE__ */ jsx(Book, {})
1321
+ })
1322
+ }),
1323
+ /* @__PURE__ */ jsx(Button, {
1324
+ variant: "icon",
1325
+ size: "icon",
1326
+ onClick: onClose,
1327
+ children: /* @__PURE__ */ jsx(X, {})
1328
+ })
1329
+ ]
1330
+ }),
1331
+ /* @__PURE__ */ jsxs("div", {
1332
+ className: cn("grid grid-cols-[minmax(380px,1fr)_minmax(auto,1fr)]", !hasResponse && "grid-cols-1"),
1333
+ children: [/* @__PURE__ */ jsxs(Tabs, {
1334
+ value: activeTab,
1335
+ onValueChange: (value) => setActiveTab(value),
1336
+ children: [
1337
+ /* @__PURE__ */ jsxs("div", {
1338
+ className: "grid grid-cols-[1fr_auto] items-center h-10 border-b px-5 bg-card",
1339
+ children: [/* @__PURE__ */ jsxs(TabsList, { children: [
1340
+ /* @__PURE__ */ jsxs(TabsTrigger, {
1341
+ value: "params",
1342
+ className: "grid grid-cols-[auto_auto] gap-2 items-center cursor-pointer",
1343
+ "data-testid": "endpoint-params-tab",
1344
+ children: ["Params", /* @__PURE__ */ jsx(Badge, {
1345
+ variant: "outline",
1346
+ className: "h-4 px-1.5 text-xs",
1347
+ children: paramsCount
1348
+ })]
1349
+ }),
1350
+ /* @__PURE__ */ jsx(TabsTrigger, {
1351
+ value: "body",
1352
+ className: "cursor-pointer",
1353
+ "data-testid": "endpoint-body-tab",
1354
+ children: "Body"
1355
+ }),
1356
+ /* @__PURE__ */ jsxs(TabsTrigger, {
1357
+ value: "headers",
1358
+ className: "grid grid-cols-[auto_auto] gap-2 items-center cursor-pointer",
1359
+ "data-testid": "endpoint-headers-tab",
1360
+ children: ["Headers", /* @__PURE__ */ jsx(Badge, {
1361
+ variant: "outline",
1362
+ className: "h-4 px-1.5 text-xs",
1363
+ children: headersCount
1364
+ })]
1365
+ })
1366
+ ] }), /* @__PURE__ */ jsx(TriggerButton, {
1367
+ method: endpoint.method,
1368
+ path: endpoint.path.toString()
1369
+ })]
1370
+ }),
1371
+ /* @__PURE__ */ jsx(TabsContent, {
1372
+ value: "params",
1373
+ children: /* @__PURE__ */ jsx(SidePanelParamsTab, { path: endpoint.path })
1374
+ }),
1375
+ /* @__PURE__ */ jsx(TabsContent, {
1376
+ value: "body",
1377
+ children: /* @__PURE__ */ jsx(SidePanelBodyTab, { schema: endpoint.bodySchema })
1378
+ }),
1379
+ /* @__PURE__ */ jsx(TabsContent, {
1380
+ value: "headers",
1381
+ children: /* @__PURE__ */ jsx(SidePanelHeadersTab, {})
1382
+ })
1383
+ ]
1384
+ }), /* @__PURE__ */ jsx(SidePanelResponse, {})]
1385
+ }),
1386
+ isSpecOpen && /* @__PURE__ */ jsx(SpecSidePanel, {
1387
+ endpoint,
1388
+ onClose: () => setIsSpecOpen(false)
2411
1389
  })
2412
- });
2413
- $[12] = t5;
2414
- $[13] = t7;
2415
- } else t7 = $[13];
2416
- let t8;
2417
- if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
2418
- t8 = /* @__PURE__ */ jsx(X, {});
2419
- $[14] = t8;
2420
- } else t8 = $[14];
2421
- let t9;
2422
- if ($[15] !== onClose) {
2423
- t9 = /* @__PURE__ */ jsx(Button, {
2424
- variant: "icon",
2425
- size: "icon",
2426
- onClick: onClose,
2427
- children: t8
2428
- });
2429
- $[15] = onClose;
2430
- $[16] = t9;
2431
- } else t9 = $[16];
2432
- let t10;
2433
- if ($[17] !== t4 || $[18] !== t7 || $[19] !== t9) {
2434
- t10 = /* @__PURE__ */ jsxs("div", {
2435
- className: "grid grid-cols-[1fr_1fr_auto] items-start gap-4 px-5 py-4 border-b bg-card w-full",
2436
- children: [
2437
- t4,
2438
- t7,
2439
- t9
2440
- ]
2441
- });
2442
- $[17] = t4;
2443
- $[18] = t7;
2444
- $[19] = t9;
2445
- $[20] = t10;
2446
- } else t10 = $[20];
2447
- const t11 = !hasResponse && "grid-cols-1";
2448
- let t12;
2449
- if ($[21] !== t11) {
2450
- t12 = cn("grid grid-cols-[minmax(380px,1fr)_minmax(auto,1fr)]", t11);
2451
- $[21] = t11;
2452
- $[22] = t12;
2453
- } else t12 = $[22];
2454
- let t13;
2455
- if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
2456
- t13 = (value) => setActiveTab(value);
2457
- $[23] = t13;
2458
- } else t13 = $[23];
2459
- let t14;
2460
- if ($[24] !== paramsCount) {
2461
- t14 = /* @__PURE__ */ jsxs(TabsTrigger, {
2462
- value: "params",
2463
- className: "grid grid-cols-[auto_auto] gap-2 items-center cursor-pointer",
2464
- "data-testid": "endpoint-params-tab",
2465
- children: ["Params", /* @__PURE__ */ jsx(Badge, {
2466
- variant: "outline",
2467
- className: "h-4 px-1.5 text-xs",
2468
- children: paramsCount
2469
- })]
2470
- });
2471
- $[24] = paramsCount;
2472
- $[25] = t14;
2473
- } else t14 = $[25];
2474
- let t15;
2475
- if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
2476
- t15 = /* @__PURE__ */ jsx(TabsTrigger, {
2477
- value: "body",
2478
- className: "cursor-pointer",
2479
- "data-testid": "endpoint-body-tab",
2480
- children: "Body"
2481
- });
2482
- $[26] = t15;
2483
- } else t15 = $[26];
2484
- let t16;
2485
- if ($[27] !== headersCount) {
2486
- t16 = /* @__PURE__ */ jsxs(TabsTrigger, {
2487
- value: "headers",
2488
- className: "grid grid-cols-[auto_auto] gap-2 items-center cursor-pointer",
2489
- "data-testid": "endpoint-headers-tab",
2490
- children: ["Headers", /* @__PURE__ */ jsx(Badge, {
2491
- variant: "outline",
2492
- className: "h-4 px-1.5 text-xs",
2493
- children: headersCount
2494
- })]
2495
- });
2496
- $[27] = headersCount;
2497
- $[28] = t16;
2498
- } else t16 = $[28];
2499
- let t17;
2500
- if ($[29] !== t14 || $[30] !== t16) {
2501
- t17 = /* @__PURE__ */ jsxs(TabsList, { children: [
2502
- t14,
2503
- t15,
2504
- t16
2505
- ] });
2506
- $[29] = t14;
2507
- $[30] = t16;
2508
- $[31] = t17;
2509
- } else t17 = $[31];
2510
- const t18 = endpoint.method;
2511
- let t19;
2512
- if ($[32] !== endpoint.path) {
2513
- t19 = endpoint.path.toString();
2514
- $[32] = endpoint.path;
2515
- $[33] = t19;
2516
- } else t19 = $[33];
2517
- let t20;
2518
- if ($[34] !== endpoint.method || $[35] !== t19) {
2519
- t20 = /* @__PURE__ */ jsx(TriggerButton, {
2520
- method: t18,
2521
- path: t19
2522
- });
2523
- $[34] = endpoint.method;
2524
- $[35] = t19;
2525
- $[36] = t20;
2526
- } else t20 = $[36];
2527
- let t21;
2528
- if ($[37] !== t17 || $[38] !== t20) {
2529
- t21 = /* @__PURE__ */ jsxs("div", {
2530
- className: "grid grid-cols-[1fr_auto] items-center h-10 border-b px-5 bg-card",
2531
- children: [t17, t20]
2532
- });
2533
- $[37] = t17;
2534
- $[38] = t20;
2535
- $[39] = t21;
2536
- } else t21 = $[39];
2537
- let t22;
2538
- if ($[40] !== endpoint.path) {
2539
- t22 = /* @__PURE__ */ jsx(TabsContent, {
2540
- value: "params",
2541
- children: /* @__PURE__ */ jsx(SidePanelParamsTab, { path: endpoint.path })
2542
- });
2543
- $[40] = endpoint.path;
2544
- $[41] = t22;
2545
- } else t22 = $[41];
2546
- let t23;
2547
- if ($[42] !== endpoint.bodySchema) {
2548
- t23 = /* @__PURE__ */ jsx(TabsContent, {
2549
- value: "body",
2550
- children: /* @__PURE__ */ jsx(SidePanelBodyTab, { schema: endpoint.bodySchema })
2551
- });
2552
- $[42] = endpoint.bodySchema;
2553
- $[43] = t23;
2554
- } else t23 = $[43];
2555
- let t24;
2556
- if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
2557
- t24 = /* @__PURE__ */ jsx(TabsContent, {
2558
- value: "headers",
2559
- children: /* @__PURE__ */ jsx(SidePanelHeadersTab, {})
2560
- });
2561
- $[44] = t24;
2562
- } else t24 = $[44];
2563
- let t25;
2564
- if ($[45] !== activeTab || $[46] !== t21 || $[47] !== t22 || $[48] !== t23) {
2565
- t25 = /* @__PURE__ */ jsxs(Tabs, {
2566
- value: activeTab,
2567
- onValueChange: t13,
2568
- children: [
2569
- t21,
2570
- t22,
2571
- t23,
2572
- t24
2573
- ]
2574
- });
2575
- $[45] = activeTab;
2576
- $[46] = t21;
2577
- $[47] = t22;
2578
- $[48] = t23;
2579
- $[49] = t25;
2580
- } else t25 = $[49];
2581
- let t26;
2582
- if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
2583
- t26 = /* @__PURE__ */ jsx(SidePanelResponse, {});
2584
- $[50] = t26;
2585
- } else t26 = $[50];
2586
- let t27;
2587
- if ($[51] !== t12 || $[52] !== t25) {
2588
- t27 = /* @__PURE__ */ jsxs("div", {
2589
- className: t12,
2590
- children: [t25, t26]
2591
- });
2592
- $[51] = t12;
2593
- $[52] = t25;
2594
- $[53] = t27;
2595
- } else t27 = $[53];
2596
- let t28;
2597
- if ($[54] !== endpoint || $[55] !== isSpecOpen) {
2598
- t28 = isSpecOpen && /* @__PURE__ */ jsx(SpecSidePanel, {
2599
- endpoint,
2600
- onClose: () => setIsSpecOpen(false)
2601
- });
2602
- $[54] = endpoint;
2603
- $[55] = isSpecOpen;
2604
- $[56] = t28;
2605
- } else t28 = $[56];
2606
- let t29;
2607
- if ($[57] !== t10 || $[58] !== t27 || $[59] !== t28) {
2608
- t29 = /* @__PURE__ */ jsxs("div", {
2609
- className: "isolate grid grid-cols-1 overflow-y-auto min-w-0 grid-rows-[auto_1fr] border-l border-border",
2610
- "data-testid": "endpoint-details-panel",
2611
- children: [
2612
- t1,
2613
- t10,
2614
- t27,
2615
- t28
2616
- ]
2617
- });
2618
- $[57] = t10;
2619
- $[58] = t27;
2620
- $[59] = t28;
2621
- $[60] = t29;
2622
- } else t29 = $[60];
2623
- return t29;
1390
+ ]
1391
+ });
2624
1392
  });
2625
1393
 
2626
1394
  //#endregion
2627
1395
  //#region src/endpoints-page.tsx
2628
1396
  const EndpointsPage = () => {
2629
- const $ = c(32);
2630
1397
  const { endpoints, groupedEndpoints } = useGetEndpoints();
2631
1398
  const { selectedEndpointId, setSelectedEndpointId, toggleFlowGroupStatus, flowGroupStatus } = useEndpointConfiguration();
2632
- let t0;
2633
- if ($[0] !== endpoints || $[1] !== selectedEndpointId) {
2634
- let t1$1;
2635
- if ($[3] !== selectedEndpointId) {
2636
- t1$1 = (endpoint) => endpoint.id === selectedEndpointId;
2637
- $[3] = selectedEndpointId;
2638
- $[4] = t1$1;
2639
- } else t1$1 = $[4];
2640
- t0 = endpoints.find(t1$1);
2641
- $[0] = endpoints;
2642
- $[1] = selectedEndpointId;
2643
- $[2] = t0;
2644
- } else t0 = $[2];
2645
- const selectedEndpoint = t0;
2646
- let t1;
2647
- if ($[5] !== setSelectedEndpointId) {
2648
- t1 = () => {
2649
- setSelectedEndpointId("");
2650
- };
2651
- $[5] = setSelectedEndpointId;
2652
- $[6] = t1;
2653
- } else t1 = $[6];
2654
- const onClose = t1;
1399
+ const selectedEndpoint = useMemo(() => endpoints.find((endpoint) => endpoint.id === selectedEndpointId), [endpoints, selectedEndpointId]);
1400
+ const onClose = useCallback(() => {
1401
+ setSelectedEndpointId("");
1402
+ }, [setSelectedEndpointId]);
2655
1403
  const [search, setSearch] = useState("");
2656
- let t2;
2657
- if ($[7] !== groupedEndpoints || $[8] !== search) {
2658
- t2 = Object.entries(groupedEndpoints).filter((t3$1) => {
2659
- const [, endpoints_0] = t3$1;
2660
- return endpoints_0.some((endpoint_0) => endpoint_0.method?.toLowerCase().includes(search.toLowerCase()) || endpoint_0.path?.toLowerCase().includes(search.toLowerCase()));
1404
+ const filteredEndpoints = useMemo(() => {
1405
+ return Object.entries(groupedEndpoints).filter(([_, endpoints$1]) => {
1406
+ return endpoints$1.some((endpoint) => endpoint.method?.toLowerCase().includes(search.toLowerCase()) || endpoint.path?.toLowerCase().includes(search.toLowerCase()));
2661
1407
  });
2662
- $[7] = groupedEndpoints;
2663
- $[8] = search;
2664
- $[9] = t2;
2665
- } else t2 = $[9];
2666
- const filteredEndpoints = t2;
2667
- const t3 = selectedEndpoint ? "grid-cols-[300px_1fr] " : "grid-cols-1";
2668
- let t4;
2669
- if ($[10] !== t3) {
2670
- t4 = cn("grid h-full max-h-full", t3);
2671
- $[10] = t3;
2672
- $[11] = t4;
2673
- } else t4 = $[11];
2674
- let t5;
2675
- if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
2676
- t5 = () => setSearch("");
2677
- $[12] = t5;
2678
- } else t5 = $[12];
2679
- let t6;
2680
- if ($[13] !== search) {
2681
- t6 = /* @__PURE__ */ jsx(EndpointsSearch, {
2682
- value: search,
2683
- onChange: setSearch,
2684
- onClear: t5
2685
- });
2686
- $[13] = search;
2687
- $[14] = t6;
2688
- } else t6 = $[14];
2689
- let t7;
2690
- if ($[15] !== filteredEndpoints || $[16] !== flowGroupStatus || $[17] !== search || $[18] !== selectedEndpointId || $[19] !== setSelectedEndpointId || $[20] !== toggleFlowGroupStatus) {
2691
- t7 = /* @__PURE__ */ jsx("div", {
2692
- className: "grid grid-cols-1 auto-rows-max overflow-auto min-w-0",
2693
- children: filteredEndpoints.map((t8$1) => {
2694
- const [flow, endpoints_1] = t8$1;
2695
- const isSelected = endpoints_1.some((endpoint_1) => endpoint_1.id === selectedEndpointId);
2696
- return /* @__PURE__ */ jsx(FlowGroup, {
2697
- flow,
2698
- endpoints: endpoints_1,
2699
- isOpen: !flowGroupStatus[flow] || isSelected || search !== "",
2700
- isSelected,
2701
- onToggle: toggleFlowGroupStatus,
2702
- onClearSelection: () => setSelectedEndpointId(""),
2703
- selectedEndpointId,
2704
- onSelectEndpoint: setSelectedEndpointId
2705
- }, flow);
2706
- })
2707
- });
2708
- $[15] = filteredEndpoints;
2709
- $[16] = flowGroupStatus;
2710
- $[17] = search;
2711
- $[18] = selectedEndpointId;
2712
- $[19] = setSelectedEndpointId;
2713
- $[20] = toggleFlowGroupStatus;
2714
- $[21] = t7;
2715
- } else t7 = $[21];
2716
- let t8;
2717
- if ($[22] !== t6 || $[23] !== t7) {
2718
- t8 = /* @__PURE__ */ jsxs("div", {
1408
+ }, [groupedEndpoints, search]);
1409
+ return /* @__PURE__ */ jsxs("div", {
1410
+ className: cn("grid h-full max-h-full", selectedEndpoint ? "grid-cols-[300px_1fr] " : "grid-cols-1"),
1411
+ "data-testid": "endpoints-list",
1412
+ children: [/* @__PURE__ */ jsxs("div", {
2719
1413
  className: "grid grid-rows-[auto_1fr] h-full overflow-auto min-w-0",
2720
- children: [t6, t7]
2721
- });
2722
- $[22] = t6;
2723
- $[23] = t7;
2724
- $[24] = t8;
2725
- } else t8 = $[24];
2726
- let t9;
2727
- if ($[25] !== onClose || $[26] !== selectedEndpoint) {
2728
- t9 = selectedEndpoint && /* @__PURE__ */ jsx(SidePanel, {
1414
+ children: [/* @__PURE__ */ jsx(EndpointsSearch, {
1415
+ value: search,
1416
+ onChange: setSearch,
1417
+ onClear: () => setSearch("")
1418
+ }), /* @__PURE__ */ jsx("div", {
1419
+ className: "grid grid-cols-1 auto-rows-max overflow-auto min-w-0",
1420
+ children: filteredEndpoints.map(([flow, endpoints$1]) => {
1421
+ const isSelected = endpoints$1.some((endpoint) => endpoint.id === selectedEndpointId);
1422
+ return /* @__PURE__ */ jsx(FlowGroup, {
1423
+ flow,
1424
+ endpoints: endpoints$1,
1425
+ isOpen: !flowGroupStatus[flow] || isSelected || search !== "",
1426
+ isSelected,
1427
+ onToggle: toggleFlowGroupStatus,
1428
+ onClearSelection: () => setSelectedEndpointId(""),
1429
+ selectedEndpointId,
1430
+ onSelectEndpoint: setSelectedEndpointId
1431
+ }, flow);
1432
+ })
1433
+ })]
1434
+ }), selectedEndpoint && /* @__PURE__ */ jsx(SidePanel, {
2729
1435
  endpoint: selectedEndpoint,
2730
1436
  onClose
2731
- });
2732
- $[25] = onClose;
2733
- $[26] = selectedEndpoint;
2734
- $[27] = t9;
2735
- } else t9 = $[27];
2736
- let t10;
2737
- if ($[28] !== t4 || $[29] !== t8 || $[30] !== t9) {
2738
- t10 = /* @__PURE__ */ jsxs("div", {
2739
- className: t4,
2740
- "data-testid": "endpoints-list",
2741
- children: [t8, t9]
2742
- });
2743
- $[28] = t4;
2744
- $[29] = t8;
2745
- $[30] = t9;
2746
- $[31] = t10;
2747
- } else t10 = $[31];
2748
- return t10;
1437
+ })]
1438
+ });
2749
1439
  };
2750
1440
 
2751
1441
  //#endregion