flet-box 1.0.6 → 1.0.8

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/Image.js

@@ -1,20 +1,119 @@
 /**
  * @file Image.js
  * @description Thin `<img>` wrapper that forwards all props to the factory.
+ * Three props are handled here because they are not CSS the engine can apply:
+ * `circular` picks a shape, and `downloadable` decides what a click does.
  */
 import { WidgetFactory } from "../widget-factory/index.js";
+import {
+  isReactive,
+  reactiveKeyOf,
+  resolveReactive,
+} from "../widget-factory/reactiveValue.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
+import { registerWidget } from "../tools/useState.js";
+
+/**
+ * The name the browser offers when saving an image with no `downloadFileName`:
+ * the last path segment of the URL, with the query string and fragment removed.
+ * A `data:` URL has no path — its base64 tail is not a file name — so it gets a
+ * neutral one.
+ *
+ * @param {string} src - Value of the `src` attribute.
+ * @returns {string} A file name.
+ */
+const nameFromSrc = (src) => {
+  const raw = String(src || "");
+  if (!raw || raw.startsWith("data:")) return "image";
+  const tail = raw.split("?")[0].split("#")[0].split("/").pop();
+  return tail || "image";
+};
+
+/**
+ * Saves the image under `name`.
+ *
+ * The `download` attribute is only honoured for a same-origin (or CORS-served)
+ * image; for anything else the click would turn into a navigation, which is why
+ * the anchor opens in a tab instead of replacing the app.
+ *
+ * @param {HTMLImageElement} img - The rendered image.
+ * @param {string} name - File name to suggest.
+ */
+const saveImage = (img, name) => {
+  const link = document.createElement("a");
+  link.href = img.src;
+  link.download = name;
+  link.target = "_blank";
+  link.rel = "noopener";
+  link.click();
+};
 
 export const Image = (props) => {
+  const inputProps = props || {};
   // `fit` is now a proper style prop in translateProps (→ object-fit), so it
   // flows through the factory like any other CSS property. Only `circular`
   // needs special handling — it maps to borderRadius 50%.
-  const { circular, ...rest } = props || {};
-  return WidgetFactory({
+  const { circular, downloadable, downloadFileName, ...rest } = inputProps;
+
+  // Both download props are `special`: nothing routes them, so the factory
+  // never sees them and cannot re-apply or re-subscribe them. They are read
+  // here instead — resolved once (a live `useState` value is a *function*,
+  // which is truthy, so an image bound to `false` would download without this),
+  // kept in `boundKeys`, and re-applied through `composeUpdate` when a later
+  // patch or store change arrives.
+  const boundKeys = new Map();
+  let canDownload = Boolean(resolveReactive(downloadable));
+  let fileName = resolveReactive(downloadFileName);
+  for (const key of ["downloadable", "downloadFileName"]) {
+    const value = inputProps[key];
+    if (!isReactive(value)) continue;
+    const stateKey = reactiveKeyOf(value);
+    if (stateKey) boundKeys.set(key, stateKey);
+  }
+
+  const img = WidgetFactory({
     tag: "img",
     widgetName: "Image",
     ...(circular ? { borderRadius: "50%" } : null),
     ...rest,
   });
+
+  // A caller who set `cursor` themselves keeps their own value; this widget
+  // only borrows the property while it is offering a save.
+  const paintsCursor = rest.cursor == null;
+
+  const offerSave = () => {
+    saveImage(img, fileName ? String(fileName) : nameFromSrc(img.src));
+  };
+
+  let attached = false;
+  const applyDownloadProps = () => {
+    if (canDownload && !attached) {
+      img.addEventListener("click", offerSave);
+      attached = true;
+    } else if (!canDownload && attached) {
+      img.removeEventListener("click", offerSave);
+      attached = false;
+    }
+    if (paintsCursor) img.style.cursor = canDownload ? "pointer" : "";
+  };
+
+  applyDownloadProps();
+
+  composeUpdate(img, ["downloadable", "downloadFileName"], (next = {}) => {
+    if ("downloadable" in next) canDownload = Boolean(resolveReactive(next.downloadable));
+    if ("downloadFileName" in next) fileName = resolveReactive(next.downloadFileName);
+    applyDownloadProps();
+  });
+
+  // After composing: `registerWidget` pushes the current store value through
+  // `update`, which must be the composed one that routes these keys here. It
+  // releases the subscription again on unmount.
+  for (const [propName, stateKey] of boundKeys) {
+    registerWidget(stateKey, img, propName);
+  }
+
+  return img;
 };
 
-export default Image;
+export default Image;

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({

package/src/widgets/ListView.js

@@ -4,6 +4,7 @@
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 import { injectKeyframes } from "../utils/styleInjector.js";
+import { toREM, getBaseFontSize } from "../utils/units.js";
 
 /**
  * @typedef {Object} ListViewProps
@@ -11,8 +12,8 @@ import { injectKeyframes } from "../utils/styleInjector.js";
  * @property {Function} renderItem - Called with `(item, index)` and must return an `HTMLElement`.
  * @property {number|string} [height=400] - Height of the scroll container. Overridden when `expand` is true.
  * @property {number|string} [width="100%"] - Width of the widget.
- * @property {number} [itemSize=60] - Fixed height of each row in pixels (required for virtualization math).
- * @property {number} [gap=0] - Vertical gap between rows in pixels.
+ * @property {number} [itemSize=60] - Fixed height of each row in framework units, i.e. it grows with the base font (required for virtualization math).
+ * @property {number} [gap=0] - Vertical gap between rows in framework units.
  * @property {number} [bufferSize=5] - Number of extra rows to render above and below the visible viewport.
  *   Larger values reduce the chance of blank flashes during fast scrolling at the cost of more DOM nodes.
  * @property {boolean} [showsScrollIndicator=true] - Whether to show the native scrollbar.
@@ -140,6 +141,23 @@ export const ListView = (props) => {
 
   // ---- Helper functions ----
 
+  /**
+   * Rendered pixels per framework unit, read from the live root font size.
+   *
+   * `itemSize` and `gap` are framework units, so the row they reserve grows with
+   * the reader's font like every other box. The virtualisation math compares
+   * against `scrollTop` and `clientHeight`, which are always CSS pixels, so the
+   * two spaces have to be joined here: a 60-unit row is 90px of scroll space for
+   * a reader on a 24px base, and rows written straight from the unit overlap.
+   */
+  const unitPx = () => {
+    if (typeof document === "undefined") return 1;
+    const root = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    return root > 0 ? root / getBaseFontSize() : 1;
+  };
+  const slotHeight = () => (itemSize + gap) * unitPx();
+  const gapHeight = () => gap * unitPx();
+
   /** @returns {number} Total number of rows (accounting for grid columns). */
   const getTotalRows = () => Math.ceil(_data.length / cols);
 
@@ -159,7 +177,7 @@ export const ListView = (props) => {
    */
   const getItemTop = (index) => {
     const row = Math.floor(index / cols);
-    return row * (itemSize + gap);
+    return row * slotHeight();
   };
 
   /**
@@ -171,7 +189,7 @@ export const ListView = (props) => {
   const getTotalHeight = () => {
     const rows = getTotalRows();
     if (rows === 0) return 0;
-    return Math.max(0, rows * (itemSize + gap) - gap);
+    return Math.max(0, rows * slotHeight() - gapHeight());
   };
 
   /** Applies the correct logical height to the inner container. */
@@ -190,7 +208,7 @@ export const ListView = (props) => {
     if (!scrollContainer) return;
 
     const viewportH = scrollContainer.clientHeight;
-    const itemTotalH = itemSize + gap;
+    const itemTotalH = slotHeight();
     // Convert the scroll position into ITEM space: rows start below the header, so
     // the first rows are still on screen while `scrollTop` is inside the header.
     const itemsTop = Math.max(0, scrollContainer.scrollTop - getHeaderHeight());
@@ -228,7 +246,7 @@ export const ListView = (props) => {
           console.error("Error in renderItem:", err);
           itemEl = document.createElement("div");
           itemEl.textContent = "Error";
-          itemEl.style.padding = "8px";
+          itemEl.style.padding = toREM(8);
         }
       }
       if (!itemEl) continue;
@@ -240,12 +258,12 @@ export const ListView = (props) => {
         const col = i % cols;
         wrapper.style.left = `${(col / cols) * 100}%`;
         wrapper.style.width = `${100 / cols}%`;
-        wrapper.style.padding = `0 ${gap / 2}px`;
+        wrapper.style.padding = `0 ${toREM(gap / 2)}`;
         wrapper.style.boxSizing = "border-box";
       } else {
         wrapper.style.left = "0";
         wrapper.style.right = "0";
-        wrapper.style.padding = `0 ${gap}px`;
+        wrapper.style.padding = `0 ${toREM(gap)}`;
       }
       wrapper.appendChild(itemEl);
       fragment.appendChild(wrapper);
@@ -367,8 +385,8 @@ export const ListView = (props) => {
     refreshIndicator.style.transition = "height 0.2s";
 
     const spinner = document.createElement("div");
-    spinner.style.width = "24px";
-    spinner.style.height = "24px";
+    spinner.style.width = toREM(24);
+    spinner.style.height = toREM(24);
     spinner.style.border = "2px solid #e0e0e0";
     spinner.style.borderTop = "2px solid #007aff";
     spinner.style.borderRadius = "50%";
@@ -401,7 +419,7 @@ export const ListView = (props) => {
         if (h >= 60) {
           // Threshold met — trigger the refresh
           _refreshing = true;
-          refreshIndicator.style.height = "60px";
+          refreshIndicator.style.height = toREM(60);
           onRefresh(() => {
             _refreshing = false;
             refreshIndicator.style.height = "0";
@@ -498,7 +516,7 @@ export const ListView = (props) => {
     set: (val) => {
       _refreshing = val;
       if (refreshIndicator)
-        refreshIndicator.style.height = _refreshing ? "60px" : "0";
+        refreshIndicator.style.height = _refreshing ? toREM(60) : "0";
     },
     enumerable: true,
   });