flet-box 1.0.3 → 1.0.5

package/src/widget-factory/warnings.js

@@ -7,6 +7,14 @@ const IS_DEV = typeof FLETBOX_DEV !== 'undefined' ? FLETBOX_DEV : true;
 const suggestionCache = new Map();
 let propNames = [];
 
+// Props already reported. Without this, every prop *application* re-printed the
+// whole block — a captured stack trace plus ~8 styled console calls — so a widget
+// carrying a single unknown prop paid ~137 µs on every `update()`, roughly 400×
+// the cost of a known prop. Because `update()` re-applies every original prop, one
+// unknown prop slowed that widget for its whole lifetime.
+const warnedProps = new Set();
+const warnedDeprecated = new Set();
+
 export function setPropNames(names) {
   propNames = names;
   try { if (typeof window !== 'undefined') window.__FLETBOX_PROP_NAMES = names; } catch(e){}
@@ -216,6 +224,9 @@ function printDocs(prop) {
 
 export function warnUnknownProp(propName, context = {}) {
   if (!IS_DEV) return;
+  // Report each unknown prop once, not once per application.
+  if (warnedProps.has(propName)) return;
+  warnedProps.add(propName);
 
   const suggestions = getSuggestions(propName);
   const location = getCallLocation();
@@ -231,6 +242,10 @@ export function warnUnknownProp(propName, context = {}) {
 
 export function warnDeprecatedProp(propName, replacement = null, context = {}) {
   if (!IS_DEV) return;
+  // Same reasoning as `warnUnknownProp`: one report per prop/replacement pair.
+  const deprecatedKey = `${propName}\u0000${replacement || ""}`;
+  if (warnedDeprecated.has(deprecatedKey)) return;
+  warnedDeprecated.add(deprecatedKey);
 
   const location = getCallLocation();
 

package/src/widget-factory/widgetFactory.js

@@ -8,6 +8,29 @@ import { processProps } from "./processProps.js";
 import { assignProps } from "./assignProps.js";
 import { stackPosition } from "./stackPosition.js";
 import { addChildren, removePropChildren } from "./addChildren.js";
+import { reactiveKeyOf } from "./reactiveValue.js";
+import { registerWidget } from "../tools/useState.js";
+
+/**
+ * Auto-binds reactive props to their state key.
+ *
+ * A prop whose value is a live reactive (what `useState` returns) carries the key
+ * it came from, so the factory can subscribe this widget to that key. A later
+ * change then updates **only this widget** instead of rebuilding the whole app —
+ * which is what makes the plain
+ * `const [color, setColor] = useState("color", "red"); Widget({ bgColor: color })`
+ * syntax surgical.
+ *
+ * @param {HTMLElement} widget - The widget being built or updated.
+ * @param {Object} props - The props to scan.
+ * @returns {void}
+ */
+const bindReactiveProps = (widget, props) => {
+  for (const [prop, value] of Object.entries(props || {})) {
+    const key = reactiveKeyOf(value);
+    if (key) registerWidget(key, widget, prop);
+  }
+};
 
 /**
  * Main widget factory. Creates a fully functional DOM widget with reactivity,
@@ -96,6 +119,7 @@ export function WidgetFactory(tag, customProps = {}) {
   // ============================================================
   const initialProps = processProps(finalProps, finalTag, widgetName);
   assignProps(widget, initialProps);
+  bindReactiveProps(widget, finalProps);
   stackPosition(widget, finalProps);
 
   if (finalProps.child !== undefined) {
@@ -160,6 +184,9 @@ export function WidgetFactory(tag, customProps = {}) {
 
       const processed = processProps(merged, finalTag, widgetName);
       assignProps(widget, processed);
+      // Only the incoming keys can introduce a new binding; the ones present at
+      // construction were registered then.
+      bindReactiveProps(widget, normalized);
       stackPosition(widget, merged);
 
       if (hasChild || hasChildren) {

package/src/widgets/Accordion.js

@@ -156,11 +156,12 @@ export const Accordion = (props) => {
     titleElement.style.fontSize = `${currentTitleSize}px`;
     titleElement.style.fontWeight = currentTitleWeight;
 
-    // Swap icon based on current expanded state
-    iconElement.setAttribute(
-      "name",
-      isExpanded ? currentIconExpanded : currentIconCollapsed,
-    );
+    // Swap icon based on current expanded state. `Icon` renders its glyph as
+    // TEXT (a material-icons ligature), so setting a `name` attribute changed
+    // nothing and the chevron stayed on `chevron_right` forever.
+    iconElement.textContent = isExpanded
+      ? currentIconExpanded
+      : currentIconCollapsed;
     iconElement.style.color = currentIconColor;
     iconElement.style.fontSize = `${currentIconSize}px`;
 

package/src/widgets/AlertDialog.js

@@ -40,7 +40,7 @@ export const AlertDialog = (props) => {
     onConfirm,
     onCancel,
     onClose,
-    variant = "normal", // 'normal', 'danger', 'warning', 'success'
+    variant = "normal",
     showCancel = true,
     confirmText = "Accept",
     cancelText = "Cancel",
@@ -83,14 +83,16 @@ export const AlertDialog = (props) => {
     children: [
       icon,
       Text({
-        value: title,
+        // FIX: `value` no aplica a <span> → título quedaba vacío. Usar `text`.
+        text: title,
         size: 24,
         fontWeight: "bold",
         color: colors.text,
         textAlign: "center",
       }),
       Text({
-        value: message,
+        // FIX: idem para el mensaje.
+        text: message,
         size: 18,
         fontWeight: "bold",
         color: colors.textSecondary,
@@ -134,7 +136,7 @@ export const AlertDialog = (props) => {
 
   let modal = null;
   // Placeholder until the modal is created below — avoids a temporal dead-zone
-  let closeModal = () => {};
+  let closeModal = () => { };
 
   // Delegate to the base Modal widget, passing our content and actions
   modal = Modal({
@@ -159,4 +161,4 @@ export const AlertDialog = (props) => {
   return { open, close, modal };
 };
 
-export default AlertDialog;
+export default AlertDialog;

package/src/widgets/Audio.js

@@ -74,6 +74,9 @@ export const Audio = (props) => {
   let duration = 0;
   let durationPoll = null;
   let audioContextFallbackAttempted = false;
+  // Set on unmount so deferred work (the duration fallback, in-flight fetches)
+  // never touches a discarded widget.
+  let disposed = false;
 
   /**
    * Recalculates the current playback position and fires the progress callbacks.
@@ -139,19 +142,25 @@ export const Audio = (props) => {
    * cannot determine duration without fully downloading the file.
    */
   const fallbackGetDuration = async () => {
-    if (audioContextFallbackAttempted) return;
+    if (audioContextFallbackAttempted || disposed) return;
     audioContextFallbackAttempted = true;
 
     try {
       const response = await fetch(src);
       const arrayBuffer = await response.arrayBuffer();
+      if (disposed) return;
       const audioContext = new (
         window.AudioContext || window.webkitAudioContext
       )();
-      const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
-      const durationSeconds = audioBuffer.duration;
-      setDuration(durationSeconds);
-      audioContext.close();
+      // `close()` must run even when decoding fails: AudioContexts are a capped
+      // resource (~6 per page in Chromium) and leaking them makes every later
+      // context fail to start, which breaks the fallback for good.
+      try {
+        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+        setDuration(audioBuffer.duration);
+      } finally {
+        audioContext.close();
+      }
     } catch (err) {
       console.warn("[Audio] Fallback duration fetch failed:", err);
     }
@@ -178,16 +187,29 @@ export const Audio = (props) => {
   audio.addEventListener("error", (e) => console.warn("[Audio] Error:", e));
 
   // Kick off duration detection immediately; if unavailable after 2 s, use fetch fallback
+  let fallbackTimer = null;
   if (!tryGetDurationFromAudio()) {
     pollDuration();
-    setTimeout(() => {
+    fallbackTimer = setTimeout(() => {
+      fallbackTimer = null;
       if (!duration) fallbackGetDuration();
     }, 2000);
   }
 
-  // Cancel the duration polling interval when the widget unmounts
+  // Release everything the widget owns on unmount. The 2 s fallback timer was
+  // never stored, so after teardown it still fetched the whole file and spun up
+  // an AudioContext (and called onLoad) for a widget that no longer exists — and
+  // a tree rebuild does that on every state change.
   audio.onUnmount(() => {
-    if (durationPoll) clearInterval(durationPoll);
+    disposed = true;
+    if (durationPoll) {
+      clearInterval(durationPoll);
+      durationPoll = null;
+    }
+    if (fallbackTimer) {
+      clearTimeout(fallbackTimer);
+      fallbackTimer = null;
+    }
   });
 
   // ========== PUBLIC PLAYBACK API ==========

package/src/widgets/BottomSheet.js

@@ -58,6 +58,8 @@ export const BottomSheet = (props) => {
 
   let isOpen = false;
   let overlay = null;
+  // Pending "hide after the close animation" timer, so it can be cancelled.
+  let closeTimer = null;
   let sheetContainer = null;
   let startY = 0;
   let currentY = 0;
@@ -190,6 +192,18 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
   overlay.appendChild(sheetContainer);
   document.body.appendChild(overlay);
 
+  // The overlay lives in `document.body` and can be removed without `close()`
+  // ever running (state rebuild, route change, plain removeChild of the host).
+  // `_cleanup` is not called on that path, so release the document listener and
+  // any pending animation timer through the lifecycle hook too.
+  overlay.onUnmount(() => {
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
+    document.removeEventListener("keydown", handleKeyDown);
+  });
+
   // Drag handlers
   const onTouchStart = (e) => {
     // ✅ Prevent the drag event from propagating to the overlay
@@ -229,6 +243,11 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
   const open = () => {
     if (isOpen) return;
     isOpen = true;
+    // Cancel any pending hide from a close that is still animating out.
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
     overlay.style.visibility = "visible";
     overlay.style.opacity = "1";
     sheetContainer.style.transform = "translateY(0)";
@@ -250,7 +269,11 @@ onclick: (e) => e.stopPropagation(), // ✅ Prevents the click from reaching the
     isOpen = false;
     sheetContainer.style.transform = "translateY(100%)";
     overlay.style.opacity = "0";
-    setTimeout(() => {
+    // Keep the id: `open()` clears it, otherwise reopening within the animation
+    // window lets a stale timer hide an OPEN sheet (invisible but isOpen true).
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
       overlay.style.visibility = "hidden";
     }, animationDuration);
     if (onClose) onClose();

package/src/widgets/Chart.js

@@ -134,7 +134,10 @@ export const Chart = (props) => {
     const paddingRange = range * 0.1;
     return {
       maxValue: maxVal + paddingRange,
-      minValue: Math.max(0, minVal - paddingRange),
+      // Do NOT clamp to 0. With all-negative data that inverts the range
+      // (min > max) and every point is drawn far outside the canvas, so the
+      // chart looks empty and the axis labels run from 0 to a negative max.
+      minValue: minVal - paddingRange,
     };
   };
 

package/src/widgets/Checkbox.js

@@ -12,6 +12,7 @@ export const Checkbox = (props) => {
     onPress: onPressProp,
     disabled = false,
     size = 20,
+    activeColor = colors.primary,
     ...rest
   } = props;
 
@@ -25,10 +26,8 @@ export const Checkbox = (props) => {
 
   const updateUI = (newChecked) => {
     if (checkboxRef) {
-      checkboxRef.style.backgroundColor = newChecked
-        ? colors.primary
-        : "transparent";
-      checkboxRef.style.border = `2px solid ${newChecked ? colors.primary : colors.border}`;
+      checkboxRef.style.backgroundColor = newChecked ? activeColor : "transparent";
+      checkboxRef.style.border = `2px solid ${newChecked ? activeColor : colors.border}`;
     }
     if (checkMarkRef) {
       checkMarkRef.style.display = newChecked ? "inline-block" : "none";
@@ -51,9 +50,9 @@ export const Checkbox = (props) => {
     widgetName: "Checkbox",
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalChecked ? colors.primary : colors.border}`,
+    border: `2px solid ${disabled ? colors.border : internalChecked ? activeColor : colors.border}`,
     borderRadius: 6,
-    backgroundColor: internalChecked ? colors.primary : "transparent",
+    backgroundColor: internalChecked ? activeColor : "transparent",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -67,18 +66,27 @@ export const Checkbox = (props) => {
 
   // Handle click
   if (!disabled) {
-    checkbox.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       const newChecked = !internalChecked;
       internalChecked = newChecked;
       updateUI(newChecked);
       if (onPress) onPress(newChecked);
     };
+    // Route the handler through the factory's props instead of assigning
+    // `onclick` directly. `assignProps` clears `onclick` on every update and only
+    // re-applies handlers it can see in the merged props, so a direct assignment
+    // died on the first `update()` — and every reactive setter (opacity, bgColor,
+    // padding…) calls update — leaving the control unable to toggle ever again.
+    checkbox.update({ onPress: handleClick });
 
     // Hover effect
     checkbox.addEventListener("mouseenter", () => {
       if (!disabled && !internalChecked) {
-        checkbox.style.backgroundColor = colors.primary + "20";
+        // `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)`;
       }
     });
 

package/src/widgets/CircularBar.js

@@ -104,7 +104,18 @@ export const CircularBar = (props) => {
     if (!gradient) return color;
     if (typeof gradient === "string") return gradient;
     if (Array.isArray(gradient)) {
-      const grad = ctx.createLinearGradient(0, 0, currentWidth, currentWidth);
+      // CSS angle convention: 0deg points up and angles grow clockwise, so the
+      // default 135deg keeps the historical top-left to bottom-right sweep.
+      const rad = (gradientAngle * Math.PI) / 180;
+      const centre = currentWidth / 2;
+      const dx = Math.sin(rad) * centre;
+      const dy = -Math.cos(rad) * centre;
+      const grad = ctx.createLinearGradient(
+        centre - dx,
+        centre - dy,
+        centre + dx,
+        centre + dy,
+      );
       gradient.forEach((c, i) => {
         grad.addColorStop(i / (gradient.length - 1), c);
       });

package/src/widgets/CircularChart.js

@@ -335,7 +335,10 @@ export const CircularChart = (props) => {
     if (!ctx || !canvas) return;
     if (!startTime) {
       startTime = timestamp;
-      requestAnimationFrame(updateAnimation);
+      // Keep the id. The previous frame's id is already spent, so cleanup would
+      // cancel nothing and the pending frame kept re-arming forever on a detached
+      // canvas — and a re-`startAnimation()` could run two loops at once.
+      animationId = requestAnimationFrame(updateAnimation);
       return;
     }
     const elapsed = timestamp - startTime;

package/src/widgets/CodeViewer.js

@@ -4,6 +4,7 @@
  */
 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";
 
 export const CodeViewer = (props) => {
@@ -81,8 +82,14 @@ code = "",
     ...rest,
   });
 
-  // Header
-  if (currentTitle && showHeader) {
+  // 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;
+      return headerRef;
+    }
     headerRef = WidgetFactory({
       tag: "div",
       padding: "8px 12px",
@@ -91,10 +98,12 @@ code = "",
       color: "#fff",
       fontSize: "14px",
       fontWeight: "bold",
-      textContent: currentTitle,
+      textContent: text,
     });
-    container.appendChild(headerRef);
-  }
+    container.insertBefore(headerRef, container.firstChild);
+    return headerRef;
+  };
+  ensureHeader(currentTitle);
 
   // Scroll wrapper
   scrollWrapperRef = WidgetFactory({
@@ -209,11 +218,20 @@ code = "",
 
   container.updateTitle = (newTitle) => {
     currentTitle = newTitle;
-    if (headerRef) {
-      headerRef.textContent = currentTitle;
-    }
+    ensureHeader(currentTitle);
   };
 
+  // `title` is a reactive prop mapped to `textContent` in the prop database, so
+  // letting the factory see it would replace the header and the whole code
+  // wrapper with a bare text node. Own it and update the header instead.
+  composeUpdate(container, ["title"], (props) => {
+    if (props.title === undefined) return;
+    container.updateTitle(props.title);
+    // `makeReactive` rewrites the value into `_originalProps` on every setter
+    // call; leaving it there means the next factory update wipes the widget.
+    delete container._originalProps.title;
+  });
+
   container.scrollTo = (x, y) => {
     if (scrollWrapperRef) {
       scrollWrapperRef.scrollLeft = x;

package/src/widgets/DataTable.js

@@ -83,7 +83,9 @@ export const DataTable = (props) => {
   table.appendChild(thead);
 
   // ========== BODY ==========
-  const tbody = document.createElement("tbody");
+  // `let`, not `const`: `updateData` replaces the body and must re-point here,
+  // otherwise the second call tries to replace an already-detached node.
+  let tbody = document.createElement("tbody");
 
   rows.forEach((row, index) => {
     const tr = document.createElement("tr");
@@ -152,8 +154,12 @@ export const DataTable = (props) => {
 
   // Update table data
   container.updateData = (newRows) => {
+    // Snapshot BEFORE clearing. `updateColumns` calls this with `rows` itself as
+    // the argument, so clearing first and then spreading produced an empty body
+    // and every row silently disappeared.
+    const nextRows = [...newRows];
     rows.length = 0;
-    rows.push(...newRows);
+    rows.push(...nextRows);
 
     // Rebuild body
     const newTbody = document.createElement("tbody");
@@ -213,6 +219,9 @@ export const DataTable = (props) => {
     });
 
     table.replaceChild(newTbody, tbody);
+    // Re-point at the live node, otherwise the next call replaces an already
+    // detached node and throws NotFoundError.
+    tbody = newTbody;
   };
 
   // Update table columns

package/src/widgets/Dropdown.js

@@ -243,7 +243,11 @@ export const Dropdown = (props) => {
     if (outsideClickListener)
       document.removeEventListener("click", outsideClickListener);
     if (resizeListener) window.removeEventListener("resize", resizeListener);
-    if (scrollListener) window.removeEventListener("scroll", scrollListener);
+    // The capture flag MUST match the one used when adding (see the `scroll`
+    // registration below), otherwise the listener is never removed: every
+    // open/close cycle leaked one window listener holding the whole closure.
+    if (scrollListener)
+      window.removeEventListener("scroll", scrollListener, true);
     outsideClickListener = resizeListener = scrollListener = null;
   };
 

package/src/widgets/FloatingActionButton.js

@@ -2,11 +2,6 @@
  * @file FloatingActionButton.js
  * @description Circular floating action button anchored to a corner.
  */
-/**
- * FloatingActionButton Component
- * @module widgets/FloatingActionButton
- */
-
 import { Container } from "./Container.js";
 import { Row } from "./Row.js";
 import { Text } from "./Text.js";
@@ -45,7 +40,9 @@ export const FloatingActionButton = (props) => {
   if (extended && label) {
     children.push(
       Text({
-        value: label,
+        // FIX: `value` es special y `applySpecial` solo lo aplica en inputs
+        // → en un <span> no hacía nada y el label quedaba vacío.
+        text: label,
         size: 14,
         fontWeight: "500",
         color: foregroundColor,
@@ -88,4 +85,4 @@ export const FloatingActionButton = (props) => {
   return button;
 };
 
-export default FloatingActionButton;
+export default FloatingActionButton;

package/src/widgets/Image.js

@@ -5,11 +5,16 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 
 export const Image = (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({
     tag: "img",
     widgetName: "Image",
-    ...props,
+    ...(circular ? { borderRadius: "50%" } : null),
+    ...rest,
   });
 };
 
-export default Image;
+export default Image;