@openshift-migration-advisor/shared-components 0.25.0 → 0.27.0-5d0cc20d809e

package/README.md

@@ -7,6 +7,7 @@ Includes:
 - PatternFly form field wrappers (`react-hook-form`)
 - Guest OS support-tier helpers and badges
 - Report chart primitives (`MigrationDonutChart`)
+- Chart export (`ChartExportProvider`, `ChartExportSurface`, PDF / PNG / HTML)
 - Operating Systems distribution card
 - Infrastructure summary, vCenter cluster details, and host/VM power-state cards
 
@@ -25,17 +26,41 @@ npm install @openshift-migration-advisor/shared-components
 ```tsx
 import {
   buildInfrastructureSummary,
+  ChartExportProvider,
   HostPowerStates,
   InfrastructureSummary,
   MigrationDonutChart,
   OSDistribution,
+  ReportExportMenu,
   SupportTierBadge,
   TextInputFormGroup,
+  useChartExport,
   VCenterClusterDetails,
   VmPowerStates,
 } from "@openshift-migration-advisor/shared-components";
+
+<ChartExportProvider>
+  <Dashboard />
+</ChartExportProvider>
+```
+
+`ChartExportProvider` lazy-loads capture, ZIP, PDF, and HTML. Wrap the chart visual (not the Card chrome) in `ChartExportSurface`. All formats snapshot those same nodes, encode one chart at a time, and drop the canvas. There is no second print tree and no `isExportMode` render:
+
+```tsx
+import { ChartExportSurface } from "@openshift-migration-advisor/shared-components";
+
+<Card>
+  <CardTitle>CPU and memory</CardTitle>
+  <CardBody>
+    <ChartExportSurface id="cpu-memory" title="CPU and memory">
+      <MigrationDonutChart {...chartProps} />
+    </ChartExportSurface>
+  </CardBody>
+</Card>
 ```
 
+`ReportExportMenu` accepts a fully custom `options` list. `standardReportExportOptions()` builds the PDF / HTML / PNG entries; omit a handler to hide that format.
+
 Components are SDK-agnostic: pass already-shaped props (for example `OSDistributionEntry` maps). Map `agent-sdk` / `planner-sdk` models at the app boundary.
 
 ## Development

package/dist/report/ChartDownloadButton.d.ts

@@ -0,0 +1,11 @@
+import type { FC, ReactNode } from "react";
+export declare const ChartDownloadButton: FC<{
+    chartId: string;
+    title?: string;
+}>;
+export declare const ChartHeaderActions: FC<{
+    chartId: string;
+    title?: string;
+    children?: ReactNode;
+}>;
+//# sourceMappingURL=ChartDownloadButton.d.ts.map

package/dist/report/ChartDownloadButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDownloadButton.d.ts","sourceRoot":"","sources":["../../src/report/ChartDownloadButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3C,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAoBA,CAAC;AAIF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAmBA,CAAC"}

package/dist/report/ChartDownloadButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, FlexItem } from "@patternfly/react-core";
+import { DownloadIcon } from "@patternfly/react-icons";
+import { chartExportHideProps } from "./chartExport.js";
+import { useChartExport } from "./chartExportContext.js";
+export const ChartDownloadButton = ({ chartId, title }) => {
+    const exportApi = useChartExport();
+    if (!exportApi) {
+        return null;
+    }
+    const label = title ? `Download ${title} as PNG` : "Download chart as PNG";
+    return (_jsx(Button, { variant: "plain", icon: _jsx(DownloadIcon, {}), "aria-label": label, isLoading: exportApi.downloadingChartId === chartId, isDisabled: exportApi.isBusy, onClick: () => {
+            void exportApi.downloadChart(chartId);
+        } }));
+};
+ChartDownloadButton.displayName = "ChartDownloadButton";
+export const ChartHeaderActions = ({ chartId, title, children }) => {
+    const exportApi = useChartExport();
+    if (!exportApi && !children) {
+        return null;
+    }
+    return (_jsx(FlexItem, { ...chartExportHideProps, children: _jsxs(Flex, { alignItems: { default: "alignItemsCenter" }, spaceItems: { default: "spaceItemsSm" }, children: [children, exportApi ? (_jsx(ChartDownloadButton, { chartId: chartId, title: title })) : null] }) }));
+};
+ChartHeaderActions.displayName = "ChartHeaderActions";

package/dist/report/ChartExportProvider.d.ts

@@ -0,0 +1,23 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartCaptureSource, type ChartExportFile, type PdfTextPage } from "./chartExport.js";
+export type CaptureChartElement = (element: HTMLElement) => Promise<HTMLCanvasElement>;
+export type ZipChartFiles = (files: ChartExportFile[]) => Promise<Blob>;
+export type EncodeChartPng = (canvas: HTMLCanvasElement) => Promise<Blob>;
+export type BuildChartDocument = (charts: ChartCaptureSource[], documentTitle: string) => Promise<Blob>;
+export type BuildPdfDocument = (charts: ChartCaptureSource[], documentTitle: string, extraPages?: PdfTextPage[]) => Promise<Blob>;
+export type { ChartExportApi, ChartExportFormat, } from "./chartExportContext.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+export interface ChartExportProviderProps {
+    children: ReactNode;
+    capture?: CaptureChartElement;
+    zipFiles?: ZipChartFiles;
+    encodePng?: EncodeChartPng;
+    buildPdf?: BuildPdfDocument;
+    buildHtml?: BuildChartDocument;
+    downloadFile?: (blob: Blob, filename: string) => void;
+    getZipFilename?: () => string;
+    getPdfFilename?: () => string;
+    getHtmlFilename?: () => string;
+}
+export declare const ChartExportProvider: FC<ChartExportProviderProps>;
+//# sourceMappingURL=ChartExportProvider.d.ts.map

package/dist/report/ChartExportProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartExportProvider.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AACf,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,eAAe,EAGpB,KAAK,WAAW,EAMjB,MAAM,kBAAkB,CAAC;AAU1B,MAAM,MAAM,mBAAmB,GAAG,CAChC,OAAO,EAAE,WAAW,KACjB,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAChC,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AACxE,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,CAC/B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,KAClB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,MAAM,MAAM,gBAAgB,GAAG,CAC7B,MAAM,EAAE,kBAAkB,EAAE,EAC5B,aAAa,EAAE,MAAM,EACrB,UAAU,CAAC,EAAE,WAAW,EAAE,KACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnB,YAAY,EACV,cAAc,EACd,iBAAiB,GAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3E,MAAM,WAAW,wBAAwB;IACvC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,MAAM,CAAC;CAChC;AAsED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAiQ5D,CAAC"}

package/dist/report/ChartExportProvider.js

@@ -0,0 +1,222 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState, } from "react";
+import { canvasToBlob, downloadBlob, releaseCanvas, restoreChartExportViews, sortRegisteredChartsByDocumentOrder, toBulkChartCaptureSources, } from "./chartExport.js";
+import { ChartExportApiContext, ChartExportRegistryContext, } from "./chartExportContext.js";
+import { getChartExportFilename } from "./chartExportFilenames.js";
+export { useChartExport, useRegisterChart } from "./chartExportContext.js";
+const EXPORT_LOADING_LABELS = {
+    pdf: "Generating PDF...",
+    png: "Generating PNG...",
+    html: "Generating HTML...",
+};
+const defaultZipFilename = () => getChartExportFilename("zip");
+const defaultPdfFilename = () => getChartExportFilename("pdf");
+const defaultHtmlFilename = () => getChartExportFilename("html");
+async function resolveCapture(override) {
+    if (override) {
+        return override;
+    }
+    const { captureChartElement } = await import("./captureChartElement.js");
+    return captureChartElement;
+}
+async function resolvePrepareElement(overrideCapture) {
+    if (overrideCapture) {
+        return undefined;
+    }
+    const { revealHiddenChartAncestors } = await import("./captureChartElement.js");
+    return revealHiddenChartAncestors;
+}
+async function resolveZip(override) {
+    if (override) {
+        return override;
+    }
+    const { zipChartPngs } = await import("./zipChartPngs.js");
+    return zipChartPngs;
+}
+async function resolvePdf(override) {
+    if (override) {
+        return override;
+    }
+    const { buildPdfFromCharts } = await import("./pdfExport.js");
+    return buildPdfFromCharts;
+}
+async function resolveHtml(override) {
+    if (override) {
+        return override;
+    }
+    const { buildHtmlFromCharts } = await import("./htmlExport.js");
+    return buildHtmlFromCharts;
+}
+function toCaptureSources(charts, capture, prepareElement) {
+    return toBulkChartCaptureSources(charts, capture, prepareElement);
+}
+export const ChartExportProvider = ({ children, capture, zipFiles, encodePng = canvasToBlob, buildPdf, buildHtml, downloadFile = downloadBlob, getZipFilename = defaultZipFilename, getPdfFilename = defaultPdfFilename, getHtmlFilename = defaultHtmlFilename, }) => {
+    const chartsRef = useRef(new Map());
+    const isBusyRef = useRef(false);
+    const [downloadingChartId, setDownloadingChartId] = useState(null);
+    const [exportingFormat, setExportingFormat] = useState(null);
+    const [exportError, setExportError] = useState(null);
+    const registry = useMemo(() => ({
+        register(chart) {
+            const existing = chartsRef.current.get(chart.id);
+            if (existing &&
+                existing.element !== chart.element &&
+                existing.element.isConnected) {
+                console.warn(`Duplicate chart export id "${chart.id}". The previous chart will not be exported.`);
+            }
+            chartsRef.current.set(chart.id, chart);
+            return () => {
+                const current = chartsRef.current.get(chart.id);
+                if (current?.element === chart.element) {
+                    chartsRef.current.delete(chart.id);
+                }
+            };
+        },
+    }), []);
+    const listCharts = useCallback(() => {
+        return sortRegisteredChartsByDocumentOrder(Array.from(chartsRef.current.values()).filter((chart) => chart.element.isConnected));
+    }, []);
+    const runCapture = useCallback(async (work, chartId, format) => {
+        if (isBusyRef.current) {
+            return;
+        }
+        isBusyRef.current = true;
+        setExportError(null);
+        if (chartId) {
+            setDownloadingChartId(chartId);
+        }
+        else {
+            setExportingFormat(format);
+        }
+        try {
+            await work();
+        }
+        catch (error) {
+            console.error(`Error exporting ${format}:`, error);
+            setExportError(`Failed to export ${format.toUpperCase()}. Please try again.`);
+        }
+        finally {
+            isBusyRef.current = false;
+            setDownloadingChartId(null);
+            setExportingFormat(null);
+        }
+    }, []);
+    const downloadChart = useCallback(async (id) => {
+        await runCapture(async () => {
+            const chart = chartsRef.current.get(id);
+            if (!chart?.element.isConnected) {
+                throw new Error("The chart is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const canvas = await captureFn(chart.element);
+            try {
+                downloadFile(await encodePng(canvas), chart.filename);
+            }
+            finally {
+                releaseCanvas(canvas);
+            }
+        }, id, "png");
+    }, [capture, downloadFile, encodePng, runCapture]);
+    const downloadAll = useCallback(async () => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const zipFn = await resolveZip(zipFiles);
+            const files = [];
+            const sources = toBulkChartCaptureSources(charts, captureFn, prepareElement);
+            try {
+                for (const [index, source] of sources.entries()) {
+                    const canvas = await source.capture();
+                    try {
+                        files.push({
+                            filename: `${String(index + 1).padStart(2, "0")}-${source.filename}`,
+                            blob: await encodePng(canvas),
+                        });
+                    }
+                    finally {
+                        releaseCanvas(canvas);
+                    }
+                }
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+            downloadFile(await zipFn(files), getZipFilename());
+        }, null, "png");
+    }, [
+        capture,
+        downloadFile,
+        encodePng,
+        getZipFilename,
+        listCharts,
+        runCapture,
+        zipFiles,
+    ]);
+    const downloadPdf = useCallback(async (documentTitle, extraPages) => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0 && (extraPages?.length ?? 0) === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const build = await resolvePdf(buildPdf);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle, extraPages), getPdfFilename());
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+        }, null, "pdf");
+    }, [buildPdf, capture, downloadFile, getPdfFilename, listCharts, runCapture]);
+    const downloadHtml = useCallback(async (documentTitle) => {
+        await runCapture(async () => {
+            const charts = listCharts();
+            if (charts.length === 0) {
+                throw new Error("The report is not ready to export yet.");
+            }
+            const captureFn = await resolveCapture(capture);
+            const prepareElement = await resolvePrepareElement(capture);
+            const build = await resolveHtml(buildHtml);
+            try {
+                downloadFile(await build(toCaptureSources(charts, captureFn, prepareElement), documentTitle), getHtmlFilename());
+            }
+            finally {
+                await restoreChartExportViews(charts);
+            }
+        }, null, "html");
+    }, [buildHtml, capture, downloadFile, getHtmlFilename, listCharts, runCapture]);
+    const clearExportError = useCallback(() => {
+        setExportError(null);
+    }, []);
+    const api = useMemo(() => ({
+        downloadChart,
+        downloadAll,
+        downloadPdf,
+        downloadHtml,
+        downloadingChartId,
+        exportingFormat,
+        exportLoadingLabel: exportingFormat
+            ? EXPORT_LOADING_LABELS[exportingFormat]
+            : null,
+        isExportingAll: exportingFormat !== null,
+        isBusy: downloadingChartId !== null || exportingFormat !== null,
+        exportError,
+        clearExportError,
+    }), [
+        clearExportError,
+        downloadAll,
+        downloadChart,
+        downloadHtml,
+        downloadPdf,
+        downloadingChartId,
+        exportError,
+        exportingFormat,
+    ]);
+    return (_jsx(ChartExportRegistryContext.Provider, { value: registry, children: _jsx(ChartExportApiContext.Provider, { value: api, children: children }) }));
+};
+ChartExportProvider.displayName = "ChartExportProvider";

package/dist/report/ChartExportSurface.d.ts

@@ -0,0 +1,12 @@
+import { type FC, type ReactNode } from "react";
+import { type ChartExportView } from "./chartExport.js";
+export declare const ChartExportSurface: FC<{
+    id: string;
+    title: string;
+    filename?: string;
+    exportViews?: ChartExportView[];
+    activeExportViewId?: string;
+    onExportViewChange?: (viewId: string) => void;
+    children: ReactNode;
+}>;
+//# sourceMappingURL=ChartExportSurface.d.ts.map

package/dist/report/ChartExportSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartExportSurface.d.ts","sourceRoot":"","sources":["../../src/report/ChartExportSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AACrE,OAAO,EACL,KAAK,eAAe,EAGrB,MAAM,kBAAkB,CAAC;AAG1B,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAyCA,CAAC"}

package/dist/report/ChartExportSurface.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { chartExportRootStyle, waitForChartExportPaint, } from "./chartExport.js";
+import { useRegisterChart } from "./chartExportContext.js";
+export const ChartExportSurface = ({ id, title, filename, exportViews, activeExportViewId, onExportViewChange, children, }) => {
+    const activeViewRef = useRef(activeExportViewId);
+    activeViewRef.current = activeExportViewId;
+    const onExportViewChangeRef = useRef(onExportViewChange);
+    onExportViewChangeRef.current = onExportViewChange;
+    const setExportView = useCallback(async (viewId) => {
+        const change = onExportViewChangeRef.current;
+        if (change && activeViewRef.current !== viewId) {
+            change(viewId);
+            await new Promise((resolve) => {
+                window.setTimeout(resolve, 0);
+            });
+        }
+        await waitForChartExportPaint();
+    }, []);
+    const ref = useRegisterChart({
+        id,
+        title,
+        filename,
+        exportViews,
+        activeExportViewId,
+        setExportView: exportViews && exportViews.length > 1 && onExportViewChange
+            ? setExportView
+            : undefined,
+    });
+    return (_jsx("div", { ref: ref, id: id, style: chartExportRootStyle, children: children }));
+};
+ChartExportSurface.displayName = "ChartExportSurface";

package/dist/report/CpuAndMemoryOverview.d.ts

@@ -0,0 +1,19 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+export interface CpuAndMemoryOverviewProps {
+    cpuTierDistribution?: Record<string, number>;
+    memoryTierDistribution?: Record<string, number>;
+    memoryTotalGB?: number;
+    cpuTotalCores?: number;
+    /**
+     * Memory-tier slice click. The argument is the distribution key.
+     * Agent-ui maps it to a VM memory filter; ui-app omits it.
+     */
+    onTierSelect?: (tierLabel: string) => void;
+    /** Center-title click. Agent-ui opens the VM list with no extra filters. */
+    onTitleClick?: () => void;
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const CpuAndMemoryOverview: FC<CpuAndMemoryOverviewProps>;
+//# sourceMappingURL=CpuAndMemoryOverview.d.ts.map

package/dist/report/CpuAndMemoryOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CpuAndMemoryOverview.d.ts","sourceRoot":"","sources":["../../src/report/CpuAndMemoryOverview.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,EAAE,EAAO,MAAM,OAAO,CAAC;AAErC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAQ1C,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC7C,sBAAsB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAiJ9D,CAAC"}

package/dist/report/CpuAndMemoryOverview.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css } from "@emotion/css";
+import { Card, CardBody, CardTitle, Dropdown, DropdownItem, DropdownList, Flex, FlexItem, MenuToggle, } from "@patternfly/react-core";
+import { DataProcessorIcon } from "@patternfly/react-icons";
+import { useMemo, useState } from "react";
+import { MigrationDonutChart, } from "../charts/MigrationDonutChart.js";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { chartExportViewsFromLabels } from "./chartExport.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+const VIEW_MODE_LABELS = {
+    memoryTiers: "VM distribution by memory size tier",
+    vcpuTiers: "VM distribution by vCPU count tier",
+};
+const VIEW_SUBTITLES = {
+    memoryTiers: "Memory size tiers",
+    vcpuTiers: "vCPU count tiers",
+};
+/**
+ * Categorical order shared by the agent-ui and ui-app CPU/memory donuts.
+ */
+const TIER_COLORS = [
+    "#0066cc",
+    "#5e40be",
+    "#b6a6e9",
+    "#73c5c5",
+    "#b98412",
+    "#28a745",
+    "#f0ad4e",
+    "#d9534f",
+    "#009596",
+    "#6a6e73",
+];
+const CHART_ID = "cpu-memory-overview";
+const CHART_TITLE = "CPU & memory";
+const cardSubtitle = css `
+  color: var(--pf-t--global--text--color--subtle);
+  font-size: 0.85rem;
+`;
+const menuToggleMinWidth = css `
+  min-width: 290px;
+`;
+const titleRow = css `
+  width: 100%;
+`;
+const isViewMode = (value) => value === "memoryTiers" || value === "vcpuTiers";
+const tierSortKey = (label) => {
+    const value = Number.parseInt(label.trim(), 10);
+    return Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER;
+};
+const hasUnit = (label, unit) => unit === "GB" ? /gb$/i.test(label) : /cores?$/i.test(label);
+const slicesFromDistribution = (distribution, unit) => Object.entries(distribution ?? {})
+    .filter(([, count]) => Number(count) > 0)
+    .sort(([left], [right]) => tierSortKey(left) - tierSortKey(right))
+    .map(([tier, count]) => {
+    const trimmed = tier.trim();
+    const name = hasUnit(trimmed, unit) ? trimmed : `${trimmed} ${unit}`;
+    const vmCount = Number(count);
+    return {
+        name,
+        count: vmCount,
+        countDisplay: `${vmCount} VMs`,
+        legendCategory: tier,
+    };
+});
+const legendFor = (categories) => {
+    const legend = {};
+    categories.forEach((category, index) => {
+        const color = TIER_COLORS[index % TIER_COLORS.length];
+        if (color) {
+            legend[category] = color;
+        }
+    });
+    return legend;
+};
+export const CpuAndMemoryOverview = ({ cpuTierDistribution, memoryTierDistribution, memoryTotalGB, cpuTotalCores, onTierSelect, onTitleClick, legendVariant = "html", }) => {
+    const [viewMode, setViewMode] = useState("memoryTiers");
+    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+    const memorySlices = useMemo(() => slicesFromDistribution(memoryTierDistribution, "GB"), [memoryTierDistribution]);
+    const vcpuSlices = useMemo(() => slicesFromDistribution(cpuTierDistribution, "cores"), [cpuTierDistribution]);
+    const activeSlices = viewMode === "memoryTiers" ? memorySlices : vcpuSlices;
+    const legend = useMemo(() => legendFor(activeSlices.map((slice) => slice.legendCategory)), [activeSlices]);
+    const totalVMs = useMemo(() => activeSlices.reduce((sum, slice) => sum + slice.count, 0), [activeSlices]);
+    const chartTitle = `${CHART_TITLE} — ${VIEW_MODE_LABELS[viewMode]}`;
+    const subTitle = viewMode === "memoryTiers"
+        ? typeof memoryTotalGB === "number"
+            ? `${memoryTotalGB.toLocaleString()} GB`
+            : undefined
+        : typeof cpuTotalCores === "number"
+            ? `${cpuTotalCores.toLocaleString()} Cores`
+            : undefined;
+    const emptyTitle = viewMode === "memoryTiers"
+        ? REPORT_CARD_EMPTY_STATE_TITLES.memory
+        : REPORT_CARD_EMPTY_STATE_TITLES.cpu;
+    return (_jsx(ChartExportSurface, { id: CHART_ID, title: chartTitle, exportViews: chartExportViewsFromLabels(CHART_TITLE, VIEW_MODE_LABELS), activeExportViewId: viewMode, onExportViewChange: (viewId) => {
+            if (isViewMode(viewId)) {
+                setViewMode(viewId);
+            }
+        }, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { className: titleRow, justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsx(FlexItem, { children: _jsxs("div", { children: [_jsxs("div", { children: [_jsx(DataProcessorIcon, {}), " ", CHART_TITLE] }), _jsx("div", { className: cardSubtitle, children: VIEW_SUBTITLES[viewMode] })] }) }), _jsx(ChartHeaderActions, { chartId: CHART_ID, title: chartTitle, children: _jsx(Dropdown, { isOpen: isDropdownOpen, onSelect: (_event, value) => {
+                                        if (isViewMode(value)) {
+                                            setViewMode(value);
+                                        }
+                                        setIsDropdownOpen(false);
+                                    }, onOpenChange: setIsDropdownOpen, toggle: (toggleRef) => (_jsx(MenuToggle, { ref: toggleRef, onClick: () => setIsDropdownOpen((open) => !open), isExpanded: isDropdownOpen, className: menuToggleMinWidth, children: VIEW_MODE_LABELS[viewMode] })), children: _jsxs(DropdownList, { children: [_jsx(DropdownItem, { value: "memoryTiers", children: VIEW_MODE_LABELS.memoryTiers }, "memoryTiers"), _jsx(DropdownItem, { value: "vcpuTiers", children: VIEW_MODE_LABELS.vcpuTiers }, "vcpuTiers")] }) }) })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: activeSlices.length === 0 ? (_jsx(CardEmptyState, { title: emptyTitle })) : (_jsx(MigrationDonutChart, { legendVariant: legendVariant, data: activeSlices, legend: legend, height: 300, width: 420, donutThickness: 18, titleFontSize: 34, title: `${totalVMs} VMs`, subTitle: subTitle, subTitleColor: "var(--pf-t--global--text--color--subtle)", legendLabelFormatter: ({ x, countDisplay }) => `${x} (${countDisplay})`, tooltipLabelFormatter: ({ datum, percent }) => `${datum.countDisplay}\n${percent.toFixed(1)}%`, itemsPerRow: legendVariant === "chart"
+                            ? Math.ceil(activeSlices.length / 2)
+                            : undefined, labelFontSize: legendVariant === "chart" ? 18 : undefined, marginLeft: legendVariant === "chart" ? "52%" : undefined, onItemClick: viewMode === "memoryTiers" && onTierSelect
+                            ? (item) => onTierSelect(item.legendCategory)
+                            : undefined, onTitleClick: onTitleClick })) })] }) }));
+};
+CpuAndMemoryOverview.displayName = "CpuAndMemoryOverview";

package/dist/report/ErrorTable.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+/**
+ * Minimal shape of a migration issue consumed by {@link ErrorTable}. Declared
+ * locally so this package does not depend on a specific SDK (`agent-sdk` or
+ * `planner-sdk`); callers pass the subset of `MigrationIssue` fields read here.
+ */
+export interface MigrationIssueLike {
+    label: string;
+    assessment: string;
+    count: number;
+}
+export interface ErrorTableProps {
+    errors: MigrationIssueLike[];
+    /** Optional drill-down callback invoked with an issue's `label`. */
+    onConcernClick?: (concernLabel: string) => void;
+}
+export declare const ErrorTable: React.FC<ErrorTableProps>;
+//# sourceMappingURL=ErrorTable.d.ts.map

package/dist/report/ErrorTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorTable.d.ts","sourceRoot":"","sources":["../../src/report/ErrorTable.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,oEAAoE;IACpE,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;CACjD;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgDhD,CAAC"}

package/dist/report/ErrorTable.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardTitle, Flex, FlexItem, Icon, } from "@patternfly/react-core";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
+import { CardEmptyState } from "./CardEmptyState.js";
+import { ChartHeaderActions } from "./ChartDownloadButton.js";
+import { ChartExportSurface } from "./ChartExportSurface.js";
+import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
+import { dashboardStyles } from "./dashboardStyles.js";
+import { ReportTable } from "./ReportTable.js";
+export const ErrorTable = ({ errors, onConcernClick, }) => {
+    const handleRowClick = (issue) => {
+        if (issue.label && onConcernClick) {
+            onConcernClick(issue.label);
+        }
+    };
+    const chartId = "errors-table";
+    const chartTitle = "Errors";
+    return (_jsx(ChartExportSurface, { id: chartId, title: chartTitle, children: _jsxs(Card, { className: dashboardStyles.card, children: [_jsx(CardTitle, { children: _jsxs(Flex, { justifyContent: { default: "justifyContentSpaceBetween" }, alignItems: { default: "alignItemsCenter" }, children: [_jsxs(FlexItem, { children: [_jsx(Icon, { status: "danger", children: _jsx(ExclamationCircleIcon, {}) }), " ", "Errors"] }), _jsx(ChartHeaderActions, { chartId: chartId, title: chartTitle })] }) }), _jsx(CardBody, { className: dashboardStyles.cardBodyScrollable, children: errors.length === 0 ? (_jsx(CardEmptyState, { title: REPORT_CARD_EMPTY_STATE_TITLES.errors })) : (_jsx("div", { children: _jsx(ReportTable, { data: errors, columns: ["Description", "Total VMs"], fields: ["assessment", "count"], onRowClick: onConcernClick ? handleRowClick : undefined, clickableFields: onConcernClick ? ["assessment"] : [] }) })) })] }) }));
+};
+ErrorTable.displayName = "ErrorTable";

package/dist/report/HostPowerStates.d.ts

@@ -2,7 +2,6 @@ import type { FC } from "react";
 import type { MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
 export interface HostPowerStatesProps {
     hostPowerStates?: Record<string, number>;
-    isExportMode?: boolean;
     legendVariant?: MigrationDonutChartLegendVariant;
 }
 export declare const HostPowerStates: FC<HostPowerStatesProps>;

package/dist/report/HostPowerStates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HostPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/HostPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwBpD,CAAC"}
+{"version":3,"file":"HostPowerStates.d.ts","sourceRoot":"","sources":["../../src/report/HostPowerStates.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,gCAAgC,EAAE,MAAM,kCAAkC,CAAC;AAKzF,MAAM,WAAW,oBAAoB;IACnC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAsBpD,CAAC"}

package/dist/report/HostPowerStates.js

@@ -4,8 +4,8 @@ import { useMemo } from "react";
 import { REPORT_CARD_EMPTY_STATE_TITLES } from "./constants.js";
 import { PowerStateCard } from "./PowerStateCard.js";
 import { buildHostPowerStateChart } from "./powerStates.js";
-export const HostPowerStates = ({ hostPowerStates, isExportMode = false, legendVariant, }) => {
+export const HostPowerStates = ({ hostPowerStates, legendVariant, }) => {
     const chart = useMemo(() => buildHostPowerStateChart(hostPowerStates), [hostPowerStates]);
-    return (_jsx(PowerStateCard, { id: "esxi-host-power-states", title: "ESXi host power states", icon: _jsx(ServerIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "Hosts", isExportMode: isExportMode, legendVariant: legendVariant }));
+    return (_jsx(PowerStateCard, { id: "esxi-host-power-states", title: "ESXi host power states", icon: _jsx(ServerIcon, {}), emptyTitle: REPORT_CARD_EMPTY_STATE_TITLES.hostPowerStates, slices: chart.slices, legend: chart.legend, total: chart.total, subTitle: "Hosts", legendVariant: legendVariant }));
 };
 HostPowerStates.displayName = "HostPowerStates";

package/dist/report/HostsOverview.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from "react";
+import { type MigrationDonutChartLegendVariant } from "../charts/MigrationDonutChart.js";
+/** Smallest host shape this card reads. Apps pass SDK hosts structurally. */
+export interface HostLike {
+    model?: string | number;
+}
+export interface HostsOverviewProps {
+    hosts?: HostLike[];
+    /** `"html"` in agent-ui; ui-app passes `"chart"`. */
+    legendVariant?: MigrationDonutChartLegendVariant;
+}
+export declare const HostsOverview: FC<HostsOverviewProps>;
+//# sourceMappingURL=HostsOverview.d.ts.map

package/dist/report/HostsOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HostsOverview.d.ts","sourceRoot":"","sources":["../../src/report/HostsOverview.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAGL,KAAK,gCAAgC,EACtC,MAAM,kCAAkC,CAAC;AAO1C,6EAA6E;AAC7E,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,qDAAqD;IACrD,aAAa,CAAC,EAAE,gCAAgC,CAAC;CAClD;AAuFD,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAwDhD,CAAC"}