@12-apps/ui 6.35.0 → 6.36.0

package/src/components/data-display/Table/Table.styles.ts

@@ -2,15 +2,15 @@ import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
 import type { TableDensity, TableStripeColor } from './Table.types';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const pulseAnimation = keyframes`
+const pulseAnimation = (theme: Theme) => keyframes`
   0% {
     box-shadow: 0 0 0 0 currentColor;
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${rem(theme, 10)} currentColor;
     opacity: 0;
   }
   100% {
@@ -19,24 +19,25 @@ const pulseAnimation = keyframes`
   }
 `;
 
-// Density configurations
+// Density configurations. The row height stays design px (`…Px`) and goes
+// through `rem` where the cell is drawn.
 const getDensityConfig = (theme: Theme, density: TableDensity = 'normal') => {
   const configs = {
     compact: {
-      rowHeight: 36,
-      cellPadding: '6px 12px',
+      rowHeightPx: 36,
+      cellPadding: rems(theme, 6, 12),
       fontSize: rem(theme, 13),
-      headerPadding: '8px 12px' },
+      headerPadding: rems(theme, 8, 12) },
     normal: {
-      rowHeight: 52,
-      cellPadding: '12px 16px',
+      rowHeightPx: 52,
+      cellPadding: rems(theme, 12, 16),
       fontSize: rem(theme, 14),
-      headerPadding: '16px 16px' },
+      headerPadding: rems(theme, 16, 16) },
     comfortable: {
-      rowHeight: 68,
-      cellPadding: '18px 24px',
+      rowHeightPx: 68,
+      cellPadding: rems(theme, 18, 24),
       fontSize: rem(theme, 14),
-      headerPadding: '20px 24px' } };
+      headerPadding: rems(theme, 20, 24) } };
   return configs[density];
 };
 
@@ -86,7 +87,7 @@ const TABLE_VARIANTS: Record<string, (args: VariantArgs) => CSSObject> = {
         backgroundColor: stripeRowColor(theme, stripeColor) } }),
   glass: ({ theme }) => ({
       backgroundColor: alpha(theme.palette.background.paper, 0.1),
-      backdropFilter: 'blur(20px)',
+      backdropFilter: `blur(${rem(theme, 20)})`,
       border: `1px solid ${alpha(theme.palette.divider, 0.2)}` }),
   minimal: ({ theme }) => ({
       backgroundColor: 'transparent',
@@ -120,7 +121,7 @@ const stickyHeaderStyles = (
         zIndex: 100,
         backgroundColor: theme.palette.background.paper,
         '& .MuiTableCell-root': {
-          borderBottom: `2px solid ${theme.palette.divider}`,
+          borderBottom: `${rem(theme, 2)} solid ${theme.palette.divider}`,
           fontWeight: 600,
           padding: densityConfig.headerPadding } } });
 
@@ -135,7 +136,7 @@ const hoverableRowStyles = (theme: Theme): CSSObject => ({
 const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => {
   if (glow && pulse) return ({
       position: 'relative',
-      boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: 'brightness(1.05)',
       '&::after': {
         content: '""',
@@ -147,11 +148,11 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
         borderRadius: 'inherit',
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: 'none',
         zIndex: -1 } });
   if (glow) return ({
-      boxShadow: `0 0 20px 5px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      boxShadow: `${rems(theme, 0, 0, 20, 5)} ${alpha(theme.palette.primary.main, 0.3)} !important`,
       filter: 'brightness(1.05)' });
   if (pulse) return ({
       position: 'relative',
@@ -165,7 +166,7 @@ const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObjec
         borderRadius: 'inherit',
         backgroundColor: theme.palette.primary.main,
         opacity: 0.1,
-        animation: `${pulseAnimation} 2s infinite`,
+        animation: `${pulseAnimation(theme)} 2s infinite`,
         pointerEvents: 'none',
         zIndex: -1 } });
 
@@ -204,7 +205,7 @@ export const tableStyles = ({
     '& .MuiTableCell-root': {
       padding: densityConfig.cellPadding,
       fontSize: densityConfig.fontSize,
-      height: densityConfig.rowHeight },
+      height: rem(theme, densityConfig.rowHeightPx) },
 
     // Sticky header
     ...tableVariantStyles({ theme, densityConfig, stripeColor }, customVariant),

package/src/components/data-display/Table/Table.tsx

@@ -11,7 +11,7 @@ import TableBody from '@mui/material/TableBody/index.js';
 import TableCell from '@mui/material/TableCell/index.js';
 import TableContainer from '@mui/material/TableContainer/index.js';
 import TableRow from '@mui/material/TableRow/index.js';
-import { styled } from '@mui/material/styles/index.js';
+import { styled, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type {
@@ -25,15 +25,22 @@ import { EnhancedTableBody, EnhancedTableHeader } from './TableParts';
 import { EmptyRow, NoDataPlaceholder } from './TableStates';
 import {
   tableStyles } from './Table.styles';
+import { rem } from '../../../tokens/relative';
+
+/** The scroll box's height: a number is design px, 400 unless the caller says otherwise. */
+const scrollHeight = (theme: Theme, containerHeight: number | string | undefined): string => {
+  const box = containerHeight || 400;
+  return typeof box === 'number' ? rem(theme, box) : box;
+};
 
 // Define pulse animation
 const StyledTableContainer = styled(TableContainer, {
   shouldForwardProp: (prop) => !['virtualScrolling', 'containerHeight'].includes(prop as string) })<{ 
   virtualScrolling?: boolean; 
   containerHeight?: number | string;
-}>(({ virtualScrolling, containerHeight }) => ({
+}>(({ theme, virtualScrolling, containerHeight }) => ({
   ...(virtualScrolling && {
-    height: containerHeight || 400,
+    height: scrollHeight(theme, containerHeight),
     overflow: 'auto' }) }));
 
 // Helper function to get stripe color from theme
@@ -104,19 +111,22 @@ const TableShell: React.FC<{
 
 const SKELETON_ROW_COUNT = 5;
 
-const LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => (
-  <>
-    {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (
-      <TableRow key={index}>
-        {columns?.map((column) => (
-          <TableCell key={column.key}>
-            <Skeleton height={20} />
-          </TableCell>
-        ))}
-      </TableRow>
-    ))}
-  </>
-);
+const LoadingSkeletonRows: React.FC<{ columns?: ColumnConfig[] }> = ({ columns }) => {
+  const theme = useTheme();
+  return (
+    <>
+      {Array.from({ length: SKELETON_ROW_COUNT }, (_, index) => (
+        <TableRow key={index}>
+          {columns?.map((column) => (
+            <TableCell key={column.key}>
+              <Skeleton height={rem(theme, 20)} />
+            </TableCell>
+          ))}
+        </TableRow>
+      ))}
+    </>
+  );
+};
 
 export type TableShellProps = Omit<React.ComponentProps<typeof TableShell>, 'children'>;
 

package/src/components/data-display/Timeline/Timeline.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React from 'react';
 import { TimelineRow } from './TimelineRow';
 import type { TimelineProps } from './Timeline.types';
+import { rem } from '../../../tokens/relative';
 
 // ---
 
@@ -19,13 +20,13 @@ const TimelineContainer = styled(Box)<{ orientation: 'vertical' | 'horizontal' }
       overflowX: 'auto',
       paddingBottom: theme.spacing(2),
       '&::-webkit-scrollbar': {
-        height: 8 },
+        height: rem(theme, 8) },
       '&::-webkit-scrollbar-track': {
         background: alpha(theme.palette.action.disabled, 0.1),
-        borderRadius: 4 },
+        borderRadius: rem(theme, 4) },
       '&::-webkit-scrollbar-thumb': {
         background: alpha(theme.palette.primary.main, 0.3),
-        borderRadius: 4,
+        borderRadius: rem(theme, 4),
         '&:hover': {
           background: alpha(theme.palette.primary.main, 0.5) } } }) }),
 );

package/src/components/data-display/Timeline/TimelineRow.tsx

@@ -10,14 +10,15 @@ import Fade from '@mui/material/Fade/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
 import Stack from '@mui/material/Stack/index.js';
 import Typography from '@mui/material/Typography/index.js';
-import { alpha, keyframes, styled } from '@mui/material/styles/index.js';
+import { alpha, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
 import type { TimelineItem, TimelineProps } from './Timeline.types';
 import { onMedia, uiInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
-const slideInAnimation = keyframes`from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); }`;
+const slideInAnimation = (theme: Theme) =>
+  keyframes`from { opacity: 0; transform: translateX(${rem(theme, -20)}); } to { opacity: 1; transform: translateX(0); }`;
 const pulseAnimation = keyframes`0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; }`;
 
 const TimelineItemContainer = styled(Box, {
@@ -32,7 +33,7 @@ const TimelineItemContainer = styled(Box, {
   gap: theme.spacing(2),
   position: 'relative',
   ...(animated && {
-    animation: `${slideInAnimation} 0.5s ease ${index * 0.1}s both`,
+    animation: `${slideInAnimation(theme)} 0.5s ease ${index * 0.1}s both`,
   }),
   ...(orientation === 'vertical' &&
     alternating && {
@@ -42,7 +43,7 @@ const TimelineItemContainer = styled(Box, {
   ...(orientation === 'horizontal' && {
     flexDirection: 'column',
     alignItems: 'center',
-    minWidth: 280,
+    minWidth: rem(theme, 280),
   }),
 }));
 
@@ -56,24 +57,24 @@ const TimelineConnector = styled(Box, {
   background: `linear-gradient(180deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.main, 0.3)} 100%)`,
   ...(orientation === 'vertical'
     ? {
-        width: 2,
-        height: isLast ? 0 : 'calc(100% + 16px)',
-        left: 19,
-        top: 40,
+        width: rem(theme, 2),
+        height: isLast ? 0 : `calc(100% + ${rem(theme, 16)})`,
+        left: rem(theme, 19),
+        top: rem(theme, 40),
       }
     : {
-        height: 2,
-        width: isLast ? 0 : '240px',
-        top: 19,
-        left: 40,
+        height: rem(theme, 2),
+        width: isLast ? 0 : rem(theme, 240),
+        top: rem(theme, 19),
+        left: rem(theme, 40),
       }),
 }));
 
 const TimelineDot = styled(Box, {
   shouldForwardProp: (prop) => !['dotColor', 'hasIcon', 'animated'].includes(prop as string),
 })<{ dotColor?: string; hasIcon: boolean; animated: boolean }>(({ theme, dotColor, hasIcon, animated }) => ({
-  width: 40,
-  height: 40,
+  width: rem(theme, 40),
+  height: rem(theme, 40),
   borderRadius: '50%',
   display: 'flex',
   alignItems: 'center',
@@ -81,8 +82,8 @@ const TimelineDot = styled(Box, {
   background: dotColor
     ? `linear-gradient(135deg, ${dotColor} 0%, ${alpha(dotColor, 0.8)} 100%)`
     : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 100%)`,
-  boxShadow: `0 4px 12px ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
-  border: `2px solid ${theme.palette.background.paper}`,
+  boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(dotColor || theme.palette.primary.main, 0.3)}`,
+  border: `${rem(theme, 2)} solid ${theme.palette.background.paper}`,
   zIndex: 1,
   flexShrink: 0,
   ...(animated && {
@@ -100,14 +101,14 @@ const TimelineCard = styled(Card, {
   ({ theme, timelineVariant, isClickable }) => ({
     flex: 1,
     background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
-    backdropFilter: 'blur(10px)',
-    WebkitBackdropFilter: 'blur(10px)',
+    backdropFilter: `blur(${rem(theme, 10)})`,
+    WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
     border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
     transition: theme.transitions.create(['transform', 'box-shadow']),
     ...(isClickable && {
       cursor: 'pointer',
       '&:hover': {
-        transform: 'translateY(-2px)',
+        transform: `translateY(${rem(theme, -2)})`,
         boxShadow: theme.shadows[8],
       },
     }),
@@ -127,12 +128,12 @@ const TimelineTimestamp = styled(Typography)(({ theme }) => ({
   color: theme.palette.text.secondary,
   fontSize: rem(theme, 12),
   fontWeight: 500,
-  letterSpacing: '0.5px',
+  letterSpacing: rem(theme, 0.5),
   textTransform: 'uppercase',
 }));
 
 const MetadataChip = styled(Chip)(({ theme }) => ({
-  height: 24,
+  height: rem(theme, 24),
   fontSize: rem(theme, 12),
   background: alpha(theme.palette.primary.main, 0.08),
   border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,

package/src/components/data-display/TimingDiagram/TimingDiagram.tsx

@@ -19,8 +19,8 @@ import { rem } from '../../../tokens/relative';
 const DiagramContainer = styled(Paper)(({ theme }) => ({
   padding: theme.spacing(3),
   background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
-  backdropFilter: 'blur(10px)',
-  WebkitBackdropFilter: 'blur(10px)',
+  backdropFilter: `blur(${rem(theme, 10)})`,
+  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,
   border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
   borderRadius: theme.shape.borderRadius * 2,
 }));
@@ -39,9 +39,9 @@ const LegendItem = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   gap: theme.spacing(1),
   '& .color': {
-    width: 12,
-    height: 12,
-    borderRadius: 2,
+    width: rem(theme, 12),
+    height: rem(theme, 12),
+    borderRadius: rem(theme, 2),
   },
   '& .label': {
     fontSize: rem(theme, 12.8),
@@ -83,7 +83,7 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
   copy,
   data,
   showLabels = true,
-  height = 40,
+  height,
   animated = true,
   showTooltips = true,
   variant = 'waterfall',
@@ -106,7 +106,8 @@ export const TimingDiagram: FC<TimingDiagramProps> = ({
           animated={animated}
           showLabels={showLabels}
           showTooltips={showTooltips}
-          height={height}
+          // The waterfall's plot height, 40 design px unless the caller says otherwise.
+          plotHeightPx={height ?? 40}
         />
       )}
 

package/src/components/data-display/TimingDiagram/TimingDiagram.views.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 
 import type { TimingData } from './TimingDiagram.types';
 import { onMedia, sheen, uiInk } from '../../../tokens/ink';
-import { rem } from '../../../tokens/relative';
+import { rem, rems } from '../../../tokens/relative';
 
 export type PhaseKey = 'dns' | 'connect' | 'ssl' | 'request' | 'response';
 
@@ -37,7 +37,8 @@ export interface TimingViewProps {
   animated: boolean;
   showLabels: boolean;
   showTooltips: boolean;
-  height: number;
+  /** The waterfall's plot height in design px — drawn through `rem`. */
+  plotHeightPx: number;
 }
 
 export const formatTime = (ms: number): string => {
@@ -78,17 +79,17 @@ const WaterfallContainer = styled(Box)(({ theme }) => ({
 
 const WaterfallBar = styled(Box, {
   shouldForwardProp: (prop) =>
-    !['phaseColor', 'offset', 'width', 'animated'].includes(prop as string),
+    !['phaseColor', 'offset', 'widthPct', 'animated'].includes(prop as string),
 })<{
   phaseColor: string;
   offset: number;
-  width: number;
+  widthPct: number;
   animated: boolean;
-}>(({ theme, phaseColor, offset, width, animated }) => ({
+}>(({ theme, phaseColor, offset, widthPct, animated }) => ({
   position: 'absolute',
-  height: 32,
+  height: rem(theme, 32),
   left: `${offset}%`,
-  width: `${width}%`,
+  width: `${widthPct}%`,
   background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.8)} 100%)`,
   borderRadius: theme.shape.borderRadius,
   display: 'flex',
@@ -97,12 +98,12 @@ const WaterfallBar = styled(Box, {
   color: theme.palette.getContrastText(phaseColor),
   fontSize: rem(theme, 12),
   fontWeight: 500,
-  boxShadow: `0 2px 8px ${alpha(phaseColor, 0.3)}`,
+  boxShadow: `${rems(theme, 0, 2, 8)} ${alpha(phaseColor, 0.3)}`,
   transition: animated ? 'all 0.5s ease' : 'none',
   animation: animated ? 'slideIn 0.5s ease' : 'none',
   '@keyframes slideIn': {
     from: {
-      transform: 'translateX(-20px)',
+      transform: `translateX(${rem(theme, -20)})`,
       opacity: 0,
     },
     to: {
@@ -111,8 +112,8 @@ const WaterfallBar = styled(Box, {
     },
   },
   '&:hover': {
-    transform: 'translateY(-2px)',
-    boxShadow: `0 4px 12px ${alpha(phaseColor, 0.5)}`,
+    transform: `translateY(${rem(theme, -2)})`,
+    boxShadow: `${rems(theme, 0, 4, 12)} ${alpha(phaseColor, 0.5)}`,
     zIndex: 10,
   },
 }));
@@ -138,14 +139,14 @@ export const WaterfallView: FC<TimingViewProps> = ({
   animated,
   showLabels,
   showTooltips,
-  height,
+  plotHeightPx,
 }) => {
   const theme = useTheme();
   // Each bar starts where the previous one ended, so the row reads as a timeline.
   let offset = 0;
 
   return (
-    <WaterfallContainer style={{ height: height + 40 }} data-variant="waterfall">
+    <WaterfallContainer style={{ height: rem(theme, plotHeightPx + 40) }} data-variant="waterfall">
       {phases.map((phase, index) => {
         const width = widthOf(percentages, phase);
         const currentOffset = offset;
@@ -159,11 +160,11 @@ export const WaterfallView: FC<TimingViewProps> = ({
             data-testid={`timing-segment-${phase.key}`}
             phaseColor={colorOf(theme, phase)}
             offset={currentOffset}
-            width={width}
+            widthPct={width}
             animated={animated}
             data-animated={animated.toString()}
             style={{
-              top: index * 8,
+              top: rem(theme, index * 8),
               width: `${width}%`,
               left: `${currentOffset}%`,
             }}
@@ -174,7 +175,7 @@ export const WaterfallView: FC<TimingViewProps> = ({
           </WaterfallBar>,
         );
       })}
-      <TimelineAxis style={{ marginTop: height }}>
+      <TimelineAxis style={{ marginTop: rem(theme, plotHeightPx) }}>
         <TimeLabel>0ms</TimeLabel>
         <TimeLabel>{formatTime(data.total / 2)}</TimeLabel>
         <TimeLabel>{formatTime(data.total)}</TimeLabel>
@@ -188,7 +189,7 @@ const StackedBar = styled(Box, {
 })<{ animated: boolean }>(({ theme, animated }) => ({
   display: 'flex',
   width: '100%',
-  height: 40,
+  height: rem(theme, 40),
   borderRadius: theme.shape.borderRadius,
   overflow: 'hidden',
   boxShadow: theme.shadows[2],
@@ -204,9 +205,9 @@ const StackedBar = styled(Box, {
 }));
 
 const StackedSegment = styled(Box, {
-  shouldForwardProp: (prop) => !['phaseColor', 'width'].includes(prop as string),
-})<{ phaseColor: string; width: number }>(({ theme, phaseColor, width }) => ({
-  width: `${width}%`,
+  shouldForwardProp: (prop) => !['phaseColor', 'widthPct'].includes(prop as string),
+})<{ phaseColor: string; widthPct: number }>(({ theme, phaseColor, widthPct }) => ({
+  width: `${widthPct}%`,
   background: `linear-gradient(135deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.85)} 100%)`,
   display: 'flex',
   alignItems: 'center',
@@ -244,7 +245,7 @@ export const StackedView: FC<TimingViewProps> = ({
               key={phase.key}
               data-testid={`timing-segment-${phase.key}`}
               phaseColor={colorOf(theme, phase)}
-              width={width}
+              widthPct={width}
               style={{ width: `${width}%` }}
             >
               {showLabels && width > 10 && (
@@ -274,29 +275,29 @@ const HorizontalBar = styled(Box)(({ theme }) => ({
 }));
 
 const HorizontalSegment = styled(Box, {
-  shouldForwardProp: (prop) => !['phaseColor', 'width', 'animated'].includes(prop as string),
+  shouldForwardProp: (prop) => !['phaseColor', 'widthPct', 'animated'].includes(prop as string),
 })<{
   phaseColor: string;
-  width: number;
+  widthPct: number;
   animated: boolean;
 }>(({ theme, phaseColor, animated }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: theme.spacing(2),
   '& .label': {
-    minWidth: 80,
+    minWidth: rem(theme, 80),
     fontSize: rem(theme, 13.6),
     fontWeight: 500,
     color: theme.palette.text.secondary,
   },
   '& .bar': {
     flex: 1,
-    height: 24,
+    height: rem(theme, 24),
     borderRadius: theme.shape.borderRadius,
     background: `linear-gradient(90deg, ${phaseColor} 0%, ${alpha(phaseColor, 0.7)} 100%)`,
     position: 'relative',
     overflow: 'hidden',
-    boxShadow: `0 2px 6px ${alpha(phaseColor, 0.25)}`,
+    boxShadow: `${rems(theme, 0, 2, 6)} ${alpha(phaseColor, 0.25)}`,
     ...(animated && {
       '&::after': {
         content: '""',
@@ -315,7 +316,7 @@ const HorizontalSegment = styled(Box, {
     }),
   },
   '& .value': {
-    minWidth: 60,
+    minWidth: rem(theme, 60),
     textAlign: 'right',
     fontSize: rem(theme, 13.6),
     fontWeight: 600,
@@ -338,7 +339,7 @@ export const HorizontalView: FC<TimingViewProps> = ({
           key={phase.key}
           data-testid={`timing-segment-${phase.key}`}
           phaseColor={colorOf(theme, phase)}
-          width={widthOf(percentages, phase)}
+          widthPct={widthOf(percentages, phase)}
           animated={animated}
           data-animated={animated.toString()}
         >

package/src/components/data-display/Tooltip/Tooltip.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import type { TooltipProps } from './Tooltip.types';
 import { absoluteInk, neutralTones } from '../../../tokens/ink';
-import { sxRem } from '../../../tokens/relative';
+import { rem, rems, sxRem } from '../../../tokens/relative';
 
 // Define pulse animation
 const pulseAnimation = keyframes`
@@ -24,12 +24,14 @@ const pulseAnimation = keyframes`
 `;
 
 const SIZE_MAP = {
-  sm: { fontSize: sxRem(12), padding: '4px 8px' },
-  md: { fontSize: sxRem(14), padding: '6px 12px' },
-  lg: { fontSize: sxRem(16), padding: '8px 16px' },
+  sm: { fontSize: sxRem(12), padding: (theme: Theme) => rems(theme, 4, 8) },
+  md: { fontSize: sxRem(14), padding: (theme: Theme) => rems(theme, 6, 12) },
+  lg: { fontSize: sxRem(16), padding: (theme: Theme) => rems(theme, 8, 16) },
 } as const;
 
-const getSizeStyles = (size?: string): { fontSize: (theme: Theme) => string; padding: string } =>
+const getSizeStyles = (
+  size?: string,
+): { fontSize: (theme: Theme) => string; padding: (theme: Theme) => string } =>
   SIZE_MAP[size as keyof typeof SIZE_MAP] || SIZE_MAP.md;
 
 const variantStyles = (theme: Theme, variant?: string): CSSObject => {
@@ -54,7 +56,7 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
     case 'glass':
       return {
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
         color: theme.palette.text.primary,
       };
@@ -67,7 +69,7 @@ const variantStyles = (theme: Theme, variant?: string): CSSObject => {
 // out one by one, but each is just the union of whichever flags are set.
 const emphasisStyles = (theme: Theme, glow?: boolean, pulse?: boolean): CSSObject => ({
   ...(glow && {
-    boxShadow: `0 0 15px 3px ${alpha(theme.palette.primary.main, 0.4)} !important`,
+    boxShadow: `${rems(theme, 0, 0, 15, 3)} ${alpha(theme.palette.primary.main, 0.4)} !important`,
     filter: 'brightness(1.05)',
   }),
   ...(pulse && {
@@ -103,7 +105,7 @@ const StyledTooltip = styled(MuiTooltip, {
     '& .MuiTooltip-tooltip': {
       borderRadius: theme.spacing(1),
       fontSize: sizeStyles.fontSize(theme),
-      padding: sizeStyles.padding,
+      padding: sizeStyles.padding(theme),
       fontWeight: 500,
       transition: 'all 0.3s ease',
       position: 'relative',
@@ -118,6 +120,17 @@ const StyledTooltip = styled(MuiTooltip, {
   };
 });
 
+/**
+ * The tooltip's cap: 300 design px unless the caller says otherwise. `sx` has
+ * always read a number of 1 or less as a fraction of the parent, and that stays so.
+ */
+const tooltipCap =
+  (maxWidth: number | undefined) =>
+  (theme: Theme): string => {
+    const cap = maxWidth ?? 300;
+    return cap <= 1 && cap !== 0 ? `${cap * 100}%` : rem(theme, cap);
+  };
+
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   (
     {
@@ -125,7 +138,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
       size = 'md',
       glow = false,
       pulse = false,
-      maxWidth = 300,
+      maxWidth,
       dataTestId,
       children,
       ...props
@@ -152,7 +165,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         disableTouchListener={false}
         slotProps={{
           tooltip: {
-            sx: { maxWidth },
+            sx: { maxWidth: tooltipCap(maxWidth) },
             role: 'tooltip',
             ...(dataTestId && { 'data-testid': `${dataTestId}-content` }),
           },

package/dist/chunk-24NXQG5F.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/MapPreview/MapMarkers.tsx"],"sourcesContent":["import LocationIcon from '@mui/icons-material/LocationOn';\nimport Box from '@mui/material/Box/index.js';\nimport Tooltip from '@mui/material/Tooltip/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { MARKER_PIXELS_PER_DEGREE } from './MapPreview.constants';\nimport type { LatLng, MapMarker } from './MapPreview.types';\nimport { BOUNCE_KEYFRAMES } from './mapSurface';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst CoordinatesDisplay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  bottom: theme.spacing(2),\n  left: theme.spacing(2),\n  padding: theme.spacing(1, 1.5),\n  background: alpha(theme.palette.background.paper, 0.95),\n  backdropFilter: 'blur(10px)',\n  WebkitBackdropFilter: 'blur(10px)',\n  border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n  borderRadius: theme.shape.borderRadius,\n  zIndex: 1,\n}));\n\nexport interface MapMarkersProps {\n  markers: MapMarker[];\n  centre: LatLng;\n  animated: boolean;\n}\n\n// Markers are placed relative to the current centre, so panning moves them with\n// the surface.\nexport const MapMarkers: FC<MapMarkersProps> = ({ markers, centre, animated }) => {\n  const theme = useTheme();\n\n  return (\n    <>\n      {markers.map((markerItem, index) => (\n        <Box\n          key={`${markerItem.position.lat}-${markerItem.position.lng}-${index}`}\n          data-testid={`map-marker-${index}`}\n          sx={{\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            transform: `translate(\n              ${(markerItem.position.lng - centre.lng) * MARKER_PIXELS_PER_DEGREE}px,\n              ${-(markerItem.position.lat - centre.lat) * MARKER_PIXELS_PER_DEGREE}px\n            )`,\n            zIndex: 3,\n            cursor: markerItem.onClick ? 'pointer' : 'default',\n          }}\n          onClick={markerItem.onClick}\n          title={markerItem.title}\n        >\n          <Tooltip title={markerItem.description || markerItem.title || ''}>\n            <LocationIcon\n              sx={{\n                fontSize: rem(theme, 32),\n                color: theme.palette.error.main,\n                filter: `drop-shadow(0 2px 4px ${shadowInk(theme, 0.3)})`,\n                animation: animated ? 'bounce 2s infinite' : 'none',\n                '@keyframes bounce': BOUNCE_KEYFRAMES,\n              }}\n            />\n          </Tooltip>\n        </Box>\n      ))}\n    </>\n  );\n};\n\nexport const MapCoordinates: FC<{ position: LatLng; zoom: number }> = ({ position, zoom }) => (\n  <CoordinatesDisplay data-testid=\"coordinates-display\">\n    <Typography variant=\"caption\" sx={{ fontFamily: 'monospace' }}>\n      Lat: {position.lat.toFixed(6)}, Lng: {position.lng.toFixed(6)}\n    </Typography>\n    {zoom > 0 && (\n      <Typography variant=\"caption\" sx={{ fontFamily: 'monospace', display: 'block' }}>\n        Zoom: {zoom}\n      </Typography>\n    )}\n  </CoordinatesDisplay>\n);\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,kBAAkB;AACzB,OAAO,SAAS;AAChB,OAAO,aAAa;AACpB,OAAO,gBAAgB;AACvB,SAAS,OAAO,QAAQ,gBAAgB;AAqCpC,mBAoBQ,KAkBR,YAtCA;AAzBJ,IAAM,qBAAqB,OAAO,GAAG,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACrD,UAAU;AAAA,EACV,QAAQ,MAAM,QAAQ,CAAC;AAAA,EACvB,MAAM,MAAM,QAAQ,CAAC;AAAA,EACrB,SAAS,MAAM,QAAQ,GAAG,GAAG;AAAA,EAC7B,YAAY,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,EACtD,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,EACtD,cAAc,MAAM,MAAM;AAAA,EAC1B,QAAQ;AACV,EAAE;AAUK,IAAM,aAAkC,CAAC,EAAE,SAAS,QAAQ,SAAS,MAAM;AAChF,QAAM,QAAQ,SAAS;AAEvB,SACE,gCACG,kBAAQ,IAAI,CAAC,YAAY,UACxB;AAAA,IAAC;AAAA;AAAA,MAEC,eAAa,cAAc,KAAK;AAAA,MAChC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW;AAAA,iBACN,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA,gBACjE,EAAE,WAAW,SAAS,MAAM,OAAO,OAAO,wBAAwB;AAAA;AAAA,QAEtE,QAAQ;AAAA,QACR,QAAQ,WAAW,UAAU,YAAY;AAAA,MAC3C;AAAA,MACA,SAAS,WAAW;AAAA,MACpB,OAAO,WAAW;AAAA,MAElB,8BAAC,WAAQ,OAAO,WAAW,eAAe,WAAW,SAAS,IAC5D;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,UAAU,IAAI,OAAO,EAAE;AAAA,YACvB,OAAO,MAAM,QAAQ,MAAM;AAAA,YAC3B,QAAQ,yBAAyB,UAAU,OAAO,GAAG,CAAC;AAAA,YACtD,WAAW,WAAW,uBAAuB;AAAA,YAC7C,qBAAqB;AAAA,UACvB;AAAA;AAAA,MACF,GACF;AAAA;AAAA,IA1BK,GAAG,WAAW,SAAS,GAAG,IAAI,WAAW,SAAS,GAAG,IAAI,KAAK;AAAA,EA2BrE,CACD,GACH;AAEJ;AAEO,IAAM,iBAAyD,CAAC,EAAE,UAAU,KAAK,MACtF,qBAAC,sBAAmB,eAAY,uBAC9B;AAAA,uBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,YAAY,GAAG;AAAA;AAAA,IACvD,SAAS,IAAI,QAAQ,CAAC;AAAA,IAAE;AAAA,IAAQ,SAAS,IAAI,QAAQ,CAAC;AAAA,KAC9D;AAAA,EACC,OAAO,KACN,qBAAC,cAAW,SAAQ,WAAU,IAAI,EAAE,YAAY,aAAa,SAAS,QAAQ,GAAG;AAAA;AAAA,IACxE;AAAA,KACT;AAAA,GAEJ;","names":[]}