flet-box 1.0.7 → 1.0.9

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;

package/src/widgets/CircularChart.js

@@ -4,6 +4,9 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { readableInk } from "../utils/readableInk.js";
+
+import { toREM } from "../utils/units.js";
 
 export const CircularChart = (props) => {
   let {
@@ -21,7 +24,10 @@ export const CircularChart = (props) => {
     centerContent = null,
     showLabels = false,
     labelSize = 12,
-    labelColor = colors.text,
+    // Unset by default: every slice has its own fill, and the theme's ink is
+    // the same colour as the primary slice in both palettes, so the label has
+    // to be chosen against the slice it sits on (see `labelInk`).
+    labelColor = null,
     onClick = null,
     onHover = null,
     defaultColors = [
@@ -42,7 +48,7 @@ export const CircularChart = (props) => {
     borderColor = null,
     borderWidth = 0,
     sliceBorderWidth = 0,
-    sliceBorderColor = "#ffffff",
+    sliceBorderColor = colors.card,
     ...rest
   } = props;
 
@@ -117,10 +123,15 @@ export const CircularChart = (props) => {
   const updateCanvasSize = () => {
     if (!canvas) return;
     if (isFixedSize) {
-      canvas.width = canvasWidth;
-      canvas.height = canvasHeight;
-      currentWidth = canvasWidth;
-      currentHeight = canvasHeight;
+      // The box is routed through rem, so `size: 160` is 240px wide for a reader
+      // on a 24px base font. The buffer has to follow the rendered box or the
+      // chart grows and turns soft; the numbers are the fallback for a node
+      // that has no layout yet.
+      const { width, height } = container.getBoundingClientRect();
+      canvas.width = width > 0 ? width : canvasWidth;
+      canvas.height = height > 0 ? height : canvasHeight;
+      currentWidth = canvas.width;
+      currentHeight = canvas.height;
     } else {
       const rect = container.getBoundingClientRect();
       let w = rect.width;
@@ -192,6 +203,13 @@ export const CircularChart = (props) => {
     return defaultColors[index % defaultColors.length];
   };
 
+  const labelInk = (fill) => {
+    if (labelColor) return labelColor;
+    if (fill === colors.primary) return colors.onPrimary;
+    if (fill === colors.secondary) return colors.onSecondary;
+    return readableInk(fill, colors.text);
+  };
+
   // Draw each segment with rounded ends (each one with its own color)
   const drawRoundedSegment = (slice, index) => {
     const r = getRadiusVal() / 2;
@@ -269,7 +287,7 @@ export const CircularChart = (props) => {
       const x = cx + labelRadius * Math.cos(midAngle);
       const y = cy + labelRadius * Math.sin(midAngle);
       ctx.font = `${labelSize}px system-ui`;
-      ctx.fillStyle = labelColor;
+      ctx.fillStyle = labelInk(color);
       ctx.shadowBlur = 0;
       const percent = Math.round(
         (slice.value / (slice.end - slice.start)) * 100,
@@ -463,7 +481,7 @@ export const CircularChart = (props) => {
       position: "relative",
       overflow: "hidden",
       borderRadius:
-        typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+        toREM(borderRadius),
       border:
         borderWidth > 0 && borderColor
           ? `${borderWidth}px solid ${borderColor}`

package/src/widgets/CodeViewer.js

@@ -5,7 +5,10 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
-import { generateHighlightedHtml } from "../utils/syntaxHighlight.js";
+import { generateHighlightedHtml, syntaxPaletteFor } from "../utils/syntaxHighlight.js";
+import { clipboard } from "../tools/clipboard.js";
+
+import { toREM } from "../utils/units.js";
 
 export const CodeViewer = (props) => {
   const {
@@ -20,22 +23,32 @@ code = "",
     showLineNumbers = false,
     startingLineNumber = 1,
     lineNumberWidth = 40,
-    lineNumberColor = colors.secondary,
+    lineNumberColor,
     ...rest
   } = props;
 
+  // The token map follows the block's own surface: the light theme's #F4F4F5
+  // pane needs the light map, and a caller that paints a dark pane on the light
+  // theme still gets spans that read.
+  const syntaxPalette = syntaxPaletteFor(backgroundColor);
+  // The gutter is not a token: it takes the muted ink of the pane's palette, so
+  // a custom pane does not get the page theme's grey on top of it.
+  const gutterInk = lineNumberColor || syntaxPalette.muted;
+
   let currentCode =
     typeof code === "string" ? code : JSON.stringify(code, null, 2);
   let currentTitle = title;
   let headerRef = null;
+  let headerTitleRef = null;
   let scrollWrapperRef = null;
   let lineNumbersColRef = null;
   let codeColRef = null;
   let codeWrapperRef = null;
+  let copyResetTimer = null;
 
   const refreshContent = () => {
     const lines = currentCode.split("\n");
-    const highlightedLines = lines.map((line) => generateHighlightedHtml(line));
+    const highlightedLines = lines.map((line) => generateHighlightedHtml(line, syntaxPalette));
 
     if (showLineNumbers) {
       // Update line numbers
@@ -44,7 +57,7 @@ code = "",
         for (let i = 0; i < lines.length; i++) {
           const numberDiv = WidgetFactory({
             tag: "div",
-            padding: `0 ${padding / 2}px 0 ${padding}px`,
+            padding: `0 ${toREM(padding / 2)} 0 ${toREM(padding)}`,
             whiteSpace: "pre",
             textContent: String(startingLineNumber + i),
           });
@@ -79,28 +92,86 @@ code = "",
     width: "100%",
     display: "flex",
     flexDirection: "column",
+    position: "relative",
     ...rest,
   });
 
+  // The copy button carries its own solid plate, so it reads on the primary
+  // header and on any caller-painted pane, and it never relies on the page ink.
+  const copyButtonRef = WidgetFactory({
+    tag: "button",
+    type: "button",
+    textContent: "Copy",
+    backgroundColor: colors.card,
+    color: colors.text,
+    border: `1px solid ${colors.border}`,
+    borderRadius: 6,
+    padding: "2px 8px",
+    fontFamily: "monospace",
+    fontSize: 11,
+    lineHeight: "1.6",
+    flexShrink: 0,
+    cursor: "pointer",
+    onclick: () => {
+      clipboard.copy(currentCode);
+      copyButtonRef.textContent = "Copied";
+      clearTimeout(copyResetTimer);
+      copyResetTimer = setTimeout(() => {
+        copyButtonRef.textContent = "Copy";
+      }, 1500);
+    },
+  });
+
+  // Inside the header when there is one; floating over the block otherwise.
+  const attachCopyButton = () => {
+    if (headerRef) {
+      copyButtonRef.style.position = "";
+      copyButtonRef.style.top = "";
+      copyButtonRef.style.right = "";
+      copyButtonRef.style.zIndex = "";
+      headerRef.appendChild(copyButtonRef);
+    } else {
+      copyButtonRef.style.position = "absolute";
+      copyButtonRef.style.top = toREM(8);
+      copyButtonRef.style.right = toREM(8);
+      copyButtonRef.style.zIndex = "3";
+      container.appendChild(copyButtonRef);
+    }
+  };
+
   // Header. Built through a helper so a later `title` update can create one on a
   // widget that was constructed without it.
   const ensureHeader = (text) => {
     if (!showHeader || !text) return null;
     if (headerRef) {
-      headerRef.textContent = text;
+      headerTitleRef.textContent = text;
       return headerRef;
     }
     headerRef = WidgetFactory({
       tag: "div",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 8,
       padding: "8px 12px",
       backgroundColor: colors.primary,
-      borderRadius: `${borderRadius}px ${borderRadius}px 0 0`,
-      color: "#fff",
+      borderRadius: `${toREM(borderRadius)} ${toREM(borderRadius)} 0 0`,
+      // The header is a primary plate; in dark mode that plate is near-white,
+      // so a literal white title disappeared into it.
+      color: colors.onPrimary,
       fontSize: "14px",
       fontWeight: "bold",
+    });
+    headerTitleRef = WidgetFactory({
+      tag: "span",
       textContent: text,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
     });
+    headerRef.appendChild(headerTitleRef);
     container.insertBefore(headerRef, container.firstChild);
+    attachCopyButton();
     return headerRef;
   };
   ensureHeader(currentTitle);
@@ -110,10 +181,10 @@ code = "",
     tag: "div",
     backgroundColor,
     borderRadius: currentTitle
-      ? `0 0 ${borderRadius}px ${borderRadius}px`
-      : `${borderRadius}px`,
+      ? `0 0 ${toREM(borderRadius)} ${toREM(borderRadius)}`
+      : toREM(borderRadius),
     overflow: "auto",
-    maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
+    maxHeight: toREM(maxHeight),
     overflowX: "auto",
     overflowY: "auto",
   });
@@ -132,22 +203,22 @@ code = "",
       tag: "div",
       backgroundColor,
       borderRight: `1px solid ${colors.border}`,
-      padding: `${padding}px 0`,
+      padding: `${toREM(padding)} 0`,
       fontFamily: "monospace",
-      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      fontSize: toREM(fontSize),
       lineHeight: "1.5",
       textAlign: "right",
-      color: lineNumberColor,
+      color: gutterInk,
       userSelect: "none",
-      width: `${lineNumberWidth}px`,
+      width: toREM(lineNumberWidth),
       flexShrink: 0,
     });
 
     codeColRef = WidgetFactory({
       tag: "div",
-      padding: `${padding}px`,
+      padding: toREM(padding),
       fontFamily: "monospace",
-      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      fontSize: toREM(fontSize),
       lineHeight: "1.5",
       whiteSpace: "pre",
       flex: 1,
@@ -170,9 +241,9 @@ code = "",
   } else {
     codeWrapperRef = WidgetFactory({
       tag: "div",
-      padding: typeof padding === "number" ? `${padding}px` : padding,
+      padding: toREM(padding),
       fontFamily: "monospace",
-      fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+      fontSize: toREM(fontSize),
       whiteSpace: "pre",
       lineHeight: "1.5",
     });
@@ -180,16 +251,18 @@ code = "",
   }
 
   container.appendChild(scrollWrapperRef);
+  if (!headerRef) attachCopyButton();
+  container.onUnmount(() => clearTimeout(copyResetTimer));
 
   // Fill initial content
   const lines = currentCode.split("\n");
-  const highlightedLines = lines.map((line) => generateHighlightedHtml(line));
+  const highlightedLines = lines.map((line) => generateHighlightedHtml(line, syntaxPalette));
 
   if (showLineNumbers) {
     for (let i = 0; i < lines.length; i++) {
       const numberDiv = WidgetFactory({
         tag: "div",
-        padding: `0 ${padding / 2}px 0 ${padding}px`,
+        padding: `0 ${toREM(padding / 2)} 0 ${toREM(padding)}`,
         whiteSpace: "pre",
         textContent: String(startingLineNumber + i),
       });