@micha.bigler/ui-core-micha 2.29.2 → 2.31.0

package/dist/theme/tokens.js

@@ -0,0 +1,325 @@
+import { darken, lighten } from '@mui/material/styles';
+// MUI's palette augmentation (createPalette -> augmentColor) only runs on the
+// FIRST argument passed to createTheme; every later argument -- which is how
+// createAppTheme layers BASELINE_PALETTE on top -- is deep-merged as a raw
+// object with no augmentation. A status entry missing `main`/`contrastText`
+// therefore silently keeps MUI's stock hue for `color="success"` etc. even
+// though `text`/`fill`/`bg` are set correctly, so every status channel MUI
+// recognises (success/warning/error/info) must carry its own explicit
+// main/light/dark/contrastText, computed the same way augmentColor would.
+const withMainShades = (main, contrastText) => ({
+    main,
+    light: lighten(main, 0.2),
+    dark: darken(main, 0.3),
+    contrastText,
+});
+export const SERIES_COLOURS = [
+    '#3D5A99',
+    '#3E80B8',
+    '#2E8F8A',
+    '#7A5FA8',
+    '#9C4F86',
+    '#8A7355',
+];
+export const STATUS_KEYS = ['success', 'warning', 'error', 'info', 'stale'];
+export const TYPOGRAPHY_VARIANTS = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'subtitle1',
+    'subtitle2',
+    'body1',
+    'body2',
+    'button',
+    'caption',
+    'overline',
+];
+const typeVariant = (fontSize, fontWeight, lineHeight, extra = {}) => (Object.assign({ fontSize,
+    fontWeight,
+    lineHeight, letterSpacing: 0 }, extra));
+export const BASELINE_PALETTE = {
+    ink: {
+        primary: '#212529',
+        secondary: '#5B6670',
+        muted: '#6A7178',
+    },
+    text: {
+        primary: '#212529',
+        secondary: '#5B6670',
+        disabled: '#6A7178',
+    },
+    background: {
+        default: '#FAFAFA',
+        paper: '#FFFFFF',
+    },
+    divider: 'rgba(33,37,41,.10)',
+    controlBorder: {
+        main: 'rgba(33,37,41,.50)',
+        hover: 'rgba(33,37,41,.65)',
+        error: '#BF3227',
+    },
+    success: Object.assign(Object.assign({}, withMainShades('#1B8038', '#FFFFFF')), { text: '#35794A', fill: '#1B8038', fillText: '#FFFFFF', bg: '#E5F4E9' }),
+    warning: Object.assign(Object.assign({}, withMainShades('#C08A2C', '#212529')), { text: '#976100', fill: '#C08A2C', fillText: '#212529', bg: '#FBF0DC' }),
+    error: Object.assign(Object.assign({}, withMainShades('#BF3227', '#FFFFFF')), { text: '#BF3227', fill: '#BF3227', fillText: '#FFFFFF', bg: '#FBEAE8' }),
+    // The canonical sheet introduces no new info hue. These values reuse
+    // MUI's own info.dark/main family while adding the shared status shape.
+    info: Object.assign(Object.assign({}, withMainShades('#01579B', '#FFFFFF')), { text: '#01579B', fill: '#01579B', fillText: '#FFFFFF', bg: '#E5F6FD' }),
+    stale: {
+        text: '#5B6B7D',
+        fill: '#5B6B7D',
+        fillText: '#FFFFFF',
+        bg: '#EAEDF1',
+    },
+    dataSeries: {
+        categorical: SERIES_COLOURS,
+    },
+};
+export const OVERLAY_SHADOW = '0 8px 24px rgba(20,26,31,.16), 0 2px 8px rgba(20,26,31,.08)';
+export const MOTION = {
+    duration: {
+        fast: 120,
+        base: 180,
+        overlayEnter: 220,
+        overlayExit: 180,
+        chart: 300,
+    },
+    easing: {
+        enter: 'cubic-bezier(0.0, 0, 0.2, 1)',
+        exit: 'cubic-bezier(0.4, 0, 1, 1)',
+        state: 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+    reduced: '0.01ms',
+};
+const coarseHitArea = {
+    '@media (any-pointer: coarse)': {
+        minHeight: 44,
+        minWidth: 44,
+    },
+};
+const autofill = {
+    '&:-webkit-autofill': {
+        WebkitBoxShadow: '0 0 0 100px #FFFFFF inset',
+        WebkitTextFillColor: '#212529',
+        caretColor: '#212529',
+    },
+    '&:autofill': {
+        boxShadow: '0 0 0 100px #FFFFFF inset',
+        WebkitTextFillColor: '#212529',
+        caretColor: '#212529',
+    },
+};
+export const BASELINE_STATIC = {
+    typography: {
+        fontFamily: "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+        h1: typeVariant('32px', 600, 1.2),
+        h2: typeVariant('28px', 600, 1.22),
+        h3: typeVariant('24px', 600, 1.25),
+        h4: typeVariant('20px', 600, 1.3),
+        h5: typeVariant('18px', 600, 1.3),
+        h6: typeVariant('16px', 600, 1.35),
+        subtitle1: typeVariant('15px', 600, 1.4),
+        subtitle2: typeVariant('13px', 500, 1.4),
+        body1: typeVariant('14px', 400, 1.55),
+        body2: typeVariant('13px', 400, 1.55),
+        button: typeVariant('14px', 500, 1.4, { textTransform: 'none' }),
+        caption: typeVariant('12px', 400, 1.4),
+        overline: typeVariant('11px', 600, 1.4, {
+            textTransform: 'uppercase',
+            letterSpacing: '0.4px',
+        }),
+    },
+    shape: {
+        borderRadius: 3,
+    },
+    radius: {
+        control: 3,
+        card: 8,
+    },
+    spacing: 8,
+    breakpoints: {
+        values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536 },
+    },
+    density: {
+        controlHeight: 40,
+        touchTarget: 44,
+        tableCellPadding: '10px 16px',
+        chip: { height: 32, radius: 16, fontSize: 13 },
+        containerGutter: { default: 24, wide: 32 },
+    },
+    fontLoading: {
+        family: 'DM Sans',
+        weights: [400, 500, 600],
+        source: '@fontsource/dm-sans',
+    },
+    shadow: {
+        rest: 'none',
+        overlay: OVERLAY_SHADOW,
+    },
+    motion: MOTION,
+    transitions: {
+        duration: {
+            fast: MOTION.duration.fast,
+            base: MOTION.duration.base,
+            overlayEnter: MOTION.duration.overlayEnter,
+            overlayExit: MOTION.duration.overlayExit,
+            chart: MOTION.duration.chart,
+        },
+        easing: {
+            enter: MOTION.easing.enter,
+            exit: MOTION.easing.exit,
+            state: MOTION.easing.state,
+        },
+    },
+    // MUI's 25-entry shadows array is intentionally retained intact. Resting
+    // surfaces are made shadowless via the Paper/Card defaults below, while
+    // named transient surfaces receive shadow.overlay explicitly.
+    components: {
+        MuiCssBaseline: {
+            styleOverrides: {
+                '@media (prefers-reduced-motion: reduce)': {
+                    '*, *::before, *::after': {
+                        animationDuration: '0.01ms !important',
+                        animationIterationCount: '1 !important',
+                        transitionDuration: '0.01ms !important',
+                        scrollBehavior: 'auto !important',
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            defaultProps: { disableElevation: true },
+            styleOverrides: {
+                root: Object.assign({ minHeight: 40, borderRadius: 3, textTransform: 'none', transitionDuration: '120ms' }, coarseHitArea),
+                contained: { boxShadow: 'none', '&:hover': { boxShadow: 'none' } },
+            },
+        },
+        MuiTableCell: {
+            styleOverrides: { root: { padding: '10px 16px' } },
+        },
+        MuiIconButton: {
+            styleOverrides: { root: Object.assign({ minHeight: 40, minWidth: 40 }, coarseHitArea) },
+        },
+        MuiDivider: {
+            styleOverrides: { root: { borderColor: 'rgba(33,37,41,.10)' } },
+        },
+        MuiSelect: {
+            defaultProps: { variant: 'outlined' },
+            styleOverrides: {
+                select: {
+                    minHeight: 40,
+                    boxSizing: 'border-box',
+                    '@media (any-pointer: coarse)': { minHeight: 44 },
+                },
+            },
+        },
+        MuiCheckbox: {
+            styleOverrides: { root: Object.assign({ minHeight: 40, minWidth: 40 }, coarseHitArea) },
+        },
+        MuiFormControlLabel: {
+            styleOverrides: {
+                root: Object.assign({ minHeight: 40 }, coarseHitArea),
+                label: { fontSize: '14px', lineHeight: 1.55 },
+            },
+        },
+        MuiContainer: {
+            styleOverrides: {
+                root: {
+                    paddingLeft: 24,
+                    paddingRight: 24,
+                    '@media (min-width:1200px)': { paddingLeft: 32, paddingRight: 32 },
+                },
+            },
+        },
+        MuiPaper: {
+            defaultProps: { elevation: 0, variant: 'outlined' },
+            styleOverrides: {
+                root: { borderRadius: 8, boxShadow: 'none' },
+            },
+        },
+        MuiCard: {
+            defaultProps: { elevation: 0, variant: 'outlined' },
+            styleOverrides: { root: { borderRadius: 8, boxShadow: 'none' } },
+        },
+        MuiChip: {
+            styleOverrides: {
+                root: {
+                    height: 32,
+                    borderRadius: 16,
+                    fontSize: '13px',
+                    position: 'relative',
+                    '@media (any-pointer: coarse)': {
+                        '&::after': {
+                            content: '""',
+                            position: 'absolute',
+                            inset: '-6px',
+                        },
+                    },
+                },
+            },
+        },
+        MuiTextField: {
+            defaultProps: { variant: 'outlined' },
+            styleOverrides: { root: Object.assign({ minHeight: 40 }, coarseHitArea) },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: Object.assign({ minHeight: 40, borderRadius: 3 }, coarseHitArea),
+                input: autofill,
+            },
+            // `variants` is a sibling of `styleOverrides`, not nested inside it -
+            // MUI matches these by `props` and applies `style` independently of the
+            // styleOverrides merge, so this is the correct placement (a `variants`
+            // array embedded inside styleOverrides.root would just be inert CSS-in-JS).
+            variants: [
+                { props: { multiline: false }, style: { height: 40 } },
+            ],
+        },
+        MuiFilledInput: {
+            styleOverrides: { input: autofill },
+        },
+        MuiInput: {
+            styleOverrides: { input: autofill },
+        },
+        MuiDialog: {
+            defaultProps: { transitionDuration: { enter: 220, exit: 180 } },
+            styleOverrides: { paper: { borderRadius: 8, boxShadow: OVERLAY_SHADOW } },
+        },
+        MuiDrawer: {
+            defaultProps: { transitionDuration: { enter: 220, exit: 180 } },
+            styleOverrides: { paper: { boxShadow: OVERLAY_SHADOW } },
+        },
+        MuiMenu: {
+            defaultProps: { transitionDuration: { enter: 220, exit: 180 } },
+            styleOverrides: { paper: { boxShadow: OVERLAY_SHADOW } },
+        },
+        MuiTooltip: {
+            defaultProps: {
+                slotProps: { transition: { timeout: { enter: 220, exit: 180 } } },
+            },
+            styleOverrides: {
+                tooltip: { boxShadow: OVERLAY_SHADOW, transitionDuration: '220ms' },
+            },
+        },
+    },
+};
+export const BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS = [
+    {
+        surface: 'palette.background.paper',
+        reason: 'The canonical surface is deliberately MUI white.',
+    },
+    {
+        surface: 'spacing.unit',
+        reason: 'The canonical spacing rhythm deliberately retains MUI\'s 8px unit.',
+    },
+    {
+        surface: 'breakpoints.values',
+        reason: 'The canonical breakpoint values deliberately retain MUI\'s defaults.',
+    },
+    ...['subtitle2', 'body1', 'body2', 'button', 'caption'].map((variant) => ({
+        surface: `typography.${variant}.fontWeight`,
+        reason: `The canonical ${variant} weight deliberately equals MUI's numeric default.`,
+    })),
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.29.2",
+  "version": "2.31.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {
@@ -8,6 +8,9 @@
     "url": "https://github.com/bigler-webapps/ui-core-micha"
   },
   "private": false,
+  "dependencies": {
+    "@fontsource/dm-sans": "^5.2.8"
+  },
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",

package/src/components/charts/BarChart.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
-
-function labelledAxis(axes, label, defaults) {
-  const values = axes?.length ? axes : [defaults];
-  return values.map((axis) => ({ ...axis, label: axis.label || label }));
-}
+import {
+  DEFAULT_LEGEND_POSITION,
+  spaceForRotatedTicks,
+  withAxisDefaults,
+  withChartSlotDefaults,
+} from './chartDefaults';
 
 /**
  * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
@@ -21,23 +23,49 @@ export function BarChart({
   palette,
   minHeight,
   aspect,
+  grid = { horizontal: true },
+  hideLegend = series.length <= 1,
+  legendPosition = DEFAULT_LEGEND_POSITION,
+  margin,
+  slotProps,
   ...chartProps
 }) {
+  const theme = useTheme();
   const neutralPalette = useNeutralChartPalette();
   if (!xAxisLabel || !yAxisLabel) {
     throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
   }
 
+  const labelledXAxis = withAxisDefaults(
+    xAxis,
+    xAxisLabel,
+    { scaleType: 'band', data: [] },
+    theme.typography.caption.fontSize,
+  );
+  const labelledYAxis = withAxisDefaults(
+    yAxis,
+    yAxisLabel,
+    { scaleType: 'linear' },
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
+
   return (
     <Box data-testid="bar-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
       <MuiBarChart
         {...chartProps}
         series={series}
-        xAxis={labelledAxis(xAxis, xAxisLabel, { scaleType: 'band', data: [] })}
-        yAxis={labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' })}
+        xAxis={rotatedTickSpace.xAxis}
+        yAxis={labelledYAxis}
         colors={palette || neutralPalette.categorical}
-        hideLegend={series.length <= 1}
-        slotProps={{ tooltip: { trigger: 'axis' } }}
+        grid={grid}
+        hideLegend={hideLegend}
+        margin={rotatedTickSpace.margin}
+        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />
     </Box>
   );

package/src/components/charts/LineChart.jsx

@@ -1,11 +1,30 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { LineChart as MuiLineChart } from '@mui/x-charts/LineChart';
+import { useTheme } from '@mui/material/styles';
+import {
+  LineChart as MuiLineChart,
+  MarkElement as MuiMarkElement,
+} from '@mui/x-charts/LineChart';
 import { useNeutralChartPalette } from './palette';
+import {
+  DEFAULT_LEGEND_POSITION,
+  spaceForRotatedTicks,
+  withAxisDefaults,
+  withChartSlotDefaults,
+} from './chartDefaults';
 
-function labelledAxis(axes, label, defaults) {
-  const values = axes?.length ? axes : [defaults];
-  return values.map((axis) => ({ ...axis, label: axis.label || label }));
+// Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
+// `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
+// override in src/theme/tokens.js as the preferred mechanism, with a
+// per-wrapper slots/sx override as the documented fallback. This uses the
+// fallback deliberately, not because the theme route was infeasible: a
+// wrapper-level fix applies to every consumer immediately on this version
+// bump, including the 14 apps that haven't adopted `createAppTheme` yet
+// (THEME-1 is a separate, optional pin bump) -- a theme-token override would
+// only take effect for apps on the new baseline theme. Composes correctly
+// with a caller's own `slots.mark` (spread after this default, so it wins).
+function FilledMarkElement({ color, style, ...props }) {
+  return <MuiMarkElement {...props} color={color} style={{ fill: color, ...style }} />;
 }
 
 /**
@@ -21,23 +40,56 @@ export function LineChart({
   palette,
   minHeight,
   aspect,
+  grid = { horizontal: true },
+  hideLegend = series.length <= 1,
+  legendPosition = DEFAULT_LEGEND_POSITION,
+  margin,
+  slots,
+  slotProps,
   ...chartProps
 }) {
+  const theme = useTheme();
   const neutralPalette = useNeutralChartPalette();
   if (!xAxisLabel || !yAxisLabel) {
     throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
   }
 
+  const labelledXAxis = withAxisDefaults(
+    xAxis,
+    xAxisLabel,
+    { scaleType: 'point', data: [] },
+    theme.typography.caption.fontSize,
+  );
+  const labelledYAxis = withAxisDefaults(
+    yAxis,
+    yAxisLabel,
+    { scaleType: 'linear' },
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
+  const defaultedSeries = series.map((item) => ({
+    showMark: false,
+    labelMarkType: 'square',
+    ...item,
+  }));
+
   return (
     <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
       <MuiLineChart
         {...chartProps}
-        series={series}
-        xAxis={labelledAxis(xAxis, xAxisLabel, { scaleType: 'point', data: [] })}
-        yAxis={labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' })}
+        series={defaultedSeries}
+        xAxis={rotatedTickSpace.xAxis}
+        yAxis={labelledYAxis}
         colors={palette || neutralPalette.categorical}
-        hideLegend={series.length <= 1}
-        slotProps={{ tooltip: { trigger: 'axis' } }}
+        grid={grid}
+        hideLegend={hideLegend}
+        margin={rotatedTickSpace.margin}
+        slots={{ mark: FilledMarkElement, ...slots }}
+        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />
     </Box>
   );

package/src/components/charts/TimeSeriesChart.jsx

@@ -80,6 +80,22 @@ const RANGE_OPTIONS = [
   { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
 ];
 
+function SeriesToggleDot({ color, active }) {
+  return (
+    <Box
+      component="span"
+      data-testid="series-colour-dot"
+      sx={{
+        width: (theme) => theme.spacing(1.5),
+        height: (theme) => theme.spacing(1.5),
+        borderRadius: '50%',
+        bgcolor: color,
+        opacity: active ? 1 : 0.35,
+      }}
+    />
+  );
+}
+
 /**
  * A time-series preset on ChartFrame + BarChart: a range picker (emits the
  * selected range AND its mapped granularity to the host) and series toggle
@@ -106,6 +122,7 @@ export function TimeSeriesChart({
   error = false,
   onRangeChange,
   defaultRange = '1w',
+  skipAnimation,
 }) {
   const { t } = useTranslation();
   const palette = useNeutralChartPalette().categorical;
@@ -221,6 +238,8 @@ export function TimeSeriesChart({
                   size="small"
                   checked={visibleKeys.has(series.key)}
                   onChange={() => toggleSeries(series.key)}
+                  icon={<SeriesToggleDot color={palette[index % palette.length]} active={false} />}
+                  checkedIcon={<SeriesToggleDot color={palette[index % palette.length]} active />}
                   sx={{
                     color: palette[index % palette.length],
                     '&.Mui-checked': { color: palette[index % palette.length] },
@@ -261,6 +280,8 @@ export function TimeSeriesChart({
           }))}
           palette={visiblePalette}
           height={CHART_HEIGHT}
+          hideLegend={seriesConfig.length > 0}
+          skipAnimation={skipAnimation}
         />
       )}
     </ChartFrame>

package/src/components/charts/chartDefaults.js

@@ -0,0 +1,111 @@
+export const DEFAULT_LEGEND_POSITION = {
+  vertical: 'bottom',
+  horizontal: 'start',
+};
+
+export function withAxisDefaults(axes, label, defaults, tickFontSize) {
+  const values = axes?.length ? axes : [defaults];
+  return values.map((axis) => ({
+    // `defaults.scaleType` (and any other scale-defining default) must
+    // survive even when the caller passes their OWN xAxis/yAxis array --
+    // confirmed live in the dev harness: a caller-supplied axis with `data`
+    // but no `scaleType` previously lost 'point'/'band' entirely (only
+    // applied when the whole array was absent), leaving MUI's scale
+    // undefined and every point position NaN (`<path> attribute d:
+    // Expected number, "MNaN,..."` in the real rendered SVG -- a mocked
+    // prop-assertion test cannot catch this, it only reproduces on an
+    // actual MUI scale computation).
+    ...defaults,
+    ...axis,
+    tickLabelStyle: {
+      fontSize: tickFontSize,
+      ...axis.tickLabelStyle,
+    },
+    label: axis.label || label,
+  }));
+}
+
+function cssLengthToPixels(value) {
+  if (typeof value === 'number') return value;
+  if (typeof value !== 'string') return 0;
+
+  const parsed = Number.parseFloat(value);
+  if (!Number.isFinite(parsed)) return 0;
+  if (value.endsWith('rem') || value.endsWith('em')) return parsed * 16;
+  return parsed;
+}
+
+const MUI_LABELLED_X_AXIS_HEIGHT = 45;
+const MUI_CHART_MARGIN_BOTTOM = 20;
+const AVERAGE_GLYPH_WIDTH_EM = 0.6;
+
+function formattedTickText(axis, value) {
+  if (!axis.valueFormatter) return String(value);
+  try {
+    return String(axis.valueFormatter(value, { location: 'tick' }));
+  } catch {
+    // Some formatters require MUI's complete scale context. Falling back to
+    // the raw value is conservative: it reserves at least as much space.
+    return String(value);
+  }
+}
+
+function rotatedTickMetrics(axis, defaultLineHeight) {
+  const angle = Number(axis.tickLabelStyle?.angle) || 0;
+  if (angle === 0) return null;
+
+  const fontSize = cssLengthToPixels(axis.tickLabelStyle?.fontSize);
+  if (fontSize === 0) return null;
+
+  const lineHeight = Number(axis.tickLabelStyle?.lineHeight) || defaultLineHeight;
+  const longestLabel = (axis.data || []).reduce((longest, value) => {
+    const text = formattedTickText(axis, value);
+    return text.length > longest.length ? text : longest;
+  }, '');
+  const textWidth = Math.max(fontSize, longestLabel.length * fontSize * AVERAGE_GLYPH_WIDTH_EM);
+  const radians = (angle * Math.PI) / 180;
+  const projectedHeight = Math.abs(Math.cos(radians)) * fontSize * lineHeight
+    + Math.abs(Math.sin(radians)) * textWidth;
+  const extraHeight = Math.max(1, Math.ceil(projectedHeight - fontSize));
+
+  return { extraHeight };
+}
+
+/**
+ * Rotated labels project both their line box and text width vertically.
+ * X-Charts uses xAxis.height when deciding whether a label fits, while margin
+ * only separates the axis from the SVG edge, so both surfaces must grow.
+ * Explicit caller height and bottom-margin values always remain untouched.
+ */
+export function spaceForRotatedTicks(xAxis, margin, defaultLineHeight = 1) {
+  let largestExtraHeight = 0;
+  const spacedXAxis = xAxis.map((axis) => {
+    const metrics = rotatedTickMetrics(axis, defaultLineHeight);
+    if (!metrics) return axis;
+
+    largestExtraHeight = Math.max(largestExtraHeight, metrics.extraHeight);
+    if (axis.height != null) return axis;
+    return { ...axis, height: MUI_LABELLED_X_AXIS_HEIGHT + metrics.extraHeight };
+  });
+
+  const callerSetBottom = typeof margin === 'number' || margin?.bottom != null;
+  const spacedMargin = largestExtraHeight > 0 && !callerSetBottom
+    ? { ...margin, bottom: MUI_CHART_MARGIN_BOTTOM + largestExtraHeight }
+    : margin;
+
+  return { xAxis: spacedXAxis, margin: spacedMargin };
+}
+
+export function withChartSlotDefaults(slotProps, legendPosition) {
+  return {
+    ...slotProps,
+    tooltip: {
+      trigger: 'axis',
+      ...slotProps?.tooltip,
+    },
+    legend: {
+      position: legendPosition,
+      ...slotProps?.legend,
+    },
+  };
+}