@carto/ps-react-ui 6.0.0 → 6.1.1

package/dist/{zoom-toggle-D_VuA01l.js.map → zoom-toggle-MmLjMTEw.js.map}

@@ -1 +1 @@
-{"version":3,"file":"zoom-toggle-D_VuA01l.js","names":["Icon = ZoomInIcon","{\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps","initialEnabled = false","{ ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }","axes ? axes.includes('x') : true","axes ? axes.includes('y') : false","createAddZoom(theme, { axes: resolved })","useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])","{ initialEnabled }","() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }","useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])","{ ...styles.toggle, ...(enabled && styles.toggleActive) }","enabled && styles.toggleActive","<Icon fontSize='small' {...iconProps} />","<IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>","enabled ? 'active' : undefined","<Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>"],"sources":["../src/widgets/actions/zoom-toggle/transforms.ts","../src/widgets/actions/zoom-toggle/labels.ts","../src/widgets/actions/zoom-toggle/style.ts","../src/widgets/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"zoom-toggle-MmLjMTEw.js","names":["Icon = ZoomInIcon","{\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps","initialEnabled = false","{ ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }","axes ? axes.includes('x') : true","axes ? axes.includes('y') : false","createAddZoom(theme, { axes: resolved })","useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])","{ initialEnabled }","() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }","useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])","{ ...styles.toggle, ...(enabled && styles.toggleActive) }","enabled && styles.toggleActive","<Icon fontSize='small' {...iconProps} />","<IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>","enabled ? 'active' : undefined","<Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>"],"sources":["../src/widgets/actions/zoom-toggle/transforms.ts","../src/widgets/actions/zoom-toggle/labels.ts","../src/widgets/actions/zoom-toggle/style.ts","../src/widgets/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "6.0.0",
+  "version": "6.1.1",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {

package/src/legend/components/legend-item/legend-item-ui.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { formatNumber } from '@carto/ps-utils'
 import { LegendItemUI } from './legend-item-ui'
 import { LegendRampUI } from '../legend-ramp/legend-ramp-ui'
@@ -174,6 +174,27 @@ describe('<LegendRampUI> ordering (regression)', () => {
     expect(screen.getByText('d').style.left).toBe('100%')
   })
 
+  it('discrete steps show their value range on hover, even with hidden labels', async () => {
+    const data: LegendRampVariable = {
+      type: 'ramp',
+      isContinuous: false,
+      colors: ['#aaa', '#bbb', '#ccc'],
+      stops: [
+        { label: '0', value: 0 },
+        { label: '', value: 10 },
+        { label: '', value: 20 },
+        { label: '30', value: 30 },
+      ],
+      formatValue: (v) => `${v}%`,
+    }
+    render(<LegendRampUI data={data} />)
+    const steps = screen.getAllByRole('img')
+    // Hidden labels fall back to the raw value in the accessible name.
+    expect(steps[1]!.getAttribute('aria-label')).toBe('10 – 20')
+    fireEvent.mouseOver(steps[1]!)
+    expect((await screen.findByRole('tooltip')).textContent).toBe('10% – 20%')
+  })
+
   it('invalid discrete (stops ≠ colors + 1) renders an error, not a bar', () => {
     const data: LegendRampVariable = {
       type: 'ramp',

package/src/legend/components/legend-ramp/legend-ramp-ui.tsx

@@ -55,8 +55,11 @@ export function LegendRampUI({
   const invalidDiscrete = !isContinuous && !isBoundary
 
   // Boundary range for assistive tech (valid discrete only reaches here).
+  // Falls back to the raw value when a label is left empty to hide it.
+  const stopText = (index: number): string =>
+    stops[index]!.label || String(stops[index]!.value)
   const stepAriaLabel = (index: number): string =>
-    `${stops[index]?.label ?? ''} – ${stops[index + 1]?.label ?? ''}`
+    `${stopText(index)} – ${stopText(index + 1)}`
 
   const attributeHeader = attribute && (
     <Box sx={styles.attribute}>
@@ -106,13 +109,26 @@ export function LegendRampUI({
               sx={{ width: '100%', height: '100%', background: gradient }}
             />
           ) : (
+            // Each step's tooltip shows its full range from the stop values,
+            // so it works even when only the outer labels are rendered.
             colors.map((color, index) => (
-              <Box
+              <Tooltip
                 key={index}
-                role='img'
-                aria-label={stepAriaLabel(index)}
-                sx={{ ...styles.step, backgroundColor: color }}
-              />
+                title={
+                  <>
+                    {formatValue(stops[index]!.value)} –{' '}
+                    {formatValue(stops[index + 1]!.value)}
+                  </>
+                }
+                placement='top'
+                arrow
+              >
+                <Box
+                  role='img'
+                  aria-label={stepAriaLabel(index)}
+                  sx={{ ...styles.step, backgroundColor: color }}
+                />
+              </Tooltip>
             ))
           )}
         </Box>

package/src/legend/stores/types.ts

@@ -96,7 +96,8 @@ export interface LegendRampVariable {
    * Ordered low→high stops. Discrete ramps **require `colors.length + 1`**
    * stops — the boundaries between color steps, including both outer edges —
    * and each label is centered on its boundary line (keep labels short, e.g.
-   * `20K`; there is no collision handling). A discrete ramp with any other
+   * `20K`; there is no collision handling; pass `''` to hide one — each step's
+   * tooltip still shows its full range). A discrete ramp with any other
    * stop count is incoherent and renders an inline error instead of the bar.
    * Continuous ramps show only the first/last endpoints.
    */
@@ -110,7 +111,8 @@ export interface LegendRampVariable {
    */
   avg?: number
   /**
-   * Formats `avg` for its tooltip. Default `String(avg)` — pass e.g.
+   * Formats `avg` and, on discrete ramps, the stop values shown in each
+   * step's range tooltip. Default `String(value)` — pass e.g.
    * `(v) => formatNumber(v, 'es-ES')` or `(v) => `${v}%``. Use a stable
    * reference (same contract as the other variable fields).
    */

package/src/widgets/actions/download/csv-item.test.tsx

@@ -47,7 +47,7 @@ describe('buildCsvDownloadItem', () => {
         ['a', 1],
       ],
     })
-    const handle = await item.resolve()
+    const handle = await item.resolve({ id: null })
     expect(handle.url).toBe('blob:csv')
     expect(handle.filename).toBe('sales.csv')
     expect(csvText).toBe('name,value\na,1')
@@ -60,7 +60,7 @@ describe('buildCsvDownloadItem', () => {
       filename: 'sales',
       getRows: () => [['=SUM(A1)']],
     })
-    await item.resolve()
+    await item.resolve({ id: null })
     expect(csvText).toBe("'=SUM(A1)")
   })
 
@@ -69,7 +69,7 @@ describe('buildCsvDownloadItem', () => {
       filename: 'table',
       getCsv: () => 'col\n=raw',
     })
-    const handle = await item.resolve()
+    const handle = await item.resolve({ id: null })
     expect(handle.filename).toBe('table.csv')
     // getCsv is an escape hatch — content is used as-is, no extra escaping.
     expect(csvText).toBe('col\n=raw')

package/src/widgets/actions/download/csv-item.tsx

@@ -1,7 +1,7 @@
 import { DOWNLOAD_ITEM_IDS } from './constants'
 import { downloadToCSV } from './exports'
 import { CSVIcon } from './icons'
-import type { DownloadItem } from './types'
+import type { DownloadContext, DownloadItem } from './types'
 
 interface BuildCsvDownloadItemBase {
   /** Base filename (without extension). The item appends `.csv`. */
@@ -23,7 +23,7 @@ export type BuildCsvDownloadItemArgs =
        * through `toCsvString` so escaping (incl. the spreadsheet
        * formula-injection guard) stays consistent across widgets.
        */
-      getRows: () => readonly (readonly unknown[])[]
+      getRows: (ctx: DownloadContext) => readonly (readonly unknown[])[]
       getCsv?: never
     })
   | (BuildCsvDownloadItemBase & {
@@ -32,7 +32,7 @@ export type BuildCsvDownloadItemArgs =
        * (e.g. Table) that already serialise their own CSV with bespoke
        * header/cell handling.
        */
-      getCsv: () => string
+      getCsv: (ctx: DownloadContext) => string
       getRows?: never
     })
 
@@ -49,9 +49,9 @@ export function buildCsvDownloadItem(
     id: DOWNLOAD_ITEM_IDS.csv,
     label: args.label ?? 'CSV',
     icon: <CSVIcon fontSize='small' />,
-    resolve: () => {
+    resolve: (ctx) => {
       if (args.getCsv) {
-        const csv = args.getCsv()
+        const csv = args.getCsv(ctx)
         const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
         const url = URL.createObjectURL(blob)
         return Promise.resolve({
@@ -60,7 +60,7 @@ export function buildCsvDownloadItem(
           revoke: () => URL.revokeObjectURL(url),
         })
       }
-      const handle = downloadToCSV(args.getRows())
+      const handle = downloadToCSV(args.getRows(ctx))
       return Promise.resolve({
         url: handle.url,
         filename: `${args.filename}.csv`,

package/src/widgets/actions/download/download.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, type ComponentType } from 'react'
+import { useCallback, useContext, useState, type ComponentType } from 'react'
 import {
   CircularProgress,
   IconButton,
@@ -10,6 +10,7 @@ import {
 } from '@mui/material'
 import { FileDownload as DownloadIcon } from '@mui/icons-material'
 import { Tooltip } from '../../../components'
+import { WidgetContext } from '../../stores'
 import { triggerLinkDownload } from './exports'
 import type { DownloadItem } from './types'
 import { DEFAULT_DOWNLOAD_LABELS, type DownloadLabels } from './labels'
@@ -37,6 +38,7 @@ export function Download({
 }: DownloadProps) {
   const _labels = { ...DEFAULT_DOWNLOAD_LABELS, ...labels }
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const id = useContext(WidgetContext)
   const [isDownloading, setIsDownloading] = useState(false)
   const [error, setError] = useState<Error | null>(null)
 
@@ -59,7 +61,7 @@ export function Download({
       setIsDownloading(true)
       setError(null)
       item
-        .resolve()
+        .resolve({ id })
         .then(({ url, filename, revoke }) => {
           // `item.filename` overrides what `resolve()` returns — lets consumers
           // template the filename with widget metadata declaratively.
@@ -78,7 +80,7 @@ export function Download({
           setIsDownloading(false)
         })
     },
-    [close, isDownloading, onError],
+    [close, id, isDownloading, onError],
   )
 
   const triggerLabel = isDownloading

package/src/widgets/actions/download/index.ts

@@ -10,6 +10,7 @@ export {
 export { CSVIcon, PNGIcon, MarkdownIcon } from './icons'
 export { buildPngDownloadItem, type BuildPngDownloadItemArgs } from './png-item'
 export { buildCsvDownloadItem, type BuildCsvDownloadItemArgs } from './csv-item'
+export { withPngItem, type WidgetDownloadArgs } from './widget-download'
 export { DOWNLOAD_ITEM_IDS, type DownloadItemId } from './constants'
-export type { DownloadItem } from './types'
+export type { DownloadItem, DownloadContext } from './types'
 export { DEFAULT_DOWNLOAD_LABELS, type DownloadLabels } from './labels'

package/src/widgets/actions/download/png-item.test.tsx

@@ -44,7 +44,7 @@ describe('buildPngDownloadItem', () => {
       filename: 'sales',
       getCaptureEl: () => document.createElement('div'),
     })
-    const handle = await item.resolve()
+    const handle = await item.resolve({ id: null })
     expect(handle.url).toBe('blob:png')
     expect(handle.filename).toBe('sales.png')
     handle.revoke?.()
@@ -56,7 +56,9 @@ describe('buildPngDownloadItem', () => {
       filename: 'demo',
       getCaptureEl: () => null,
     })
-    await expect(item.resolve()).rejects.toThrow(/No PNG capture element/)
+    await expect(item.resolve({ id: null })).rejects.toThrow(
+      /No PNG capture element/,
+    )
   })
 
   it('forwards pixelRatio and backgroundColor overrides', async () => {
@@ -66,7 +68,7 @@ describe('buildPngDownloadItem', () => {
       pixelRatio: 4,
       backgroundColor: '#fff',
     })
-    const handle = await item.resolve()
+    const handle = await item.resolve({ id: null })
     expect(handle.filename).toBe('sales.png')
   })
 })

package/src/widgets/actions/download/png-item.tsx

@@ -1,7 +1,7 @@
 import { DOWNLOAD_ITEM_IDS } from './constants'
 import { downloadDOMToPNG } from './exports'
 import { PNGIcon } from './icons'
-import type { DownloadItem } from './types'
+import type { DownloadContext, DownloadItem } from './types'
 
 export interface BuildPngDownloadItemArgs {
   /** Base filename (without extension). The item appends `.png`. */
@@ -11,7 +11,7 @@ export interface BuildPngDownloadItemArgs {
    * download config doesn't capture a stale reference. Wire it to
    * `() => getCaptureEl(id)` from `widgets/stores`.
    */
-  getCaptureEl: () => HTMLElement | null
+  getCaptureEl: (ctx: DownloadContext) => HTMLElement | null
   /** html2canvas `scale`. Default 2. */
   pixelRatio?: number
   /** html2canvas `backgroundColor`. Default transparent (`null`). */
@@ -33,8 +33,8 @@ export function buildPngDownloadItem(
     id: DOWNLOAD_ITEM_IDS.png,
     label: args.label ?? 'PNG',
     icon: <PNGIcon fontSize='small' />,
-    resolve: async () => {
-      const el = args.getCaptureEl()
+    resolve: async (ctx) => {
+      const el = args.getCaptureEl(ctx)
       if (!el) {
         throw new Error('[widgets] No PNG capture element available')
       }

package/src/widgets/actions/download/types.ts

@@ -1,5 +1,17 @@
 import type { ReactElement } from 'react'
 
+/**
+ * Passed to {@link DownloadItem.resolve} by `<Widget.Download>`.
+ */
+export interface DownloadContext {
+  /**
+   * Id of the widget store the menu was opened from — the dialog's own
+   * store when opened from `FullScreen.Slot`'s header, so an export matches
+   * what the user is looking at. `null` outside a `<Widget.Provider>`.
+   */
+  id: string | null
+}
+
 export interface DownloadItem {
   /** Unique key (also used as menu label key). */
   id: string
@@ -28,5 +40,7 @@ export interface DownloadItem {
    * Resolves to a Blob URL the trigger will click. Optional `revoke` is
    * called after the click is dispatched.
    */
-  resolve: () => Promise<{ url: string; filename: string; revoke?: () => void }>
+  resolve: (
+    ctx: DownloadContext,
+  ) => Promise<{ url: string; filename: string; revoke?: () => void }>
 }

package/src/widgets/actions/download/widget-download.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect, vi } from 'vitest'
+import { buildCsvDownloadItem } from './csv-item'
+import { withPngItem } from './widget-download'
+
+vi.mock('html2canvas', () => ({
+  default: () =>
+    Promise.resolve({
+      toBlob: (cb: (blob: Blob | null) => void) => cb(new Blob(['png'])),
+    }),
+}))
+
+const csv = buildCsvDownloadItem({ filename: 'f', getRows: () => [] })
+
+describe('withPngItem', () => {
+  it('returns the items unchanged without getCaptureEl', () => {
+    expect(withPngItem({ filename: 'f' }, csv)).toEqual([csv])
+  })
+
+  it('puts a PNG item first when getCaptureEl is given, and uses it', async () => {
+    vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:png')
+    const getCaptureEl = vi.fn(() => document.createElement('div'))
+    const [png, rest] = withPngItem({ filename: 'f', getCaptureEl }, csv)
+    expect(png?.id).toBe('png')
+    expect(rest).toBe(csv)
+    await expect(png!.resolve({ id: 'w' })).resolves.toMatchObject({
+      filename: 'f.png',
+    })
+    expect(getCaptureEl).toHaveBeenCalledWith({ id: 'w' })
+  })
+})

package/src/widgets/actions/download/widget-download.ts

@@ -0,0 +1,41 @@
+import { buildPngDownloadItem } from './png-item'
+import type { DownloadContext, DownloadItem } from './types'
+
+/** Arguments every per-widget `create*DownloadConfig` shares. */
+export interface WidgetDownloadArgs<T> {
+  /** Base filename (without extension). */
+  filename: string
+  /**
+   * Reads the data to export at click time. `ctx.id` is the store the menu
+   * was opened from — the fullscreen dialog's own while it's open. See
+   * `widgetStoreData` in `widgets/stores`.
+   */
+  getData: (ctx: DownloadContext) => T
+  /**
+   * Reads the element the PNG item rasterises. When given, a PNG item is
+   * prepended to the menu. See `widgetCaptureEl` in `widgets/stores`.
+   */
+  getCaptureEl?: (ctx: DownloadContext) => HTMLElement | null
+  /** PNG `pixelRatio` (default 2). */
+  pngPixelRatio?: number
+  /** PNG `backgroundColor` (default transparent). */
+  pngBackgroundColor?: string | null
+}
+
+/**
+ * `items`, with a PNG item in front when `args.getCaptureEl` is given — the
+ * order every widget's download menu uses.
+ */
+export function withPngItem(
+  args: Omit<WidgetDownloadArgs<unknown>, 'getData'>,
+  ...items: DownloadItem[]
+): DownloadItem[] {
+  if (!args.getCaptureEl) return items
+  const png = buildPngDownloadItem({
+    filename: args.filename,
+    getCaptureEl: args.getCaptureEl,
+    pixelRatio: args.pngPixelRatio,
+    backgroundColor: args.pngBackgroundColor,
+  })
+  return [png, ...items]
+}

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

@@ -0,0 +1,155 @@
+import { describe, it, expect, afterEach, vi } from 'vitest'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { Provider } from '../../provider/widget-provider'
+import type { ECharts } from 'echarts'
+import {
+  clearAllWidgetStores,
+  getWidgetStore,
+  hasWidgetStore,
+  setEchartInstance,
+  useWidget,
+  useWidgetId,
+} from '../../stores'
+import { Download } from '../download/download'
+import { FullScreen, fullScreenStoreId } from './fullscreen'
+
+afterEach(() => clearAllWidgetStores())
+
+// A stand-in for any action: reads and writes one flag on whichever store
+// its copy runs on.
+function Flag() {
+  const id = useWidgetId()
+  const on = useWidget(id, (s) => s.transformStates.flag?.enabled ?? false)
+  return (
+    <button
+      type='button'
+      data-testid={`flag-${id}`}
+      aria-pressed={on}
+      onClick={() =>
+        getWidgetStore(id).setState((s) => ({
+          transformStates: { ...s.transformStates, flag: { enabled: !on } },
+        }))
+      }
+    >
+      flag
+    </button>
+  )
+}
+
+function DataProbe() {
+  const id = useWidgetId()
+  const data = useWidget(id, (s) => s.rawData)
+  return <span data-testid={`data-${id}`}>{String(data)}</span>
+}
+
+function Widget({ data = 'a' }: { data?: string }) {
+  return (
+    <Provider id='w' data={data}>
+      <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+      <FullScreen.Slot>
+        <Flag />
+        <DataProbe />
+      </FullScreen.Slot>
+    </Provider>
+  )
+}
+
+const dialogId = fullScreenStoreId('w')
+const flag = (id: string) =>
+  screen.getByTestId(`flag-${id}`).getAttribute('aria-pressed')
+
+async function close() {
+  fireEvent.click(screen.getByLabelText('CloseT'))
+  await waitFor(() =>
+    expect(screen.queryByTestId(`flag-${dialogId}`)).toBeNull(),
+  )
+}
+
+describe('<FullScreen.Slot> — the dialog runs on its own store', () => {
+  it('starts from the card, runs apart while open, and hands back on close', async () => {
+    render(<Widget />)
+    fireEvent.click(screen.getByTestId('flag-w'))
+    expect(flag('w')).toBe('true')
+
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    // Seeded from the card.
+    expect(flag(dialogId)).toBe('true')
+
+    // Changes in the dialog don't reach the card while open…
+    fireEvent.click(screen.getByTestId(`flag-${dialogId}`))
+    expect(flag(dialogId)).toBe('false')
+    expect(flag('w')).toBe('true')
+
+    // …and do once it closes. The dialog's store goes with it.
+    await close()
+    expect(flag('w')).toBe('false')
+    expect(hasWidgetStore(dialogId)).toBe(false)
+  })
+
+  it('keeps the consumer props flowing into the dialog while it is open', () => {
+    const { rerender } = render(<Widget data='a' />)
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    expect(screen.getByTestId(`data-${dialogId}`).textContent).toBe('a')
+    rerender(<Widget data='b' />)
+    expect(screen.getByTestId(`data-${dialogId}`).textContent).toBe('b')
+  })
+
+  it('reopening starts from the card again, not from the last dialog', async () => {
+    render(<Widget />)
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    await close()
+    act(() =>
+      getWidgetStore('w').setState({
+        transformStates: { flag: { enabled: true } },
+      }),
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    expect(flag(dialogId)).toBe('true')
+  })
+
+  it('downloads from the dialog header resolve against the dialog store', async () => {
+    const resolve = vi.fn(() =>
+      Promise.resolve({ url: 'blob:x', filename: 'x.csv' }),
+    )
+    render(
+      <Provider id='w' data='a'>
+        <FullScreen.Trigger labels={{ open: 'OpenT', close: 'CloseT' }} />
+        <FullScreen.Slot
+          actions={<Download items={[{ id: 'csv', label: 'CSV', resolve }]} />}
+        >
+          <span>body</span>
+        </FullScreen.Slot>
+      </Provider>,
+    )
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    fireEvent.click(screen.getByLabelText('Download'))
+    fireEvent.click(await screen.findByText('CSV'))
+    expect(resolve).toHaveBeenCalledWith({ id: dialogId })
+  })
+
+  // Legend / dataZoom / brush live in the chart instance, not the store.
+  // The Slot moves them through the instance registry, so Widget.Echart
+  // doesn't need to know about fullscreen.
+  it('starts the dialog chart from the card chart and hands it back on close', async () => {
+    const fakeChart = (option: object) =>
+      ({
+        getOption: vi.fn(() => option),
+        setOption: vi.fn(),
+        dispatchAction: vi.fn(),
+        isDisposed: () => false,
+      }) as unknown as ECharts & {
+        setOption: ReturnType<typeof vi.fn>
+      }
+    const card = fakeChart({ from: 'card' })
+    const dialog = fakeChart({ from: 'dialog' })
+    render(<Widget />)
+    act(() => setEchartInstance('w', card))
+
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    act(() => setEchartInstance(dialogId, dialog))
+    expect(dialog.setOption).toHaveBeenCalledWith({ from: 'card' })
+
+    await close()
+    expect(card.setOption).toHaveBeenCalledWith({ from: 'dialog' })
+  })
+})