@ms-cloudpack/overlay 0.18.3 → 0.19.0

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

@@ -1 +1 @@
-{"version":3,"file":"useErrorEvents.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/useErrorEvents.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { parseImportString } from '@ms-cloudpack/path-string-parsing';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { errorEntrySource } from '@ms-cloudpack/api-server/browser';\n\n// Interface with reason as a record.\ninterface ReasonRecord extends PromiseRejectionEvent {\n  readonly reason: Record<string, unknown>;\n}\n\n// Interface with message as a string.\ninterface ReasonString extends ReasonRecord {\n  readonly reason: { message: string };\n}\n\n// Verify the reason is a record.\nconst reasonIsRecord = (event: PromiseRejectionEvent): event is ReasonRecord => {\n  return typeof event.reason === 'object' && !Array.isArray(event.reason) && event.reason !== null;\n};\n\n// Verify the reason has a message which is a string.\nconst hasMessage = (event: PromiseRejectionEvent): event is ReasonString => {\n  return reasonIsRecord(event) && typeof event.reason.message === 'string';\n};\n\nexport type ErrorEvents = {\n  unsupported: UnsupportedErrorEvent[];\n};\n\nexport type UnsupportedErrorEvent = {\n  packageName: string;\n  importPath: string;\n  issuerUrl?: string;\n  fixable?: boolean;\n};\n\nexport const useErrorEvents = (): ErrorEvents => {\n  const [errorEvents, setErrorEvents] = useState<ErrorEvents>({ unsupported: [] });\n  const cloudpack = useCloudpack();\n\n  useEffect(() => {\n    const handleUnsupportedError = (message: string, issuerUrl?: string): void => {\n      const errorRegex = /[Mm]odule specifier,? ['\"](.*?)['\"]/;\n      const match = message.match(errorRegex);\n\n      if (!match) {\n        return;\n      }\n\n      const importString = parseImportString(match[1]);\n      const { packageName, importPath } = importString;\n\n      (async () => {\n        const { fixable } = await cloudpack.validatePackageOverride.query({ packageName, importPath, issuerUrl });\n        setErrorEvents((prev) => ({\n          ...prev,\n          unsupported: [...prev.unsupported, { packageName, importPath, issuerUrl: issuerUrl, fixable }],\n        }));\n      })().catch(() => {\n        // no-op\n      });\n    };\n\n    const subscription = cloudpack.onDataChanged.subscribe(errorEntrySource, {\n      onData: (data) => {\n        if (data) {\n          console.error(data);\n          handleUnsupportedError(String(data));\n        }\n      },\n    });\n\n    const pageErrors = window.__pageErrors;\n\n    pageErrors.unregister();\n\n    // Append unsupported paths to the list.\n    window.addEventListener('error', (event: ErrorEvent) => {\n      handleUnsupportedError(event.message, event.filename);\n    });\n\n    // Handle errors caught before rendering.\n    for (const error of pageErrors.uncaughtErrors) {\n      handleUnsupportedError(error.message, error.filename);\n    }\n\n    // Append unsupported paths to the list.\n    window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {\n      hasMessage(event) && handleUnsupportedError(event.reason.message);\n    });\n\n    // Handle rejections caught before rendering.\n    for (const error of pageErrors.uncaughtRejections) {\n      hasMessage(error) && handleUnsupportedError(error.reason.message);\n    }\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [cloudpack]);\n\n  return errorEvents;\n};\n"]}
+{"version":3,"file":"useErrorEvents.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/useErrorEvents.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'preact/hooks';\nimport { parseImportString } from '@ms-cloudpack/path-string-parsing';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { errorEntrySource } from '@ms-cloudpack/api-server/browser';\n\n// Interface with reason as a record.\ninterface ReasonRecord extends PromiseRejectionEvent {\n  readonly reason: Record<string, unknown>;\n}\n\n// Interface with message as a string.\ninterface ReasonString extends ReasonRecord {\n  readonly reason: { message: string };\n}\n\n// Verify the reason is a record.\nconst reasonIsRecord = (event: PromiseRejectionEvent): event is ReasonRecord => {\n  return typeof event.reason === 'object' && !Array.isArray(event.reason) && event.reason !== null;\n};\n\n// Verify the reason has a message which is a string.\nconst hasMessage = (event: PromiseRejectionEvent): event is ReasonString => {\n  return reasonIsRecord(event) && typeof event.reason.message === 'string';\n};\n\nexport type ErrorEvents = {\n  unsupported: UnsupportedErrorEvent[];\n};\n\nexport type UnsupportedErrorEvent = {\n  /** Package name being imported */\n  packageName: string;\n  /** Path within the package being imported (`'.'` for root) */\n  importPath: string;\n  /**\n   * URL that issued the bad request. This will be undefined if the browser didn't set it, or if it\n   * was incorrectly set to the current page URL (most browsers except Firefox do this).\n   */\n  issuerUrl?: string;\n  /** True if this is a valid import that can be handled by `addPackageOverride` */\n  fixable?: boolean;\n  /** True if the package exists in the resolve map (even if the import path wasn't valid) */\n  isValidPackage?: boolean;\n};\n\nexport const useErrorEvents = (): ErrorEvents => {\n  const [errorEvents, setErrorEvents] = useState<ErrorEvents>({ unsupported: [] });\n  const cloudpack = useCloudpack();\n  // This should always be set by an inline script\n  const pageErrors = window.__pageErrors;\n\n  useEffect(() => {\n    if (!pageErrors) {\n      console.error('[Cloudpack] window.__pageErrors not found (unable to handle unsupported imports)');\n      return;\n    }\n\n    const handleUnsupportedError = (message: string, issuerUrl?: string): void => {\n      const errorRegex = /[Mm]odule specifier,? ['\"](.*?)['\"]/;\n      const match = message.match(errorRegex);\n\n      if (!match) {\n        return;\n      }\n\n      const importString = parseImportString(match[1]);\n      const { packageName, importPath } = importString;\n\n      (async () => {\n        if (issuerUrl && issuerUrl === location.href) {\n          // Issuer URL is often incorrectly set to the current page URL, so just remove it\n          issuerUrl = undefined;\n        }\n\n        // Check whether importPath is valid for this package.\n        // Unfortunately, due to the lack of issuerUrl support in most browsers, this might not be\n        // accurate if there are multiple versions of the same package (it will fall back to\n        // whichever version is at the top level of the resolve map, which may not be the version\n        // that's actually being imported in context).\n        const { fixable } = await cloudpack.validatePackageOverride.query({\n          packageName,\n          importPath,\n          issuerUrl,\n        });\n\n        // If importPath doesn't appear to be valid, attempt to check whether the package exists\n        // elsewhere in the resolve map (to refine the error message). This check isn't perfect\n        // since it assumes the path '.' exists for that package, and it's also possible that the\n        // package is installed somewhere in the repo but hasn't ended up in the resolve map yet.\n        const isValidPackage =\n          fixable ||\n          (importPath !== '.' &&\n            (await cloudpack.validatePackageOverride.query({ packageName, importPath: '.', issuerUrl })).fixable);\n\n        setErrorEvents((prev) => ({\n          ...prev,\n          unsupported: [...prev.unsupported, { packageName, importPath, issuerUrl, fixable, isValidPackage }],\n        }));\n      })().catch(() => {\n        // no-op\n      });\n    };\n\n    const subscription = cloudpack.onDataChanged.subscribe(errorEntrySource, {\n      onData: (data) => {\n        if (data) {\n          console.error(data);\n          handleUnsupportedError(String(data));\n        }\n      },\n    });\n\n    pageErrors.unregister();\n\n    // Append unsupported paths to the list.\n    window.addEventListener('error', (event: ErrorEvent) => {\n      handleUnsupportedError(event.message, event.filename);\n    });\n\n    // Handle errors caught before rendering.\n    for (const error of pageErrors.uncaughtErrors) {\n      handleUnsupportedError(error.message, error.filename);\n    }\n\n    // Append unsupported paths to the list.\n    window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {\n      hasMessage(event) && handleUnsupportedError(event.reason.message);\n    });\n\n    // Handle rejections caught before rendering.\n    for (const error of pageErrors.uncaughtRejections) {\n      hasMessage(error) && handleUnsupportedError(error.reason.message);\n    }\n\n    return () => {\n      subscription.unsubscribe();\n    };\n  }, [cloudpack, pageErrors]);\n\n  return errorEvents;\n};\n"]}

package/lib/components/Overlay/Overlay.d.ts

@@ -0,0 +1,3 @@
+import type { FunctionComponent } from 'preact';
+export declare const Overlay: FunctionComponent;
+//# sourceMappingURL=Overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAWhD,eAAO,MAAM,OAAO,EAAE,iBAmCrB,CAAC"}

package/lib/components/{StatusOverlay/StatusOverlay.js → Overlay/Overlay.js}

@@ -1,11 +1,13 @@
-import React, { useCallback, useState, useRef } from 'react';
+import { jsx as _jsx } from "preact/jsx-runtime";
+import { lazy, Suspense } from 'preact/compat';
+import { useCallback, useState, useRef, useEffect } from 'preact/hooks';
 import { StatusBadge } from '../StatusBadge/StatusBadge.js';
 import { useStatus } from '../CloudpackProvider/useStatus.js';
 import { useErrorEvents } from '../ErrorDialog/useErrorEvents.js';
 import { usePageLoadTimeReporter } from '../../hooks/usePageLoadTimeReporter.js';
-const StatusDialog = React.lazy(() => import('../StatusDialog/StatusDialog.js'));
-const ErrorDialog = React.lazy(() => import('../ErrorDialog/ErrorDialog.js'));
-export const StatusOverlay = () => {
+const StatusDialog = lazy(() => import('../StatusDialog/StatusDialog.js'));
+const ErrorDialog = lazy(() => import('../ErrorDialog/ErrorDialog.js'));
+export const Overlay = () => {
     const pageLoadTimeReport = usePageLoadTimeReporter();
     const [isExpanded, setIsExpanded] = useState(false);
     const status = useStatus();
@@ -13,7 +15,7 @@ export const StatusOverlay = () => {
     const { unsupported } = useErrorEvents();
     // If we haven't set a specific state and we become idle,
     // pop open the details if there are errors.
-    React.useEffect(() => {
+    useEffect(() => {
         if (!isExpanded &&
             prevStatus.current?.status !== 'idle' &&
             status.status === 'idle' &&
@@ -26,7 +28,7 @@ export const StatusOverlay = () => {
         console.log(`Toggling minimized state to ${!isExpanded}`);
         setIsExpanded(!isExpanded);
     }, [isExpanded]);
-    const result = unsupported.length ? (React.createElement(ErrorDialog, { unsupported: unsupported })) : isExpanded ? (React.createElement(StatusDialog, { onClose: toggleMinimized })) : (React.createElement(StatusBadge, { onExpand: toggleMinimized, pageLoadTimeReport: pageLoadTimeReport }));
-    return React.createElement(React.Suspense, { fallback: null }, result);
+    const result = unsupported.length ? (_jsx(ErrorDialog, { unsupported: unsupported })) : isExpanded ? (_jsx(StatusDialog, { onClose: toggleMinimized })) : (_jsx(StatusBadge, { onExpand: toggleMinimized, pageLoadTimeReport: pageLoadTimeReport }));
+    return _jsx(Suspense, { fallback: null, children: result });
 };
-//# sourceMappingURL=StatusOverlay.js.map
+//# sourceMappingURL=Overlay.js.map

package/lib/components/Overlay/Overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Overlay.js","sourceRoot":"","sources":["../../../src/components/Overlay/Overlay.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAClE,OAAO,EAAE,uBAAuB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC,CAAC;AAC3E,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,+BAA+B,CAAC,CAAC,CAAC;AAExE,MAAM,CAAC,MAAM,OAAO,GAAsB,GAAG,EAAE;IAC7C,MAAM,kBAAkB,GAAG,uBAAuB,EAAE,CAAC;IACrD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,EAA+B,CAAC;IACzD,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAEzC,yDAAyD;IACzD,4CAA4C;IAC5C,SAAS,CAAC,GAAG,EAAE;QACb,IACE,CAAC,UAAU;YACX,UAAU,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM;YACrC,MAAM,CAAC,MAAM,KAAK,MAAM;YACxB,CAAC,UAAU,CAAC,OAAO,EAAE,WAAW,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,CAAC,EACpE,CAAC;YACD,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;QACD,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC;IAC9B,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAEzB,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,OAAO,CAAC,GAAG,CAAC,+BAA+B,CAAC,UAAU,EAAE,CAAC,CAAC;QAC1D,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAClC,KAAC,WAAW,IAAC,WAAW,EAAE,WAAW,GAAI,CAC1C,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,YAAY,IAAC,OAAO,EAAE,eAAe,GAAI,CAC3C,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,QAAQ,EAAE,eAAe,EAAE,kBAAkB,EAAE,kBAAkB,GAAI,CACnF,CAAC;IAEF,OAAO,KAAC,QAAQ,IAAC,QAAQ,EAAE,IAAI,YAAG,MAAM,GAAY,CAAC;AACvD,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { lazy, Suspense } from 'preact/compat';\nimport { useCallback, useState, useRef, useEffect } from 'preact/hooks';\nimport { StatusBadge } from '../StatusBadge/StatusBadge.js';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { useErrorEvents } from '../ErrorDialog/useErrorEvents.js';\nimport { usePageLoadTimeReporter } from '../../hooks/usePageLoadTimeReporter.js';\n\nconst StatusDialog = lazy(() => import('../StatusDialog/StatusDialog.js'));\nconst ErrorDialog = lazy(() => import('../ErrorDialog/ErrorDialog.js'));\n\nexport const Overlay: FunctionComponent = () => {\n  const pageLoadTimeReport = usePageLoadTimeReporter();\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n  const status = useStatus();\n  const prevStatus = useRef<CloudpackStatus | undefined>();\n  const { unsupported } = useErrorEvents();\n\n  // If we haven't set a specific state and we become idle,\n  // pop open the details if there are errors.\n  useEffect(() => {\n    if (\n      !isExpanded &&\n      prevStatus.current?.status !== 'idle' &&\n      status.status === 'idle' &&\n      (prevStatus.current?.totalErrors || 0) !== (status.totalErrors || 0)\n    ) {\n      setIsExpanded(true);\n    }\n    prevStatus.current = status;\n  }, [status, isExpanded]);\n\n  const toggleMinimized = useCallback(() => {\n    console.log(`Toggling minimized state to ${!isExpanded}`);\n    setIsExpanded(!isExpanded);\n  }, [isExpanded]);\n\n  const result = unsupported.length ? (\n    <ErrorDialog unsupported={unsupported} />\n  ) : isExpanded ? (\n    <StatusDialog onClose={toggleMinimized} />\n  ) : (\n    <StatusBadge onExpand={toggleMinimized} pageLoadTimeReport={pageLoadTimeReport} />\n  );\n\n  return <Suspense fallback={null}>{result}</Suspense>;\n};\n"]}

package/lib/components/ResultsAccordion/ResultsAccordion.d.ts

@@ -0,0 +1,40 @@
+import type { ComponentChildren, FunctionComponent } from 'preact';
+export interface ResultsAccordionProps {
+    /** Name of the bundle task or other item (can have formatting, but should not have a header element) */
+    name: ComponentChildren;
+    /** Index used for generating accordion element IDs */
+    index: number;
+    result: 'success' | 'warning' | 'error';
+    /** Info that goes at the end of the header, inside the clickable area */
+    headerEndContent?: string;
+    /** Commands to go at the end of the header, outside the clickable area */
+    headerCommands?: ComponentChildren;
+    /**
+     * Get the content, only if the section is expanded.
+     * Use `CollapsibleResultsSubSection` for formatting (returning multiple sections if needed).
+     *
+     * This callback is to prevent rendering thousands of bundle result details unnecessarily.
+     */
+    getContent: () => ComponentChildren;
+}
+export interface ResultsAccordionContentProps {
+    /** Will be at start of sub-section and styled slightly larger if provided */
+    title?: string;
+    /** Item name, such as "Input path". Ignored if `itemValue` is not provided. */
+    itemName?: string;
+    /** Value corresponding to `itemName`, such as the path to a package. Requires `itemName`. */
+    itemValue?: ComponentChildren;
+    /** Custom children */
+    children?: ComponentChildren;
+}
+/**
+ * Collapsible section for displaying results of a bundle task or other item.
+ * This handles the header formatting and layout, expanding/collapsing, and displaying content.
+ */
+export declare const ResultsAccordion: FunctionComponent<ResultsAccordionProps>;
+/**
+ * Sub-section to return from `ResultsAccordionProps.getContent`.
+ * If there are no children and no `itemValue`, the section will be ignored.
+ */
+export declare const ResultsAccordionContent: FunctionComponent<ResultsAccordionContentProps>;
+//# sourceMappingURL=ResultsAccordion.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ResultsAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/ResultsAccordion/ResultsAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAUnE,MAAM,WAAW,qBAAqB;IACpC,wGAAwG;IACxG,IAAI,EAAE,iBAAiB,CAAC;IACxB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;;;OAKG;IACH,UAAU,EAAE,MAAM,iBAAiB,CAAC;CACrC;AAED,MAAM,WAAW,4BAA4B;IAC3C,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAQD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAuCrE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,CAmBnF,CAAC"}

package/lib/components/ResultsAccordion/ResultsAccordion.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import { useState } from 'preact/hooks';
+import cx from 'classnames';
+import styles from './ResultsAccordion.module.css';
+import ErrorIcon from '../../images/error-24.inline.svg';
+import SuccessIcon from '../../images/success-24.inline.svg';
+import WarningIcon from '../../images/warning-24.inline.svg';
+import ChevronDownIcon from '../../images/chevrondown-20.inline.svg';
+import { Button } from '../Button/Button.js';
+const resultIcons = {
+    error: _jsx("img", { src: ErrorIcon, alt: "Error" }),
+    warning: _jsx("img", { src: WarningIcon, alt: "Warning" }),
+    success: _jsx("img", { src: SuccessIcon, alt: "Success" }),
+};
+/**
+ * Collapsible section for displaying results of a bundle task or other item.
+ * This handles the header formatting and layout, expanding/collapsing, and displaying content.
+ */
+export const ResultsAccordion = (props) => {
+    const { name, result, headerEndContent, headerCommands, getContent, index } = props;
+    const [isOpen, setIsOpen] = useState(undefined);
+    const showContent = isOpen === true || (isOpen === undefined && result === 'error');
+    const headerButtonId = `results-accordion-button-${index}`;
+    const contentId = `results-accordion-content-${index}`;
+    // Trying to follow the accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+    // except the odd thing is we want to allow a separate click target for a refresh button at the end
+    return (_jsxs("div", { class: styles.root, children: [_jsxs("div", { class: cx(styles.header, styles[result], showContent && styles.expanded), children: [_jsx("h3", { class: styles.headerButtonWrapper, children: _jsxs(Button, { id: headerButtonId, class: styles.headerButton, variant: "custom", "aria-expanded": showContent, "aria-controls": contentId, onClick: () => setIsOpen(!showContent), children: [_jsx("img", { class: cx(styles.expandIcon, !showContent && styles.collapsed), src: ChevronDownIcon, 
+                                    // With the wrapping button, the chevron is presentation-only
+                                    alt: "" }), resultIcons[result], _jsx("div", { class: styles.title, children: name }), headerEndContent && _jsx("div", { class: styles.headerEnd, children: headerEndContent })] }) }), headerCommands && _jsx("div", { class: styles.headerCommands, children: headerCommands })] }), _jsx("div", { id: contentId, class: showContent ? styles.content : styles.contentHidden, children: showContent && getContent() })] }));
+};
+/**
+ * Sub-section to return from `ResultsAccordionProps.getContent`.
+ * If there are no children and no `itemValue`, the section will be ignored.
+ */
+export const ResultsAccordionContent = (props) => {
+    const { title, itemName, itemValue, children } = props;
+    if (!children && !(itemValue && itemName)) {
+        return null;
+    }
+    // Use a fragment so the sub-parts use the parent's flex styling
+    return (_jsxs(_Fragment, { children: [title && _jsx("h4", { class: styles.title, children: title }), itemName && itemValue ? (_jsxs("div", { children: [_jsx("div", { class: styles.itemName, children: itemName }), _jsx("div", { class: styles.itemValue, children: itemValue })] })) : null, children] }));
+};
+//# sourceMappingURL=ResultsAccordion.js.map

package/lib/components/ResultsAccordion/ResultsAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResultsAccordion.js","sourceRoot":"","sources":["../../../src/components/ResultsAccordion/ResultsAccordion.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,SAAS,MAAM,kCAAkC,CAAC;AACzD,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,eAAe,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAgC7C,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,OAAO,GAAG;IAC1C,OAAO,EAAE,cAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,SAAS,GAAG;IAChD,OAAO,EAAE,cAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,SAAS,GAAG;CACjD,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA6C,CAAC,KAAK,EAAE,EAAE;IAClF,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACpF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IACrE,MAAM,WAAW,GAAG,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,OAAO,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,4BAA4B,KAAK,EAAE,CAAC;IAC3D,MAAM,SAAS,GAAG,6BAA6B,KAAK,EAAE,CAAC;IAEvD,8FAA8F;IAC9F,mGAAmG;IACnG,OAAO,CACL,eAAK,KAAK,EAAE,MAAM,CAAC,IAAI,aACrB,eAAK,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,IAAI,MAAM,CAAC,QAAQ,CAAC,aAC3E,aAAI,KAAK,EAAE,MAAM,CAAC,mBAAmB,YACnC,MAAC,MAAM,IACL,EAAE,EAAE,cAAc,EAClB,KAAK,EAAE,MAAM,CAAC,YAAY,EAC1B,OAAO,EAAC,QAAQ,mBACD,WAAW,mBACX,SAAS,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,aAEtC,cACE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,WAAW,IAAI,MAAM,CAAC,SAAS,CAAC,EAC9D,GAAG,EAAE,eAAe;oCACpB,6DAA6D;oCAC7D,GAAG,EAAC,EAAE,GACN,EACD,WAAW,CAAC,MAAM,CAAC,EACpB,cAAK,KAAK,EAAE,MAAM,CAAC,KAAK,YAAG,IAAI,GAAO,EACrC,gBAAgB,IAAI,cAAK,KAAK,EAAE,MAAM,CAAC,SAAS,YAAG,gBAAgB,GAAO,IACpE,GACN,EACJ,cAAc,IAAI,cAAK,KAAK,EAAE,MAAM,CAAC,cAAc,YAAG,cAAc,GAAO,IACxE,EACN,cAAK,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,YAC3E,WAAW,IAAI,UAAU,EAAE,GACxB,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAoD,CAAC,KAAK,EAAE,EAAE;IAChG,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvD,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,SAAS,IAAI,QAAQ,CAAC,EAAE,CAAC;QAC1C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,gEAAgE;IAChE,OAAO,CACL,8BACG,KAAK,IAAI,aAAI,KAAK,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAM,EAC9C,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,CACvB,0BACE,cAAK,KAAK,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAO,EAC7C,cAAK,KAAK,EAAE,MAAM,CAAC,SAAS,YAAG,SAAS,GAAO,IAC3C,CACP,CAAC,CAAC,CAAC,IAAI,EACP,QAAQ,IACR,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { ComponentChildren, FunctionComponent } from 'preact';\nimport { useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport styles from './ResultsAccordion.module.css';\nimport ErrorIcon from '../../images/error-24.inline.svg';\nimport SuccessIcon from '../../images/success-24.inline.svg';\nimport WarningIcon from '../../images/warning-24.inline.svg';\nimport ChevronDownIcon from '../../images/chevrondown-20.inline.svg';\nimport { Button } from '../Button/Button.js';\n\nexport interface ResultsAccordionProps {\n  /** Name of the bundle task or other item (can have formatting, but should not have a header element) */\n  name: ComponentChildren;\n  /** Index used for generating accordion element IDs */\n  index: number;\n  result: 'success' | 'warning' | 'error';\n  /** Info that goes at the end of the header, inside the clickable area */\n  headerEndContent?: string;\n  /** Commands to go at the end of the header, outside the clickable area */\n  headerCommands?: ComponentChildren;\n  /**\n   * Get the content, only if the section is expanded.\n   * Use `CollapsibleResultsSubSection` for formatting (returning multiple sections if needed).\n   *\n   * This callback is to prevent rendering thousands of bundle result details unnecessarily.\n   */\n  getContent: () => ComponentChildren;\n}\n\nexport interface ResultsAccordionContentProps {\n  /** Will be at start of sub-section and styled slightly larger if provided */\n  title?: string;\n  /** Item name, such as \"Input path\". Ignored if `itemValue` is not provided. */\n  itemName?: string;\n  /** Value corresponding to `itemName`, such as the path to a package. Requires `itemName`. */\n  itemValue?: ComponentChildren;\n  /** Custom children */\n  children?: ComponentChildren;\n}\n\nconst resultIcons = {\n  error: <img src={ErrorIcon} alt=\"Error\" />,\n  warning: <img src={WarningIcon} alt=\"Warning\" />,\n  success: <img src={SuccessIcon} alt=\"Success\" />,\n};\n\n/**\n * Collapsible section for displaying results of a bundle task or other item.\n * This handles the header formatting and layout, expanding/collapsing, and displaying content.\n */\nexport const ResultsAccordion: FunctionComponent<ResultsAccordionProps> = (props) => {\n  const { name, result, headerEndContent, headerCommands, getContent, index } = props;\n  const [isOpen, setIsOpen] = useState<boolean | undefined>(undefined);\n  const showContent = isOpen === true || (isOpen === undefined && result === 'error');\n  const headerButtonId = `results-accordion-button-${index}`;\n  const contentId = `results-accordion-content-${index}`;\n\n  // Trying to follow the accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\n  // except the odd thing is we want to allow a separate click target for a refresh button at the end\n  return (\n    <div class={styles.root}>\n      <div class={cx(styles.header, styles[result], showContent && styles.expanded)}>\n        <h3 class={styles.headerButtonWrapper}>\n          <Button\n            id={headerButtonId}\n            class={styles.headerButton}\n            variant=\"custom\"\n            aria-expanded={showContent}\n            aria-controls={contentId}\n            onClick={() => setIsOpen(!showContent)}\n          >\n            <img\n              class={cx(styles.expandIcon, !showContent && styles.collapsed)}\n              src={ChevronDownIcon}\n              // With the wrapping button, the chevron is presentation-only\n              alt=\"\"\n            />\n            {resultIcons[result]}\n            <div class={styles.title}>{name}</div>\n            {headerEndContent && <div class={styles.headerEnd}>{headerEndContent}</div>}\n          </Button>\n        </h3>\n        {headerCommands && <div class={styles.headerCommands}>{headerCommands}</div>}\n      </div>\n      <div id={contentId} class={showContent ? styles.content : styles.contentHidden}>\n        {showContent && getContent()}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Sub-section to return from `ResultsAccordionProps.getContent`.\n * If there are no children and no `itemValue`, the section will be ignored.\n */\nexport const ResultsAccordionContent: FunctionComponent<ResultsAccordionContentProps> = (props) => {\n  const { title, itemName, itemValue, children } = props;\n  if (!children && !(itemValue && itemName)) {\n    return null;\n  }\n\n  // Use a fragment so the sub-parts use the parent's flex styling\n  return (\n    <>\n      {title && <h4 class={styles.title}>{title}</h4>}\n      {itemName && itemValue ? (\n        <div>\n          <div class={styles.itemName}>{itemName}</div>\n          <div class={styles.itemValue}>{itemValue}</div>\n        </div>\n      ) : null}\n      {children}\n    </>\n  );\n};\n"]}

package/lib/components/StatusBadge/StatusBadge.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
+import type { FunctionComponent } from 'preact';
 import type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';
 export interface StatusBadgeProps {
-    inline?: boolean;
-    onExpand?: () => void;
-    onToggle?: () => void;
+    onExpand: () => void;
     pageLoadTimeReport: PageLoadTimeReport;
 }
-export declare const StatusBadge: React.FC<StatusBadgeProps>;
+export declare const StatusBadge: FunctionComponent<StatusBadgeProps>;
 //# sourceMappingURL=StatusBadge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAEjF,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0ElD,CAAC"}
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAOhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAGjF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAQD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAgE3D,CAAC"}

package/lib/components/StatusBadge/StatusBadge.js

@@ -1,11 +1,17 @@
-import React, { useCallback, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useCallback, useRef, useState } from 'preact/hooks';
 import { useDraggable } from '../../hooks/useDraggable.js';
 import styles from './StatusBadge.module.css';
-import { default as cx } from 'classnames';
+import cx from 'classnames';
 import { useStatus } from '../CloudpackProvider/useStatus.js';
 import { elementIds } from '../../constants.js';
-export const StatusBadge = ({ inline, onExpand, pageLoadTimeReport }) => {
-    const badgeStatusKey = 'cloudpack.badgeStatus';
+import { Button } from '../Button/Button.js';
+const badgeStatusKey = 'cloudpack.badgeStatus';
+const leftChevron = '\u00AB';
+const rightChevron = '\u00BB';
+const buttonHint = '(see details)';
+const buttonHelp = 'Show bundle result details';
+export const StatusBadge = ({ onExpand, pageLoadTimeReport }) => {
     const rootElementRef = useRef(null);
     const dragElementRef = useRef(null);
     const status = useStatus();
@@ -13,77 +19,60 @@ export const StatusBadge = ({ inline, onExpand, pageLoadTimeReport }) => {
     const shouldRender = status.status !== 'unknown';
     const toggleBadgeVisibility = useCallback(() => {
         const newCollapsedState = !isCollapsed;
-        console.log('Status badge collapsed state:', newCollapsedState);
         setIsCollapsed(newCollapsedState);
         localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');
     }, [isCollapsed]);
     useDraggable({
         // If we're not yet able to render, don't enable dragging yet.
         // Otherwise the event handlers won't be attached when the component renders.
-        enabled: shouldRender && !inline,
+        enabled: shouldRender,
         containerElementRef: rootElementRef,
         dragElementRef,
     });
     if (!shouldRender) {
         return null;
     }
-    const metric = pageLoadTimeReport.status == 'success' ? (React.createElement("span", { className: styles.metric, title: "Page Load Time" },
-        "in ",
-        pageLoadTimeReport.pageLoadTime.toFixed(2),
-        " ms")) : pageLoadTimeReport.status === 'error' ? (React.createElement("span", { className: styles.metric, title: "No Page Load Time" }, "No PLT")) : null;
-    const leftChevron = '\u00AB';
-    const rightChevron = '\u00BB';
-    const badge = (React.createElement("div", { id: elementIds.statusBadgeRoot, ref: rootElementRef, className: `${getStatusClassName(status, !!inline, pageLoadTimeReport.status === 'error')} ${getCollapsedClassName(isCollapsed)}` },
-        !inline && (React.createElement("div", { ref: dragElementRef, className: styles.gripArea },
-            React.createElement("div", { className: styles.grip }),
-            React.createElement("div", { className: styles.grip }))),
-        React.createElement("button", { className: styles.button, onClick: onExpand, "aria-label": "Expand overlay" },
-            React.createElement("div", { className: styles.value }, getStatusString(status))),
-        React.createElement("div", null,
-            getStatsString(status),
-            metric),
-        React.createElement("button", { className: `${styles.button} ${styles.chevron}`, onClick: toggleBadgeVisibility }, isCollapsed ? leftChevron : rightChevron)));
-    return inline ? (badge) : (React.createElement("div", { className: styles.fixedOverlay },
-        React.createElement("div", { className: styles.contentSurface }, badge)));
+    const { buttonStatusText, statusClass, statsText } = processStatus(status, pageLoadTimeReport);
+    // WARNING: If you change this text, also update the `name` used to find the button in
+    // apps/test-start-e2e/src/utilities/verifyOverlay.ts
+    const buttonText = 'Cloudpack: ' + buttonStatusText;
+    const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;
+    const collapseButtonText = isCollapsed ? 'Expand Cloudpack badge' : 'Collapse';
+    const badge = (_jsxs("div", { id: elementIds.statusBadgeRoot, ref: rootElementRef, class: cx(styles.badge, isCollapsed && styles.collapsed, statusClass), children: [_jsxs("div", { ref: dragElementRef, class: styles.gripArea, "aria-hidden": true, children: [_jsx("div", { class: styles.grip }), _jsx("div", { class: styles.grip })] }), _jsx(Button, { variant: "custom", class: styles.button, onClick: onExpand, title: buttonHelp, "aria-label": buttonAriaLabel, children: _jsx("div", { class: styles.buttonText, children: buttonText }) }), _jsx("div", { children: statsText }), _jsx(Button, { variant: "custom", class: cx(styles.button, styles.chevron), onClick: toggleBadgeVisibility, title: collapseButtonText, "aria-label": collapseButtonText, children: isCollapsed ? leftChevron : rightChevron })] }));
+    return (_jsx("div", { class: styles.fixedOverlay, children: _jsx("div", { class: styles.contentSurface, children: badge }) }));
 };
-function getStatusString(status) {
-    if (status.status === 'pending') {
-        return 'Running';
+/**
+ * Based on the status, get the badge color, button text, and stats text.
+ */
+function processStatus(cpStatus, pltReport) {
+    const { status, totalTasks, remainingTasks, totalErrors, totalWarnings } = cpStatus;
+    let statusClass;
+    let buttonStatusText;
+    let statsText = '';
+    if (status === 'idle' && totalTasks) {
+        [statusClass, buttonStatusText] = totalErrors
+            ? [styles.error, `errors ${buttonHint}`]
+            : totalWarnings
+                ? [styles.warning, `warnings ${buttonHint}`]
+                : [styles.success, 'success'];
     }
-    if (status.totalTasks === 0) {
-        return 'Idle';
+    else {
+        // no styling for this case
+        buttonStatusText = status === 'pending' ? 'bundling...' : 'idle';
     }
-    return status.totalErrors === 0 ? 'Success' : 'Errors';
-}
-function getStatusClassName(cpStatus, inline, hasPltError) {
-    const { status, totalTasks, totalErrors, totalWarnings } = cpStatus;
-    return cx(styles.badge, {
-        [styles.inline]: inline,
-        [styles.building]: status === 'pending' && !hasPltError,
-        [styles.success]: status === 'idle' && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0 && !hasPltError,
-        [styles.error]: (status === 'idle' && totalErrors > 0) || hasPltError,
-        [styles.warning]: status === 'idle' && totalErrors === 0 && totalWarnings > 0 && !hasPltError,
-    });
-}
-function getCollapsedClassName(isCollapsed) {
-    return cx(styles.badge, {
-        [styles.collapsed]: isCollapsed,
-    });
-}
-function getStatsString(status) {
-    const { totalTasks, remainingTasks, totalErrors, totalWarnings } = status;
-    if (totalTasks === 0) {
-        return '';
+    if (totalTasks) {
+        // "Number of tasks" is likely not a meaningful metric for users (and doesn't strictly correspond to
+        // number of packages), so just show either estimated percentage or "completed" plus any issue counts.
+        const taskStats = [
+            remainingTasks === 0 ? 'completed' : `${(remainingTasks / totalTasks).toFixed(1)}% completed`,
+            totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,
+            totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,
+        ]
+            .filter(Boolean)
+            .join(', ');
+        const pltStat = pltReport.status === 'success' ? ` in ${Math.round(pltReport.pageLoadTime) ?? '??'}ms` : '';
+        statsText = taskStats + pltStat;
     }
-    return [
-        remainingTasks > 0 && `${remainingTasks} of ${totalTasks} tasks pending`,
-        remainingTasks === 0 && `${totalTasks} tasks completed`,
-        totalErrors === 1 && `${totalErrors} error`,
-        totalErrors > 1 && `${totalErrors} errors`,
-        totalWarnings === 1 && `${totalWarnings} warning`,
-        totalWarnings > 1 && `${totalWarnings} warnings`,
-    ]
-        .filter(Boolean)
-        .join(', ');
+    return { statusClass, buttonStatusText, statsText };
 }
 //# sourceMappingURL=StatusBadge.js.map

package/lib/components/StatusBadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport { default as cx } from 'classnames';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\n\nexport interface StatusBadgeProps {\n  inline?: boolean;\n  onExpand?: () => void;\n  onToggle?: () => void;\n  pageLoadTimeReport: PageLoadTimeReport;\n}\n\nexport const StatusBadge: React.FC<StatusBadgeProps> = ({ inline, onExpand, pageLoadTimeReport }) => {\n  const badgeStatusKey = 'cloudpack.badgeStatus';\n\n  const rootElementRef = useRef<HTMLDivElement>(null);\n  const dragElementRef = useRef<HTMLDivElement>(null);\n  const status = useStatus();\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n  const shouldRender = status.status !== 'unknown';\n\n  const toggleBadgeVisibility = useCallback(() => {\n    const newCollapsedState = !isCollapsed;\n    console.log('Status badge collapsed state:', newCollapsedState);\n    setIsCollapsed(newCollapsedState);\n    localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n  }, [isCollapsed]);\n\n  useDraggable({\n    // If we're not yet able to render, don't enable dragging yet.\n    // Otherwise the event handlers won't be attached when the component renders.\n    enabled: shouldRender && !inline,\n    containerElementRef: rootElementRef,\n    dragElementRef,\n  });\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const metric =\n    pageLoadTimeReport.status == 'success' ? (\n      <span className={styles.metric} title=\"Page Load Time\">\n        in {pageLoadTimeReport.pageLoadTime.toFixed(2)} ms\n      </span>\n    ) : pageLoadTimeReport.status === 'error' ? (\n      <span className={styles.metric} title=\"No Page Load Time\">\n        No PLT\n      </span>\n    ) : null;\n\n  const leftChevron = '\\u00AB';\n  const rightChevron = '\\u00BB';\n  const badge = (\n    <div\n      id={elementIds.statusBadgeRoot}\n      ref={rootElementRef}\n      className={`${getStatusClassName(status, !!inline, pageLoadTimeReport.status === 'error')} ${getCollapsedClassName(isCollapsed)}`}\n    >\n      {!inline && (\n        <div ref={dragElementRef} className={styles.gripArea}>\n          <div className={styles.grip} />\n          <div className={styles.grip} />\n        </div>\n      )}\n      <button className={styles.button} onClick={onExpand} aria-label=\"Expand overlay\">\n        <div className={styles.value}>{getStatusString(status)}</div>\n      </button>\n      <div>\n        {getStatsString(status)}\n        {metric}\n      </div>\n      <button className={`${styles.button} ${styles.chevron}`} onClick={toggleBadgeVisibility}>\n        {isCollapsed ? leftChevron : rightChevron}\n      </button>\n    </div>\n  );\n\n  return inline ? (\n    badge\n  ) : (\n    <div className={styles.fixedOverlay}>\n      <div className={styles.contentSurface}>{badge}</div>\n    </div>\n  );\n};\n\nfunction getStatusString(status: CloudpackStatus): string {\n  if (status.status === 'pending') {\n    return 'Running';\n  }\n\n  if (status.totalTasks === 0) {\n    return 'Idle';\n  }\n\n  return status.totalErrors === 0 ? 'Success' : 'Errors';\n}\n\nfunction getStatusClassName(cpStatus: CloudpackStatus, inline: boolean, hasPltError: boolean): string {\n  const { status, totalTasks, totalErrors, totalWarnings } = cpStatus;\n  return cx(styles.badge, {\n    [styles.inline]: inline,\n    [styles.building]: status === 'pending' && !hasPltError,\n    [styles.success]: status === 'idle' && totalTasks > 0 && totalErrors === 0 && totalWarnings === 0 && !hasPltError,\n    [styles.error]: (status === 'idle' && totalErrors > 0) || hasPltError,\n    [styles.warning]: status === 'idle' && totalErrors === 0 && totalWarnings > 0 && !hasPltError,\n  });\n}\n\nfunction getCollapsedClassName(isCollapsed: boolean): string {\n  return cx(styles.badge, {\n    [styles.collapsed]: isCollapsed,\n  });\n}\n\nfunction getStatsString(status: CloudpackStatus): string {\n  const { totalTasks, remainingTasks, totalErrors, totalWarnings } = status;\n  if (totalTasks === 0) {\n    return '';\n  }\n\n  return [\n    remainingTasks > 0 && `${remainingTasks} of ${totalTasks} tasks pending`,\n    remainingTasks === 0 && `${totalTasks} tasks completed`,\n    totalErrors === 1 && `${totalErrors} error`,\n    totalErrors > 1 && `${totalErrors} errors`,\n    totalWarnings === 1 && `${totalWarnings} warning`,\n    totalWarnings > 1 && `${totalWarnings} warnings`,\n  ]\n    .filter(Boolean)\n    .join(', ');\n}\n"]}
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAC9C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAwB,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAO7C,MAAM,cAAc,GAAG,uBAAuB,CAAC;AAC/C,MAAM,WAAW,GAAG,QAAQ,CAAC;AAC7B,MAAM,YAAY,GAAG,QAAQ,CAAC;AAC9B,MAAM,UAAU,GAAG,eAAe,CAAC;AACnC,MAAM,UAAU,GAAG,4BAA4B,CAAC;AAEhD,MAAM,CAAC,MAAM,WAAW,GAAwC,CAAC,EAAE,QAAQ,EAAE,kBAAkB,EAAE,EAAE,EAAE;IACnG,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;IAEhG,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,KAAK,SAAS,CAAC;IAEjD,MAAM,qBAAqB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7C,MAAM,iBAAiB,GAAG,CAAC,WAAW,CAAC;QACvC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAClC,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC7E,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,YAAY,CAAC;QACX,8DAA8D;QAC9D,6EAA6E;QAC7E,OAAO,EAAE,YAAY;QACrB,mBAAmB,EAAE,cAAc;QACnC,cAAc;KACf,CAAC,CAAC;IAEH,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,EAAE,gBAAgB,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;IAC/F,sFAAsF;IACtF,qDAAqD;IACrD,MAAM,UAAU,GAAG,aAAa,GAAG,gBAAgB,CAAC;IACpD,MAAM,eAAe,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,KAAK,UAAU,EAAE,CAAC;IAC/E,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,UAAU,CAAC;IAE/E,MAAM,KAAK,GAAG,CACZ,eACE,EAAE,EAAE,UAAU,CAAC,eAAe,EAC9B,GAAG,EAAE,cAAc,EACnB,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,IAAI,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,aAErE,eAAK,GAAG,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,kCAC9C,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,GAAI,EAC3B,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,GAAI,IACvB,EACN,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,gBAAc,eAAe,YAC9G,cAAK,KAAK,EAAE,MAAM,CAAC,UAAU,YAAG,UAAU,GAAO,GAC1C,EACT,wBAAM,SAAS,GAAO,EACtB,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,EACxC,OAAO,EAAE,qBAAqB,EAC9B,KAAK,EAAE,kBAAkB,gBACb,kBAAkB,YAE7B,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,GAClC,IACL,CACP,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,MAAM,CAAC,YAAY,YAC7B,cAAK,KAAK,EAAE,MAAM,CAAC,cAAc,YAAG,KAAK,GAAO,GAC5C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,aAAa,CACpB,QAAyB,EACzB,SAA6B;IAS7B,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,QAAQ,CAAC;IAEpF,IAAI,WAA+B,CAAC;IACpC,IAAI,gBAAwB,CAAC;IAC7B,IAAI,SAAS,GAAG,EAAE,CAAC;IAEnB,IAAI,MAAM,KAAK,MAAM,IAAI,UAAU,EAAE,CAAC;QACpC,CAAC,WAAW,EAAE,gBAAgB,CAAC,GAAG,WAAW;YAC3C,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,UAAU,EAAE,CAAC;YACxC,CAAC,CAAC,aAAa;gBACb,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,YAAY,UAAU,EAAE,CAAC;gBAC5C,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACpC,CAAC;SAAM,CAAC;QACN,2BAA2B;QAC3B,gBAAgB,GAAG,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;IACnE,CAAC;IAED,IAAI,UAAU,EAAE,CAAC;QACf,oGAAoG;QACpG,sGAAsG;QACtG,MAAM,SAAS,GAAG;YAChB,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,cAAc,GAAG,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;YAC7F,WAAW,IAAI,GAAG,WAAW,SAAS,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAClE,aAAa,IAAI,GAAG,aAAa,WAAW,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;SAC3E;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,MAAM,OAAO,GAAG,SAAS,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QAE5G,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAClC,CAAC;IAED,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC;AACtD,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport cx from 'classnames';\nimport { useStatus, type CloudpackStatus } from '../CloudpackProvider/useStatus.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface StatusBadgeProps {\n  onExpand: () => void;\n  pageLoadTimeReport: PageLoadTimeReport;\n}\n\nconst badgeStatusKey = 'cloudpack.badgeStatus';\nconst leftChevron = '\\u00AB';\nconst rightChevron = '\\u00BB';\nconst buttonHint = '(see details)';\nconst buttonHelp = 'Show bundle result details';\n\nexport const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ onExpand, pageLoadTimeReport }) => {\n  const rootElementRef = useRef<HTMLDivElement>(null);\n  const dragElementRef = useRef<HTMLDivElement>(null);\n  const status = useStatus();\n  const [isCollapsed, setIsCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n  const shouldRender = status.status !== 'unknown';\n\n  const toggleBadgeVisibility = useCallback(() => {\n    const newCollapsedState = !isCollapsed;\n    setIsCollapsed(newCollapsedState);\n    localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n  }, [isCollapsed]);\n\n  useDraggable({\n    // If we're not yet able to render, don't enable dragging yet.\n    // Otherwise the event handlers won't be attached when the component renders.\n    enabled: shouldRender,\n    containerElementRef: rootElementRef,\n    dragElementRef,\n  });\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const { buttonStatusText, statusClass, statsText } = processStatus(status, pageLoadTimeReport);\n  // WARNING: If you change this text, also update the `name` used to find the button in\n  // apps/test-start-e2e/src/utilities/verifyOverlay.ts\n  const buttonText = 'Cloudpack: ' + buttonStatusText;\n  const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;\n  const collapseButtonText = isCollapsed ? 'Expand Cloudpack badge' : 'Collapse';\n\n  const badge = (\n    <div\n      id={elementIds.statusBadgeRoot}\n      ref={rootElementRef}\n      class={cx(styles.badge, isCollapsed && styles.collapsed, statusClass)}\n    >\n      <div ref={dragElementRef} class={styles.gripArea} aria-hidden>\n        <div class={styles.grip} />\n        <div class={styles.grip} />\n      </div>\n      <Button variant=\"custom\" class={styles.button} onClick={onExpand} title={buttonHelp} aria-label={buttonAriaLabel}>\n        <div class={styles.buttonText}>{buttonText}</div>\n      </Button>\n      <div>{statsText}</div>\n      <Button\n        variant=\"custom\"\n        class={cx(styles.button, styles.chevron)}\n        onClick={toggleBadgeVisibility}\n        title={collapseButtonText}\n        aria-label={collapseButtonText}\n      >\n        {isCollapsed ? leftChevron : rightChevron}\n      </Button>\n    </div>\n  );\n\n  return (\n    <div class={styles.fixedOverlay}>\n      <div class={styles.contentSurface}>{badge}</div>\n    </div>\n  );\n};\n\n/**\n * Based on the status, get the badge color, button text, and stats text.\n */\nfunction processStatus(\n  cpStatus: CloudpackStatus,\n  pltReport: PageLoadTimeReport,\n): {\n  /** class (color) for the badge root */\n  statusClass: string | undefined;\n  /** short status text for the button to open the overlay */\n  buttonStatusText: string;\n  /** stats to display after the button, like \"50% completed, 2 errors, 3 warnings in 500ms\" */\n  statsText: string;\n} {\n  const { status, totalTasks, remainingTasks, totalErrors, totalWarnings } = cpStatus;\n\n  let statusClass: string | undefined;\n  let buttonStatusText: string;\n  let statsText = '';\n\n  if (status === 'idle' && totalTasks) {\n    [statusClass, buttonStatusText] = totalErrors\n      ? [styles.error, `errors ${buttonHint}`]\n      : totalWarnings\n        ? [styles.warning, `warnings ${buttonHint}`]\n        : [styles.success, 'success'];\n  } else {\n    // no styling for this case\n    buttonStatusText = status === 'pending' ? 'bundling...' : 'idle';\n  }\n\n  if (totalTasks) {\n    // \"Number of tasks\" is likely not a meaningful metric for users (and doesn't strictly correspond to\n    // number of packages), so just show either estimated percentage or \"completed\" plus any issue counts.\n    const taskStats = [\n      remainingTasks === 0 ? 'completed' : `${(remainingTasks / totalTasks).toFixed(1)}% completed`,\n      totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,\n      totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,\n    ]\n      .filter(Boolean)\n      .join(', ');\n\n    const pltStat = pltReport.status === 'success' ? ` in ${Math.round(pltReport.pageLoadTime) ?? '??'}ms` : '';\n\n    statsText = taskStats + pltStat;\n  }\n\n  return { statusClass, buttonStatusText, statsText };\n}\n"]}

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

@@ -1,7 +1,7 @@
-import React from 'react';
-export interface SearchboxProps {
+import type { FunctionComponent } from 'preact';
+import type { InputHTMLAttributes } from 'preact/compat';
+export interface SearchboxProps extends Required<Pick<InputHTMLAttributes, 'onInput'>>, Pick<InputHTMLAttributes, 'style'> {
     value: string;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const Searchbox: React.FC<SearchboxProps>;
+export declare const Searchbox: FunctionComponent<SearchboxProps>;
 //# sourceMappingURL=Searchbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Searchbox.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/Searchbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAChE;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAQ9C,CAAC"}
+{"version":3,"file":"Searchbox.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/Searchbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGzD,MAAM,WAAW,cACf,SAAQ,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC,EACpD,IAAI,CAAC,mBAAmB,EAAE,OAAO,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,CAavD,CAAC"}

package/lib/components/StatusDialog/Searchbox.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "preact/jsx-runtime";
 import styles from './Searchbox.module.css';
-export const Searchbox = ({ value, onChange }) => {
-    return (React.createElement(React.Fragment, null, typeof value === 'string' && (React.createElement("input", { type: "text", placeholder: "Search", className: styles.searchbox, onChange: onChange, value: value }))));
+export const Searchbox = (props) => {
+    const { value, onInput, style } = props;
+    return (_jsx("input", { type: "text", "aria-label": "Search", placeholder: "Search", class: styles.searchbox, style: style, onInput: onInput, value: value }));
 };
 //# sourceMappingURL=Searchbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Searchbox.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/Searchbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAO5C,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAkB,EAAE,EAAE;IACzF,OAAO,CACL,0CACG,OAAO,KAAK,KAAK,QAAQ,IAAI,CAC5B,+BAAO,IAAI,EAAC,MAAM,EAAC,WAAW,EAAC,QAAQ,EAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAC1G,CACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["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 const Searchbox: React.FC<SearchboxProps> = ({ 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"]}
+{"version":3,"file":"Searchbox.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/Searchbox.tsx"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAQ5C,MAAM,CAAC,MAAM,SAAS,GAAsC,CAAC,KAAK,EAAE,EAAE;IACpE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACxC,OAAO,CACL,gBACE,IAAI,EAAC,MAAM,gBACA,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,MAAM,CAAC,SAAS,EACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport type { InputHTMLAttributes } from 'preact/compat';\nimport styles from './Searchbox.module.css';\n\nexport interface SearchboxProps\n  extends Required<Pick<InputHTMLAttributes, 'onInput'>>,\n    Pick<InputHTMLAttributes, 'style'> {\n  value: string;\n}\n\nexport const Searchbox: FunctionComponent<SearchboxProps> = (props) => {\n  const { value, onInput, style } = props;\n  return (\n    <input\n      type=\"text\"\n      aria-label=\"Search\"\n      placeholder=\"Search\"\n      class={styles.searchbox}\n      style={style}\n      onInput={onInput}\n      value={value}\n    />\n  );\n};\n"]}

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { FunctionComponent } from 'preact';
 export interface StatusDialogProps {
     onClose: () => void;
 }
-export declare const StatusDialog: React.FC<StatusDialogProps>;
+export declare const StatusDialog: FunctionComponent<StatusDialogProps>;
 export default StatusDialog;
 //# sourceMappingURL=StatusDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusDialog.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAQ3C,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiCpD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StatusDialog.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAShD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CAkC7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/StatusDialog/StatusDialog.js

@@ -1,4 +1,5 @@
-import React, { useCallback } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { useCallback, useState } from 'preact/hooks';
 import { TaskList } from './TaskList.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { Button } from '../Button/Button.js';
@@ -7,20 +8,15 @@ import { Searchbox } from './Searchbox.js';
 import { elementIds } from '../../constants.js';
 export const StatusDialog = ({ onClose }) => {
     const cloudpack = useCloudpack();
-    const [searchFilter, setSearchFilter] = React.useState('');
-    const [issuesOnly, setIssuesOnly] = React.useState(false);
+    const [searchFilter, setSearchFilter] = useState('');
+    const [issuesOnly, setIssuesOnly] = useState(false);
     const handleSearchChange = useCallback((event) => {
         event.preventDefault();
         setSearchFilter(event.target.value);
     }, []);
     const restartAllTasks = () => void cloudpack.restartAllTasks.mutate();
     const toggleIssuesOnly = () => void setIssuesOnly((value) => !value);
-    return (React.createElement(Dialog, { title: "Task results", id: elementIds.statusDialogRoot, draggable: true, onClose: onClose, commands: [
-            React.createElement(Button, { primary: true, onClick: restartAllTasks, key: "restart" }, "Restart all tasks"),
-            React.createElement(Button, { onClick: toggleIssuesOnly, key: "issues" }, issuesOnly ? 'Show all tasks' : 'Show tasks with issues'),
-        ] },
-        React.createElement(Searchbox, { value: searchFilter, onChange: handleSearchChange }),
-        React.createElement(TaskList, { searchFilter: searchFilter, issuesOnly: issuesOnly })));
+    return (_jsx(Dialog, { title: "Cloudpack bundle results", id: elementIds.statusDialogRoot, draggable: true, onClose: onClose, commands: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", iconName: "refresh", onClick: restartAllTasks, children: "Re-bundle all packages" }), _jsx(Button, { onClick: toggleIssuesOnly, children: issuesOnly ? 'Show all packages' : 'Show packages with issues' }), _jsx(Searchbox, { value: searchFilter, onInput: handleSearchChange, style: { marginLeft: 'auto' } })] }), children: _jsx(TaskList, { searchFilter: searchFilter, issuesOnly: issuesOnly }) }));
 };
 export default StatusDialog;
 //# sourceMappingURL=StatusDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StatusDialog.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACvE,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC3D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1D,MAAM,kBAAkB,GAAG,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QACpF,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAEtE,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAErE,OAAO,CACL,oBAAC,MAAM,IACL,KAAK,EAAC,cAAc,EACpB,EAAE,EAAE,UAAU,CAAC,gBAAgB,EAC/B,SAAS,QACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE;YACR,oBAAC,MAAM,IAAC,OAAO,QAAC,OAAO,EAAE,eAAe,EAAE,GAAG,EAAC,SAAS,wBAE9C;YACT,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,GAAG,EAAC,QAAQ,IAC5C,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,wBAAwB,CAClD;SACV;QAED,oBAAC,SAAS,IAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,kBAAkB,GAAI;QAChE,oBAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI,CACzD,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","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 const StatusDialog: React.FC<StatusDialogProps> = ({ onClose }) => {\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 = () => void cloudpack.restartAllTasks.mutate();\n\n  const toggleIssuesOnly = () => void 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"]}
+{"version":3,"file":"StatusDialog.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAChF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,kBAAkB,GAAG,WAAW,CAA4B,CAAC,KAAK,EAAE,EAAE;QAC1E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAEtE,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAErE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,UAAU,CAAC,gBAAgB,EAC/B,SAAS,QACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EACN,8BACE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,EAAE,eAAe,uCAE5D,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,YAAG,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,2BAA2B,GAAU,EAE5G,KAAC,SAAS,IAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,IAC7F,YAGL,KAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI,GACzD,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\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, type SearchboxProps } from './Searchbox.js';\nimport { elementIds } from '../../constants.js';\n\nexport interface StatusDialogProps {\n  onClose: () => void;\n}\n\nexport const StatusDialog: FunctionComponent<StatusDialogProps> = ({ onClose }) => {\n  const cloudpack = useCloudpack();\n  const [searchFilter, setSearchFilter] = useState('');\n  const [issuesOnly, setIssuesOnly] = useState(false);\n\n  const handleSearchChange = useCallback<SearchboxProps['onInput']>((event) => {\n    event.preventDefault();\n    setSearchFilter((event.target as HTMLInputElement).value);\n  }, []);\n\n  const restartAllTasks = () => void cloudpack.restartAllTasks.mutate();\n\n  const toggleIssuesOnly = () => void setIssuesOnly((value) => !value);\n\n  return (\n    <Dialog\n      title=\"Cloudpack bundle results\"\n      id={elementIds.statusDialogRoot}\n      draggable\n      onClose={onClose}\n      commands={\n        <>\n          <Button variant=\"primary\" iconName=\"refresh\" onClick={restartAllTasks}>\n            Re-bundle all packages\n          </Button>\n          <Button onClick={toggleIssuesOnly}>{issuesOnly ? 'Show all packages' : 'Show packages with issues'}</Button>\n          {/* Align the search box to the right */}\n          <Searchbox value={searchFilter} onInput={handleSearchChange} style={{ marginLeft: 'auto' }} />\n        </>\n      }\n    >\n      <TaskList searchFilter={searchFilter} issuesOnly={issuesOnly} />\n    </Dialog>\n  );\n};\n\nexport default StatusDialog;\n"]}

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import type { FunctionComponent } from 'preact';
 export interface TaskListProps {
     searchFilter?: string;
     issuesOnly?: boolean;
 }
-export declare const TaskList: React.FC<TaskListProps>;
+export declare const TaskList: FunctionComponent<TaskListProps>;
 //# sourceMappingURL=TaskList.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,WAAW,aAAa;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAoB5C,CAAC"}
+{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAoBrD,CAAC"}

package/lib/components/StatusDialog/TaskList.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "preact/jsx-runtime";
 import { TaskStatus } from './TaskStatus.js';
 import { useStatusDetails } from '../CloudpackProvider/useStatusDetails.js';
 import styles from './TaskList.module.css';
@@ -13,7 +13,7 @@ export const TaskList = ({ searchFilter, issuesOnly }) => {
     if (issuesOnly) {
         filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);
     }
-    return (React.createElement("div", { className: styles.root }, filteredTasks.map((task) => (React.createElement(TaskStatus, { key: task.name, task: task })))));
+    return (_jsx("div", { class: styles.root, children: filteredTasks.map((task, index) => (_jsx(TaskStatus, { index: index, task: task }, task.name))) }));
 };
 /**
  * Really the server should be sorting. Get stuff out of the browser.