@ms-cloudpack/overlay 0.18.2 → 0.19.0

package/lib/components/Button/Button.d.ts

@@ -1,5 +1,27 @@
-import React from 'react';
-export declare const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    primary?: boolean;
-}>;
+import type { FunctionComponent } from 'preact';
+import type { ButtonHTMLAttributes } from 'preact/compat';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button style variant:
+     * - `default`: white background, black text, dark gray border
+     * - `primary`: blue background, white text
+     * - `link`: looks like a link (underline, no background or padding). Note that to set the font
+     *   size or weight, you need to set them on a parent element or use higher specificty than one class.
+     * - `iconOnly`: 32px width/height, light gray background on hover only
+     * - `custom`: only get rid of the browser default styles
+     * @default 'default'
+     */
+    variant?: 'default' | 'primary' | 'link' | 'iconOnly' | 'custom';
+    /** Include this icon (add more as needed) */
+    iconName?: 'close' | 'refresh';
+    /** Alt text for the icon. Defaults to an empty string (presentational). */
+    iconAlt?: string;
+}
+/**
+ * Render a styled button.
+ *
+ * To customize colors, you can either use the CSS variables (see `Button.module.css`)
+ * or increase specificity (like `button.customClass`).
+ */
+export declare const Button: FunctionComponent<ButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

package/lib/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAIlG,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACjE,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAKD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA8BjD,CAAC"}

package/lib/components/Button/Button.js

@@ -1,8 +1,31 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import cx from 'classnames';
 import styles from './Button.module.css';
+// In fluentui-system-icons, this is "ArrowClockwiseFilled"
+import RefreshIcon from '../../images/refresh-20.inline.svg';
+import RefreshWhiteIcon from '../../images/refresh-white-20.inline.svg';
+import CloseIcon from '../../images/dismiss-16-filled.inline.svg';
+/** button variants that get the `.standard` class */
+const standardButtonVariants = ['default', 'primary', 'iconOnly'];
+/**
+ * Render a styled button.
+ *
+ * To customize colors, you can either use the CSS variables (see `Button.module.css`)
+ * or increase specificity (like `button.customClass`).
+ */
 export const Button = (props) => {
-    const { primary, ...other } = props;
-    const className = primary ? styles.primaryButton : styles.standardButton;
-    return React.createElement("button", { ...other, className: className, type: 'button' });
+    const { variant = 'default', iconName, iconAlt, children, class: propsClassName, ...other } = props;
+    const className = cx(styles.root, standardButtonVariants.includes(variant) && styles.standard, styles[variant], (variant === 'primary' || variant === 'default') && styles.defaultPrimary, propsClassName);
+    const iconContent = iconName === 'close'
+        ? CloseIcon
+        : // The approach of importing SVG content as data-urls doesn't allow the icon color to
+            // follow the text color, so for now, we use two versions of the refresh icon depending on
+            // whether the button background is dark or light.
+            iconName === 'refresh'
+                ? variant === 'primary'
+                    ? RefreshWhiteIcon
+                    : RefreshIcon
+                : undefined;
+    return (_jsxs("button", { type: "button", ...other, class: className, children: [iconContent && _jsx("img", { src: iconContent, alt: iconAlt || '' }), !!iconName && variant !== 'iconOnly' && ' ', children] }));
 };
 //# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAoF,CAAC,KAAK,EAAE,EAAE;IAC/G,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC;IACzE,OAAO,mCAAY,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI,CAAC;AACrE,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport styles from './Button.module.css';\n\nexport const Button: React.FC<React.ButtonHTMLAttributes<HTMLButtonElement> & { primary?: boolean }> = (props) => {\n  const { primary, ...other } = props;\n  const className = primary ? styles.primaryButton : styles.standardButton;\n  return <button {...other} className={className} type={'button'} />;\n};\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,2DAA2D;AAC3D,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AACxE,OAAO,SAAS,MAAM,2CAA2C,CAAC;AAoBlE,qDAAqD;AACrD,MAAM,sBAAsB,GAA6B,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAE5F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpG,MAAM,SAAS,GAAG,EAAE,CAClB,MAAM,CAAC,IAAI,EACX,sBAAsB,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,QAAQ,EAC3D,MAAM,CAAC,OAAO,CAAC,EACf,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC,IAAI,MAAM,CAAC,cAAc,EACzE,cAAc,CACf,CAAC;IAEF,MAAM,WAAW,GACf,QAAQ,KAAK,OAAO;QAClB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,qFAAqF;YACrF,0FAA0F;YAC1F,kDAAkD;YAClD,QAAQ,KAAK,SAAS;gBACtB,CAAC,CAAC,OAAO,KAAK,SAAS;oBACrB,CAAC,CAAC,gBAAgB;oBAClB,CAAC,CAAC,WAAW;gBACf,CAAC,CAAC,SAAS,CAAC;IAElB,OAAO,CACL,kBAAQ,IAAI,EAAC,QAAQ,KAAK,KAAK,EAAE,KAAK,EAAE,SAAS,aAC9C,WAAW,IAAI,cAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,IAAI,EAAE,GAAI,EAC5D,CAAC,CAAC,QAAQ,IAAI,OAAO,KAAK,UAAU,IAAI,GAAG,EAC3C,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { FunctionComponent } from 'preact';\nimport type { ButtonHTMLAttributes } from 'preact/compat';\nimport styles from './Button.module.css';\n// In fluentui-system-icons, this is \"ArrowClockwiseFilled\"\nimport RefreshIcon from '../../images/refresh-20.inline.svg';\nimport RefreshWhiteIcon from '../../images/refresh-white-20.inline.svg';\nimport CloseIcon from '../../images/dismiss-16-filled.inline.svg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button style variant:\n   * - `default`: white background, black text, dark gray border\n   * - `primary`: blue background, white text\n   * - `link`: looks like a link (underline, no background or padding). Note that to set the font\n   *   size or weight, you need to set them on a parent element or use higher specificty than one class.\n   * - `iconOnly`: 32px width/height, light gray background on hover only\n   * - `custom`: only get rid of the browser default styles\n   * @default 'default'\n   */\n  variant?: 'default' | 'primary' | 'link' | 'iconOnly' | 'custom';\n  /** Include this icon (add more as needed) */\n  iconName?: 'close' | 'refresh';\n  /** Alt text for the icon. Defaults to an empty string (presentational). */\n  iconAlt?: string;\n}\n\n/** button variants that get the `.standard` class */\nconst standardButtonVariants: ButtonProps['variant'][] = ['default', 'primary', 'iconOnly'];\n\n/**\n * Render a styled button.\n *\n * To customize colors, you can either use the CSS variables (see `Button.module.css`)\n * or increase specificity (like `button.customClass`).\n */\nexport const Button: FunctionComponent<ButtonProps> = (props) => {\n  const { variant = 'default', iconName, iconAlt, children, class: propsClassName, ...other } = props;\n\n  const className = cx(\n    styles.root,\n    standardButtonVariants.includes(variant) && styles.standard,\n    styles[variant],\n    (variant === 'primary' || variant === 'default') && styles.defaultPrimary,\n    propsClassName,\n  );\n\n  const iconContent =\n    iconName === 'close'\n      ? CloseIcon\n      : // The approach of importing SVG content as data-urls doesn't allow the icon color to\n        // follow the text color, so for now, we use two versions of the refresh icon depending on\n        // whether the button background is dark or light.\n        iconName === 'refresh'\n        ? variant === 'primary'\n          ? RefreshWhiteIcon\n          : RefreshIcon\n        : undefined;\n\n  return (\n    <button type=\"button\" {...other} class={className}>\n      {iconContent && <img src={iconContent} alt={iconAlt || ''} />}\n      {!!iconName && variant !== 'iconOnly' && ' '}\n      {children}\n    </button>\n  );\n};\n"]}

package/lib/components/CloudpackProvider/CloudpackProvider.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
 import type { CloudpackClient } from '@ms-cloudpack/api-server/browser';
-export declare const CloudpackContext: React.Context<CloudpackClient>;
-export declare const CloudpackProvider: React.FC<React.PropsWithChildren<{
+import { type FunctionComponent } from 'preact';
+import type { PropsWithChildren } from 'preact/compat';
+export declare const CloudpackContext: import("preact").Context<CloudpackClient>;
+export declare const CloudpackProvider: FunctionComponent<PropsWithChildren<{
     client: CloudpackClient;
 }>>;
 export declare const useCloudpack: () => CloudpackClient;

package/lib/components/CloudpackProvider/CloudpackProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CloudpackProvider.d.ts","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/CloudpackProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExE,eAAO,MAAM,gBAAgB,gCAAqE,CAAC;AAEnG,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,CAAC,CAG5F,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,eAA+C,CAAC"}
+{"version":3,"file":"CloudpackProvider.d.ts","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/CloudpackProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAiB,KAAK,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAC/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGvD,eAAO,MAAM,gBAAgB,2CAAqE,CAAC;AAEnG,eAAO,MAAM,iBAAiB,EAAE,iBAAiB,CAAC,iBAAiB,CAAC;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,CAAC,CAG/F,CAAC;AAEF,eAAO,MAAM,YAAY,QAAO,eAA+C,CAAC"}

package/lib/components/CloudpackProvider/CloudpackProvider.js

@@ -1,8 +1,10 @@
-import React, { createContext, useContext } from 'react';
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { createContext } from 'preact';
+import { useContext } from 'preact/hooks';
 export const CloudpackContext = createContext(null);
 export const CloudpackProvider = (props) => {
     const { client, children } = props;
-    return React.createElement(CloudpackContext.Provider, { value: client }, children);
+    return _jsx(CloudpackContext.Provider, { value: client, children: children });
 };
 export const useCloudpack = () => useContext(CloudpackContext);
 //# sourceMappingURL=CloudpackProvider.js.map

package/lib/components/CloudpackProvider/CloudpackProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"CloudpackProvider.js","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/CloudpackProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAkB,IAAkC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,iBAAiB,GAAmE,CAAC,KAAK,EAAE,EAAE;IACzG,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,IAAG,QAAQ,CAA6B,CAAC;AAC1F,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAoB,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC","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 const CloudpackProvider: React.FC<React.PropsWithChildren<{ client: CloudpackClient }>> = (props) => {\n  const { client, children } = props;\n  return <CloudpackContext.Provider value={client}>{children}</CloudpackContext.Provider>;\n};\n\nexport const useCloudpack = (): CloudpackClient => useContext(CloudpackContext);\n"]}
+{"version":3,"file":"CloudpackProvider.js","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/CloudpackProvider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAA0B,MAAM,QAAQ,CAAC;AAE/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAAkB,IAAkC,CAAC,CAAC;AAEnG,MAAM,CAAC,MAAM,iBAAiB,GAAsE,CAAC,KAAK,EAAE,EAAE;IAC5G,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAA6B,CAAC;AAC1F,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAoB,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import type { CloudpackClient } from '@ms-cloudpack/api-server/browser';\nimport { createContext, type FunctionComponent } from 'preact';\nimport type { PropsWithChildren } from 'preact/compat';\nimport { useContext } from 'preact/hooks';\n\nexport const CloudpackContext = createContext<CloudpackClient>(null as unknown as CloudpackClient);\n\nexport const CloudpackProvider: FunctionComponent<PropsWithChildren<{ client: CloudpackClient }>> = (props) => {\n  const { client, children } = props;\n  return <CloudpackContext.Provider value={client}>{children}</CloudpackContext.Provider>;\n};\n\nexport const useCloudpack = (): CloudpackClient => useContext(CloudpackContext);\n"]}

package/lib/components/CloudpackProvider/useStatus.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import { useCloudpack } from './CloudpackProvider.js';
 import { taskStatsSource } from '@ms-cloudpack/api-server/browser';
 const defaultStatus = {

package/lib/components/CloudpackProvider/useStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStatus.js","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/useStatus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAkB,MAAM,kCAAkC,CAAC;AAInF,MAAM,aAAa,GAAoB;IACrC,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,CAAC;IACjB,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,CAAC;IACd,aAAa,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAoB,EAAE;IAC7C,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAkB,aAAa,CAAC,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,eAAe,EAAE;YACvE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;gBACf,SAAS,CAAC,IAAuB,CAAC,CAAC;YACrC,CAAC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useCloudpack } from './CloudpackProvider.js';\nimport { taskStatsSource, type TaskStats } from '@ms-cloudpack/api-server/browser';\n\nexport type CloudpackStatus = TaskStats;\n\nconst defaultStatus: CloudpackStatus = {\n  status: 'unknown',\n  remainingTasks: 0,\n  totalTasks: 0,\n  totalErrors: 0,\n  totalWarnings: 0,\n};\n\nexport const useStatus = (): CloudpackStatus => {\n  const cloudpack = useCloudpack();\n  const [status, setStatus] = useState<CloudpackStatus>(defaultStatus);\n\n  useEffect(() => {\n    const subscription = cloudpack?.onDataChanged.subscribe(taskStatsSource, {\n      onData: (data) => {\n        setStatus(data as CloudpackStatus);\n      },\n    });\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [cloudpack]);\n\n  return status;\n};\n"]}
+{"version":3,"file":"useStatus.js","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/useStatus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAkB,MAAM,kCAAkC,CAAC;AAInF,MAAM,aAAa,GAAoB;IACrC,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,CAAC;IACjB,UAAU,EAAE,CAAC;IACb,WAAW,EAAE,CAAC;IACd,aAAa,EAAE,CAAC;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAoB,EAAE;IAC7C,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAkB,aAAa,CAAC,CAAC;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,eAAe,EAAE;YACvE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;gBACf,SAAS,CAAC,IAAuB,CAAC,CAAC;YACrC,CAAC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'preact/hooks';\nimport { useCloudpack } from './CloudpackProvider.js';\nimport { taskStatsSource, type TaskStats } from '@ms-cloudpack/api-server/browser';\n\nexport type CloudpackStatus = TaskStats;\n\nconst defaultStatus: CloudpackStatus = {\n  status: 'unknown',\n  remainingTasks: 0,\n  totalTasks: 0,\n  totalErrors: 0,\n  totalWarnings: 0,\n};\n\nexport const useStatus = (): CloudpackStatus => {\n  const cloudpack = useCloudpack();\n  const [status, setStatus] = useState<CloudpackStatus>(defaultStatus);\n\n  useEffect(() => {\n    const subscription = cloudpack?.onDataChanged.subscribe(taskStatsSource, {\n      onData: (data) => {\n        setStatus(data as CloudpackStatus);\n      },\n    });\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [cloudpack]);\n\n  return status;\n};\n"]}

package/lib/components/CloudpackProvider/useStatusDetails.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import { useCloudpack } from './CloudpackProvider.js';
 import { taskListSource } from '@ms-cloudpack/api-server/browser';
 export const useStatusDetails = () => {

package/lib/components/CloudpackProvider/useStatusDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStatusDetails.js","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/useStatusDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAiB,MAAM,kCAAkC,CAAC;AAEjF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAa,EAAE;IAC7C,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,cAAc,EAAE;YACtE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;gBACf,UAAU,CAAC,IAAgB,CAAC,CAAC;YAC/B,CAAC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useCloudpack } from './CloudpackProvider.js';\nimport { taskListSource, type TaskList } from '@ms-cloudpack/api-server/browser';\n\nexport const useStatusDetails = (): TaskList => {\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"]}
+{"version":3,"file":"useStatusDetails.js","sourceRoot":"","sources":["../../../src/components/CloudpackProvider/useStatusDetails.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAiB,MAAM,kCAAkC,CAAC;AAEjF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAa,EAAE;IAC7C,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,cAAc,EAAE;YACtE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;gBACf,UAAU,CAAC,IAAgB,CAAC,CAAC;YAC/B,CAAC;SACF,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,WAAW,EAAE,CAAC;QAC7B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import { useEffect, useState } from 'preact/hooks';\nimport { useCloudpack } from './CloudpackProvider.js';\nimport { taskListSource, type TaskList } from '@ms-cloudpack/api-server/browser';\n\nexport const useStatusDetails = (): TaskList => {\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"]}

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

@@ -1,12 +1,12 @@
-import { default as React } from 'react';
+import type { ComponentChildren, FunctionComponent } from 'preact';
 export interface DialogProps {
     title: string;
     id: string;
     style?: 'default' | 'error';
     draggable?: boolean;
     onClose?: () => void;
-    commands?: React.ReactNode[];
-    children: React.ReactNode;
+    commands?: ComponentChildren;
+    children: ComponentChildren;
 }
-export declare const Dialog: React.FC<DialogProps>;
+export declare const Dialog: FunctionComponent<DialogProps>;
 //# sourceMappingURL=Dialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAU,MAAM,OAAO,CAAC;AAKjD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAmCxC,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMnE,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA4BjD,CAAC"}

package/lib/components/Dialog/Dialog.js

@@ -1,24 +1,20 @@
-import { default as React, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import cx from 'classnames';
+import { useRef } from 'preact/hooks';
 import styles from './Dialog.module.css';
 import { useDraggable } from '../../hooks/useDraggable.js';
-import CloseIcon from '../../images/dismiss-16-filled.inline.svg';
-export const Dialog = ({ title, id, style, draggable, onClose, commands, children }) => {
+import { Button } from '../Button/Button.js';
+export const Dialog = (props) => {
+    const { title, id, style, draggable, onClose, commands, children } = props;
     const draggableRef = useRef(null);
     const draggableTargetRef = useRef(null);
-    const colorAccent = style === 'error' ? 'rgb(164, 38, 44)' : undefined;
-    const cursorDraggable = draggable ? 'move' : undefined;
     useDraggable({
         enabled: !!draggable,
         containerElementRef: draggableRef,
         dragElementRef: draggableTargetRef,
     });
-    return (React.createElement("div", { id: id, 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, "aria-label": "Minimize overlay" },
-                    React.createElement("img", { src: CloseIcon, alt: "" })))),
-            commands && React.createElement("div", { className: styles.commands }, ...commands),
-            children)));
+    return (_jsx("div", { id: id, class: styles.overlay, children: _jsxs("div", { ref: draggableRef, class: cx(styles.dialog, style === 'error' && styles.error), children: [_jsxs("div", { class: styles.titleArea, children: [_jsx("h2", { ref: draggableTargetRef, class: cx(styles.title, draggable && styles.draggable), children: title }), onClose && (
+                        // a close icon is common/universal enough that it doesn't need hover text
+                        _jsx(Button, { variant: "iconOnly", iconName: "close", onClick: onClose, "aria-label": "Close" }))] }), commands && _jsx("div", { class: styles.commands, children: commands }), children] }) }));
 };
 //# sourceMappingURL=Dialog.js.map

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

@@ -1 +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;AAYlE,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC5G,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxD,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;QACX,OAAO,EAAE,CAAC,CAAC,SAAS;QACpB,mBAAmB,EAAE,YAAY;QACjC,cAAc,EAAE,kBAAkB;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,OAAO;QACpC,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,OAAO,IAAI,CACV,gCAAQ,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,gBAAa,kBAAkB;oBAEpF,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,GAAG,CACvB,CACV,CACG;YACL,QAAQ,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,OAAM,QAAQ,CAAO;YAChE,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { default as React, useRef } from 'react';\nimport styles from './Dialog.module.css';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport CloseIcon from '../../images/dismiss-16-filled.inline.svg';\n\nexport interface DialogProps {\n  title: string;\n  id: string;\n  style?: 'default' | 'error';\n  draggable?: boolean;\n  onClose?: () => void;\n  commands?: React.ReactNode[];\n  children: React.ReactNode;\n}\n\nexport const Dialog: React.FC<DialogProps> = ({ title, id, style, draggable, onClose, commands, children }) => {\n  const draggableRef = useRef<HTMLDivElement>(null);\n  const draggableTargetRef = useRef<HTMLDivElement>(null);\n  const colorAccent = style === 'error' ? 'rgb(164, 38, 44)' : undefined;\n  const cursorDraggable = draggable ? 'move' : undefined;\n\n  useDraggable({\n    enabled: !!draggable,\n    containerElementRef: draggableRef,\n    dragElementRef: draggableTargetRef,\n  });\n\n  return (\n    <div id={id} className={styles.overlay}>\n      <div ref={draggableRef} className={styles.dialog} style={{ borderTopColor: colorAccent }}>\n        <div className={styles.titleArea}>\n          <div\n            ref={draggableTargetRef}\n            className={styles.title}\n            style={{ color: colorAccent, cursor: cursorDraggable }}\n          >\n            {title}\n          </div>\n          {onClose && (\n            <button className={styles.closeButton} onClick={onClose} aria-label=\"Minimize overlay\">\n              {/* a close icon is common/universal enough that it doesn't need alt text */}\n              <img src={CloseIcon} alt=\"\" />\n            </button>\n          )}\n        </div>\n        {commands && <div className={styles.commands}>{...commands}</div>}\n        {children}\n      </div>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAY7C,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,kBAAkB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAExD,YAAY,CAAC;QACX,OAAO,EAAE,CAAC,CAAC,SAAS;QACpB,mBAAmB,EAAE,YAAY;QACjC,cAAc,EAAE,kBAAkB;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,OAAO,YAChC,eAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,KAAK,OAAO,IAAI,MAAM,CAAC,KAAK,CAAC,aACjF,eAAK,KAAK,EAAE,MAAM,CAAC,SAAS,aAC1B,aAAI,GAAG,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,YAChF,KAAK,GACH,EACJ,OAAO,IAAI;wBACV,0EAA0E;wBAC1E,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,gBAAa,OAAO,GAAG,CACpF,IACG,EACL,QAAQ,IAAI,cAAK,KAAK,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAO,EACzD,QAAQ,IACL,GACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { ComponentChildren, FunctionComponent } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport styles from './Dialog.module.css';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface DialogProps {\n  title: string;\n  id: string;\n  style?: 'default' | 'error';\n  draggable?: boolean;\n  onClose?: () => void;\n  commands?: ComponentChildren;\n  children: ComponentChildren;\n}\n\nexport const Dialog: FunctionComponent<DialogProps> = (props) => {\n  const { title, id, style, draggable, onClose, commands, children } = props;\n  const draggableRef = useRef<HTMLDivElement>(null);\n  const draggableTargetRef = useRef<HTMLDivElement>(null);\n\n  useDraggable({\n    enabled: !!draggable,\n    containerElementRef: draggableRef,\n    dragElementRef: draggableTargetRef,\n  });\n\n  return (\n    <div id={id} class={styles.overlay}>\n      <div ref={draggableRef} class={cx(styles.dialog, style === 'error' && styles.error)}>\n        <div class={styles.titleArea}>\n          <h2 ref={draggableTargetRef} class={cx(styles.title, draggable && styles.draggable)}>\n            {title}\n          </h2>\n          {onClose && (\n            // a close icon is common/universal enough that it doesn't need hover text\n            <Button variant=\"iconOnly\" iconName=\"close\" onClick={onClose} aria-label=\"Close\" />\n          )}\n        </div>\n        {commands && <div class={styles.commands}>{commands}</div>}\n        {children}\n      </div>\n    </div>\n  );\n};\n"]}

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

@@ -1,8 +1,8 @@
-import { default as React } from 'react';
+import type { FunctionComponent } from 'preact';
 import type { UnsupportedErrorEvent } from './useErrorEvents.js';
 export interface ErrorDialogProps {
     unsupported: UnsupportedErrorEvent[];
 }
-export declare const ErrorDialog: React.FC<ErrorDialogProps>;
+export declare const ErrorDialog: FunctionComponent<ErrorDialogProps>;
 export default ErrorDialog;
 //# sourceMappingURL=ErrorDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ErrorDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC;AAKzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuBlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ErrorDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAKhD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA2B3D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ErrorDialog/ErrorDialog.js

@@ -1,4 +1,5 @@
-import { default as React } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { createElement as _createElement } from "preact";
 import { Button } from '../Button/Button.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { PathError } from './PathError.js';
@@ -8,10 +9,8 @@ import { elementIds } from '../../constants.js';
 export const ErrorDialog = ({ unsupported }) => {
     const cloudpack = useCloudpack();
     const reload = () => void cloudpack.restartAllTasks.mutate();
-    return (React.createElement(Dialog, { title: "Found unsupported paths in your project", id: elementIds.errorDialogRoot, style: "error", commands: [
-            React.createElement(Button, { primary: true, onClick: reload, key: "1" }, "Restart all tasks"),
-        ] },
-        React.createElement("div", { className: styles.root }, unsupported.map((data, index) => (React.createElement(PathError, { ...data, key: index }))))));
+    const editConfig = () => void cloudpack.openConfigEditor.mutate();
+    return (_jsx(Dialog, { title: "Cloudpack: Unsupported paths found in project", id: elementIds.errorDialogRoot, style: "error", commands: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", iconName: "refresh", onClick: reload, children: "Retry bundling" }), _jsx(Button, { onClick: editConfig, children: "Edit Cloudpack config" })] }), children: _jsx("div", { class: styles.root, children: unsupported.map((data, index) => (_createElement(PathError, { ...data, index: index, key: index }))) }) }));
 };
 export default ErrorDialog;
 //# sourceMappingURL=ErrorDialog.js.map

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

@@ -1 +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;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACzE,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAE7D,OAAO,CACL,oBAAC,MAAM,IACL,KAAK,EAAC,yCAAyC,EAC/C,EAAE,EAAE,UAAU,CAAC,eAAe,EAC9B,KAAK,EAAC,OAAO,EACb,QAAQ,EAAE;YACR,oBAAC,MAAM,IAAC,OAAO,QAAC,OAAO,EAAE,MAAM,EAAE,GAAG,EAAC,GAAG,wBAE/B;SACV;QAED,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,CAAC;AAEF,eAAe,WAAW,CAAC","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 const ErrorDialog: React.FC<ErrorDialogProps> = ({ unsupported }) => {\n  const cloudpack = useCloudpack();\n\n  const reload = () => void cloudpack.restartAllTasks.mutate();\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"]}
+{"version":3,"file":"ErrorDialog.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":";;AACA,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;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,MAAM,WAAW,GAAwC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IAClF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAC7D,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,+CAA+C,EACrD,EAAE,EAAE,UAAU,CAAC,eAAe,EAC9B,KAAK,EAAC,OAAO,EACb,QAAQ,EACN,8BACE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,+BAEnD,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,UAAU,sCAAgC,IAC1D,YAGL,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,YACpB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,eAAC,SAAS,OAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAI,CAClD,CAAC,GACE,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\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 const ErrorDialog: FunctionComponent<ErrorDialogProps> = ({ unsupported }) => {\n  const cloudpack = useCloudpack();\n\n  const reload = () => void cloudpack.restartAllTasks.mutate();\n  const editConfig = () => void cloudpack.openConfigEditor.mutate();\n\n  return (\n    <Dialog\n      title=\"Cloudpack: Unsupported paths found in project\"\n      id={elementIds.errorDialogRoot}\n      style=\"error\"\n      commands={\n        <>\n          <Button variant=\"primary\" iconName=\"refresh\" onClick={reload}>\n            Retry bundling\n          </Button>\n          <Button onClick={editConfig}>Edit Cloudpack config</Button>\n        </>\n      }\n    >\n      <div class={styles.root}>\n        {unsupported.map((data, index) => (\n          <PathError {...data} index={index} key={index} />\n        ))}\n      </div>\n    </Dialog>\n  );\n};\n\nexport default ErrorDialog;\n"]}

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

@@ -1,4 +1,8 @@
-import React from 'react';
+import type { FunctionComponent } from 'preact';
 import type { UnsupportedErrorEvent } from './useErrorEvents.js';
-export declare const PathError: React.FC<UnsupportedErrorEvent>;
+import { type ResultsAccordionProps } from '../ResultsAccordion/ResultsAccordion.js';
+/**
+ * Item (collapsible section) in the list of path errors in the ErrorDialog.
+ */
+export declare const PathError: FunctionComponent<UnsupportedErrorEvent & Pick<ResultsAccordionProps, 'index'>>;
 //# sourceMappingURL=PathError.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PathError.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/PathError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjE,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgErD,CAAC"}
+{"version":3,"file":"PathError.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/PathError.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAGjE,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yCAAyC,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC,CA+HrG,CAAC"}

package/lib/components/ErrorDialog/PathError.js

@@ -1,45 +1,23 @@
-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';
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
 import { Button } from '../Button/Button.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
+import { ResultsAccordion, ResultsAccordionContent, } from '../ResultsAccordion/ResultsAccordion.js';
+/**
+ * Item (collapsible section) in the list of path errors in the ErrorDialog.
+ */
 export const PathError = (props) => {
-    const [showContent, setShowContent] = React.useState(false);
-    const { packageName, importPath, issuerUrl, fixable } = props;
+    const { packageName, importPath, issuerUrl, fixable, isValidPackage } = props;
     const cloudpack = useCloudpack();
-    const prettyImportPath = importPath.replace(/^\.\//, '');
-    const prettyImportString = `${packageName}${prettyImportPath === '.' ? '' : `/${prettyImportPath}`}`;
-    const editConfig = () => void cloudpack.openConfigEditor.mutate();
+    const prettyImport = (_jsxs("code", { children: [packageName, importPath === '.' ? '' : `/${importPath.replace(/^\.\//, '')}`] }));
+    const prettyPackage = _jsx("code", { children: packageName });
+    const isTrailingSlash = importPath.endsWith('/');
     const addOverride = () => {
         void cloudpack.addPackageOverride.mutate({ packageName, importPath, issuerUrl, initiatedBy: 'user' });
     };
-    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), "aria-label": showContent ? `Minimize ${prettyImportString}` : `Expand ${prettyImportString}` },
-                React.createElement("img", { className: cx(styles.expandIcon, !showContent && styles.collapsed), src: ChevronDownIcon, alt: "Chevron down icon" })),
-            React.createElement("img", { className: styles.errorIcon, src: ErrorIcon, alt: "Error icon" }),
-            React.createElement("div", { className: styles.title }, `${prettyImportString}`)),
-        showContent && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: styles.commands },
-                fixable && React.createElement(Button, { onClick: addOverride }, "Add override"),
-                React.createElement(Button, { onClick: editConfig }, "Edit config file")),
-            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 }, importPath === '.'
-                        ? `An unrecognized package "${packageName}" was imported.`
-                        : `Path "${importPath}" was imported from package "${packageName}" but was not recognized as an exported path.`)),
-                React.createElement("div", { className: styles.nameValueArea },
-                    React.createElement("div", { className: styles.name }, "Solution"),
-                    React.createElement("div", { className: styles.value }, fixable
-                        ? `Remove the path from the import in your source. (Import from "${packageName}" rather than "${prettyImportString}")`
-                        : importPath === '.'
-                            ? `Make sure the package name is valid.`
-                            : importPath.endsWith('/')
-                                ? `Remove the trailing slash from the import path.`
-                                : `Import not found on package. Make sure the import path is valid.`)))))));
+    const getContent = () => {
+        return (_jsxs(_Fragment, { children: [_jsx(ResultsAccordionContent, { itemName: "Problem", itemValue: _jsxs(_Fragment, { children: [isValidPackage ? (_jsxs(_Fragment, { children: [prettyImport, " was imported, but ", _jsx("code", { children: importPath }), " is not listed in ", prettyPackage, "'s exports map", fixable ? '' : ' and does not appear to exist on disk', "."] })) : (_jsxs(_Fragment, { children: ["An unrecognized package ", prettyPackage, " was imported."] })), issuerUrl && (_jsxs(_Fragment, { children: [_jsx("br", {}), "The bad import request came from:", ' ', _jsx("a", { href: issuerUrl, target: "_blank", rel: "noopener noreferrer", children: issuerUrl })] }))] }) }), _jsx(ResultsAccordionContent, { itemName: "Possible solutions", itemValue: fixable ? (_jsxs(_Fragment, { children: [_jsxs("p", { children: ["Click ", _jsx("strong", { children: "Add override" }), " above to add an exports map entry for this path in your ", "app's ", _jsx("code", { children: "cloudpack.generated.json" }), "."] }), _jsxs("p", { children: ["To automatically make updates like this in the future, add the following to your ", "app's ", _jsx("code", { children: "cloudpack.config.json" }), ":", _jsx("br", {}), _jsx("code", { children: '{ "features": { "autoUpdateEntries": true } }' })] })] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: issuerUrl ? 'Check the requesting URL above' : 'Search for this import in your repo' }), ` to determine whether the problematic import comes from your own code, or a dependency's code.`, !issuerUrl &&
+                                " (You can also try opening this page in Firefox and checking the console to see which package's bundle imported the bad path.)", _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "If from your repo:" }), ' ', isTrailingSlash ? ('Remove the trailing slash from the import path.') : isValidPackage ? (_jsxs(_Fragment, { children: ["Import from the package root or a valid sub-path. (If you think the path is valid, verify that the correct version of ", prettyPackage, " is listed as a dependency.)"] })) : ('Make sure the package name is correct and listed as a dependency of the importing package.')] }), _jsxs("li", { children: [_jsx("strong", { children: "If from a dependency:" }), isTrailingSlash ? ('Ask the owners to remove the trailing slash, or create a temporary patch in your repo.') : (_jsxs("ul", { children: [_jsxs("li", { children: ["Verify that your local installation is up to date (run ", _jsx("code", { children: "yarn" }), " or your repo's package manager)."] }), _jsxs("li", { children: ["Verify whether ", prettyPackage, " is listed in the importing package's dependencies. If not, ask the owners to add it (or temporarily add the dependency in one of your own packages and run ", _jsx("code", { children: "cloudpack init" }), ")."] }), _jsxs("li", { children: ["If the dependency is listed, check whether any ", _jsx("code", { children: "resolutions" }), " exist for", ' ', prettyPackage, " which might be forcing it to an incompatible version. If so, talk to your eng sys team about removing or scoping the resolution."] }), _jsxs("li", { children: ["If ", prettyPackage, " is in ", _jsx("code", { children: "peerDependencies" }), " of the importing package, the peer may be incorrectly satisfied in your dependency tree. Talk to your eng sys team for help."] })] }))] })] })] })) })] }));
+    };
+    return (_jsx(ResultsAccordion, { name: prettyImport, index: props.index, result: "error", headerCommands: fixable && _jsx(Button, { onClick: addOverride, children: "Add override" }), getContent: getContent }));
 };
 //# sourceMappingURL=PathError.js.map

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

@@ -1 +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;AAErE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAEzE,MAAM,CAAC,MAAM,SAAS,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IACrE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;IAC9D,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;IACzD,MAAM,kBAAkB,GAAG,GAAG,WAAW,GAAG,gBAAgB,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,gBAAgB,EAAE,EAAE,CAAC;IAErG,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;IAElE,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,KAAK,SAAS,CAAC,kBAAkB,CAAC,MAAM,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IACxG,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI;QACzB,6BAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC;YAC7C,gCACE,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,gBAC/B,WAAW,CAAC,CAAC,CAAC,YAAY,kBAAkB,EAAE,CAAC,CAAC,CAAC,UAAU,kBAAkB,EAAE;gBAE3F,6BACE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAClE,GAAG,EAAE,eAAe,EACpB,GAAG,EAAC,mBAAmB,GACvB,CACK;YACT,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,YAAY,GAAG;YACrE,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,GAAG,kBAAkB,EAAE,CAAO,CACzD;QACL,WAAW,IAAI,CACd;YACE,6BAAK,SAAS,EAAE,MAAM,CAAC,QAAQ;gBAC5B,OAAO,IAAI,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,mBAAuB;gBAC/D,oBAAC,MAAM,IAAC,OAAO,EAAE,UAAU,uBAA2B,CAClD;YACN,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO;gBAC5B,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,cAAe;gBAE3C,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa;oBAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,cAAe;oBAC1C,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IACzB,UAAU,KAAK,GAAG;wBACjB,CAAC,CAAC,4BAA4B,WAAW,iBAAiB;wBAC1D,CAAC,CAAC,SAAS,UAAU,gCAAgC,WAAW,+CAA+C,CAC7G,CACF;gBACN,6BAAK,SAAS,EAAE,MAAM,CAAC,aAAa;oBAClC,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,eAAgB;oBAC3C,6BAAK,SAAS,EAAE,MAAM,CAAC,KAAK,IACzB,OAAO;wBACN,CAAC,CAAC,iEAAiE,WAAW,kBAAkB,kBAAkB,IAAI;wBACtH,CAAC,CAAC,UAAU,KAAK,GAAG;4BAClB,CAAC,CAAC,sCAAsC;4BACxC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC;gCACxB,CAAC,CAAC,iDAAiD;gCACnD,CAAC,CAAC,kEAAkE,CACtE,CACF,CACF,CACL,CACJ,CACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["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 const PathError: React.FC<UnsupportedErrorEvent> = (props) => {\n  const [showContent, setShowContent] = React.useState<boolean>(false);\n  const { packageName, importPath, issuerUrl, fixable } = props;\n  const cloudpack = useCloudpack();\n  const prettyImportPath = importPath.replace(/^\\.\\//, '');\n  const prettyImportString = `${packageName}${prettyImportPath === '.' ? '' : `/${prettyImportPath}`}`;\n\n  const editConfig = () => void cloudpack.openConfigEditor.mutate();\n\n  const addOverride = () => {\n    void cloudpack.addPackageOverride.mutate({ packageName, importPath, issuerUrl, initiatedBy: 'user' });\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 ${prettyImportString}` : `Expand ${prettyImportString}`}\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}>{`${prettyImportString}`}</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 \"${prettyImportString}\")`\n                  : importPath === '.'\n                    ? `Make sure the package name is valid.`\n                    : importPath.endsWith('/')\n                      ? `Remove the trailing slash from the import path.`\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"]}
+{"version":3,"file":"PathError.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/PathError.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport type { UnsupportedErrorEvent } from './useErrorEvents.js';\nimport { Button } from '../Button/Button.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport {\n  ResultsAccordion,\n  ResultsAccordionContent,\n  type ResultsAccordionProps,\n} from '../ResultsAccordion/ResultsAccordion.js';\n\n/**\n * Item (collapsible section) in the list of path errors in the ErrorDialog.\n */\nexport const PathError: FunctionComponent<UnsupportedErrorEvent & Pick<ResultsAccordionProps, 'index'>> = (props) => {\n  const { packageName, importPath, issuerUrl, fixable, isValidPackage } = props;\n  const cloudpack = useCloudpack();\n  const prettyImport = (\n    <code>\n      {packageName}\n      {importPath === '.' ? '' : `/${importPath.replace(/^\\.\\//, '')}`}\n    </code>\n  );\n  const prettyPackage = <code>{packageName}</code>;\n  const isTrailingSlash = importPath.endsWith('/');\n\n  const addOverride = () => {\n    void cloudpack.addPackageOverride.mutate({ packageName, importPath, issuerUrl, initiatedBy: 'user' });\n  };\n\n  const getContent = () => {\n    return (\n      <>\n        <ResultsAccordionContent\n          itemName=\"Problem\"\n          itemValue={\n            <>\n              {isValidPackage ? (\n                <>\n                  {prettyImport} was imported, but <code>{importPath}</code> is not listed in {prettyPackage}&apos;s\n                  exports map{fixable ? '' : ' and does not appear to exist on disk'}.\n                </>\n              ) : (\n                <>An unrecognized package {prettyPackage} was imported.</>\n              )}\n              {issuerUrl && (\n                <>\n                  <br />\n                  The bad import request came from:{' '}\n                  <a href={issuerUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n                    {issuerUrl}\n                  </a>\n                </>\n              )}\n            </>\n          }\n        />\n        <ResultsAccordionContent\n          itemName=\"Possible solutions\"\n          itemValue={\n            fixable ? (\n              <>\n                <p>\n                  Click <strong>Add override</strong> above to add an exports map entry for this path in your {\"app's \"}\n                  <code>cloudpack.generated.json</code>.\n                </p>\n                <p>\n                  To automatically make updates like this in the future, add the following to your {\"app's \"}\n                  <code>cloudpack.config.json</code>:\n                  <br />\n                  <code>{'{ \"features\": { \"autoUpdateEntries\": true } }'}</code>\n                </p>\n              </>\n            ) : (\n              <>\n                <strong>{issuerUrl ? 'Check the requesting URL above' : 'Search for this import in your repo'}</strong>\n                {` to determine whether the problematic import comes from your own code, or a dependency's code.`}\n                {!issuerUrl &&\n                  \" (You can also try opening this page in Firefox and checking the console to see which package's bundle imported the bad path.)\"}\n                <ul>\n                  <li>\n                    <strong>If from your repo:</strong>{' '}\n                    {isTrailingSlash ? (\n                      'Remove the trailing slash from the import path.'\n                    ) : isValidPackage ? (\n                      <>\n                        Import from the package root or a valid sub-path. (If you think the path is valid, verify that\n                        the correct version of {prettyPackage} is listed as a dependency.)\n                      </>\n                    ) : (\n                      'Make sure the package name is correct and listed as a dependency of the importing package.'\n                    )}\n                  </li>\n                  <li>\n                    <strong>If from a dependency:</strong>\n                    {isTrailingSlash ? (\n                      'Ask the owners to remove the trailing slash, or create a temporary patch in your repo.'\n                    ) : (\n                      <ul>\n                        <li>\n                          Verify that your local installation is up to date (run <code>yarn</code> or your repo&apos;s\n                          package manager).\n                        </li>\n                        {/* If isValidPackage is false, obviously a dependency is missing. But also show this message\n                        if the package is found in the repo, because there could be an implicit dependency resulting in\n                        the wrong version being picked up. */}\n                        <li>\n                          Verify whether {prettyPackage} is listed in the importing package&apos;s dependencies. If not,\n                          ask the owners to add it (or temporarily add the dependency in one of your own packages and\n                          run <code>cloudpack init</code>).\n                        </li>\n                        <li>\n                          If the dependency is listed, check whether any <code>resolutions</code> exist for{' '}\n                          {prettyPackage} which might be forcing it to an incompatible version. If so, talk to your eng\n                          sys team about removing or scoping the resolution.\n                        </li>\n                        <li>\n                          If {prettyPackage} is in <code>peerDependencies</code> of the importing package, the peer may\n                          be incorrectly satisfied in your dependency tree. Talk to your eng sys team for help.\n                        </li>\n                      </ul>\n                    )}\n                  </li>\n                </ul>\n              </>\n            )\n          }\n        />\n      </>\n    );\n  };\n\n  return (\n    <ResultsAccordion\n      name={prettyImport}\n      index={props.index}\n      result=\"error\"\n      headerCommands={fixable && <Button onClick={addOverride}>Add override</Button>}\n      getContent={getContent}\n    />\n  );\n};\n"]}

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

@@ -2,10 +2,19 @@ export type ErrorEvents = {
     unsupported: UnsupportedErrorEvent[];
 };
 export type UnsupportedErrorEvent = {
+    /** Package name being imported */
     packageName: string;
+    /** Path within the package being imported (`'.'` for root) */
     importPath: string;
+    /**
+     * URL that issued the bad request. This will be undefined if the browser didn't set it, or if it
+     * was incorrectly set to the current page URL (most browsers except Firefox do this).
+     */
     issuerUrl?: string;
+    /** True if this is a valid import that can be handled by `addPackageOverride` */
     fixable?: boolean;
+    /** True if the package exists in the resolve map (even if the import path wasn't valid) */
+    isValidPackage?: boolean;
 };
 export declare const useErrorEvents: () => ErrorEvents;
 //# sourceMappingURL=useErrorEvents.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useErrorEvents.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/useErrorEvents.ts"],"names":[],"mappings":"AAyBA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,cAAc,QAAO,WAkEjC,CAAC"}
+{"version":3,"file":"useErrorEvents.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/useErrorEvents.ts"],"names":[],"mappings":"AAyBA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,kCAAkC;IAClC,WAAW,EAAE,MAAM,CAAC;IACpB,8DAA8D;IAC9D,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,2FAA2F;IAC3F,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,cAAc,QAAO,WA+FjC,CAAC"}

package/lib/components/ErrorDialog/useErrorEvents.js

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'preact/hooks';
 import { parseImportString } from '@ms-cloudpack/path-string-parsing';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { errorEntrySource } from '@ms-cloudpack/api-server/browser';
@@ -13,7 +13,13 @@ const hasMessage = (event) => {
 export const useErrorEvents = () => {
     const [errorEvents, setErrorEvents] = useState({ unsupported: [] });
     const cloudpack = useCloudpack();
+    // This should always be set by an inline script
+    const pageErrors = window.__pageErrors;
     useEffect(() => {
+        if (!pageErrors) {
+            console.error('[Cloudpack] window.__pageErrors not found (unable to handle unsupported imports)');
+            return;
+        }
         const handleUnsupportedError = (message, issuerUrl) => {
             const errorRegex = /[Mm]odule specifier,? ['"](.*?)['"]/;
             const match = message.match(errorRegex);
@@ -23,10 +29,30 @@ export const useErrorEvents = () => {
             const importString = parseImportString(match[1]);
             const { packageName, importPath } = importString;
             (async () => {
-                const { fixable } = await cloudpack.validatePackageOverride.query({ packageName, importPath, issuerUrl });
+                if (issuerUrl && issuerUrl === location.href) {
+                    // Issuer URL is often incorrectly set to the current page URL, so just remove it
+                    issuerUrl = undefined;
+                }
+                // Check whether importPath is valid for this package.
+                // Unfortunately, due to the lack of issuerUrl support in most browsers, this might not be
+                // accurate if there are multiple versions of the same package (it will fall back to
+                // whichever version is at the top level of the resolve map, which may not be the version
+                // that's actually being imported in context).
+                const { fixable } = await cloudpack.validatePackageOverride.query({
+                    packageName,
+                    importPath,
+                    issuerUrl,
+                });
+                // If importPath doesn't appear to be valid, attempt to check whether the package exists
+                // elsewhere in the resolve map (to refine the error message). This check isn't perfect
+                // since it assumes the path '.' exists for that package, and it's also possible that the
+                // package is installed somewhere in the repo but hasn't ended up in the resolve map yet.
+                const isValidPackage = fixable ||
+                    (importPath !== '.' &&
+                        (await cloudpack.validatePackageOverride.query({ packageName, importPath: '.', issuerUrl })).fixable);
                 setErrorEvents((prev) => ({
                     ...prev,
-                    unsupported: [...prev.unsupported, { packageName, importPath, issuerUrl: issuerUrl, fixable }],
+                    unsupported: [...prev.unsupported, { packageName, importPath, issuerUrl, fixable, isValidPackage }],
                 }));
             })().catch(() => {
                 // no-op
@@ -40,7 +66,6 @@ export const useErrorEvents = () => {
                 }
             },
         });
-        const pageErrors = window.__pageErrors;
         pageErrors.unregister();
         // Append unsupported paths to the list.
         window.addEventListener('error', (event) => {
@@ -61,7 +86,7 @@ export const useErrorEvents = () => {
         return () => {
             subscription.unsubscribe();
         };
-    }, [cloudpack]);
+    }, [cloudpack, pageErrors]);
     return errorEvents;
 };
 //# sourceMappingURL=useErrorEvents.js.map