@ms-cloudpack/overlay 0.17.12 → 0.17.14

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

@@ -1,74 +1,22 @@
+import {
+  CloudpackProvider,
+  useCloudpack,
+  useDraggable
+} from "../chunks/js/chunk-7KHMDJ6G.js";
 import {
   cookieNames,
   elementIds
 } from "../chunks/js/chunk-PDWQRLCD.js";
 
 // packages/overlay/src/index.tsx
-import React15 from "react";
+import React5 from "react";
 import ReactDOM from "react-dom";
 
-// packages/overlay/src/components/CloudpackProvider/CloudpackProvider.tsx
-import React, { createContext, useContext } from "react";
-var CloudpackContext = createContext(null);
-function CloudpackProvider({ client, children }) {
-  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 useState6, useRef as useRef3 } from "react";
+import React3, { useCallback as useCallback2, useState as useState4, useRef as useRef2 } from "react";
 
 // packages/overlay/src/components/StatusBadge/StatusBadge.tsx
-import React2, { useCallback, useRef, useState as useState3 } from "react";
-
-// packages/overlay/src/hooks/useDraggable.ts
-import { useEffect, useState } from "react";
-function useDraggable(options) {
-  const { enabled, containerElementRef, dragElementRef } = options;
-  const [isDragging, setIsDragging] = useState(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
-  };
-}
+import React, { useCallback, useRef, useState as useState2 } from "react";
 
 // packages/overlay/src/components/StatusBadge/StatusBadge.module.css
 var compiledModule = `.uHuWYf-StatusBadgemodule--fixedOverlay {
@@ -227,7 +175,7 @@ var StatusBadge_default = { badge, building, button, chevron, collapsed, content
 import { default as cx } from "classnames";
 
 // packages/overlay/src/components/CloudpackProvider/useStatus.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import { useEffect, useState } from "react";
 import { taskStatsSource } from "@ms-cloudpack/api-server/browser";
 var defaultStatus = {
   status: "unknown",
@@ -238,8 +186,8 @@ var defaultStatus = {
 };
 var useStatus = () => {
   const cloudpack = useCloudpack();
-  const [status, setStatus] = useState2(defaultStatus);
-  useEffect2(() => {
+  const [status, setStatus] = useState(defaultStatus);
+  useEffect(() => {
     const subscription = cloudpack?.onDataChanged.subscribe(taskStatsSource, {
       onData: (data) => {
         setStatus(data);
@@ -258,7 +206,7 @@ function StatusBadge({ inline: inline2, onExpand, pageLoadTime }) {
   const rootElementRef = useRef(null);
   const dragElementRef = useRef(null);
   const status = useStatus();
-  const [isCollapsed, setIsCollapsed] = useState3(!!localStorage.getItem(badgeStatusKey));
+  const [isCollapsed, setIsCollapsed] = useState2(!!localStorage.getItem(badgeStatusKey));
   const shouldRender = status.status !== "unknown";
   const toggleBadgeVisibility = useCallback(() => {
     const newCollapsedState = !isCollapsed;
@@ -276,22 +224,22 @@ function StatusBadge({ inline: inline2, onExpand, pageLoadTime }) {
   if (!shouldRender) {
     return null;
   }
-  const metric2 = pageLoadTime ? /* @__PURE__ */ React2.createElement("span", { className: StatusBadge_default.metric, title: "Page Load Time" }, "in ", pageLoadTime.toFixed(2), " ms") : null;
+  const metric2 = pageLoadTime ? /* @__PURE__ */ React.createElement("span", { className: StatusBadge_default.metric, title: "Page Load Time" }, "in ", pageLoadTime.toFixed(2), " ms") : null;
   const leftChevron = "\xAB";
   const rightChevron = "\xBB";
-  const badge2 = /* @__PURE__ */ React2.createElement(
+  const badge2 = /* @__PURE__ */ React.createElement(
     "div",
     {
       id: elementIds.statusBadgeRoot,
       ref: rootElementRef,
       className: `${getStatusClassName(status, !!inline2)} ${getCollapsedClassName(isCollapsed)}`
     },
-    !inline2 && /* @__PURE__ */ React2.createElement("div", { ref: dragElementRef, className: StatusBadge_default.gripArea }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_default.grip }), /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_default.grip })),
-    /* @__PURE__ */ React2.createElement("button", { className: StatusBadge_default.button, onClick: onExpand, "aria-label": "Expand overlay" }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_default.value }, getStatusString(status))),
-    /* @__PURE__ */ React2.createElement("div", null, getStatsString(status), metric2),
-    /* @__PURE__ */ React2.createElement("button", { className: `${StatusBadge_default.button} ${StatusBadge_default.chevron}`, onClick: toggleBadgeVisibility }, isCollapsed ? leftChevron : rightChevron)
+    !inline2 && /* @__PURE__ */ React.createElement("div", { ref: dragElementRef, className: StatusBadge_default.gripArea }, /* @__PURE__ */ React.createElement("div", { className: StatusBadge_default.grip }), /* @__PURE__ */ React.createElement("div", { className: StatusBadge_default.grip })),
+    /* @__PURE__ */ React.createElement("button", { className: StatusBadge_default.button, onClick: onExpand, "aria-label": "Expand overlay" }, /* @__PURE__ */ React.createElement("div", { className: StatusBadge_default.value }, getStatusString(status))),
+    /* @__PURE__ */ React.createElement("div", null, getStatsString(status), metric2),
+    /* @__PURE__ */ React.createElement("button", { className: `${StatusBadge_default.button} ${StatusBadge_default.chevron}`, onClick: toggleBadgeVisibility }, isCollapsed ? leftChevron : rightChevron)
   );
-  return inline2 ? badge2 : /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_default.fixedOverlay }, /* @__PURE__ */ React2.createElement("div", { className: StatusBadge_default.contentSurface }, badge2));
+  return inline2 ? badge2 : /* @__PURE__ */ React.createElement("div", { className: StatusBadge_default.fixedOverlay }, /* @__PURE__ */ React.createElement("div", { className: StatusBadge_default.contentSurface }, badge2));
 }
 function getStatusString(status) {
   if (status.status === "pending") {
@@ -330,761 +278,8 @@ function getStatsString({ totalTasks, remainingTasks, totalErrors, totalWarnings
   ].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_default = { actionArea, content, file, root, statusBar, text, titleArea };
-
-// packages/overlay/src/components/StatusDialog/TaskResultItem.tsx
-function TaskResultItem({ item, projectPath, index }) {
-  const cloudpack = useCloudpack();
-  const openSource = (ev) => {
-    if (item.location) {
-      void cloudpack.openCodeEditor.mutate({
-        rootPath: projectPath,
-        relativePath: item.location?.file,
-        line: item.location?.line,
-        column: item.location?.column
-      });
-      ev.preventDefault();
-    }
-  };
-  const location = [item.location?.file || "(path unavailable)", item.location?.line, item.location?.column].filter(Boolean).join(":");
-  return /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_default.root }, /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_default.statusBar }), /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_default.content }, /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_default.titleArea }, /* @__PURE__ */ React3.createElement("button", { onClick: openSource, className: TaskResultItem_default.file }, index, ". ", location)), /* @__PURE__ */ React3.createElement("div", { className: TaskResultItem_default.text }, "[", item.source, "] ", item.text), /* @__PURE__ */ React3.createElement("pre", { className: TaskResultItem_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_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_default = { primaryButton, standardButton };
-
-// packages/overlay/src/components/Button/Button.tsx
-function Button(props) {
-  const { primary, ...other } = props;
-  const className = primary ? Button_default.primaryButton : Button_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 && errors?.length > 0;
-  const { inputPath, outputPath } = task;
-  const open = (rootPath) => {
-    void cloudpack.openFilePath.mutate({
-      rootPath
-    });
-  };
-  const openPackage = () => {
-    if (!inputPath) {
-      console.error("No input path for task", task);
-      return;
-    }
-    void cloudpack.openCodeEditor.mutate({
-      rootPath: inputPath,
-      relativePath: "package.json"
-    });
-  };
-  const restartTask = () => {
-    if (!inputPath) {
-      console.error("No input path for task", task);
-      return;
-    }
-    void cloudpack.restartTask.mutate({ id: task.id, inputPath });
-  };
-  return /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.root }, /* @__PURE__ */ React5.createElement("div", { className: getHeaderClassName(task) }, /* @__PURE__ */ React5.createElement(
-    "button",
-    {
-      className: TaskStatus_default.expandButton,
-      onClick: () => setIsOpen(!showContent),
-      "aria-label": showContent ? `Minimize ${name2}` : `Expand ${name2}`
-    },
-    /* @__PURE__ */ React5.createElement(
-      "img",
-      {
-        className: cx2(TaskStatus_default.expandIcon, !showContent && TaskStatus_default.collapsed),
-        src: chevrondown_20_inline_default,
-        alt: "Chevron down icon"
-      }
-    )
-  ), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_default.errorIcon, src: success_24_inline_default, alt: "Success icon" }), errors?.length > 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.title }, name2), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.farArea }, getCompletion(task))), showContent && (inputPath ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.commands }, /* @__PURE__ */ React5.createElement(Button, { onClick: restartTask }, "Restart task")), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.content }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.title }, "Details"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.name }, "Input path"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.value }, /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_default.linkButton, onClick: () => open(inputPath) }, task.inputPath), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_default.linkButton, onClick: openPackage }, "(Package.json)"))), outputPath && /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.name }, "Output path"), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_default.linkButton, onClick: () => open(outputPath) }, outputPath)), errors?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.title }, "Errors"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.resultItems }, errors.map((error3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: error3, projectPath: inputPath, index: index + 1 })))), warnings?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.title }, "Warnings"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.resultItems }, warnings.map((warning3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: warning3, projectPath: inputPath, index: index + 1 })))))) : /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_default.content }, "No input path found for task. This is a Cloudpack bug. Please report it.")));
-}
-function getHeaderClassName(task) {
-  const { errors = [], warnings = [] } = task;
-  return cx2(TaskStatus_default.header, {
-    [TaskStatus_default.success]: errors?.length === 0 && warnings?.length === 0,
-    [TaskStatus_default.warning]: errors?.length === 0 && warnings?.length > 0,
-    [TaskStatus_default.error]: errors?.length > 0
-  });
-}
-
-// packages/overlay/src/components/CloudpackProvider/useStatusDetails.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
-import { taskListSource } from "@ms-cloudpack/api-server/browser";
-var useStatusDetails = () => {
-  const cloudpack = useCloudpack();
-  const [details, setDetails] = useState4({ tasks: [] });
-  useEffect3(() => {
-    const subscription = cloudpack?.onDataChanged.subscribe(taskListSource, {
-      onData: (data) => {
-        setDetails(data);
-      }
-    });
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, [cloudpack]);
-  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_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_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;
-  }
-  if (a.name === void 0 && b.name === void 0) {
-    return a.id < b.id ? -1 : 1;
-  } else if (a.name === void 0) {
-    return 1;
-  } else if (b.name === void 0) {
-    return -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_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_default.overlay }, /* @__PURE__ */ React7.createElement("div", { ref: draggableRef, className: Dialog_default.dialog, style: { borderTopColor: colorAccent } }, /* @__PURE__ */ React7.createElement("div", { className: Dialog_default.titleArea }, /* @__PURE__ */ React7.createElement(
-    "div",
-    {
-      ref: draggableTargetRef,
-      className: Dialog_default.title,
-      style: { color: colorAccent, cursor: cursorDraggable }
-    },
-    title3
-  ), onClose && /* @__PURE__ */ React7.createElement("button", { className: Dialog_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_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_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_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 = () => {
-    void cloudpack.restartAllTasks.mutate();
-  };
-  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 = () => {
-    void cloudpack.openConfigEditor.mutate();
-  };
-  const addOverride = () => {
-    void cloudpack.addPackageOverride.mutate({ packageName, importPath, issuerUrl });
-  };
-  return /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_default.root }, /* @__PURE__ */ React10.createElement("div", { className: cx3(TaskStatus_default.header, TaskStatus_default.error) }, /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      className: TaskStatus_default.expandButton,
-      onClick: () => setshowContent(!showContent),
-      "aria-label": showContent ? `Minimize ${packageName}/${importPath}` : `Expand ${packageName}/${importPath}`
-    },
-    /* @__PURE__ */ React10.createElement(
-      "img",
-      {
-        className: cx3(TaskStatus_default.expandIcon, !showContent && TaskStatus_default.collapsed),
-        src: chevrondown_20_inline_default,
-        alt: "Chevron down icon"
-      }
-    )
-  ), /* @__PURE__ */ React10.createElement("img", { className: TaskStatus_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_default.title }, `${packageName}/${importPath}`)), showContent && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_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_default.content }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_default.title }, "Details"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_default.name }, "Problem"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_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_default.nameValueArea }, /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_default.name }, "Solution"), /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_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 = () => {
-    void cloudpack.restartAllTasks.mutate();
-  };
-  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_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 useState5 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 import { parseImportString } from "@ms-cloudpack/path-string-parsing";
 import { errorEntrySource } from "@ms-cloudpack/api-server/browser";
 var reasonIsRecord = (event) => {
@@ -1094,9 +289,9 @@ var hasMessage = (event) => {
   return reasonIsRecord(event) && typeof event.reason.message === "string";
 };
 var useErrorEvents = () => {
-  const [errorEvents, setErrorEvents] = useState5({ unsupported: [] });
+  const [errorEvents, setErrorEvents] = useState3({ unsupported: [] });
   const cloudpack = useCloudpack();
-  useEffect4(() => {
+  useEffect2(() => {
     const handleUnsupportedError = (message, issuerUrl) => {
       const errorRegex = /[Mm]odule specifier,? ['"](.*?)['"]/;
       const match = message.match(errorRegex);
@@ -1127,14 +322,14 @@ var useErrorEvents = () => {
     window.addEventListener("error", (event) => {
       handleUnsupportedError(event.message, event.filename);
     });
-    for (const error3 of pageErrors.uncaughtErrors) {
-      handleUnsupportedError(error3.message, error3.filename);
+    for (const error2 of pageErrors.uncaughtErrors) {
+      handleUnsupportedError(error2.message, error2.filename);
     }
     window.addEventListener("unhandledrejection", (event) => {
       hasMessage(event) && handleUnsupportedError(event.reason.message);
     });
-    for (const error3 of pageErrors.uncaughtRejections) {
-      hasMessage(error3) && handleUnsupportedError(error3.reason.message);
+    for (const error2 of pageErrors.uncaughtRejections) {
+      hasMessage(error2) && handleUnsupportedError(error2.reason.message);
     }
     return () => {
       subscription.unsubscribe();
@@ -1144,11 +339,11 @@ var useErrorEvents = () => {
 };
 
 // packages/overlay/src/hooks/usePageLoadTimeReporter.ts
-import React12 from "react";
+import React2 from "react";
 function usePageLoadTimeReporter() {
-  const [pageLoadTime, setPageLoadTime] = React12.useState();
+  const [pageLoadTime, setPageLoadTime] = React2.useState();
   const cloudpack = useCloudpack();
-  React12.useEffect(() => {
+  React2.useEffect(() => {
     async function reportPageLoadTime() {
       const { getPageLoadTime, getBrowserCacheRatio } = window.__cloudpack;
       const newPageLoadTime = await getPageLoadTime();
@@ -1162,30 +357,33 @@ function usePageLoadTimeReporter() {
 }
 
 // packages/overlay/src/components/StatusOverlay/StatusOverlay.tsx
+var StatusDialog = React3.lazy(() => import("../chunks/js/StatusDialog-J6LM3XZZ.js"));
+var ErrorDialog = React3.lazy(() => import("../chunks/js/ErrorDialog-744DEKEI.js"));
 function StatusOverlay() {
   const pageLoadTime = usePageLoadTimeReporter();
-  const [isExpanded, setIsExpanded] = useState6(false);
+  const [isExpanded, setIsExpanded] = useState4(false);
   const status = useStatus();
-  const prevStatus = useRef3();
+  const prevStatus = useRef2();
   const { unsupported } = useErrorEvents();
-  React13.useEffect(() => {
+  React3.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(() => {
+  const toggleMinimized = useCallback2(() => {
     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 });
+  const result = unsupported.length ? /* @__PURE__ */ React3.createElement(ErrorDialog, { unsupported }) : isExpanded ? /* @__PURE__ */ React3.createElement(StatusDialog, { onClose: toggleMinimized }) : /* @__PURE__ */ React3.createElement(StatusBadge, { onExpand: toggleMinimized, pageLoadTime });
+  return /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: null }, result);
 }
 
 // packages/overlay/src/components/ThemeProvider/ThemeProvider.tsx
-import React14 from "react";
+import React4 from "react";
 
 // packages/overlay/src/components/ThemeProvider/ThemeProvider.module.css
-var compiledModule8 = `.ASWLkl-ThemeProvidermodule--root {
+var compiledModule2 = `.ASWLkl-ThemeProvidermodule--root {
   font-family:
     Inter,
     -apple-system,
@@ -1201,16 +399,16 @@ var compiledModule8 = `.ASWLkl-ThemeProvidermodule--root {
     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_default = { root: root4 };
+var s2 = document.createElement("style");
+s2.setAttribute("data-sourceFile", "packages/overlay/src/components/ThemeProvider/ThemeProvider.module.css");
+s2.appendChild(document.createTextNode(compiledModule2));
+document.head.appendChild(s2);
+var root = "ASWLkl-ThemeProvidermodule--root";
+var ThemeProvider_default = { root };
 
 // packages/overlay/src/components/ThemeProvider/ThemeProvider.tsx
 function ThemeProvider({ children }) {
-  return /* @__PURE__ */ React14.createElement("div", { className: ThemeProvider_default.root }, children);
+  return /* @__PURE__ */ React4.createElement("div", { className: ThemeProvider_default.root }, children);
 }
 
 // packages/overlay/src/index.tsx
@@ -1218,11 +416,11 @@ import { createCloudpackClient, reloadCountSource } from "@ms-cloudpack/api-serv
 
 // 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 document.cookie.split(";").map((s3) => s3.split("=")).reduce((current, nextValue) => {
+    const name = nextValue[0]?.trim();
+    const value2 = decodeURIComponent(nextValue[1]?.trim());
+    if (name && value2) {
+      current[name] = value2;
     }
     return current;
   }, {});
@@ -1248,7 +446,7 @@ async function start() {
   const rootDiv = document.createElement("div");
   rootDiv.id = elementIds.root;
   ReactDOM.render(
-    /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(CloudpackProvider, { client }, /* @__PURE__ */ React15.createElement(StatusOverlay, null))),
+    /* @__PURE__ */ React5.createElement(ThemeProvider, null, /* @__PURE__ */ React5.createElement(CloudpackProvider, { client }, /* @__PURE__ */ React5.createElement(StatusOverlay, null))),
     rootDiv
   );
   document.body.appendChild(rootDiv);