flet-box 1.0.6 → 1.0.8

package/src/widgets/Button.js

@@ -3,6 +3,8 @@
  * @description Button with size presets, variants, icons and gradient support.
  */
 import { WidgetFactory } from "../widget-factory/index.js";import { colors } from "../utils/themes.js";
+import { SHADOW_LEVELS, TAP_MINIMUM } from "../tools/index.js";
+import { readableInk } from "../utils/readableInk.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 
@@ -10,19 +12,20 @@ import { Icon } from "./Icon.js";
 // CONFIGURATION
 // ============================================================
 
+/**
+ * Every number here is a framework unit — the factory converts lengths to `rem`,
+ * so the whole preset grows with the reader's font size instead of freezing at
+ * the pixel it was written in.
+ *
+ * `minHeight` is the Fitts floor: a pressable box the finger can hit, set on the
+ * box rather than reached through padding, so `small` stays a small *looking*
+ * control that is still a real target. `medium` and `large` land on 40 and 48;
+ * `small` is 32 and is a desktop-density escape hatch, not a touch target.
+ */
 const SIZE_PRESETS = {
-  small: { padding: [6, 12], fontSize: 12, gap: 6, iconSize: 16 },
-  medium: { padding: [10, 20], fontSize: 14, gap: 8, iconSize: 20 },
-  large: { padding: [14, 28], fontSize: 16, gap: 10, iconSize: 24 },
-};
-
-const SHADOW_LEVELS = {
-  0: "none",
-  1: "0 1px 3px rgba(0,0,0,0.12)",
-  2: "0 3px 6px rgba(0,0,0,0.16)",
-  3: "0 6px 12px rgba(0,0,0,0.2)",
-  4: "0 10px 20px rgba(0,0,0,0.25)",
-  5: "0 15px 30px rgba(0,0,0,0.3)",
+  small: { padding: [4, 12], fontSize: 12, gap: 4, iconSize: 16, minHeight: 32 },
+  medium: { padding: [8, 16], fontSize: 14, gap: 8, iconSize: 20, minHeight: TAP_MINIMUM },
+  large: { padding: [12, 24], fontSize: 16, gap: 12, iconSize: 24, minHeight: 48 },
 };
 
 // ============================================================
@@ -42,20 +45,35 @@ function computeBackground(variant, disabled, bgColor, gradient) {
   return "transparent";
 }
 
-function computeTextColor(variant, disabled, color, bgColor) {
+function computeTextColor(variant, disabled, color, background, inkFromFill) {
   if (disabled) return colors.textDisabled;
-  if (variant === "filled") return color || "#fff";
-  return color || bgColor || colors.primary;
+  if (variant === "filled") {
+    // The default `color` is the theme's ink, which is the right answer for a
+    // filled button sitting on the default surface. Once the caller names the
+    // fill, that ink can be the fill itself (dark on the light theme's primary,
+    // near-white on the dark theme's), so the label has to follow the plate.
+    if (!inkFromFill) return color;
+    if (background === colors.primary) return colors.onPrimary;
+    if (background === colors.secondary) return colors.onSecondary;
+    return readableInk(background, colors.text);
+  }
+  return color || background || colors.primary;
 }
 
-function computeBorder(variant, disabled, color, bgColor) {
+function computeBorder(variant, disabled, color, bgColor, borderColor, namesItsOwnFill) {
   if (disabled) return `1px solid ${colors.gray300}`;
   if (variant === "outlined") {
-    const borderColor = color || bgColor || colors.primary;
-    return `2px solid ${borderColor}`;
+    const tint = color || bgColor || colors.primary;
+    return `2px solid ${tint}`;
   }
   if (variant === "text") return "none";
-  return `1px solid ${colors.border}`;
+  // A filled button whose caller named the fill is a colour decision; a neutral
+  // grey ring around it is an edge that belongs to no token and reads as a
+  // rendering bug on the deep variants. A button that names no fill lands on
+  // `colors.surface`, and there the hairline is what keeps the control findable
+  // on a card of the same colour. An explicit `borderColor` always wins.
+  if (borderColor) return `1px solid ${borderColor}`;
+  return namesItsOwnFill ? "none" : `1px solid ${colors.border}`;
 }
 
 function createIcon(name, size, color) {
@@ -120,11 +138,8 @@ function buildButtonChildren(text, textColor, fontSize, gap, iconElements) {
   return children;
 }
 
-function applySpacingToProps(buttonProps, padding, margin) {
-  const normalizedPadding = normalizeSpacing(
-    padding,
-    SIZE_PRESETS.medium.padding,
-  );
+function applySpacingToProps(buttonProps, padding, margin, fallbackPadding) {
+  const normalizedPadding = normalizeSpacing(padding, fallbackPadding);
   const normalizedMargin = normalizeSpacing(margin, undefined);
 
   if (Array.isArray(normalizedPadding)) {
@@ -165,8 +180,8 @@ export const Button = (props) => {
     iconPosition = "left",
     variant = "filled",
     size = "medium",
-    borderRadius = 24,
-    elevation = 2,
+    borderRadius = 16,
+    elevation = null,
     disabled = false,
     fullWidth = false,
     bgColor = colors.surface,
@@ -175,11 +190,34 @@ export const Button = (props) => {
   } = props;
 
   const sizePreset = SIZE_PRESETS[size] || SIZE_PRESETS.medium;
-  const shadow = SHADOW_LEVELS[elevation] || SHADOW_LEVELS[0];
+  // Depth follows the variant: a text or outlined button is not a surface lifted
+  // off the page, and a shadow drawn around a transparent box paints a grey blob
+  // where the label should sit alone. An explicit `elevation` still wins.
+  const lifted = elevation === null ? (variant === "filled" ? 2 : 0) : elevation;
+  const shadow = SHADOW_LEVELS[lifted] || SHADOW_LEVELS[0];
 
   const background = computeBackground(variant, disabled, bgColor, gradient);
-  const textColor = computeTextColor(variant, disabled, color, bgColor);
-  const border = computeBorder(variant, disabled, color, bgColor);
+  // `bgColor` above always has a value (the default is the surface), so whether
+  // the caller chose the fill has to be read off the props, not the local.
+  const namesItsOwnFill =
+    props.bgColor !== undefined ||
+    props.backgroundColor !== undefined ||
+    !!gradient;
+  const textColor = computeTextColor(
+    variant,
+    disabled,
+    color,
+    background,
+    props.color === undefined && namesItsOwnFill,
+  );
+  const border = computeBorder(
+    variant,
+    disabled,
+    color,
+    bgColor,
+    rest.borderColor,
+    namesItsOwnFill,
+  );
 
   const iconNames = resolveIconNames({
     icon,
@@ -216,6 +254,7 @@ export const Button = (props) => {
     justifyContent: "center",
     gap: sizePreset.gap,
     borderRadius,
+    minHeight: sizePreset.minHeight,
     width: fullWidth ? "100%" : "auto",
     backgroundColor: background,
     border,
@@ -231,7 +270,7 @@ export const Button = (props) => {
     ...rest,
   };
 
-  applySpacingToProps(buttonProps, padding, margin);
+  applySpacingToProps(buttonProps, padding, margin, sizePreset.padding);
 
   if (gradient) {
     buttonProps.background = gradient;

package/src/widgets/Card.js

@@ -4,7 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
-import { border } from "../tools/index.js";
+import { border, SHADOW_LEVELS } from "../tools/index.js";
 
 export const Card = (props = {}) => {
   const {
@@ -24,7 +24,11 @@ export const Card = (props = {}) => {
     backgroundColor: bgColor,
     borderRadius: borderRadius,
     padding: padding,
-    elevation: elevation,
+    // The engine routes `elevation` straight into `style.boxShadow`, and CSS drops
+    // a bare number: forwarding it left every card flat, whatever depth was asked
+    // for. Depth is a scale, so the level is read here into a real shadow — and an
+    // explicit `shadow`/`boxShadow` in `rest` still wins over the scale.
+    boxShadow: SHADOW_LEVELS[elevation] ?? SHADOW_LEVELS[2],
     border: showBorder ? border(borderWidth, borderStyle, borderColor) : "none",
     ...rest,
   });

package/src/widgets/Carousel.js

@@ -6,6 +6,8 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const Carousel = (props) => {
   const {
     items = [],
@@ -59,12 +61,12 @@ export const Carousel = (props) => {
         dot.style.backgroundColor = dotActiveColor;
         dot.style.width =
           typeof dotActiveSize === "number"
-            ? `${dotActiveSize}px`
+            ? toREM(dotActiveSize)
             : dotActiveSize;
       } else {
         dot.style.backgroundColor = dotColor;
         dot.style.width =
-          typeof dotSize === "number" ? `${dotSize}px` : dotSize;
+          toREM(dotSize);
       }
     }
   };
@@ -154,8 +156,8 @@ export const Carousel = (props) => {
       cursor: "pointer",
       backgroundColor: buttonBgColor,
       borderRadius: "50%",
-      width: typeof buttonSize === "number" ? `${buttonSize}px` : buttonSize,
-      height: typeof buttonSize === "number" ? `${buttonSize}px` : buttonSize,
+      width: toREM(buttonSize),
+      height: toREM(buttonSize),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
@@ -173,11 +175,11 @@ export const Carousel = (props) => {
   const container = WidgetFactory({
     widgetName: "Carousel",
     position: "relative",
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height,
+    width: toREM(width),
+    height: toREM(height),
     overflow: "hidden",
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     ...rest,
   });
 
@@ -255,12 +257,12 @@ export const Carousel = (props) => {
         width:
           index === currentIndex
             ? typeof dotActiveSize === "number"
-              ? `${dotActiveSize}px`
+              ? toREM(dotActiveSize)
               : dotActiveSize
             : typeof dotSize === "number"
-              ? `${dotSize}px`
+              ? toREM(dotSize)
               : dotSize,
-        height: typeof dotSize === "number" ? `${dotSize}px` : dotSize,
+        height: toREM(dotSize),
         borderRadius: "4px",
         backgroundColor: index === currentIndex ? dotActiveColor : dotColor,
         cursor: "pointer",

package/src/widgets/Chart.js

@@ -42,6 +42,8 @@ import { colors } from "../utils/themes.js";
  * @param {number} [props.borderRadius=8] - Corner radius of the chart container in pixels.
  * @returns {HTMLElement} The chart container element, augmented with `updateData` and `redraw` methods.
  */
+import { toREM } from "../utils/units.js";
+
 export const Chart = (props) => {
   const {
     type = "candle",
@@ -130,6 +132,19 @@ export const Chart = (props) => {
       maxVal = Math.max(...data);
       minVal = Math.min(...data);
     }
+    // Bars are measured from zero: if the scale started at the smallest
+    // value instead, `getYPosition(0)` fell below the axis and every bar
+    // ran past the baseline to the canvas edge, so the bottom label (6)
+    // did not describe where the bars started.
+    if (type === "bar") {
+      maxVal = Math.max(0, maxVal);
+      minVal = Math.min(0, minVal);
+      const barRange = maxVal - minVal || 1;
+      return {
+        maxValue: maxVal + (maxVal > 0 ? barRange * 0.1 : 0),
+        minValue: minVal - (minVal < 0 ? barRange * 0.1 : 0),
+      };
+    }
     const range = maxVal - minVal;
     const paddingRange = range * 0.1;
     return {
@@ -170,8 +185,11 @@ export const Chart = (props) => {
    */
   const drawBar = (ctx, canvasWidth, chartHeight, maxValue, minValue) => {
     const availableWidth = canvasWidth - pad.left - pad.right;
-    const barWidth = (availableWidth / data.length) * 0.7;
-    const barSpacing = (availableWidth / data.length) * 0.3;
+    const bandWidth = availableWidth / data.length;
+    // 70/30 left a gap 43% as wide as the bar; on a wide chart the columns
+    // read as unrelated blocks instead of one series.
+    const barWidth = bandWidth * 0.8;
+    const barSpacing = bandWidth - barWidth;
 
     data.forEach((value, index) => {
       const x = pad.left + index * (barWidth + barSpacing) + barSpacing / 2;
@@ -186,6 +204,11 @@ export const Chart = (props) => {
         ctx.fillStyle = textColor;
         ctx.font = "8px sans-serif";
         ctx.fillText(value, x + barWidth / 2 - 5, y - 2);
+      }
+      // Bars are data points too: `showLabels` used to be ignored here
+      // unless `showValues` was on, so the documented default drew no
+      // x-axis labels at all.
+      if (showLabels && labels[index]) {
         ctx.save();
         ctx.translate(x + barWidth / 2, chartHeight - pad.bottom + 8);
         ctx.rotate(-0.3);
@@ -525,11 +548,11 @@ export const Chart = (props) => {
 
   const container = WidgetFactory({
     widgetName: "Chart",
-    width: typeof width === "number" ? `${width}px` : width,
-    height: typeof height === "number" ? `${height}px` : height,
+    width: toREM(width),
+    height: toREM(height),
     backgroundColor: bgColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     overflow: "hidden",
     display: "flex",
     flexDirection: "column",

package/src/widgets/Checkbox.js

@@ -3,7 +3,9 @@
  * @description Checkbox input with controlled/uncontrolled state.
  */
 import { WidgetFactory } from "../widget-factory/index.js";
+import { Text } from "./Text.js";
 import { colors } from "../utils/themes.js";
+import { TAP_MINIMUM, LABEL_TEXT } from "../tools/index.js";
 
 export const Checkbox = (props) => {
   const {
@@ -13,6 +15,7 @@ export const Checkbox = (props) => {
     disabled = false,
     size = 20,
     activeColor = colors.primary,
+    label = null,
     ...rest
   } = props;
 
@@ -24,45 +27,100 @@ export const Checkbox = (props) => {
   let checkboxRef = null;
   let checkMarkRef = null;
 
+  // The box's "off" rim is a control outline, not a hairline: `colors.border`
+  // measured 1.2:1 on the dark card and 1.3:1 on white, so an unchecked box was
+  // invisible in both themes. `gray500` is the same #71717A in both palettes and
+  // clears the 3:1 non-text minimum on each surface.
+  const offColor = disabled ? colors.border : colors.gray500;
+
   const updateUI = (newChecked) => {
     if (checkboxRef) {
-      checkboxRef.style.backgroundColor = newChecked ? activeColor : "transparent";
-      checkboxRef.style.border = `2px solid ${newChecked ? activeColor : colors.border}`;
+      checkboxRef.style.border = `2px solid ${newChecked ? activeColor : offColor}`;
     }
     if (checkMarkRef) {
       checkMarkRef.style.display = newChecked ? "inline-block" : "none";
     }
   };
 
-  // Createste checkmark
+  // The tick is drawn inside the frame, in the active colour: a filled plate
+  // would hide the border the box is supposed to show, and the theme ink it used
+  // to carry (white in light, near-black in dark) only read on that plate.
   const checkMark = WidgetFactory({
     tag: "span",
     textContent: "✓",
-    color: "#fff",
-    fontSize: size * 0.7,
+    color: disabled ? colors.textDisabled : activeColor,
+    fontSize: Math.max(12, Math.round(size * 0.65)),
     fontWeight: "bold",
+    lineHeight: 1,
     display: internalChecked ? "inline-block" : "none",
   });
   checkMarkRef = checkMark;
 
-  // Createste main checkbox container
-  const checkbox = WidgetFactory({
-    widgetName: "Checkbox",
+  // The visual square. Everything drawn lives here, so the box below can be the
+  // finger's target without becoming a 40-unit checkbox.
+  const box = WidgetFactory({
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalChecked ? activeColor : colors.border}`,
-    borderRadius: 6,
-    backgroundColor: internalChecked ? activeColor : "transparent",
+    border: `2px solid ${disabled ? colors.border : internalChecked ? activeColor : offColor}`,
+    borderRadius: 0,
+    backgroundColor: "transparent",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     transition: "all 0.2s ease",
-    cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
+    boxSizing: "border-box",
     child: checkMark,
-    ...rest,
   });
-  checkboxRef = checkbox;
+  checkboxRef = box;
+
+  // Createste main checkbox container
+  //
+  // The overhang is given back with a negative margin. A 40-unit box in the
+  // layout next to a label stretched the row to 40 and left the text at the top
+  // of it, so the box sat ~10 units below the words and the requested `gap` was
+  // silently doubled. The press still lands on the full 40-unit box, which now
+  // overflows its layout footprint instead of pushing the row around it.
+  const overhang = Math.max(0, (TAP_MINIMUM - size) / 2);
+
+  // A `label` is part of the control, not a caption beside it: the whole row is
+  // pressable. It also cannot reach the factory as a flat prop, which would set
+  // the root's `textContent` and wipe the box it is supposed to describe.
+  const isLabelled = label !== null && label !== undefined && label !== "";
+
+  const rootProps = {
+    widgetName: "Checkbox",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: isLabelled ? "flex-start" : "center",
+    gap: isLabelled ? 12 : undefined,
+    minWidth: isLabelled ? undefined : TAP_MINIMUM,
+    minHeight: TAP_MINIMUM,
+    margin: isLabelled ? 0 : -overhang,
+    flexShrink: 0,
+    cursor: disabled ? "not-allowed" : "pointer",
+    opacity: disabled ? 0.5 : 1,
+    child: isLabelled
+      ? [
+          box,
+          Text({
+            text: label,
+            size: LABEL_TEXT,
+            fontWeight: 500,
+            color: disabled ? colors.textDisabled : colors.text,
+          }),
+        ]
+      : box,
+  };
+
+  // Pressing the words must not scale the words. The box on its own keeps the
+  // default press feedback, because there the root *is* the control.
+  if (isLabelled) rootProps.disableTransform = true;
+
+  const checkbox = WidgetFactory({ ...rootProps, ...rest });
+
+  // Inline usage (a checkbox dropped mid-paragraph) would otherwise
+  // baseline-align the box's bottom edge and lift the square above the text.
+  checkbox.style.verticalAlign = "middle";
 
   // Handle click
   if (!disabled) {
@@ -80,19 +138,19 @@ export const Checkbox = (props) => {
     // padding…) calls update — leaving the control unable to toggle ever again.
     checkbox.update({ onPress: handleClick });
 
-    // Hover effect
+    // Hover effect — on the drawn square, not the whole labelled row.
     checkbox.addEventListener("mouseenter", () => {
       if (!disabled && !internalChecked) {
         // `color-mix` rather than `activeColor + "20"`: that string concat only
         // produced a valid color for `#rrggbb` hexes and silently broke on
         // `rgba()`, named colors and 3-digit hex `activeColor` values.
-        checkbox.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
+        box.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
       }
     });
 
     checkbox.addEventListener("mouseleave", () => {
       if (!disabled && !internalChecked) {
-        checkbox.style.backgroundColor = "transparent";
+        box.style.backgroundColor = "transparent";
       }
     });
   }

package/src/widgets/Chip.js

@@ -10,6 +10,7 @@ import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
+import { PILL, TAP_MINIMUM } from "../tools/index.js";
 
 /**
  * Creates a Chip widget — a small interactive label commonly used for tags,
@@ -22,10 +23,10 @@ import { colors } from "../utils/themes.js";
  * @param {Function} [props.onDelete] - When provided, renders a close ("×") icon on the right side of the chip. Called when that icon is clicked.
  * @param {'filled'|'outlined'} [props.variant='filled'] - Visual style. 'filled' uses a solid background; 'outlined' uses a transparent background with a border.
  * @param {string} [props.color=colors.primary] - Chip accent color: used as the background (filled) or border/text (outlined).
- * @param {string} [props.textColor] - Explicit text color override. Defaults to '#fff' (filled) or `color` (outlined).
+ * @param {string} [props.textColor] - Explicit text color override. Defaults to `colors.onPrimary` (filled) or `color` (outlined).
  * @param {string} [props.borderColor] - Explicit border color override (outlined variant only). Defaults to `color`.
- * @param {number} [props.borderRadius=32] - Corner radius in pixels. High values produce a pill shape.
- * @param {string} [props.padding='4px 12px'] - Internal padding of the chip row.
+ * @param {number} [props.borderRadius=999] - Corner radius in framework units (converted to `rem`). The default clamps to a pill.
+ * @param {number|string} [props.padding] - Internal padding. A number is a uniform gutter (doubled horizontally); omitted it is 4 vertical x 12 horizontal, in framework units.
  * @param {number} [props.gap=4] - Gap in pixels between icon, label, and delete icon.
  * @param {number} [props.size=12] - Font size in pixels. Also scales the icons proportionally.
  * @param {number} [props.elevation=0] - Box-shadow depth. 0 means no shadow.
@@ -41,14 +42,26 @@ export const Chip = (props) => {
     color = colors.primary,
     textColor,
     borderColor,
-    borderRadius = 32,
-    padding = "4px 12px",
+    borderRadius = PILL,
+    padding,
     gap = 4,
     size = 12,
     elevation = 0,
     ...rest
   } = props;
 
+  /**
+   * `4px 12px` as a literal string reaches the factory as raw CSS and freezes
+   * there: the chip's type grew with the reader's font and its gutters did not.
+   * Numbers go through `toREM` instead, and the pair is on the spacing scale.
+   */
+  const chipPadding =
+    padding === undefined
+      ? { paddingVertical: 4, paddingHorizontal: 12 }
+      : typeof padding === "number"
+        ? { paddingVertical: padding, paddingHorizontal: padding * 2 }
+        : { padding };
+
   // Derive background, text, and border colors from the variant
   let bgColor, txtColor, brdColor;
 
@@ -58,7 +71,10 @@ export const Chip = (props) => {
     brdColor = borderColor || color;
   } else {
     bgColor = color;
-    txtColor = textColor || "#fff";
+    // The label sits on the primary plate, so its ink is the theme's, not a
+    // literal white: in dark mode a primary chip is near-white and white words
+    // would vanish.
+    txtColor = textColor || colors.onPrimary;
     brdColor = "transparent";
   }
 
@@ -88,7 +104,7 @@ export const Chip = (props) => {
   if (onDelete) {
     const closeIcon = Icon({
       name: "close",
-      size: size - 2,
+      size: Math.max(12, size - 2),
       color: txtColor,
       cursor: "pointer",
       onclick: (e) => {
@@ -106,7 +122,7 @@ export const Chip = (props) => {
     backgroundColor: bgColor,
     border: variant === "outlined" ? `1px solid ${brdColor}` : "none",
     borderRadius: borderRadius,
-    padding: padding,
+    ...chipPadding,
     width: "fit-content",
     minWidth: "auto",
     boxShadow:
@@ -116,10 +132,15 @@ export const Chip = (props) => {
     children: children,
   });
 
-  // Outer wrapper element enables the onclick without styling conflicts
+  // Outer wrapper element enables the onclick without styling conflicts.
+  // A chip you can press or dismiss is a target, so the wrapper carries the
+  // Fitts floor while the pill inside keeps its compact 23-unit height.
   const chip = WidgetFactory({
     widgetName: "Chip",
-    display: "inline-block",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...(onPress || onDelete ? { minHeight: TAP_MINIMUM } : {}),
     cursor: onPress ? "pointer" : "default",
     transition: "all 0.2s ease",
     child: chipContent,

package/src/widgets/CircularBar.js

@@ -85,13 +85,13 @@ export const CircularBar = (props) => {
 
   const updateCanvasSize = () => {
     if (!canvas) return;
-    let width;
-    if (isFixedSize) width = fixedSize;
-    else {
-      const rect = container.getBoundingClientRect();
-      width = rect.width;
-      if (width <= 0) width = 200;
-    }
+    // The box is routed through rem, so a fixed `size: 120` paints 180px wide
+    // when the reader's base font is 24. The drawing buffer has to follow that
+    // rendered box, not the number the developer wrote, or the ring grows and
+    // turns soft. The number is only the fallback for a node with no layout yet.
+    const measured = container.getBoundingClientRect().width;
+    const width =
+      measured > 0 ? measured : isFixedSize ? fixedSize : 200;
     canvas.width = width;
     canvas.height = width;
     currentWidth = width;