@12-apps/ui 6.37.0 → 6.39.0

package/src/components/layout/CardGrid/CardGrid.tsx

@@ -1,11 +1,13 @@
+import { useTheme, type Theme } from "@mui/material/styles/index.js";
 import { Children, type CSSProperties, type ReactNode, type Ref } from "react";
 
+import { rem } from "../../../tokens/relative";
 import { cn } from "../../../utils/cn";
 
 /**
  * How the grid turns surplus row space into layout:
  *
- * - `"fixed"` — every column is exactly `cardWidth` px; leftover row space is
+ * - `"fixed"` — every column is exactly `cardWidth` design px; leftover row space is
  *   spread as even gutters (`justify-content: space-around`). Cards never resize;
  *   the column count changes with the viewport. This is the original tabwoah
  *   card-grid behavior.
@@ -14,7 +16,7 @@ import { cn } from "../../../utils/cn";
  *   left-aligned at a single track's width rather than stretching edge to edge.
  * - `"scroll"` — a single row that scrolls horizontally, with fluid-width cards
  *   sized from the container so that exactly {@link SCROLL_VISIBLE_CARDS} cards
- *   plus a {@link SCROLL_PEEK_WIDTH}px sliver of the next one fit on screen (up
+ *   plus a `GRID.peekPx` sliver of the next one fit on screen (up
  *   to `maxCardWidth`, past which more cards simply fit). The sliver is the
  *   point: it makes the rail visibly continue past the fold, so the row reads as
  *   swipeable instead of as a finished pair of cards. Wrapping is off; the row
@@ -23,19 +25,27 @@ import { cn } from "../../../utils/cn";
  */
 export type CardGridVariant = "fixed" | "fluid" | "scroll";
 
-/** The grid gap, in px — mirrors the `gap: 1rem` below, for the scroll math. */
-const GRID_GAP = 16;
+/**
+ * The grid's own lengths, in design px — every one drawn through `rem`, so the
+ * `gap` the grid lays out with and the gap the scroll track math reserves are
+ * the same length at any type scale.
+ */
+const GRID = {
+  /** Between cards: the grid's `gap`, and what the scroll math reserves per gap. */
+  gapPx: 16,
+  /**
+   * `scroll`: the next card left visible past the last whole one — the
+   * "there's more, swipe" hint. Wide enough to read as a clipped card (rounded
+   * edge + a slice of its photo) rather than as a rendering glitch.
+   */
+  peekPx: 28,
+  /** Under the row — the tabwoah original's Tailwind `pb-0.5`. */
+  paddingBottomPx: 2,
+} as const;
 
 /** `scroll`: how many WHOLE cards the rail commits to showing at once. */
 const SCROLL_VISIBLE_CARDS = 2;
 
-/**
- * `scroll`: px of the next card left visible past the last whole one — the
- * "there's more, swipe" hint. Wide enough to read as a clipped card (rounded
- * edge + a slice of its photo) rather than as a rendering glitch.
- */
-const SCROLL_PEEK_WIDTH = 28;
-
 /**
  * The `scroll` track width: the widest a card can be while the container still
  * shows `SCROLL_VISIBLE_CARDS` of them plus the peek — or, when there is nothing
@@ -46,25 +56,27 @@ const SCROLL_PEEK_WIDTH = 28;
  * that follow them (one between each pair, one before the peeked card), and the
  * peek. With no overflow there are only N-1 gaps and no peek.
  */
-function scrollTrackWidth(count: number, max: number): string {
+function scrollTrackWidth(theme: Theme, count: number, max: number): string {
   const tracks = Math.max(1, Math.min(count, SCROLL_VISIBLE_CARDS));
   const overflows = count > tracks;
   const gaps = overflows ? tracks : tracks - 1;
-  const reserved = gaps * GRID_GAP + (overflows ? SCROLL_PEEK_WIDTH : 0);
-  return `min(${max}px, calc((100% - ${reserved}px) / ${tracks}))`;
+  const reserved = gaps * GRID.gapPx + (overflows ? GRID.peekPx : 0);
+  return `min(${rem(theme, max)}, calc((100% - ${rem(theme, reserved)}) / ${tracks}))`;
 }
 
 interface CardGridProps {
   /**
-   * `"fixed"`: the exact column width in px. `"fluid"`: the minimum column width
+   * `"fixed"`: the exact column width. `"fluid"`: the minimum column width
    * (columns grow from here). `"scroll"`: only seeds the default `maxCardWidth`
    * — a scroll track has no minimum, because a minimum is exactly what would
    * break the "two cards plus a peek" promise on a narrow phone.
+   *
+   * Design px, scaled with the theme's type scale.
    */
   cardWidth: number;
   /**
-   * `"scroll"` only: the maximum fluid card width in px. Defaults to
-   * `1.6 × cardWidth`.
+   * `"scroll"` only: the maximum fluid card width. Defaults to
+   * `1.6 × cardWidth`. Design px, scaled with the theme's type scale.
    */
   maxCardWidth?: number;
   /** Layout behavior — see {@link CardGridVariant}. Defaults to `"fixed"`. */
@@ -84,8 +96,8 @@ interface CardGridProps {
  *
  * Ported from the tabwoah card grid (the `"fixed"` variant is verbatim). The one
  * adaptation: that app is Tailwind (`className="grid gap-4 pb-0.5"`); this one
- * has no Tailwind, so those three utilities (display:grid, gap 1rem,
- * padding-bottom 2px) live in `style`.
+ * has no Tailwind, so those three utilities (display:grid, gap 16 design px,
+ * padding-bottom 2 design px) live in `style`, drawn through `rem`.
  */
 export function CardGrid({
   cardWidth,
@@ -96,10 +108,11 @@ export function CardGrid({
   containerRef,
   children,
 }: CardGridProps) {
+  const theme = useTheme();
   const style: CSSProperties = {
     display: "grid",
-    gap: "1rem",
-    paddingBottom: "2px",
+    gap: rem(theme, GRID.gapPx),
+    paddingBottom: rem(theme, GRID.paddingBottomPx),
   };
 
   if (variant === "scroll") {
@@ -109,14 +122,14 @@ export function CardGrid({
     // always fit (see `scrollTrackWidth`). Scroll-snap makes a swipe settle on a
     // card boundary instead of drifting mid-card.
     style.gridAutoFlow = "column";
-    style.gridAutoColumns = scrollTrackWidth(Children.count(children), max);
+    style.gridAutoColumns = scrollTrackWidth(theme, Children.count(children), max);
     style.overflowX = "auto";
     style.overflowY = "hidden";
     style.scrollSnapType = "x mandatory";
   } else if (variant === "fluid") {
-    style.gridTemplateColumns = `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`;
+    style.gridTemplateColumns = `repeat(auto-fill, minmax(${rem(theme, cardWidth)}, 1fr))`;
   } else {
-    style.gridTemplateColumns = `repeat(auto-fill, ${cardWidth}px)`;
+    style.gridTemplateColumns = `repeat(auto-fill, ${rem(theme, cardWidth)})`;
     // `space-around` only distributes leftover width in the fixed variant; the
     // fluid variant consumes it via `1fr` and scroll overflows instead.
     style.justifyContent = "space-around";

package/src/components/layout/Collapsible/Collapsible.helpers.ts

@@ -1,5 +1,7 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
+import { rem } from '../../../tokens/relative';
+
 import type { CollapsibleVariant } from './Collapsible.types';
 
 /**
@@ -73,8 +75,8 @@ export const triggerStyles = (
           : theme.palette.action.hover,
     },
     '&:focus': {
-      outline: `2px solid ${theme.palette.primary.main}`,
-      outlineOffset: 2,
+      outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`,
+      outlineOffset: rem(theme, 2),
     },
     '&:active': {
       backgroundColor: disabled ? 'transparent' : theme.palette.action.focus,

package/src/components/layout/Collapsible/Collapsible.tsx

@@ -3,6 +3,8 @@ import Collapse from '@mui/material/Collapse/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import React, { useCallback,useEffect, useRef, useState } from 'react';
 
+import { remPx, sxRem } from '../../../tokens/relative';
+
 import {
   dimmedStyles,
   regionAttrs,
@@ -20,16 +22,17 @@ const useMeasuredHeight = (
   maxHeight: number | undefined,
   children: React.ReactNode,
 ) => {
+  const theme = useTheme();
   const contentRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | 'auto'>('auto');
 
   const measureHeight = useCallback(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
-      // Cap at maxHeight if provided
-      setHeight(maxHeight ? Math.min(scrollHeight, maxHeight) : scrollHeight);
+      // Cap at maxHeight (design px, through the type scale) if provided
+      setHeight(maxHeight ? Math.min(scrollHeight, remPx(theme, maxHeight)) : scrollHeight);
     }
-  }, [maxHeight]);
+  }, [maxHeight, theme]);
 
   useEffect(() => {
     if (!open) {
@@ -69,7 +72,8 @@ const DefaultCollapsible: React.FC<VariantProps> = ({
     timeout={disabled ? 0 : duration}
     sx={{
       ...dimmedStyles(disabled),
-      ...(maxHeight && { maxHeight, overflow: 'hidden' }),
+      // `sx` reads 1 or less as a fraction of the parent; anything else is design px.
+      ...(maxHeight && { maxHeight: maxHeight <= 1 ? `${maxHeight * 100}%` : sxRem(maxHeight), overflow: 'hidden' }),
       ...sx,
     }}
     className={className}

package/src/components/layout/ContentToolbar/ColumnsMenu.tsx

@@ -88,7 +88,7 @@ export function ColumnsMenu({
         onClose={close}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        slotProps={{ paper: { sx: { minWidth: 200 } } }}
+        slotProps={{ paper: { sx: { minWidth: sxRem(200) } } }}
       >
         <ListSubheader sx={{ px: 1.5, py: 0.75, fontSize: sxRem(12), fontWeight: 600, color: 'text.primary', lineHeight: 1.5 }}>
           {title}

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -148,7 +148,7 @@ function SelectionState({
       >
         {clearAllText}
       </Button>
-      <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
+      <Divider orientation="vertical" flexItem sx={{ height: sxRem(16), alignSelf: 'center' }} />
       <Typography
         component="span"
         data-testid="selected-count-indicator"
@@ -231,7 +231,7 @@ function BrowsingClusters({
           flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',
           // Tight (5px) when browsing so the controls fit one line beside the
           // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? '14px' : '5px',
+          gap: hasSelection ? sxRem(14) : sxRem(5),
           ml: 'auto',
           mr: edgeAlign ? -1.5 : 0,
           '& > *': { flexShrink: 0 },

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -54,8 +54,8 @@ export function FilterTrigger({
           data-testid={`${testId}-count`}
           sx={{
             ml: 0.5,
-            minWidth: 18,
-            height: 18,
+            minWidth: sxRem(18),
+            height: sxRem(18),
             px: 0.5,
             borderRadius: 999,
             display: 'inline-flex',

package/src/components/layout/ContentToolbar/MultiSelectDropdown.tsx

@@ -248,7 +248,7 @@ function MultiSelectMenu<TValue extends string>({
       slotProps={{
         // Cap the height so a long list (e.g. many categories) scrolls instead
         // of running off-screen; the sticky search box stays pinned on top.
-        paper: { sx: { minWidth: anchorWidth ?? 180, width: anchorWidth, maxHeight: 360 } },
+        paper: { sx: { minWidth: anchorWidth ?? sxRem(180), width: anchorWidth, maxHeight: sxRem(360) } },
         list: { sx: { pt: showSearch ? 0 : undefined, pb: 0 } },
       }}
     >

package/src/components/layout/ContentToolbar/SavedViewsMenu.tsx

@@ -92,7 +92,7 @@ function ViewKebab<V extends SavedViewLike>({
         aria-label={`${labels.apply} ${view.name}`}
         data-testid={`${testIdPrefix}-kebab-${view.id}`}
         onClick={(event) => setAnchorEl(event.currentTarget)}
-        sx={{ width: 28, height: 28, color: 'text.secondary' }}
+        sx={{ width: sxRem(28), height: sxRem(28), color: 'text.secondary' }}
       >
         <KebabIcon sx={{ fontSize: sxRem(16) }} />
       </IconButton>
@@ -215,7 +215,7 @@ function PopoverBody<V extends SavedViewLike>({
   testIdPrefix: string;
 }): React.JSX.Element {
   return (
-    <Stack spacing={1.5} sx={{ p: 1.5, width: 300 }} data-testid={`${testIdPrefix}-popover`}>
+    <Stack spacing={1.5} sx={{ p: 1.5, width: sxRem(300) }} data-testid={`${testIdPrefix}-popover`}>
       {/* Built-in no-filter default, always available above the saved views. */}
       <MenuItem data-testid={`${testIdPrefix}-main`} selected={!activeViewName} onClick={onSelectMain} sx={{ borderRadius: 1, px: 1, gap: 1 }}>
         <Box component="span" sx={{ flex: 1, minWidth: 0, fontSize: sxRem(14) }}>

package/src/components/layout/ContentToolbar/SortByDropdown.tsx

@@ -74,7 +74,7 @@ const sectionLabelSx = { px: 1, py: 0.75, fontSize: sxRem(12), fontWeight: 600,
 /** A fixed-width check slot (empty when unchecked) so labels align. */
 function SortCheck({ checked }: { checked: boolean }): React.JSX.Element {
   return (
-    <Box component="span" sx={{ display: 'flex', width: 16, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>
+    <Box component="span" sx={{ display: 'flex', width: sxRem(16), flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>
       {checked ? <CheckIcon sx={{ fontSize: sxRem(14) }} /> : null}
     </Box>
   );
@@ -137,7 +137,7 @@ function SortMenu<TField extends string>({
       onClose={close}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
       transformOrigin={{ vertical: 'top', horizontal: 'left' }}
-      slotProps={{ paper: { sx: { minWidth: 180 } } }}
+      slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
     >
       {orderOptions.length > 0 && [
         <ListSubheader key="order-label" sx={sectionLabelSx}>

package/src/components/layout/ContentToolbar/ViewSelector.tsx

@@ -46,7 +46,7 @@ export function ViewSelector({
   return (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
       {viewMode === 'grid' && (
-        <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>
+        <Box sx={{ width: sxRem(96), display: 'flex', alignItems: 'center' }}>
           <Slider
             data-testid="resize-card-slider"
             aria-label={cardSizeLabel}
@@ -80,7 +80,7 @@ export function ViewSelector({
         onClose={() => setAnchorEl(null)}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-        slotProps={{ paper: { sx: { minWidth: 180 } } }}
+        slotProps={{ paper: { sx: { minWidth: sxRem(180) } } }}
       >
         {VIEW_OPTIONS.map((option) => {
           const OptionIcon = option.icon;

package/src/components/layout/Dashboard/Dashboard.tsx

@@ -217,7 +217,7 @@ const DashboardHeader = ({ title, children, className }: DashboardHeaderProps):
     <Box
       className={className}
       data-testid={`${testIdPrefix}-header`}
-      sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', minHeight: 40 }}
+      sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', minHeight: sxRem(40) }}
     >
       <Typography variant="h5" component="h1" sx={{ fontWeight: 600, mr: 0.5 }}>
         {title}

package/src/components/layout/Dashboard/DashboardParts.tsx

@@ -64,7 +64,7 @@ export const DashboardInfo = ({
         anchorEl={anchorEl}
         onClose={() => setAnchorEl(null)}
         anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
-        slotProps={{ paper: { sx: { width: 360, maxWidth: '90vw' } } }}
+        slotProps={{ paper: { sx: { width: sxRem(360), maxWidth: '90vw' } } }}
         data-testid={`${testIdPrefix}-info-popover`}
       >
         <Box sx={{ px: 2, py: 1.5, borderBottom: 1, borderColor: 'divider', display: 'flex', gap: 1, alignItems: 'center' }}>

package/src/components/layout/Drawer/Drawer.tsx

@@ -9,9 +9,20 @@ import React from 'react';
 
 import type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';
 import { shadowInk } from '../../../tokens/ink';
+import { rem, rems } from '../../../tokens/relative';
 
 type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
 
+/**
+ * A `width`/`height` prop as CSS. `sx` reads a number of 1 or less as a
+ * fraction of the parent, and that stays so; any other number is design px,
+ * through the type scale; a string is as given.
+ */
+const drawerLength = (theme: Theme, value: number | string | undefined): string | undefined => {
+  if (typeof value !== 'number') return value;
+  return value <= 1 && value !== 0 ? `${value * 100}%` : rem(theme, value);
+};
+
 // `variant` doubles as a position preset, but an explicit `anchor` always wins.
 const resolveAnchor = (
   anchor: DrawerProps['anchor'],
@@ -47,9 +58,11 @@ const buildDrawerStyles = (
   // omit it and the drawer styles exactly as it always has.
   paperSx?: DrawerProps['paperSx'],
 ) => {
+  const widthCss = drawerLength(theme, width);
+  const heightCss = drawerLength(theme, height);
   const baseStyles = {
-    width: ['left', 'right'].includes(anchor) ? width : '100%',
-    height: ['top', 'bottom'].includes(anchor) ? height : '100%',
+    width: ['left', 'right'].includes(anchor) ? widthCss : '100%',
+    height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',
     flexShrink: 0,
   };
 
@@ -57,12 +70,12 @@ const buildDrawerStyles = (
     return {
       ...baseStyles,
       '& .MuiDrawer-paper': {
-        width,
+        width: widthCss,
         height: '100%',
         backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${rem(theme, 20)})`,
         border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-        boxShadow: `0 8px 32px ${shadowInk(theme, 0.1)}`,
+        boxShadow: `${rems(theme, 0, 8, 32)} ${shadowInk(theme, 0.1)}`,
         ...paperSx,
       },
     };
@@ -71,8 +84,8 @@ const buildDrawerStyles = (
   return {
     ...baseStyles,
     '& .MuiDrawer-paper': {
-      width: ['left', 'right'].includes(anchor) ? width : '100%',
-      height: ['top', 'bottom'].includes(anchor) ? height : '100%',
+      width: ['left', 'right'].includes(anchor) ? widthCss : '100%',
+      height: ['top', 'bottom'].includes(anchor) ? heightCss : '100%',
       boxSizing: 'border-box',
       ...paperSx,
     },
@@ -85,7 +98,7 @@ export const Drawer: React.FC<DrawerProps> = ({
   onClose,
   variant = 'left',
   anchor,
-  width = 280,
+  width,
   height = '100%',
   persistent = false,
   backdrop = true,
@@ -112,7 +125,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           invisible: !backdrop,
         },
       }}
-      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height, paperSx)}
+      sx={buildDrawerStyles(theme, drawerAnchor, variant, width ?? 280, height, paperSx)}
       className={className}
       data-testid={dataTestId || 'drawer'}
       {...rest}
@@ -139,7 +152,7 @@ export const DrawerHeader: React.FC<DrawerHeaderProps> = ({
         alignItems: 'center',
         padding: theme.spacing(2),
         borderBottom: `1px solid ${theme.palette.divider}`,
-        minHeight: 64,
+        minHeight: rem(theme, 64),
         justifyContent: 'space-between',
       }}
     >

package/src/components/layout/Resizable/Resizable.helpers.ts

@@ -1,7 +1,10 @@
 import type { Theme } from '@mui/material/styles/index.js';
 
+import { rem, remPx } from '../../../tokens/relative';
+
 import type { ResizableProps, ResizableVariant, ResizeHandle } from './Resizable.types';
 
+/** One axis's clamp, in the px a drag runs in. */
 export interface Axis {
   min: number;
   max: number;
@@ -80,16 +83,30 @@ export const handleStyle = (theme: Theme, handle: ResizeHandle, active: boolean)
 
   switch (handle) {
     case 'right':
-      return { ...baseStyle, top: 0, right: -2, width: 4, height: '100%', cursor: 'ew-resize' };
+      return {
+        ...baseStyle,
+        top: 0,
+        right: rem(theme, -2),
+        width: rem(theme, 4),
+        height: '100%',
+        cursor: 'ew-resize',
+      };
     case 'bottom':
-      return { ...baseStyle, bottom: -2, left: 0, width: '100%', height: 4, cursor: 'ns-resize' };
+      return {
+        ...baseStyle,
+        bottom: rem(theme, -2),
+        left: 0,
+        width: '100%',
+        height: rem(theme, 4),
+        cursor: 'ns-resize',
+      };
     case 'bottomRight':
       return {
         ...baseStyle,
-        bottom: -2,
-        right: -2,
-        width: 8,
-        height: 8,
+        bottom: rem(theme, -2),
+        right: rem(theme, -2),
+        width: rem(theme, 8),
+        height: rem(theme, 8),
         cursor: 'nw-resize',
         borderRadius: '50%',
       };
@@ -98,30 +115,35 @@ export const handleStyle = (theme: Theme, handle: ResizeHandle, active: boolean)
   }
 };
 
-type ResizableDefaultedKeys =
-  | 'variant'
-  | 'width'
-  | 'height'
-  | 'minWidth'
-  | 'maxWidth'
-  | 'minHeight'
-  | 'maxHeight'
-  | 'disabled';
+type ResizableDefaultedKeys = 'variant' | 'disabled';
 
 type ResolvedResizableProps = ResizableProps &
   Required<Pick<ResizableProps, ResizableDefaultedKeys>>;
 
 const RESIZABLE_DEFAULTS: Pick<ResizableProps, ResizableDefaultedKeys> = {
   variant: 'both',
-  width: 200,
-  height: 200,
-  minWidth: 50,
-  maxWidth: 1000,
-  minHeight: 50,
-  maxHeight: 1000,
   disabled: false,
 };
 
+/** The box's own defaults, in design px: where it starts, and its clamp. */
+const DEFAULT_BOX_PX = { start: 200, min: 50, max: 1000 } as const;
+
+/**
+ * Where the box starts, in the px a drag runs in. The consumer's sizes are
+ * design px, like every other size in the package; a drag is pointer pixels,
+ * so the live size is px from here on.
+ */
+export const startSizePx = (theme: Theme, width?: number, height?: number) => ({
+  width: remPx(theme, width ?? DEFAULT_BOX_PX.start),
+  height: remPx(theme, height ?? DEFAULT_BOX_PX.start),
+});
+
+/** One axis's clamp, from the consumer's design px to the px a drag runs in. */
+export const axisPx = (theme: Theme, min?: number, max?: number): Axis => ({
+  min: remPx(theme, min ?? DEFAULT_BOX_PX.min),
+  max: remPx(theme, max ?? DEFAULT_BOX_PX.max),
+});
+
 // Strips explicitly-undefined props before the merge, so `minWidth={undefined}`
 // still falls back to the default exactly as a destructuring default would.
 const definedProps = (props: ResizableProps): Partial<ResizableProps> =>

package/src/components/layout/Resizable/Resizable.hooks.ts

@@ -5,9 +5,12 @@ import { resizedTo } from './Resizable.helpers';
 import type { ResizeHandle } from './Resizable.types';
 
 interface ResizeArgs {
-  width: number;
-  height: number;
+  /** Where the box starts, in px (`startSizePx`); a new object re-seats the box. */
+  start: { width: number; height: number };
+  /** The clamp, in px (`axisPx` per axis). */
   bounds: Bounds;
+  /** Rendered px per design px (`remPx(theme, 1)`) — `onResize` reports design px. */
+  pxPerDesignPx: number;
   disabled: boolean;
   onResize?: (width: number, height: number) => void;
 }
@@ -16,17 +19,21 @@ interface ResizeArgs {
  * Tracks the box's size across a drag. The listeners live on the document rather
  * than the handle, so the pointer can leave the handle — or the component — mid
  * drag without the resize sticking.
+ *
+ * The live size is px, because a drag is pointer pixels. What `onResize`
+ * reports is design px — the unit the consumer's `width`/`height` are in — so a
+ * controlled box (`onResize` feeding `width`) stays put at any type scale.
  */
-export const useResize = ({ width, height, bounds, disabled, onResize }: ResizeArgs) => {
-  const [size, setSize] = useState({ width, height });
+export const useResize = ({ start, bounds, pxPerDesignPx, disabled, onResize }: ResizeArgs) => {
+  const [size, setSize] = useState(start);
   const [isResizing, setIsResizing] = useState(false);
   const startPos = useRef({ x: 0, y: 0 });
   const startSize = useRef({ width: 0, height: 0 });
   const activeHandle = useRef<ResizeHandle | null>(null);
 
   React.useEffect(() => {
-    setSize({ width, height });
-  }, [width, height]);
+    setSize(start);
+  }, [start]);
 
   const handleMouseDown = useCallback(
     (e: React.MouseEvent, handle: ResizeHandle) => {
@@ -38,7 +45,8 @@ export const useResize = ({ width, height, bounds, disabled, onResize }: ResizeA
       setIsResizing(true);
       activeHandle.current = handle;
       startPos.current = { x: e.clientX, y: e.clientY };
-      startSize.current = { width: size.width, height: size.height };
+      // State is replaced on every change, never mutated, so holding it is a snapshot.
+      startSize.current = size;
 
       const handleMouseMove = (move: globalThis.MouseEvent) => {
         const delta = {
@@ -48,7 +56,7 @@ export const useResize = ({ width, height, bounds, disabled, onResize }: ResizeA
         const next = resizedTo(handle, delta, startSize.current, bounds);
 
         setSize(next);
-        onResize?.(next.width, next.height);
+        onResize?.(next.width / pxPerDesignPx, next.height / pxPerDesignPx);
       };
 
       const handleMouseUp = () => {
@@ -61,7 +69,7 @@ export const useResize = ({ width, height, bounds, disabled, onResize }: ResizeA
       document.addEventListener('mousemove', handleMouseMove);
       document.addEventListener('mouseup', handleMouseUp);
     },
-    [disabled, size, bounds, onResize],
+    [disabled, size, bounds, pxPerDesignPx, onResize],
   );
 
   return { size, isResizing, activeHandle, handleMouseDown };

package/src/components/layout/Resizable/Resizable.md

@@ -51,18 +51,22 @@ import { Resizable } from '@procurement/ui';
 | -------------- | ---------------------------------------- | ------------------------------------ | ------------------------------------------------ |
 | `children`     | `ReactNode`                              | -                                    | Content to render inside the resizable container |
 | `variant`      | `'horizontal' \| 'vertical' \| 'both'`   | `'both'`                             | Resize direction constraint                      |
-| `width`        | `number`                                 | `300`                                | Initial width in pixels                          |
-| `height`       | `number`                                 | `200`                                | Initial height in pixels                         |
+| `width`        | `number`                                 | `200`                                | Initial width, design px (scales with the theme's type scale) |
+| `height`       | `number`                                 | `200`                                | Initial height, design px (scales with the theme's type scale) |
 | `minWidth`     | `number`                                 | `50`                                 | Minimum width constraint                         |
-| `maxWidth`     | `number`                                 | -                                    | Maximum width constraint                         |
+| `maxWidth`     | `number`                                 | `1000`                               | Maximum width constraint                         |
 | `minHeight`    | `number`                                 | `50`                                 | Minimum height constraint                        |
-| `maxHeight`    | `number`                                 | -                                    | Maximum height constraint                        |
-| `onResize`     | `(dimensions: ResizeDimensions) => void` | -                                    | Callback fired during resize with new dimensions |
+| `maxHeight`    | `number`                                 | `1000`                               | Maximum height constraint                        |
+| `onResize`     | `(width: number, height: number) => void` | -                                   | Fired during resize with the new size, in design px |
 | `disabled`     | `boolean`                                | `false`                              | Disables resize functionality                    |
 | `handles`      | `HandlePosition[]`                       | `['right', 'bottom', 'bottomRight']` | Array of handle positions                        |
 | `className`    | `string`                                 | -                                    | Additional CSS class name                        |
 | `data-testid`  | `string`                                 | -                                    | Test ID for automated testing                    |
 
+Every size prop — and what `onResize` reports — is in design px, the unit the
+whole package draws in, scaled with the theme's type scale (`remPx`). A drag
+follows the pointer in real pixels.
+
 ## Handle Positions
 
 The `handles` prop accepts an array of the following positions: