@ms-cloudpack/overlay 0.17.11 → 0.17.13

package/dist/browser-esm/chunks/js/ErrorDialog-744DEKEI.js

@@ -0,0 +1,74 @@
+import {
+  Button,
+  Dialog,
+  TaskList_default,
+  TaskStatus_default,
+  chevrondown_20_inline_default,
+  error_24_inline_default
+} from "./chunk-XOJFP5X6.js";
+import {
+  useCloudpack
+} from "./chunk-7KHMDJ6G.js";
+import {
+  elementIds
+} from "./chunk-PDWQRLCD.js";
+
+// packages/overlay/src/components/ErrorDialog/ErrorDialog.tsx
+import { default as React2 } from "react";
+
+// packages/overlay/src/components/ErrorDialog/PathError.tsx
+import React from "react";
+import { default as cx } from "classnames";
+function PathError(props) {
+  const [showContent, setshowContent] = React.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__ */ React.createElement("div", { className: TaskStatus_default.root }, /* @__PURE__ */ React.createElement("div", { className: cx(TaskStatus_default.header, TaskStatus_default.error) }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: TaskStatus_default.expandButton,
+      onClick: () => setshowContent(!showContent),
+      "aria-label": showContent ? `Minimize ${packageName}/${importPath}` : `Expand ${packageName}/${importPath}`
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        className: cx(TaskStatus_default.expandIcon, !showContent && TaskStatus_default.collapsed),
+        src: chevrondown_20_inline_default,
+        alt: "Chevron down icon"
+      }
+    )
+  ), /* @__PURE__ */ React.createElement("img", { className: TaskStatus_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.title }, `${packageName}/${importPath}`)), showContent && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.commands }, fixable && /* @__PURE__ */ React.createElement(Button, { onClick: addOverride }, "Add override"), /* @__PURE__ */ React.createElement(Button, { onClick: editConfig }, "Edit config file")), /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.content }, /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.title }, "Details"), /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.name }, "Problem"), /* @__PURE__ */ React.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__ */ React.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React.createElement("div", { className: TaskStatus_default.name }, "Solution"), /* @__PURE__ */ React.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__ */ React2.createElement(
+    Dialog,
+    {
+      title: "Found unsupported paths in your project",
+      id: elementIds.errorDialogRoot,
+      style: "error",
+      commands: [
+        /* @__PURE__ */ React2.createElement(Button, { primary: true, onClick: reload, key: "1" }, "Restart all tasks")
+      ]
+    },
+    /* @__PURE__ */ React2.createElement("div", { className: TaskList_default.root }, unsupported.map((data, index) => /* @__PURE__ */ React2.createElement(PathError, { ...data, key: index })))
+  );
+}
+var ErrorDialog_default = ErrorDialog;
+export {
+  ErrorDialog,
+  ErrorDialog_default as default
+};
+//# sourceMappingURL=ErrorDialog-744DEKEI.js.map

package/dist/browser-esm/chunks/js/ErrorDialog-744DEKEI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ErrorDialog/ErrorDialog.tsx", "../../../../src/components/ErrorDialog/PathError.tsx"],
+  "sourcesContent": ["import { default as React } from 'react';\nimport { Button } from '../Button/Button.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { PathError } from './PathError.js';\nimport styles from '../StatusDialog/TaskList.module.css';\nimport type { UnsupportedErrorEvent } from './useErrorEvents.js';\nimport { Dialog } from '../Dialog/Dialog.js';\nimport { elementIds } from '../../constants.js';\n\nexport interface ErrorDialogProps {\n  unsupported: UnsupportedErrorEvent[];\n}\n\nexport function ErrorDialog({ unsupported }: ErrorDialogProps) {\n  const cloudpack = useCloudpack();\n\n  const reload = () => {\n    void cloudpack.restartAllTasks.mutate();\n  };\n\n  return (\n    <Dialog\n      title=\"Found unsupported paths in your project\"\n      id={elementIds.errorDialogRoot}\n      style=\"error\"\n      commands={[\n        <Button primary onClick={reload} key=\"1\">\n          Restart all tasks\n        </Button>,\n      ]}\n    >\n      <div className={styles.root}>\n        {unsupported.map((data, index) => (\n          <PathError {...data} key={index} />\n        ))}\n      </div>\n    </Dialog>\n  );\n}\n\nexport default ErrorDialog;\n", "import React from 'react';\nimport styles from '../StatusDialog/TaskStatus.module.css';\nimport ErrorIcon from '../../images/error-24.inline.svg';\nimport { default as cx } from 'classnames';\nimport ChevronDownIcon from '../../images/chevrondown-20.inline.svg';\nimport type { UnsupportedErrorEvent } from './useErrorEvents.js';\nimport { Button } from '../Button/Button.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\n\nexport function PathError(props: UnsupportedErrorEvent) {\n  const [showContent, setshowContent] = React.useState<boolean>(false);\n  const { packageName, importPath, issuerUrl, fixable } = props;\n  const cloudpack = useCloudpack();\n\n  const editConfig = () => {\n    void cloudpack.openConfigEditor.mutate();\n  };\n\n  const addOverride = () => {\n    void cloudpack.addPackageOverride.mutate({ packageName, importPath, issuerUrl });\n  };\n\n  return (\n    <div className={styles.root}>\n      <div className={cx(styles.header, styles.error)}>\n        <button\n          className={styles.expandButton}\n          onClick={() => setshowContent(!showContent)}\n          aria-label={showContent ? `Minimize ${packageName}/${importPath}` : `Expand ${packageName}/${importPath}`}\n        >\n          <img\n            className={cx(styles.expandIcon, !showContent && styles.collapsed)}\n            src={ChevronDownIcon}\n            alt=\"Chevron down icon\"\n          />\n        </button>\n        <img className={styles.errorIcon} src={ErrorIcon} alt=\"Error icon\" />\n        <div className={styles.title}>{`${packageName}/${importPath}`}</div>\n      </div>\n      {showContent && (\n        <>\n          <div className={styles.commands}>\n            {fixable && <Button onClick={addOverride}>Add override</Button>}\n            <Button onClick={editConfig}>Edit config file</Button>\n          </div>\n          <div className={styles.content}>\n            <div className={styles.title}>Details</div>\n\n            <div className={styles.nameValueArea}>\n              <div className={styles.name}>Problem</div>\n              <div className={styles.value}>\n                {importPath === '.'\n                  ? `An unrecognized package \"${packageName}\" was imported.`\n                  : `Path \"${importPath}\" was imported from package \"${packageName}\" but was not recognized as an exported path.`}\n              </div>\n            </div>\n            <div className={styles.nameValueArea}>\n              <div className={styles.name}>Solution</div>\n              <div className={styles.value}>\n                {fixable\n                  ? `Remove the path from the import in your source. (Import from \"${packageName}\" rather than \"${packageName}/${importPath}\")`\n                  : importPath === '.'\n                    ? `Make sure the package name is valid.`\n                    : `Import not found on package. Make sure the import path is valid.`}\n              </div>\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA,SAAS,WAAWA,cAAa;;;ACAjC,OAAO,WAAW;AAGlB,SAAS,WAAW,UAAU;AAMvB,SAAS,UAAU,OAA8B;AACtD,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAkB,KAAK;AACnE,QAAM,EAAE,aAAa,YAAY,WAAW,QAAQ,IAAI;AACxD,QAAM,YAAY,aAAa;AAE/B,QAAM,aAAa,MAAM;AACvB,SAAK,UAAU,iBAAiB,OAAO;AAAA,EACzC;AAEA,QAAM,cAAc,MAAM;AACxB,SAAK,UAAU,mBAAmB,OAAO,EAAE,aAAa,YAAY,UAAU,CAAC;AAAA,EACjF;AAEA,SACE,oCAAC,SAAI,WAAW,mBAAO,QACrB,oCAAC,SAAI,WAAW,GAAG,mBAAO,QAAQ,mBAAO,KAAK,KAC5C;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,mBAAO;AAAA,MAClB,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,MAC1C,cAAY,cAAc,YAAY,WAAW,IAAI,UAAU,KAAK,UAAU,WAAW,IAAI,UAAU;AAAA;AAAA,IAEvG;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,mBAAO,YAAY,CAAC,eAAe,mBAAO,SAAS;AAAA,QACjE,KAAK;AAAA,QACL,KAAI;AAAA;AAAA,IACN;AAAA,EACF,GACA,oCAAC,SAAI,WAAW,mBAAO,WAAW,KAAK,yBAAW,KAAI,cAAa,GACnE,oCAAC,SAAI,WAAW,mBAAO,SAAQ,GAAG,WAAW,IAAI,UAAU,EAAG,CAChE,GACC,eACC,0DACE,oCAAC,SAAI,WAAW,mBAAO,YACpB,WAAW,oCAAC,UAAO,SAAS,eAAa,cAAY,GACtD,oCAAC,UAAO,SAAS,cAAY,kBAAgB,CAC/C,GACA,oCAAC,SAAI,WAAW,mBAAO,WACrB,oCAAC,SAAI,WAAW,mBAAO,SAAO,SAAO,GAErC,oCAAC,SAAI,WAAW,mBAAO,iBACrB,oCAAC,SAAI,WAAW,mBAAO,QAAM,SAAO,GACpC,oCAAC,SAAI,WAAW,mBAAO,SACpB,eAAe,MACZ,4BAA4B,WAAW,oBACvC,SAAS,UAAU,gCAAgC,WAAW,+CACpE,CACF,GACA,oCAAC,SAAI,WAAW,mBAAO,iBACrB,oCAAC,SAAI,WAAW,mBAAO,QAAM,UAAQ,GACrC,oCAAC,SAAI,WAAW,mBAAO,SACpB,UACG,iEAAiE,WAAW,kBAAkB,WAAW,IAAI,UAAU,OACvH,eAAe,MACb,yCACA,kEACR,CACF,CACF,CACF,CAEJ;AAEJ;;;AD1DO,SAAS,YAAY,EAAE,YAAY,GAAqB;AAC7D,QAAM,YAAY,aAAa;AAE/B,QAAM,SAAS,MAAM;AACnB,SAAK,UAAU,gBAAgB,OAAO;AAAA,EACxC;AAEA,SACE,gBAAAC,OAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,IAAI,WAAW;AAAA,MACf,OAAM;AAAA,MACN,UAAU;AAAA,QACR,gBAAAA,OAAA,cAAC,UAAO,SAAO,MAAC,SAAS,QAAQ,KAAI,OAAI,mBAEzC;AAAA,MACF;AAAA;AAAA,IAEA,gBAAAA,OAAA,cAAC,SAAI,WAAW,iBAAO,QACpB,YAAY,IAAI,CAAC,MAAM,UACtB,gBAAAA,OAAA,cAAC,aAAW,GAAG,MAAM,KAAK,OAAO,CAClC,CACH;AAAA,EACF;AAEJ;AAEA,IAAO,sBAAQ;",
+  "names": ["React", "React"]
+}

package/dist/browser-esm/chunks/js/StatusDialog-J6LM3XZZ.js

@@ -0,0 +1,316 @@
+import {
+  Button,
+  Dialog,
+  TaskList_default,
+  TaskStatus_default,
+  chevrondown_20_inline_default,
+  error_24_inline_default
+} from "./chunk-XOJFP5X6.js";
+import {
+  useCloudpack
+} from "./chunk-7KHMDJ6G.js";
+import {
+  elementIds
+} from "./chunk-PDWQRLCD.js";
+
+// packages/overlay/src/components/StatusDialog/StatusDialog.tsx
+import React5, { useCallback } from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskList.tsx
+import React3 from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskStatus.tsx
+import React2 from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskResultItem.tsx
+import React from "react";
+
+// packages/overlay/src/components/StatusDialog/TaskResultItem.module.css
+var compiledModule = `.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 s = document.createElement("style");
+s.setAttribute("data-sourceFile", "packages/overlay/src/components/StatusDialog/TaskResultItem.module.css");
+s.appendChild(document.createTextNode(compiledModule));
+document.head.appendChild(s);
+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__ */ React.createElement("div", { className: TaskResultItem_default.root }, /* @__PURE__ */ React.createElement("div", { className: TaskResultItem_default.statusBar }), /* @__PURE__ */ React.createElement("div", { className: TaskResultItem_default.content }, /* @__PURE__ */ React.createElement("div", { className: TaskResultItem_default.titleArea }, /* @__PURE__ */ React.createElement("button", { onClick: openSource, className: TaskResultItem_default.file }, index, ". ", location)), /* @__PURE__ */ React.createElement("div", { className: TaskResultItem_default.text }, "[", item.source, "] ", item.text), /* @__PURE__ */ React.createElement("pre", { className: TaskResultItem_default.text }, JSON.stringify(item, null, 2))));
+}
+
+// packages/overlay/src/components/StatusDialog/TaskStatus.tsx
+import { default as cx } from "classnames";
+
+// 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/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] = React2.useState(void 0);
+  const { name, 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__ */ React2.createElement("div", { className: TaskStatus_default.root }, /* @__PURE__ */ React2.createElement("div", { className: getHeaderClassName(task) }, /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      className: TaskStatus_default.expandButton,
+      onClick: () => setIsOpen(!showContent),
+      "aria-label": showContent ? `Minimize ${name}` : `Expand ${name}`
+    },
+    /* @__PURE__ */ React2.createElement(
+      "img",
+      {
+        className: cx(TaskStatus_default.expandIcon, !showContent && TaskStatus_default.collapsed),
+        src: chevrondown_20_inline_default,
+        alt: "Chevron down icon"
+      }
+    )
+  ), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React2.createElement("img", { className: TaskStatus_default.errorIcon, src: success_24_inline_default, alt: "Success icon" }), errors?.length > 0 && /* @__PURE__ */ React2.createElement("img", { className: TaskStatus_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.title }, name), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.farArea }, getCompletion(task))), showContent && (inputPath ? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.commands }, /* @__PURE__ */ React2.createElement(Button, { onClick: restartTask }, "Restart task")), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.content }, /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.title }, "Details"), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.name }, "Input path"), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.value }, /* @__PURE__ */ React2.createElement("button", { className: TaskStatus_default.linkButton, onClick: () => open(inputPath) }, task.inputPath), /* @__PURE__ */ React2.createElement("button", { className: TaskStatus_default.linkButton, onClick: openPackage }, "(Package.json)"))), outputPath && /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.nameValueArea }, /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.name }, "Output path"), /* @__PURE__ */ React2.createElement("button", { className: TaskStatus_default.linkButton, onClick: () => open(outputPath) }, outputPath)), errors?.length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.title }, "Errors"), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.resultItems }, errors.map((error, index) => /* @__PURE__ */ React2.createElement(TaskResultItem, { key: index, item: error, projectPath: inputPath, index: index + 1 })))), warnings?.length > 0 && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.title }, "Warnings"), /* @__PURE__ */ React2.createElement("div", { className: TaskStatus_default.resultItems }, warnings.map((warning, index) => /* @__PURE__ */ React2.createElement(TaskResultItem, { key: index, item: warning, projectPath: inputPath, index: index + 1 })))))) : /* @__PURE__ */ React2.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 cx(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, useState } from "react";
+import { taskListSource } from "@ms-cloudpack/api-server/browser";
+var useStatusDetails = () => {
+  const cloudpack = useCloudpack();
+  const [details, setDetails] = useState({ tasks: [] });
+  useEffect(() => {
+    const subscription = cloudpack?.onDataChanged.subscribe(taskListSource, {
+      onData: (data) => {
+        setDetails(data);
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [cloudpack]);
+  return details;
+};
+
+// 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 }) => searchFilter && name?.toLowerCase().includes(searchFilter));
+  }
+  if (issuesOnly) {
+    filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);
+  }
+  return /* @__PURE__ */ React3.createElement("div", { className: TaskList_default.root }, filteredTasks.map((task) => /* @__PURE__ */ React3.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/StatusDialog/Searchbox.tsx
+import React4 from "react";
+
+// packages/overlay/src/components/StatusDialog/Searchbox.module.css
+var compiledModule2 = `.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 s2 = document.createElement("style");
+s2.setAttribute("data-sourceFile", "packages/overlay/src/components/StatusDialog/Searchbox.module.css");
+s2.appendChild(document.createTextNode(compiledModule2));
+document.head.appendChild(s2);
+var searchbox = "aJeqJtva-Searchboxmodule--searchbox";
+var Searchbox_default = { searchbox };
+
+// packages/overlay/src/components/StatusDialog/Searchbox.tsx
+function Searchbox({ value, onChange }) {
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, typeof value === "string" && /* @__PURE__ */ React4.createElement("input", { type: "text", placeholder: "Search", className: Searchbox_default.searchbox, onChange, value }));
+}
+
+// packages/overlay/src/components/StatusDialog/StatusDialog.tsx
+function StatusDialog({ onClose }) {
+  const cloudpack = useCloudpack();
+  const [searchFilter, setSearchFilter] = React5.useState("");
+  const [issuesOnly, setIssuesOnly] = React5.useState(false);
+  const handleSearchChange = useCallback((event) => {
+    event.preventDefault();
+    setSearchFilter(event.target.value);
+  }, []);
+  const restartAllTasks = () => {
+    void cloudpack.restartAllTasks.mutate();
+  };
+  const toggleIssuesOnly = () => setIssuesOnly((value) => !value);
+  return /* @__PURE__ */ React5.createElement(
+    Dialog,
+    {
+      title: "Task results",
+      id: elementIds.statusDialogRoot,
+      draggable: true,
+      onClose,
+      commands: [
+        /* @__PURE__ */ React5.createElement(Button, { primary: true, onClick: restartAllTasks, key: "restart" }, "Restart all tasks"),
+        /* @__PURE__ */ React5.createElement(Button, { onClick: toggleIssuesOnly, key: "issues" }, issuesOnly ? "Show all tasks" : "Show tasks with issues")
+      ]
+    },
+    /* @__PURE__ */ React5.createElement(Searchbox, { value: searchFilter, onChange: handleSearchChange }),
+    /* @__PURE__ */ React5.createElement(TaskList, { searchFilter, issuesOnly })
+  );
+}
+var StatusDialog_default = StatusDialog;
+export {
+  StatusDialog,
+  StatusDialog_default as default
+};
+//# sourceMappingURL=StatusDialog-J6LM3XZZ.js.map

package/dist/browser-esm/chunks/js/StatusDialog-J6LM3XZZ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/StatusDialog/StatusDialog.tsx", "../../../../src/components/StatusDialog/TaskList.tsx", "../../../../src/components/StatusDialog/TaskStatus.tsx", "../../../../src/components/StatusDialog/TaskResultItem.tsx", "../../../../src/components/StatusDialog/TaskResultItem.module.css", "../../../../src/components/CloudpackProvider/useStatusDetails.ts", "../../../../src/components/StatusDialog/Searchbox.tsx", "../../../../src/components/StatusDialog/Searchbox.module.css"],
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { TaskList } from './TaskList.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { Button } from '../Button/Button.js';\nimport { Dialog } from '../Dialog/Dialog.js';\nimport { Searchbox } from './Searchbox.js';\nimport { elementIds } from '../../constants.js';\n\nexport interface StatusDialogProps {\n  onClose: () => void;\n}\n\nexport function StatusDialog({ onClose }: StatusDialogProps) {\n  const cloudpack = useCloudpack();\n  const [searchFilter, setSearchFilter] = React.useState('');\n  const [issuesOnly, setIssuesOnly] = React.useState(false);\n\n  const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    setSearchFilter(event.target.value);\n  }, []);\n\n  const restartAllTasks = () => {\n    void cloudpack.restartAllTasks.mutate();\n  };\n\n  const toggleIssuesOnly = () => setIssuesOnly((value) => !value);\n\n  return (\n    <Dialog\n      title=\"Task results\"\n      id={elementIds.statusDialogRoot}\n      draggable\n      onClose={onClose}\n      commands={[\n        <Button primary onClick={restartAllTasks} key=\"restart\">\n          Restart all tasks\n        </Button>,\n        <Button onClick={toggleIssuesOnly} key=\"issues\">\n          {issuesOnly ? 'Show all tasks' : 'Show tasks with issues'}\n        </Button>,\n      ]}\n    >\n      <Searchbox value={searchFilter} onChange={handleSearchChange} />\n      <TaskList searchFilter={searchFilter} issuesOnly={issuesOnly} />\n    </Dialog>\n  );\n}\n\nexport default StatusDialog;\n", "import React from 'react';\nimport { TaskStatus } from './TaskStatus.js';\nimport { useStatusDetails } from '../CloudpackProvider/useStatusDetails.js';\nimport styles from './TaskList.module.css';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\n\nexport interface TaskListProps {\n  searchFilter?: string;\n  issuesOnly?: boolean;\n}\n\nexport function TaskList({ searchFilter, issuesOnly }: TaskListProps) {\n  const details = useStatusDetails();\n  const tasks = (details.tasks || []).sort(sortTasks);\n\n  let filteredTasks = tasks;\n  if (searchFilter) {\n    searchFilter = searchFilter.toLowerCase();\n    filteredTasks = filteredTasks.filter(({ name }) => searchFilter && name?.toLowerCase().includes(searchFilter));\n  }\n  if (issuesOnly) {\n    filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);\n  }\n\n  return (\n    <div className={styles.root}>\n      {filteredTasks.map((task) => (\n        <TaskStatus key={task.name} task={task} />\n      ))}\n    </div>\n  );\n}\n\n/**\n * Really the server should be sorting. Get stuff out of the browser.\n */\nfunction sortTasks(a: TaskDescription, b: TaskDescription) {\n  const aStatus = a.status === 'pending' ? 1 : 0;\n  const bStatus = b.status === 'pending' ? 1 : 0;\n\n  if (aStatus !== bStatus) {\n    return aStatus > bStatus ? -1 : 1;\n  }\n\n  const aErrors = a.errors?.length || 0;\n  const bErrors = b.errors?.length || 0;\n\n  if (aErrors !== bErrors) {\n    return aErrors > bErrors ? -1 : 1;\n  }\n\n  if (a.name === undefined && b.name === undefined) {\n    return a.id < b.id ? -1 : 1;\n  } else if (a.name === undefined) {\n    return 1;\n  } else if (b.name === undefined) {\n    return -1;\n  }\n\n  return a.name < b.name ? -1 : 1;\n}\n", "import React from 'react';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\nimport { TaskResultItem } from './TaskResultItem.js';\nimport styles from './TaskStatus.module.css';\nimport { default as cx } from 'classnames';\nimport ErrorIcon from '../../images/error-24.inline.svg';\nimport SuccessIcon from '../../images/success-24.inline.svg';\nimport ChevronDownIcon from '../../images/chevrondown-20.inline.svg';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface TaskStatusProps {\n  task: TaskDescription;\n}\n\nfunction getCompletion(task: TaskDescription) {\n  if (task.status === 'pending') {\n    return 'Running';\n  }\n  return [\n    `Completed in ${task.durationMilliseconds}ms`,\n    task.errors?.length && `${task.errors.length} error${task.errors.length > 1 ? 's' : ''}`,\n    task.warnings?.length && `${task.warnings.length} warning${task.warnings.length > 1 ? 's' : ''}`,\n  ]\n    .filter(Boolean)\n    .join(', ');\n}\n\nexport function TaskStatus({ task }: TaskStatusProps) {\n  const [isOpen, setIsOpen] = React.useState<boolean | undefined>(undefined);\n  const { name, warnings = [], errors = [] } = task;\n  const cloudpack = useCloudpack();\n  const showContent = isOpen === true || (isOpen === undefined && errors?.length > 0);\n\n  const { inputPath, outputPath } = task;\n\n  const open = (rootPath: string) => {\n    void cloudpack.openFilePath.mutate({\n      rootPath,\n    });\n  };\n\n  const openPackage = () => {\n    if (!inputPath) {\n      console.error('No input path for task', task);\n      return;\n    }\n    void cloudpack.openCodeEditor.mutate({\n      rootPath: inputPath,\n      relativePath: 'package.json',\n    });\n  };\n\n  const restartTask = () => {\n    if (!inputPath) {\n      console.error('No input path for task', task);\n      return;\n    }\n    void cloudpack.restartTask.mutate({ id: task.id, inputPath });\n  };\n\n  return (\n    <div className={styles.root}>\n      <div className={getHeaderClassName(task)}>\n        <button\n          className={styles.expandButton}\n          onClick={() => setIsOpen(!showContent)}\n          aria-label={showContent ? `Minimize ${name}` : `Expand ${name}`}\n        >\n          <img\n            className={cx(styles.expandIcon, !showContent && styles.collapsed)}\n            src={ChevronDownIcon}\n            alt=\"Chevron down icon\"\n          />\n        </button>\n        {errors?.length === 0 && warnings?.length === 0 && (\n          <img className={styles.errorIcon} src={SuccessIcon} alt=\"Success icon\" />\n        )}\n        {errors?.length > 0 && <img className={styles.errorIcon} src={ErrorIcon} alt=\"Error icon\" />}\n        <div className={styles.title}>{name}</div>\n        <div className={styles.farArea}>{getCompletion(task)}</div>\n      </div>\n      {showContent &&\n        (inputPath ? (\n          <>\n            <div className={styles.commands}>\n              <Button onClick={restartTask}>Restart task</Button>\n            </div>\n            <div className={styles.content}>\n              <div className={styles.title}>Details</div>\n              <div className={styles.nameValueArea}>\n                <div className={styles.name}>Input path</div>\n                <div className={styles.value}>\n                  <button className={styles.linkButton} onClick={() => open(inputPath)}>\n                    {task.inputPath}\n                  </button>\n\n                  <button className={styles.linkButton} onClick={openPackage}>\n                    (Package.json)\n                  </button>\n                </div>\n              </div>\n              {outputPath && (\n                <div className={styles.nameValueArea}>\n                  <div className={styles.name}>Output path</div>\n                  <button className={styles.linkButton} onClick={() => open(outputPath)}>\n                    {outputPath}\n                  </button>\n                </div>\n              )}\n              {errors?.length > 0 && (\n                <>\n                  <div className={styles.title}>Errors</div>\n                  <div className={styles.resultItems}>\n                    {errors.map((error, index) => (\n                      <TaskResultItem key={index} item={error} projectPath={inputPath} index={index + 1} />\n                    ))}\n                  </div>\n                </>\n              )}\n              {warnings?.length > 0 && (\n                <>\n                  <div className={styles.title}>Warnings</div>\n                  <div className={styles.resultItems}>\n                    {warnings.map((warning, index) => (\n                      <TaskResultItem key={index} item={warning} projectPath={inputPath} index={index + 1} />\n                    ))}\n                  </div>\n                </>\n              )}\n            </div>\n          </>\n        ) : (\n          <div className={styles.content}>No input path found for task. This is a Cloudpack bug. Please report it.</div>\n        ))}\n    </div>\n  );\n}\n\nfunction getHeaderClassName(task: TaskDescription) {\n  const { errors = [], warnings = [] } = task;\n  return cx(styles.header, {\n    [styles.success]: errors?.length === 0 && warnings?.length === 0,\n    [styles.warning]: errors?.length === 0 && warnings?.length > 0,\n    [styles.error]: errors?.length > 0,\n  });\n}\n", "import type { BundleMessage } from '@ms-cloudpack/common-types';\nimport React from 'react';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport styles from './TaskResultItem.module.css';\n\nexport interface TaskResultItemProps {\n  item: BundleMessage;\n  projectPath: string;\n  index: number;\n}\n\nexport function TaskResultItem({ item, projectPath, index }: TaskResultItemProps) {\n  const cloudpack = useCloudpack();\n\n  const openSource = (ev: React.MouseEvent) => {\n    if (item.location) {\n      void cloudpack.openCodeEditor.mutate({\n        rootPath: projectPath,\n        relativePath: item.location?.file,\n        line: item.location?.line,\n        column: item.location?.column,\n      });\n      ev.preventDefault();\n    }\n  };\n\n  const location = [item.location?.file || '(path unavailable)', item.location?.line, item.location?.column]\n    .filter(Boolean)\n    .join(':');\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.statusBar}></div>\n      <div className={styles.content}>\n        <div className={styles.titleArea}>\n          <button onClick={openSource} className={styles.file}>\n            {index}. {location}\n          </button>\n        </div>\n        <div className={styles.text}>\n          [{item.source}] {item.text}\n        </div>\n        <pre className={styles.text}>{JSON.stringify(item, null, 2)}</pre>\n      </div>\n    </div>\n  );\n}\n", "// THIS FILE IS AUTO GENERATED FROM packages/overlay/src/components/StatusDialog/TaskResultItem.module.css\n\n\nlet compiledModule = `.FSsdmcQ-TaskResultItemmodule--root {\\n  display: flex;\\n  background: #f5f5f5;\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--statusBar {\\n  flex-shrink: 0;\\n  border-radius: 4px;\\n  width: 4px;\\n  background: #aa0000;\\n  box-shadow: 2px 0 4px 0 rgb(220 0 0 / 20%);\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--content {\\n  padding: 8px;\\n  display: flex;\\n  flex-grow: 1;\\n  overflow: hidden;\\n  flex-direction: column;\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--titleArea {\\n  display: flex;\\n  align-items: center;\\n  flex-direction: row;\\n  gap: 4px;\\n  padding: 4px 0;\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--file {\\n  display: inline-flex;\\n  margin: 0;\\n  padding: 0;\\n  border: none;\\n  background: inherit;\\n  font-family: inherit;\\n  flex-grow: 1;\\n  font-weight: 500;\\n  font-size: 14px;\\n  flex-shrink: 0;\\n  text-decoration: none;\\n  color: #000;\\n  cursor: pointer;\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--file:hover {\\n  text-decoration: underline;\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--actionArea {\\n  display: flex;\\n  flex-direction: row;\\n  gap: 8px;\\n  flex-shrink: 0;\\n}\\n\\n.FSsdmcQ-TaskResultItemmodule--text {\\n  word-wrap: break-word;\\n  color: #333;\\n}\\n`;\nconst s = document.createElement('style');\ns.setAttribute('data-sourceFile', 'packages/overlay/src/components/StatusDialog/TaskResultItem.module.css');\ns.appendChild(document.createTextNode(compiledModule));\ndocument.head.appendChild(s)\nexport const actionArea = 'FSsdmcQ-TaskResultItemmodule--actionArea';\nexport const content = 'FSsdmcQ-TaskResultItemmodule--content';\nexport const file = 'FSsdmcQ-TaskResultItemmodule--file';\nexport const root = 'FSsdmcQ-TaskResultItemmodule--root';\nexport const statusBar = 'FSsdmcQ-TaskResultItemmodule--statusBar';\nexport const text = 'FSsdmcQ-TaskResultItemmodule--text';\nexport const titleArea = 'FSsdmcQ-TaskResultItemmodule--titleArea';\nexport default {actionArea, content, file, root, statusBar, text, titleArea}\n", "import { useEffect, useState } from 'react';\nimport { useCloudpack } from './CloudpackProvider.js';\nimport { taskListSource, type TaskList } from '@ms-cloudpack/api-server/browser';\n\nexport const useStatusDetails = () => {\n  const cloudpack = useCloudpack();\n  const [details, setDetails] = useState<TaskList>({ tasks: [] });\n\n  useEffect(() => {\n    const subscription = cloudpack?.onDataChanged.subscribe(taskListSource, {\n      onData: (data) => {\n        setDetails(data as TaskList);\n      },\n    });\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [cloudpack]);\n\n  return details;\n};\n", "import React from 'react';\nimport styles from './Searchbox.module.css';\n\nexport interface SearchboxProps {\n  value: string;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport function Searchbox({ value, onChange }: SearchboxProps) {\n  return (\n    <>\n      {typeof value === 'string' && (\n        <input type=\"text\" placeholder=\"Search\" className={styles.searchbox} onChange={onChange} value={value} />\n      )}\n    </>\n  );\n}\n", "// THIS FILE IS AUTO GENERATED FROM packages/overlay/src/components/StatusDialog/Searchbox.module.css\n\n\nlet compiledModule = `.aJeqJtva-Searchboxmodule--searchbox {\\n  position: absolute;\\n  font-size: 14px;\\n  font-weight: 400;\\n  box-shadow: none;\\n  padding: 0px 4px;\\n  box-sizing: border-box;\\n  color: rgb(50, 49, 48);\\n  background-color: rgb(255, 255, 255);\\n  display: flex;\\n  flex-flow: row nowrap;\\n  align-items: stretch;\\n  border-radius: 2px;\\n  border: 1px solid rgb(96, 94, 92);\\n  height: 32px;\\n  min-width: 160px;\\n  top: 52px;\\n  right: 20px;\\n}\\n`;\nconst s = document.createElement('style');\ns.setAttribute('data-sourceFile', 'packages/overlay/src/components/StatusDialog/Searchbox.module.css');\ns.appendChild(document.createTextNode(compiledModule));\ndocument.head.appendChild(s)\nexport const searchbox = 'aJeqJtva-Searchboxmodule--searchbox';\nexport default {searchbox}\n"],
+  "mappings": "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",
+  "names": ["React", "React", "React", "React", "React", "React", "compiledModule", "s", "React", "React"]
+}

package/dist/browser-esm/chunks/js/chunk-7KHMDJ6G.js

@@ -0,0 +1,63 @@
+// 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/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
+  };
+}
+
+export {
+  CloudpackProvider,
+  useCloudpack,
+  useDraggable
+};
+//# sourceMappingURL=chunk-7KHMDJ6G.js.map

package/dist/browser-esm/chunks/js/chunk-7KHMDJ6G.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/CloudpackProvider/CloudpackProvider.tsx", "../../../../src/hooks/useDraggable.ts"],
+  "sourcesContent": ["import React, { createContext, useContext } from 'react';\nimport { type CloudpackClient } from '@ms-cloudpack/api-server/browser';\n\nexport const CloudpackContext = createContext<CloudpackClient>(null as unknown as CloudpackClient);\n\nexport function CloudpackProvider({ client, children }: { client: CloudpackClient; children: React.ReactNode }) {\n  return <CloudpackContext.Provider value={client}>{children}</CloudpackContext.Provider>;\n}\n\nexport const useCloudpack = () => useContext(CloudpackContext);\n", "import { type RefObject, useEffect, useState } from 'react';\n\n/**\n * Make an element draggable. Note that changing `enabled` or passing different ref objects\n * will trigger reconfiguring the event handlers, but changing `.current` will not.\n * @returns Whether the element is currently being dragged\n */\nexport function useDraggable(options: {\n  /** Whether to enable dragging */\n  enabled: boolean;\n  /** Element that should be draggable */\n  containerElementRef: RefObject<HTMLElement>;\n  /** The drag handle element */\n  dragElementRef: RefObject<HTMLElement>;\n}) {\n  const { enabled, containerElementRef, dragElementRef } = options;\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  useEffect(() => {\n    const moveTarget = containerElementRef?.current;\n    const dragTarget = dragElementRef?.current;\n\n    if (!enabled || !moveTarget || !dragTarget) {\n      return;\n    }\n\n    let originalX = 0;\n    let originalY = 0;\n    let offset = { x: 0, y: 0 };\n\n    const onPointerMove = (event: PointerEvent) => {\n      moveTarget.style.transform = `translate(${offset.x + event.clientX - originalX}px, ${\n        offset.y + event.clientY - originalY\n      }px)`;\n    };\n\n    const onPointerUp = (event: PointerEvent) => {\n      setIsDragging(false);\n      offset = {\n        x: offset.x + event.clientX - originalX,\n        y: offset.y + event.clientY - originalY,\n      };\n\n      dragTarget.releasePointerCapture(event.pointerId);\n      dragTarget.removeEventListener('pointerup', onPointerUp);\n      dragTarget.removeEventListener('pointermove', onPointerMove);\n\n      event.preventDefault();\n    };\n\n    const onPointerDown = (event: PointerEvent) => {\n      setIsDragging(true);\n      originalX = event.clientX;\n      originalY = event.clientY;\n      dragTarget.setPointerCapture(event.pointerId);\n      dragTarget.addEventListener('pointerup', onPointerUp);\n      dragTarget.addEventListener('pointermove', onPointerMove);\n      event.preventDefault();\n    };\n\n    dragTarget.addEventListener('pointerdown', onPointerDown);\n\n    return () => {\n      dragTarget.removeEventListener('pointerdown', onPointerDown);\n      dragTarget.removeEventListener('pointermove', onPointerMove);\n      dragTarget.removeEventListener('pointerup', onPointerUp);\n    };\n  }, [enabled, containerElementRef, dragElementRef]);\n\n  return {\n    isDragging,\n  };\n}\n"],
+  "mappings": ";AAAA,OAAO,SAAS,eAAe,kBAAkB;AAG1C,IAAM,mBAAmB,cAA+B,IAAkC;AAE1F,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAA2D;AAC9G,SAAO,oCAAC,iBAAiB,UAAjB,EAA0B,OAAO,UAAS,QAAS;AAC7D;AAEO,IAAM,eAAe,MAAM,WAAW,gBAAgB;;;ACT7D,SAAyB,WAAW,gBAAgB;AAO7C,SAAS,aAAa,SAO1B;AACD,QAAM,EAAE,SAAS,qBAAqB,eAAe,IAAI;AAEzD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAElD,YAAU,MAAM;AACd,UAAM,aAAa,qBAAqB;AACxC,UAAM,aAAa,gBAAgB;AAEnC,QAAI,CAAC,WAAW,CAAC,cAAc,CAAC,YAAY;AAC1C;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,QAAI,YAAY;AAChB,QAAI,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE;AAE1B,UAAM,gBAAgB,CAAC,UAAwB;AAC7C,iBAAW,MAAM,YAAY,aAAa,OAAO,IAAI,MAAM,UAAU,SAAS,OAC5E,OAAO,IAAI,MAAM,UAAU,SAC7B;AAAA,IACF;AAEA,UAAM,cAAc,CAAC,UAAwB;AAC3C,oBAAc,KAAK;AACnB,eAAS;AAAA,QACP,GAAG,OAAO,IAAI,MAAM,UAAU;AAAA,QAC9B,GAAG,OAAO,IAAI,MAAM,UAAU;AAAA,MAChC;AAEA,iBAAW,sBAAsB,MAAM,SAAS;AAChD,iBAAW,oBAAoB,aAAa,WAAW;AACvD,iBAAW,oBAAoB,eAAe,aAAa;AAE3D,YAAM,eAAe;AAAA,IACvB;AAEA,UAAM,gBAAgB,CAAC,UAAwB;AAC7C,oBAAc,IAAI;AAClB,kBAAY,MAAM;AAClB,kBAAY,MAAM;AAClB,iBAAW,kBAAkB,MAAM,SAAS;AAC5C,iBAAW,iBAAiB,aAAa,WAAW;AACpD,iBAAW,iBAAiB,eAAe,aAAa;AACxD,YAAM,eAAe;AAAA,IACvB;AAEA,eAAW,iBAAiB,eAAe,aAAa;AAExD,WAAO,MAAM;AACX,iBAAW,oBAAoB,eAAe,aAAa;AAC3D,iBAAW,oBAAoB,eAAe,aAAa;AAC3D,iBAAW,oBAAoB,aAAa,WAAW;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,SAAS,qBAAqB,cAAc,CAAC;AAEjD,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "names": []
+}