flet-box 1.0.3 → 1.0.5

package/src/widgets/Input.js

@@ -6,6 +6,7 @@ import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 import { Icon } from "./Icon.js";
 import { TextInputValidator } from "../utils/TextInputValidator.js";
+import { composeUpdate } from "../utils/composeUpdate.js";
 
 /**
  * @typedef {Object} InputProps
@@ -25,6 +26,9 @@ import { TextInputValidator } from "../utils/TextInputValidator.js";
  * @property {string} [iconColor] - Color of the icons.
  * @property {number} [iconSize=20] - Size of the icons in pixels.
  * @property {Function} [onIconPress] - Called when either icon is pressed.
+ * @property {boolean} [clearable=false] - Shows a trailing button that empties the field.
+ * @property {boolean} [passwordToggle=false] - Shows a trailing button that reveals or hides the value.
+ * @property {Function} [onEnter] - Called with (value, event) when the user presses Enter in the field.
  * @property {"none"|"letters"|"numbers"|"email"|"alphanumeric"|"safe"|"custom"} [validation="none"] - Validation mode applied on each keystroke and on blur.
  * @property {number} [maxLength] - Maximum number of characters allowed.
  * @property {boolean} [required=false] - Marks the field as required; validation fails on empty values.
@@ -38,6 +42,9 @@ import { TextInputValidator } from "../utils/TextInputValidator.js";
  * @property {Function} [onBlur] - Called when the input loses focus and final validation runs.
  */
 
+/** Suffix for generated field ids, so two Inputs never share one. */
+let inputIdSeed = 0;
+
 /**
  * A fully-featured text input widget with built-in validation, icons, and theme support.
  *
@@ -77,6 +84,9 @@ export const Input = (props) => {
     iconSize = 20,
     onIconPress,
 
+    clearable = false,
+    passwordToggle = false,
+
     validation = "none",
     maxLength,
     required = false,
@@ -89,6 +99,7 @@ export const Input = (props) => {
     onChange,
     onFocus,
     onBlur,
+    onEnter,
     ...rest
   } = props;
 
@@ -97,12 +108,22 @@ export const Input = (props) => {
   let isValid = true;
   let validationMessage = "";
 
+  // The `<label>` needs a `for` that matches the native input's `id`, otherwise
+  // assistive tech never hears the field's name — the click-to-focus handler is
+  // not an association. Deriving it from the caller's `id` keeps the generated
+  // DOM predictable when the field is inside a form.
+  const fieldId =
+    typeof rest.id === "string" && rest.id
+      ? `${rest.id}-input`
+      : `fletbox-input-${++inputIdSeed}`;
+
   // DOM element references — populated during the build phase below
   let inputElement = null;
   let validationIcon = null;
   let errorMessageElement = null;
   let inputWrapper = null;
   let container = null;
+  let clearButton = null;
 
   // Whether the native input currently holds focus. Used to keep the focus
   // ring (a box-shadow) in sync with validation colors without ever changing
@@ -285,6 +306,7 @@ export const Input = (props) => {
     if (inputElement) {
       inputElement.value = filtered;
     }
+    if (clearButton) clearButton.style.display = filtered ? "flex" : "none";
 
     const result = validateValue(filtered);
     isValid = result.valid;
@@ -314,11 +336,17 @@ export const Input = (props) => {
   });
 
   // --- Optional label rendered above the input ---
-  if (label) {
-    const requiredMark = required ? " *" : "";
-    const labelEl = WidgetFactory({
+  let labelEl = null;
+  const renderLabel = (text) => {
+    if (labelEl) {
+      labelEl.textContent = text;
+      return;
+    }
+    if (!text) return;
+    labelEl = WidgetFactory({
       tag: "label",
-      text: label + requiredMark,
+      for: fieldId,
+      text,
       fontSize: 12,
       fontWeight: 500,
       color: error ? colors.danger : colors.textSecondary,
@@ -329,8 +357,23 @@ export const Input = (props) => {
     labelEl.addEventListener("click", () => {
       inputElement?.focus();
     });
-    container.appendChild(labelEl);
-  }
+    container.insertBefore(labelEl, container.firstChild);
+  };
+
+  if (label) renderLabel(label + (required ? " *" : ""));
+
+  // `label` is registered as a REACTIVE_PROP that maps to `textContent`, so if the
+  // factory ever sees it, `container.textContent = "…"` replaces this whole
+  // composite widget (label + wrapper + native <input> + icons) with a bare text
+  // node. Own the key and update the label element instead.
+  composeUpdate(container, ["label"], (props) => {
+    if (props.label === undefined) return;
+    renderLabel(props.label ? String(props.label) + (required ? " *" : "") : "");
+    // `makeReactive` writes the value back into `_originalProps` on every setter
+    // call; leaving it there means the next factory update merges it, maps it to
+    // `textContent` and wipes the widget anyway.
+    delete container._originalProps.label;
+  });
 
   // --- Wrapper — contains icons + native input, owns the border/fill style ---
   let wrapperStyles = {
@@ -385,6 +428,7 @@ export const Input = (props) => {
   //   - Accessibility (label association, screen readers)
   //   - Browser autofill support
   inputElement = document.createElement("input");
+  inputElement.id = fieldId;
   inputElement.type = type;
   inputElement.placeholder = placeholder || "";
   inputElement.disabled = disabled || false;
@@ -447,6 +491,75 @@ export const Input = (props) => {
 
   inputWrapper.appendChild(inputElement);
 
+  inputElement.addEventListener("keydown", (e) => {
+    // Enter is not a DOM event of its own: the callback receives the value the
+    // user just confirmed, after the same filtering `onChange` applies.
+    if (e.key === "Enter" && onEnter) onEnter(currentValue, e);
+  });
+
+  // --- Trailing controls (clear / reveal) ---
+  // Real `<button type="button">` elements: they are keyboard-reachable, and the
+  // `type` keeps them from submitting a form the input happens to live in.
+  const makeTrailingButton = (glyph, label, onPress) => {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.textContent = glyph;
+    btn.setAttribute("aria-label", label);
+    btn.style.width = "28px";
+    btn.style.height = "28px";
+    btn.style.flexShrink = "0";
+    btn.style.marginRight = "6px";
+    btn.style.padding = "0";
+    btn.style.border = "none";
+    btn.style.background = "transparent";
+    btn.style.color = colors.textSecondary;
+    btn.style.fontSize = "15px";
+    btn.style.lineHeight = "1";
+    btn.style.cursor = disabled ? "not-allowed" : "pointer";
+    btn.style.display = "flex";
+    btn.style.alignItems = "center";
+    btn.style.justifyContent = "center";
+    btn.addEventListener("click", (e) => {
+      // The wrapper focuses the input on any click; a trailing control must not
+      // steal that, and it must stay out of the form's submit path.
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled || readonly) return;
+      onPress(e);
+    });
+    inputWrapper.appendChild(btn);
+    return btn;
+  };
+
+  if (clearable) {
+    clearButton = makeTrailingButton("✕", "Clear", () => {
+      handleInput("", null);
+      inputElement.focus();
+    });
+    clearButton.style.display = currentValue ? "flex" : "none";
+  }
+
+  if (passwordToggle) {
+    let revealed = type !== "password";
+    const paint = (btn) => {
+      btn.textContent = revealed ? "🙈" : "👁";
+      btn.setAttribute("aria-label", revealed ? "Hide value" : "Show value");
+    };
+    const btn = makeTrailingButton("👁", "Show value", () => {
+      revealed = !revealed;
+      inputElement.type = revealed ? "text" : "password";
+      paint(btn);
+      // Keep the caret where the user left it: swapping the type recreates the
+      // native field's rendering, so refocusing without restoring the selection
+      // would jump the cursor to the end.
+      const end = inputElement.value.length;
+      inputElement.setSelectionRange?.(end, end);
+      inputElement.focus();
+    });
+    paint(btn);
+    // `inputElement.type` was already set from `type`; the button only mirrors it.
+  }
+
   // --- Inline validation icon (✓ / ✗) shown inside the input on the right ---
   if (showValidationIcon && validation !== "none") {
     validationIcon = document.createElement("span");

package/src/widgets/Inspector.js

@@ -162,6 +162,16 @@ export const Inspector = (widget, indent = 0) => {
   // Separate structural props from the rest so we can render them last
   const { child, children, ...otherProps } = props;
 
+  // `child` may legitimately be an ARRAY (`child: [Text(...)]`), which the
+  // factory accepts. Normalise it into the children list: otherwise the subtree
+  // is dropped and — because `child` is truthy — the DOM-children fallback below
+  // is skipped too, so the whole branch disappears from the output.
+  const childNode = Array.isArray(child) ? null : child;
+  const kids = [
+    ...(Array.isArray(child) ? child : []),
+    ...(Array.isArray(children) ? children : []),
+  ];
+
   const propsList = Object.entries(otherProps)
     .map(([key, value]) => {
       const formattedValue = stringifyValue(value, indent + 1);
@@ -171,14 +181,14 @@ export const Inspector = (widget, indent = 0) => {
 
   // Reconstruct a single `child` prop
   let childStr = "";
-  if (child && child.nodeType === 1) {
-    childStr = `\n${nextSpaces}child: ${Inspector(child, indent + 1)}`;
+  if (childNode && childNode.nodeType === 1) {
+    childStr = `\n${nextSpaces}child: ${Inspector(childNode, indent + 1)}`;
   }
 
-  // Reconstruct a `children` array prop
+  // Reconstruct a `children` array prop (including an array-valued `child`)
   let childrenStr = "";
-  if (children && Array.isArray(children) && children.length > 0) {
-    const childrenItems = children
+  if (kids.length > 0) {
+    const childrenItems = kids
       .filter((c) => c && c.nodeType === 1)
       .map((c) => Inspector(c, indent + 1))
       .join(",\n" + nextSpaces + "  ");
@@ -191,11 +201,7 @@ export const Inspector = (widget, indent = 0) => {
   // Fall back to actual DOM children when no explicit child/children props exist
   const domChildren = collectChildren(widget);
   let domChildrenStr = "";
-  if (
-    domChildren.length > 0 &&
-    !child &&
-    (!children || children.length === 0)
-  ) {
+  if (domChildren.length > 0 && !childNode && kids.length === 0) {
     const domChildrenItems = domChildren
       .map((c) => Inspector(c, indent + 1))
       .join(",\n" + nextSpaces + "  ");

package/src/widgets/ListView.js

@@ -128,6 +128,9 @@ export const ListView = (props) => {
   let visibleStart = 0,
     visibleEnd = 0; // current render window (avoids redundant re-renders when nothing changed)
   let ticking = false; // requestAnimationFrame guard for the scroll handler
+  let scrollRaf = 0; // id of the frame the scroll handler queued, so unmount can cancel it
+  let mountRaf = 0; // id of the first-render frame
+  let disposed = false; // after unmount no queued frame may touch the DOM or call back
   let headerElement = null,
     footerElement = null,
     emptyElement = null;
@@ -140,27 +143,35 @@ export const ListView = (props) => {
   /** @returns {number} Total number of rows (accounting for grid columns). */
   const getTotalRows = () => Math.ceil(_data.length / cols);
 
+  /** @returns {number} Height the header occupies inside the scroll container. */
+  const getHeaderHeight = () => headerElement?.offsetHeight || 0;
+
   /**
-   * Calculates the absolute top offset of an item, accounting for the header height.
+   * Calculates the absolute top offset of an item inside `innerContainer`.
+   *
+   * The header is a SIBLING placed above `innerContainer`, so the browser already
+   * pushes every row down by the header's height. Adding it here counted it twice:
+   * rows sat one header below where the window math expected them, and
+   * `scrollToIndex` overshot by the same amount.
+   *
    * @param {number} index - Zero-based item index.
    * @returns {number} Top position in pixels.
    */
   const getItemTop = (index) => {
     const row = Math.floor(index / cols);
-    const headerHeight = headerElement?.offsetHeight || 0;
-    return headerHeight + row * (itemSize + gap);
+    return row * (itemSize + gap);
   };
 
   /**
-   * Calculates the total logical height of the list including header and footer.
-   * This value is set on `innerContainer` so the scrollbar reflects the full list size.
+   * Calculates the logical height of the virtual item area. Header and footer are
+   * siblings of `innerContainer` and contribute to the scrollbar through their own
+   * layout boxes, so they must not be added here.
    * @returns {number} Total height in pixels.
    */
   const getTotalHeight = () => {
     const rows = getTotalRows();
-    const headerH = headerElement?.offsetHeight || 0;
-    const footerH = footerElement?.offsetHeight || 0;
-    return headerH + (rows * (itemSize + gap) - gap) + footerH;
+    if (rows === 0) return 0;
+    return Math.max(0, rows * (itemSize + gap) - gap);
   };
 
   /** Applies the correct logical height to the inner container. */
@@ -178,15 +189,17 @@ export const ListView = (props) => {
   const renderVisibleItems = () => {
     if (!scrollContainer) return;
 
-    const scrollTop = scrollContainer.scrollTop;
     const viewportH = scrollContainer.clientHeight;
     const itemTotalH = itemSize + gap;
+    // 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());
 
     // Clamp start/end rows to valid range, including the buffer zone
-    let startRow = Math.max(0, Math.floor(scrollTop / itemTotalH) - bufferSize);
+    let startRow = Math.max(0, Math.floor(itemsTop / itemTotalH) - bufferSize);
     let endRow = Math.min(
       getTotalRows(),
-      Math.ceil((scrollTop + viewportH) / itemTotalH) + bufferSize,
+      Math.ceil((itemsTop + viewportH) / itemTotalH) + bufferSize,
     );
 
     let start = startRow * cols;
@@ -247,24 +260,39 @@ export const ListView = (props) => {
    * Scroll event handler. Uses `requestAnimationFrame` throttling so the handler
    * runs at most once per frame even during rapid scroll events. Also checks
    * whether the user has scrolled close to the bottom and triggers `onEndReached`.
+   *
+   * The queued frame is tracked so unmounting can cancel it: an untracked frame
+   * rendered into a detached DOM and called `onEndReached` on a widget nobody owns
+   * anymore — which, for an infinite-scroll handler that appends data, is an
+   * unbounded fetch loop.
    */
   const handleScroll = () => {
-    if (!ticking) {
-      requestAnimationFrame(() => {
-        renderVisibleItems();
-        const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
-        if (
-          onEndReached &&
-          _data.length &&
-          scrollHeight - (scrollTop + clientHeight) <=
-            clientHeight * onEndReachedThreshold
-        ) {
-          onEndReached();
-        }
-        ticking = false;
-      });
-      ticking = true;
-    }
+    if (ticking || disposed) return;
+    ticking = true;
+    scrollRaf = requestAnimationFrame(() => {
+      scrollRaf = 0;
+      ticking = false;
+      if (disposed) return;
+      renderVisibleItems();
+      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;
+      if (
+        onEndReached &&
+        _data.length &&
+        scrollHeight - (scrollTop + clientHeight) <=
+          clientHeight * onEndReachedThreshold
+      ) {
+        onEndReached();
+      }
+    });
+  };
+
+  /**
+   * Recomputes the render window when the viewport itself changes size (window
+   * resize, a collapsing panel above the list). Without this, more rows becoming
+   * visible never triggered a render because no scroll event fired.
+   */
+  const handleViewportResize = () => {
+    if (!disposed) renderVisibleItems();
   };
 
   // ---- Header / footer / empty-state ----
@@ -407,8 +435,14 @@ export const ListView = (props) => {
   const updateData = (newData) => {
     _data = [...newData];
     itemCache.clear();
+    // The dataset changed but the viewport did not, so the previous window
+    // bounds would make `renderVisibleItems()` bail out and leave the OLD rows
+    // on screen for same-length data.
+    visibleStart = -1;
+    visibleEnd = -1;
     refreshUI();
-    element.data = _data;
+    // Do NOT write `element.data` here: `data` is an accessor whose setter calls
+    // this very function, so assigning to it recursed until the stack overflowed.
   };
 
   /**
@@ -418,7 +452,8 @@ export const ListView = (props) => {
    */
   const scrollToIndex = (index, animated = true) => {
     if (index < 0 || index >= _data.length) return;
-    const top = getItemTop(index);
+    // Back to SCROLL space: the header's height sits in front of the item area.
+    const top = getItemTop(index) + getHeaderHeight();
     scrollContainer.scrollTo({ top, behavior: animated ? "smooth" : "auto" });
   };
 
@@ -469,6 +504,8 @@ export const ListView = (props) => {
   });
 
   // ---- Lifecycle hooks ----
+  let resizeObserver = null;
+
   element.onMount(() => {
     renderHeader();
     renderFooter();
@@ -476,13 +513,21 @@ export const ListView = (props) => {
 
     // Defer the first actual render to the next animation frame so the header/footer
     // have already been measured and their heights are available.
-    requestAnimationFrame(() => {
+    mountRaf = requestAnimationFrame(() => {
+      mountRaf = 0;
+      if (disposed) return;
       updateInnerHeight(); // Recalculate total height now that header/footer are in the DOM
       renderVisibleItems(); // Render the initially visible rows
     });
 
     renderEmpty();
     scrollContainer.addEventListener("scroll", handleScroll);
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(handleViewportResize);
+      resizeObserver.observe(scrollContainer);
+    } else {
+      window.addEventListener("resize", handleViewportResize);
+    }
     if (onRefresh) setupPullToRefresh();
 
     // Inject the spinner keyframes once, globally, so pull-to-refresh has its animation
@@ -493,6 +538,11 @@ export const ListView = (props) => {
   });
 
   element.onUnmount(() => {
+    disposed = true;
+    if (scrollRaf) cancelAnimationFrame(scrollRaf);
+    if (mountRaf) cancelAnimationFrame(mountRaf);
+    if (resizeObserver) resizeObserver.disconnect();
+    else window.removeEventListener("resize", handleViewportResize);
     scrollContainer.removeEventListener("scroll", handleScroll);
     itemCache.clear();
   });

package/src/widgets/Markdown.js

@@ -5,6 +5,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";
 
 /**
@@ -36,19 +37,49 @@ let markdownScopeUid = 0;
  * @param {string} html - Raw HTML produced by `parseMarkdown`.
  * @returns {string} The sanitized HTML.
  */
+/** True for URL values that must never reach an attribute (see sanitizeMarkdown). */
+const isDangerousUrl = (value) => {
+  const v = String(value).replace(/[\u0000-\u0020]/g, "").toLowerCase();
+  if (v.startsWith("javascript:") || v.startsWith("vbscript:")) return true;
+  // Inline images are legitimate; every other `data:` URL is not.
+  return v.startsWith("data:") && !v.startsWith("data:image/");
+};
+
 const sanitizeMarkdown = (html) => {
   const withoutScripts = html.replace(
     /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
     "",
   );
-  return withoutScripts.replace(/<[^<>]+>/g, (tag) =>
-    tag
-      .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
-      .replace(
-        /\s(href|src|xlink:href|formaction|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*'|javascript:[^\s>]+)/gi,
-        ' $1="#"',
-      ),
-  );
+  // Parse for real and walk the tree. A regex over raw tags cannot see a `>`
+  // that sits *inside* a quoted attribute value, so `<img src="x>y" onerror=…>`
+  // used to pass through untouched while the browser kept the handler. Letting
+  // the browser tokenize removes that entire class of bypass.
+  try {
+    const doc = new DOMParser().parseFromString(withoutScripts, "text/html");
+    doc.querySelectorAll("script").forEach((node) => node.remove());
+    doc.querySelectorAll("*").forEach((node) => {
+      for (const attr of [...node.attributes]) {
+        if (attr.name.toLowerCase().startsWith("on")) {
+          node.removeAttribute(attr.name);
+        } else if (isDangerousUrl(attr.value)) {
+          // Neutralise rather than delete: the documented contract keeps the
+          // attribute and points it at "#", so links stay focusable and styled.
+          node.setAttribute(attr.name, "#");
+        }
+      }
+    });
+    return doc.body.innerHTML;
+  } catch {
+    // No DOMParser (non-browser host): keep the previous best-effort regex pass.
+    return withoutScripts.replace(/<[^<>]+>/g, (tag) =>
+      tag
+        .replace(/\son[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "")
+        .replace(
+          /\s(href|src|xlink:href|formaction|action)\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*'|javascript:[^\s>]+)/gi,
+          ' $1="#"',
+        ),
+    );
+  }
 };
 
 // ─── Syntax highlighting ────────────────────────────────────────────────────
@@ -1230,6 +1261,20 @@ export const Markdown = (props) => {
    */
   container.getSource = () => markdownText;
 
+  // `text`/`source`/`content` are reactive props mapped to `textContent` in the
+  // prop database, so letting the factory see them replaced the rendered
+  // Markdown with a bare text node. Own them and re-render instead.
+  composeUpdate(container, ["text", "source", "content"], (props) => {
+    const next = props.text ?? props.source ?? props.content;
+    if (next !== undefined) container.updateContent(String(next));
+    // `makeReactive` rewrites the value into `_originalProps` on every setter
+    // call; leaving it there means the next factory update maps it to
+    // `textContent` and wipes the widget anyway.
+    for (const key of ["text", "source", "content"]) {
+      delete container._originalProps[key];
+    }
+  });
+
   return container;
 };
 

package/src/widgets/Modal.js

@@ -312,6 +312,8 @@ export const Modal = (props = {}) => {
 
   let isOpen = false;
   let overlay = null;
+  // Pending "hide after the close animation" timer, so it can be cancelled.
+  let closeTimer = null;
   let modalBody = null;
 
   // Handlers
@@ -323,7 +325,11 @@ export const Modal = (props = {}) => {
       modalBody.style.opacity = "0";
     }
     if (overlay) overlay.style.opacity = "0";
-    setTimeout(() => {
+    // Keep the id: `handleOpen` clears it, otherwise a reopen within 300 ms gets
+    // a stale timer that hides an OPEN modal, leaving it invisible and unusable.
+    if (closeTimer) clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => {
+      closeTimer = null;
       if (overlay) overlay.style.visibility = "hidden";
     }, 300);
     if (closeOnEsc) document.removeEventListener("keydown", handleKeyDown);
@@ -333,6 +339,11 @@ export const Modal = (props = {}) => {
   const handleOpen = () => {
     if (isOpen) return;
     isOpen = true;
+    // Cancel any pending hide from a close that is still animating out.
+    if (closeTimer) {
+      clearTimeout(closeTimer);
+      closeTimer = null;
+    }
     if (overlay) {
       overlay.style.visibility = "visible";
       overlay.style.opacity = "1";
@@ -405,6 +416,18 @@ export const Modal = (props = {}) => {
   overlay.appendChild(modalBody);
   document.body.appendChild(overlay);
 
+  // The overlay lives in `document.body` and can be removed without `close()`
+  // ever running (a state rebuild, a route change, a 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;
+    }
+    if (closeOnEsc) document.removeEventListener("keydown", handleKeyDown);
+  });
+
   // Public API
   const instance = {
     open: handleOpen,

package/src/widgets/Pagination.js

@@ -72,7 +72,10 @@ export const Pagination = (props) => {
 
   const createPageButton = (page, isActive = false) => {
     const buttonVariant = isActive ? "filled" : variant;
-    const buttonColor = isActive ? color : colors.textSecondary;
+    // FIX: antes `isActive ? color : colors.textSecondary` — pero bgColor también
+    // es `color`, así que texto y fondo eran el mismo tono → número invisible.
+    // Uso blanco para el activo (texto sobre fondo de color).
+    const buttonColor = isActive ? "#ffffff" : colors.textSecondary;
 
     return Button({
       text: String(page),
@@ -98,7 +101,7 @@ export const Pagination = (props) => {
       ...buttonBase,
       onPress: onClick,
       disabled: disabled || isDisabled,
-      disableNativeEffects: true,
+      disableTransform: true,
     });
   };
 
@@ -192,4 +195,4 @@ export const Pagination = (props) => {
   return container;
 };
 
-export default Pagination;
+export default Pagination;