flet-box 1.0.6 → 1.0.8

package/src/widget-factory/processProps.js

@@ -123,8 +123,17 @@ function applyUnit(def, value) {
   }
   if (value === true) return 1;
   if (value === false) return 0;
-  if (typeof value !== "number") return value;
   const unit = def.unit || "px";
+  // A rem prop written as a pixel *string* ("8px 12px") is the same framework
+  // number written a different way, so it converts like the number does. `toREM`
+  // only rewrites strings made entirely of pixel lengths, which leaves "100%",
+  // "auto", "calc(100% - 16px)" and "2px solid red" exactly as they were.
+  if (unit === "rem" && typeof value === "string") return toREM(value);
+  // A rem prop written as a *list* (`padding: [8, 16]`) is the same pair of
+  // framework units again; the generic formatter would suffix each item with px.
+  if (unit === "rem" && Array.isArray(value))
+    return value.map((item) => toREM(item)).join(" ");
+  if (typeof value !== "number") return value;
   if (unit === "none") return value;
   
   // Use the dynamic REM converter instead of a hard-coded division.

package/src/widget-factory/remTool.js

@@ -1,34 +1,20 @@
 /**
- * REM TOOL - Only converts numbers to REM
+ * @file remTool.js
+ * @description The engine's entry point to the framework's one unit converter.
+ *
+ * This file used to keep its own copy of the rule — `value / 16` for numbers,
+ * strings passed through untouched. Two converters in one framework means two
+ * meanings for one number: a widget that called `src/utils/units.js` honoured
+ * `setBaseFontSize()` and an engine-routed prop did not, so the same `40` painted
+ * 40px in one place and 50px in another. Both halves now call the same function,
+ * and a length written as pixels ("8px", "4px 12px") converts like the number
+ * that produced it instead of freezing at that size.
  */
+import { toREM as convert } from "../utils/units.js";
 
 /**
- * Converts a number to REM
- * @param {number} value - Number to convert
- * @param {number} baseFontSize - Base root font size (default: 16)
- * @returns {string} - Value in REM
+ * @param {number|string} value - A framework number, or a CSS length/value.
+ * @returns {string|*} `40` → `"2.5rem"`; `"8px 12px"` → `"0.5rem 0.75rem"`;
+ *   anything that is not a pixel length (`"50%"`, `"auto"`) is returned as given.
  */
-export const toREM = (value, baseFontSize = 16) => {
-  if (typeof value !== "number") return value;
-  return `${value / baseFontSize}rem`;
-};
-
-/**
- * Applies REM to a styles object
- * @param {Object} styles - Styles with numbers
- * @param {number} baseFontSize - Base root font size (default: 16)
- * @returns {Object} - Styles with REM
- */
-export const applyREM = (styles, baseFontSize = 16) => {
-  const result = {};
-
-  for (const [key, value] of Object.entries(styles)) {
-    if (typeof value === "number") {
-      result[key] = toREM(value, baseFontSize);
-    } else {
-      result[key] = value;
-    }
-  }
-
-  return result;
-};
+export const toREM = (value) => convert(value);

package/src/widget-factory/stackPosition.js

@@ -26,9 +26,16 @@ export const stackPosition = (widget, props) => {
   // Absolute positioning
   widget.style.position = "absolute";
 
+  // `centerX` + `centerY` must compose: writing each transform as it is found
+  // would let the second one erase the first.
+  const transforms = [];
+
   // Process each position prop
   for (const [key, value] of Object.entries(props)) {
     if (key === "position") continue;
+    // The placement shorthands are booleans: a present `false` means "do not
+    // apply", not "the key exists".
+    if (value === false) continue;
 
     switch (key) {
       case "top":
@@ -51,16 +58,16 @@ export const stackPosition = (widget, props) => {
         break;
       case "centerX":
         widget.style.left = "50%";
-        widget.style.transform = "translateX(-50%)";
+        transforms.push("translateX(-50%)");
         break;
       case "centerY":
         widget.style.top = "50%";
-        widget.style.transform = "translateY(-50%)";
+        transforms.push("translateY(-50%)");
         break;
       case "center":
         widget.style.top = "50%";
         widget.style.left = "50%";
-        widget.style.transform = "translate(-50%, -50%)";
+        transforms.push("translate(-50%, -50%)");
         break;
       case "fullWidth":
         widget.style.width = "100%";
@@ -81,6 +88,14 @@ export const stackPosition = (widget, props) => {
     }
   }
 
+  if (transforms.length) {
+    // `center` already covers both axes; mixing it with a single-axis shorthand
+    // must not shift the widget twice.
+    widget.style.transform = transforms.includes("translate(-50%, -50%)")
+      ? "translate(-50%, -50%)"
+      : transforms.join(" ");
+  }
+
   return widget;
 };
 

package/src/widget-factory/translateProps.js

@@ -183,6 +183,34 @@ export const ALL_PROPS = [
   { prop: "boxShadow", domProp: "boxShadow", type: "style", unit: "none", reactive: true },
   { prop: "elevation", domProp: "boxShadow", type: "style", unit: "none", reactive: true },
 
+  // ============================================================
+  // GLASS & FILTERS
+  // ============================================================
+  // A translucent card is only glass when what sits behind it blurs, and there
+  // is no `style` object in this API — so if `backdrop-filter` were not routed,
+  // the effect would be unreachable rather than merely undocumented.
+  //
+  // Both names are written because WebKit only lifted the `-webkit-` requirement
+  // for `backdrop-filter` in Safari 18, and this framework ships iOS apps.
+  {
+    prop: "backdropFilter",
+    domProp: "backdropFilter",
+    type: "style",
+    unit: "none",
+    reactive: true,
+    targets: ["backdropFilter", "WebkitBackdropFilter"],
+  },
+  // Composes with the object builder in `src/tools/filter.js`.
+  { prop: "filter", domProp: "filter", type: "style", unit: "none", reactive: true },
+  {
+    prop: "maskImage",
+    domProp: "maskImage",
+    type: "style",
+    unit: "none",
+    reactive: true,
+    targets: ["maskImage", "WebkitMaskImage"],
+  },
+
   // ============================================================
   // DISPLAY & LAYOUT
   // ============================================================
@@ -480,6 +508,7 @@ export const ALL_PROPS = [
   { prop: "widthExpanded", domProp: "widthExpanded", type: "special" },
   { prop: "widthCollapsed", domProp: "widthCollapsed", type: "special" },
   { prop: "showTooltip", domProp: "showTooltip", type: "special" },
+  // Legacy alias of `delay`, still honoured by Tooltip.
   { prop: "tooltipDelay", domProp: "tooltipDelay", type: "special" },
 
   // ---- ListView / GridView ----
@@ -702,6 +731,7 @@ export const ALL_PROPS = [
   // ---- Avatar / Badge / Icon / Chip ----
   { prop: "icon", domProp: "icon", type: "special" },
   { prop: "shape", domProp: "shape", type: "special" },
+  // Presence dot: `online` shows it on Avatar, `badgeColor` paints it.
   { prop: "online", domProp: "online", type: "special" },
   { prop: "badge", domProp: "badge", type: "special" },
   { prop: "badgeColor", domProp: "badgeColor", type: "special" },
@@ -732,9 +762,12 @@ export const ALL_PROPS = [
   { prop: "headingColor", domProp: "headingColor", type: "special" },
   { prop: "allowDangerousHtml", domProp: "allowDangerousHtml", type: "special" },
 
-  // ---- InstallButton ----
+  // ---- Image ----
+  // `downloadable` turns a click into a save, `downloadFileName` names the file.
   { prop: "downloadable", domProp: "downloadable", type: "special" },
   { prop: "downloadFileName", domProp: "downloadFileName", type: "special" },
+
+  // ---- InstallButton ----
   { prop: "onInstalled", domProp: "onInstalled", type: "special" },
 
   // ---- MatrixRain ----
@@ -748,6 +781,32 @@ export const ALL_PROPS = [
   { prop: "fgColor", domProp: "fgColor", type: "special" },
   { prop: "errorCorrection", domProp: "errorCorrection", type: "special" },
 
+  // ---- Maps ----
+  // `center` and `markers` are already registered above; the rest are Maps-only.
+  // All are inert here: Maps destructures them before the factory sees them and
+  // re-applies them through `composeUpdate`, so the registry entry only has to
+  // keep them out of the unknown-prop fallback (an invalid inline style for a
+  // `{lat, lng}` object, a bogus `mapclick` listener for `onMapClick`).
+  { prop: "zoom", domProp: "zoom", type: "special" },
+  { prop: "minZoom", domProp: "minZoom", type: "special" },
+  { prop: "maxZoom", domProp: "maxZoom", type: "special" },
+  { prop: "markerColor", domProp: "markerColor", type: "special" },
+  { prop: "polylines", domProp: "polylines", type: "special" },
+  { prop: "polylineColor", domProp: "polylineColor", type: "special" },
+  { prop: "tileUrl", domProp: "tileUrl", type: "special" },
+  { prop: "attribution", domProp: "attribution", type: "special" },
+  { prop: "showAttribution", domProp: "showAttribution", type: "special" },
+  { prop: "showZoomControl", domProp: "showZoomControl", type: "special" },
+  { prop: "interactive", domProp: "interactive", type: "special" },
+  { prop: "scrollZoom", domProp: "scrollZoom", type: "special" },
+  { prop: "doubleClickZoom", domProp: "doubleClickZoom", type: "special" },
+  { prop: "showUserLocation", domProp: "showUserLocation", type: "special" },
+  { prop: "followUser", domProp: "followUser", type: "special" },
+  { prop: "onMapClick", domProp: "onMapClick", type: "special" },
+  { prop: "onMarkerClick", domProp: "onMarkerClick", type: "special" },
+  { prop: "onMoveEnd", domProp: "onMoveEnd", type: "special" },
+  { prop: "onUserUpdate", domProp: "onUserUpdate", type: "special" },
+
   // ---- Image fit ----
   { prop: "fit", domProp: "objectFit", type: "style", unit: "none", reactive: true },
   { prop: "objectFit", domProp: "objectFit", type: "style", unit: "none", reactive: true },

package/src/widgets/Accordion.js

@@ -8,11 +8,13 @@
 
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
+import { toREM } from "../utils/units.js";
 import { composeUpdate } from "../utils/composeUpdate.js";
 import { Container } from "./Container.js";
 import { Row } from "./Row.js";
 import { Text } from "./Text.js";
 import { Icon } from "./Icon.js";
+import { SHADOW_LEVELS } from "../tools/shadow.js";
 
 /**
  * Props owned by the Accordion's own closure state. They are routed to the
@@ -41,14 +43,14 @@ const ACCORDION_PROP_KEYS = [
  * @param {number} [props.borderRadius=8] - Corner radius in pixels.
  * @param {string} [props.bgColor=colors.surface] - Background color of the container (used in 'contained' variant).
  * @param {string} [props.titleColor=colors.text] - Text color of the title when collapsed.
- * @param {string} [props.expandedColor=colors.primary] - Accent color applied to the title and background when expanded.
+ * @param {string} [props.expandedColor=colors.primary] - Accent color applied to the title-bar background when expanded.
  * @param {string|null} [props.border=null] - Explicit CSS border shorthand. Overrides variant-based border logic.
  * @param {string} [props.borderColor=colors.border] - Border color used in 'outlined' variant.
  * @param {number} [props.borderWidth=1] - Border width in pixels (outlined variant).
  * @param {number} [props.titleSize=14] - Font size of the title text in pixels.
  * @param {string} [props.titleWeight='500'] - Font weight of the title text.
- * @param {string} [props.titlePadding='12px 16px'] - CSS padding for the title bar.
- * @param {string} [props.contentPadding='16px'] - CSS padding applied to the inner content area.
+ * @param {string} [props.titlePadding='0.75rem 1rem'] - CSS padding for the title bar.
+ * @param {string} [props.contentPadding='1rem'] - CSS padding applied to the inner content area.
  * @param {string} [props.iconCollapsed='chevron_right'] - Material icon name shown when collapsed.
  * @param {string} [props.iconExpanded='expand_more'] - Material icon name shown when expanded.
  * @param {string} [props.iconColor=colors.textSecondary] - Color of the expand/collapse icon.
@@ -83,7 +85,7 @@ export const Accordion = (props) => {
     titleWeight = "500",
     titlePadding = "12px 16px",
     // Content
-    contentPadding = "16px",
+    contentPadding = 16,
     // Icon
     iconCollapsed = "chevron_right",
     iconExpanded = "expand_more",
@@ -149,11 +151,11 @@ export const Accordion = (props) => {
       titleElement.textContent = currentTitle;
     }
 
-    // Title color shifts to the accent color when expanded
-    titleElement.style.color = isExpanded
-      ? currentExpandedColor
-      : currentTitleColor;
-    titleElement.style.fontSize = `${currentTitleSize}px`;
+    // The accent marks the open state through the title-bar tint; the title
+    // itself keeps `titleColor`. Painting it with `primary` put #00A5FF words
+    // on a 6% primary wash (2.4:1) in the light theme.
+    titleElement.style.color = currentTitleColor;
+    titleElement.style.fontSize = toREM(currentTitleSize);
     titleElement.style.fontWeight = currentTitleWeight;
 
     // Swap icon based on current expanded state. `Icon` renders its glyph as
@@ -163,12 +165,12 @@ export const Accordion = (props) => {
       ? currentIconExpanded
       : currentIconCollapsed;
     iconElement.style.color = currentIconColor;
-    iconElement.style.fontSize = `${currentIconSize}px`;
+    iconElement.style.fontSize = toREM(currentIconSize);
 
     // Title bar cursor and opacity reflect the disabled state
     titleBar.style.cursor = currentDisabled ? "not-allowed" : "pointer";
     titleBar.style.opacity = currentDisabled ? "0.5" : "1";
-    titleBar.style.padding = currentTitlePadding;
+    titleBar.style.padding = toREM(currentTitlePadding);
 
     // Tint the title bar background slightly when expanded (contained only)
     if (currentVariant === "contained") {
@@ -202,23 +204,18 @@ export const Accordion = (props) => {
       container.style.backgroundColor = "transparent";
     }
 
-    container.style.borderRadius = `${currentBorderRadius}px`;
+    container.style.borderRadius = toREM(currentBorderRadius);
     container.style.overflow = "hidden";
 
-    // Predefined shadow presets keyed by elevation level
+    // The framework's depth scale, not a local copy of it (src/tools/shadow.js).
     if (currentElevation > 0) {
-      const shadows = {
-        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)",
-      };
-      container.style.boxShadow = shadows[currentElevation] || shadows[2];
+      container.style.boxShadow =
+        SHADOW_LEVELS[currentElevation] || SHADOW_LEVELS[2];
     } else {
       container.style.boxShadow = "none";
     }
 
-    contentInner.style.padding = currentContentPadding;
+    contentInner.style.padding = toREM(currentContentPadding);
   };
 
   // ========== HEIGHT ANIMATION ==========
@@ -238,7 +235,7 @@ export const Accordion = (props) => {
     clone.style.visibility = "hidden";
     clone.style.display = "block";
     clone.style.height = "auto";
-    clone.style.padding = currentContentPadding;
+    clone.style.padding = toREM(currentContentPadding);
     document.body.appendChild(clone);
     const height = clone.offsetHeight;
     document.body.removeChild(clone);
@@ -508,7 +505,7 @@ export const Accordion = (props) => {
       currentTitlePadding = newProps.titlePadding;
     if (newProps.contentPadding !== undefined) {
       currentContentPadding = newProps.contentPadding;
-      contentInner.style.padding = currentContentPadding;
+      contentInner.style.padding = toREM(currentContentPadding);
     }
     if (newProps.iconCollapsed !== undefined)
       currentIconCollapsed = newProps.iconCollapsed;

package/src/widgets/AdMob.js

@@ -205,7 +205,7 @@ export const AdMob = (props) => {
   }
 
   const showBanner = () => {
-    if (disposed || !autoShow || bannerVisible) return Promise.resolve(null);
+    if (disposed || bannerVisible) return Promise.resolve(null);
     return withPlugin((plugin) =>
       Promise.resolve(
         plugin.showBanner({
@@ -305,7 +305,12 @@ export const AdMob = (props) => {
   };
   container.onUnmount(dispose);
 
-  container.onMount(showBanner);
+  // `autoShow` is the mount switch, nothing more. An app that holds the banner
+  // back for a paywall moment still has to be able to ask for it later with
+  // `container.show()`, so the flag must not gate that method.
+  container.onMount(() => {
+    if (autoShow) showBanner();
+  });
 
   refreshPlaceholder();