@ms-cloudpack/overlay 0.12.0 → 0.12.2

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 (36) hide show
  1. package/dist/browser-esm/ori-output.json +2 -2
  2. package/dist/browser-esm/result.json +3 -1
  3. package/dist/overlay.d.ts +5 -0
  4. package/lib/components/Button/Button.js.map +1 -1
  5. package/lib/components/CloudpackProvider/CloudpackProvider.js.map +1 -1
  6. package/lib/components/CloudpackProvider/createCloudpackClient.d.ts +4 -0
  7. package/lib/components/CloudpackProvider/createCloudpackClient.js +4 -0
  8. package/lib/components/CloudpackProvider/createCloudpackClient.js.map +1 -1
  9. package/lib/components/CloudpackProvider/getCookies.js.map +1 -1
  10. package/lib/components/CloudpackProvider/useStatus.js.map +1 -1
  11. package/lib/components/CloudpackProvider/useStatusDetails.js.map +1 -1
  12. package/lib/components/Dialog/Dialog.js.map +1 -1
  13. package/lib/components/ErrorDialog/ErrorDialog.js.map +1 -1
  14. package/lib/components/ErrorDialog/PathError.js.map +1 -1
  15. package/lib/components/ErrorDialog/useErrorEvents.d.ts +3 -6
  16. package/lib/components/ErrorDialog/useErrorEvents.js +4 -4
  17. package/lib/components/ErrorDialog/useErrorEvents.js.map +1 -1
  18. package/lib/components/StatusBadge/StatusBadge.js.map +1 -1
  19. package/lib/components/StatusDialog/Searchbox.js.map +1 -1
  20. package/lib/components/StatusDialog/StatusDialog.js.map +1 -1
  21. package/lib/components/StatusDialog/TaskList.js.map +1 -1
  22. package/lib/components/StatusDialog/TaskResultItem.js.map +1 -1
  23. package/lib/components/StatusDialog/TaskStatus.js.map +1 -1
  24. package/lib/components/StatusOverlay/StatusOverlay.js +2 -0
  25. package/lib/components/StatusOverlay/StatusOverlay.js.map +1 -1
  26. package/lib/components/ThemeProvider/ThemeProvider.js.map +1 -1
  27. package/lib/hooks/preferDarkTheme.js.map +1 -1
  28. package/lib/hooks/useDraggable.js.map +1 -1
  29. package/lib/hooks/usePageLoadTimeReporter.d.ts +8 -0
  30. package/lib/hooks/usePageLoadTimeReporter.js +14 -0
  31. package/lib/hooks/usePageLoadTimeReporter.js.map +1 -0
  32. package/lib/index.d.ts +4 -1
  33. package/lib/index.js +5 -0
  34. package/lib/index.js.map +1 -1
  35. package/package.json +1 -1
  36. package/dist/browser-esm/lib/index.js +0 -1253
@@ -1,1253 +0,0 @@
1
- // src/index.tsx
2
- import React14 from "react";
3
- import ReactDOM from "react-dom";
4
-
5
- // src/components/CloudpackProvider/CloudpackProvider.tsx
6
- import React, { createContext, useState, useContext } from "react";
7
-
8
- // src/components/CloudpackProvider/getCookies.ts
9
- function getCookies() {
10
- return document.cookie.split(";").map((s9) => s9.split("=")).reduce((current, nextValue) => {
11
- const name2 = nextValue[0]?.trim();
12
- const value3 = decodeURIComponent(nextValue[1]?.trim());
13
- if (name2 && value3) {
14
- current[name2] = value3;
15
- }
16
- return current;
17
- }, {});
18
- }
19
-
20
- // src/components/CloudpackProvider/createCloudpackClient.ts
21
- import { createDataBus } from "@ms-cloudpack/data-bus";
22
- function createCloudpackClient() {
23
- const cookies = getCookies();
24
- const bus = createDataBus();
25
- let subCounter = 0;
26
- const subIds = {};
27
- bus.addProvider({
28
- path: [],
29
- onActivate: ({ path }) => {
30
- const id = subCounter++;
31
- subIds[path.join("/")] = id;
32
- sendMessage({ type: "subscribe", data: { path, id } });
33
- },
34
- onDeactivate: ({ path }) => {
35
- const pathString = path.join("/");
36
- const id = subIds[pathString];
37
- delete subIds[pathString];
38
- sendMessage({ type: "unsubscribe", data: { path, id } });
39
- }
40
- });
41
- const enqueuedMessages = [];
42
- const sessionId = cookies["cloudpack-session-id"];
43
- const apiUrl = cookies["cloudpack-api-url"];
44
- const currentSequence = cookies["cloudpack-session-sequence"];
45
- let socket;
46
- let idCount = 0;
47
- function openConnection() {
48
- if (apiUrl && sessionId) {
49
- const newSocket = new WebSocket(apiUrl);
50
- newSocket.onopen = () => {
51
- console.log("socket opened");
52
- socket = newSocket;
53
- socket.onmessage = onMessageReceived;
54
- socket.onclose = () => {
55
- socket = void 0;
56
- };
57
- for (const message of enqueuedMessages) {
58
- socket.send(message);
59
- }
60
- enqueuedMessages.length = 0;
61
- };
62
- }
63
- }
64
- function dispose() {
65
- if (socket) {
66
- socket.close();
67
- socket = void 0;
68
- }
69
- }
70
- function sendMessage({ type, requestId, data }) {
71
- const message = JSON.stringify({ type, requestId, data });
72
- if (socket) {
73
- socket.send(message);
74
- } else {
75
- enqueuedMessages.push(message);
76
- }
77
- }
78
- const activeRequests = {};
79
- function sendRequest({ type, data }) {
80
- const requestId = `${idCount++}`;
81
- return new Promise((resolve, reject) => {
82
- const timeoutId = setTimeout(() => {
83
- if (activeRequests[requestId]) {
84
- reject(new Error("Request timed out."));
85
- }
86
- }, 1e4);
87
- activeRequests[requestId] = {
88
- resolve: (data2) => {
89
- delete activeRequests[requestId];
90
- clearTimeout(timeoutId);
91
- resolve(data2);
92
- },
93
- reject: (error3) => {
94
- delete activeRequests[requestId];
95
- clearTimeout(timeoutId);
96
- reject(error3);
97
- }
98
- };
99
- sendMessage({ type, requestId, data });
100
- });
101
- }
102
- function onMessageReceived(message) {
103
- const response = JSON.parse(message.data);
104
- const requestId = response.requestId;
105
- if (requestId !== void 0) {
106
- activeRequests[requestId].resolve(response.data);
107
- return;
108
- }
109
- switch (response.type) {
110
- case "notify": {
111
- const { path, data } = response;
112
- bus.publish(path, data);
113
- break;
114
- }
115
- case "reload": {
116
- window.location.reload();
117
- break;
118
- }
119
- case "sequence": {
120
- const { sequence } = response;
121
- if (Number(sequence) > Number(currentSequence)) {
122
- window.location.reload();
123
- }
124
- break;
125
- }
126
- }
127
- }
128
- function subscribe(path, callback) {
129
- const sessionPath = [sessionId, ...path];
130
- return bus.subscribe(sessionPath, callback);
131
- }
132
- function getValue(path) {
133
- const sessionPath = [sessionId, ...path];
134
- return bus.getData(sessionPath);
135
- }
136
- function openSource(options) {
137
- sendMessage({ type: "openSource", data: options });
138
- }
139
- function open(options) {
140
- sendMessage({ type: "open", data: options });
141
- }
142
- function editConfig() {
143
- sendMessage({ type: "editConfig", data: {} });
144
- }
145
- function addOverride(options) {
146
- sendMessage({ type: "addOverride", data: options });
147
- }
148
- function validateOverride(options) {
149
- return sendRequest({ type: "validateOverride", data: options });
150
- }
151
- function restartAllTasks() {
152
- sendMessage({ type: "restartAllTasks", data: {} });
153
- }
154
- function restartTask(options) {
155
- sendMessage({ type: "restartTask", data: options });
156
- }
157
- openConnection();
158
- return {
159
- dispose,
160
- getValue,
161
- open,
162
- openSource,
163
- subscribe,
164
- editConfig,
165
- addOverride,
166
- restartTask,
167
- restartAllTasks,
168
- validateOverride
169
- };
170
- }
171
-
172
- // src/components/CloudpackProvider/CloudpackProvider.tsx
173
- var CloudpackContext = createContext(null);
174
- function CloudpackProvider({ children }) {
175
- const [client] = useState(createCloudpackClient);
176
- return /* @__PURE__ */ React.createElement(CloudpackContext.Provider, { value: client }, children);
177
- }
178
- var useCloudpack = () => useContext(CloudpackContext);
179
-
180
- // src/components/StatusOverlay/StatusOverlay.tsx
181
- import React12, { useCallback as useCallback2, useState as useState6, useRef as useRef3 } from "react";
182
-
183
- // src/components/StatusBadge/StatusBadge.tsx
184
- import React2, { useRef } from "react";
185
-
186
- // src/hooks/useDraggable.ts
187
- import { useEffect, useState as useState2 } from "react";
188
- function useDraggable(options) {
189
- const { enabled, containerElementRef, dragElementRef } = options;
190
- const [isDragging, setIsDragging] = useState2(false);
191
- useEffect(() => {
192
- const moveTarget = containerElementRef?.current;
193
- const dragTarget = dragElementRef?.current;
194
- if (!enabled || !moveTarget || !dragTarget) {
195
- return;
196
- }
197
- let originalX = 0;
198
- let originalY = 0;
199
- let offset = { x: 0, y: 0 };
200
- const onPointerMove = (event) => {
201
- moveTarget.style.transform = `translate(${offset.x + event.clientX - originalX}px, ${offset.y + event.clientY - originalY}px)`;
202
- };
203
- const onPointerUp = (event) => {
204
- setIsDragging(false);
205
- offset = {
206
- x: offset.x + event.clientX - originalX,
207
- y: offset.y + event.clientY - originalY
208
- };
209
- dragTarget.releasePointerCapture(event.pointerId);
210
- dragTarget.removeEventListener("pointerup", onPointerUp);
211
- dragTarget.removeEventListener("pointermove", onPointerMove);
212
- event.preventDefault();
213
- };
214
- const onPointerDown = (event) => {
215
- setIsDragging(true);
216
- originalX = event.clientX;
217
- originalY = event.clientY;
218
- dragTarget.setPointerCapture(event.pointerId);
219
- dragTarget.addEventListener("pointerup", onPointerUp);
220
- dragTarget.addEventListener("pointermove", onPointerMove);
221
- event.preventDefault();
222
- };
223
- dragTarget.addEventListener("pointerdown", onPointerDown);
224
- return () => {
225
- dragTarget.removeEventListener("pointerdown", onPointerDown);
226
- dragTarget.removeEventListener("pointermove", onPointerMove);
227
- dragTarget.removeEventListener("pointerup", onPointerUp);
228
- };
229
- }, [enabled, containerElementRef, dragElementRef]);
230
- return {
231
- isDragging
232
- };
233
- }
234
-
235
- // src/components/StatusBadge/StatusBadge.module.css
236
- var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
237
- position: fixed;
238
- pointer-events: none;
239
- background: transparent;
240
- top: 0;
241
- bottom: 0;
242
- left: 0;
243
- right: 0;
244
- z-index: 99999;
245
- overflow: hidden;
246
- }
247
-
248
- .mOWPxtXY-StatusBadgemodulecssgripArea {
249
- display: flex;
250
- flex-direction: row;
251
- gap: 2px;
252
- height: 100%;
253
- width: 12px;
254
- cursor: move;
255
- margin-right: -4px;
256
- }
257
-
258
- .mOWPxtXY-StatusBadgemodulecssgrip {
259
- width: 2px;
260
- height: 100%;
261
- background: rgba(0, 0, 0, 0.2);
262
- }
263
-
264
- .mOWPxtXY-StatusBadgemodulecsscontentSurface {
265
- pointer-events: auto;
266
- display: contents;
267
- }
268
-
269
- .mOWPxtXY-StatusBadgemodulecssbadge {
270
- position: absolute;
271
- bottom: 4px;
272
- right: 4px;
273
- font-size: 12px;
274
- display: inline-flex;
275
- gap: 8px;
276
- background: #dddddd;
277
- box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.75);
278
- border: 1px solid #999999;
279
- border-radius: 4px;
280
- height: 28px;
281
- flex-shrink: 0;
282
- justify-content: center;
283
- align-items: center;
284
- box-sizing: border-box;
285
- padding: 3px;
286
- padding-right: 8px;
287
-
288
- transition: background-color 0.2s ease-in-out;
289
- }
290
-
291
- .mOWPxtXY-StatusBadgemodulecssinline {
292
- flex-shrink: 0;
293
- position: relative;
294
- bottom: auto;
295
- right: auto;
296
- top: auto;
297
- left: auto;
298
- box-shadow: none;
299
- padding-left: 8px;
300
- }
301
-
302
- .mOWPxtXY-StatusBadgemodulecssbuilding {
303
- background: #bbb;
304
- color: #000;
305
- }
306
-
307
- .mOWPxtXY-StatusBadgemodulecsssuccess {
308
- background: #7ad17a;
309
- color: #000;
310
- }
311
-
312
- .mOWPxtXY-StatusBadgemodulecsswarning {
313
- background: #e4e68b;
314
- color: #000;
315
- }
316
-
317
- .mOWPxtXY-StatusBadgemodulecsserror {
318
- background: #ffb9b9;
319
- color: #000;
320
- }
321
-
322
- .mOWPxtXY-StatusBadgemodulecssbutton {
323
- cursor: pointer;
324
- background: inherit;
325
- border: none;
326
- border-radius: 3px;
327
- display: flex;
328
- align-self: stretch;
329
- align-items: center;
330
- justify-content: center;
331
- box-sizing: border-box;
332
- padding: 0;
333
- margin: 0;
334
- font-weight: inherit;
335
- font-size: inherit;
336
- font-family: inherit;
337
- }
338
-
339
- .mOWPxtXY-StatusBadgemodulecssbutton:hover {
340
- filter: invert(0.1);
341
- }
342
-
343
- .mOWPxtXY-StatusBadgemodulecssvalue {
344
- font-weight: 600;
345
- background: rgba(255, 255, 255, 0.4);
346
- box-shadow: 2px 2px 3px -1px rgba(0, 0, 0, 0.15) inset;
347
- padding: 2px 8px;
348
- border-radius: 3px;
349
- }
350
- `;
351
- var s = document.createElement("style");
352
- s.setAttribute("data-sourceFile", "src/components/StatusBadge/StatusBadge.module.css");
353
- s.appendChild(document.createTextNode(compiledModule));
354
- document.head.appendChild(s);
355
- var badge = "mOWPxtXY-StatusBadgemodulecssbadge";
356
- var building = "mOWPxtXY-StatusBadgemodulecssbuilding";
357
- var button = "mOWPxtXY-StatusBadgemodulecssbutton";
358
- var contentSurface = "mOWPxtXY-StatusBadgemodulecsscontentSurface";
359
- var error = "mOWPxtXY-StatusBadgemodulecsserror";
360
- var fixedOverlay = "mOWPxtXY-StatusBadgemodulecssfixedOverlay";
361
- var grip = "mOWPxtXY-StatusBadgemodulecssgrip";
362
- var gripArea = "mOWPxtXY-StatusBadgemodulecssgripArea";
363
- var inline = "mOWPxtXY-StatusBadgemodulecssinline";
364
- var success = "mOWPxtXY-StatusBadgemodulecsssuccess";
365
- var value = "mOWPxtXY-StatusBadgemodulecssvalue";
366
- var warning = "mOWPxtXY-StatusBadgemodulecsswarning";
367
- var StatusBadge_module_default = { badge, building, button, contentSurface, error, fixedOverlay, grip, gripArea, inline, success, value, warning };
368
-
369
- // src/components/StatusBadge/StatusBadge.tsx
370
- import { default as cx } from "classnames";
371
-
372
- // src/components/CloudpackProvider/useStatus.ts
373
- import { useEffect as useEffect2, useState as useState3 } from "react";
374
- var defaultStatus = {
375
- status: "unknown",
376
- remainingTasks: 0,
377
- totalTasks: 0,
378
- totalErrors: 0,
379
- totalWarnings: 0
380
- };
381
- var useStatus = () => {
382
- const service = useCloudpack();
383
- const [status, setStatus] = useState3(
384
- () => service?.getValue(["status"]) || defaultStatus
385
- );
386
- useEffect2(() => service?.subscribe(["status"], setStatus), [service]);
387
- return status;
388
- };
389
-
390
- // src/components/StatusBadge/StatusBadge.tsx
391
- function StatusBadge({ inline: inline2, onExpand }) {
392
- const rootElementRef = useRef(null);
393
- const dragElementRef = useRef(null);
394
- const status = useStatus();
395
- const shouldRender = status.status !== "unknown";
396
- useDraggable({
397
- enabled: shouldRender && !inline2,
398
- containerElementRef: rootElementRef,
399
- dragElementRef
400
- });
401
- if (!shouldRender) {
402
- return null;
403
- }
404
- const badge2 = /* @__PURE__ */ React2.createElement("div", { ref: rootElementRef, className: getStatusClassName(status, !!inline2) }, !inline2 && /* @__PURE__ */ React2.createElement("div", { ref: dragElementRef, className: StatusBadge_module_default.gripArea }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.grip }), /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.grip })), /* @__PURE__ */ React2.createElement("button", { className: StatusBadge_module_default.button, onClick: onExpand, "aria-label": "Expand overlay" }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.value }, getStatusString(status))), /* @__PURE__ */ React2.createElement("div", null, getStatsString(status)));
405
- return inline2 ? badge2 : /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.fixedOverlay }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.contentSurface }, badge2));
406
- }
407
- function getStatusString(status) {
408
- if (status.status === "pending") {
409
- return "Running";
410
- }
411
- if (status.totalTasks === 0) {
412
- return "Idle";
413
- }
414
- return status.totalErrors === 0 ? "Success" : "Errors";
415
- }
416
- function getStatusClassName({ status, totalTasks, totalErrors, totalWarnings }, inline2) {
417
- return cx(StatusBadge_module_default.badge, {
418
- [StatusBadge_module_default.inline]: inline2,
419
- [StatusBadge_module_default.building]: status === "pending",
420
- [StatusBadge_module_default.success]: status === "idle" && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0,
421
- [StatusBadge_module_default.error]: status === "idle" && totalErrors > 0,
422
- [StatusBadge_module_default.warning]: status === "idle" && totalErrors === 0 && totalWarnings > 0
423
- });
424
- }
425
- function getStatsString({ totalTasks, remainingTasks, totalErrors, totalWarnings }) {
426
- if (totalTasks === 0) {
427
- return "";
428
- }
429
- return [
430
- remainingTasks > 0 && `${remainingTasks} of ${totalTasks} tasks pending`,
431
- remainingTasks === 0 && `${totalTasks} tasks completed`,
432
- totalErrors === 1 && `${totalErrors} error`,
433
- totalErrors > 1 && `${totalErrors} errors`,
434
- totalWarnings === 1 && `${totalWarnings} warning`,
435
- totalWarnings > 1 && `${totalWarnings} warnings`
436
- ].filter(Boolean).join(", ");
437
- }
438
-
439
- // src/components/StatusDialog/StatusDialog.tsx
440
- import React9, { useCallback } from "react";
441
-
442
- // src/components/StatusDialog/TaskList.tsx
443
- import React6 from "react";
444
-
445
- // src/components/StatusDialog/TaskStatus.tsx
446
- import React5 from "react";
447
-
448
- // src/components/StatusDialog/TaskResultItem.tsx
449
- import React3 from "react";
450
-
451
- // src/components/StatusDialog/TaskResultItem.module.css
452
- var compiledModule2 = `.mGnoEIJOyo-TaskResultItemmodulecssroot {
453
- display: flex;
454
- background: #f5f5f5;
455
- }
456
-
457
- .mGnoEIJOyo-TaskResultItemmodulecssstatusBar {
458
- flex-shrink: 0;
459
- border-radius: 4px;
460
- width: 4px;
461
- background: #aa0000;
462
- box-shadow: 2px 0 4px 0 rgb(220 0 0 / 20%);
463
- }
464
-
465
- .mGnoEIJOyo-TaskResultItemmodulecsscontent {
466
- padding: 8px;
467
- display: flex;
468
- flex-grow: 1;
469
- overflow: hidden;
470
- flex-direction: column;
471
- }
472
-
473
- .mGnoEIJOyo-TaskResultItemmodulecsstitleArea {
474
- display: flex;
475
- align-items: center;
476
- flex-direction: row;
477
- gap: 4px;
478
- padding: 4px 0;
479
- }
480
-
481
- .mGnoEIJOyo-TaskResultItemmodulecssfile {
482
- display: inline-flex;
483
- margin: 0;
484
- padding: 0;
485
- border: none;
486
- background: inherit;
487
- font-family: inherit;
488
- flex-grow: 1;
489
- font-weight: 500;
490
- font-size: 14px;
491
- flex-shrink: 0;
492
- text-decoration: none;
493
- color: #000;
494
- cursor: pointer;
495
- }
496
-
497
- .mGnoEIJOyo-TaskResultItemmodulecssfile:hover {
498
- text-decoration: underline;
499
- }
500
-
501
- .mGnoEIJOyo-TaskResultItemmodulecssactionArea {
502
- display: flex;
503
- flex-direction: row;
504
- gap: 8px;
505
- flex-shrink: 0;
506
- }
507
-
508
- .mGnoEIJOyo-TaskResultItemmodulecsstext {
509
- word-wrap: break-word;
510
- color: #333;
511
- }
512
- `;
513
- var s2 = document.createElement("style");
514
- s2.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskResultItem.module.css");
515
- s2.appendChild(document.createTextNode(compiledModule2));
516
- document.head.appendChild(s2);
517
- var actionArea = "mGnoEIJOyo-TaskResultItemmodulecssactionArea";
518
- var content = "mGnoEIJOyo-TaskResultItemmodulecsscontent";
519
- var file = "mGnoEIJOyo-TaskResultItemmodulecssfile";
520
- var root = "mGnoEIJOyo-TaskResultItemmodulecssroot";
521
- var statusBar = "mGnoEIJOyo-TaskResultItemmodulecssstatusBar";
522
- var text = "mGnoEIJOyo-TaskResultItemmodulecsstext";
523
- var titleArea = "mGnoEIJOyo-TaskResultItemmodulecsstitleArea";
524
- var TaskResultItem_module_default = { actionArea, content, file, root, statusBar, text, titleArea };
525
-
526
- // src/components/StatusDialog/TaskResultItem.tsx
527
- function TaskResultItem({ item, projectPath, index }) {
528
- const service = useCloudpack();
529
- const openSource = (ev) => {
530
- if (item.location) {
531
- service.openSource({
532
- rootPath: projectPath,
533
- relativePath: item.location?.file,
534
- line: item.location?.line,
535
- column: item.location?.column
536
- });
537
- ev.preventDefault();
538
- }
539
- };
540
- const filename = item.location?.file || "(path unavailable)";
541
- const location = ["", item.location?.line, item.location?.column].filter(Boolean).join(":");
542
- return /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_module_default.root }, /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_module_default.statusBar }), /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_module_default.content }, /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_module_default.titleArea }, /* @__PURE__ */ React3.createElement("button", { onClick: openSource, className: TaskResultItem_module_default.file }, index, ". ", filename, location && ` (${location})`, ":")), /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_module_default.text }, item.text), /* @__PURE__ */ React3.createElement("pre", { className: TaskResultItem_module_default.text }, JSON.stringify(item, null, 2))));
543
- }
544
-
545
- // src/components/StatusDialog/TaskStatus.module.css
546
- var compiledModule3 = `.vweafQQjU-TaskStatusmodulecssroot {
547
- border: 1px solid #ccc;
548
- border-radius: 3px;
549
- box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.25);
550
- }
551
-
552
- .vweafQQjU-TaskStatusmodulecssheader {
553
- display: flex;
554
- gap: 8px;
555
- padding: 8px 16px;
556
- background: #f0f0f0;
557
- align-items: center;
558
- line-height: 1;
559
- }
560
-
561
- .vweafQQjU-TaskStatusmodulecsscommands {
562
- display: flex;
563
- flex-direction: row;
564
- gap: 8px;
565
- align-items: center;
566
- flex-shrink: 0;
567
- height: 40px;
568
- padding: 0 16px;
569
- }
570
-
571
- .vweafQQjU-TaskStatusmodulecssexpandButton {
572
- background: transparent;
573
- border: none;
574
- border-radius: 4px;
575
- width: 32px;
576
- height: 32px;
577
- }
578
- .vweafQQjU-TaskStatusmodulecssexpandButton:hover {
579
- background: rgba(0, 0, 0, 0.1);
580
- }
581
-
582
- .vweafQQjU-TaskStatusmodulecssexpandButton:active {
583
- background: rgba(0, 0, 0, 0.2);
584
- }
585
-
586
- .vweafQQjU-TaskStatusmodulecssexpandIcon {
587
- transition: transform 0.1s ease-in-out;
588
- }
589
-
590
- .vweafQQjU-TaskStatusmodulecsscollapsed {
591
- transform: rotate(-90deg);
592
- }
593
-
594
- .vweafQQjU-TaskStatusmodulecssfarArea {
595
- line-height: 1;
596
- font-size: 13px;
597
- text-align: end;
598
- display: flex;
599
- align-items: baseline;
600
- flex-direction: row;
601
- gap: 8px;
602
- display: flex;
603
- flex-grow: 1;
604
- justify-content: end;
605
- flex-direction: row;
606
- }
607
-
608
- .vweafQQjU-TaskStatusmodulecsstitle {
609
- font-size: 16px;
610
- font-weight: 500;
611
- color: #333;
612
- }
613
-
614
- .vweafQQjU-TaskStatusmodulecsssubTitle {
615
- font-size: 13px;
616
- }
617
-
618
- .vweafQQjU-TaskStatusmodulecsscontent {
619
- border-top: 1px solid #ccc;
620
- background: #fafafa;
621
- padding: 8px 16px;
622
- display: flex;
623
- flex-direction: column;
624
- gap: 8px;
625
- }
626
-
627
- .vweafQQjU-TaskStatusmodulecssresultItems {
628
- display: flex;
629
- flex-direction: column;
630
- gap: 8px;
631
- }
632
-
633
- .vweafQQjU-TaskStatusmodulecsserror {
634
- background: #ffe9e9;
635
- }
636
-
637
- .vweafQQjU-TaskStatusmodulecsssuccess {
638
- background: #e9f9e9;
639
- }
640
-
641
- .vweafQQjU-TaskStatusmodulecsswarning {
642
- background: #fff9e9;
643
- }
644
-
645
- .vweafQQjU-TaskStatusmodulecssname {
646
- font-size: 12px;
647
- font-weight: 600;
648
- text-transform: uppercase;
649
- }
650
-
651
- .vweafQQjU-TaskStatusmodulecssvalue {
652
- display: flex;
653
- flex-direction: column;
654
- font-size: 14px;
655
- color: #333;
656
- }
657
-
658
- .vweafQQjU-TaskStatusmodulecsslinkButton {
659
- display: inline-flex;
660
- align-items: flex-start;
661
- text-align: start;
662
- margin: 0;
663
- padding: 0;
664
- border: none;
665
- background: inherit;
666
- font-family: inherit;
667
- flex-grow: 1;
668
-
669
- font-size: 14px;
670
- flex-shrink: 0;
671
- text-decoration: none;
672
- color: #000;
673
- cursor: pointer;
674
- }
675
-
676
- .vweafQQjU-TaskStatusmodulecsslinkButton:hover {
677
- text-decoration: underline;
678
- }
679
- `;
680
- var s3 = document.createElement("style");
681
- s3.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskStatus.module.css");
682
- s3.appendChild(document.createTextNode(compiledModule3));
683
- document.head.appendChild(s3);
684
- var collapsed = "vweafQQjU-TaskStatusmodulecsscollapsed";
685
- var commands = "vweafQQjU-TaskStatusmodulecsscommands";
686
- var content2 = "vweafQQjU-TaskStatusmodulecsscontent";
687
- var error2 = "vweafQQjU-TaskStatusmodulecsserror";
688
- var expandButton = "vweafQQjU-TaskStatusmodulecssexpandButton";
689
- var expandIcon = "vweafQQjU-TaskStatusmodulecssexpandIcon";
690
- var farArea = "vweafQQjU-TaskStatusmodulecssfarArea";
691
- var header = "vweafQQjU-TaskStatusmodulecssheader";
692
- var linkButton = "vweafQQjU-TaskStatusmodulecsslinkButton";
693
- var name = "vweafQQjU-TaskStatusmodulecssname";
694
- var resultItems = "vweafQQjU-TaskStatusmodulecssresultItems";
695
- var root2 = "vweafQQjU-TaskStatusmodulecssroot";
696
- var subTitle = "vweafQQjU-TaskStatusmodulecsssubTitle";
697
- var success2 = "vweafQQjU-TaskStatusmodulecsssuccess";
698
- var title = "vweafQQjU-TaskStatusmodulecsstitle";
699
- var value2 = "vweafQQjU-TaskStatusmodulecssvalue";
700
- var warning2 = "vweafQQjU-TaskStatusmodulecsswarning";
701
- var TaskStatus_module_default = { collapsed, commands, content: content2, error: error2, expandButton, expandIcon, farArea, header, linkButton, name, resultItems, root: root2, subTitle, success: success2, title, value: value2, warning: warning2 };
702
-
703
- // src/components/StatusDialog/TaskStatus.tsx
704
- import { default as cx2 } from "classnames";
705
-
706
- // src/images/error-24.inline.svg
707
- var error_24_inline_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM15.5303 8.46967L15.4462 8.39705C15.1852 8.2034 14.827 8.20101 14.5636 8.38988L14.4697 8.46967L12 10.939L9.53033 8.46967L9.44621 8.39705C9.18522 8.2034 8.82701 8.20101 8.56362 8.38988L8.46967 8.46967L8.39705 8.55379C8.2034 8.81478 8.20101 9.17299 8.38988 9.43638L8.46967 9.53033L10.939 12L8.46967 14.4697L8.39705 14.5538C8.2034 14.8148 8.20101 15.173 8.38988 15.4364L8.46967 15.5303L8.55379 15.6029C8.81478 15.7966 9.17299 15.799 9.43638 15.6101L9.53033 15.5303L12 13.061L14.4697 15.5303L14.5538 15.6029C14.8148 15.7966 15.173 15.799 15.4364 15.6101L15.5303 15.5303L15.6029 15.4462C15.7966 15.1852 15.799 14.827 15.6101 14.5636L15.5303 14.4697L13.061 12L15.5303 9.53033L15.6029 9.44621C15.7966 9.18522 15.799 8.82701 15.6101 8.56362L15.5303 8.46967L15.4462 8.39705L15.5303 8.46967Z" fill="%23aa0000"/>%0A</svg>%0A';
708
-
709
- // src/images/success-24.inline.svg
710
- var success_24_inline_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM15.2197 8.96967L10.75 13.4393L8.78033 11.4697C8.48744 11.1768 8.01256 11.1768 7.71967 11.4697C7.42678 11.7626 7.42678 12.2374 7.71967 12.5303L10.2197 15.0303C10.5126 15.3232 10.9874 15.3232 11.2803 15.0303L16.2803 10.0303C16.5732 9.73744 16.5732 9.26256 16.2803 8.96967C15.9874 8.67678 15.5126 8.67678 15.2197 8.96967Z" fill="%2300aa00"/>%0A</svg>%0A';
711
-
712
- // src/images/chevrondown-20.inline.svg
713
- var chevrondown_20_inline_default = 'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z" fill="%23212121"/>%0A</svg>%0A';
714
-
715
- // src/components/Button/Button.tsx
716
- import React4 from "react";
717
-
718
- // src/components/Button/Button.module.css
719
- var compiledModule4 = `.CCnBgacfaMc-ButtonmodulecssstandardButton {
720
- outline: transparent;
721
- position: relative;
722
- font-family: inherit;
723
- font-size: 14px;
724
- font-weight: 600;
725
- box-sizing: border-box;
726
- border: 1px solid rgb(138, 136, 134);
727
- display: inline-block;
728
- text-decoration: none;
729
- text-align: center;
730
- cursor: pointer;
731
- padding: 0px 16px;
732
- border-radius: 2px;
733
- min-width: 80px;
734
- height: 32px;
735
- background-color: rgb(255, 255, 255);
736
- color: rgb(50, 49, 48);
737
- user-select: none;
738
- }
739
-
740
- .CCnBgacfaMc-ButtonmodulecssstandardButton:active {
741
- background-color: rgb(237, 235, 233);
742
- color: rgb(32, 31, 30);
743
- }
744
-
745
- .CCnBgacfaMc-ButtonmodulecssstandardButton:hover {
746
- background-color: rgb(243, 242, 241);
747
- color: rgb(32, 31, 30);
748
- }
749
-
750
- .CCnBgacfaMc-ButtonmodulecssstandardButton:focus {
751
- border: 3px solid rgb(0, 0, 0);
752
- }
753
-
754
- .CCnBgacfaMc-ButtonmodulecssprimaryButton {
755
- outline: transparent;
756
- position: relative;
757
- font-family: inherit;
758
- font-size: 14px;
759
- font-weight: 600;
760
- box-sizing: border-box;
761
- border: 1px solid rgb(0, 120, 212);
762
- display: inline-block;
763
- text-decoration: none;
764
- text-align: center;
765
- cursor: pointer;
766
- padding: 0px 16px;
767
- border-radius: 2px;
768
- min-width: 80px;
769
- height: 32px;
770
- background-color: rgb(0, 120, 212);
771
- color: rgb(255, 255, 255);
772
- user-select: none;
773
- }
774
-
775
- .CCnBgacfaMc-ButtonmodulecssprimaryButton:active {
776
- background-color: rgb(0, 90, 158);
777
- border: 1px solid rgb(0, 90, 158);
778
- color: rgb(255, 255, 255);
779
- }
780
-
781
- .CCnBgacfaMc-ButtonmodulecssprimaryButton:hover {
782
- background-color: rgb(16, 110, 190);
783
- border: 1px solid rgb(16, 110, 190);
784
- color: rgb(255, 255, 255);
785
- }
786
-
787
- .CCnBgacfaMc-ButtonmodulecssprimaryButton:focus {
788
- border: 3px solid rgb(0, 0, 0);
789
- }
790
- `;
791
- var s4 = document.createElement("style");
792
- s4.setAttribute("data-sourceFile", "src/components/Button/Button.module.css");
793
- s4.appendChild(document.createTextNode(compiledModule4));
794
- document.head.appendChild(s4);
795
- var primaryButton = "CCnBgacfaMc-ButtonmodulecssprimaryButton";
796
- var standardButton = "CCnBgacfaMc-ButtonmodulecssstandardButton";
797
- var Button_module_default = { primaryButton, standardButton };
798
-
799
- // src/components/Button/Button.tsx
800
- function Button(props) {
801
- const { primary, ...other } = props;
802
- const className = primary ? Button_module_default.primaryButton : Button_module_default.standardButton;
803
- return /* @__PURE__ */ React4.createElement("button", { ...other, className, type: "button" });
804
- }
805
-
806
- // src/components/StatusDialog/TaskStatus.tsx
807
- function getCompletion(task) {
808
- if (task.status === "pending") {
809
- return "Running";
810
- }
811
- return [
812
- `Completed in ${task.durationMilliseconds}ms`,
813
- task.errors?.length && `${task.errors.length} error${task.errors.length > 1 ? "s" : ""}`,
814
- task.warnings?.length && `${task.warnings.length} warning${task.warnings.length > 1 ? "s" : ""}`
815
- ].filter(Boolean).join(", ");
816
- }
817
- function TaskStatus({ task }) {
818
- const [isOpen, setIsOpen] = React5.useState(void 0);
819
- const { name: name2, warnings, errors } = task;
820
- const cloudpack = useCloudpack();
821
- const showContent = isOpen === true || isOpen === void 0 && task.errors?.length > 0;
822
- const open = (rootPath) => {
823
- cloudpack.open({
824
- rootPath
825
- });
826
- };
827
- const openPackage = () => {
828
- cloudpack.openSource({
829
- rootPath: task.inputPath,
830
- relativePath: "package.json",
831
- line: 0,
832
- column: 0
833
- });
834
- };
835
- const restartTask = () => {
836
- cloudpack.restartTask({ id: task.id, inputPath: task.inputPath });
837
- };
838
- return /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.root }, /* @__PURE__ */ React5.createElement("div", { className: getHeaderClassName(task) }, /* @__PURE__ */ React5.createElement(
839
- "button",
840
- {
841
- className: TaskStatus_module_default.expandButton,
842
- onClick: () => setIsOpen(!showContent),
843
- "aria-label": showContent ? `Minimize ${name2}` : `Expand ${name2}`
844
- },
845
- /* @__PURE__ */ React5.createElement(
846
- "img",
847
- {
848
- className: cx2(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
849
- src: chevrondown_20_inline_default,
850
- alt: "Chevron down icon"
851
- }
852
- )
853
- ), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: success_24_inline_default, alt: "Success icon" }), errors?.length > 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, name2), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.farArea }, getCompletion(task))), showContent && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.commands }, /* @__PURE__ */ React5.createElement(Button, { onClick: restartTask }, "Restart task")), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.content }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Details"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Input path"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.value }, /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(task.inputPath) }, task.inputPath), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: openPackage }, "(Package.json)"))), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Output path"), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(task.outputPath) }, task.outputPath)), errors?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Errors"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, errors.map((error3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: error3, projectPath: task.inputPath, index: index + 1 })))), warnings?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Warnings"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, warnings.map((warning3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: warning3, projectPath: task.inputPath, index: index + 1 })))))));
854
- }
855
- function getHeaderClassName(task) {
856
- return cx2(TaskStatus_module_default.header, {
857
- [TaskStatus_module_default.success]: task.errors?.length === 0 && task.warnings?.length === 0,
858
- [TaskStatus_module_default.warning]: task.errors?.length === 0 && task.warnings?.length > 0,
859
- [TaskStatus_module_default.error]: task.errors?.length > 0
860
- });
861
- }
862
-
863
- // src/components/CloudpackProvider/useStatusDetails.ts
864
- import { useEffect as useEffect3, useState as useState4 } from "react";
865
- var useStatusDetails = () => {
866
- const service = useCloudpack();
867
- const [details, setDetails] = useState4({ tasks: [] });
868
- useEffect3(() => service?.subscribe(["status-details"], setDetails), [service]);
869
- return details;
870
- };
871
-
872
- // src/components/StatusDialog/TaskList.module.css
873
- var compiledModule5 = `.lTlVbGXBQHs-TaskListmodulecssroot {
874
- flex-grow: 1;
875
- overflow: auto;
876
- border-top: 1px solid #ccc;
877
- box-sizing: border-box;
878
- padding: 20px;
879
- display: flex;
880
- flex-direction: column;
881
- gap: 8px;
882
- }
883
- `;
884
- var s5 = document.createElement("style");
885
- s5.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskList.module.css");
886
- s5.appendChild(document.createTextNode(compiledModule5));
887
- document.head.appendChild(s5);
888
- var root3 = "lTlVbGXBQHs-TaskListmodulecssroot";
889
- var TaskList_module_default = { root: root3 };
890
-
891
- // src/components/StatusDialog/TaskList.tsx
892
- function TaskList({ searchFilter }) {
893
- const details = useStatusDetails();
894
- const tasks = (details.tasks || []).sort(sortTasks);
895
- searchFilter = searchFilter?.toLowerCase();
896
- return /* @__PURE__ */ React6.createElement("div", { className: TaskList_module_default.root }, tasks.filter(({ name: name2 }) => !searchFilter || name2.toLowerCase().includes(searchFilter)).map((task) => /* @__PURE__ */ React6.createElement(TaskStatus, { key: task.name, task })));
897
- }
898
- function sortTasks(a, b) {
899
- const aStatus = a.status === "pending" ? 1 : 0;
900
- const bStatus = b.status === "pending" ? 1 : 0;
901
- if (aStatus !== bStatus) {
902
- return aStatus > bStatus ? -1 : 1;
903
- }
904
- const aErrors = a.errors?.length || 0;
905
- const bErrors = b.errors?.length || 0;
906
- if (aErrors !== bErrors) {
907
- return aErrors > bErrors ? -1 : 1;
908
- }
909
- return a.name < b.name ? -1 : 1;
910
- }
911
-
912
- // src/components/Dialog/Dialog.tsx
913
- import { default as React7, useRef as useRef2 } from "react";
914
-
915
- // src/components/Dialog/Dialog.module.css
916
- var compiledModule6 = `.ggUoTSSSfk-Dialogmodulecssoverlay {
917
- background: rgba(0, 0, 0, 0.1);
918
- border: 1px solid black;
919
- position: fixed;
920
- top: 0;
921
- left: 0;
922
- right: 0;
923
- bottom: 0;
924
- display: flex;
925
- align-items: center;
926
- justify-content: center;
927
- z-index: 999;
928
- }
929
-
930
- @keyframes fade-in {
931
- 0% {
932
- opacity: 0;
933
- }
934
- 100% {
935
- opacity: 1;
936
- }
937
- }
938
-
939
- .ggUoTSSSfk-Dialogmodulecsscommands {
940
- display: flex;
941
- flex-direction: row;
942
- gap: 8px;
943
- align-items: center;
944
- flex-shrink: 0;
945
- height: 40px;
946
- padding: 0 20px;
947
- }
948
-
949
- .ggUoTSSSfk-Dialogmodulecssdialog {
950
- animation: fade-in 0.1s ease-in-out;
951
- width: 80vw;
952
- align-self: stretch;
953
- margin: 20px 0;
954
- background: white;
955
- color: #000;
956
- box-sizing: border-box;
957
- display: flex;
958
- flex-direction: column;
959
- border-top: 4px solid rgb(0, 120, 212);
960
- border-radius: 3px;
961
- box-shadow: rgb(0 0 0 / 22%) 0px 25.6px 57.6px 0px, rgb(0 0 0 / 18%) 0px 4.8px 14.4px 0px;
962
- position: relative;
963
- outline: transparent solid 3px;
964
- }
965
-
966
- .ggUoTSSSfk-DialogmodulecsstitleArea {
967
- display: flex;
968
- flex-direction: row;
969
- align-items: center;
970
- padding: 8px 8px 8px 20px;
971
- gap: 8px;
972
- }
973
-
974
- .ggUoTSSSfk-DialogmodulecsscloseButton {
975
- display: flex;
976
- align-items: center;
977
- justify-content: center;
978
- width: 32px;
979
- height: 32px;
980
- margin: 0;
981
- padding: 0;
982
- background: transparent;
983
- border: none;
984
- border-radius: 4px;
985
- }
986
-
987
- .ggUoTSSSfk-DialogmodulecsscloseButton:hover {
988
- background: rgba(0, 0, 0, 0.1);
989
- }
990
-
991
- .ggUoTSSSfk-DialogmodulecsscloseButton:active {
992
- background: rgba(0, 0, 0, 0.2);
993
- }
994
-
995
- .ggUoTSSSfk-Dialogmodulecsstitle {
996
- flex-grow: 1;
997
- font-size: 20px;
998
- font-weight: 600;
999
- color: rgb(0, 120, 212);
1000
- }
1001
- `;
1002
- var s6 = document.createElement("style");
1003
- s6.setAttribute("data-sourceFile", "src/components/Dialog/Dialog.module.css");
1004
- s6.appendChild(document.createTextNode(compiledModule6));
1005
- document.head.appendChild(s6);
1006
- var closeButton = "ggUoTSSSfk-DialogmodulecsscloseButton";
1007
- var commands2 = "ggUoTSSSfk-Dialogmodulecsscommands";
1008
- var dialog = "ggUoTSSSfk-Dialogmodulecssdialog";
1009
- var overlay = "ggUoTSSSfk-Dialogmodulecssoverlay";
1010
- var title2 = "ggUoTSSSfk-Dialogmodulecsstitle";
1011
- var titleArea2 = "ggUoTSSSfk-DialogmodulecsstitleArea";
1012
- var Dialog_module_default = { closeButton, commands: commands2, dialog, overlay, title: title2, titleArea: titleArea2 };
1013
-
1014
- // src/images/dismiss-16-filled.inline.svg
1015
- var dismiss_16_filled_inline_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M2.39705 2.55379L2.46967 2.46967C2.73594 2.2034 3.1526 2.1792 3.44621 2.39705L3.53033 2.46967L8 6.939L12.4697 2.46967C12.7626 2.17678 13.2374 2.17678 13.5303 2.46967C13.8232 2.76256 13.8232 3.23744 13.5303 3.53033L9.061 8L13.5303 12.4697C13.7966 12.7359 13.8208 13.1526 13.6029 13.4462L13.5303 13.5303C13.2641 13.7966 12.8474 13.8208 12.5538 13.6029L12.4697 13.5303L8 9.061L3.53033 13.5303C3.23744 13.8232 2.76256 13.8232 2.46967 13.5303C2.17678 13.2374 2.17678 12.7626 2.46967 12.4697L6.939 8L2.46967 3.53033C2.2034 3.26406 2.1792 2.8474 2.39705 2.55379L2.46967 2.46967L2.39705 2.55379Z" fill="%23212121"/>%0A</svg>%0A';
1016
-
1017
- // src/components/Dialog/Dialog.tsx
1018
- function Dialog({ title: title3, style, draggable, onClose, commands: commands3, children }) {
1019
- const draggableRef = useRef2(null);
1020
- const draggableTargetRef = useRef2(null);
1021
- const colorAccent = style === "error" ? "rgb(164, 38, 44)" : void 0;
1022
- const cursorDraggable = draggable ? "move" : void 0;
1023
- useDraggable({
1024
- enabled: !!draggable,
1025
- containerElementRef: draggableRef,
1026
- dragElementRef: draggableTargetRef
1027
- });
1028
- return /* @__PURE__ */ React7.createElement("div", { className: Dialog_module_default.overlay }, /* @__PURE__ */ React7.createElement("div", { ref: draggableRef, className: Dialog_module_default.dialog, style: { borderTopColor: colorAccent } }, /* @__PURE__ */ React7.createElement("div", { className: Dialog_module_default.titleArea }, /* @__PURE__ */ React7.createElement(
1029
- "div",
1030
- {
1031
- ref: draggableTargetRef,
1032
- className: Dialog_module_default.title,
1033
- style: { color: colorAccent, cursor: cursorDraggable }
1034
- },
1035
- title3
1036
- ), onClose && /* @__PURE__ */ React7.createElement("button", { className: Dialog_module_default.closeButton, onClick: onClose, "aria-label": "Minimize overlay" }, /* @__PURE__ */ React7.createElement("img", { src: dismiss_16_filled_inline_default, alt: "" }))), commands3 && /* @__PURE__ */ React7.createElement("div", { className: Dialog_module_default.commands }, ...commands3), children));
1037
- }
1038
-
1039
- // src/components/StatusDialog/Searchbox.tsx
1040
- import React8 from "react";
1041
-
1042
- // src/components/StatusDialog/Searchbox.module.css
1043
- var compiledModule7 = `.QFosMXkA-Searchboxmodulecsssearchbox {
1044
- position: absolute;
1045
- font-size: 14px;
1046
- font-weight: 400;
1047
- box-shadow: none;
1048
- padding: 0px 4px;
1049
- box-sizing: border-box;
1050
- color: rgb(50, 49, 48);
1051
- background-color: rgb(255, 255, 255);
1052
- display: flex;
1053
- flex-flow: row nowrap;
1054
- align-items: stretch;
1055
- border-radius: 2px;
1056
- border: 1px solid rgb(96, 94, 92);
1057
- height: 32px;
1058
- min-width: 160px;
1059
- top: 52px;
1060
- right: 20px;
1061
- }
1062
- `;
1063
- var s7 = document.createElement("style");
1064
- s7.setAttribute("data-sourceFile", "src/components/StatusDialog/Searchbox.module.css");
1065
- s7.appendChild(document.createTextNode(compiledModule7));
1066
- document.head.appendChild(s7);
1067
- var searchbox = "QFosMXkA-Searchboxmodulecsssearchbox";
1068
- var Searchbox_module_default = { searchbox };
1069
-
1070
- // src/components/StatusDialog/Searchbox.tsx
1071
- function Searchbox({ value: value3, onChange }) {
1072
- return /* @__PURE__ */ React8.createElement(React8.Fragment, null, typeof value3 === "string" && /* @__PURE__ */ React8.createElement("input", { type: "text", placeholder: "Search", className: Searchbox_module_default.searchbox, onChange, value: value3 }));
1073
- }
1074
-
1075
- // src/components/StatusDialog/StatusDialog.tsx
1076
- function StatusDialog({ onClose }) {
1077
- const cloudpack = useCloudpack();
1078
- const [searchFilter, setSearchFilter] = React9.useState("");
1079
- const handleSearchChange = useCallback((event) => {
1080
- event.preventDefault();
1081
- setSearchFilter(event.target.value);
1082
- }, []);
1083
- const restartAllTasks = () => {
1084
- cloudpack.restartAllTasks();
1085
- };
1086
- return /* @__PURE__ */ React9.createElement(
1087
- Dialog,
1088
- {
1089
- title: "Task results",
1090
- draggable: true,
1091
- onClose,
1092
- commands: [
1093
- /* @__PURE__ */ React9.createElement(Button, { primary: true, onClick: restartAllTasks, key: "1" }, "Restart all tasks")
1094
- ]
1095
- },
1096
- /* @__PURE__ */ React9.createElement(Searchbox, { value: searchFilter, onChange: handleSearchChange }),
1097
- /* @__PURE__ */ React9.createElement(TaskList, { searchFilter })
1098
- );
1099
- }
1100
-
1101
- // src/components/ErrorDialog/ErrorDialog.tsx
1102
- import { default as React11 } from "react";
1103
-
1104
- // src/components/ErrorDialog/PathError.tsx
1105
- import React10 from "react";
1106
- import { default as cx3 } from "classnames";
1107
- function PathError(props) {
1108
- const [showContent, setshowContent] = React10.useState(false);
1109
- const { packageName, importPath, filename, fixable } = props;
1110
- const cloudpack = useCloudpack();
1111
- const editConfig = () => {
1112
- cloudpack.editConfig();
1113
- };
1114
- const addOverride = () => {
1115
- cloudpack.addOverride({ packageName, importPath, filename });
1116
- };
1117
- return /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.root }, /* @__PURE__ */ React10.createElement("div", { className: cx3(TaskStatus_module_default.header, TaskStatus_module_default.error) }, /* @__PURE__ */ React10.createElement(
1118
- "button",
1119
- {
1120
- className: TaskStatus_module_default.expandButton,
1121
- onClick: () => setshowContent(!showContent),
1122
- "aria-label": showContent ? `Minimize ${packageName}/${importPath}` : `Expand ${packageName}/${importPath}`
1123
- },
1124
- /* @__PURE__ */ React10.createElement(
1125
- "img",
1126
- {
1127
- className: cx3(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
1128
- src: chevrondown_20_inline_default,
1129
- alt: "Chevron down icon"
1130
- }
1131
- )
1132
- ), /* @__PURE__ */ React10.createElement("img", { className: TaskStatus_module_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.title }, `${packageName}/${importPath}`)), showContent && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.commands }, fixable && /* @__PURE__ */ React10.createElement(Button, { onClick: addOverride }, "Add override"), /* @__PURE__ */ React10.createElement(Button, { onClick: editConfig }, "Edit config file")), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.content }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.title }, "Details"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.name }, "Problem"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.value }, `A deep import package name: "${packageName}" was imported, but was unrecognized as an exported entry path: "${importPath}".`)), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.name }, "Solution"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.value }, fixable ? `Remove the path from the import in your source. (Import from "${packageName}" rather than "${packageName}/${importPath}")` : `Import not found on package. Make sure the import path is valid.`)))));
1133
- }
1134
-
1135
- // src/components/ErrorDialog/ErrorDialog.tsx
1136
- function ErrorDialog({ unsupported }) {
1137
- const cloudpack = useCloudpack();
1138
- const reload = () => {
1139
- cloudpack.restartAllTasks();
1140
- };
1141
- return /* @__PURE__ */ React11.createElement(
1142
- Dialog,
1143
- {
1144
- title: "Found unsupported paths in your project",
1145
- style: "error",
1146
- commands: [
1147
- /* @__PURE__ */ React11.createElement(Button, { primary: true, onClick: reload, key: "1" }, "Restart all tasks")
1148
- ]
1149
- },
1150
- /* @__PURE__ */ React11.createElement("div", { className: TaskList_module_default.root }, unsupported.map((data, index) => /* @__PURE__ */ React11.createElement(PathError, { ...data, key: index })))
1151
- );
1152
- }
1153
-
1154
- // src/components/ErrorDialog/useErrorEvents.ts
1155
- import { useEffect as useEffect4, useState as useState5 } from "react";
1156
- import { parseImportString } from "@ms-cloudpack/path-string-parsing";
1157
- var reasonIsRecord = (event) => {
1158
- return typeof event.reason === "object" && !Array.isArray(event.reason) && event.reason !== null;
1159
- };
1160
- var hasMessage = (event) => {
1161
- return reasonIsRecord(event) && typeof event.reason.message === "string";
1162
- };
1163
- var useErrorEvents = () => {
1164
- const [errorEvents, setErrorEvents] = useState5({ unsupported: [] });
1165
- const cloudpack = useCloudpack();
1166
- useEffect4(() => {
1167
- const handleUnsupportedError = (message, filename) => {
1168
- const errorRegex = /[Mm]odule specifier,? ['"](.*?)['"]/;
1169
- const match = message.match(errorRegex);
1170
- if (match) {
1171
- const importString = parseImportString(match[1]);
1172
- const { packageName = "" } = importString;
1173
- let { importPath = "" } = importString;
1174
- if (importPath.startsWith("/")) {
1175
- importPath = importPath.slice(1);
1176
- } else if (importPath.startsWith("./")) {
1177
- importPath = importPath.slice(2);
1178
- }
1179
- (async () => {
1180
- const { fixable } = await cloudpack.validateOverride({ packageName, importPath, filename });
1181
- setErrorEvents((prev) => ({
1182
- ...prev,
1183
- unsupported: [...prev.unsupported, { packageName, importPath, filename, fixable }]
1184
- }));
1185
- })().catch(() => {
1186
- });
1187
- }
1188
- };
1189
- window.uncaughtErrors.unregister();
1190
- window.addEventListener("error", (event) => {
1191
- handleUnsupportedError(event.message, event.filename);
1192
- });
1193
- for (const error3 of window.uncaughtErrors.errors) {
1194
- handleUnsupportedError(error3.message, error3.filename);
1195
- }
1196
- window.uncaughtRejections.unregister();
1197
- window.addEventListener("unhandledrejection", (event) => {
1198
- hasMessage(event) && handleUnsupportedError(event.reason.message);
1199
- });
1200
- for (const error3 of window.uncaughtRejections.errors) {
1201
- hasMessage(error3) && handleUnsupportedError(error3.reason.message);
1202
- }
1203
- }, [cloudpack]);
1204
- return errorEvents;
1205
- };
1206
-
1207
- // src/components/StatusOverlay/StatusOverlay.tsx
1208
- function StatusOverlay() {
1209
- const [isExpanded, setIsExpanded] = useState6(false);
1210
- const status = useStatus();
1211
- const prevStatus = useRef3();
1212
- const { unsupported } = useErrorEvents();
1213
- React12.useEffect(() => {
1214
- if (!isExpanded && prevStatus.current?.status !== "idle" && status.status === "idle" && (prevStatus.current?.totalErrors || 0) !== (status.totalErrors || 0)) {
1215
- setIsExpanded(true);
1216
- }
1217
- prevStatus.current = status;
1218
- }, [status, isExpanded]);
1219
- const toggleMinimized = useCallback2(() => {
1220
- console.log(`Toggling minimized state to ${!isExpanded}`);
1221
- setIsExpanded(!isExpanded);
1222
- }, [isExpanded]);
1223
- return unsupported.length ? /* @__PURE__ */ React12.createElement(ErrorDialog, { unsupported }) : isExpanded ? /* @__PURE__ */ React12.createElement(StatusDialog, { onClose: toggleMinimized }) : /* @__PURE__ */ React12.createElement(StatusBadge, { onExpand: toggleMinimized });
1224
- }
1225
-
1226
- // src/components/ThemeProvider/ThemeProvider.tsx
1227
- import React13 from "react";
1228
-
1229
- // src/components/ThemeProvider/ThemeProvider.module.css
1230
- var compiledModule8 = `.xwrpHYTQE-ThemeProvidermodulecssroot {
1231
- font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
1232
- 'Droid Sans', 'Helvetica Neue', sans-serif;
1233
- }
1234
- `;
1235
- var s8 = document.createElement("style");
1236
- s8.setAttribute("data-sourceFile", "src/components/ThemeProvider/ThemeProvider.module.css");
1237
- s8.appendChild(document.createTextNode(compiledModule8));
1238
- document.head.appendChild(s8);
1239
- var root4 = "xwrpHYTQE-ThemeProvidermodulecssroot";
1240
- var ThemeProvider_module_default = { root: root4 };
1241
-
1242
- // src/components/ThemeProvider/ThemeProvider.tsx
1243
- function ThemeProvider({ children }) {
1244
- return /* @__PURE__ */ React13.createElement("div", { className: ThemeProvider_module_default.root }, children);
1245
- }
1246
-
1247
- // src/index.tsx
1248
- var rootDiv = document.createElement("div");
1249
- ReactDOM.render(
1250
- /* @__PURE__ */ React14.createElement(ThemeProvider, null, /* @__PURE__ */ React14.createElement(CloudpackProvider, null, /* @__PURE__ */ React14.createElement(StatusOverlay, null))),
1251
- rootDiv
1252
- );
1253
- document.body.appendChild(rootDiv);