flet-box 1.0.7 → 1.0.9

package/src/widgets/DataTable.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const DataTable = (props) => {
   const {
     columns,
@@ -22,7 +24,7 @@ export const DataTable = (props) => {
 
     rowBgColor = "transparent",
     rowTextColor = colors.text,
-    rowFontSize = 13,
+    rowFontSize = 14,
 
     stripedRowBgColor = colors.gray50,
 
@@ -31,8 +33,12 @@ export const DataTable = (props) => {
     borderColor = colors.border,
     borderWidth = 1,
 
-    cellPadding = "10px 12px",
-    headerCellPadding = "12px",
+    // A padding the caller can hand as `8`, `"8px 12px"` or `"1rem"`: every
+    // write below goes through toREM, which scales the first two and leaves the
+    // third alone. Written straight to `style`, a bare number is an invalid CSS
+    // value the browser drops, and a string is a frozen pixel.
+    cellPadding = "8px 12px",
+    headerCellPadding = 12,
 
     // ========== OTHER PROPS ==========
     ...rest
@@ -61,7 +67,7 @@ export const DataTable = (props) => {
   for (const col of columns) {
     const th = document.createElement("th");
     th.textContent = typeof col === "string" ? col : col.label;
-    th.style.padding = headerCellPadding;
+    th.style.padding = toREM(headerCellPadding);
     th.style.textAlign = "left";
     th.style.borderBottom = `2px solid ${borderColor}`;
     th.style.backgroundColor = headerBgColor;
@@ -69,7 +75,7 @@ export const DataTable = (props) => {
     th.style.fontWeight = headerFontWeight;
     th.style.fontSize =
       typeof headerFontSize === "number"
-        ? `${headerFontSize}px`
+        ? toREM(headerFontSize)
         : headerFontSize;
 
     // Custom alignment per column
@@ -122,11 +128,11 @@ export const DataTable = (props) => {
       const value = row[key];
 
       td.textContent = value !== undefined ? String(value) : "";
-      td.style.padding = cellPadding;
+      td.style.padding = toREM(cellPadding);
       td.style.borderBottom = `${borderWidth}px solid ${borderColor}`;
       td.style.color = rowTextColor;
       td.style.fontSize =
-        typeof rowFontSize === "number" ? `${rowFontSize}px` : rowFontSize;
+        toREM(rowFontSize);
 
       // Custom alignment per column
       if (typeof col !== "string" && col.align) {
@@ -195,11 +201,11 @@ export const DataTable = (props) => {
         const value = row[key];
 
         td.textContent = value !== undefined ? String(value) : "";
-        td.style.padding = cellPadding;
+        td.style.padding = toREM(cellPadding);
         td.style.borderBottom = `${borderWidth}px solid ${borderColor}`;
         td.style.color = rowTextColor;
         td.style.fontSize =
-          typeof rowFontSize === "number" ? `${rowFontSize}px` : rowFontSize;
+          toREM(rowFontSize);
 
         if (typeof col !== "string" && col.align) {
           td.style.textAlign = col.align;
@@ -236,7 +242,7 @@ export const DataTable = (props) => {
     for (const col of newColumns) {
       const th = document.createElement("th");
       th.textContent = typeof col === "string" ? col : col.label;
-      th.style.padding = headerCellPadding;
+      th.style.padding = toREM(headerCellPadding);
       th.style.textAlign = "left";
       th.style.borderBottom = `2px solid ${borderColor}`;
       th.style.backgroundColor = headerBgColor;
@@ -244,7 +250,7 @@ export const DataTable = (props) => {
       th.style.fontWeight = headerFontWeight;
       th.style.fontSize =
         typeof headerFontSize === "number"
-          ? `${headerFontSize}px`
+          ? toREM(headerFontSize)
           : headerFontSize;
 
       if (typeof col !== "string" && col.align) {

package/src/widgets/DraggBox.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 
 export const DraggBox = (props) => {
   const {
@@ -53,7 +54,7 @@ export const DraggBox = (props) => {
     clone.style.zIndex = "99999";
     clone.style.backgroundColor = dragOverlayColor;
     clone.style.border = `2px dashed ${dragBorderColor}`;
-    clone.style.borderRadius = "8px";
+    clone.style.borderRadius = toREM(8);
     document.body.appendChild(clone);
     return clone;
   };

package/src/widgets/Dropdown.js

@@ -12,6 +12,8 @@ import { Row } from "./Row.js";
 import { Column } from "./Column.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 
 /**
  * Props owned by the Dropdown's closure state. Routed to the widget's `update`
@@ -97,10 +99,12 @@ export const Dropdown = (inputProps = {}) => {
   let resizeListener = null;
   let scrollListener = null;
 
+  /** [vertical, horizontal] in framework units — see `Input`: a `"8px 14px"`
+   *  string is raw CSS and stops the field growing with the reader's font. */
   const sizes = {
-    small: { padding: "6px 12px", fontSize: 12 },
-    medium: { padding: "8px 14px", fontSize: 14 },
-    large: { padding: "12px 16px", fontSize: 16 },
+    small: { padding: [4, 12], fontSize: 12, minHeight: 32 },
+    medium: { padding: [8, 12], fontSize: 14, minHeight: TAP_MINIMUM },
+    large: { padding: [12, 16], fontSize: 16, minHeight: 48 },
   };
   let currentSize = sizes[size] || sizes.medium;
 
@@ -197,14 +201,16 @@ export const Dropdown = (inputProps = {}) => {
     alignItems: "center",
     justifyContent: "space-between",
     width: "100%",
-    padding: currentSize.padding,
+    paddingVertical: currentSize.padding[0],
+    paddingHorizontal: currentSize.padding[1],
+    minHeight: currentSize.minHeight,
     backgroundColor:
       currentVariant === "filled" ? `${currentBgColor}CC` : "transparent",
     border:
       currentVariant === "outlined"
         ? `1px solid ${currentError ? colors.danger : colors.border}`
         : "none",
-    borderRadius: `${currentBorderRadius}px`,
+    borderRadius: currentBorderRadius,
     cursor: currentDisabled ? "not-allowed" : "pointer",
     opacity: currentDisabled ? 0.5 : 1,
     boxSizing: "border-box",
@@ -236,11 +242,15 @@ export const Dropdown = (inputProps = {}) => {
     ],
   });
 
-  // Main container
+  // The root must not paint a surface: only the selector does, and an
+  // `outlined` selector is deliberately transparent. Container's default
+  // background otherwise showed through behind the label as a full-width
+  // block, and painted the outlined field as if it were filled.
   const container = Container({
     widgetName: "Dropdown",
     position: "relative",
     width: width,
+    bgColor: "transparent",
     ...rest,
   });
 
@@ -248,9 +258,9 @@ export const Dropdown = (inputProps = {}) => {
     const labelEl = WidgetFactory({
       tag: "label",
       textContent: currentLabel,
-      fontSize: "12px",
+      fontSize: 12,
       color: currentError ? colors.danger : colors.textSecondary,
-      marginBottom: "4px",
+      marginBottom: 4,
       display: "block",
     });
     container.appendChild(labelEl);
@@ -318,7 +328,7 @@ export const Dropdown = (inputProps = {}) => {
       zIndex: 10000,
       border: `1px solid ${colors.border}`,
       backgroundColor: currentBgColor,
-      borderRadius: `${currentBorderRadius}px`, // same borderRadius
+      borderRadius: currentBorderRadius, // same borderRadius
       boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
       maxHeight: "250px",
       overflowY: "auto",
@@ -348,12 +358,14 @@ export const Dropdown = (inputProps = {}) => {
       );
 
       const optionItem = Row({
-        padding: "10px 16px",
+        paddingVertical: 8,
+        paddingHorizontal: 12,
+        minHeight: TAP_MINIMUM,
         cursor: "pointer",
         backgroundColor: isSelected ? currentColor + "15" : "transparent",
         alignItems: "center",
         justifyContent: "space-between",
-        gap: "8px",
+        gap: 8,
         children: [
           Row({
             alignItems: "center",
@@ -496,8 +508,9 @@ export const Dropdown = (inputProps = {}) => {
     }
     if (needsDisplayUpdate) {
       updateDisplay();
-      selector.style.padding = currentSize.padding;
-      selector.style.borderRadius = `${currentBorderRadius}px`;
+      selector.style.padding = `${toREM(currentSize.padding[0])} ${toREM(currentSize.padding[1])}`;
+      selector.style.minHeight = toREM(currentSize.minHeight);
+      selector.style.borderRadius = toREM(currentBorderRadius);
       if (currentVariant === "outlined")
         selector.style.border = `1px solid ${currentError ? colors.danger : colors.border}`;
       else selector.style.border = "none";

package/src/widgets/DroppBox.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const DroppBox = (props) => {
   const {
     child,
@@ -58,12 +60,12 @@ export const DroppBox = (props) => {
     transition: `all ${transitionDuration} ${transitionTiming}`,
     backgroundColor: bgColor,
     borderRadius:
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+      toREM(borderRadius),
     borderWidth: `${borderWidth}px`,
     borderStyle: borderStyle,
     borderColor: borderColor,
     boxShadow: shadow,
-    padding: typeof padding === "number" ? `${padding}px` : padding,
+    padding: toREM(padding),
     ...rest,
   });
 

package/src/widgets/FloatingActionButton.js

@@ -7,6 +7,8 @@ import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { SHADOW_LEVELS, PILL } from "../tools/index.js";
 
 export const FloatingActionButton = (props) => {
   const {
@@ -14,9 +16,11 @@ export const FloatingActionButton = (props) => {
     label,
     onPress,
     backgroundColor = colors.primary,
-    foregroundColor = "#ffffff",
-    elevation = 6,
-    borderRadius = 48,
+    foregroundColor = colors.onPrimary,
+    // Depth is the 0-5 scale, like every other widget; 6 was a number the scale
+    // does not have, which only worked because this widget built its own string.
+    elevation = 4,
+    borderRadius = PILL,
     padding = 12,
     mini = false,
     extended = false,
@@ -24,7 +28,9 @@ export const FloatingActionButton = (props) => {
     ...rest
   } = props;
 
-  const size = mini ? 40 : 56;
+  // 48 and 40 are both scale steps, and both clear the Fitts floor: the mini FAB
+  // sits exactly on it, which is as small as a floating target may get.
+  const size = mini ? 40 : 48;
   const iconSize = mini ? 20 : 24;
 
   const children = [
@@ -58,14 +64,14 @@ export const FloatingActionButton = (props) => {
     gap: 8,
     width: extended ? "auto" : size,
     height: size,
-    borderRadius: extended ? "24px" : "50%",
+    borderRadius: extended ? borderRadius : "50%",
     backgroundColor: backgroundColor,
     color: foregroundColor,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.6 : 1,
-    boxShadow: `0 ${elevation / 2}px ${elevation}px rgba(0,0,0,0.3)`,
+    boxShadow: SHADOW_LEVELS[elevation] ?? SHADOW_LEVELS[4],
     transition: "all 0.2s ease",
-    padding: extended ? "0 20px" : 0,
+    padding: extended ? `0 ${toREM(16)}` : 0,
     child: extended
       ? Row({ alignItems: "center", gap: 8, children })
       : children[0],

package/src/widgets/Icon.js

@@ -5,6 +5,8 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const Icon = (props) => {
   const {
     icon,
@@ -20,7 +22,7 @@ export const Icon = (props) => {
     widgetName: "Icon",
     className: "material-icons",
     text: iconName, // ✅ CHANGED: text instead of textContent
-    fontSize: typeof size === "number" ? `${size}px` : size,
+    fontSize: toREM(size),
     color: color,
     display: "inline-flex",
     alignItems: "center",

package/src/widgets/Input.js

@@ -4,6 +4,8 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
 import { Icon } from "./Icon.js";
 import { TextInputValidator } from "../utils/TextInputValidator.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
@@ -76,7 +78,7 @@ export const Input = (props) => {
     size = "medium",
     variant = "outlined",
     fullWidth = false,
-    borderRadius = 24,
+    borderRadius = 16,
 
     iconLeft,
     iconRight,
@@ -131,11 +133,17 @@ export const Input = (props) => {
   const isFocused = () => document.activeElement === inputElement;
 
   // ========== SIZES ==========
-  // Maps the `size` prop to concrete CSS values so the rest of the code stays size-agnostic.
+  /**
+   * Framework units, not CSS strings: this widget builds a real `<input>` and
+   * writes `style.*` by hand, so every length here goes through `toREM` at the
+   * point of use. Written as `"10px 14px"` the field froze at 16px base and the
+   * reader who raises their font got small text inside a control that should have
+   * grown with it. `minHeight` is the Fitts floor — a text field is a target.
+   */
   const sizes = {
-    small: { padding: "6px 12px", fontSize: "12px", iconSize: 16 },
-    medium: { padding: "10px 14px", fontSize: "14px", iconSize: 20 },
-    large: { padding: "14px 18px", fontSize: "16px", iconSize: 24 },
+    small: { padding: [4, 12], fontSize: 12, iconSize: 16, minHeight: 32 },
+    medium: { padding: [8, 12], fontSize: 14, iconSize: 20, minHeight: TAP_MINIMUM },
+    large: { padding: [12, 16], fontSize: 16, iconSize: 24, minHeight: 48 },
   };
   const sz = sizes[size] || sizes.medium;
 
@@ -350,7 +358,7 @@ export const Input = (props) => {
       fontSize: 12,
       fontWeight: 500,
       color: error ? colors.danger : colors.textSecondary,
-      marginBottom: 2,
+      marginBottom: 4,
       cursor: "text",
     });
     // Clicking the label focuses the native input — mirrors native <label for> behavior
@@ -387,8 +395,7 @@ export const Input = (props) => {
 
   if (variant === "filled") {
     wrapperStyles.backgroundColor = colors.gray100;
-    wrapperStyles.borderRadius =
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    wrapperStyles.borderRadius = toREM(borderRadius);
     wrapperStyles.border = "none";
   } else if (variant === "underlined") {
     wrapperStyles.backgroundColor = "transparent";
@@ -397,8 +404,7 @@ export const Input = (props) => {
   } else {
     // Default: outlined
     wrapperStyles.backgroundColor = "transparent";
-    wrapperStyles.borderRadius =
-      typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    wrapperStyles.borderRadius = toREM(borderRadius);
     wrapperStyles.border = `1px solid ${error ? colors.danger : colors.border}`;
   }
 
@@ -414,7 +420,7 @@ export const Input = (props) => {
       name: iconLeft,
       size: iconSize || sz.iconSize,
       color: iconColor,
-      marginLeft: "12px",
+      marginLeft: 12,
       flexShrink: 0,
       pointerEvents: "auto",
     });
@@ -436,8 +442,9 @@ export const Input = (props) => {
   inputElement.value = currentValue;
 
   inputElement.style.flex = "1";
-  inputElement.style.padding = sz.padding;
-  inputElement.style.fontSize = sz.fontSize;
+  inputElement.style.padding = `${toREM(sz.padding[0])} ${toREM(sz.padding[1])}`;
+  inputElement.style.fontSize = toREM(sz.fontSize);
+  inputElement.style.minHeight = toREM(sz.minHeight);
   inputElement.style.border = "none";
   inputElement.style.outline = "none";
   inputElement.style.backgroundColor = "transparent";
@@ -505,15 +512,15 @@ export const Input = (props) => {
     btn.type = "button";
     btn.textContent = glyph;
     btn.setAttribute("aria-label", label);
-    btn.style.width = "28px";
-    btn.style.height = "28px";
+    btn.style.width = toREM(32);
+    btn.style.height = toREM(32);
     btn.style.flexShrink = "0";
-    btn.style.marginRight = "6px";
+    btn.style.marginRight = toREM(4);
     btn.style.padding = "0";
     btn.style.border = "none";
     btn.style.background = "transparent";
     btn.style.color = colors.textSecondary;
-    btn.style.fontSize = "15px";
+    btn.style.fontSize = toREM(16);
     btn.style.lineHeight = "1";
     btn.style.cursor = disabled ? "not-allowed" : "pointer";
     btn.style.display = "flex";
@@ -564,12 +571,12 @@ export const Input = (props) => {
   if (showValidationIcon && validation !== "none") {
     validationIcon = document.createElement("span");
     validationIcon.textContent = "";
-    validationIcon.style.width = "24px";
-    validationIcon.style.fontSize = "16px";
+    validationIcon.style.width = toREM(24);
+    validationIcon.style.fontSize = toREM(16);
     validationIcon.style.display = "none";
     validationIcon.style.alignItems = "center";
     validationIcon.style.justifyContent = "center";
-    validationIcon.style.marginRight = "8px";
+    validationIcon.style.marginRight = toREM(8);
     validationIcon.style.flexShrink = "0";
     inputWrapper.appendChild(validationIcon);
   }
@@ -580,7 +587,7 @@ export const Input = (props) => {
       name: iconRight,
       size: iconSize || sz.iconSize,
       color: iconColor,
-      marginRight: "12px",
+      marginRight: 12,
       flexShrink: 0,
       pointerEvents: "auto",
     });
@@ -593,9 +600,9 @@ export const Input = (props) => {
   // --- Error message element rendered below the input ---
   errorMessageElement = document.createElement("span");
   errorMessageElement.textContent = "";
-  errorMessageElement.style.fontSize = "11px";
+  errorMessageElement.style.fontSize = toREM(12);
   errorMessageElement.style.color = colors.danger;
-  errorMessageElement.style.marginTop = "2px";
+  errorMessageElement.style.marginTop = toREM(4);
   errorMessageElement.style.display = "none";
   container.appendChild(errorMessageElement);
 

package/src/widgets/Inspector.js

@@ -1,5 +1,7 @@
 // utils/Inspector.js
 import { getWidgetProps } from "../utils/getWidgetProps.js";
+import { WidgetFactory } from "../widget-factory/index.js";
+import { colors } from "../utils/themes.js";
 
 /**
  * Converts a JavaScript value to its source-code string representation.
@@ -138,6 +140,44 @@ const collectChildren = (widget) => {
   return children;
 };
 
+/**
+ * The widget form: a monospace block holding the reconstructed call.
+ *
+ * `Inspector` itself is a string builder, which is what the console helpers
+ * need. A screen that wants to *show* a tree asks for this one, by passing the
+ * props object the documentation describes.
+ *
+ * @param {{ widget?: HTMLElement, indent?: number }} props
+ * @returns {HTMLElement}
+ */
+const InspectorView = ({ widget, indent = 0, ...rest }) => {
+  const dump = widget
+    ? Inspector(widget, indent)
+    : 'Inspector({ widget }) — nothing to inspect.';
+
+  const container = WidgetFactory({
+    widgetName: "Inspector",
+    tag: "pre",
+    text: dump,
+    fontFamily:
+      'ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace',
+    fontSize: 12,
+    color: colors.text,
+    backgroundColor: colors.card,
+    padding: 16,
+    borderRadius: 8,
+    overflowX: "auto",
+    width: "100%",
+    ...rest,
+  });
+
+  // A <pre> that wraps is a dump nobody can read; the horizontal scroll above
+  // is the deal.
+  container.style.whiteSpace = "pre";
+
+  return container;
+};
+
 /**
  * Converts a widget element back into its equivalent source-code representation,
  * recursively reconstructing its full prop tree and children.
@@ -149,7 +189,20 @@ const collectChildren = (widget) => {
  * @param {number} [indent=0] - Starting indentation depth for pretty-printing.
  * @returns {string} Source code string such as `Row({ gap: 8, children: [...] })`.
  */
-export const Inspector = (widget, indent = 0) => {
+export const Inspector = (target, indent = 0) => {
+  // Two calls, one function. `Inspector({ widget, indent })` is the documented
+  // widget: it paints the dump so a settings screen can show a tree. Called
+  // with a node it stays the string builder `printWidgetCode` uses.
+  if (
+    target &&
+    typeof target === "object" &&
+    target.nodeType !== 1 &&
+    "widget" in target
+  ) {
+    return InspectorView(target);
+  }
+
+  const widget = target;
   if (!widget || widget.nodeType !== 1) {
     return String(widget);
   }

package/src/widgets/InstallButton.js

@@ -10,9 +10,11 @@ export const InstallButton = (props) => {
     text = "📲 Install",
     variant = "filled",
     size = "medium",
-    borderRadius = 28,
-    padding = "12px 24px",
-    bottom = 20,
+    borderRadius = 16,
+    // A number is the framework's own form: Button doubles it horizontally
+    // (12 vertical, 24 horizontal) and the factory emits it as `rem`.
+    padding = 12,
+    bottom = 24,
     backgroundColor,
     color,
     onInstalled,
@@ -64,7 +66,7 @@ export const InstallButton = (props) => {
     borderRadius: borderRadius,
     padding: padding,
     position: "fixed",
-    bottom: `${bottom}px`,
+    bottom,
     left: "50%",
     transform: "translateX(-50%)",
     zIndex: 10000,

package/src/widgets/ListTile.js

@@ -7,6 +7,7 @@ import { Row } from "./Row.js";
 import { Column } from "./Column.js";
 import { Text } from "./Text.js";
 import { colors, subscribeTheme } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 
 /**
  * @typedef {Object} ListTileProps
@@ -132,7 +133,7 @@ export const ListTile = (props) => {
   const contentRow = Row({
     alignItems: "center",
     gap: gap,
-    padding: `${paddingVertical}px ${paddingHorizontal}px`,
+    padding: `${toREM(paddingVertical)} ${toREM(paddingHorizontal)}`,
     width: "100%",
     boxSizing: "border-box",
     children: rowChildren,
@@ -199,8 +200,8 @@ export const ListTile = (props) => {
     const dividerLine = WidgetFactory({
       height: 1,
       backgroundColor: colors.border,
-      marginLeft: `${paddingHorizontal}px`,
-      width: `calc(100% - ${paddingHorizontal}px)`,
+      marginLeft: toREM(paddingHorizontal),
+      width: `calc(100% - ${toREM(paddingHorizontal)})`,
     });
 
     const container = WidgetFactory({