@ms-cloudpack/overlay 0.3.0 → 0.5.0

package/dist/ori-input.json

@@ -1,8 +1,10 @@
 {
   "absWorkingDir": "/home/runner/work/cloudpack/cloudpack/packages/overlay",
-  "outbase": ".",
-  "outdir": "/home/runner/work/cloudpack/cloudpack/packages/overlay/dist",
-  "entryPoints": {},
+  "outbase": "lib",
+  "outdir": "/home/runner/work/cloudpack/cloudpack/packages/overlay/dist/lib",
+  "entryPoints": {
+    "index": "./src/index.tsx"
+  },
   "external": [
     "@ms-cloudpack/data-bus",
     "react",

package/dist/ori-output.json

@@ -1,10 +1,12 @@
 {
   "type": "buildStatus",
-  "buildId": "c9bcd198-08f7-4777-b19a-948a194a02e0",
+  "buildId": "cc1a4d0c-a726-4192-853d-c99634d24523",
   "buildStatus": "complete",
   "internalError": null,
   "warnings": [],
   "errors": [],
-  "outputFilePaths": [],
-  "metafile": "{\n  \"inputs\": {\n  },\n  \"outputs\": {\n  }\n}\n"
+  "outputFilePaths": [
+    "/home/runner/work/cloudpack/cloudpack/packages/overlay/dist/lib/index.js"
+  ],
+  "metafile": "{\n  \"inputs\": {\n    \"src/components/CloudpackProvider/getCookies.ts\": {\n      \"bytes\": 452,\n      \"imports\": []\n    },\n    \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n      \"bytes\": 3807,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/getCookies.ts\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n      \"bytes\": 552,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/createCloudpackClient.ts\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/hooks/useDraggable.ts\": {\n      \"bytes\": 2050,\n      \"imports\": []\n    },\n    \"src/components/StatusBadge/StatusBadge.module.css\": {\n      \"bytes\": 3405,\n      \"imports\": []\n    },\n    \"src/components/CloudpackProvider/useStatus.ts\": {\n      \"bytes\": 866,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/images/open-16-filled.inline.svg\": {\n      \"bytes\": 852,\n      \"imports\": []\n    },\n    \"src/components/StatusBadge/StatusBadge.tsx\": {\n      \"bytes\": 2867,\n      \"imports\": [\n        {\n          \"path\": \"src/hooks/useDraggable.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusBadge/StatusBadge.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/open-16-filled.inline.svg\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/TaskResultItem.module.css\": {\n      \"bytes\": 2067,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskResultItem.tsx\": {\n      \"bytes\": 1433,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskResultItem.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/TaskStatus.module.css\": {\n      \"bytes\": 3922,\n      \"imports\": []\n    },\n    \"src/images/error-24.inline.svg\": {\n      \"bytes\": 1024,\n      \"imports\": []\n    },\n    \"src/images/success-24.inline.svg\": {\n      \"bytes\": 562,\n      \"imports\": []\n    },\n    \"src/images/chevrondown-20.inline.svg\": {\n      \"bytes\": 450,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskStatus.tsx\": {\n      \"bytes\": 4225,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/TaskResultItem.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/error-24.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/success-24.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/chevrondown-20.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n      \"bytes\": 844,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/TaskList.module.css\": {\n      \"bytes\": 615,\n      \"imports\": []\n    },\n    \"src/components/StatusDialog/TaskList.tsx\": {\n      \"bytes\": 1015,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/TaskStatus.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/useStatusDetails.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/Button/Button.module.css\": {\n      \"bytes\": 2080,\n      \"imports\": []\n    },\n    \"src/components/Button/Button.tsx\": {\n      \"bytes\": 360,\n      \"imports\": [\n        {\n          \"path\": \"src/components/Button/Button.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/Dialog/Dialog.module.css\": {\n      \"bytes\": 2454,\n      \"imports\": []\n    },\n    \"src/images/dismiss-16-filled.inline.svg\": {\n      \"bytes\": 718,\n      \"imports\": []\n    },\n    \"src/components/Dialog/Dialog.tsx\": {\n      \"bytes\": 1525,\n      \"imports\": [\n        {\n          \"path\": \"src/components/Dialog/Dialog.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/hooks/useDraggable.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/dismiss-16-filled.inline.svg\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/StatusDialog/StatusDialog.tsx\": {\n      \"bytes\": 721,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/TaskList.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/Button/Button.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/Dialog/Dialog.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/ErrorDialog/PathError.tsx\": {\n      \"bytes\": 1750,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusDialog/TaskStatus.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/error-24.inline.svg\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/images/chevrondown-20.inline.svg\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/ErrorDialog/ErrorDialog.tsx\": {\n      \"bytes\": 996,\n      \"imports\": [\n        {\n          \"path\": \"src/components/Button/Button.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/ErrorDialog/PathError.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/TaskList.module.css\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/Dialog/Dialog.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/ErrorDialog/useErrorEvents.ts\": {\n      \"bytes\": 1265,\n      \"imports\": []\n    },\n    \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n      \"bytes\": 1437,\n      \"imports\": [\n        {\n          \"path\": \"src/components/StatusBadge/StatusBadge.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusDialog/StatusDialog.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/CloudpackProvider/useStatus.ts\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/ErrorDialog/ErrorDialog.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/ErrorDialog/useErrorEvents.ts\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n      \"bytes\": 630,\n      \"imports\": []\n    },\n    \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n      \"bytes\": 210,\n      \"imports\": [\n        {\n          \"path\": \"src/components/ThemeProvider/ThemeProvider.module.css\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    },\n    \"src/index.tsx\": {\n      \"bytes\": 532,\n      \"imports\": [\n        {\n          \"path\": \"src/components/CloudpackProvider/CloudpackProvider.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/StatusOverlay/StatusOverlay.tsx\",\n          \"kind\": \"import-statement\"\n        },\n        {\n          \"path\": \"src/components/ThemeProvider/ThemeProvider.tsx\",\n          \"kind\": \"import-statement\"\n        }\n      ]\n    }\n  },\n  \"outputs\": {\n    \"dist/lib/index.js\": {\n      \"imports\": [],\n      \"exports\": [],\n      \"entryPoint\": \"src/index.tsx\",\n      \"inputs\": {\n        \"src/index.tsx\": {\n          \"bytesInOutput\": 360\n        },\n        \"src/components/CloudpackProvider/CloudpackProvider.tsx\": {\n          \"bytesInOutput\": 372\n        },\n        \"src/components/CloudpackProvider/getCookies.ts\": {\n          \"bytesInOutput\": 317\n        },\n        \"src/components/CloudpackProvider/createCloudpackClient.ts\": {\n          \"bytesInOutput\": 2507\n        },\n        \"src/components/StatusOverlay/StatusOverlay.tsx\": {\n          \"bytesInOutput\": 1076\n        },\n        \"src/components/StatusBadge/StatusBadge.tsx\": {\n          \"bytesInOutput\": 3035\n        },\n        \"src/hooks/useDraggable.ts\": {\n          \"bytesInOutput\": 1937\n        },\n        \"src/components/StatusBadge/StatusBadge.module.css\": {\n          \"bytesInOutput\": 3118\n        },\n        \"src/components/CloudpackProvider/useStatus.ts\": {\n          \"bytesInOutput\": 448\n        },\n        \"src/images/open-16-filled.inline.svg\": {\n          \"bytesInOutput\": 1202\n        },\n        \"src/components/StatusDialog/StatusDialog.tsx\": {\n          \"bytesInOutput\": 484\n        },\n        \"src/components/StatusDialog/TaskList.tsx\": {\n          \"bytesInOutput\": 750\n        },\n        \"src/components/StatusDialog/TaskStatus.tsx\": {\n          \"bytesInOutput\": 4697\n        },\n        \"src/components/StatusDialog/TaskResultItem.tsx\": {\n          \"bytesInOutput\": 1421\n        },\n        \"src/components/StatusDialog/TaskResultItem.module.css\": {\n          \"bytesInOutput\": 1881\n        },\n        \"src/components/StatusDialog/TaskStatus.module.css\": {\n          \"bytesInOutput\": 3651\n        },\n        \"src/images/error-24.inline.svg\": {\n          \"bytesInOutput\": 1428\n        },\n        \"src/images/success-24.inline.svg\": {\n          \"bytesInOutput\": 814\n        },\n        \"src/images/chevrondown-20.inline.svg\": {\n          \"bytesInOutput\": 666\n        },\n        \"src/components/CloudpackProvider/useStatusDetails.ts\": {\n          \"bytesInOutput\": 299\n        },\n        \"src/components/StatusDialog/TaskList.module.css\": {\n          \"bytesInOutput\": 541\n        },\n        \"src/components/Button/Button.tsx\": {\n          \"bytesInOutput\": 312\n        },\n        \"src/components/Button/Button.module.css\": {\n          \"bytesInOutput\": 1942\n        },\n        \"src/components/Dialog/Dialog.tsx\": {\n          \"bytesInOutput\": 1399\n        },\n        \"src/components/Dialog/Dialog.module.css\": {\n          \"bytesInOutput\": 2280\n        },\n        \"src/images/dismiss-16-filled.inline.svg\": {\n          \"bytesInOutput\": 1029\n        },\n        \"src/components/ErrorDialog/ErrorDialog.tsx\": {\n          \"bytesInOutput\": 657\n        },\n        \"src/components/ErrorDialog/PathError.tsx\": {\n          \"bytesInOutput\": 2171\n        },\n        \"src/components/ErrorDialog/useErrorEvents.ts\": {\n          \"bytesInOutput\": 866\n        },\n        \"src/components/ThemeProvider/ThemeProvider.tsx\": {\n          \"bytesInOutput\": 191\n        },\n        \"src/components/ThemeProvider/ThemeProvider.module.css\": {\n          \"bytesInOutput\": 561\n        }\n      },\n      \"bytes\": 44489\n    }\n  }\n}\n"
 }

package/lib/components/Dialog/Dialog.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface DialogProps {
+    title: string;
+    style?: 'default' | 'error';
+    draggable?: boolean;
+    onClose?: () => void;
+    commands?: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare function Dialog({ title, style, draggable, onClose, commands, children }: DialogProps): JSX.Element;

package/lib/components/Dialog/Dialog.js

@@ -0,0 +1,20 @@
+import { default as React, useRef } from 'react';
+import styles from './Dialog.module.css';
+import { useDraggable } from '../../hooks/useDraggable.js';
+import CloseIcon from '../../images/dismiss-16-filled.inline.svg';
+export function Dialog({ title, style, draggable, onClose, commands, children }) {
+    const draggableRef = useRef(null);
+    const draggableTargetRef = useRef(null);
+    const colorAccent = style === 'error' ? 'rgb(164, 38, 44)' : undefined;
+    const cursorDraggable = draggable ? 'move' : undefined;
+    useDraggable(draggable ? draggableRef : undefined, draggable ? draggableTargetRef : undefined);
+    return (React.createElement("div", { className: styles.overlay },
+        React.createElement("div", { ref: draggableRef, className: styles.dialog, style: { borderTopColor: colorAccent } },
+            React.createElement("div", { className: styles.titleArea },
+                React.createElement("div", { ref: draggableTargetRef, className: styles.title, style: { color: colorAccent, cursor: cursorDraggable } }, title),
+                !!onClose && (React.createElement("button", { className: styles.closeButton, onClick: onClose },
+                    React.createElement("img", { src: CloseIcon, alt: "" })))),
+            !!commands && React.createElement("div", { className: styles.commands }, commands),
+            children)));
+}
+//# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,MAAM,2CAA2C,CAAC;AAWlE,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAe;IAC1F,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,WAAW,GAAG,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,eAAe,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAEvD,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE/F,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;QAC5B,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE;YACtF,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC9B,6BACE,GAAG,EAAE,kBAAkB,EACvB,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,EAAE,IAErD,KAAK,CACF;gBACL,CAAC,CAAC,OAAO,IAAI,CACZ,gCAAQ,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO;oBACrD,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG,CACvB,CACV,CACG;YACL,CAAC,CAAC,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,IAAG,QAAQ,CAAO;YAC/D,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC"}

package/lib/components/ErrorDialog/ErrorDialog.d.ts

@@ -0,0 +1,5 @@
+import type { UnsupportedErrorEvent } from './useErrorEvents.js';
+export interface ErrorDialogProps {
+    unsupported: UnsupportedErrorEvent[];
+}
+export declare function ErrorDialog({ unsupported }: ErrorDialogProps): JSX.Element;

package/lib/components/ErrorDialog/ErrorDialog.js

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Button } from '../Button/Button.js';
+import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
+import { PathError } from './PathError.js';
+import styles from '../StatusDialog/TaskList.module.css';
+import { Dialog } from '../Dialog/Dialog.js';
+export function ErrorDialog({ unsupported }) {
+    const cloudpack = useCloudpack();
+    const reload = () => {
+        cloudpack.restartTasks();
+    };
+    return (React.createElement(Dialog, { title: "Found unsupported paths in your project", style: "error", commands: React.createElement(Button, { primary: true, onClick: reload }, "Reload") },
+        React.createElement("div", { className: styles.root }, unsupported.map((data, index) => (React.createElement(PathError, { ...data, key: index }))))));
+}
+//# sourceMappingURL=ErrorDialog.js.map

package/lib/components/ErrorDialog/ErrorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorDialog.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,MAAM,MAAM,qCAAqC,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C,MAAM,UAAU,WAAW,CAAC,EAAE,WAAW,EAAoB;IAC3D,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,SAAS,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,KAAK,EAAC,yCAAyC,EAC/C,KAAK,EAAC,OAAO,EACb,QAAQ,EACN,oBAAC,MAAM,IAAC,OAAO,QAAC,OAAO,EAAE,MAAM,aAEtB;QAGX,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IACxB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,oBAAC,SAAS,OAAK,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CACpC,CAAC,CACE,CACC,CACV,CAAC;AACJ,CAAC"}

package/lib/components/ErrorDialog/PathError.d.ts

@@ -0,0 +1,2 @@
+import type { UnsupportedErrorEvent } from './useErrorEvents.js';
+export declare function PathError(props: UnsupportedErrorEvent): JSX.Element;

package/lib/components/ErrorDialog/PathError.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from '../StatusDialog/TaskStatus.module.css';
+import ErrorIcon from '../../images/error-24.inline.svg';
+import { default as cx } from 'classnames';
+import ChevronDownIcon from '../../images/chevrondown-20.inline.svg';
+export function PathError(props) {
+    const [showContent, setshowContent] = React.useState(false);
+    const { packageName, path } = props;
+    return (React.createElement("div", { className: styles.root },
+        React.createElement("div", { className: cx(styles.header, styles.error) },
+            React.createElement("button", { className: styles.expandButton, onClick: () => setshowContent(!showContent) },
+                React.createElement("img", { className: cx(styles.expandIcon, !showContent && styles.collapsed), src: ChevronDownIcon, alt: "" })),
+            React.createElement("img", { className: styles.errorIcon, src: ErrorIcon, alt: "" }),
+            React.createElement("div", { className: styles.title }, `${packageName}/${path}`)),
+        showContent && (React.createElement("div", { className: styles.content },
+            React.createElement("div", { className: styles.title }, "Details"),
+            React.createElement("div", { className: styles.nameValueArea },
+                React.createElement("div", { className: styles.name }, "Problem"),
+                React.createElement("div", { className: styles.value }, `A deep import "${packageName}" was imported, but was unrecognized as an exported entry path.`)),
+            React.createElement("div", { className: styles.nameValueArea },
+                React.createElement("div", { className: styles.name }, "Solution"),
+                React.createElement("div", { className: styles.value }, `Remove the path from the import in your source. (Import from "${packageName}" rather than "${packageName}/${path}")`))))));
+}
+//# sourceMappingURL=PathError.js.map

package/lib/components/ErrorDialog/PathError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathError.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/PathError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,uCAAuC,CAAC;AAC3D,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,EAAE,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAGrE,MAAM,UAAU,SAAS,CAAC,KAA4B;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrE,MAAM,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEpC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC;YAC7C,gCAAQ,SAAS,EAAE,MAAM,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC;gBACjF,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,EAAE,GAAG,CACjG;YACT,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG;YAC3D,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,GAAG,WAAW,IAAI,IAAI,EAAE,CAAO,CAC1D;QACL,WAAW,IAAI,CACd,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;YAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,cAAe;YAE3C,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa;gBAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,cAAe;gBAC1C,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IACzB,kBAAkB,WAAW,iEAAiE,CAC3F,CACF;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa;gBAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,eAAgB;gBAC3C,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IACzB,iEAAiE,WAAW,kBAAkB,WAAW,IAAI,IAAI,IAAI,CAClH,CACF,CACF,CACP,CACG,CACP,CAAC;AACJ,CAAC"}

package/lib/components/ErrorDialog/useErrorEvents.d.ts

@@ -0,0 +1,15 @@
+declare global {
+    interface Window {
+        uncaughtErrors: {
+            errors: ErrorEvent[];
+            unregister: () => void;
+        };
+    }
+}
+export declare type UnsupportedErrorEvent = {
+    packageName: string;
+    path: string;
+};
+export declare const useErrorEvents: () => {
+    unsupported: UnsupportedErrorEvent[];
+};

package/lib/components/ErrorDialog/useErrorEvents.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+export const useErrorEvents = () => {
+    const [events, setEvents] = useState({ unsupported: [] });
+    useEffect(() => {
+        // Append unsupported paths to the list.
+        const handleError = (event) => {
+            const regex = /[Mm]odule specifier,? ['"](.*?)\/(.*?)['"]/;
+            const match = event.message.match(regex);
+            if (match && match.length === 3) {
+                setEvents((prevEvents) => ({
+                    ...prevEvents,
+                    unsupported: [...prevEvents.unsupported, { packageName: match[1], path: match[2] }],
+                }));
+            }
+        };
+        window.uncaughtErrors = window.uncaughtErrors || { errors: [], unregister: () => undefined };
+        window.uncaughtErrors.unregister();
+        window.addEventListener('error', handleError);
+        // Handle errors caught before rendering.
+        for (const error of window.uncaughtErrors.errors) {
+            handleError(error);
+        }
+        // No dependencies. This effect should only run once.
+    }, []);
+    return events;
+};
+//# sourceMappingURL=useErrorEvents.js.map

package/lib/components/ErrorDialog/useErrorEvents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErrorEvents.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/useErrorEvents.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAa5C,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAA2C,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IAEpG,SAAS,CAAC,GAAG,EAAE;QACb,wCAAwC;QACxC,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,MAAM,KAAK,GAAG,4CAA4C,CAAC;YAC3D,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC/B,SAAS,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;oBACzB,GAAG,UAAU;oBACb,WAAW,EAAE,CAAC,GAAG,UAAU,CAAC,WAAW,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;iBACpF,CAAC,CAAC,CAAC;aACL;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,cAAc,GAAG,MAAM,CAAC,cAAc,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;QAC7F,MAAM,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAE9C,yCAAyC;QACzC,KAAK,MAAM,KAAK,IAAI,MAAM,CAAC,cAAc,CAAC,MAAM,EAAE;YAChD,WAAW,CAAC,KAAK,CAAC,CAAC;SACpB;QAED,qDAAqD;IACvD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/lib/components/StatusDialog/StatusDialog.d.ts

@@ -1,7 +1,4 @@
-import { default as React } from 'react';
 export interface StatusDialogProps {
     onClose: () => void;
 }
-declare function StatusDialogUnmemoized({ onClose }: StatusDialogProps): JSX.Element;
-export declare const StatusDialog: React.MemoExoticComponent<typeof StatusDialogUnmemoized>;
-export {};
+export declare function StatusDialog({ onClose }: StatusDialogProps): JSX.Element;

package/lib/components/StatusDialog/StatusDialog.js

@@ -1,29 +1,14 @@
-import { default as React, useRef } from 'react';
-import styles from './StatusDialog.module.css';
-import { useDraggable } from '../../hooks/useDraggable.js';
-import CloseIcon from '../../images/dismiss-16-filled.inline.svg';
+import React from 'react';
 import { TaskList } from './TaskList.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { Button } from '../Button/Button.js';
-function StatusDialogUnmemoized({ onClose }) {
-    const draggableRef = useRef(null);
-    const draggableTargetRef = useRef(null);
+import { Dialog } from '../Dialog/Dialog.js';
+export function StatusDialog({ onClose }) {
     const cloudpack = useCloudpack();
-    useDraggable(draggableRef, draggableTargetRef);
     const restartTasks = () => {
         cloudpack.restartTasks();
     };
-    return (React.createElement("div", { className: styles.overlay },
-        React.createElement("div", { ref: draggableRef, className: styles.dialog },
-            React.createElement("div", { className: styles.titleArea },
-                React.createElement("div", { ref: draggableTargetRef, className: styles.title }, "Task results"),
-                React.createElement("button", { className: styles.closeButton, onClick: onClose },
-                    React.createElement("img", { src: CloseIcon, alt: "" }))),
-            React.createElement("div", { className: styles.commands },
-                React.createElement(Button, { primary: true, onClick: restartTasks }, "Restart all tasks")),
-            React.createElement(TaskList, null))));
+    return (React.createElement(Dialog, { title: "Task results", draggable: true, onClose: onClose, commands: React.createElement(Button, { primary: true, onClick: restartTasks }, "Restart all tasks") },
+        React.createElement(TaskList, null)));
 }
-export const StatusDialog = React.memo(StatusDialogUnmemoized, (prev, next) => {
-    return prev.onClose === next.onClose;
-});
 //# sourceMappingURL=StatusDialog.js.map

package/lib/components/StatusDialog/StatusDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDialog.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,SAAS,MAAM,2CAA2C,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C,SAAS,sBAAsB,CAAC,EAAE,OAAO,EAAqB;IAC5D,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,YAAY,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC;IAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,SAAS,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;QAC5B,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM;YAC9C,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;gBAC9B,6BAAK,GAAG,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,mBAE/C;gBACN,gCAAQ,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO;oBACrD,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG,CACvB,CACL;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ;gBAC7B,oBAAC,MAAM,IAAC,OAAO,QAAC,OAAO,EAAE,YAAY,wBAE5B,CACL;YACN,oBAAC,QAAQ,OAAG,CACR,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IAC5E,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,CAAC;AACvC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"StatusDialog.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAM7C,MAAM,UAAU,YAAY,CAAC,EAAE,OAAO,EAAqB;IACzD,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,SAAS,CAAC,YAAY,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,SAAS,QACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EACN,oBAAC,MAAM,IAAC,OAAO,QAAC,OAAO,EAAE,YAAY,wBAE5B;QAGX,oBAAC,QAAQ,OAAG,CACL,CACV,CAAC;AACJ,CAAC"}

package/lib/components/StatusOverlay/StatusOverlay.js

@@ -2,10 +2,13 @@ import React, { useCallback, useState, useRef } from 'react';
 import { StatusBadge } from '../StatusBadge/StatusBadge.js';
 import { StatusDialog } from '../StatusDialog/StatusDialog.js';
 import { useStatus } from '../CloudpackProvider/useStatus.js';
+import { ErrorDialog } from '../ErrorDialog/ErrorDialog.js';
+import { useErrorEvents } from '../ErrorDialog/useErrorEvents.js';
 export function StatusOverlay() {
     const [isExpanded, setIsExpanded] = useState(false);
     const status = useStatus();
     const internal = useRef();
+    const { unsupported } = useErrorEvents();
     // If we haven't set a specific state and we become idle,
     // pop open the details if there are errors.
     if (isExpanded === false &&
@@ -20,7 +23,8 @@ export function StatusOverlay() {
         setIsExpanded(!isExpanded);
     }, [isExpanded, setIsExpanded]);
     return (React.createElement("div", null,
-        !isExpanded && React.createElement(StatusBadge, { onExpand: toggleMinimized }),
-        isExpanded && React.createElement(StatusDialog, { onClose: toggleMinimized })));
+        !!unsupported.length && React.createElement(ErrorDialog, { unsupported: unsupported }),
+        !unsupported.length && !isExpanded && React.createElement(StatusBadge, { onExpand: toggleMinimized }),
+        !unsupported.length && isExpanded && React.createElement(StatusDialog, { onClose: toggleMinimized })));
 }
 //# sourceMappingURL=StatusOverlay.js.map

package/lib/components/StatusOverlay/StatusOverlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusOverlay.js","sourceRoot":"","sources":["../../../src/components/StatusOverlay/StatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AAEpF,MAAM,UAAU,aAAa;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAG,MAAM,EAA+B,CAAC;IAEvD,yDAAyD;IACzD,4CAA4C;IAC5C,IACE,UAAU,KAAK,KAAK;QACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM;QACnC,MAAM,CAAC,MAAM,KAAK,MAAM;QACxB,QAAQ,CAAC,OAAO,EAAE,WAAW,IAAI,MAAM,CAAC,WAAW,EACnD;QACA,aAAa,CAAC,IAAI,CAAC,CAAC;KACrB;IACD,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;IAE1B,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1D,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL;QACG,CAAC,UAAU,IAAI,oBAAC,WAAW,IAAC,QAAQ,EAAE,eAAe,GAAI;QACzD,UAAU,IAAI,oBAAC,YAAY,IAAC,OAAO,EAAE,eAAe,GAAI,CACrD,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"StatusOverlay.js","sourceRoot":"","sources":["../../../src/components/StatusOverlay/StatusOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,MAAM,UAAU,aAAa;IAC3B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,QAAQ,GAAG,MAAM,EAA+B,CAAC;IACvD,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAEzC,yDAAyD;IACzD,4CAA4C;IAC5C,IACE,UAAU,KAAK,KAAK;QACpB,QAAQ,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM;QACnC,MAAM,CAAC,MAAM,KAAK,MAAM;QACxB,QAAQ,CAAC,OAAO,EAAE,WAAW,IAAI,MAAM,CAAC,WAAW,EACnD;QACA,aAAa,CAAC,IAAI,CAAC,CAAC;KACrB;IACD,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC;IAE1B,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1D,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAEhC,OAAO,CACL;QACG,CAAC,CAAC,WAAW,CAAC,MAAM,IAAI,oBAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI;QACjE,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,UAAU,IAAI,oBAAC,WAAW,IAAC,QAAQ,EAAE,eAAe,GAAI;QAChF,CAAC,WAAW,CAAC,MAAM,IAAI,UAAU,IAAI,oBAAC,YAAY,IAAC,OAAO,EAAE,eAAe,GAAI,CAC5E,CACP,CAAC;AACJ,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.31.2"
+      "packageVersion": "7.32.0"
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ms-cloudpack/overlay",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "The Cloudpack overlay ux.",
   "license": "MIT",
   "types": "./lib/index.d.ts",
@@ -8,7 +8,7 @@
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
-      "browser": "./dist/lib/index.js",
+      "browser-esm": "./dist/lib/index.js",
       "import": "./lib/index.js"
     }
   },