@ms-cloudpack/overlay 0.3.0 → 0.5.0

package/dist/lib/index.js

@@ -0,0 +1,1226 @@
+// src/index.tsx
+import React13 from "react";
+import ReactDOM from "react-dom";
+
+// src/components/CloudpackProvider/CloudpackProvider.tsx
+import React, { createContext, useState, useContext } from "react";
+
+// src/components/CloudpackProvider/getCookies.ts
+function getCookies() {
+  return document.cookie.split(";").map((s8) => s8.split("=")).reduce((current, nextValue) => {
+    const name2 = nextValue[0]?.trim();
+    const value3 = decodeURIComponent(nextValue[1]?.trim());
+    if (name2 && value3) {
+      current[name2] = value3;
+    }
+    return current;
+  }, {});
+}
+
+// src/components/CloudpackProvider/createCloudpackClient.ts
+import { createDataBus } from "@ms-cloudpack/data-bus";
+function createCloudpackClient() {
+  const cookies = getCookies();
+  const bus = createDataBus();
+  let subCounter = 0;
+  const subIds = {};
+  bus.addProvider({
+    path: [],
+    onActivate: ({ path }) => {
+      const id = subCounter++;
+      subIds[path.join("/")] = id;
+      sendMessage("subscribe", { path, id });
+    },
+    onDeactivate: ({ path }) => {
+      const pathString = path.join("/");
+      const id = subIds[pathString];
+      delete subIds[pathString];
+      sendMessage("unsubscribe", { path, id });
+    }
+  });
+  const enqueuedMessages = [];
+  const sessionId = cookies["cloudpack-session-id"];
+  const apiUrl = cookies["cloudpack-api-url"];
+  let socket;
+  function openConnection() {
+    if (apiUrl && sessionId) {
+      const newSocket = new WebSocket(apiUrl);
+      newSocket.onopen = () => {
+        console.log("socket opened");
+        socket = newSocket;
+        socket.onmessage = onMessageReceived;
+        socket.onclose = () => {
+          socket = void 0;
+        };
+        for (const message of enqueuedMessages) {
+          socket.send(message);
+        }
+        enqueuedMessages.length = 0;
+      };
+    }
+  }
+  function dispose() {
+    if (socket) {
+      socket.close();
+      socket = void 0;
+    }
+  }
+  function sendMessage(type, data) {
+    const message = JSON.stringify({ type, data });
+    if (socket) {
+      console.log(`Sent message: ${type}`, data);
+      socket.send(message);
+    } else {
+      enqueuedMessages.push(message);
+    }
+  }
+  function onMessageReceived(message) {
+    const response = JSON.parse(message.data);
+    console.log("Received message:", response);
+    switch (response.type) {
+      case "notify": {
+        const { path, data } = response;
+        bus.publish(path, data);
+        break;
+      }
+      case "reload": {
+        window.location.reload();
+        break;
+      }
+    }
+  }
+  function subscribe(path, callback) {
+    const sessionPath = [sessionId, ...path];
+    return bus.subscribe(sessionPath, callback);
+  }
+  function getValue(path) {
+    const sessionPath = [sessionId, ...path];
+    return bus.getData(sessionPath);
+  }
+  function openSource(options) {
+    sendMessage("openSource", options);
+  }
+  function open(options) {
+    sendMessage("open", options);
+  }
+  function restartTasks() {
+    sendMessage("restartTasks", {});
+  }
+  openConnection();
+  return {
+    dispose,
+    getValue,
+    open,
+    openSource,
+    subscribe,
+    restartTasks
+  };
+}
+
+// src/components/CloudpackProvider/CloudpackProvider.tsx
+var CloudpackContext = createContext(null);
+function CloudpackProvider({ children }) {
+  const [client] = useState(createCloudpackClient);
+  return /* @__PURE__ */ React.createElement(CloudpackContext.Provider, {
+    value: client
+  }, children);
+}
+var useCloudpack = () => useContext(CloudpackContext);
+
+// src/components/StatusOverlay/StatusOverlay.tsx
+import React11, { useCallback, useState as useState6, useRef as useRef3 } from "react";
+
+// src/components/StatusBadge/StatusBadge.tsx
+import React2, { useRef } from "react";
+
+// src/hooks/useDraggable.ts
+import { useEffect, useState as useState2 } from "react";
+function useDraggable(containerElementRef, dragElementRef = containerElementRef) {
+  const [isDragging, setIsDragging] = useState2(false);
+  useEffect(() => {
+    if (containerElementRef && dragElementRef) {
+      const moveTarget = containerElementRef.current;
+      const dragTarget = dragElementRef.current;
+      if (moveTarget && dragTarget) {
+        let originalX = 0;
+        let originalY = 0;
+        let offset = { x: 0, y: 0 };
+        const onPointerMove = (event) => {
+          moveTarget.style.transform = `translate(${offset.x + event.clientX - originalX}px, ${offset.y + event.clientY - originalY}px)`;
+        };
+        const onPointerUp = (event) => {
+          setIsDragging(false);
+          offset = {
+            x: offset.x + event.clientX - originalX,
+            y: offset.y + event.clientY - originalY
+          };
+          dragTarget.releasePointerCapture(event.pointerId);
+          dragTarget.removeEventListener("pointerup", onPointerUp);
+          dragTarget.removeEventListener("pointermove", onPointerMove);
+          event.preventDefault();
+        };
+        const onPointerDown = (event) => {
+          setIsDragging(true);
+          originalX = event.clientX;
+          originalY = event.clientY;
+          dragTarget.setPointerCapture(event.pointerId);
+          dragTarget.addEventListener("pointerup", onPointerUp);
+          dragTarget.addEventListener("pointermove", onPointerMove);
+          event.preventDefault();
+        };
+        dragTarget.addEventListener("pointerdown", onPointerDown);
+        return () => {
+          dragTarget.removeEventListener("pointerdown", onPointerDown);
+          dragTarget.removeEventListener("pointermove", onPointerMove);
+          dragTarget.removeEventListener("pointerup", onPointerUp);
+        };
+      }
+    }
+  }, [containerElementRef, dragElementRef]);
+  return {
+    isDragging
+  };
+}
+
+// src/components/StatusBadge/StatusBadge.module.css
+var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
+  position: fixed;
+  pointer-events: none;
+  background: transparent;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+  overflow: hidden;
+}
+
+.mOWPxtXY-StatusBadgemodulecssgripArea {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  height: 100%;
+  width: 12px;
+  cursor: move;
+}
+
+.mOWPxtXY-StatusBadgemodulecssgrip {
+  width: 2px;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.mOWPxtXY-StatusBadgemodulecsscontentSurface {
+  pointer-events: auto;
+  display: contents;
+}
+
+.mOWPxtXY-StatusBadgemodulecssbadge {
+  cursor: default;
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  font-size: 12px;
+  display: inline-flex;
+  gap: 4px;
+  background: #dddddd;
+  box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.75);
+  border: 1px solid #999999;
+  border-radius: 4px;
+  height: 28px;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 2px;
+
+  transition: background-color 0.2s ease-in-out;
+}
+
+.mOWPxtXY-StatusBadgemodulecssinline {
+  flex-shrink: 0;
+  position: relative;
+  bottom: auto;
+  right: auto;
+  top: auto;
+  left: auto;
+  box-shadow: none;
+}
+
+.mOWPxtXY-StatusBadgemodulecssbuilding {
+  background: #bbb;
+  color: #000;
+}
+
+.mOWPxtXY-StatusBadgemodulecsssuccess {
+  background: #7ad17a;
+  color: #000;
+}
+
+.mOWPxtXY-StatusBadgemodulecsswarning {
+  background: #e4e68b;
+  color: #000;
+}
+
+.mOWPxtXY-StatusBadgemodulecsserror {
+  background: #ffb9b9;
+  color: #000;
+}
+
+.mOWPxtXY-StatusBadgemodulecssbutton {
+  background: inherit;
+  border: none;
+  border-radius: 3px;
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+.mOWPxtXY-StatusBadgemodulecssbutton:hover {
+  filter: invert(0.1);
+}
+
+.mOWPxtXY-StatusBadgemodulecssvalue {
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.4);
+  box-shadow: 2px 2px 3px -1px rgba(0, 0, 0, 0.15) inset;
+  padding: 2px 8px;
+  border-radius: 3px;
+}
+`;
+var s = document.createElement("style");
+s.setAttribute("data-sourceFile", "src/components/StatusBadge/StatusBadge.module.css");
+s.appendChild(document.createTextNode(compiledModule));
+document.head.appendChild(s);
+var badge = "mOWPxtXY-StatusBadgemodulecssbadge";
+var building = "mOWPxtXY-StatusBadgemodulecssbuilding";
+var button = "mOWPxtXY-StatusBadgemodulecssbutton";
+var contentSurface = "mOWPxtXY-StatusBadgemodulecsscontentSurface";
+var error = "mOWPxtXY-StatusBadgemodulecsserror";
+var fixedOverlay = "mOWPxtXY-StatusBadgemodulecssfixedOverlay";
+var grip = "mOWPxtXY-StatusBadgemodulecssgrip";
+var gripArea = "mOWPxtXY-StatusBadgemodulecssgripArea";
+var inline = "mOWPxtXY-StatusBadgemodulecssinline";
+var success = "mOWPxtXY-StatusBadgemodulecsssuccess";
+var value = "mOWPxtXY-StatusBadgemodulecssvalue";
+var warning = "mOWPxtXY-StatusBadgemodulecsswarning";
+var StatusBadge_module_default = { badge, building, button, contentSurface, error, fixedOverlay, grip, gripArea, inline, success, value, warning };
+
+// src/components/StatusBadge/StatusBadge.tsx
+import { default as cx } from "classnames";
+
+// src/components/CloudpackProvider/useStatus.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+var defaultStatus = {
+  status: "unknown",
+  remainingTasks: 0,
+  totalTasks: 0,
+  totalErrors: 0,
+  totalWarnings: 0
+};
+var useStatus = () => {
+  const service = useCloudpack();
+  const [status, setStatus] = useState3(
+    () => service?.getValue(["status"]) || defaultStatus
+  );
+  useEffect2(() => service?.subscribe(["status"], setStatus), [service]);
+  return status;
+};
+
+// src/images/open-16-filled.inline.svg
+var open_16_filled_inline_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNC43NSAzLjVDNC4wNTk2NCAzLjUgMy41IDQuMDU5NjQgMy41IDQuNzVWMTEuMjVDMy41IDExLjk0MDQgNC4wNTk2NCAxMi41IDQuNzUgMTIuNUgxMS4yNUMxMS45NDA0IDEyLjUgMTIuNSAxMS45NDA0IDEyLjUgMTEuMjVWOS43NUMxMi41IDkuMzM1NzkgMTIuODM1OCA5IDEzLjI1IDlDMTMuNjY0MiA5IDE0IDkuMzM1NzkgMTQgOS43NVYxMS4yNUMxNCAxMi43Njg4IDEyLjc2ODggMTQgMTEuMjUgMTRINC43NUMzLjIzMTIyIDE0IDIgMTIuNzY4OCAyIDExLjI1VjQuNzVDMiAzLjIzMTIyIDMuMjMxMjIgMiA0Ljc1IDJINi4yNUM2LjY2NDIxIDIgNyAyLjMzNTc5IDcgMi43NUM3IDMuMTY0MjEgNi42NjQyMSAzLjUgNi4yNSAzLjVINC43NVpNNy45OTk3NiAyLjc1QzcuOTk5NzYgMi4zMzU3OSA4LjMzNTU0IDIgOC43NDk3NiAySDEzLjI0OThDMTMuNjY0IDIgMTMuOTk5OCAyLjMzNTc5IDEzLjk5OTggMi43NVY3LjI1QzEzLjk5OTggNy42NjQyMSAxMy42NjQgOCAxMy4yNDk4IDhDMTIuODM1NSA4IDEyLjQ5OTggNy42NjQyMSAxMi40OTk4IDcuMjVWNC41NjA5NUw5LjI4MDA4IDcuNzgwNTZDOC45ODcxOSA4LjA3MzQ1IDguNTEyMzEgOC4wNzM0NSA4LjIxOTQyIDcuNzgwNTVDNy45MjY1MyA3LjQ4NzY2IDcuOTI2NTMgNy4wMTI3OCA4LjIxOTQzIDYuNzE5ODlMMTEuNDM5NCAzLjVIOC43NDk3NkM4LjMzNTU0IDMuNSA3Ljk5OTc2IDMuMTY0MjEgNy45OTk3NiAyLjc1WiIgZmlsbD0iIzIxMjEyMSIvPgo8L3N2Zz4K";
+
+// src/components/StatusBadge/StatusBadge.tsx
+function StatusBadge({ inline: inline2, onExpand }) {
+  const rootElementRef = useRef(null);
+  const dragElementRef = useRef(null);
+  const status = useStatus();
+  useDraggable(rootElementRef, dragElementRef);
+  if (status.status === "unknown") {
+    return null;
+  }
+  const badge2 = /* @__PURE__ */ React2.createElement("div", {
+    ref: inline2 ? void 0 : rootElementRef,
+    className: getStatusClassName(status, !!inline2)
+  }, !inline2 && /* @__PURE__ */ React2.createElement("div", {
+    ref: inline2 ? void 0 : 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
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: StatusBadge_module_default.value
+  }, getStatusString(status))), /* @__PURE__ */ React2.createElement("div", null, getStatsString(status)), /* @__PURE__ */ React2.createElement("button", {
+    className: StatusBadge_module_default.button
+  }, /* @__PURE__ */ React2.createElement("img", {
+    src: open_16_filled_inline_default,
+    alt: ""
+  })));
+  return inline2 ? badge2 : /* @__PURE__ */ React2.createElement("div", {
+    className: StatusBadge_module_default.fixedOverlay
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: StatusBadge_module_default.contentSurface
+  }, badge2));
+}
+function getStatusString(status) {
+  if (status.status === "pending") {
+    return "Running";
+  }
+  if (status.totalTasks === 0) {
+    return "Idle";
+  }
+  return status.totalErrors === 0 ? "Success" : "Errors";
+}
+function getStatusClassName(status, inline2) {
+  return cx(StatusBadge_module_default.badge, {
+    [StatusBadge_module_default.inline]: inline2,
+    [StatusBadge_module_default.building]: status.status === "pending",
+    [StatusBadge_module_default.success]: status.status === "idle" && status.totalTasks > 0 && status.totalErrors === 0 && status.totalWarnings === 0,
+    [StatusBadge_module_default.error]: status.status === "idle" && status.totalErrors > 0,
+    [StatusBadge_module_default.warning]: status.status === "idle" && status.totalErrors === 0 && status.totalWarnings > 0
+  });
+}
+function getStatsString(status) {
+  if (status.totalTasks === 0) {
+    return "";
+  }
+  return [
+    status.remainingTasks > 0 && `${status.remainingTasks} of ${status.totalTasks} tasks pending`,
+    status.remainingTasks === 0 && `${status.totalTasks} tasks completed`,
+    status.totalErrors === 1 && `${status.totalErrors} error`,
+    status.totalErrors > 1 && `${status.totalErrors} errors`,
+    status.totalWarnings === 1 && `${status.totalWarnings} warning`,
+    status.totalWarnings > 1 && `${status.totalWarnings} warnings`
+  ].filter(Boolean).join(", ");
+}
+
+// src/components/StatusDialog/StatusDialog.tsx
+import React8 from "react";
+
+// src/components/StatusDialog/TaskList.tsx
+import React5 from "react";
+
+// src/components/StatusDialog/TaskStatus.tsx
+import React4 from "react";
+
+// src/components/StatusDialog/TaskResultItem.tsx
+import React3 from "react";
+
+// src/components/StatusDialog/TaskResultItem.module.css
+var compiledModule2 = `.mGnoEIJOyo-TaskResultItemmodulecssroot {
+  display: flex;
+  background: #f5f5f5;
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecssstatusBar {
+  flex-shrink: 0;
+  border-radius: 4px;
+  width: 4px;
+  background: #aa0000;
+  box-shadow: 2px 0 4px 0 rgb(220 0 0 / 20%);
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecsscontent {
+  padding: 8px;
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecsstitleArea {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecssfile {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: inherit;
+  font-family: inherit;
+  flex-grow: 1;
+  font-weight: 500;
+  font-size: 14px;
+  flex-shrink: 0;
+  text-decoration: none;
+  color: #000;
+  cursor: pointer;
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecssfile:hover {
+  text-decoration: underline;
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecssactionArea {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.mGnoEIJOyo-TaskResultItemmodulecsstext {
+  word-wrap: break-word;
+  color: #333;
+}
+`;
+var s2 = document.createElement("style");
+s2.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskResultItem.module.css");
+s2.appendChild(document.createTextNode(compiledModule2));
+document.head.appendChild(s2);
+var actionArea = "mGnoEIJOyo-TaskResultItemmodulecssactionArea";
+var content = "mGnoEIJOyo-TaskResultItemmodulecsscontent";
+var file = "mGnoEIJOyo-TaskResultItemmodulecssfile";
+var root = "mGnoEIJOyo-TaskResultItemmodulecssroot";
+var statusBar = "mGnoEIJOyo-TaskResultItemmodulecssstatusBar";
+var text = "mGnoEIJOyo-TaskResultItemmodulecsstext";
+var titleArea = "mGnoEIJOyo-TaskResultItemmodulecsstitleArea";
+var TaskResultItem_module_default = { actionArea, content, file, root, statusBar, text, titleArea };
+
+// src/components/StatusDialog/TaskResultItem.tsx
+function TaskResultItem({ item, projectPath, index }) {
+  const service = useCloudpack();
+  const openSource = (ev) => {
+    if (item.location) {
+      service.openSource({
+        rootPath: projectPath,
+        relativePath: item.location?.file,
+        line: item.location?.line,
+        column: item.location?.column
+      });
+      ev.preventDefault();
+    }
+  };
+  const filename = item.location?.file || "(path unavailable)";
+  const location = ["", item.location?.line, item.location?.column].filter(Boolean).join(":");
+  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))));
+}
+
+// src/components/StatusDialog/TaskStatus.module.css
+var compiledModule3 = `.vweafQQjU-TaskStatusmodulecssroot {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.25);
+}
+
+.vweafQQjU-TaskStatusmodulecssheader {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  background: #f0f0f0;
+  align-items: center;
+  line-height: 1;
+}
+
+.vweafQQjU-TaskStatusmodulecssexpandButton {
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+}
+.vweafQQjU-TaskStatusmodulecssexpandButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.vweafQQjU-TaskStatusmodulecssexpandButton:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.vweafQQjU-TaskStatusmodulecssexpandIcon {
+  transition: transform 0.1s ease-in-out;
+}
+
+.vweafQQjU-TaskStatusmodulecsscollapsed {
+  transform: rotate(-90deg);
+}
+
+.vweafQQjU-TaskStatusmodulecssfarArea {
+  line-height: 1;
+  font-size: 13px;
+  text-align: end;
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  gap: 8px;
+  display: flex;
+  flex-grow: 1;
+  justify-content: end;
+  flex-direction: row;
+}
+
+.vweafQQjU-TaskStatusmodulecsstitle {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.vweafQQjU-TaskStatusmodulecsssubTitle {
+  font-size: 13px;
+}
+
+.vweafQQjU-TaskStatusmodulecsscontent {
+  border-top: 1px solid #ccc;
+  background: #fafafa;
+  padding: 8px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vweafQQjU-TaskStatusmodulecssresultItems {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vweafQQjU-TaskStatusmodulecsserror {
+  background: #ffe9e9;
+}
+
+.vweafQQjU-TaskStatusmodulecsssuccess {
+  background: #e9f9e9;
+}
+
+.vweafQQjU-TaskStatusmodulecsswarning {
+  background: #fff9e9;
+}
+
+.vweafQQjU-TaskStatusmodulecssname {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.vweafQQjU-TaskStatusmodulecssvalue {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  color: #333;
+}
+
+.vweafQQjU-TaskStatusmodulecsslinkButton {
+  display: inline-flex;
+  align-items: flex-start;
+  text-align: start;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: inherit;
+  font-family: inherit;
+  flex-grow: 1;
+
+  font-size: 14px;
+  flex-shrink: 0;
+  text-decoration: none;
+  color: #000;
+  cursor: pointer;
+}
+
+.vweafQQjU-TaskStatusmodulecsslinkButton:hover {
+  text-decoration: underline;
+}
+`;
+var s3 = document.createElement("style");
+s3.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskStatus.module.css");
+s3.appendChild(document.createTextNode(compiledModule3));
+document.head.appendChild(s3);
+var collapsed = "vweafQQjU-TaskStatusmodulecsscollapsed";
+var content2 = "vweafQQjU-TaskStatusmodulecsscontent";
+var error2 = "vweafQQjU-TaskStatusmodulecsserror";
+var expandButton = "vweafQQjU-TaskStatusmodulecssexpandButton";
+var expandIcon = "vweafQQjU-TaskStatusmodulecssexpandIcon";
+var farArea = "vweafQQjU-TaskStatusmodulecssfarArea";
+var header = "vweafQQjU-TaskStatusmodulecssheader";
+var linkButton = "vweafQQjU-TaskStatusmodulecsslinkButton";
+var name = "vweafQQjU-TaskStatusmodulecssname";
+var resultItems = "vweafQQjU-TaskStatusmodulecssresultItems";
+var root2 = "vweafQQjU-TaskStatusmodulecssroot";
+var subTitle = "vweafQQjU-TaskStatusmodulecsssubTitle";
+var success2 = "vweafQQjU-TaskStatusmodulecsssuccess";
+var title = "vweafQQjU-TaskStatusmodulecsstitle";
+var value2 = "vweafQQjU-TaskStatusmodulecssvalue";
+var warning2 = "vweafQQjU-TaskStatusmodulecsswarning";
+var TaskStatus_module_default = { collapsed, content: content2, error: error2, expandButton, expandIcon, farArea, header, linkButton, name, resultItems, root: root2, subTitle, success: success2, title, value: value2, warning: warning2 };
+
+// src/components/StatusDialog/TaskStatus.tsx
+import { default as cx2 } from "classnames";
+
+// src/images/error-24.inline.svg
+var error_24_inline_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyWk0xNS41MzAzIDguNDY5NjdMMTUuNDQ2MiA4LjM5NzA1QzE1LjE4NTIgOC4yMDM0IDE0LjgyNyA4LjIwMTAxIDE0LjU2MzYgOC4zODk4OEwxNC40Njk3IDguNDY5NjdMMTIgMTAuOTM5TDkuNTMwMzMgOC40Njk2N0w5LjQ0NjIxIDguMzk3MDVDOS4xODUyMiA4LjIwMzQgOC44MjcwMSA4LjIwMTAxIDguNTYzNjIgOC4zODk4OEw4LjQ2OTY3IDguNDY5NjdMOC4zOTcwNSA4LjU1Mzc5QzguMjAzNCA4LjgxNDc4IDguMjAxMDEgOS4xNzI5OSA4LjM4OTg4IDkuNDM2MzhMOC40Njk2NyA5LjUzMDMzTDEwLjkzOSAxMkw4LjQ2OTY3IDE0LjQ2OTdMOC4zOTcwNSAxNC41NTM4QzguMjAzNCAxNC44MTQ4IDguMjAxMDEgMTUuMTczIDguMzg5ODggMTUuNDM2NEw4LjQ2OTY3IDE1LjUzMDNMOC41NTM3OSAxNS42MDI5QzguODE0NzggMTUuNzk2NiA5LjE3Mjk5IDE1Ljc5OSA5LjQzNjM4IDE1LjYxMDFMOS41MzAzMyAxNS41MzAzTDEyIDEzLjA2MUwxNC40Njk3IDE1LjUzMDNMMTQuNTUzOCAxNS42MDI5QzE0LjgxNDggMTUuNzk2NiAxNS4xNzMgMTUuNzk5IDE1LjQzNjQgMTUuNjEwMUwxNS41MzAzIDE1LjUzMDNMMTUuNjAyOSAxNS40NDYyQzE1Ljc5NjYgMTUuMTg1MiAxNS43OTkgMTQuODI3IDE1LjYxMDEgMTQuNTYzNkwxNS41MzAzIDE0LjQ2OTdMMTMuMDYxIDEyTDE1LjUzMDMgOS41MzAzM0wxNS42MDI5IDkuNDQ2MjFDMTUuNzk2NiA5LjE4NTIyIDE1Ljc5OSA4LjgyNzAxIDE1LjYxMDEgOC41NjM2MkwxNS41MzAzIDguNDY5NjdMMTUuNDQ2MiA4LjM5NzA1TDE1LjUzMDMgOC40Njk2N1oiIGZpbGw9IiNhYTAwMDAiLz4KPC9zdmc+Cg==";
+
+// src/images/success-24.inline.svg
+var success_24_inline_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDMTcuNTIyOCAyIDIyIDYuNDc3MTUgMjIgMTJDMjIgMTcuNTIyOCAxNy41MjI4IDIyIDEyIDIyQzYuNDc3MTUgMjIgMiAxNy41MjI4IDIgMTJDMiA2LjQ3NzE1IDYuNDc3MTUgMiAxMiAyWk0xNS4yMTk3IDguOTY5NjdMMTAuNzUgMTMuNDM5M0w4Ljc4MDMzIDExLjQ2OTdDOC40ODc0NCAxMS4xNzY4IDguMDEyNTYgMTEuMTc2OCA3LjcxOTY3IDExLjQ2OTdDNy40MjY3OCAxMS43NjI2IDcuNDI2NzggMTIuMjM3NCA3LjcxOTY3IDEyLjUzMDNMMTAuMjE5NyAxNS4wMzAzQzEwLjUxMjYgMTUuMzIzMiAxMC45ODc0IDE1LjMyMzIgMTEuMjgwMyAxNS4wMzAzTDE2LjI4MDMgMTAuMDMwM0MxNi41NzMyIDkuNzM3NDQgMTYuNTczMiA5LjI2MjU2IDE2LjI4MDMgOC45Njk2N0MxNS45ODc0IDguNjc2NzggMTUuNTEyNiA4LjY3Njc4IDE1LjIxOTcgOC45Njk2N1oiIGZpbGw9IiMwMGFhMDAiLz4KPC9zdmc+Cg==";
+
+// src/images/chevrondown-20.inline.svg
+var chevrondown_20_inline_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1Ljc5NCA3LjczMjcxQzE2LjA3OTcgOC4wMzI2MyAxNi4wNjgxIDguNTA3MzcgMTUuNzY4MiA4Ljc5MzA2TDEwLjUxNzggMTMuNzk0NEMxMC4yMjgxIDE0LjA3MDMgOS43NzI4NSAxNC4wNzAzIDkuNDgzMTggMTMuNzk0NEw0LjIzMjcxIDguNzkzMDZDMy45MzI3OSA4LjUwNzM3IDMuOTIxMjUgOC4wMzI2MyA0LjIwNjk0IDcuNzMyNzFDNC40OTI2NCA3LjQzMjc5IDQuOTY3MzcgNy40MjEyNSA1LjI2NzI5IDcuNzA2OTRMMTAuMDAwNSAxMi4yMTU1TDE0LjczMzYgNy43MDY5NEMxNS4wMzM2IDcuNDIxMjUgMTUuNTA4MyA3LjQzMjc5IDE1Ljc5NCA3LjczMjcxWiIgZmlsbD0iIzIxMjEyMSIvPgo8L3N2Zz4K";
+
+// src/components/StatusDialog/TaskStatus.tsx
+function getCompletion(task) {
+  if (task.status === "pending") {
+    return "Running";
+  }
+  return [
+    `Completed in ${task.durationMilliseconds}ms`,
+    task.errors?.length && `${task.errors.length} error${task.errors.length > 1 ? "s" : ""}`,
+    task.warnings?.length && `${task.warnings.length} warning${task.warnings.length > 1 ? "s" : ""}`
+  ].filter(Boolean).join(", ");
+}
+function TaskStatus({ task }) {
+  const [isOpen, setIsOpen] = React4.useState(void 0);
+  const { name: name2, warnings, errors } = task;
+  const cloudpack = useCloudpack();
+  const showContent = isOpen === true || isOpen === void 0 && task.errors?.length > 0;
+  const open = (rootPath) => {
+    cloudpack.open({
+      rootPath
+    });
+  };
+  const openPackage = () => {
+    cloudpack.openSource({
+      rootPath: task.inputPath,
+      relativePath: "package.json",
+      line: 0,
+      column: 0
+    });
+  };
+  return /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.root
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: getHeaderClassName(task)
+  }, /* @__PURE__ */ React4.createElement("button", {
+    className: TaskStatus_module_default.expandButton,
+    onClick: () => setIsOpen(!showContent)
+  }, /* @__PURE__ */ React4.createElement("img", {
+    className: cx2(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
+    src: chevrondown_20_inline_default,
+    alt: ""
+  })), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React4.createElement("img", {
+    className: TaskStatus_module_default.errorIcon,
+    src: success_24_inline_default,
+    alt: ""
+  }), errors?.length > 0 && /* @__PURE__ */ React4.createElement("img", {
+    className: TaskStatus_module_default.errorIcon,
+    src: error_24_inline_default,
+    alt: ""
+  }), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.title
+  }, name2), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.farArea
+  }, getCompletion(task))), showContent && /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.content
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.title
+  }, "Details"), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.nameValueArea
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.name
+  }, "Input path"), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.value
+  }, /* @__PURE__ */ React4.createElement("button", {
+    className: TaskStatus_module_default.linkButton,
+    onClick: () => open(task.inputPath)
+  }, task.inputPath), /* @__PURE__ */ React4.createElement("button", {
+    className: TaskStatus_module_default.linkButton,
+    onClick: openPackage
+  }, "(Package.json)"))), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.nameValueArea
+  }, /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.name
+  }, "Output path"), /* @__PURE__ */ React4.createElement("button", {
+    className: TaskStatus_module_default.linkButton,
+    onClick: () => open(task.outputPath)
+  }, task.outputPath)), errors?.length > 0 && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.title
+  }, "Errors"), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.resultItems
+  }, errors.map((error3, index) => /* @__PURE__ */ React4.createElement(TaskResultItem, {
+    key: index,
+    item: error3,
+    projectPath: task.inputPath,
+    index: index + 1
+  })))), warnings?.length > 0 && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.title
+  }, "Warnings"), /* @__PURE__ */ React4.createElement("div", {
+    className: TaskStatus_module_default.resultItems
+  }, warnings.map((warning3, index) => /* @__PURE__ */ React4.createElement(TaskResultItem, {
+    key: index,
+    item: warning3,
+    projectPath: task.inputPath,
+    index: index + 1
+  }))))));
+}
+function getHeaderClassName(task) {
+  return cx2(TaskStatus_module_default.header, {
+    [TaskStatus_module_default.success]: task.errors?.length === 0 && task.warnings?.length === 0,
+    [TaskStatus_module_default.warning]: task.errors?.length === 0 && task.warnings?.length > 0,
+    [TaskStatus_module_default.error]: task.errors?.length > 0
+  });
+}
+
+// src/components/CloudpackProvider/useStatusDetails.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+var useStatusDetails = () => {
+  const service = useCloudpack();
+  const [details, setDetails] = useState4({ tasks: [] });
+  useEffect3(() => service?.subscribe(["status-details"], setDetails), [service]);
+  return details;
+};
+
+// src/components/StatusDialog/TaskList.module.css
+var compiledModule4 = `.lTlVbGXBQHs-TaskListmodulecssroot {
+  flex-grow: 1;
+  overflow: auto;
+  border-top: 1px solid #ccc;
+  box-sizing: border-box;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+`;
+var s4 = document.createElement("style");
+s4.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskList.module.css");
+s4.appendChild(document.createTextNode(compiledModule4));
+document.head.appendChild(s4);
+var root3 = "lTlVbGXBQHs-TaskListmodulecssroot";
+var TaskList_module_default = { root: root3 };
+
+// src/components/StatusDialog/TaskList.tsx
+function TaskList() {
+  const details = useStatusDetails();
+  const tasks = (details.tasks || []).sort(sortTasks);
+  return /* @__PURE__ */ React5.createElement("div", {
+    className: TaskList_module_default.root
+  }, tasks.map((task, index) => /* @__PURE__ */ React5.createElement(TaskStatus, {
+    key: index,
+    task
+  })));
+}
+function sortTasks(a, b) {
+  const aStatus = a.status === "pending" ? 1 : 0;
+  const bStatus = b.status === "pending" ? 1 : 0;
+  if (aStatus !== bStatus) {
+    return aStatus > bStatus ? -1 : 1;
+  }
+  const aErrors = a.errors?.length || 0;
+  const bErrors = b.errors?.length || 0;
+  if (aErrors !== bErrors) {
+    return aErrors > bErrors ? -1 : 1;
+  }
+  return a.name < b.name ? -1 : 1;
+}
+
+// src/components/Button/Button.tsx
+import React6 from "react";
+
+// src/components/Button/Button.module.css
+var compiledModule5 = `.CCnBgacfaMc-ButtonmodulecssstandardButton {
+  outline: transparent;
+  position: relative;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  box-sizing: border-box;
+  border: 1px solid rgb(138, 136, 134);
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  padding: 0px 16px;
+  border-radius: 2px;
+  min-width: 80px;
+  height: 32px;
+  background-color: rgb(255, 255, 255);
+  color: rgb(50, 49, 48);
+  user-select: none;
+}
+
+.CCnBgacfaMc-ButtonmodulecssstandardButton:active {
+  background-color: rgb(237, 235, 233);
+  color: rgb(32, 31, 30);
+}
+
+.CCnBgacfaMc-ButtonmodulecssstandardButton:hover {
+  background-color: rgb(243, 242, 241);
+  color: rgb(32, 31, 30);
+}
+
+.CCnBgacfaMc-ButtonmodulecssprimaryButton {
+  outline: transparent;
+  position: relative;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  box-sizing: border-box;
+  border: 1px solid rgb(0, 120, 212);
+  display: inline-block;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  padding: 0px 16px;
+  border-radius: 2px;
+  min-width: 80px;
+  height: 32px;
+  background-color: rgb(0, 120, 212);
+  color: rgb(255, 255, 255);
+  user-select: none;
+}
+
+.CCnBgacfaMc-ButtonmodulecssprimaryButton:active {
+  background-color: rgb(0, 90, 158);
+  border: 1px solid rgb(0, 90, 158);
+  color: rgb(255, 255, 255);
+}
+
+.CCnBgacfaMc-ButtonmodulecssprimaryButton:hover {
+  background-color: rgb(16, 110, 190);
+  border: 1px solid rgb(16, 110, 190);
+  color: rgb(255, 255, 255);
+}
+`;
+var s5 = document.createElement("style");
+s5.setAttribute("data-sourceFile", "src/components/Button/Button.module.css");
+s5.appendChild(document.createTextNode(compiledModule5));
+document.head.appendChild(s5);
+var primaryButton = "CCnBgacfaMc-ButtonmodulecssprimaryButton";
+var standardButton = "CCnBgacfaMc-ButtonmodulecssstandardButton";
+var Button_module_default = { primaryButton, standardButton };
+
+// src/components/Button/Button.tsx
+function Button(props) {
+  const { primary, ...other } = props;
+  const className = primary ? Button_module_default.primaryButton : Button_module_default.standardButton;
+  return /* @__PURE__ */ React6.createElement("button", {
+    ...other,
+    className,
+    type: "button"
+  });
+}
+
+// src/components/Dialog/Dialog.tsx
+import { default as React7, useRef as useRef2 } from "react";
+
+// src/components/Dialog/Dialog.module.css
+var compiledModule6 = `.ggUoTSSSfk-Dialogmodulecssoverlay {
+  background: rgba(0, 0, 0, 0.1);
+  border: 1px solid black;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.ggUoTSSSfk-Dialogmodulecsscommands {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+  padding: 0 20px;
+}
+
+.ggUoTSSSfk-Dialogmodulecssdialog {
+  animation: fade-in 0.1s ease-in-out;
+  width: 80vw;
+  align-self: stretch;
+  margin: 20px 0;
+  background: white;
+  color: #000;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  border-top: 4px solid rgb(0, 120, 212);
+  border-radius: 3px;
+  box-shadow: rgb(0 0 0 / 22%) 0px 25.6px 57.6px 0px, rgb(0 0 0 / 18%) 0px 4.8px 14.4px 0px;
+  position: relative;
+  outline: transparent solid 3px;
+}
+
+.ggUoTSSSfk-DialogmodulecsstitleArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 8px 8px 20px;
+  gap: 8px;
+}
+
+.ggUoTSSSfk-DialogmodulecsscloseButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+}
+
+.ggUoTSSSfk-DialogmodulecsscloseButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.ggUoTSSSfk-DialogmodulecsscloseButton:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.ggUoTSSSfk-Dialogmodulecsstitle {
+  flex-grow: 1;
+  font-size: 20px;
+  font-weight: 600;
+  color: rgb(0, 120, 212);
+}
+`;
+var s6 = document.createElement("style");
+s6.setAttribute("data-sourceFile", "src/components/Dialog/Dialog.module.css");
+s6.appendChild(document.createTextNode(compiledModule6));
+document.head.appendChild(s6);
+var closeButton = "ggUoTSSSfk-DialogmodulecsscloseButton";
+var commands = "ggUoTSSSfk-Dialogmodulecsscommands";
+var dialog = "ggUoTSSSfk-Dialogmodulecssdialog";
+var overlay = "ggUoTSSSfk-Dialogmodulecssoverlay";
+var title2 = "ggUoTSSSfk-Dialogmodulecsstitle";
+var titleArea2 = "ggUoTSSSfk-DialogmodulecsstitleArea";
+var Dialog_module_default = { closeButton, commands, dialog, overlay, title: title2, titleArea: titleArea2 };
+
+// src/images/dismiss-16-filled.inline.svg
+var dismiss_16_filled_inline_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuMzk3MDUgMi41NTM3OUwyLjQ2OTY3IDIuNDY5NjdDMi43MzU5NCAyLjIwMzQgMy4xNTI2IDIuMTc5MiAzLjQ0NjIxIDIuMzk3MDVMMy41MzAzMyAyLjQ2OTY3TDggNi45MzlMMTIuNDY5NyAyLjQ2OTY3QzEyLjc2MjYgMi4xNzY3OCAxMy4yMzc0IDIuMTc2NzggMTMuNTMwMyAyLjQ2OTY3QzEzLjgyMzIgMi43NjI1NiAxMy44MjMyIDMuMjM3NDQgMTMuNTMwMyAzLjUzMDMzTDkuMDYxIDhMMTMuNTMwMyAxMi40Njk3QzEzLjc5NjYgMTIuNzM1OSAxMy44MjA4IDEzLjE1MjYgMTMuNjAyOSAxMy40NDYyTDEzLjUzMDMgMTMuNTMwM0MxMy4yNjQxIDEzLjc5NjYgMTIuODQ3NCAxMy44MjA4IDEyLjU1MzggMTMuNjAyOUwxMi40Njk3IDEzLjUzMDNMOCA5LjA2MUwzLjUzMDMzIDEzLjUzMDNDMy4yMzc0NCAxMy44MjMyIDIuNzYyNTYgMTMuODIzMiAyLjQ2OTY3IDEzLjUzMDNDMi4xNzY3OCAxMy4yMzc0IDIuMTc2NzggMTIuNzYyNiAyLjQ2OTY3IDEyLjQ2OTdMNi45MzkgOEwyLjQ2OTY3IDMuNTMwMzNDMi4yMDM0IDMuMjY0MDYgMi4xNzkyIDIuODQ3NCAyLjM5NzA1IDIuNTUzNzlMMi40Njk2NyAyLjQ2OTY3TDIuMzk3MDUgMi41NTM3OVoiIGZpbGw9IiMyMTIxMjEiLz4KPC9zdmc+Cg==";
+
+// src/components/Dialog/Dialog.tsx
+function Dialog({ title: title3, style, draggable, onClose, commands: commands2, children }) {
+  const draggableRef = useRef2(null);
+  const draggableTargetRef = useRef2(null);
+  const colorAccent = style === "error" ? "rgb(164, 38, 44)" : void 0;
+  const cursorDraggable = draggable ? "move" : void 0;
+  useDraggable(draggable ? draggableRef : void 0, draggable ? draggableTargetRef : void 0);
+  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("div", {
+    ref: draggableTargetRef,
+    className: Dialog_module_default.title,
+    style: { color: colorAccent, cursor: cursorDraggable }
+  }, title3), !!onClose && /* @__PURE__ */ React7.createElement("button", {
+    className: Dialog_module_default.closeButton,
+    onClick: onClose
+  }, /* @__PURE__ */ React7.createElement("img", {
+    src: dismiss_16_filled_inline_default,
+    alt: ""
+  }))), !!commands2 && /* @__PURE__ */ React7.createElement("div", {
+    className: Dialog_module_default.commands
+  }, commands2), children));
+}
+
+// src/components/StatusDialog/StatusDialog.tsx
+function StatusDialog({ onClose }) {
+  const cloudpack = useCloudpack();
+  const restartTasks = () => {
+    cloudpack.restartTasks();
+  };
+  return /* @__PURE__ */ React8.createElement(Dialog, {
+    title: "Task results",
+    draggable: true,
+    onClose,
+    commands: /* @__PURE__ */ React8.createElement(Button, {
+      primary: true,
+      onClick: restartTasks
+    }, "Restart all tasks")
+  }, /* @__PURE__ */ React8.createElement(TaskList, null));
+}
+
+// src/components/ErrorDialog/ErrorDialog.tsx
+import { default as React10 } from "react";
+
+// src/components/ErrorDialog/PathError.tsx
+import React9 from "react";
+import { default as cx3 } from "classnames";
+function PathError(props) {
+  const [showContent, setshowContent] = React9.useState(false);
+  const { packageName, path } = props;
+  return /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.root
+  }, /* @__PURE__ */ React9.createElement("div", {
+    className: cx3(TaskStatus_module_default.header, TaskStatus_module_default.error)
+  }, /* @__PURE__ */ React9.createElement("button", {
+    className: TaskStatus_module_default.expandButton,
+    onClick: () => setshowContent(!showContent)
+  }, /* @__PURE__ */ React9.createElement("img", {
+    className: cx3(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
+    src: chevrondown_20_inline_default,
+    alt: ""
+  })), /* @__PURE__ */ React9.createElement("img", {
+    className: TaskStatus_module_default.errorIcon,
+    src: error_24_inline_default,
+    alt: ""
+  }), /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.title
+  }, `${packageName}/${path}`)), showContent && /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.content
+  }, /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.title
+  }, "Details"), /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.nameValueArea
+  }, /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.name
+  }, "Problem"), /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.value
+  }, `A deep import "${packageName}" was imported, but was unrecognized as an exported entry path.`)), /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.nameValueArea
+  }, /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.name
+  }, "Solution"), /* @__PURE__ */ React9.createElement("div", {
+    className: TaskStatus_module_default.value
+  }, `Remove the path from the import in your source. (Import from "${packageName}" rather than "${packageName}/${path}")`))));
+}
+
+// src/components/ErrorDialog/ErrorDialog.tsx
+function ErrorDialog({ unsupported }) {
+  const cloudpack = useCloudpack();
+  const reload = () => {
+    cloudpack.restartTasks();
+  };
+  return /* @__PURE__ */ React10.createElement(Dialog, {
+    title: "Found unsupported paths in your project",
+    style: "error",
+    commands: /* @__PURE__ */ React10.createElement(Button, {
+      primary: true,
+      onClick: reload
+    }, "Reload")
+  }, /* @__PURE__ */ React10.createElement("div", {
+    className: TaskList_module_default.root
+  }, unsupported.map((data, index) => /* @__PURE__ */ React10.createElement(PathError, {
+    ...data,
+    key: index
+  }))));
+}
+
+// src/components/ErrorDialog/useErrorEvents.ts
+import { useEffect as useEffect4, useState as useState5 } from "react";
+var useErrorEvents = () => {
+  const [events, setEvents] = useState5({ unsupported: [] });
+  useEffect4(() => {
+    const handleError = (event) => {
+      const regex = /[Mm]odule specifier,? ['"](.*?)\/(.*?)['"]/;
+      const match = event.message.match(regex);
+      if (match && match.length === 3) {
+        setEvents((prevEvents) => ({
+          ...prevEvents,
+          unsupported: [...prevEvents.unsupported, { packageName: match[1], path: match[2] }]
+        }));
+      }
+    };
+    window.uncaughtErrors = window.uncaughtErrors || { errors: [], unregister: () => void 0 };
+    window.uncaughtErrors.unregister();
+    window.addEventListener("error", handleError);
+    for (const error3 of window.uncaughtErrors.errors) {
+      handleError(error3);
+    }
+  }, []);
+  return events;
+};
+
+// src/components/StatusOverlay/StatusOverlay.tsx
+function StatusOverlay() {
+  const [isExpanded, setIsExpanded] = useState6(false);
+  const status = useStatus();
+  const internal = useRef3();
+  const { unsupported } = useErrorEvents();
+  if (isExpanded === false && internal.current?.status !== "idle" && status.status === "idle" && internal.current?.totalErrors != status.totalErrors) {
+    setIsExpanded(true);
+  }
+  internal.current = status;
+  const toggleMinimized = useCallback(() => {
+    console.log(`Toggling minimized state to ${!isExpanded}`);
+    setIsExpanded(!isExpanded);
+  }, [isExpanded, setIsExpanded]);
+  return /* @__PURE__ */ React11.createElement("div", null, !!unsupported.length && /* @__PURE__ */ React11.createElement(ErrorDialog, {
+    unsupported
+  }), !unsupported.length && !isExpanded && /* @__PURE__ */ React11.createElement(StatusBadge, {
+    onExpand: toggleMinimized
+  }), !unsupported.length && isExpanded && /* @__PURE__ */ React11.createElement(StatusDialog, {
+    onClose: toggleMinimized
+  }));
+}
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+import React12 from "react";
+
+// src/components/ThemeProvider/ThemeProvider.module.css
+var compiledModule7 = `.xwrpHYTQE-ThemeProvidermodulecssroot {
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+}
+`;
+var s7 = document.createElement("style");
+s7.setAttribute("data-sourceFile", "src/components/ThemeProvider/ThemeProvider.module.css");
+s7.appendChild(document.createTextNode(compiledModule7));
+document.head.appendChild(s7);
+var root4 = "xwrpHYTQE-ThemeProvidermodulecssroot";
+var ThemeProvider_module_default = { root: root4 };
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+function ThemeProvider({ children }) {
+  return /* @__PURE__ */ React12.createElement("div", {
+    className: ThemeProvider_module_default.root
+  }, children);
+}
+
+// src/index.tsx
+var rootDiv = document.createElement("div");
+ReactDOM.render(
+  /* @__PURE__ */ React13.createElement(ThemeProvider, null, /* @__PURE__ */ React13.createElement(CloudpackProvider, null, /* @__PURE__ */ React13.createElement(StatusOverlay, null))),
+  rootDiv
+);
+document.body.appendChild(rootDiv);