@ms-cloudpack/overlay 0.16.79-beta.0 → 0.16.79

package/dist/browser-esm/lib/index.js

@@ -0,0 +1,1339 @@
+import {
+  cookieNames,
+  elementIds
+} from "../chunks/js/chunk-PDWQRLCD.js";
+
+// packages/overlay/src/index.tsx
+import React15 from "react";
+import ReactDOM from "react-dom";
+
+// packages/overlay/src/components/CloudpackProvider/CloudpackProvider.tsx
+import React, { createContext, useState, useContext } from "react";
+
+// packages/overlay/src/components/CloudpackProvider/getCookies.ts
+function getCookies() {
+  return document.cookie.split(";").map((s9) => s9.split("=")).reduce((current, nextValue) => {
+    const name2 = nextValue[0]?.trim();
+    const value3 = decodeURIComponent(nextValue[1]?.trim());
+    if (name2 && value3) {
+      current[name2] = value3;
+    }
+    return current;
+  }, {});
+}
+
+// packages/overlay/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({ type: "subscribe", data: { path, id } });
+    },
+    onDeactivate: ({ path }) => {
+      const pathString = path.join("/");
+      const id = subIds[pathString];
+      delete subIds[pathString];
+      sendMessage({ type: "unsubscribe", data: { path, id } });
+    }
+  });
+  const enqueuedMessages = [];
+  const sessionId = cookies[cookieNames.sessionId];
+  const apiUrl = cookies[cookieNames.apiUrl];
+  const currentSequence = cookies[cookieNames.sessionSequence];
+  let socket;
+  let idCount = 0;
+  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 sendMessage(options) {
+    const { type, requestId, data } = options;
+    const message = JSON.stringify({ type, requestId, data });
+    if (socket) {
+      socket.send(message);
+    } else {
+      enqueuedMessages.push(message);
+    }
+  }
+  const activeRequests = {};
+  function sendRequest(options) {
+    const { type, data } = options;
+    const requestId = `${idCount++}`;
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        if (activeRequests[requestId]) {
+          reject(new Error("Request timed out."));
+        }
+      }, 1e4);
+      activeRequests[requestId] = {
+        resolve: (resultData) => {
+          delete activeRequests[requestId];
+          clearTimeout(timeoutId);
+          resolve(resultData);
+        },
+        reject: (error3) => {
+          delete activeRequests[requestId];
+          clearTimeout(timeoutId);
+          reject(error3);
+        }
+      };
+      sendMessage({ type, requestId, data });
+    });
+  }
+  function onMessageReceived(message) {
+    const response = JSON.parse(message.data);
+    const requestId = response.requestId;
+    if (requestId !== void 0) {
+      activeRequests[requestId].resolve(response.data);
+      return;
+    }
+    switch (response.type) {
+      case "notify": {
+        const { path, data } = response;
+        bus.publish(path, data);
+        break;
+      }
+      case "reload": {
+        window.location.reload();
+        break;
+      }
+      case "sequence": {
+        const { sequence } = response;
+        if (Number(sequence) > Number(currentSequence)) {
+          window.location.reload();
+        }
+        break;
+      }
+    }
+  }
+  openConnection();
+  const client = {
+    dispose: () => {
+      socket?.close();
+      socket = void 0;
+    },
+    getValue: (path) => {
+      return bus.getData(path);
+    },
+    open: (options) => {
+      sendMessage({ type: "open", data: options });
+    },
+    openSource: (options) => {
+      sendMessage({ type: "openSource", data: options });
+    },
+    subscribe: (path, callback) => {
+      return bus.subscribe(path, callback);
+    },
+    editConfig: () => {
+      sendMessage({ type: "editConfig", data: {} });
+    },
+    addOverride: (options) => {
+      sendMessage({ type: "addOverride", data: options });
+    },
+    restartTask: (options) => {
+      sendMessage({ type: "restartTask", data: options });
+    },
+    restartAllTasks: () => {
+      sendMessage({ type: "restartAllTasks", data: {} });
+    },
+    validateOverride: (options) => {
+      return sendRequest({ type: "validateOverride", data: options });
+    },
+    reportMetric: (options) => {
+      sendMessage({ type: "reportMetric", data: options });
+    }
+  };
+  return client;
+}
+
+// packages/overlay/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);
+
+// packages/overlay/src/components/StatusOverlay/StatusOverlay.tsx
+import React13, { useCallback as useCallback3, useState as useState7, useRef as useRef3 } from "react";
+
+// packages/overlay/src/components/StatusBadge/StatusBadge.tsx
+import React2, { useCallback, useRef, useState as useState4 } from "react";
+
+// packages/overlay/src/hooks/useDraggable.ts
+import { useEffect, useState as useState2 } from "react";
+function useDraggable(options) {
+  const { enabled, containerElementRef, dragElementRef } = options;
+  const [isDragging, setIsDragging] = useState2(false);
+  useEffect(() => {
+    const moveTarget = containerElementRef?.current;
+    const dragTarget = dragElementRef?.current;
+    if (!enabled || !moveTarget || !dragTarget) {
+      return;
+    }
+    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);
+    };
+  }, [enabled, containerElementRef, dragElementRef]);
+  return {
+    isDragging
+  };
+}
+
+// packages/overlay/src/components/StatusBadge/StatusBadge.module.css
+var compiledModule = `.uHuWYf-StatusBadgemodule--fixedOverlay {
+  position: fixed;
+  pointer-events: none;
+  background: transparent;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+  overflow: hidden;
+}
+
+.uHuWYf-StatusBadgemodule--gripArea {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  height: 100%;
+  width: 12px;
+  cursor: move;
+  margin-right: -4px;
+}
+
+.uHuWYf-StatusBadgemodule--grip {
+  width: 2px;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.uHuWYf-StatusBadgemodule--contentSurface {
+  pointer-events: auto;
+  display: contents;
+}
+
+.uHuWYf-StatusBadgemodule--badge {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  font-size: 12px;
+  display: inline-flex;
+  gap: 8px;
+  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: 3px;
+  padding-right: 8px;
+
+  transition: background-color 0.2s ease-in-out;
+}
+
+.uHuWYf-StatusBadgemodule--inline {
+  flex-shrink: 0;
+  position: relative;
+  bottom: auto;
+  right: auto;
+  top: auto;
+  left: auto;
+  box-shadow: none;
+  padding-left: 8px;
+}
+
+.uHuWYf-StatusBadgemodule--building {
+  background: #bbb;
+  color: #000;
+}
+
+.uHuWYf-StatusBadgemodule--success {
+  background: #7ad17a;
+  color: #000;
+}
+
+.uHuWYf-StatusBadgemodule--warning {
+  background: #e4e68b;
+  color: #000;
+}
+
+.uHuWYf-StatusBadgemodule--error {
+  background: #ffb9b9;
+  color: #000;
+}
+
+.uHuWYf-StatusBadgemodule--button {
+  cursor: pointer;
+  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;
+}
+
+.uHuWYf-StatusBadgemodule--button:hover {
+  filter: invert(0.1);
+}
+
+.uHuWYf-StatusBadgemodule--value {
+  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;
+}
+
+.uHuWYf-StatusBadgemodule--metric {
+  margin-left: 2px;
+}
+
+.uHuWYf-StatusBadgemodule--collapsed {
+  overflow: hidden;
+  padding: 0;
+}
+.uHuWYf-StatusBadgemodule--collapsed *:not(.uHuWYf-StatusBadgemodule--chevron) {
+  display: none;
+}
+
+.uHuWYf-StatusBadgemodule--chevron {
+  padding: 0 3px;
+}
+`;
+var s = document.createElement("style");
+s.setAttribute("data-sourceFile", "packages/overlay/src/components/StatusBadge/StatusBadge.module.css");
+s.appendChild(document.createTextNode(compiledModule));
+document.head.appendChild(s);
+var badge = "uHuWYf-StatusBadgemodule--badge";
+var building = "uHuWYf-StatusBadgemodule--building";
+var button = "uHuWYf-StatusBadgemodule--button";
+var chevron = "uHuWYf-StatusBadgemodule--chevron";
+var collapsed = "uHuWYf-StatusBadgemodule--collapsed";
+var contentSurface = "uHuWYf-StatusBadgemodule--contentSurface";
+var error = "uHuWYf-StatusBadgemodule--error";
+var fixedOverlay = "uHuWYf-StatusBadgemodule--fixedOverlay";
+var grip = "uHuWYf-StatusBadgemodule--grip";
+var gripArea = "uHuWYf-StatusBadgemodule--gripArea";
+var inline = "uHuWYf-StatusBadgemodule--inline";
+var metric = "uHuWYf-StatusBadgemodule--metric";
+var success = "uHuWYf-StatusBadgemodule--success";
+var value = "uHuWYf-StatusBadgemodule--value";
+var warning = "uHuWYf-StatusBadgemodule--warning";
+var StatusBadge_module_default = { badge, building, button, chevron, collapsed, contentSurface, error, fixedOverlay, grip, gripArea, inline, metric, success, value, warning };
+
+// packages/overlay/src/components/StatusBadge/StatusBadge.tsx
+import { default as cx } from "classnames";
+
+// packages/overlay/src/components/CloudpackProvider/useStatus.ts
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { taskStatsSource } from "@ms-cloudpack/api-server/client";
+var defaultStatus = {
+  status: "unknown",
+  remainingTasks: 0,
+  totalTasks: 0,
+  totalErrors: 0,
+  totalWarnings: 0
+};
+var useStatus = () => {
+  const service = useCloudpack();
+  const [status, setStatus] = useState3(() => service?.getValue(taskStatsSource) || defaultStatus);
+  useEffect2(() => service?.subscribe(taskStatsSource, setStatus), [service]);
+  return status;
+};
+
+// packages/overlay/src/components/StatusBadge/StatusBadge.tsx
+function StatusBadge({ inline: inline2, onExpand, pageLoadTime }) {
+  const badgeStatusKey = "cloudpack.badgeStatus";
+  const rootElementRef = useRef(null);
+  const dragElementRef = useRef(null);
+  const status = useStatus();
+  const [isCollapsed, setIsCollapsed] = useState4(!!localStorage.getItem(badgeStatusKey));
+  const shouldRender = status.status !== "unknown";
+  const toggleBadgeVisibility = useCallback(() => {
+    const newCollapsedState = !isCollapsed;
+    console.log("Status badge collapsed state:", newCollapsedState);
+    setIsCollapsed(newCollapsedState);
+    localStorage.setItem(badgeStatusKey, newCollapsedState ? "collapsed" : "");
+  }, [isCollapsed]);
+  useDraggable({
+    // If we're not yet able to render, don't enable dragging yet.
+    // Otherwise the event handlers won't be attached when the component renders.
+    enabled: shouldRender && !inline2,
+    containerElementRef: rootElementRef,
+    dragElementRef
+  });
+  if (!shouldRender) {
+    return null;
+  }
+  const metric2 = pageLoadTime ? /* @__PURE__ */ React2.createElement("span", { className: StatusBadge_module_default.metric, title: "Page Load Time" }, "in ", pageLoadTime.toFixed(2), " ms") : null;
+  const leftChevron = "\xAB";
+  const rightChevron = "\xBB";
+  const badge2 = /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      id: elementIds.statusBadgeRoot,
+      ref: rootElementRef,
+      className: `${getStatusClassName(status, !!inline2)} ${getCollapsedClassName(isCollapsed)}`
+    },
+    !inline2 && /* @__PURE__ */ React2.createElement("div", { ref: dragElementRef, className: StatusBadge_module_default.gripArea }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.grip }), /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.grip })),
+    /* @__PURE__ */ React2.createElement("button", { className: StatusBadge_module_default.button, onClick: onExpand, "aria-label": "Expand overlay" }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_module_default.value }, getStatusString(status))),
+    /* @__PURE__ */ React2.createElement("div", null, getStatsString(status), metric2),
+    /* @__PURE__ */ React2.createElement("button", { className: `${StatusBadge_module_default.button} ${StatusBadge_module_default.chevron}`, onClick: toggleBadgeVisibility }, isCollapsed ? leftChevron : rightChevron)
+  );
+  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, totalTasks, totalErrors, totalWarnings }, inline2) {
+  return cx(StatusBadge_module_default.badge, {
+    [StatusBadge_module_default.inline]: inline2,
+    [StatusBadge_module_default.building]: status === "pending",
+    [StatusBadge_module_default.success]: status === "idle" && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0,
+    [StatusBadge_module_default.error]: status === "idle" && totalErrors > 0,
+    [StatusBadge_module_default.warning]: status === "idle" && totalErrors === 0 && totalWarnings > 0
+  });
+}
+function getCollapsedClassName(isCollapsed) {
+  return cx(StatusBadge_module_default.badge, {
+    [StatusBadge_module_default.collapsed]: isCollapsed
+  });
+}
+function getStatsString({ totalTasks, remainingTasks, totalErrors, totalWarnings }) {
+  if (totalTasks === 0) {
+    return "";
+  }
+  return [
+    remainingTasks > 0 && `${remainingTasks} of ${totalTasks} tasks pending`,
+    remainingTasks === 0 && `${totalTasks} tasks completed`,
+    totalErrors === 1 && `${totalErrors} error`,
+    totalErrors > 1 && `${totalErrors} errors`,
+    totalWarnings === 1 && `${totalWarnings} warning`,
+    totalWarnings > 1 && `${totalWarnings} warnings`
+  ].filter(Boolean).join(", ");
+}
+
+// packages/overlay/src/components/StatusDialog/StatusDialog.tsx
+import React9, { useCallback as useCallback2 } from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskList.tsx
+import React6 from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskStatus.tsx
+import React5 from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskResultItem.tsx
+import React3 from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskResultItem.module.css
+var compiledModule2 = `.FSsdmcQ-TaskResultItemmodule--root {
+  display: flex;
+  background: #f5f5f5;
+}
+
+.FSsdmcQ-TaskResultItemmodule--statusBar {
+  flex-shrink: 0;
+  border-radius: 4px;
+  width: 4px;
+  background: #aa0000;
+  box-shadow: 2px 0 4px 0 rgb(220 0 0 / 20%);
+}
+
+.FSsdmcQ-TaskResultItemmodule--content {
+  padding: 8px;
+  display: flex;
+  flex-grow: 1;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.FSsdmcQ-TaskResultItemmodule--titleArea {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.FSsdmcQ-TaskResultItemmodule--file {
+  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;
+}
+
+.FSsdmcQ-TaskResultItemmodule--file:hover {
+  text-decoration: underline;
+}
+
+.FSsdmcQ-TaskResultItemmodule--actionArea {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.FSsdmcQ-TaskResultItemmodule--text {
+  word-wrap: break-word;
+  color: #333;
+}
+`;
+var s2 = document.createElement("style");
+s2.setAttribute("data-sourceFile", "packages/overlay/src/components/StatusDialog/TaskResultItem.module.css");
+s2.appendChild(document.createTextNode(compiledModule2));
+document.head.appendChild(s2);
+var actionArea = "FSsdmcQ-TaskResultItemmodule--actionArea";
+var content = "FSsdmcQ-TaskResultItemmodule--content";
+var file = "FSsdmcQ-TaskResultItemmodule--file";
+var root = "FSsdmcQ-TaskResultItemmodule--root";
+var statusBar = "FSsdmcQ-TaskResultItemmodule--statusBar";
+var text = "FSsdmcQ-TaskResultItemmodule--text";
+var titleArea = "FSsdmcQ-TaskResultItemmodule--titleArea";
+var TaskResultItem_module_default = { actionArea, content, file, root, statusBar, text, titleArea };
+
+// packages/overlay/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))));
+}
+
+// packages/overlay/src/components/StatusDialog/TaskStatus.module.css
+var compiledModule3 = `.WGSBzu-TaskStatusmodule--root {
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.25);
+}
+
+.WGSBzu-TaskStatusmodule--header {
+  display: flex;
+  gap: 8px;
+  padding: 8px 16px;
+  background: #f0f0f0;
+  align-items: center;
+  line-height: 1;
+}
+
+.WGSBzu-TaskStatusmodule--commands {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+  padding: 0 16px;
+}
+
+.WGSBzu-TaskStatusmodule--expandButton {
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+}
+.WGSBzu-TaskStatusmodule--expandButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.WGSBzu-TaskStatusmodule--expandButton:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.WGSBzu-TaskStatusmodule--expandIcon {
+  transition: transform 0.1s ease-in-out;
+}
+
+.WGSBzu-TaskStatusmodule--collapsed {
+  transform: rotate(-90deg);
+}
+
+.WGSBzu-TaskStatusmodule--farArea {
+  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;
+}
+
+.WGSBzu-TaskStatusmodule--title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.WGSBzu-TaskStatusmodule--subTitle {
+  font-size: 13px;
+}
+
+.WGSBzu-TaskStatusmodule--content {
+  border-top: 1px solid #ccc;
+  background: #fafafa;
+  padding: 8px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.WGSBzu-TaskStatusmodule--resultItems {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.WGSBzu-TaskStatusmodule--error {
+  background: #ffe9e9;
+}
+
+.WGSBzu-TaskStatusmodule--success {
+  background: #e9f9e9;
+}
+
+.WGSBzu-TaskStatusmodule--warning {
+  background: #fff9e9;
+}
+
+.WGSBzu-TaskStatusmodule--name {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.WGSBzu-TaskStatusmodule--value {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  color: #333;
+}
+
+.WGSBzu-TaskStatusmodule--linkButton {
+  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;
+}
+
+.WGSBzu-TaskStatusmodule--linkButton:hover {
+  text-decoration: underline;
+}
+`;
+var s3 = document.createElement("style");
+s3.setAttribute("data-sourceFile", "packages/overlay/src/components/StatusDialog/TaskStatus.module.css");
+s3.appendChild(document.createTextNode(compiledModule3));
+document.head.appendChild(s3);
+var collapsed2 = "WGSBzu-TaskStatusmodule--collapsed";
+var commands = "WGSBzu-TaskStatusmodule--commands";
+var content2 = "WGSBzu-TaskStatusmodule--content";
+var error2 = "WGSBzu-TaskStatusmodule--error";
+var expandButton = "WGSBzu-TaskStatusmodule--expandButton";
+var expandIcon = "WGSBzu-TaskStatusmodule--expandIcon";
+var farArea = "WGSBzu-TaskStatusmodule--farArea";
+var header = "WGSBzu-TaskStatusmodule--header";
+var linkButton = "WGSBzu-TaskStatusmodule--linkButton";
+var name = "WGSBzu-TaskStatusmodule--name";
+var resultItems = "WGSBzu-TaskStatusmodule--resultItems";
+var root2 = "WGSBzu-TaskStatusmodule--root";
+var subTitle = "WGSBzu-TaskStatusmodule--subTitle";
+var success2 = "WGSBzu-TaskStatusmodule--success";
+var title = "WGSBzu-TaskStatusmodule--title";
+var value2 = "WGSBzu-TaskStatusmodule--value";
+var warning2 = "WGSBzu-TaskStatusmodule--warning";
+var TaskStatus_module_default = { collapsed: collapsed2, commands, content: content2, error: error2, expandButton, expandIcon, farArea, header, linkButton, name, resultItems, root: root2, subTitle, success: success2, title, value: value2, warning: warning2 };
+
+// packages/overlay/src/components/StatusDialog/TaskStatus.tsx
+import { default as cx2 } from "classnames";
+
+// packages/overlay/src/images/error-24.inline.svg
+var error_24_inline_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM15.5303 8.46967L15.4462 8.39705C15.1852 8.2034 14.827 8.20101 14.5636 8.38988L14.4697 8.46967L12 10.939L9.53033 8.46967L9.44621 8.39705C9.18522 8.2034 8.82701 8.20101 8.56362 8.38988L8.46967 8.46967L8.39705 8.55379C8.2034 8.81478 8.20101 9.17299 8.38988 9.43638L8.46967 9.53033L10.939 12L8.46967 14.4697L8.39705 14.5538C8.2034 14.8148 8.20101 15.173 8.38988 15.4364L8.46967 15.5303L8.55379 15.6029C8.81478 15.7966 9.17299 15.799 9.43638 15.6101L9.53033 15.5303L12 13.061L14.4697 15.5303L14.5538 15.6029C14.8148 15.7966 15.173 15.799 15.4364 15.6101L15.5303 15.5303L15.6029 15.4462C15.7966 15.1852 15.799 14.827 15.6101 14.5636L15.5303 14.4697L13.061 12L15.5303 9.53033L15.6029 9.44621C15.7966 9.18522 15.799 8.82701 15.6101 8.56362L15.5303 8.46967L15.4462 8.39705L15.5303 8.46967Z" fill="%23aa0000"/>%0A</svg>%0A';
+
+// packages/overlay/src/images/success-24.inline.svg
+var success_24_inline_default = 'data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM15.2197 8.96967L10.75 13.4393L8.78033 11.4697C8.48744 11.1768 8.01256 11.1768 7.71967 11.4697C7.42678 11.7626 7.42678 12.2374 7.71967 12.5303L10.2197 15.0303C10.5126 15.3232 10.9874 15.3232 11.2803 15.0303L16.2803 10.0303C16.5732 9.73744 16.5732 9.26256 16.2803 8.96967C15.9874 8.67678 15.5126 8.67678 15.2197 8.96967Z" fill="%2300aa00"/>%0A</svg>%0A';
+
+// packages/overlay/src/images/chevrondown-20.inline.svg
+var chevrondown_20_inline_default = 'data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M15.794 7.73271C16.0797 8.03263 16.0681 8.50737 15.7682 8.79306L10.5178 13.7944C10.2281 14.0703 9.77285 14.0703 9.48318 13.7944L4.23271 8.79306C3.93279 8.50737 3.92125 8.03263 4.20694 7.73271C4.49264 7.43279 4.96737 7.42125 5.26729 7.70694L10.0005 12.2155L14.7336 7.70694C15.0336 7.42125 15.5083 7.43279 15.794 7.73271Z" fill="%23212121"/>%0A</svg>%0A';
+
+// packages/overlay/src/components/Button/Button.tsx
+import React4 from "react";
+
+// packages/overlay/src/components/Button/Button.module.css
+var compiledModule4 = `.RpmxvThK-Buttonmodule--standardButton {
+  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;
+}
+
+.RpmxvThK-Buttonmodule--standardButton:active {
+  background-color: rgb(237, 235, 233);
+  color: rgb(32, 31, 30);
+}
+
+.RpmxvThK-Buttonmodule--standardButton:hover {
+  background-color: rgb(243, 242, 241);
+  color: rgb(32, 31, 30);
+}
+
+.RpmxvThK-Buttonmodule--standardButton:focus {
+  border: 3px solid rgb(0, 0, 0);
+}
+
+.RpmxvThK-Buttonmodule--primaryButton {
+  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;
+}
+
+.RpmxvThK-Buttonmodule--primaryButton:active {
+  background-color: rgb(0, 90, 158);
+  border: 1px solid rgb(0, 90, 158);
+  color: rgb(255, 255, 255);
+}
+
+.RpmxvThK-Buttonmodule--primaryButton:hover {
+  background-color: rgb(16, 110, 190);
+  border: 1px solid rgb(16, 110, 190);
+  color: rgb(255, 255, 255);
+}
+
+.RpmxvThK-Buttonmodule--primaryButton:focus {
+  border: 3px solid rgb(0, 0, 0);
+}
+`;
+var s4 = document.createElement("style");
+s4.setAttribute("data-sourceFile", "packages/overlay/src/components/Button/Button.module.css");
+s4.appendChild(document.createTextNode(compiledModule4));
+document.head.appendChild(s4);
+var primaryButton = "RpmxvThK-Buttonmodule--primaryButton";
+var standardButton = "RpmxvThK-Buttonmodule--standardButton";
+var Button_module_default = { primaryButton, standardButton };
+
+// packages/overlay/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__ */ React4.createElement("button", { ...other, className, type: "button" });
+}
+
+// packages/overlay/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] = React5.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
+    });
+  };
+  const restartTask = () => {
+    cloudpack.restartTask({ id: task.id, inputPath: task.inputPath });
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.root }, /* @__PURE__ */ React5.createElement("div", { className: getHeaderClassName(task) }, /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      className: TaskStatus_module_default.expandButton,
+      onClick: () => setIsOpen(!showContent),
+      "aria-label": showContent ? `Minimize ${name2}` : `Expand ${name2}`
+    },
+    /* @__PURE__ */ React5.createElement(
+      "img",
+      {
+        className: cx2(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
+        src: chevrondown_20_inline_default,
+        alt: "Chevron down icon"
+      }
+    )
+  ), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: success_24_inline_default, alt: "Success icon" }), errors?.length > 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, name2), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.farArea }, getCompletion(task))), showContent && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.commands }, /* @__PURE__ */ React5.createElement(Button, { onClick: restartTask }, "Restart task")), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.content }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Details"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Input path"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.value }, /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(task.inputPath) }, task.inputPath), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: openPackage }, "(Package.json)"))), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Output path"), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(task.outputPath) }, task.outputPath)), errors?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Errors"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, errors.map((error3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: error3, projectPath: task.inputPath, index: index + 1 })))), warnings?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Warnings"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, warnings.map((warning3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: warning3, projectPath: task.inputPath, index: index + 1 })))))));
+}
+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
+  });
+}
+
+// packages/overlay/src/components/CloudpackProvider/useStatusDetails.ts
+import { useEffect as useEffect3, useState as useState5 } from "react";
+import { taskListSource } from "@ms-cloudpack/api-server/client";
+var useStatusDetails = () => {
+  const service = useCloudpack();
+  const [details, setDetails] = useState5({ tasks: [] });
+  useEffect3(() => service?.subscribe(taskListSource, setDetails), [service]);
+  return details;
+};
+
+// packages/overlay/src/components/StatusDialog/TaskList.module.css
+var compiledModule5 = `.ZnVPBoZ-TaskListmodule--root {
+  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", "packages/overlay/src/components/StatusDialog/TaskList.module.css");
+s5.appendChild(document.createTextNode(compiledModule5));
+document.head.appendChild(s5);
+var root3 = "ZnVPBoZ-TaskListmodule--root";
+var TaskList_module_default = { root: root3 };
+
+// packages/overlay/src/components/StatusDialog/TaskList.tsx
+function TaskList({ searchFilter, issuesOnly }) {
+  const details = useStatusDetails();
+  const tasks = (details.tasks || []).sort(sortTasks);
+  let filteredTasks = tasks;
+  if (searchFilter) {
+    searchFilter = searchFilter.toLowerCase();
+    filteredTasks = filteredTasks.filter(({ name: name2 }) => searchFilter && name2.toLowerCase().includes(searchFilter));
+  }
+  if (issuesOnly) {
+    filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);
+  }
+  return /* @__PURE__ */ React6.createElement("div", { className: TaskList_module_default.root }, filteredTasks.map((task) => /* @__PURE__ */ React6.createElement(TaskStatus, { key: task.name, 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;
+}
+
+// packages/overlay/src/components/Dialog/Dialog.tsx
+import { default as React7, useRef as useRef2 } from "react";
+
+// packages/overlay/src/components/Dialog/Dialog.module.css
+var compiledModule6 = `.XZLLsVjN-Dialogmodule--overlay {
+  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;
+  }
+}
+
+.XZLLsVjN-Dialogmodule--commands {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  flex-shrink: 0;
+  height: 40px;
+  padding: 0 20px;
+}
+
+.XZLLsVjN-Dialogmodule--dialog {
+  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;
+}
+
+.XZLLsVjN-Dialogmodule--titleArea {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px 8px 8px 20px;
+  gap: 8px;
+}
+
+.XZLLsVjN-Dialogmodule--closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+}
+
+.XZLLsVjN-Dialogmodule--closeButton:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.XZLLsVjN-Dialogmodule--closeButton:active {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.XZLLsVjN-Dialogmodule--title {
+  flex-grow: 1;
+  font-size: 20px;
+  font-weight: 600;
+  color: rgb(0, 120, 212);
+}
+`;
+var s6 = document.createElement("style");
+s6.setAttribute("data-sourceFile", "packages/overlay/src/components/Dialog/Dialog.module.css");
+s6.appendChild(document.createTextNode(compiledModule6));
+document.head.appendChild(s6);
+var closeButton = "XZLLsVjN-Dialogmodule--closeButton";
+var commands2 = "XZLLsVjN-Dialogmodule--commands";
+var dialog = "XZLLsVjN-Dialogmodule--dialog";
+var overlay = "XZLLsVjN-Dialogmodule--overlay";
+var title2 = "XZLLsVjN-Dialogmodule--title";
+var titleArea2 = "XZLLsVjN-Dialogmodule--titleArea";
+var Dialog_module_default = { closeButton, commands: commands2, dialog, overlay, title: title2, titleArea: titleArea2 };
+
+// packages/overlay/src/images/dismiss-16-filled.inline.svg
+var dismiss_16_filled_inline_default = 'data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">%0A<path d="M2.39705 2.55379L2.46967 2.46967C2.73594 2.2034 3.1526 2.1792 3.44621 2.39705L3.53033 2.46967L8 6.939L12.4697 2.46967C12.7626 2.17678 13.2374 2.17678 13.5303 2.46967C13.8232 2.76256 13.8232 3.23744 13.5303 3.53033L9.061 8L13.5303 12.4697C13.7966 12.7359 13.8208 13.1526 13.6029 13.4462L13.5303 13.5303C13.2641 13.7966 12.8474 13.8208 12.5538 13.6029L12.4697 13.5303L8 9.061L3.53033 13.5303C3.23744 13.8232 2.76256 13.8232 2.46967 13.5303C2.17678 13.2374 2.17678 12.7626 2.46967 12.4697L6.939 8L2.46967 3.53033C2.2034 3.26406 2.1792 2.8474 2.39705 2.55379L2.46967 2.46967L2.39705 2.55379Z" fill="%23212121"/>%0A</svg>%0A';
+
+// packages/overlay/src/components/Dialog/Dialog.tsx
+function Dialog({ title: title3, id, style, draggable, onClose, commands: commands3, 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({
+    enabled: !!draggable,
+    containerElementRef: draggableRef,
+    dragElementRef: draggableTargetRef
+  });
+  return /* @__PURE__ */ React7.createElement("div", { id, 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, "aria-label": "Minimize overlay" }, /* @__PURE__ */ React7.createElement("img", { src: dismiss_16_filled_inline_default, alt: "" }))), commands3 && /* @__PURE__ */ React7.createElement("div", { className: Dialog_module_default.commands }, ...commands3), children));
+}
+
+// packages/overlay/src/components/StatusDialog/Searchbox.tsx
+import React8 from "react";
+
+// packages/overlay/src/components/StatusDialog/Searchbox.module.css
+var compiledModule7 = `.aJeqJtva-Searchboxmodule--searchbox {
+  position: absolute;
+  font-size: 14px;
+  font-weight: 400;
+  box-shadow: none;
+  padding: 0px 4px;
+  box-sizing: border-box;
+  color: rgb(50, 49, 48);
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  border-radius: 2px;
+  border: 1px solid rgb(96, 94, 92);
+  height: 32px;
+  min-width: 160px;
+  top: 52px;
+  right: 20px;
+}
+`;
+var s7 = document.createElement("style");
+s7.setAttribute("data-sourceFile", "packages/overlay/src/components/StatusDialog/Searchbox.module.css");
+s7.appendChild(document.createTextNode(compiledModule7));
+document.head.appendChild(s7);
+var searchbox = "aJeqJtva-Searchboxmodule--searchbox";
+var Searchbox_module_default = { searchbox };
+
+// packages/overlay/src/components/StatusDialog/Searchbox.tsx
+function Searchbox({ value: value3, onChange }) {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, typeof value3 === "string" && /* @__PURE__ */ React8.createElement("input", { type: "text", placeholder: "Search", className: Searchbox_module_default.searchbox, onChange, value: value3 }));
+}
+
+// packages/overlay/src/components/StatusDialog/StatusDialog.tsx
+function StatusDialog({ onClose }) {
+  const cloudpack = useCloudpack();
+  const [searchFilter, setSearchFilter] = React9.useState("");
+  const [issuesOnly, setIssuesOnly] = React9.useState(false);
+  const handleSearchChange = useCallback2((event) => {
+    event.preventDefault();
+    setSearchFilter(event.target.value);
+  }, []);
+  const restartAllTasks = () => {
+    cloudpack.restartAllTasks();
+  };
+  const toggleIssuesOnly = () => setIssuesOnly((value3) => !value3);
+  return /* @__PURE__ */ React9.createElement(
+    Dialog,
+    {
+      title: "Task results",
+      id: elementIds.statusDialogRoot,
+      draggable: true,
+      onClose,
+      commands: [
+        /* @__PURE__ */ React9.createElement(Button, { primary: true, onClick: restartAllTasks, key: "restart" }, "Restart all tasks"),
+        /* @__PURE__ */ React9.createElement(Button, { onClick: toggleIssuesOnly, key: "issues" }, issuesOnly ? "Show all tasks" : "Show tasks with issues")
+      ]
+    },
+    /* @__PURE__ */ React9.createElement(Searchbox, { value: searchFilter, onChange: handleSearchChange }),
+    /* @__PURE__ */ React9.createElement(TaskList, { searchFilter, issuesOnly })
+  );
+}
+
+// packages/overlay/src/components/ErrorDialog/ErrorDialog.tsx
+import { default as React11 } from "react";
+
+// packages/overlay/src/components/ErrorDialog/PathError.tsx
+import React10 from "react";
+import { default as cx3 } from "classnames";
+function PathError(props) {
+  const [showContent, setshowContent] = React10.useState(false);
+  const { packageName, importPath, issuerUrl, fixable } = props;
+  const cloudpack = useCloudpack();
+  const editConfig = () => {
+    cloudpack.editConfig();
+  };
+  const addOverride = () => {
+    cloudpack.addOverride({ packageName, importPath, issuerUrl });
+  };
+  return /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.root }, /* @__PURE__ */ React10.createElement("div", { className: cx3(TaskStatus_module_default.header, TaskStatus_module_default.error) }, /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      className: TaskStatus_module_default.expandButton,
+      onClick: () => setshowContent(!showContent),
+      "aria-label": showContent ? `Minimize ${packageName}/${importPath}` : `Expand ${packageName}/${importPath}`
+    },
+    /* @__PURE__ */ React10.createElement(
+      "img",
+      {
+        className: cx3(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
+        src: chevrondown_20_inline_default,
+        alt: "Chevron down icon"
+      }
+    )
+  ), /* @__PURE__ */ React10.createElement("img", { className: TaskStatus_module_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.title }, `${packageName}/${importPath}`)), showContent && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.commands }, fixable && /* @__PURE__ */ React10.createElement(Button, { onClick: addOverride }, "Add override"), /* @__PURE__ */ React10.createElement(Button, { onClick: editConfig }, "Edit config file")), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.content }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.title }, "Details"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.name }, "Problem"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.value }, importPath === "." ? `An unrecognized package "${packageName}" was imported.` : `Path "${importPath}" was imported from package "${packageName}" but was not recognized as an exported path.`)), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.name }, "Solution"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.value }, fixable ? `Remove the path from the import in your source. (Import from "${packageName}" rather than "${packageName}/${importPath}")` : importPath === "." ? `Make sure the package name is valid.` : `Import not found on package. Make sure the import path is valid.`)))));
+}
+
+// packages/overlay/src/components/ErrorDialog/ErrorDialog.tsx
+function ErrorDialog({ unsupported }) {
+  const cloudpack = useCloudpack();
+  const reload = () => {
+    cloudpack.restartAllTasks();
+  };
+  return /* @__PURE__ */ React11.createElement(
+    Dialog,
+    {
+      title: "Found unsupported paths in your project",
+      id: elementIds.errorDialogRoot,
+      style: "error",
+      commands: [
+        /* @__PURE__ */ React11.createElement(Button, { primary: true, onClick: reload, key: "1" }, "Restart all tasks")
+      ]
+    },
+    /* @__PURE__ */ React11.createElement("div", { className: TaskList_module_default.root }, unsupported.map((data, index) => /* @__PURE__ */ React11.createElement(PathError, { ...data, key: index })))
+  );
+}
+
+// packages/overlay/src/components/ErrorDialog/useErrorEvents.ts
+import { useEffect as useEffect4, useState as useState6 } from "react";
+import { parseImportString } from "@ms-cloudpack/path-string-parsing";
+var reasonIsRecord = (event) => {
+  return typeof event.reason === "object" && !Array.isArray(event.reason) && event.reason !== null;
+};
+var hasMessage = (event) => {
+  return reasonIsRecord(event) && typeof event.reason.message === "string";
+};
+var useErrorEvents = () => {
+  const [errorEvents, setErrorEvents] = useState6({ unsupported: [] });
+  const cloudpack = useCloudpack();
+  useEffect4(() => {
+    const handleUnsupportedError = (message, issuerUrl) => {
+      const errorRegex = /[Mm]odule specifier,? ['"](.*?)['"]/;
+      const match = message.match(errorRegex);
+      if (match) {
+        const importString = parseImportString(match[1]);
+        const { packageName } = importString;
+        const importPath = importString.importPath.replace(/^\.\//, "");
+        (async () => {
+          const { fixable } = await cloudpack.validateOverride({ packageName, importPath, issuerUrl });
+          setErrorEvents((prev) => ({
+            ...prev,
+            unsupported: [...prev.unsupported, { packageName, importPath, issuerUrl, fixable }]
+          }));
+        })().catch(() => {
+        });
+      }
+    };
+    const pageErrors = window.__pageErrors;
+    pageErrors.unregister();
+    window.addEventListener("error", (event) => {
+      handleUnsupportedError(event.message, event.filename);
+    });
+    for (const error3 of pageErrors.uncaughtErrors) {
+      handleUnsupportedError(error3.message, error3.filename);
+    }
+    window.addEventListener("unhandledrejection", (event) => {
+      hasMessage(event) && handleUnsupportedError(event.reason.message);
+    });
+    for (const error3 of pageErrors.uncaughtRejections) {
+      hasMessage(error3) && handleUnsupportedError(error3.reason.message);
+    }
+  }, [cloudpack]);
+  return errorEvents;
+};
+
+// packages/overlay/src/hooks/usePageLoadTimeReporter.ts
+import React12 from "react";
+function usePageLoadTimeReporter() {
+  const [pageLoadTime, setPageLoadTime] = React12.useState();
+  const cloudpack = useCloudpack();
+  React12.useEffect(() => {
+    async function reportPageLoadTime() {
+      const { getPageLoadTime, getBrowserCacheRatio } = window.__cloudpack;
+      const newPageLoadTime = await getPageLoadTime();
+      setPageLoadTime(newPageLoadTime);
+      cloudpack.reportMetric({ metric: "PAGE_LOAD_TIME", value: newPageLoadTime });
+      cloudpack.reportMetric({ metric: "BROWSER_CACHE_RATIO", value: getBrowserCacheRatio() });
+    }
+    void reportPageLoadTime();
+  }, [cloudpack]);
+  return pageLoadTime;
+}
+
+// packages/overlay/src/components/StatusOverlay/StatusOverlay.tsx
+function StatusOverlay() {
+  const pageLoadTime = usePageLoadTimeReporter();
+  const [isExpanded, setIsExpanded] = useState7(false);
+  const status = useStatus();
+  const prevStatus = useRef3();
+  const { unsupported } = useErrorEvents();
+  React13.useEffect(() => {
+    if (!isExpanded && prevStatus.current?.status !== "idle" && status.status === "idle" && (prevStatus.current?.totalErrors || 0) !== (status.totalErrors || 0)) {
+      setIsExpanded(true);
+    }
+    prevStatus.current = status;
+  }, [status, isExpanded]);
+  const toggleMinimized = useCallback3(() => {
+    console.log(`Toggling minimized state to ${!isExpanded}`);
+    setIsExpanded(!isExpanded);
+  }, [isExpanded]);
+  return unsupported.length ? /* @__PURE__ */ React13.createElement(ErrorDialog, { unsupported }) : isExpanded ? /* @__PURE__ */ React13.createElement(StatusDialog, { onClose: toggleMinimized }) : /* @__PURE__ */ React13.createElement(StatusBadge, { onExpand: toggleMinimized, pageLoadTime });
+}
+
+// packages/overlay/src/components/ThemeProvider/ThemeProvider.tsx
+import React14 from "react";
+
+// packages/overlay/src/components/ThemeProvider/ThemeProvider.module.css
+var compiledModule8 = `.ASWLkl-ThemeProvidermodule--root {
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+}
+`;
+var s8 = document.createElement("style");
+s8.setAttribute("data-sourceFile", "packages/overlay/src/components/ThemeProvider/ThemeProvider.module.css");
+s8.appendChild(document.createTextNode(compiledModule8));
+document.head.appendChild(s8);
+var root4 = "ASWLkl-ThemeProvidermodule--root";
+var ThemeProvider_module_default = { root: root4 };
+
+// packages/overlay/src/components/ThemeProvider/ThemeProvider.tsx
+function ThemeProvider({ children }) {
+  return /* @__PURE__ */ React14.createElement("div", { className: ThemeProvider_module_default.root }, children);
+}
+
+// packages/overlay/src/index.tsx
+var rootDiv = document.createElement("div");
+rootDiv.id = elementIds.root;
+ReactDOM.render(
+  /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(CloudpackProvider, null, /* @__PURE__ */ React15.createElement(StatusOverlay, null))),
+  rootDiv
+);
+document.body.appendChild(rootDiv);
+//# sourceMappingURL=index.js.map