@carto/ps-react-ui 6.3.0 → 6.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"zoom-toggle-MmLjMTEw.js","names":["cfg","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>","_c","ZoomInIcon","Tooltip","Tooltip$1","useWidgetId","getEchartInstance","useSingleTransform","SLIDER_HANDLE_ICON","SLIDER_HEIGHT","SLIDER_BOTTOM","createAddZoom","axes","options","includeX","includeY","baseSliderProps","getZoomSliderStyles","theme","option","cfg","dataZoom","addZoom","secondary","ZOOM_LAYOUT","DEFAULT_ZOOM_TOGGLE_LABELS","styles","ZOOM_DESCRIPTOR","ZoomToggle","$","c","t1","t2","t0","initialEnabled","Icon","ZoomIn","id","useTheme","t3","labels","_labels","t4","t5","t6","resolved","transform","t7","t8","enabled","toggle","handleToggle","tooltip","t9","t10","t11","t12","iconProps","t13","IconButton","t14"],"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-DqrV_0Ji.js","names":["cfg","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>","_c","ZoomInIcon","Tooltip","Tooltip$1","useWidgetId","getEchartInstance","useSingleTransform","SLIDER_HANDLE_ICON","SLIDER_HEIGHT","SLIDER_BOTTOM","createAddZoom","axes","options","includeX","includeY","baseSliderProps","getZoomSliderStyles","theme","option","cfg","dataZoom","addZoom","secondary","ZOOM_LAYOUT","DEFAULT_ZOOM_TOGGLE_LABELS","styles","ZOOM_DESCRIPTOR","ZoomToggle","$","c","t1","t2","t0","initialEnabled","Icon","ZoomIn","id","useTheme","t3","labels","_labels","t4","t5","t6","resolved","transform","t7","t8","enabled","toggle","handleToggle","tooltip","t9","t10","t11","t12","iconProps","t13","IconButton","t14"],"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.3.0",
+  "version": "6.5.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -19,6 +19,7 @@
     "jscodeshift": "^17.4.0",
     "react-dom": "19.2.8",
     "react-markdown": "10.1.0",
+    "tailwindcss": "^4.3.3",
     "zustand": "5.0.15",
     "@carto/ps-common-types": "1.0.0",
     "@carto/ps-utils": "2.2.0"
@@ -56,6 +57,11 @@
       "import": "./dist/components.js",
       "types": "./dist/types/components/index.d.ts"
     },
+    "./theme": {
+      "import": "./dist/theme.js",
+      "types": "./dist/types/theme/index.d.ts"
+    },
+    "./theme/tailwind.css": "./dist/theme/tailwind.css",
     "./legend": {
       "import": "./dist/legend.js",
       "types": "./dist/types/legend/index.d.ts"
@@ -165,6 +171,7 @@
     "dev": "vite build --watch --emptyOutDir=false",
     "build": "vite build",
     "exports:validate": "node --experimental-strip-types scripts/generate-widget-config.ts --validate",
+    "tailwind:generate": "vitest run src/theme/generate-tailwind-css.test.ts -u --maxWorkers=25%",
     "lint": "eslint",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",

package/src/chat/bubbles/styles.ts

@@ -7,6 +7,7 @@ import {
 } from '@mui/material'
 import type { CSSObject } from '@mui/material/styles'
 import type { FC } from 'react'
+import { markdownElementDefaults } from '../../widgets/markdown/style'
 
 // The explicit annotation is what keeps this file's .d.ts emittable: the type
 // `styled()` infers can only be named through a pnpm-internal @mui/system path
@@ -30,6 +31,7 @@ ChatMessageOverflow.displayName = 'ChatMessageOverflow'
 export const styles = {
   agentMessageContainer: (theme: Theme): CSSObject => ({
     ...theme.typography.body2,
+    ...markdownElementDefaults,
     width: '100%',
     display: 'flex',
     flexDirection: 'column',

package/src/components/lasso-tool/lasso-tool-inline.test.tsx

@@ -212,7 +212,7 @@ describe('LassoToolsInlineUI branches', () => {
       />,
     )
     // The "no data" Typography branch should have rendered
-    expect(container.querySelector('.inline')).toBeDefined()
+    expect(container.querySelector('.PsLassoTools-inline')).toBeDefined()
   })
 
   test('renders without onChangeMode prop (optional callback)', async () => {
@@ -604,7 +604,7 @@ describe('LassoToolsInlineUI toolbar-level actions', () => {
   })
 
   test('separates toolbar blocks with CSS borders, not top-level MuiDividers', () => {
-    // Horizontal rules between stacked blocks come from `.inline > * + *`
+    // Horizontal rules between stacked blocks come from `.PsLassoTools-inline > * + *`
     // (styles.ts). Blocks must not emit top-level `<Divider flexItem />` —
     // those would double up when a middle block is omitted via children.
     const { container } = render(
@@ -627,8 +627,8 @@ describe('LassoToolsInlineUI toolbar-level actions', () => {
     )
 
     const root = container.firstElementChild!
-    expect(root.classList.contains('inline')).toBe(true)
-    // Provider is context-only: block roots are direct children of `.inline`.
+    expect(root.classList.contains('PsLassoTools-inline')).toBe(true)
+    // Provider is context-only: block roots are direct children of `.PsLassoTools-inline`.
     expect(root.children.length).toBeGreaterThan(1)
     expect(root.querySelectorAll(':scope > .MuiDivider-root')).toHaveLength(0)
   })

package/src/components/lasso-tool/lasso-tool-inline.tsx

@@ -97,7 +97,7 @@ export function LassoToolsInlineUI({
       // Array merge: `sx` can be an object, a function or an array.
       sx={mergeSx(styles.container, sx)}
       {...BoxProps}
-      className='inline'
+      className='PsLassoTools-inline'
     >
       <LassoToolsUIProvider value={contextValue}>
         {children}
@@ -134,7 +134,7 @@ function InteractionModeWrapperBase({
       {showToggles && (
         <Typography
           variant='subtitle2'
-          className='inline'
+          className='PsLassoTools-inline'
           sx={[
             {
               color: 'text.secondary',
@@ -218,7 +218,7 @@ function ModesWrapperBase({
     <Box>
       <Typography
         variant='subtitle2'
-        className='inline'
+        className='PsLassoTools-inline'
         sx={[
           {
             color: 'text.secondary',
@@ -238,7 +238,7 @@ function ModesWrapperBase({
         // controlled mode across renders (e.g. toggling `enabled`).
         value={modeSelectedValue?.value ?? null}
         exclusive
-        className='inline'
+        className='PsLassoTools-inline'
         sx={styles.options.menu}
         onChange={handleClick}
       >
@@ -305,7 +305,7 @@ function ChipsWrapperBase({
     <Box>
       <NoData hasValues={!!chipValues.length} labels={labels?.noData} />
       {!!chipValues.length && (
-        <Box sx={styles.chip.container} className='inline'>
+        <Box sx={styles.chip.container} className='PsLassoTools-inline'>
           {chipValues.map((value) => (
             <LassoToolsUIChip
               key={value.id}
@@ -430,7 +430,7 @@ function InteractionModeToggles({
     <ToggleButtonGroup
       value={value}
       exclusive
-      className='inline'
+      className='PsLassoTools-inline'
       sx={styles.options.menu}
       onChange={(_evt, mode: LassoGeometryType | null) => {
         if (mode) {

package/src/components/lasso-tool/styles.ts

@@ -39,7 +39,7 @@ export const styles = {
     overflow: 'hidden',
     width: 'fit-content',
 
-    '&.inline': {
+    '&.PsLassoTools-inline': {
       flexDirection: 'column',
       alignItems: 'flex-start',
       gap: ({ spacing }) => spacing(1),
@@ -74,7 +74,7 @@ export const styles = {
     menu: {
       '&.MuiMenu-list': { maxHeight: MENU_MAX_HEIGHT },
       paddingY: ({ spacing }) => spacing(1),
-      '&.inline': {
+      '&.PsLassoTools-inline': {
         boxShadow: 'none',
         backgroundColor: 'transparent',
         borderRadius: ({ spacing }) => spacing(0.5),
@@ -145,7 +145,7 @@ export const styles = {
       paddingX: ({ spacing }) => spacing(2),
       paddingBottom: ({ spacing }) => spacing(0.5),
 
-      '&.inline': {
+      '&.PsLassoTools-inline': {
         paddingX: 0,
         paddingBottom: 0,
       },
@@ -175,7 +175,7 @@ export const styles = {
       scrollbarWidth: 'none',
       paddingX: ({ spacing }) => spacing(1),
 
-      '&.inline': {
+      '&.PsLassoTools-inline': {
         overflowX: 'visible',
         flexWrap: 'wrap',
       },

package/src/theme/create-carto-theme.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import {
+  cartoThemeOptions,
+  theme as cartoTheme,
+} from '@carto/meridian-ds/theme'
+import { createCartoTheme } from './create-carto-theme'
+
+type StyleSheets = Record<string, Record<string, string>>[]
+const sheets = (t: unknown) =>
+  (t as { generateStyleSheets: () => StyleSheets }).generateStyleSheets()
+const rootVars = (t: unknown): Record<string, string> =>
+  Object.assign({}, ...sheets(t).map((s) => Object.values(s)[0])) as Record<
+    string,
+    string
+  >
+
+describe('createCartoTheme', () => {
+  it('enables cssVariables and emits CARTO extension variables', () => {
+    const vars = rootVars(createCartoTheme())
+    expect(vars['--mui-palette-primary-main']).toBe(
+      cartoTheme.palette.primary.main,
+    )
+    expect(vars['--mui-palette-brand-navyBlue']).toBe(
+      cartoTheme.palette.brand.navyBlue,
+    )
+    expect(vars['--mui-palette-qualitative-bold-0']).toBeDefined()
+  })
+
+  it('keeps responsive font sizes like the meridian theme', () => {
+    expect(createCartoTheme().typography.h1).toEqual(cartoTheme.typography.h1)
+  })
+
+  it('merges overrides without dropping CARTO palette extensions', () => {
+    const theme = createCartoTheme({
+      palette: { primary: { main: '#ff0000' } },
+    })
+    const vars = rootVars(theme)
+    expect(vars['--mui-palette-primary-main']).toBe('#ff0000')
+    expect(vars['--mui-palette-tertiary-main']).toBe(
+      cartoTheme.palette.tertiary.main,
+    )
+    expect(theme.palette.brand.navyBlue).toBe(cartoTheme.palette.brand.navyBlue)
+  })
+
+  it('does not mutate meridian options between calls', () => {
+    const before = JSON.stringify(cartoThemeOptions)
+    createCartoTheme({ palette: { primary: { main: '#ff0000' } } })
+    expect(JSON.stringify(cartoThemeOptions)).toBe(before)
+    expect(rootVars(createCartoTheme())['--mui-palette-primary-main']).toBe(
+      cartoTheme.palette.primary.main,
+    )
+  })
+})

package/src/theme/create-carto-theme.ts

@@ -0,0 +1,21 @@
+import {
+  createTheme,
+  responsiveFontSizes,
+  type Theme,
+  type ThemeOptions,
+} from '@mui/material'
+import { cartoThemeOptions } from '@carto/meridian-ds/theme'
+import { deepMerge } from './deep-merge'
+
+/**
+ * The CARTO theme with MUI CSS variables enabled, so CSS (Tailwind's
+ * `@theme inline`, plain stylesheets) can read `var(--mui-*)`. Same tokens
+ * and responsive font sizes as meridian's `theme`.
+ */
+export function createCartoTheme(overrides?: ThemeOptions): Theme {
+  const options = deepMerge<ThemeOptions>(
+    { ...cartoThemeOptions, cssVariables: true },
+    overrides,
+  )
+  return responsiveFontSizes(createTheme(options))
+}

package/src/theme/deep-merge.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import { deepMerge } from './deep-merge'
+
+describe('deepMerge', () => {
+  it('merges nested plain objects', () => {
+    expect(
+      deepMerge({ a: { b: 1, c: 2 }, d: 1 }, { a: { c: 3 }, e: 4 }),
+    ).toEqual({ a: { b: 1, c: 3 }, d: 1, e: 4 })
+  })
+
+  it('replaces arrays and non-plain values instead of merging them', () => {
+    const fn = () => 1
+    expect(deepMerge({ a: [1, 2], f: { x: 1 } }, { a: [3], f: fn })).toEqual({
+      a: [3],
+      f: fn,
+    })
+  })
+
+  it('ignores undefined overrides and does not mutate inputs', () => {
+    const base = { a: { b: 1 } }
+    const out = deepMerge(base, { a: { b: undefined, c: 2 } })
+    expect(out).toEqual({ a: { b: 1, c: 2 } })
+    expect(base).toEqual({ a: { b: 1 } })
+  })
+})

package/src/theme/deep-merge.ts

@@ -0,0 +1,22 @@
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (value === null || typeof value !== 'object') return false
+  const proto = Object.getPrototypeOf(value) as unknown
+  return proto === Object.prototype || proto === null
+}
+
+/**
+ * Deep-merges `override` into a copy of `base`. Plain objects merge key by
+ * key; arrays, functions and other values replace. `undefined` in the
+ * override keeps the base value. Inputs are not mutated.
+ */
+export function deepMerge<T>(base: T, override: unknown): T {
+  if (!isPlainObject(base) || !isPlainObject(override)) {
+    return (override === undefined ? base : override) as T
+  }
+  const out: Record<string, unknown> = { ...base }
+  for (const [key, value] of Object.entries(override)) {
+    if (value === undefined) continue
+    out[key] = deepMerge(base[key], value)
+  }
+  return out as T
+}

package/src/theme/generate-tailwind-css.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest'
+import { createCartoTheme } from './create-carto-theme'
+import { generateTailwindCss } from './generate-tailwind-css'
+
+const theme = createCartoTheme()
+const css = generateTailwindCss(theme)
+
+type StyleSheets = Record<string, Record<string, string>>[]
+const definedVars = new Set(
+  (theme as unknown as { generateStyleSheets: () => StyleSheets })
+    .generateStyleSheets()
+    .flatMap((sheet) => Object.keys(Object.values(sheet)[0] ?? {})),
+)
+
+describe('generateTailwindCss', () => {
+  it('matches the committed tailwind.css (run `pnpm tailwind:generate` to update)', async () => {
+    await expect(css).toMatchFileSnapshot('./tailwind.css')
+  })
+
+  it('only references --mui-* variables the theme defines', () => {
+    const used = [...css.matchAll(/var\((--mui-[\w-]+)\)/g)].map(
+      (m) => m[1] ?? '',
+    )
+    expect(used.length).toBeGreaterThan(100)
+    expect(used.filter((v) => !definedVars.has(v))).toEqual([])
+  })
+
+  it('maps palette colours, CARTO extensions, shadows and radius', () => {
+    expect(css).toContain('--color-primary: var(--mui-palette-primary-main);')
+    expect(css).toContain(
+      '--color-primary-contrast: var(--mui-palette-primary-contrastText);',
+    )
+    expect(css).toContain(
+      '--color-tertiary-related-light: var(--mui-palette-tertiary-relatedLight);',
+    )
+    expect(css).toContain(
+      '--color-brand-navy-blue: var(--mui-palette-brand-navyBlue);',
+    )
+    expect(css).toContain('--color-black-12: var(--mui-palette-black-12);')
+    expect(css).toContain(
+      '--color-qualitative-3: var(--mui-palette-qualitative-bold-3);',
+    )
+    expect(css).toContain(
+      '--color-text-secondary: var(--mui-palette-text-secondary);',
+    )
+    expect(css).toContain('--color-paper: var(--mui-palette-background-paper);')
+    expect(css).toContain('--shadow-24: var(--mui-shadows-24);')
+    expect(css).toContain('--radius-theme: var(--mui-shape-borderRadius);')
+    expect(css).toContain(
+      '--radius-theme-2: calc(var(--mui-shape-borderRadius) * 2);',
+    )
+    expect(css).toContain(
+      '--radius-theme-half: calc(var(--mui-shape-borderRadius) * 0.5);',
+    )
+    expect(css).toContain(
+      '--color-action-hover: var(--mui-palette-action-hover);',
+    )
+    expect(css).toContain(
+      '--color-common-white: var(--mui-palette-common-white);',
+    )
+    expect(css).not.toMatch(
+      /Channel|--color-common-(?!white|black)|--color-alert/i,
+    )
+  })
+
+  it('writes breakpoints as literals from the theme and drops 2xl', () => {
+    for (const [key, px] of Object.entries(theme.breakpoints.values)) {
+      expect(css).toContain(`--breakpoint-${key}: ${px}px;`)
+    }
+    expect(css).toContain('--breakpoint-2xl: initial;')
+  })
+
+  it('emits responsive typography utilities with letter spacing', () => {
+    expect(css).toMatch(/@utility typography-h1 \{[^}]*font-size: 3\.5rem;/)
+    expect(css).toMatch(
+      /@utility typography-h1 \{[^}]*letter-spacing: -1\.5px;/,
+    )
+    expect(css).toContain('@media (min-width:1280px) {\n    font-size: 6rem;')
+    expect(css).toContain('@utility typography-caption-medium {')
+    expect(css).toContain('@utility typography-code1 {')
+    expect(css).not.toContain('typography-inherit')
+  })
+
+  it('does not declare the layer order', () => {
+    expect(css).not.toContain('@layer')
+  })
+})

package/src/theme/generate-tailwind-css.ts

@@ -0,0 +1,178 @@
+import type { Theme } from '@mui/material'
+
+const PALETTE_COLORS = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'error',
+  'warning',
+  'info',
+  'success',
+  'neutral',
+  'default',
+] as const
+
+const COLOR_KEYS: Record<string, string> = {
+  main: '',
+  light: '-light',
+  dark: '-dark',
+  contrastText: '-contrast',
+  relatedLight: '-related-light',
+  relatedDark: '-related-dark',
+  background: '-background',
+}
+
+const HEADER = `/*
+ * Generated by generateTailwindCss() from @carto/ps-react-ui/theme.
+ * Do not edit by hand: regenerate it whenever the theme changes.
+ *
+ * Import after \`tailwindcss\`. Declare the cascade layer order yourself first:
+ * theme, base, mui, components, utilities (in that order).
+ */`
+
+type Dict = Record<string, unknown>
+
+/** `navyBlue` → `navy-blue`, `captionMedium` → `caption-medium`, `code1` → `code1`. */
+function kebab(key: string): string {
+  return key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function stringKeys(obj: unknown): string[] {
+  if (!obj || typeof obj !== 'object') return []
+  return Object.keys(obj).filter((k) => typeof (obj as Dict)[k] === 'string')
+}
+
+function colorLines(theme: Theme): string[] {
+  const palette = theme.palette as unknown as Dict
+  const v = (path: string) => `var(--mui-palette-${path})`
+  const lines: string[] = []
+
+  for (const name of PALETTE_COLORS) {
+    const color = palette[name] as Dict | undefined
+    for (const [key, suffix] of Object.entries(COLOR_KEYS)) {
+      if (typeof color?.[key] === 'string')
+        lines.push(`--color-${name}${suffix}: ${v(`${name}-${key}`)};`)
+    }
+  }
+  for (const key of ['primary', 'secondary', 'disabled']) {
+    if (typeof (palette.text as Dict | undefined)?.[key] === 'string')
+      lines.push(`--color-text-${key}: ${v(`text-${key}`)};`)
+  }
+  lines.push(`--color-background: ${v('background-default')};`)
+  lines.push(`--color-paper: ${v('background-paper')};`)
+  lines.push(`--color-divider: ${v('divider')};`)
+  // `*Channel` keys are bare RGB triplets for `rgba()`, not colours.
+  for (const key of stringKeys(palette.action).filter(
+    (k) => !k.endsWith('Channel'),
+  ))
+    lines.push(`--color-action-${kebab(key)}: ${v(`action-${key}`)};`)
+  for (const key of ['white', 'black'])
+    lines.push(`--color-common-${key}: ${v(`common-${key}`)};`)
+  for (const key of stringKeys(palette.grey))
+    lines.push(`--color-grey-${key}: ${v(`grey-${key}`)};`)
+  for (const key of stringKeys(palette.brand))
+    lines.push(`--color-brand-${kebab(key)}: ${v(`brand-${key}`)};`)
+  for (const shade of ['white', 'black']) {
+    for (const key of stringKeys(palette[shade]))
+      lines.push(`--color-${shade}-${key}: ${v(`${shade}-${key}`)};`)
+  }
+  const bold = (palette.qualitative as Dict | undefined)?.bold
+  for (const key of stringKeys(bold))
+    lines.push(`--color-qualitative-${key}: ${v(`qualitative-bold-${key}`)};`)
+  return lines
+}
+
+// `rounded-theme-2` is `theme.shape.borderRadius * 2`, as in sx.
+const RADIUS_MULTIPLES: [string, number][] = [
+  ['half', 0.5],
+  ['2', 2],
+  ['3', 3],
+  ['4', 4],
+]
+
+function themeBlock(theme: Theme): string {
+  const lines = [
+    ...colorLines(theme),
+    ...theme.shadows
+      .map((_, n) => `--shadow-${n}: var(--mui-shadows-${n});`)
+      .slice(1),
+    '--radius-theme: var(--mui-shape-borderRadius);',
+    ...RADIUS_MULTIPLES.map(
+      ([key, n]) =>
+        `--radius-theme-${key}: calc(var(--mui-shape-borderRadius) * ${n});`,
+    ),
+    ...Object.entries(theme.breakpoints.values).map(
+      ([key, px]) => `--breakpoint-${key}: ${px}px;`,
+    ),
+    '--breakpoint-2xl: initial;',
+  ]
+  return `@theme inline {\n${lines.map((l) => `  ${l}`).join('\n')}\n}`
+}
+
+// Not inline: utilities keep `calc(var(--spacing) * n)`, and `--spacing`
+// follows the theme, so `p-2` is `theme.spacing(1)` (8px by default) even
+// when an app overrides `spacing`.
+const SPACING_BLOCK = `@theme {\n  --spacing: calc(var(--mui-spacing) / 2);\n}`
+
+function cssValue(prop: string, value: unknown): string {
+  if (
+    typeof value === 'number' &&
+    (prop === 'font-size' || prop === 'letter-spacing')
+  )
+    return value === 0 ? '0' : `${value}px`
+  return String(value)
+}
+
+const TYPOGRAPHY_PROPS: [string, string][] = [
+  ['fontFamily', 'font-family'],
+  ['fontWeight', 'font-weight'],
+  ['fontSize', 'font-size'],
+  ['lineHeight', 'line-height'],
+  ['letterSpacing', 'letter-spacing'],
+  ['textTransform', 'text-transform'],
+]
+
+function typographyUtilities(theme: Theme): string[] {
+  const typography = theme.typography as unknown as Dict
+  return Object.entries(typography)
+    .filter(
+      ([name, style]) =>
+        name !== 'inherit' &&
+        !!style &&
+        typeof style === 'object' &&
+        'fontSize' in style,
+    )
+    .map(([name, style]) => {
+      const s = style as Dict
+      const body = TYPOGRAPHY_PROPS.filter(([key]) => s[key] !== undefined).map(
+        ([key, prop]) => `  ${prop}: ${cssValue(prop, s[key])};`,
+      )
+      for (const [query, rule] of Object.entries(s)) {
+        if (!query.startsWith('@media') || !rule || typeof rule !== 'object')
+          continue
+        const size = (rule as Dict).fontSize
+        if (size !== undefined)
+          body.push(
+            `  ${query} {\n    font-size: ${cssValue('font-size', size)};\n  }`,
+          )
+      }
+      return `@utility typography-${kebab(name)} {\n${body.join('\n')}\n}`
+    })
+}
+
+/**
+ * Tailwind v4 source CSS for the CARTO theme: colours, shadows and radius
+ * read the runtime MUI variables; breakpoints and typography are literals
+ * because `@media` cannot read variables and MUI's font variables are not
+ * responsive.
+ */
+export function generateTailwindCss(theme: Theme): string {
+  return (
+    [
+      HEADER,
+      themeBlock(theme),
+      SPACING_BLOCK,
+      ...typographyUtilities(theme),
+    ].join('\n\n') + '\n'
+  )
+}

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+export { createCartoTheme } from './create-carto-theme'
+export { generateTailwindCss } from './generate-tailwind-css'