@carto/ps-react-ui 5.0.0 → 5.1.0

package/dist/types/widgets-v2/echart/echart.d.ts

@@ -1,3 +1,4 @@
+import { SxProps, Theme } from '@mui/material';
 import { EchartsEventHandler } from './echart-ui.js';
 import type * as echarts from 'echarts';
 /**
@@ -48,6 +49,13 @@ export interface EchartProps {
     onEvents?: Record<string, EchartsEventHandler>;
     init?: echarts.EChartsInitOpts;
     className?: string;
+    /**
+     * Styles for the chart container — this is where its height comes from.
+     * `min-height` defaults to the card height (304px) and `flex: 1` lets the
+     * chart fill a taller parent; override either here, e.g.
+     * `sx={{ minHeight: 400 }}` for a taller card.
+     */
+    sx?: SxProps<Theme>;
 }
 /**
  * Stateful Echart bridge — owns the entire ECharts coupling. The whole
@@ -72,4 +80,4 @@ export interface EchartProps {
  * a renderer-agnostic shell. The `ProviderProps` surface has no ECharts
  * coupling, so non-Echart widgets don't transitively import the type.
  */
-export declare function Echart({ optionFactory, onEvents, init, className, }: EchartProps): import('react').JSX.Element;
+export declare function Echart({ optionFactory, onEvents, init, className, sx, }: EchartProps): import('react').JSX.Element;

package/dist/types/widgets-v2/echart/style.d.ts

@@ -1,6 +1,7 @@
 export declare const styles: {
     root: {
         width: string;
+        flex: number;
         minHeight: number;
     };
 };

package/dist/types/widgets-v2/index.d.ts

@@ -66,7 +66,7 @@ export declare const Widget: {
     readonly Download: typeof Download;
     readonly FullScreen: {
         Trigger: ({ labels, enterIcon: EnterIcon, exitIcon: ExitIcon, iconProps, }: import('./actions/index.js').FullScreenTriggerProps) => import('react').JSX.Element;
-        Slot: ({ children, title, labels, closeIcon: CloseSvg, iconProps, }: import('./actions/index.js').FullScreenSlotProps) => import('react').JSX.Element;
+        Slot: ({ children, title, actions, paperSx, labels, closeIcon: CloseSvg, iconProps, }: import('./actions/index.js').FullScreenSlotProps) => import('react').JSX.Element;
     };
     readonly LockSelection: typeof LockSelection;
     readonly ChangeColumn: typeof ChangeColumn;

package/dist/widgets-v2/actions.js

@@ -1,4 +1,4 @@
-import { C as e, E as t, S as n, T as r, _ as i, a, b as o, c as s, d as c, f as l, g as u, h as d, i as f, l as p, m, n as h, o as g, p as _, r as v, s as y, t as b, u as x, v as S, w as C, x as w, y as T } from "../actions-yPZwFxSZ.js";
+import { C as e, E as t, S as n, T as r, _ as i, a, b as o, c as s, d as c, f as l, g as u, h as d, i as f, l as p, m, n as h, o as g, p as _, r as v, s as y, t as b, u as x, v as S, w as C, x as w, y as T } from "../actions-BjPfCLG9.js";
 import { a as E, i as D, n as O, r as k, t as A } from "../zoom-toggle-IsF8BnAp.js";
 import { a as j, c as M, d as N, f as P, i as F, l as I, n as L, o as R, r as z, s as B, t as V, u as H } from "../download-DdaK3qgC.js";
 export { l as BrushToggle, F as CSVIcon, b as ChangeColumn, _ as DEFAULT_BRUSH_TOGGLE_LABELS, h as DEFAULT_CHANGE_COLUMN_LABELS, M as DEFAULT_DOWNLOAD_LABELS, y as DEFAULT_FULLSCREEN_LABELS, f as DEFAULT_LOCK_SELECTION_LABELS, p as DEFAULT_RELATIVE_DATA_LABELS, r as DEFAULT_SEARCHER_LABELS, S as DEFAULT_SHOW_ALL_LABELS, o as DEFAULT_STACK_TOGGLE_LABELS, O as DEFAULT_ZOOM_TOGGLE_LABELS, z as DOWNLOAD_ITEM_IDS, B as Download, g as FullScreen, v as LockSelection, j as MarkdownIcon, R as PNGIcon, s as RelativeData, d as SHOW_ALL_ID, n as Searcher, e as SearcherToggle, u as ShowAllToggle, T as StackToggle, k as ZOOM_LAYOUT, A as ZoomToggle, m as addBrush, w as addStack, D as addZoom, V as buildCsvDownloadItem, L as buildPngDownloadItem, E as createAddZoom, x as createPercentFormatter, I as downloadDOMToPNG, H as downloadToCSV, a as filterByLockedItems, t as filterBySearchText, C as setSearcherText, i as setShowAll, N as toCsvString, c as toRelativeData, P as triggerLinkDownload };

package/dist/widgets-v2/echart.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, t as a } from "../echart-DeBgdOtX.js";
+import { a as e, i as t, n, o as r, r as i, t as a } from "../echart-CRihbmRv.js";
 export { i as DEFAULT_INIT_OPTS, n as Echart, t as EchartUI, e as __resetSharedResizeObserver, r as observeResize, a as useChartSelection };

package/dist/widgets-v2/pie.js

@@ -14,7 +14,6 @@ function _({ theme: e, formatter: t, labelFormatter: n }) {
 				hasLegend: !0,
 				labelFormatter: n
 			}),
-			left: "center",
 			type: "scroll",
 			itemGap: 16,
 			selectedMode: !1

package/dist/widgets-v2/pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"pie.js","names":["<Skeleton variant='circular' sx={styles.ring} />","<Box sx={styles.hole} />","<Box sx={styles.donut}>\n        <Skeleton variant='circular' sx={styles.ring} />\n        <Box sx={styles.hole} />\n        <Box sx={styles.label}>\n          <Skeleton width={56} height={18} />\n          <Skeleton width={36} height={8} />\n        </Box>\n      </Box>","<Box sx={styles.root}>\n      <Box sx={styles.donut}>\n        <Skeleton variant='circular' sx={styles.ring} />\n        <Box sx={styles.hole} />\n        <Box sx={styles.label}>\n          <Skeleton width={56} height={18} />\n          <Skeleton width={36} height={8} />\n        </Box>\n      </Box>\n      <Box sx={styles.legend}>\n        {[0, 1].map((i) => (\n          <Box key={`legend-${i}`} sx={styles.legendItem}>\n            <Skeleton variant='circular' width={8} height={8} />\n            <Skeleton width={48} height={8} />\n          </Box>\n        ))}\n      </Box>\n    </Box>","(i) => (\n          <Box key={`legend-${i}`} sx={styles.legendItem}>\n            <Skeleton variant='circular' width={8} height={8} />\n            <Skeleton width={48} height={8} />\n          </Box>\n        )"],"sources":["../../src/widgets-v2/pie/options.ts","../../src/widgets-v2/pie/skeleton.tsx","../../src/widgets-v2/pie/download.ts"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport type { EChartsOption } from 'echarts'\nimport * as echarts from 'echarts'\nimport type { CallbackDataParams } from 'echarts/types/dist/shared'\nimport {\n  buildGridConfig,\n  buildLegendConfig,\n  buildSeriesLabelConfig,\n  createTooltipFormatter,\n  createTooltipPositioner,\n  niceNum,\n} from '../../widgets/utils/chart-config'\nimport type { OptionFactory, OptionFactoryContext } from '../echart'\nimport { mergeOptions, resolveThemeColor } from '../utils'\nimport type { WidgetSeries } from '../types'\nimport type {\n  PieEChartsOption,\n  PieOptionFactoryInput,\n  PieOptionsInput,\n  PieWidgetData,\n} from './types'\n\nconst DEFAULT_RADIUS: readonly [string, string] = ['58%', '74%']\n\n/**\n * Builds the **structural** ECharts option for a pie / donut widget.\n * Mirrors v1's pie look-and-feel: themed legend (`buildLegendConfig`),\n * themed tooltip via `createTooltipPositioner` / `createTooltipFormatter`,\n * `qualitative.bold` color palette, slice borders against the paper\n * background, hover-emphasis disabled, and a centered rich-text label.\n *\n * Layered like Bar / Histogram:\n *   - **Theme-aware bits** live here on a series template (slice border,\n *     center-label rich style sizes, emphasis-disabled).\n *   - **Reactive bits** (tooltip value formatter, center-label text,\n *     selection-driven dim) are re-emitted by\n *     {@link createPieOptionFactory} at fusion time so RelativeData's\n *     percent override flows through.\n */\nexport function pieOptions({\n  theme,\n  formatter,\n  labelFormatter,\n}: PieOptionsInput): PieEChartsOption {\n  return {\n    legend: {\n      ...buildLegendConfig({ hasLegend: true, labelFormatter }),\n      // Pie reads better with a centered legend (the donut is radially\n      // symmetric — left-aligning the legend below it visually unbalances\n      // the chart). Override `buildLegendConfig`'s `type: 'scroll'` with\n      // `'plain'` so long category lists wrap to multiple rows instead\n      // of clipping the last visible item against the chart container.\n      // The wider `itemGap` gives chips breathing room in the typical\n      // 3–6 category case.\n      left: 'center',\n      type: 'scroll',\n      itemGap: 16,\n      // The legend is presentational only here — the pie has its own\n      // click-to-select affordance on the slices themselves, so legend\n      // clicks toggling series visibility would be a second, redundant/\n      // conflicting interaction model. Hover-highlight is disabled per\n      // series via `legendHoverLink` (ECharts has no legend-level knob\n      // for it).\n      selectedMode: false,\n    },\n    tooltip: {\n      // Pie uses item-trigger (no axis); the rest of the styling mirrors\n      // bar/histogram so the dashboard reads consistently — dark\n      // grey[900] bg, white caption-font text, padded, with the shared\n      // overflow-aware positioner.\n      trigger: 'item',\n      backgroundColor: theme.palette.grey[900],\n      borderWidth: 0,\n      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],\n      textStyle: {\n        color: theme.palette.common.white,\n        fontSize: 11,\n        fontFamily: theme.typography.caption.fontFamily,\n      },\n      position: createTooltipPositioner(theme),\n      formatter: buildPieTooltipFormatter(formatter, labelFormatter),\n    },\n    // V1 used `qualitative.bold` only (no `secondary.main` prefix) because\n    // pie slices are categorical — each slice deserves a distinct palette\n    // entry from the start, not a primary highlight.\n    color: Object.values(\n      (theme.palette as { qualitative?: { bold?: Record<string, string> } })\n        .qualitative?.bold ?? {},\n    ),\n    // Pie template. The merger spreads this into each per-data series it\n    // emits — borderColor / borderWidth / emphasis-disabled / label rich\n    // sizes all survive through.\n    series: [\n      {\n        type: 'pie',\n        colorBy: 'data',\n        avoidLabelOverlap: true,\n        selectedOffset: 0,\n        legendHoverLink: false,\n        emphasis: { disabled: true },\n        itemStyle: {\n          borderColor: theme.palette.background.paper,\n          borderWidth: 1,\n        },\n        label: {\n          show: true,\n          position: 'center',\n          rich: {\n            b: { fontSize: 16, fontWeight: 'normal', lineHeight: 20 },\n            c: { fontSize: 28, fontWeight: 'bold', lineHeight: 27 },\n          },\n        },\n      },\n    ],\n  }\n}\n\n/**\n * Returns the pie widget's {@link OptionFactory} — one closure that owns\n * BOTH phases of option construction:\n *\n *   - **Structural phase** (`option == null`) — builds the theme-aware\n *     structural option via {@link pieOptions}, optionally merging the\n *     consumer-supplied `optionsOverride` on top. Called once by Provider\n *     to seed `rawOptions` in the store.\n *   - **Merge phase** (`option != null`) — fuses post-pipeline `state.data`\n *     (`PieWidgetData`) into the option via the dataset API. Single-series\n *     → donut (one dataset, `series[i].encode = { itemName: 'name', value: 'value' }`).\n *     Multi-series → horizontal-bar fallback (mirrors v1 pie). Reactive\n *     formatters from `ctx` drive the tooltip + center label at fusion\n *     time so RelativeData's percent formatter flows through without a\n *     structural rebuild.\n */\nexport function createPieOptionFactory(\n  options: PieOptionFactoryInput,\n): OptionFactory {\n  const { theme, formatter, labelFormatter, optionsOverride, series } = options\n  const radius = options.radius ?? DEFAULT_RADIUS\n  const selection = options.selection\n  // An explicit `[]` (deselected down to zero via chart clicks) is treated\n  // the same as no selection: the pie has no bar/histogram-style \"nothing\n  // selected\" affordance, so dimming every slice would just look broken —\n  // it renders fully active, same as the no-interaction state.\n  const selectionSet =\n    selection === undefined || selection === null || selection.length === 0\n      ? null\n      : new Set<string | number>(selection)\n  return (option, data, ctx) => {\n    if (option == null) {\n      const structural = pieOptions({ theme, formatter, labelFormatter })\n      return optionsOverride\n        ? (mergeOptions(\n            structural as unknown as Record<string, unknown>,\n            optionsOverride as Partial<Record<string, unknown>>,\n          ) as EChartsOption)\n        : structural\n    }\n\n    const seriesArr = Array.isArray(data) ? (data as PieWidgetData) : []\n    if (seriesArr.length === 0) {\n      return { ...option, dataset: [], series: [] }\n    }\n    if (seriesArr.length > 1) {\n      return buildMultiSeriesBarFusion(\n        option,\n        seriesArr,\n        theme,\n        series,\n        ctx,\n        selectionSet,\n      )\n    }\n    return buildSingleSeriesPieFusion(\n      option,\n      seriesArr,\n      radius,\n      series,\n      ctx,\n      selectionSet,\n    )\n  }\n}\n\n/**\n * Single-series donut fusion. Spreads the structural pie series template\n * into per-data series with center/radius/encoding, wires the reactive\n * center-label / tooltip formatters and the per-data palette-aware\n * selection-dim callback.\n */\nfunction buildSingleSeriesPieFusion(\n  option: EChartsOption,\n  seriesArr: PieWidgetData,\n  radius: readonly [string, string],\n  series: readonly WidgetSeries[] | undefined,\n  ctx: OptionFactoryContext | undefined,\n  selectionSet: Set<string | number> | null,\n): EChartsOption {\n  const seriesTemplates = Array.isArray(option.series) ? option.series : []\n  const broadcastTemplate = seriesTemplates[0] ?? {}\n  const baseTooltip =\n    typeof option.tooltip === 'object' && !Array.isArray(option.tooltip)\n      ? option.tooltip\n      : {}\n  const baseLegend =\n    typeof option.legend === 'object' && !Array.isArray(option.legend)\n      ? option.legend\n      : {}\n  const formatter = ctx?.formatter\n  const labelFormatter = ctx?.labelFormatter\n\n  // Pie wants `colorBy: 'data'` — each slice draws from the option's\n  // `color` palette by data index. But installing an `itemStyle.color`\n  // callback disables ECharts' automatic per-data cycling, and\n  // `params.color` collapses to the series color (so every slice goes\n  // the same color). We re-implement the per-data palette resolution\n  // here so the multicolor look survives selection-driven dimming.\n  const palette = Array.isArray(option.color)\n    ? (option.color as readonly (string | undefined)[])\n    : []\n  const resolvePaletteColor = (params: CallbackDataParams): string => {\n    const swatch =\n      palette.length > 0\n        ? palette[params.dataIndex % palette.length]\n        : undefined\n    return swatch ?? (params.color as string)\n  }\n\n  // Always emit `itemStyle.color` (passthrough when nothing is selected),\n  // not conditionally — same anti-stale-callback rationale as bar /\n  // histogram. The slice border + width come from the structural\n  // template's `itemStyle` and survive via the spread below.\n  //\n  // `selectionSet` is the *included* set, same direct semantics as\n  // bar/histogram/timeseries (no ADR-014 exclusion inversion). Dim a slice\n  // when its name is NOT in the set. `selectionSet` is never a non-null\n  // empty Set — the collapse above (`selection.length === 0 → null`) rules\n  // that out — so there's no \"dim everything\" case here, unlike a widget\n  // that gives `[]` its own \"selected down to nothing\" meaning.\n  const colorFn = (params: CallbackDataParams): string => {\n    const base = resolvePaletteColor(params)\n    if (!selectionSet) return base\n    const datum = params.value as { name?: string | number } | undefined\n    const name = datum?.name ?? params.name\n    return name != null && selectionSet.has(name)\n      ? base\n      : echarts.color.modifyAlpha(base, 0.15)\n  }\n\n  // ECharts anchors EVERY slice's `position: 'center'` label at the same\n  // point, so at most one of them can ever be legible — the donut design\n  // leans into that (one KPI inside the ring) and picks a single slice\n  // below. A consumer that moves the labels off the centre gives each\n  // slice its own anchor (`'outside'` with leader lines is what the PDF\n  // export uses, `'inside'` / `'insideTop'` … likewise), and there the\n  // single-label rule is simply wrong: every slice must render its own\n  // label. Read the position off the structural template, which already\n  // carries the consumer's `optionsOverride`.\n  const templateLabelPosition = (\n    broadcastTemplate as { label?: { position?: unknown } }\n  ).label?.position\n  const isCenterLabel =\n    templateLabelPosition === undefined || templateLabelPosition === 'center'\n\n  // Which slice renders the centre value+name: the greatest value among\n  // the *included* slices (all of them when there's no active\n  // selection), computed locally — no query round-trip. Only that one\n  // slice's formatter call returns text; every other slice returns ''\n  // so exactly one label ever renders at the shared centre anchor. Only\n  // `typeof value === 'number'` participates — if every included slice's\n  // value is non-numeric, `centerMaxName` stays `undefined` and no slice\n  // matches it in `labelTextFormatter` below, so the chart renders with no\n  // centre label at all (graceful no-op, not a crash). Skipped entirely\n  // for off-centre labels, where every slice labels itself.\n  const centerData = seriesArr[0] ?? []\n  let centerMaxName: string | number | undefined\n  let centerMaxValue = -Infinity\n  for (const d of centerData) {\n    if (selectionSet && !selectionSet.has(d.name)) continue\n    if (typeof d.value === 'number' && d.value > centerMaxValue) {\n      centerMaxValue = d.value\n      centerMaxName = d.name\n    }\n  }\n\n  // Slice label formatter — lives in the merger because it reads\n  // reactive `formatter` / `labelFormatter` from ctx. The rich tags\n  // `{c|…}` and `{b|…}` reference the rich styles baked into the\n  // structural label template.\n  const labelTextFormatter = (params: CallbackDataParams): string => {\n    const { name } = params\n    if (name == null) return ''\n    if (isCenterLabel && name !== centerMaxName) return ''\n    const encodeIndex = params.encode?.value?.[0]\n    if (encodeIndex === undefined) return ''\n    const value = (Object.values(params.data ?? {}) as unknown[]).at(\n      encodeIndex,\n    )\n    // `value` here is the resolved dataset cell — for pie data it's a\n    // `string | number` primitive. Anything else is a misuse we won't\n    // dress up with `String(...)` (would render \"[object Object]\").\n    const formattedValue =\n      typeof value === 'number'\n        ? formatter\n          ? formatter(value)\n          : String(value)\n        : typeof value === 'string'\n          ? value\n          : ''\n    const formattedName = labelFormatter\n      ? String(labelFormatter(name ?? ''))\n      : String(name ?? '')\n    // The blank line is what separates the big centre KPI from its\n    // caption. Off-centre labels sit next to their own slice and are\n    // laid out against their neighbours, so the spacer only inflates\n    // each label's bounding box — enough, with a hidden `{b|…}` block,\n    // to make ECharts drop colliding labels altogether.\n    const separator = isCenterLabel ? '\\n\\n' : '\\n'\n    return `{c|${formattedValue}}${separator}{b|${formattedName}}`\n  }\n\n  return {\n    ...option,\n    dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),\n    series: seriesArr.map((_, i) => {\n      const template =\n        (seriesTemplates[i] as object | undefined) ??\n        (broadcastTemplate as object)\n      const templateObj = typeof template === 'object' ? template : {}\n      const templateLabel = (templateObj as { label?: object }).label ?? {}\n      const templateItemStyle =\n        (templateObj as { itemStyle?: object }).itemStyle ?? {}\n      return {\n        ...templateObj,\n        type: 'pie' as const,\n        legendHoverLink: false,\n        datasetIndex: i,\n        name: series?.[i]?.name ?? `Series ${i + 1}`,\n        radius: [...radius],\n        // Lift the donut up so the bottom-anchored legend has the\n        // vertical real estate to wrap to multiple rows for long\n        // category lists — at exactly `50%` the bottom slices crowd\n        // the chips and `type: 'plain'` legends can't expand upward\n        // without overlapping the donut.\n        center: ['50%', '38%'] as [string, string],\n        encode: { itemName: 'name', value: 'value' },\n        label: {\n          ...templateLabel,\n          formatter: labelTextFormatter,\n        },\n        itemStyle: {\n          ...templateItemStyle,\n          color: colorFn,\n        },\n      }\n    }),\n    // Legend always shows for pie (mirrors v1) — slice names drive the\n    // entries, so even a single donut benefits from a category list.\n    //\n    // Exclusion is conveyed purely via `colorFn`/`labelTextFormatter`\n    // dimming above, never via the legend's `selected` map: for a pie\n    // series, ECharts treats `legend.selected[name] = false` as \"remove\n    // this data point,\" which recomputes every remaining slice's angle —\n    // the excluded slice disappears instead of rendering dimmed. Forcing\n    // every name to `true` on every render also overrides ECharts' own\n    // internal toggle state from a native legend click (which flips a\n    // name to `false` and hides it before our `legendselectchanged`\n    // handler gets a chance to react), so a legend click never leaves a\n    // slice structurally removed — only the color/label dimming reflects\n    // exclusion, and it stays in sync with the slice itself since both\n    // read `selectionSet` on the same render.\n    legend: {\n      ...baseLegend,\n      show: true,\n      selectedMode: false,\n      selected: Object.fromEntries(\n        (seriesArr[0] ?? []).map((d) => [String(d.name), true]),\n      ),\n    },\n    tooltip: {\n      ...baseTooltip,\n      formatter: buildPieTooltipFormatter(formatter, labelFormatter),\n    },\n  }\n}\n\n/**\n * Multi-series horizontal-bar fusion. Mirrors v1 pie's \"pie data with\n * >1 series collapses into a horizontal bar chart\" behavior — side-by-\n * side donuts don't read well when you're comparing the same categories\n * across cohorts, so swap to a value-on-x / category-on-y bar layout.\n *\n * Pie data shape is identical to bar's (`{ name, value }[][]`), so the\n * same dataset feeds either layout without transformation.\n */\nfunction buildMultiSeriesBarFusion(\n  option: EChartsOption,\n  seriesArr: PieWidgetData,\n  theme: Theme,\n  series: readonly WidgetSeries[] | undefined,\n  ctx: OptionFactoryContext | undefined,\n  selectionSet: Set<string | number> | null,\n): EChartsOption {\n  const baseTooltip =\n    typeof option.tooltip === 'object' && !Array.isArray(option.tooltip)\n      ? option.tooltip\n      : {}\n  const baseLegend =\n    typeof option.legend === 'object' && !Array.isArray(option.legend)\n      ? option.legend\n      : {}\n  const baseGrid =\n    typeof option.grid === 'object' && !Array.isArray(option.grid)\n      ? option.grid\n      : {}\n  const formatter = ctx?.formatter\n  const labelFormatter = ctx?.labelFormatter\n\n  const { niceMinVal, niceMaxVal } = computeNiceBounds(seriesArr)\n\n  // Per-series palette — multi-series bars take one color per series\n  // (not per-data, unlike donut slices). Same anti-stale-callback rule:\n  // always emit the callback so a transition to/from a selection\n  // replaces the previous closure cleanly.\n  const palette = Array.isArray(option.color)\n    ? (option.color as readonly (string | undefined)[])\n    : []\n  const barColorFn = (params: CallbackDataParams): string => {\n    const seriesIdx = params.seriesIndex ?? 0\n    const seriesSwatch =\n      palette.length > 0 ? palette[seriesIdx % palette.length] : undefined\n    const base = (seriesSwatch ?? params.color) as string\n    if (!selectionSet) return base\n    const datum = params.value as { name?: string | number } | undefined\n    const name = datum?.name ?? params.name\n    return name != null && selectionSet.has(name)\n      ? base\n      : echarts.color.modifyAlpha(base, 0.15)\n  }\n\n  return {\n    ...option,\n    dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),\n    grid: {\n      ...baseGrid,\n      ...buildGridConfig(true, theme),\n      right: parseInt(theme.spacing(4)),\n      containLabel: true,\n    },\n    // Drop pie-specific structural keys that shouldn't render in the\n    // bar fallback. ECharts ignores undefined keys, so this is a clean\n    // override.\n    series: seriesArr.map((_, i) => {\n      const overrideColor = resolveThemeColor(theme, series?.[i]?.color)\n      return {\n        datasetIndex: i,\n        type: 'bar' as const,\n        name: series?.[i]?.name ?? `Series ${i + 1}`,\n        barMaxWidth: 100,\n        legendHoverLink: false,\n        emphasis: { focus: 'series' },\n        ...buildSeriesLabelConfig(formatter, 'x'),\n        itemStyle: { color: barColorFn },\n        ...(overrideColor ? { color: overrideColor } : {}),\n      }\n    }),\n    xAxis: {\n      type: 'value',\n      // Closures over the pre-computed nice bounds — ECharts calls them\n      // once per render to resolve the axis extents.\n      min: () => niceMinVal,\n      max: () => niceMaxVal,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: {\n        show: true,\n        lineStyle: { color: theme.palette.black?.[4] ?? theme.palette.divider },\n      },\n      // Value labels render BELOW the axis line (default placement),\n      // NOT inside the plot. Bar/histogram use `inside: true` +\n      // `verticalAlign: 'bottom'` for their *vertical* y-axis where the\n      // axis is the left wall — labels inside read like grid annotations.\n      // A horizontal bar chart's value axis is the x-axis, and `inside`\n      // there pushes the max label *behind* the bar (it visually\n      // disappears once a bar reaches the right edge). Use the default\n      // below-the-axis placement so the rounded extents stay readable.\n      axisLabel: {\n        fontSize: theme.typography.overlineDelicate?.fontSize,\n        fontFamily: theme.typography.overlineDelicate?.fontFamily,\n        margin: parseInt(theme.spacing(1)),\n        showMaxLabel: true,\n        showMinLabel: true,\n        formatter: (value: number) => {\n          if (value !== niceMaxVal && value !== niceMinVal) return ''\n          if (value === 0) return ''\n          return formatter ? formatter(value) : String(value)\n        },\n      },\n    },\n    yAxis: {\n      type: 'category',\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],\n        ...(labelFormatter && {\n          formatter: (value: string | number) => String(labelFormatter(value)),\n        }),\n      },\n    },\n    // Mirrors the donut branch's `selected` reset above — `selectedMode:\n    // false` blocks the native legend click that would otherwise undo an\n    // ECharts-internal toggle, so without forcing every entry back to\n    // `true` here a prior native toggle (from before `selectedMode` took\n    // effect, or a stale `keepAlive` instance) would stay hidden forever\n    // with no way to restore it.\n    legend: {\n      ...baseLegend,\n      show: true,\n      selectedMode: false,\n      selected: Object.fromEntries(\n        seriesArr.map((_, i) => [series?.[i]?.name ?? `Series ${i + 1}`, true]),\n      ),\n    },\n    tooltip: {\n      ...baseTooltip,\n      trigger: 'axis',\n      formatter: buildHorizontalBarTooltipFormatter(formatter, labelFormatter),\n    },\n  } as EChartsOption\n}\n\n/**\n * Tooltip formatter for the horizontal-bar fallback. Reads the value by\n * `encode.x` dimension index (v1 parity) so it stays robust to\n * downstream changes that rename dataset columns.\n */\nfunction buildHorizontalBarTooltipFormatter(\n  formatter: ((value: number) => string) | undefined,\n  labelFormatter: ((value: string | number) => string | number) | undefined,\n) {\n  return createTooltipFormatter((item) => {\n    const encodeIndex = item.encode?.x?.at(0)\n    const dimName =\n      encodeIndex !== undefined ? item.dimensionNames?.[encodeIndex] : undefined\n    const row =\n      item.value && typeof item.value === 'object' && !Array.isArray(item.value)\n        ? (item.value as Record<string, string | number>)\n        : undefined\n    const raw = dimName && row ? row[dimName] : undefined\n    const formattedValue =\n      typeof raw === 'number' && formatter ? formatter(raw) : (raw ?? '')\n    const marker = typeof item.marker === 'string' ? item.marker : ''\n    const seriesName = item.seriesName ? `${item.seriesName}: ` : ''\n    const name = labelFormatter\n      ? String(labelFormatter(item.name ?? ''))\n      : String(item.name ?? '')\n    return { name, seriesName, marker, value: formattedValue }\n  })\n}\n\n/**\n * Min/max bounds over every datum's `.value` across all series. Used by\n * the horizontal-bar fallback's x-axis label formatter so we only render\n * labels at the rounded extents (matches v1 + bar / histogram).\n */\nfunction computeNiceBounds(seriesArr: PieWidgetData): {\n  niceMinVal: number\n  niceMaxVal: number\n} {\n  let min = 0\n  let max = -Infinity\n  for (const series of seriesArr) {\n    for (const d of series) {\n      if (typeof d?.value !== 'number' || !Number.isFinite(d.value)) continue\n      if (d.value < min) min = d.value\n      if (d.value > max) max = d.value\n    }\n  }\n  return {\n    niceMinVal: min < 0 ? niceNum(min) : 0,\n    niceMaxVal: max <= 0 ? 1 : niceNum(max),\n  }\n}\n\n/**\n * Tooltip formatter for pie slices. `item.value` is the dataset row\n * object (e.g. `{ name: 'A', value: 10 }`); we pull the value by\n * `encode.value`'s dimension index, formatted via the reactive `formatter`\n * if present. Slice name passes through `labelFormatter`.\n */\nfunction buildPieTooltipFormatter(\n  formatter: ((value: number) => string) | undefined,\n  labelFormatter: ((value: string | number) => string | number) | undefined,\n) {\n  return createTooltipFormatter((item) => {\n    const encodeIndex = item.encode?.value?.at(0) ?? 1\n    const values =\n      item.value && typeof item.value === 'object' && !Array.isArray(item.value)\n        ? (Object.values(item.value) as (string | number)[])\n        : []\n    const raw = values[encodeIndex]\n    const formattedValue =\n      typeof raw === 'number' && formatter ? formatter(raw) : (raw ?? '')\n    const marker = typeof item.marker === 'string' ? item.marker : ''\n    const seriesName = item.seriesName ? `${item.seriesName}: ` : ''\n    const name = labelFormatter\n      ? String(labelFormatter(item.name ?? ''))\n      : String(item.name ?? '')\n    return { name, seriesName, marker, value: formattedValue }\n  })\n}\n","import { Box, Skeleton } from '@mui/material'\nimport type { SxProps, Theme } from '@mui/material'\n\nconst OUTER_SIZE = 160\nconst HOLE_SIZE = 96\n\nconst styles = {\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 200,\n    py: 1,\n    gap: ({ spacing }) => spacing(2),\n  },\n  donut: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  ring: {\n    width: OUTER_SIZE,\n    height: OUTER_SIZE,\n  },\n  hole: {\n    position: 'absolute',\n    zIndex: 1,\n    width: HOLE_SIZE,\n    height: HOLE_SIZE,\n    borderRadius: '50%',\n    bgcolor: 'background.paper',\n  },\n  label: {\n    position: 'absolute',\n    zIndex: 2,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: ({ spacing }) => spacing(0.5),\n  },\n  legend: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(2),\n  },\n  legendItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(1.5),\n  },\n} satisfies Record<string, SxProps<Theme>>\n\nexport interface PieSkeletonProps {\n  count?: number\n}\n\n/**\n * Loading state for the Pie widget. Mirrors the donut silhouette — a ring\n * (gray circle with a background-coloured hole punched out), a stacked\n * value/name stub in the centre, and a centered legend stub below — so the\n * skeleton reads as \"a donut chart\" rather than a solid disc.\n *\n * Single donut only: multi-series pie loads as a horizontal bar chart, so\n * rendering one ring stays honest regardless of `count`.\n */\nexport function PieSkeleton({ count }: PieSkeletonProps) {\n  // `count` is accepted for API compatibility but intentionally unused: the\n  // skeleton always renders a single donut, since multi-series pie loads as a\n  // horizontal bar chart rather than multiple donuts.\n  void count\n  return (\n    <Box sx={styles.root}>\n      <Box sx={styles.donut}>\n        <Skeleton variant='circular' sx={styles.ring} />\n        <Box sx={styles.hole} />\n        <Box sx={styles.label}>\n          <Skeleton width={56} height={18} />\n          <Skeleton width={36} height={8} />\n        </Box>\n      </Box>\n      <Box sx={styles.legend}>\n        {[0, 1].map((i) => (\n          <Box key={`legend-${i}`} sx={styles.legendItem}>\n            <Skeleton variant='circular' width={8} height={8} />\n            <Skeleton width={48} height={8} />\n          </Box>\n        ))}\n      </Box>\n    </Box>\n  )\n}\n","import {\n  buildCsvDownloadItem,\n  buildPngDownloadItem,\n  type DownloadItem,\n} from '../actions/download'\nimport type { PieWidgetData } from './types'\n\n/**\n * Download menu items for the Pie widget. Always includes a CSV item with\n * `series, name, value` columns (one row per slice; series labels come from\n * `seriesNames` if provided, else `series_<n>`). When `getCaptureEl` is\n * supplied, prepends a PNG item that rasterises the captured element via\n * `html2canvas`.\n */\nexport function createPieDownloadConfig(args: {\n  filename: string\n  getData: () => PieWidgetData\n  seriesNames?: readonly string[]\n  getCaptureEl?: () => HTMLElement | null\n  pngPixelRatio?: number\n  pngBackgroundColor?: string | null\n}): DownloadItem[] {\n  const items: DownloadItem[] = []\n  if (args.getCaptureEl) {\n    items.push(\n      buildPngDownloadItem({\n        filename: args.filename,\n        getCaptureEl: args.getCaptureEl,\n        pixelRatio: args.pngPixelRatio,\n        backgroundColor: args.pngBackgroundColor,\n      }),\n    )\n  }\n  items.push(\n    buildCsvDownloadItem({\n      filename: args.filename,\n      getRows: () => {\n        const data = args.getData()\n        const rows: unknown[][] = [['series', 'name', 'value']]\n        for (const [i, series] of data.entries()) {\n          const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`\n          for (const slice of series) {\n            rows.push([seriesName, slice.name, slice.value])\n          }\n        }\n        return rows\n      },\n    }),\n  )\n  return items\n}\n"],"mappings":"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"}
+{"version":3,"file":"pie.js","names":["<Skeleton variant='circular' sx={styles.ring} />","<Box sx={styles.hole} />","<Box sx={styles.donut}>\n        <Skeleton variant='circular' sx={styles.ring} />\n        <Box sx={styles.hole} />\n        <Box sx={styles.label}>\n          <Skeleton width={56} height={18} />\n          <Skeleton width={36} height={8} />\n        </Box>\n      </Box>","<Box sx={styles.root}>\n      <Box sx={styles.donut}>\n        <Skeleton variant='circular' sx={styles.ring} />\n        <Box sx={styles.hole} />\n        <Box sx={styles.label}>\n          <Skeleton width={56} height={18} />\n          <Skeleton width={36} height={8} />\n        </Box>\n      </Box>\n      <Box sx={styles.legend}>\n        {[0, 1].map((i) => (\n          <Box key={`legend-${i}`} sx={styles.legendItem}>\n            <Skeleton variant='circular' width={8} height={8} />\n            <Skeleton width={48} height={8} />\n          </Box>\n        ))}\n      </Box>\n    </Box>","(i) => (\n          <Box key={`legend-${i}`} sx={styles.legendItem}>\n            <Skeleton variant='circular' width={8} height={8} />\n            <Skeleton width={48} height={8} />\n          </Box>\n        )"],"sources":["../../src/widgets-v2/pie/options.ts","../../src/widgets-v2/pie/skeleton.tsx","../../src/widgets-v2/pie/download.ts"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport type { EChartsOption } from 'echarts'\nimport * as echarts from 'echarts'\nimport type { CallbackDataParams } from 'echarts/types/dist/shared'\nimport {\n  buildGridConfig,\n  buildLegendConfig,\n  buildSeriesLabelConfig,\n  createTooltipFormatter,\n  createTooltipPositioner,\n  niceNum,\n} from '../../widgets/utils/chart-config'\nimport type { OptionFactory, OptionFactoryContext } from '../echart'\nimport { mergeOptions, resolveThemeColor } from '../utils'\nimport type { WidgetSeries } from '../types'\nimport type {\n  PieEChartsOption,\n  PieOptionFactoryInput,\n  PieOptionsInput,\n  PieWidgetData,\n} from './types'\n\nconst DEFAULT_RADIUS: readonly [string, string] = ['58%', '74%']\n\n/**\n * Builds the **structural** ECharts option for a pie / donut widget.\n * Mirrors v1's pie look-and-feel: themed legend (`buildLegendConfig`),\n * themed tooltip via `createTooltipPositioner` / `createTooltipFormatter`,\n * `qualitative.bold` color palette, slice borders against the paper\n * background, hover-emphasis disabled, and a centered rich-text label.\n *\n * Layered like Bar / Histogram:\n *   - **Theme-aware bits** live here on a series template (slice border,\n *     center-label rich style sizes, emphasis-disabled).\n *   - **Reactive bits** (tooltip value formatter, center-label text,\n *     selection-driven dim) are re-emitted by\n *     {@link createPieOptionFactory} at fusion time so RelativeData's\n *     percent override flows through.\n */\nexport function pieOptions({\n  theme,\n  formatter,\n  labelFormatter,\n}: PieOptionsInput): PieEChartsOption {\n  return {\n    legend: {\n      ...buildLegendConfig({ hasLegend: true, labelFormatter }),\n      // Bottom-left, same as every other widget — `buildLegendConfig`'s\n      // `left: 0` is kept deliberately. The wider `itemGap` gives chips\n      // breathing room in the typical 3–6 category case.\n      type: 'scroll',\n      itemGap: 16,\n      // The legend is presentational only here — the pie has its own\n      // click-to-select affordance on the slices themselves, so legend\n      // clicks toggling series visibility would be a second, redundant/\n      // conflicting interaction model. Hover-highlight is disabled per\n      // series via `legendHoverLink` (ECharts has no legend-level knob\n      // for it).\n      selectedMode: false,\n    },\n    tooltip: {\n      // Pie uses item-trigger (no axis); the rest of the styling mirrors\n      // bar/histogram so the dashboard reads consistently — dark\n      // grey[900] bg, white caption-font text, padded, with the shared\n      // overflow-aware positioner.\n      trigger: 'item',\n      backgroundColor: theme.palette.grey[900],\n      borderWidth: 0,\n      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],\n      textStyle: {\n        color: theme.palette.common.white,\n        fontSize: 11,\n        fontFamily: theme.typography.caption.fontFamily,\n      },\n      position: createTooltipPositioner(theme),\n      formatter: buildPieTooltipFormatter(formatter, labelFormatter),\n    },\n    // V1 used `qualitative.bold` only (no `secondary.main` prefix) because\n    // pie slices are categorical — each slice deserves a distinct palette\n    // entry from the start, not a primary highlight.\n    color: Object.values(\n      (theme.palette as { qualitative?: { bold?: Record<string, string> } })\n        .qualitative?.bold ?? {},\n    ),\n    // Pie template. The merger spreads this into each per-data series it\n    // emits — borderColor / borderWidth / emphasis-disabled / label rich\n    // sizes all survive through.\n    series: [\n      {\n        type: 'pie',\n        colorBy: 'data',\n        avoidLabelOverlap: true,\n        selectedOffset: 0,\n        legendHoverLink: false,\n        emphasis: { disabled: true },\n        itemStyle: {\n          borderColor: theme.palette.background.paper,\n          borderWidth: 1,\n        },\n        label: {\n          show: true,\n          position: 'center',\n          rich: {\n            b: { fontSize: 16, fontWeight: 'normal', lineHeight: 20 },\n            c: { fontSize: 28, fontWeight: 'bold', lineHeight: 27 },\n          },\n        },\n      },\n    ],\n  }\n}\n\n/**\n * Returns the pie widget's {@link OptionFactory} — one closure that owns\n * BOTH phases of option construction:\n *\n *   - **Structural phase** (`option == null`) — builds the theme-aware\n *     structural option via {@link pieOptions}, optionally merging the\n *     consumer-supplied `optionsOverride` on top. Called once by Provider\n *     to seed `rawOptions` in the store.\n *   - **Merge phase** (`option != null`) — fuses post-pipeline `state.data`\n *     (`PieWidgetData`) into the option via the dataset API. Single-series\n *     → donut (one dataset, `series[i].encode = { itemName: 'name', value: 'value' }`).\n *     Multi-series → horizontal-bar fallback (mirrors v1 pie). Reactive\n *     formatters from `ctx` drive the tooltip + center label at fusion\n *     time so RelativeData's percent formatter flows through without a\n *     structural rebuild.\n */\nexport function createPieOptionFactory(\n  options: PieOptionFactoryInput,\n): OptionFactory {\n  const { theme, formatter, labelFormatter, optionsOverride, series } = options\n  const radius = options.radius ?? DEFAULT_RADIUS\n  const selection = options.selection\n  // An explicit `[]` (deselected down to zero via chart clicks) is treated\n  // the same as no selection: the pie has no bar/histogram-style \"nothing\n  // selected\" affordance, so dimming every slice would just look broken —\n  // it renders fully active, same as the no-interaction state.\n  const selectionSet =\n    selection === undefined || selection === null || selection.length === 0\n      ? null\n      : new Set<string | number>(selection)\n  return (option, data, ctx) => {\n    if (option == null) {\n      const structural = pieOptions({ theme, formatter, labelFormatter })\n      return optionsOverride\n        ? (mergeOptions(\n            structural as unknown as Record<string, unknown>,\n            optionsOverride as Partial<Record<string, unknown>>,\n          ) as EChartsOption)\n        : structural\n    }\n\n    const seriesArr = Array.isArray(data) ? (data as PieWidgetData) : []\n    if (seriesArr.length === 0) {\n      return { ...option, dataset: [], series: [] }\n    }\n    if (seriesArr.length > 1) {\n      return buildMultiSeriesBarFusion(\n        option,\n        seriesArr,\n        theme,\n        series,\n        ctx,\n        selectionSet,\n      )\n    }\n    return buildSingleSeriesPieFusion(\n      option,\n      seriesArr,\n      radius,\n      series,\n      ctx,\n      selectionSet,\n    )\n  }\n}\n\n/**\n * Single-series donut fusion. Spreads the structural pie series template\n * into per-data series with center/radius/encoding, wires the reactive\n * center-label / tooltip formatters and the per-data palette-aware\n * selection-dim callback.\n */\nfunction buildSingleSeriesPieFusion(\n  option: EChartsOption,\n  seriesArr: PieWidgetData,\n  radius: readonly [string, string],\n  series: readonly WidgetSeries[] | undefined,\n  ctx: OptionFactoryContext | undefined,\n  selectionSet: Set<string | number> | null,\n): EChartsOption {\n  const seriesTemplates = Array.isArray(option.series) ? option.series : []\n  const broadcastTemplate = seriesTemplates[0] ?? {}\n  const baseTooltip =\n    typeof option.tooltip === 'object' && !Array.isArray(option.tooltip)\n      ? option.tooltip\n      : {}\n  const baseLegend =\n    typeof option.legend === 'object' && !Array.isArray(option.legend)\n      ? option.legend\n      : {}\n  const formatter = ctx?.formatter\n  const labelFormatter = ctx?.labelFormatter\n\n  // Pie wants `colorBy: 'data'` — each slice draws from the option's\n  // `color` palette by data index. But installing an `itemStyle.color`\n  // callback disables ECharts' automatic per-data cycling, and\n  // `params.color` collapses to the series color (so every slice goes\n  // the same color). We re-implement the per-data palette resolution\n  // here so the multicolor look survives selection-driven dimming.\n  const palette = Array.isArray(option.color)\n    ? (option.color as readonly (string | undefined)[])\n    : []\n  const resolvePaletteColor = (params: CallbackDataParams): string => {\n    const swatch =\n      palette.length > 0\n        ? palette[params.dataIndex % palette.length]\n        : undefined\n    return swatch ?? (params.color as string)\n  }\n\n  // Always emit `itemStyle.color` (passthrough when nothing is selected),\n  // not conditionally — same anti-stale-callback rationale as bar /\n  // histogram. The slice border + width come from the structural\n  // template's `itemStyle` and survive via the spread below.\n  //\n  // `selectionSet` is the *included* set, same direct semantics as\n  // bar/histogram/timeseries (no ADR-014 exclusion inversion). Dim a slice\n  // when its name is NOT in the set. `selectionSet` is never a non-null\n  // empty Set — the collapse above (`selection.length === 0 → null`) rules\n  // that out — so there's no \"dim everything\" case here, unlike a widget\n  // that gives `[]` its own \"selected down to nothing\" meaning.\n  const colorFn = (params: CallbackDataParams): string => {\n    const base = resolvePaletteColor(params)\n    if (!selectionSet) return base\n    const datum = params.value as { name?: string | number } | undefined\n    const name = datum?.name ?? params.name\n    return name != null && selectionSet.has(name)\n      ? base\n      : echarts.color.modifyAlpha(base, 0.15)\n  }\n\n  // ECharts anchors EVERY slice's `position: 'center'` label at the same\n  // point, so at most one of them can ever be legible — the donut design\n  // leans into that (one KPI inside the ring) and picks a single slice\n  // below. A consumer that moves the labels off the centre gives each\n  // slice its own anchor (`'outside'` with leader lines is what the PDF\n  // export uses, `'inside'` / `'insideTop'` … likewise), and there the\n  // single-label rule is simply wrong: every slice must render its own\n  // label. Read the position off the structural template, which already\n  // carries the consumer's `optionsOverride`.\n  const templateLabelPosition = (\n    broadcastTemplate as { label?: { position?: unknown } }\n  ).label?.position\n  const isCenterLabel =\n    templateLabelPosition === undefined || templateLabelPosition === 'center'\n\n  // Which slice renders the centre value+name: the greatest value among\n  // the *included* slices (all of them when there's no active\n  // selection), computed locally — no query round-trip. Only that one\n  // slice's formatter call returns text; every other slice returns ''\n  // so exactly one label ever renders at the shared centre anchor. Only\n  // `typeof value === 'number'` participates — if every included slice's\n  // value is non-numeric, `centerMaxName` stays `undefined` and no slice\n  // matches it in `labelTextFormatter` below, so the chart renders with no\n  // centre label at all (graceful no-op, not a crash). Skipped entirely\n  // for off-centre labels, where every slice labels itself.\n  const centerData = seriesArr[0] ?? []\n  let centerMaxName: string | number | undefined\n  let centerMaxValue = -Infinity\n  for (const d of centerData) {\n    if (selectionSet && !selectionSet.has(d.name)) continue\n    if (typeof d.value === 'number' && d.value > centerMaxValue) {\n      centerMaxValue = d.value\n      centerMaxName = d.name\n    }\n  }\n\n  // Slice label formatter — lives in the merger because it reads\n  // reactive `formatter` / `labelFormatter` from ctx. The rich tags\n  // `{c|…}` and `{b|…}` reference the rich styles baked into the\n  // structural label template.\n  const labelTextFormatter = (params: CallbackDataParams): string => {\n    const { name } = params\n    if (name == null) return ''\n    if (isCenterLabel && name !== centerMaxName) return ''\n    const encodeIndex = params.encode?.value?.[0]\n    if (encodeIndex === undefined) return ''\n    const value = (Object.values(params.data ?? {}) as unknown[]).at(\n      encodeIndex,\n    )\n    // `value` here is the resolved dataset cell — for pie data it's a\n    // `string | number` primitive. Anything else is a misuse we won't\n    // dress up with `String(...)` (would render \"[object Object]\").\n    const formattedValue =\n      typeof value === 'number'\n        ? formatter\n          ? formatter(value)\n          : String(value)\n        : typeof value === 'string'\n          ? value\n          : ''\n    const formattedName = labelFormatter\n      ? String(labelFormatter(name ?? ''))\n      : String(name ?? '')\n    // The blank line is what separates the big centre KPI from its\n    // caption. Off-centre labels sit next to their own slice and are\n    // laid out against their neighbours, so the spacer only inflates\n    // each label's bounding box — enough, with a hidden `{b|…}` block,\n    // to make ECharts drop colliding labels altogether.\n    const separator = isCenterLabel ? '\\n\\n' : '\\n'\n    return `{c|${formattedValue}}${separator}{b|${formattedName}}`\n  }\n\n  return {\n    ...option,\n    dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),\n    series: seriesArr.map((_, i) => {\n      const template =\n        (seriesTemplates[i] as object | undefined) ??\n        (broadcastTemplate as object)\n      const templateObj = typeof template === 'object' ? template : {}\n      const templateLabel = (templateObj as { label?: object }).label ?? {}\n      const templateItemStyle =\n        (templateObj as { itemStyle?: object }).itemStyle ?? {}\n      return {\n        ...templateObj,\n        type: 'pie' as const,\n        legendHoverLink: false,\n        datasetIndex: i,\n        name: series?.[i]?.name ?? `Series ${i + 1}`,\n        radius: [...radius],\n        // Lift the donut up so the bottom-anchored legend has the\n        // vertical real estate to wrap to multiple rows for long\n        // category lists — at exactly `50%` the bottom slices crowd\n        // the chips and `type: 'plain'` legends can't expand upward\n        // without overlapping the donut.\n        center: ['50%', '38%'] as [string, string],\n        encode: { itemName: 'name', value: 'value' },\n        label: {\n          ...templateLabel,\n          formatter: labelTextFormatter,\n        },\n        itemStyle: {\n          ...templateItemStyle,\n          color: colorFn,\n        },\n      }\n    }),\n    // Legend always shows for pie (mirrors v1) — slice names drive the\n    // entries, so even a single donut benefits from a category list.\n    //\n    // Exclusion is conveyed purely via `colorFn`/`labelTextFormatter`\n    // dimming above, never via the legend's `selected` map: for a pie\n    // series, ECharts treats `legend.selected[name] = false` as \"remove\n    // this data point,\" which recomputes every remaining slice's angle —\n    // the excluded slice disappears instead of rendering dimmed. Forcing\n    // every name to `true` on every render also overrides ECharts' own\n    // internal toggle state from a native legend click (which flips a\n    // name to `false` and hides it before our `legendselectchanged`\n    // handler gets a chance to react), so a legend click never leaves a\n    // slice structurally removed — only the color/label dimming reflects\n    // exclusion, and it stays in sync with the slice itself since both\n    // read `selectionSet` on the same render.\n    legend: {\n      ...baseLegend,\n      show: true,\n      selectedMode: false,\n      selected: Object.fromEntries(\n        (seriesArr[0] ?? []).map((d) => [String(d.name), true]),\n      ),\n    },\n    tooltip: {\n      ...baseTooltip,\n      formatter: buildPieTooltipFormatter(formatter, labelFormatter),\n    },\n  }\n}\n\n/**\n * Multi-series horizontal-bar fusion. Mirrors v1 pie's \"pie data with\n * >1 series collapses into a horizontal bar chart\" behavior — side-by-\n * side donuts don't read well when you're comparing the same categories\n * across cohorts, so swap to a value-on-x / category-on-y bar layout.\n *\n * Pie data shape is identical to bar's (`{ name, value }[][]`), so the\n * same dataset feeds either layout without transformation.\n */\nfunction buildMultiSeriesBarFusion(\n  option: EChartsOption,\n  seriesArr: PieWidgetData,\n  theme: Theme,\n  series: readonly WidgetSeries[] | undefined,\n  ctx: OptionFactoryContext | undefined,\n  selectionSet: Set<string | number> | null,\n): EChartsOption {\n  const baseTooltip =\n    typeof option.tooltip === 'object' && !Array.isArray(option.tooltip)\n      ? option.tooltip\n      : {}\n  const baseLegend =\n    typeof option.legend === 'object' && !Array.isArray(option.legend)\n      ? option.legend\n      : {}\n  const baseGrid =\n    typeof option.grid === 'object' && !Array.isArray(option.grid)\n      ? option.grid\n      : {}\n  const formatter = ctx?.formatter\n  const labelFormatter = ctx?.labelFormatter\n\n  const { niceMinVal, niceMaxVal } = computeNiceBounds(seriesArr)\n\n  // Per-series palette — multi-series bars take one color per series\n  // (not per-data, unlike donut slices). Same anti-stale-callback rule:\n  // always emit the callback so a transition to/from a selection\n  // replaces the previous closure cleanly.\n  const palette = Array.isArray(option.color)\n    ? (option.color as readonly (string | undefined)[])\n    : []\n  const barColorFn = (params: CallbackDataParams): string => {\n    const seriesIdx = params.seriesIndex ?? 0\n    const seriesSwatch =\n      palette.length > 0 ? palette[seriesIdx % palette.length] : undefined\n    const base = (seriesSwatch ?? params.color) as string\n    if (!selectionSet) return base\n    const datum = params.value as { name?: string | number } | undefined\n    const name = datum?.name ?? params.name\n    return name != null && selectionSet.has(name)\n      ? base\n      : echarts.color.modifyAlpha(base, 0.15)\n  }\n\n  return {\n    ...option,\n    dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),\n    grid: {\n      ...baseGrid,\n      ...buildGridConfig(true, theme),\n      right: parseInt(theme.spacing(4)),\n      containLabel: true,\n    },\n    // Drop pie-specific structural keys that shouldn't render in the\n    // bar fallback. ECharts ignores undefined keys, so this is a clean\n    // override.\n    series: seriesArr.map((_, i) => {\n      const overrideColor = resolveThemeColor(theme, series?.[i]?.color)\n      return {\n        datasetIndex: i,\n        type: 'bar' as const,\n        name: series?.[i]?.name ?? `Series ${i + 1}`,\n        barMaxWidth: 100,\n        legendHoverLink: false,\n        emphasis: { focus: 'series' },\n        ...buildSeriesLabelConfig(formatter, 'x'),\n        itemStyle: { color: barColorFn },\n        ...(overrideColor ? { color: overrideColor } : {}),\n      }\n    }),\n    xAxis: {\n      type: 'value',\n      // Closures over the pre-computed nice bounds — ECharts calls them\n      // once per render to resolve the axis extents.\n      min: () => niceMinVal,\n      max: () => niceMaxVal,\n      axisLine: { show: false },\n      axisTick: { show: false },\n      splitLine: {\n        show: true,\n        lineStyle: { color: theme.palette.black?.[4] ?? theme.palette.divider },\n      },\n      // Value labels render BELOW the axis line (default placement),\n      // NOT inside the plot. Bar/histogram use `inside: true` +\n      // `verticalAlign: 'bottom'` for their *vertical* y-axis where the\n      // axis is the left wall — labels inside read like grid annotations.\n      // A horizontal bar chart's value axis is the x-axis, and `inside`\n      // there pushes the max label *behind* the bar (it visually\n      // disappears once a bar reaches the right edge). Use the default\n      // below-the-axis placement so the rounded extents stay readable.\n      axisLabel: {\n        fontSize: theme.typography.overlineDelicate?.fontSize,\n        fontFamily: theme.typography.overlineDelicate?.fontFamily,\n        margin: parseInt(theme.spacing(1)),\n        showMaxLabel: true,\n        showMinLabel: true,\n        formatter: (value: number) => {\n          if (value !== niceMaxVal && value !== niceMinVal) return ''\n          if (value === 0) return ''\n          return formatter ? formatter(value) : String(value)\n        },\n      },\n    },\n    yAxis: {\n      type: 'category',\n      axisLine: { show: false },\n      axisTick: { show: false },\n      axisLabel: {\n        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],\n        ...(labelFormatter && {\n          formatter: (value: string | number) => String(labelFormatter(value)),\n        }),\n      },\n    },\n    // Mirrors the donut branch's `selected` reset above — `selectedMode:\n    // false` blocks the native legend click that would otherwise undo an\n    // ECharts-internal toggle, so without forcing every entry back to\n    // `true` here a prior native toggle (from before `selectedMode` took\n    // effect, or a stale `keepAlive` instance) would stay hidden forever\n    // with no way to restore it.\n    legend: {\n      ...baseLegend,\n      show: true,\n      selectedMode: false,\n      selected: Object.fromEntries(\n        seriesArr.map((_, i) => [series?.[i]?.name ?? `Series ${i + 1}`, true]),\n      ),\n    },\n    tooltip: {\n      ...baseTooltip,\n      trigger: 'axis',\n      formatter: buildHorizontalBarTooltipFormatter(formatter, labelFormatter),\n    },\n  } as EChartsOption\n}\n\n/**\n * Tooltip formatter for the horizontal-bar fallback. Reads the value by\n * `encode.x` dimension index (v1 parity) so it stays robust to\n * downstream changes that rename dataset columns.\n */\nfunction buildHorizontalBarTooltipFormatter(\n  formatter: ((value: number) => string) | undefined,\n  labelFormatter: ((value: string | number) => string | number) | undefined,\n) {\n  return createTooltipFormatter((item) => {\n    const encodeIndex = item.encode?.x?.at(0)\n    const dimName =\n      encodeIndex !== undefined ? item.dimensionNames?.[encodeIndex] : undefined\n    const row =\n      item.value && typeof item.value === 'object' && !Array.isArray(item.value)\n        ? (item.value as Record<string, string | number>)\n        : undefined\n    const raw = dimName && row ? row[dimName] : undefined\n    const formattedValue =\n      typeof raw === 'number' && formatter ? formatter(raw) : (raw ?? '')\n    const marker = typeof item.marker === 'string' ? item.marker : ''\n    const seriesName = item.seriesName ? `${item.seriesName}: ` : ''\n    const name = labelFormatter\n      ? String(labelFormatter(item.name ?? ''))\n      : String(item.name ?? '')\n    return { name, seriesName, marker, value: formattedValue }\n  })\n}\n\n/**\n * Min/max bounds over every datum's `.value` across all series. Used by\n * the horizontal-bar fallback's x-axis label formatter so we only render\n * labels at the rounded extents (matches v1 + bar / histogram).\n */\nfunction computeNiceBounds(seriesArr: PieWidgetData): {\n  niceMinVal: number\n  niceMaxVal: number\n} {\n  let min = 0\n  let max = -Infinity\n  for (const series of seriesArr) {\n    for (const d of series) {\n      if (typeof d?.value !== 'number' || !Number.isFinite(d.value)) continue\n      if (d.value < min) min = d.value\n      if (d.value > max) max = d.value\n    }\n  }\n  return {\n    niceMinVal: min < 0 ? niceNum(min) : 0,\n    niceMaxVal: max <= 0 ? 1 : niceNum(max),\n  }\n}\n\n/**\n * Tooltip formatter for pie slices. `item.value` is the dataset row\n * object (e.g. `{ name: 'A', value: 10 }`); we pull the value by\n * `encode.value`'s dimension index, formatted via the reactive `formatter`\n * if present. Slice name passes through `labelFormatter`.\n */\nfunction buildPieTooltipFormatter(\n  formatter: ((value: number) => string) | undefined,\n  labelFormatter: ((value: string | number) => string | number) | undefined,\n) {\n  return createTooltipFormatter((item) => {\n    const encodeIndex = item.encode?.value?.at(0) ?? 1\n    const values =\n      item.value && typeof item.value === 'object' && !Array.isArray(item.value)\n        ? (Object.values(item.value) as (string | number)[])\n        : []\n    const raw = values[encodeIndex]\n    const formattedValue =\n      typeof raw === 'number' && formatter ? formatter(raw) : (raw ?? '')\n    const marker = typeof item.marker === 'string' ? item.marker : ''\n    const seriesName = item.seriesName ? `${item.seriesName}: ` : ''\n    const name = labelFormatter\n      ? String(labelFormatter(item.name ?? ''))\n      : String(item.name ?? '')\n    return { name, seriesName, marker, value: formattedValue }\n  })\n}\n","import { Box, Skeleton } from '@mui/material'\nimport type { SxProps, Theme } from '@mui/material'\n\nconst OUTER_SIZE = 160\nconst HOLE_SIZE = 96\n\nconst styles = {\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: 200,\n    py: 1,\n    gap: ({ spacing }) => spacing(2),\n  },\n  donut: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  ring: {\n    width: OUTER_SIZE,\n    height: OUTER_SIZE,\n  },\n  hole: {\n    position: 'absolute',\n    zIndex: 1,\n    width: HOLE_SIZE,\n    height: HOLE_SIZE,\n    borderRadius: '50%',\n    bgcolor: 'background.paper',\n  },\n  label: {\n    position: 'absolute',\n    zIndex: 2,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: ({ spacing }) => spacing(0.5),\n  },\n  legend: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(2),\n  },\n  legendItem: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(1.5),\n  },\n} satisfies Record<string, SxProps<Theme>>\n\nexport interface PieSkeletonProps {\n  count?: number\n}\n\n/**\n * Loading state for the Pie widget. Mirrors the donut silhouette — a ring\n * (gray circle with a background-coloured hole punched out), a stacked\n * value/name stub in the centre, and a centered legend stub below — so the\n * skeleton reads as \"a donut chart\" rather than a solid disc.\n *\n * Single donut only: multi-series pie loads as a horizontal bar chart, so\n * rendering one ring stays honest regardless of `count`.\n */\nexport function PieSkeleton({ count }: PieSkeletonProps) {\n  // `count` is accepted for API compatibility but intentionally unused: the\n  // skeleton always renders a single donut, since multi-series pie loads as a\n  // horizontal bar chart rather than multiple donuts.\n  void count\n  return (\n    <Box sx={styles.root}>\n      <Box sx={styles.donut}>\n        <Skeleton variant='circular' sx={styles.ring} />\n        <Box sx={styles.hole} />\n        <Box sx={styles.label}>\n          <Skeleton width={56} height={18} />\n          <Skeleton width={36} height={8} />\n        </Box>\n      </Box>\n      <Box sx={styles.legend}>\n        {[0, 1].map((i) => (\n          <Box key={`legend-${i}`} sx={styles.legendItem}>\n            <Skeleton variant='circular' width={8} height={8} />\n            <Skeleton width={48} height={8} />\n          </Box>\n        ))}\n      </Box>\n    </Box>\n  )\n}\n","import {\n  buildCsvDownloadItem,\n  buildPngDownloadItem,\n  type DownloadItem,\n} from '../actions/download'\nimport type { PieWidgetData } from './types'\n\n/**\n * Download menu items for the Pie widget. Always includes a CSV item with\n * `series, name, value` columns (one row per slice; series labels come from\n * `seriesNames` if provided, else `series_<n>`). When `getCaptureEl` is\n * supplied, prepends a PNG item that rasterises the captured element via\n * `html2canvas`.\n */\nexport function createPieDownloadConfig(args: {\n  filename: string\n  getData: () => PieWidgetData\n  seriesNames?: readonly string[]\n  getCaptureEl?: () => HTMLElement | null\n  pngPixelRatio?: number\n  pngBackgroundColor?: string | null\n}): DownloadItem[] {\n  const items: DownloadItem[] = []\n  if (args.getCaptureEl) {\n    items.push(\n      buildPngDownloadItem({\n        filename: args.filename,\n        getCaptureEl: args.getCaptureEl,\n        pixelRatio: args.pngPixelRatio,\n        backgroundColor: args.pngBackgroundColor,\n      }),\n    )\n  }\n  items.push(\n    buildCsvDownloadItem({\n      filename: args.filename,\n      getRows: () => {\n        const data = args.getData()\n        const rows: unknown[][] = [['series', 'name', 'value']]\n        for (const [i, series] of data.entries()) {\n          const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`\n          for (const slice of series) {\n            rows.push([seriesName, slice.name, slice.value])\n          }\n        }\n        return rows\n      },\n    }),\n  )\n  return items\n}\n"],"mappings":"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"}

package/dist/widgets-v2.js

@@ -2,9 +2,9 @@ import "./components-FED-ArwH.js";
 import { t as e } from "./tooltip-DJUGNZxY.js";
 import { t } from "./smart-tooltip-CwGHCqab.js";
 import { C as n, S as r, T as i, _ as a, h as o, l as s, m as c, p as l, w as u, x as d, y as f } from "./stores-tiFePP0A.js";
-import { i as p, n as m, o as h, r as g } from "./echart-DeBgdOtX.js";
+import { i as p, n as m, o as h, r as g } from "./echart-CRihbmRv.js";
 import { t as _ } from "./markdown-content-BWUqwx9F.js";
-import { C as v, S as y, c as b, f as x, g as S, o as C, r as w, t as T, y as E } from "./actions-yPZwFxSZ.js";
+import { C as v, S as y, c as b, f as x, g as S, o as C, r as w, t as T, y as E } from "./actions-BjPfCLG9.js";
 import { t as D } from "./zoom-toggle-IsF8BnAp.js";
 import { s as O } from "./download-DdaK3qgC.js";
 import { i as k, r as A } from "./formula-noJzQwKo.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -17,8 +17,8 @@
     "react-dom": "19.2.8",
     "react-markdown": "10.1.0",
     "zustand": "5.0.15",
-    "@carto/ps-common-types": "1.0.0",
-    "@carto/ps-utils": "2.2.0"
+    "@carto/ps-utils": "2.2.0",
+    "@carto/ps-common-types": "1.0.0"
   },
   "peerDependencies": {
     "@carto/meridian-ds": "^2.0.0",

package/src/widgets-v2/actions/fullscreen/fullscreen.test.tsx

@@ -104,6 +104,68 @@ describe('<FullScreen.Slot> — render-prop body + portal', () => {
     expect(closes.length).toBeGreaterThan(0)
   })
 
+  it('renders `actions` in the modal header, next to the close button', async () => {
+    render(
+      <Provider id='fs-actions' data={[]}>
+        <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+        <FullScreen.Slot
+          title='With actions'
+          actions={<button type='button'>Download</button>}
+        >
+          {() => <div>body</div>}
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    const action = await screen.findByText('Download')
+    // Same header row as the close button — the wrapper's action row is
+    // covered by the dialog, so the modal has to carry them itself.
+    const header = action.closest('.MuiDialogTitle-root')
+    expect(header).toBeTruthy()
+    expect(
+      header?.querySelector('[aria-label="Exit full screen"]'),
+    ).toBeTruthy()
+  })
+
+  it('keeps `actions` mounted across a fullscreen toggle', () => {
+    render(
+      <Provider id='fs-actions-keep' data={[]}>
+        <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+        <FullScreen.Slot
+          title='Y'
+          actions={<button type='button'>Download</button>}
+        >
+          {() => <div>body</div>}
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    const before = screen.getByText('Download')
+    fireEvent.click(screen.getByLabelText('CloseT'))
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    expect(screen.getByText('Download')).toBe(before)
+  })
+
+  it('merges `paperSx` over the default dialog paper size', () => {
+    render(
+      <Provider id='fs-paper' data={[]}>
+        <FullScreen.Trigger />
+        <FullScreen.Slot title='P' paperSx={{ width: 560, height: 'auto' }}>
+          {() => <div>body</div>}
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('Open in full screen'))
+    const paper = document.querySelector<HTMLElement>('.MuiDialog-paper')
+    expect(paper).toBeTruthy()
+    const css = getComputedStyle(paper!)
+    expect(css.width).toBe('560px')
+    expect(css.height).toBe('auto')
+    // Untouched keys still come from the default — `90vw`, resolved against
+    // the test viewport (1024px).
+    expect(css.maxWidth).toBe('921.6px')
+  })
+
   it('keeps the same DOM node across the fullscreen toggle (portal reparent)', () => {
     render(
       <Provider id='fs-reparent' data={[]}>

package/src/widgets-v2/actions/fullscreen/fullscreen.tsx

@@ -13,7 +13,12 @@ import {
   DialogTitle,
   IconButton,
   Typography,
+  useMediaQuery,
+  useTheme,
   type SvgIconProps,
+  type CSSObject,
+  type SxProps,
+  type Theme,
 } from '@mui/material'
 import { Fullscreen as FullscreenIcon } from '@mui/icons-material'
 import { FullscreenExit as FullscreenExitIcon } from '@mui/icons-material'
@@ -40,6 +45,25 @@ export interface FullScreenSlotProps {
   children: (isFullScreen: boolean) => ReactNode
   /** Header text rendered above the body when the modal is open. */
   title?: ReactNode
+  /**
+   * Buttons rendered in the modal header, to the left of the close icon —
+   * the fullscreen counterpart of `<Widget.Actions>`, which lives in the
+   * wrapper's summary row and is covered by the dialog. Pass the same
+   * elements you compose there (typically `<Widget.Download>`); the
+   * fullscreen trigger is intentionally not among them, since the close
+   * icon already exits.
+   */
+  actions?: ReactNode
+  /**
+   * Per-widget override merged over the default `90vw x 90vh` dialog paper.
+   * Charts want the default (their canvas grows to fill it); content-sized
+   * widgets (Range, Markdown) pass their own width / `height: 'auto'` so the
+   * modal doesn't leave a large empty box around them.
+   *
+   * Shallow-merged over the default, same as `Widget.Actions`' `sx`: pass a
+   * plain style object, not the array or theme-callback form.
+   */
+  paperSx?: SxProps<Theme>
   labels?: Partial<FullScreenLabels>
   closeIcon?: ComponentType<SvgIconProps>
   iconProps?: SvgIconProps
@@ -102,6 +126,8 @@ function FullScreenTrigger({
 function FullScreenSlot({
   children,
   title,
+  actions,
+  paperSx,
   labels,
   closeIcon: CloseSvg = CloseIcon,
   iconProps,
@@ -112,6 +138,12 @@ function FullScreenSlot({
     id,
     (s) => s.isFullScreen ?? false,
   )
+  // Below `sm` the dialog goes edge-to-edge (MUI's own answer for phones).
+  // A paper sized as a fraction of a 390px viewport is narrower than the
+  // card the widget sits in, and forcing it wider just eats the dialog's
+  // margins — on a screen that small, fullscreen should mean fullscreen.
+  const theme = useTheme()
+  const fullBleed = useMediaQuery(theme.breakpoints.down('sm'))
   const [inlineEl, setInlineEl] = useState<HTMLElement | null>(null)
   const [dialogEl, setDialogEl] = useState<HTMLElement | null>(null)
   // Stable, never-changing portal container created once per slot. Held in
@@ -168,11 +200,25 @@ function FullScreenSlot({
       <Dialog
         open={open}
         onClose={handleClose}
-        PaperProps={{ sx: styles.dialogPaper }}
+        fullScreen={fullBleed}
+        // Edge-to-edge owns the sizing; the floor and cap would fight it.
+        PaperProps={fullBleed ? undefined : { sx: resolvePaperSx(paperSx) }}
         aria-labelledby={titleId}
-        // Sits above the Toolbox overflow Paper (zIndex.tooltip = 1500),
-        // so opening fullscreen never leaves a stray popover floating on top.
-        sx={{ zIndex: (theme) => theme.zIndex.tooltip + 1 }}
+        // Deliberately no z-index override. Raising the dialog above the
+        // tooltip layer also raises it above everything its own body opens —
+        // MUI portals menus and tooltips to `document.body`, so a Download
+        // menu (`zIndex.modal`, 1300) or a Tooltip (1500) ends up painted
+        // under a dialog at 1501 and its items can't be clicked. At the
+        // default modal layer the menu portals after the dialog and wins on
+        // DOM order, and the tooltip wins on z-index.
+        //
+        // This used to sit at `tooltip + 1` to cover a Toolbox popper left
+        // open when fullscreen opened. That's the Toolbox's own job and it
+        // already does it: `visibleCount` flips to `undefined` in fullscreen,
+        // overflow disappears and the popper unmounts. A consumer who keeps a
+        // numeric `visibleCount` in fullscreen keeps its popper above the
+        // dialog — which is the correct layer for a popover opened from
+        // inside it anyway.
       >
         <DialogTitle id={titleId} component='div' sx={styles.dialogTitle}>
           <Typography
@@ -182,15 +228,18 @@ function FullScreenSlot({
           >
             {title}
           </Typography>
-          <Tooltip title={_labels.close}>
-            <IconButton
-              size='medium'
-              aria-label={_labels.close}
-              onClick={handleClose}
-            >
-              <CloseSvg fontSize='small' {...iconProps} />
-            </IconButton>
-          </Tooltip>
+          <Box sx={styles.dialogActions}>
+            {actions}
+            <Tooltip title={_labels.close}>
+              <IconButton
+                size='medium'
+                aria-label={_labels.close}
+                onClick={handleClose}
+              >
+                <CloseSvg fontSize='small' {...iconProps} />
+              </IconButton>
+            </Tooltip>
+          </Box>
         </DialogTitle>
         <DialogContent ref={setDialogEl} sx={styles.dialogContent} />
       </Dialog>
@@ -198,6 +247,28 @@ function FullScreenSlot({
   )
 }
 
+/**
+ * Merge a caller's `paperSx` over the default paper.
+ *
+ * An explicit `width` / `height` also clears the default's floor on that
+ * axis: `minWidth: 70vw` is 1008px on a 1440px screen, so a caller asking
+ * for `width: 960` would silently get 1008 and the escape hatch wouldn't
+ * escape. The viewport cap stays — a size larger than the screen helps
+ * nobody — and a caller who wants their own floor or cap can still set
+ * `minWidth` / `maxWidth` directly, since their values are spread last.
+ */
+function resolvePaperSx(paperSx: SxProps<Theme> | undefined): SxProps<Theme> {
+  // Plain-object form only, as the prop documents — the array and
+  // theme-callback forms of `SxProps` wouldn't survive a shallow merge.
+  const plain = (paperSx ?? {}) as CSSObject
+  return {
+    ...styles.dialogPaper,
+    ...(plain.width !== undefined && { minWidth: 0 }),
+    ...(plain.height !== undefined && { minHeight: 0 }),
+    ...plain,
+  }
+}
+
 /**
  * Briefly clear the inline shell's `min-height`, measure its natural
  * height, then re-pin. Lives outside the component so the React Compiler
@@ -218,7 +289,7 @@ function refreshInlineHeightLock(el: HTMLElement): void {
  *   <Widget.FullScreen.Trigger />
  * </Widget.Actions>
  * <Widget.Content>
- *   <Widget.FullScreen.Slot title={title}>
+ *   <Widget.FullScreen.Slot title={title} actions={<Widget.Download items={items} />}>
  *     {(isFullScreen) => <Body visibleCount={isFullScreen ? undefined : 2} />}
  *   </Widget.FullScreen.Slot>
  * </Widget.Content>

package/src/widgets-v2/actions/fullscreen/style.ts

@@ -27,11 +27,25 @@ export const styles = {
   triggerActive: {
     background: (theme: Theme) => theme.palette.primary.relatedLight,
   },
+  // Sized by its content, between a floor and the viewport. The floor is
+  // what makes this safe: every widget body in the library is `width: 100%`
+  // (they're built to fill their card) and an ECharts canvas has no
+  // intrinsic size at all, so asking the content how big it wants to be
+  // gets no answer — without a floor the modal collapses to a few hundred
+  // pixels. Content bigger than the floor grows, up to the viewport cap.
+  //
+  // Floor and cap are both viewport units so the modal scales with the
+  // device: a px floor would be wider than the screen on a phone.
+  //
+  // Only applies from `sm` up — below that the dialog goes edge-to-edge and
+  // sizes itself (see `fullScreen` in fullscreen.tsx).
   dialogPaper: {
-    width: '90vw',
-    height: '90vh',
-    maxWidth: 'none',
-    maxHeight: 'none',
+    width: 'auto',
+    height: 'auto',
+    minWidth: '70vw',
+    minHeight: '70vh',
+    maxWidth: '90vw',
+    maxHeight: '90vh',
   },
   dialogTitle: {
     display: 'flex',
@@ -42,6 +56,15 @@ export const styles = {
     pr: 3,
     pb: 2,
   },
+  // Header buttons + close icon. Mirrors `Widget.Actions`' row so the modal
+  // header reads like the wrapper's summary row — minus the hover-fade,
+  // which makes no sense once the widget owns the whole screen.
+  dialogActions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.5,
+    flexShrink: 0,
+  },
   titleText: {
     minWidth: 0,
     overflow: 'hidden',
@@ -55,5 +78,9 @@ export const styles = {
     py: 3,
     px: 2.5,
     overflow: 'auto',
+    // Lets the flex children grow into the dialog's height (and shrink below
+    // their content size) instead of being floored by it — without this the
+    // chart can't use the space the modal gives it.
+    minHeight: 0,
   },
 } satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/echart/echart-ui.test.tsx

@@ -103,11 +103,14 @@ describe('<EchartUI>', () => {
       />,
     )
     expect(initSpy).toHaveBeenCalledTimes(1)
-    // 3rd arg merges the default `{ renderer: 'svg', height: 304 }` with the
-    // caller's init — canvas wins.
+    // 3rd arg merges the default `{ renderer: 'svg' }` with the caller's
+    // init — canvas wins.
     const initOpts = initSpy.mock.calls[0]![2] as Record<string, unknown>
     expect(initOpts.renderer).toBe('canvas')
-    expect(initOpts.height).toBe(304)
+    // No `height`: zrender would store it and every later `resize()` would
+    // snap back to it, so the chart could never grow into a fullscreen
+    // dialog. Height is container-driven instead.
+    expect(initOpts.height).toBeUndefined()
     expect(onInstance).toHaveBeenCalledWith(mockChart)
   })
 

package/src/widgets-v2/echart/echart-ui.tsx

@@ -9,9 +9,12 @@ import {
 import { observeResize } from './shared-resize-observer'
 import { styles } from './style'
 
+// No `height`: a numeric height here is stored in zrender's init opts, and
+// every later `resize()` resolves back to it — the chart would stay that tall
+// inside a fullscreen dialog. Height comes from the container instead
+// (`styles.root`'s `min-height` inline, `flex: 1` when the parent has one).
 export const DEFAULT_INIT_OPTS = {
   renderer: 'svg',
-  height: 304,
 } satisfies echarts.EChartsInitOpts
 
 export type EchartsEventHandler = (event: unknown) => void
@@ -36,7 +39,8 @@ export interface EchartUIProps {
   /**
    * Init options forwarded to echarts.init. Captured at mount only — to change
    * `renderer` or `height` after mount, unmount and remount the chart.
-   * Defaults: `{ renderer: 'svg', height: 304 }`.
+   * Defaults: `{ renderer: 'svg' }` — height is container-driven, so prefer
+   * `sx={{ minHeight }}` over pinning `height` here.
    */
   init?: echarts.EChartsInitOpts
   /**

package/src/widgets-v2/echart/echart.test.tsx

@@ -45,7 +45,7 @@ vi.mock('./echart-ui', () => ({
     }, [onInstance])
     return null
   },
-  DEFAULT_INIT_OPTS: { renderer: 'svg', height: 304 },
+  DEFAULT_INIT_OPTS: { renderer: 'svg' },
 }))
 
 beforeEach(() => {