@ms-cloudpack/overlay 0.2.0 → 0.4.0

package/CHANGELOG.json

@@ -2,7 +2,37 @@
   "name": "@ms-cloudpack/overlay",
   "entries": [
     {
-      "date": "Thu, 29 Sep 2022 17:46:14 GMT",
+      "date": "Wed, 05 Oct 2022 19:39:05 GMT",
+      "tag": "@ms-cloudpack/overlay_v0.4.0",
+      "version": "0.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "dzearing@microsoft.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "a5958df7dbb6455200dee17b7201273b7bb8155a",
+            "comment": "Including pre-baked bundle artifact in package.json using `browser-esm` condition in exports map."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 29 Sep 2022 22:52:40 GMT",
+      "tag": "@ms-cloudpack/overlay_v0.3.0",
+      "version": "0.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "dzearing@microsoft.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "bfa648e140287db65fd3e5f5bb72a6a546426f16",
+            "comment": "Adding a browser pre-bundled entry for the overlay."
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 29 Sep 2022 17:46:30 GMT",
       "tag": "@ms-cloudpack/overlay_v0.2.0",
       "version": "0.2.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @ms-cloudpack/overlay
 
-This log was last generated on Thu, 29 Sep 2022 17:46:14 GMT and should not be manually modified.
+This log was last generated on Wed, 05 Oct 2022 19:39:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.4.0
+
+Wed, 05 Oct 2022 19:39:05 GMT
+
+### Minor changes
+
+- Including pre-baked bundle artifact in package.json using `browser-esm` condition in exports map. (dzearing@microsoft.com)
+
+## 0.3.0
+
+Thu, 29 Sep 2022 22:52:40 GMT
+
+### Minor changes
+
+- Adding a browser pre-bundled entry for the overlay. (dzearing@microsoft.com)
+
 ## 0.2.0
 
-Thu, 29 Sep 2022 17:46:14 GMT
+Thu, 29 Sep 2022 17:46:30 GMT
 
 ### Minor changes
 

package/dist/lib/index.js

@@ -0,0 +1,1120 @@
+// src/index.tsx
+import React10 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 React8, { useCallback, useState as useState5, 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 { default as React7, useRef as useRef2 } from "react";
+
+// src/components/StatusDialog/StatusDialog.module.css
+var compiledModule2 = `.LpVwawaxeg-StatusDialogmodulecssoverlay {
+  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;
+  }
+}
+
+.LpVwawaxeg-StatusDialogmodulecsscommands {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+  padding: 0 20px;
+}
+
+.LpVwawaxeg-StatusDialogmodulecssdialog {
+  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;
+}
+
+.LpVwawaxeg-StatusDialogmodulecsstitleArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 8px 8px 20px;
+  gap: 8px;
+}
+
+.LpVwawaxeg-StatusDialogmodulecsscloseButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+}
+
+.LpVwawaxeg-StatusDialogmodulecsscloseButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.LpVwawaxeg-StatusDialogmodulecsscloseButton:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.LpVwawaxeg-StatusDialogmodulecsstitle {
+  flex-grow: 1;
+  font-size: 20px;
+  font-weight: 600;
+  color: rgb(0, 120, 212);
+  cursor: move;
+}
+`;
+var s2 = document.createElement("style");
+s2.setAttribute("data-sourceFile", "src/components/StatusDialog/StatusDialog.module.css");
+s2.appendChild(document.createTextNode(compiledModule2));
+document.head.appendChild(s2);
+var closeButton = "LpVwawaxeg-StatusDialogmodulecsscloseButton";
+var commands = "LpVwawaxeg-StatusDialogmodulecsscommands";
+var dialog = "LpVwawaxeg-StatusDialogmodulecssdialog";
+var overlay = "LpVwawaxeg-StatusDialogmodulecssoverlay";
+var title = "LpVwawaxeg-StatusDialogmodulecsstitle";
+var titleArea = "LpVwawaxeg-StatusDialogmodulecsstitleArea";
+var StatusDialog_module_default = { closeButton, commands, dialog, overlay, title, titleArea };
+
+// src/images/dismiss-16-filled.inline.svg
+var dismiss_16_filled_inline_default = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIuMzk3MDUgMi41NTM3OUwyLjQ2OTY3IDIuNDY5NjdDMi43MzU5NCAyLjIwMzQgMy4xNTI2IDIuMTc5MiAzLjQ0NjIxIDIuMzk3MDVMMy41MzAzMyAyLjQ2OTY3TDggNi45MzlMMTIuNDY5NyAyLjQ2OTY3QzEyLjc2MjYgMi4xNzY3OCAxMy4yMzc0IDIuMTc2NzggMTMuNTMwMyAyLjQ2OTY3QzEzLjgyMzIgMi43NjI1NiAxMy44MjMyIDMuMjM3NDQgMTMuNTMwMyAzLjUzMDMzTDkuMDYxIDhMMTMuNTMwMyAxMi40Njk3QzEzLjc5NjYgMTIuNzM1OSAxMy44MjA4IDEzLjE1MjYgMTMuNjAyOSAxMy40NDYyTDEzLjUzMDMgMTMuNTMwM0MxMy4yNjQxIDEzLjc5NjYgMTIuODQ3NCAxMy44MjA4IDEyLjU1MzggMTMuNjAyOUwxMi40Njk3IDEzLjUzMDNMOCA5LjA2MUwzLjUzMDMzIDEzLjUzMDNDMy4yMzc0NCAxMy44MjMyIDIuNzYyNTYgMTMuODIzMiAyLjQ2OTY3IDEzLjUzMDNDMi4xNzY3OCAxMy4yMzc0IDIuMTc2NzggMTIuNzYyNiAyLjQ2OTY3IDEyLjQ2OTdMNi45MzkgOEwyLjQ2OTY3IDMuNTMwMzNDMi4yMDM0IDMuMjY0MDYgMi4xNzkyIDIuODQ3NCAyLjM5NzA1IDIuNTUzNzlMMi40Njk2NyAyLjQ2OTY3TDIuMzk3MDUgMi41NTM3OVoiIGZpbGw9IiMyMTIxMjEiLz4KPC9zdmc+Cg==";
+
+// 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 compiledModule3 = `.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 s3 = document.createElement("style");
+s3.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskResultItem.module.css");
+s3.appendChild(document.createTextNode(compiledModule3));
+document.head.appendChild(s3);
+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 titleArea2 = "mGnoEIJOyo-TaskResultItemmodulecsstitleArea";
+var TaskResultItem_module_default = { actionArea, content, file, root, statusBar, text, titleArea: titleArea2 };
+
+// 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 compiledModule4 = `.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;
+  text-transform: capitalize;
+}
+
+.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 s4 = document.createElement("style");
+s4.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskStatus.module.css");
+s4.appendChild(document.createTextNode(compiledModule4));
+document.head.appendChild(s4);
+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 title2 = "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: title2, 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 compiledModule5 = `.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 s5 = document.createElement("style");
+s5.setAttribute("data-sourceFile", "src/components/StatusDialog/TaskList.module.css");
+s5.appendChild(document.createTextNode(compiledModule5));
+document.head.appendChild(s5);
+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 compiledModule6 = `.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 s6 = document.createElement("style");
+s6.setAttribute("data-sourceFile", "src/components/Button/Button.module.css");
+s6.appendChild(document.createTextNode(compiledModule6));
+document.head.appendChild(s6);
+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/StatusDialog/StatusDialog.tsx
+function StatusDialogUnmemoized({ onClose }) {
+  const draggableRef = useRef2(null);
+  const draggableTargetRef = useRef2(null);
+  const cloudpack = useCloudpack();
+  useDraggable(draggableRef, draggableTargetRef);
+  const restartTasks = () => {
+    cloudpack.restartTasks();
+  };
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: StatusDialog_module_default.overlay
+  }, /* @__PURE__ */ React7.createElement("div", {
+    ref: draggableRef,
+    className: StatusDialog_module_default.dialog
+  }, /* @__PURE__ */ React7.createElement("div", {
+    className: StatusDialog_module_default.titleArea
+  }, /* @__PURE__ */ React7.createElement("div", {
+    ref: draggableTargetRef,
+    className: StatusDialog_module_default.title
+  }, "Task results"), /* @__PURE__ */ React7.createElement("button", {
+    className: StatusDialog_module_default.closeButton,
+    onClick: onClose
+  }, /* @__PURE__ */ React7.createElement("img", {
+    src: dismiss_16_filled_inline_default,
+    alt: ""
+  }))), /* @__PURE__ */ React7.createElement("div", {
+    className: StatusDialog_module_default.commands
+  }, /* @__PURE__ */ React7.createElement(Button, {
+    primary: true,
+    onClick: restartTasks
+  }, "Restart all tasks")), /* @__PURE__ */ React7.createElement(TaskList, null)));
+}
+var StatusDialog = React7.memo(StatusDialogUnmemoized, (prev, next) => {
+  return prev.onClose === next.onClose;
+});
+
+// src/components/StatusOverlay/StatusOverlay.tsx
+function StatusOverlay() {
+  const [isExpanded, setIsExpanded] = useState5(false);
+  const status = useStatus();
+  const internal = useRef3();
+  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__ */ React8.createElement("div", null, !isExpanded && /* @__PURE__ */ React8.createElement(StatusBadge, {
+    onExpand: toggleMinimized
+  }), isExpanded && /* @__PURE__ */ React8.createElement(StatusDialog, {
+    onClose: toggleMinimized
+  }));
+}
+
+// src/components/ThemeProvider/ThemeProvider.tsx
+import React9 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__ */ React9.createElement("div", {
+    className: ThemeProvider_module_default.root
+  }, children);
+}
+
+// src/index.tsx
+var rootDiv = document.createElement("div");
+ReactDOM.render(
+  /* @__PURE__ */ React10.createElement(ThemeProvider, null, /* @__PURE__ */ React10.createElement(CloudpackProvider, null, /* @__PURE__ */ React10.createElement(StatusOverlay, null))),
+  rootDiv
+);
+document.body.appendChild(rootDiv);

package/dist/ori-input.json

@@ -0,0 +1,25 @@
+{
+  "absWorkingDir": "/home/runner/work/cloudpack/cloudpack/packages/overlay",
+  "outbase": "lib",
+  "outdir": "/home/runner/work/cloudpack/cloudpack/packages/overlay/dist/lib",
+  "entryPoints": {
+    "index": "./src/index.tsx"
+  },
+  "external": [
+    "@ms-cloudpack/data-bus",
+    "react",
+    "react-dom",
+    "classnames",
+    "@ms-cloudpack/eslint-config-base",
+    "@ms-cloudpack/scripts",
+    "@types/react-dom",
+    "@types/react"
+  ],
+  "splitting": true,
+  "metafile": true,
+  "define": {
+    "global": "window",
+    "process.env.NODE_ENV": "\"dev\""
+  },
+  "minify": false
+}

package/dist/ori-output.json

@@ -0,0 +1,12 @@
+{
+  "type": "buildStatus",
+  "buildId": "55e0c497-aac9-4534-84c2-2af0c3328d62",
+  "buildStatus": "complete",
+  "internalError": null,
+  "warnings": [],
+  "errors": [],
+  "outputFilePaths": [
+    "/home/runner/work/cloudpack/cloudpack/packages/overlay/dist/lib/index.js"
+  ],
+  "metafile": "{\n  \"inputs\": {\n    \"src/components/CloudpackProvider/getCookies.ts\": {\n      \"bytes\": 452,\n      \"imports\": []\n    },\n    \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n      \"bytes\": 3807,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/getCookies.ts\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n      \"bytes\": 552,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/createCloudpackClient.ts\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/hooks/useDraggable.ts\": {\n      \"bytes\": 2050,\n      \"imports\": []\n    },\n    \"src/components/StatusBadge/StatusBadge.module.css\": {\n      \"bytes\": 3405,\n      \"imports\": []\n    },\n    \"src/components/CloudpackProvider/useStatus.ts\": {\n      \"bytes\": 866,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/images/open-16-filled.inline.svg\": {\n      \"bytes\": 852,\n      \"imports\": []\n    },\n    \"src/components/StatusBadge/StatusBadge.tsx\": {\n      \"bytes\": 2867,\n      \"imports\": [\n        {\n          \"path\": \"src/hooks/useDraggable.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusBadge/StatusBadge.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/open-16-filled.inline.svg\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/StatusDialog.module.css\": {\n      \"bytes\": 2579,\n      \"imports\": []\n    },\n    \"src/images/dismiss-16-filled.inline.svg\": {\n      \"bytes\": 718,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskResultItem.module.css\": {\n      \"bytes\": 2067,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskResultItem.tsx\": {\n      \"bytes\": 1433,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskResultItem.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/TaskStatus.module.css\": {\n      \"bytes\": 3953,\n      \"imports\": []\n    },\n    \"src/images/error-24.inline.svg\": {\n      \"bytes\": 1024,\n      \"imports\": []\n    },\n    \"src/images/success-24.inline.svg\": {\n      \"bytes\": 562,\n      \"imports\": []\n    },\n    \"src/images/chevrondown-20.inline.svg\": {\n      \"bytes\": 450,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskStatus.tsx\": {\n      \"bytes\": 4225,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/TaskResultItem.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/error-24.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/success-24.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/chevrondown-20.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n      \"bytes\": 844,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/TaskList.module.css\": {\n      \"bytes\": 615,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskList.tsx\": {\n      \"bytes\": 1015,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/TaskStatus.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/useStatusDetails.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/Button/Button.module.css\": {\n      \"bytes\": 2080,\n      \"imports\": []\n    },\n    \"src/components/Button/Button.tsx\": {\n      \"bytes\": 360,\n      \"imports\": [\n        {\n          \"path\": \"src/components/Button/Button.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/StatusDialog.tsx\": {\n      \"bytes\": 1489,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/StatusDialog.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/hooks/useDraggable.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/dismiss-16-filled.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskList.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/Button/Button.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n      \"bytes\": 1145,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusBadge/StatusBadge.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/StatusDialog.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n      \"bytes\": 630,\n      \"imports\": []\n    },\n    \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n      \"bytes\": 210,\n      \"imports\": [\n        {\n          \"path\": \"src/components/ThemeProvider/ThemeProvider.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/index.tsx\": {\n      \"bytes\": 532,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusOverlay/StatusOverlay.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/ThemeProvider/ThemeProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    }\n  },\n  \"outputs\": {\n    \"dist/lib/index.js\": {\n      \"imports\": [],\n      \"exports\": [],\n      \"entryPoint\": \"src/index.tsx\",\n      \"inputs\": {\n        \"src/index.tsx\": {\n          \"bytesInOutput\": 360\n        },\n        \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n          \"bytesInOutput\": 372\n        },\n        \"src/components/CloudpackProvider/getCookies.ts\": {\n          \"bytesInOutput\": 317\n        },\n        \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n          \"bytesInOutput\": 2507\n        },\n        \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n          \"bytesInOutput\": 883\n        },\n        \"src/components/StatusBadge/StatusBadge.tsx\": {\n          \"bytesInOutput\": 3035\n        },\n        \"src/hooks/useDraggable.ts\": {\n          \"bytesInOutput\": 1937\n        },\n        \"src/components/StatusBadge/StatusBadge.module.css\": {\n          \"bytesInOutput\": 3118\n        },\n        \"src/components/CloudpackProvider/useStatus.ts\": {\n          \"bytesInOutput\": 448\n        },\n        \"src/images/open-16-filled.inline.svg\": {\n          \"bytesInOutput\": 1202\n        },\n        \"src/components/StatusDialog/StatusDialog.tsx\": {\n          \"bytesInOutput\": 1466\n        },\n        \"src/components/StatusDialog/StatusDialog.module.css\": {\n          \"bytesInOutput\": 2376\n        },\n        \"src/images/dismiss-16-filled.inline.svg\": {\n          \"bytesInOutput\": 1029\n        },\n        \"src/components/StatusDialog/TaskList.tsx\": {\n          \"bytesInOutput\": 750\n        },\n        \"src/components/StatusDialog/TaskStatus.tsx\": {\n          \"bytesInOutput\": 4697\n        },\n        \"src/components/StatusDialog/TaskResultItem.tsx\": {\n          \"bytesInOutput\": 1421\n        },\n        \"src/components/StatusDialog/TaskResultItem.module.css\": {\n          \"bytesInOutput\": 1894\n        },\n        \"src/components/StatusDialog/TaskStatus.module.css\": {\n          \"bytesInOutput\": 3690\n        },\n        \"src/images/error-24.inline.svg\": {\n          \"bytesInOutput\": 1428\n        },\n        \"src/images/success-24.inline.svg\": {\n          \"bytesInOutput\": 814\n        },\n        \"src/images/chevrondown-20.inline.svg\": {\n          \"bytesInOutput\": 666\n        },\n        \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n          \"bytesInOutput\": 299\n        },\n        \"src/components/StatusDialog/TaskList.module.css\": {\n          \"bytesInOutput\": 541\n        },\n        \"src/components/Button/Button.tsx\": {\n          \"bytesInOutput\": 312\n        },\n        \"src/components/Button/Button.module.css\": {\n          \"bytesInOutput\": 1942\n        },\n        \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n          \"bytesInOutput\": 189\n        },\n        \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n          \"bytesInOutput\": 561\n        }\n      },\n      \"bytes\": 40081\n    }\n  }\n}\n"
+}

package/dist/overlay.d.ts

@@ -0,0 +1 @@
+export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ms-cloudpack/overlay",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "The Cloudpack overlay ux.",
   "license": "MIT",
   "types": "./lib/index.d.ts",
@@ -8,6 +8,7 @@
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
+      "browser-esm": "./dist/lib/index.js",
       "import": "./lib/index.js"
     }
   },
@@ -16,6 +17,7 @@
     "api": "cloudpack-scripts api",
     "build:watch": "cloudpack-scripts build-watch",
     "build": "cloudpack-scripts build",
+    "bundle": "cloudpack bundle",
     "lint:update": "cloudpack-scripts lint-update",
     "lint": "cloudpack-scripts lint"
   },
@@ -32,6 +34,7 @@
     "@types/react": "17.0.50"
   },
   "files": [
-    "/lib"
+    "/lib",
+    "/dist"
   ]
 }