flowboard-react 0.6.8 → 0.6.12

package/lib/module/components/FlowboardRenderer.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Animated, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, Image, Vibration } from 'react-native';
 import MaskInput from 'react-native-mask-input';
 import LinearGradient from "../native/linearGradient.js";
@@ -12,6 +12,10 @@ import Svg, { Circle, G, Line, Polygon, SvgText } from "../native/svg.js";
 import { insetsToStyle, insetsToMarginStyle, parseAlignment, parseColor, parseCrossAlignment, parseDimension, parseFlexAlignment, parseFontWeight, parseInsets, parseResizeMode, parseTextAlign, parseTextDecoration, resolveNumericValue, resolveText } from "../utils/flowboardUtils.js";
 import { resolveFontAwesomeIcon, FontAwesome6 } from "../core/fontAwesome.js";
 import { useSliderRegistry } from "./widgets/sliderRegistry.js";
+import { isOverlayStack, isPositionedChild, resolveAlignmentToCss, resolveClipBehavior, resolveFitBehavior, resolveOverlayAlignmentValue, resolvePositionedStyle } from "./layout/stackOverlayModel.js";
+import { ensureGoogleFontLoaded as ensureWebGoogleFontLoaded, resolveFontFamily } from "../fonts/googleFontLoader.js";
+import { ensureFontLoaded as ensureNativeFontLoaded, isFontLoaded, resolveAppliedFontFamily, subscribeFontLoad } from "../fonts/fontLoader.js";
+import { resolveFontSpec } from "../fonts/fontResolver.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
   root: {
@@ -48,6 +52,126 @@ function getAxisBoundsForPageScroll(pageScroll) {
     heightBounded: true
   };
 }
+const LEGACY_SLIDE_DROP_KEYS = new Set(['badge']);
+function isDevelopmentMode() {
+  return process.env.NODE_ENV !== 'production';
+}
+function warnLegacySlideMigration(contextPath, componentId, droppedKeys) {
+  if (!isDevelopmentMode() || droppedKeys.length === 0) return;
+  const idSuffix = componentId ? ` (id: ${componentId})` : '';
+  console.warn(`[slider-migration] Migrated legacy slide to stack at "${contextPath}"${idSuffix}. Dropped unsupported keys: ${droppedKeys.join(', ')}`);
+}
+function warnLegacySliderChildWrap(contextPath, childType) {
+  if (!isDevelopmentMode()) return;
+  console.warn(`[slider-migration] Wrapped non-stack slider child at "${contextPath}" as a stack page${childType ? ` (type: ${childType})` : ''}.`);
+}
+function normalizeLegacySlidePropsToStackProps(input, contextPath, componentId) {
+  const props = input && typeof input === 'object' ? {
+    ...input
+  } : {};
+  const droppedKeys = [];
+  if (props.fill && typeof props.fill === 'object') {
+    const normalizedFill = {
+      ...props.fill
+    };
+    const fillType = String(normalizedFill.type ?? '').toLowerCase();
+    if (fillType === 'color') {
+      normalizedFill.type = 'solid';
+    }
+    props.fill = normalizedFill;
+  }
+  for (const key of LEGACY_SLIDE_DROP_KEYS) {
+    if (key in props) {
+      droppedKeys.push(key);
+      delete props[key];
+    }
+  }
+  warnLegacySlideMigration(contextPath, componentId, droppedKeys);
+  return props;
+}
+function createStackPageWrapper(child, pageIndex) {
+  return {
+    id: child?.id ? `${String(child.id)}-page` : `legacy-page-${pageIndex + 1}`,
+    type: 'stack',
+    properties: {
+      axis: 'vertical',
+      alignment: 'start',
+      distribution: 'start',
+      childSpacing: 0,
+      size: {
+        width: 'fill',
+        height: 'fit'
+      },
+      layout: {
+        margin: {
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0
+        }
+      },
+      appearance: {
+        shape: 'rectangle',
+        cornerRadius: 0
+      }
+    },
+    children: child ? [child] : []
+  };
+}
+function migrateLegacySlideNodes(input, contextPath = 'screen') {
+  if (Array.isArray(input)) {
+    return input.map((item, index) => migrateLegacySlideNodes(item, `${contextPath}[${index}]`));
+  }
+  if (!input || typeof input !== 'object') return input;
+  const node = {
+    ...input
+  };
+  const rawType = String(node.type ?? '');
+  if (Array.isArray(node.children)) {
+    node.children = node.children.map((child, index) => migrateLegacySlideNodes(child, `${contextPath}.children[${index}]`));
+  }
+  if (node.child && typeof node.child === 'object') {
+    node.child = migrateLegacySlideNodes(node.child, `${contextPath}.child`);
+  }
+  if (Array.isArray(node.options)) {
+    node.options = node.options.map((option, index) => {
+      if (!option || typeof option !== 'object') return option;
+      const optionNode = {
+        ...option
+      };
+      if (optionNode.child && typeof optionNode.child === 'object') {
+        optionNode.child = migrateLegacySlideNodes(optionNode.child, `${contextPath}.options[${index}].child`);
+      }
+      return optionNode;
+    });
+  }
+  if (rawType === 'slide') {
+    node.type = 'stack';
+    node.properties = normalizeLegacySlidePropsToStackProps(node.properties ?? {}, contextPath, node.id ? String(node.id) : undefined);
+  }
+  if (String(node.type ?? '') === 'slider') {
+    const children = Array.isArray(node.children) ? node.children : [];
+    const normalizedPages = children.map((child, index) => {
+      if (!child || typeof child !== 'object') {
+        warnLegacySliderChildWrap(`${contextPath}.children[${index}]`, undefined);
+        return createStackPageWrapper(null, index);
+      }
+      const pageNode = child;
+      const childType = String(pageNode.type ?? '');
+      if (childType === 'stack') return pageNode;
+      warnLegacySliderChildWrap(`${contextPath}.children[${index}]`, childType);
+      return createStackPageWrapper(pageNode, index);
+    });
+    node.children = normalizedPages.length > 0 ? normalizedPages : [createStackPageWrapper(null, 0)];
+  }
+  return node;
+}
+function useGoogleFontLoadSignal() {
+  const [, setVersion] = useState(0);
+  useEffect(() => subscribeFontLoad(() => {
+    setVersion(version => version + 1);
+  }), []);
+}
 export default function FlowboardRenderer(props) {
   const {
     screenData,
@@ -58,28 +182,30 @@ export default function FlowboardRenderer(props) {
     currentIndex = 0,
     totalScreens = 1
   } = props;
-  const childrenData = Array.isArray(screenData.children) ? screenData.children : [];
-  const backgroundData = screenData.background;
-  const bgColorCode = screenData.backgroundColor;
-  const showProgress = screenData.showProgress === true;
-  const progressColor = parseColor(screenData.progressColor ?? '0xFF000000');
-  const progressThickness = Number(screenData.progressThickness ?? 4);
-  const progressRadius = Number(screenData.progressRadius ?? 0);
-  const progressStyle = screenData.progressStyle ?? 'linear';
-  const pageScroll = resolvePageScrollAxis(screenData);
+  useGoogleFontLoadSignal();
+  const migratedScreenData = useMemo(() => migrateLegacySlideNodes(screenData, 'screen') ?? {}, [screenData]);
+  const childrenData = Array.isArray(migratedScreenData.children) ? migratedScreenData.children : [];
+  const backgroundData = migratedScreenData.background;
+  const bgColorCode = migratedScreenData.backgroundColor;
+  const showProgress = migratedScreenData.showProgress === true;
+  const progressColor = parseColor(migratedScreenData.progressColor ?? '0xFF000000');
+  const progressThickness = Number(migratedScreenData.progressThickness ?? 4);
+  const progressRadius = Number(migratedScreenData.progressRadius ?? 0);
+  const progressStyle = migratedScreenData.progressStyle ?? 'linear';
+  const pageScroll = resolvePageScrollAxis(migratedScreenData);
   const pageAxisBounds = getAxisBoundsForPageScroll(pageScroll);
   const scrollable = pageScroll !== 'none';
-  const safeArea = screenData.safeArea !== false;
+  const safeArea = migratedScreenData.safeArea !== false;
   const safeAreaInsets = useSafeAreaInsets();
   const rootAxis = 'vertical';
-  const padding = parseInsets(screenData.padding);
+  const padding = parseInsets(migratedScreenData.padding);
   const contentPaddingStyle = insetsToStyle(padding);
   const progressPaddingStyle = {
     paddingTop: padding.top,
     paddingRight: padding.right,
     paddingLeft: padding.left
   };
-  const rootCrossAxisAlignment = screenData.crossAxisAlignment ?? screenData.crossAxis;
+  const rootCrossAxisAlignment = migratedScreenData.crossAxisAlignment ?? migratedScreenData.crossAxis;
   const safeAreaPaddingStyle = safeArea ? {
     paddingTop: safeAreaInsets.top,
     paddingRight: safeAreaInsets.right,
@@ -100,6 +226,7 @@ export default function FlowboardRenderer(props) {
       keyboardShouldPersistTaps: "handled",
       keyboardDismissMode: Platform.OS === 'ios' ? 'interactive' : 'on-drag',
       contentContainerStyle: {
+        flexGrow: 1,
         ...contentPaddingStyle,
         paddingTop: showProgress ? 0 : padding.top
       },
@@ -107,9 +234,9 @@ export default function FlowboardRenderer(props) {
         style: {
           flexGrow: 1,
           flexDirection: 'column',
-          justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+          justifyContent: parseFlexAlignment(migratedScreenData.mainAxisAlignment),
           alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
-          minHeight: 0,
+          minHeight: '100%',
           minWidth: 0
         },
         children: childrenData.map((child, index) => buildWidget(child, {
@@ -120,7 +247,7 @@ export default function FlowboardRenderer(props) {
           parentFlexAxis: rootAxis,
           parentMainAxisBounded: pageAxisBounds.heightBounded,
           pageAxisBounds,
-          screenData,
+          screenData: migratedScreenData,
           enableFontAwesomeIcons,
           key: `child-${index}`
         }))
@@ -130,7 +257,7 @@ export default function FlowboardRenderer(props) {
         flex: 1,
         ...contentPaddingStyle,
         paddingTop: showProgress ? 0 : padding.top,
-        justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+        justifyContent: parseFlexAlignment(migratedScreenData.mainAxisAlignment),
         alignItems: parseRootCrossAlignment(rootCrossAxisAlignment)
       },
       children: childrenData.map((child, index) => buildWidget(child, {
@@ -141,7 +268,7 @@ export default function FlowboardRenderer(props) {
         parentFlexAxis: rootAxis,
         parentMainAxisBounded: true,
         pageAxisBounds,
-        screenData,
+        screenData: migratedScreenData,
         enableFontAwesomeIcons,
         key: `child-${index}`
       }))
@@ -374,7 +501,7 @@ function normalizeStackAxis(type, props) {
   if (type === 'layout') {
     return props.direction === 'horizontal' ? 'horizontal' : 'vertical';
   }
-  if (type === 'stack' && (props.fit !== undefined || isLegacyOverlayAlignment(props.alignment))) {
+  if (type === 'stack' && isLegacyOverlayAlignment(props.alignment)) {
     return 'overlay';
   }
   return 'vertical';
@@ -422,7 +549,7 @@ function normalizeOverlayAlignment(value) {
     case 'bottomRight':
       return 'bottomEnd';
     default:
-      return 'center';
+      return 'topStart';
   }
 }
 function isFillDimensionValue(value) {
@@ -445,6 +572,51 @@ function normalizeStackSizeMode(value) {
   }
   return undefined;
 }
+export function resolveFillSizeStyle(size, options) {
+  const allowWidthFill = options?.allowWidthFill !== false;
+  const allowHeightFill = options?.allowHeightFill !== false;
+  const fillWidth = allowWidthFill && normalizeStackSizeMode(size?.width) === 'fill';
+  const fillHeight = allowHeightFill && normalizeStackSizeMode(size?.height) === 'fill';
+  const style = {};
+  if (fillWidth) {
+    style.width = '100%';
+    style.alignSelf = 'stretch';
+    style.minWidth = 0;
+  }
+  if (fillHeight) {
+    style.height = '100%';
+    style.flexGrow = 1;
+    style.flexShrink = 1;
+    style.flexBasis = 'auto';
+    style.minHeight = 0;
+  }
+  if (fillWidth && fillHeight) {
+    style.flexGrow = 1;
+    style.flexShrink = 1;
+    style.flexBasis = 'auto';
+  }
+  return style;
+}
+function resolveOverlayContainerFitStyle(props, axisBounds) {
+  if (resolveFitBehavior(props.fit) !== 'expand') return {};
+  const widthMode = normalizeStackSizeMode(props.size?.width);
+  const heightMode = normalizeStackSizeMode(props.size?.height);
+  const style = {
+    minWidth: 0,
+    minHeight: 0
+  };
+  if (axisBounds.widthBounded && widthMode !== 'fixed') {
+    style.width = '100%';
+    style.alignSelf = 'stretch';
+  }
+  if (axisBounds.heightBounded && heightMode !== 'fixed') {
+    style.height = '100%';
+    style.flexGrow = 1;
+    style.flexShrink = 1;
+    style.flexBasis = 'auto';
+  }
+  return style;
+}
 function wantsFillWidth(props) {
   return normalizeStackSizeMode(props.size?.width) === 'fill' || isFillDimensionValue(props.width);
 }
@@ -467,13 +639,21 @@ function normalizeStackFill(props) {
       ...props.fill
     };
     if (!next.type && next.color) next.type = 'solid';
+    if (String(next.type ?? '').toLowerCase() === 'color') {
+      next.type = 'solid';
+    }
+    const fillType = String(next.type ?? '').toLowerCase();
+    if ((fillType === '' || fillType === 'solid') && (typeof next.color !== 'string' || next.color.trim().length === 0)) {
+      next.type = 'solid';
+      next.color = '0x00FFFFFF';
+    }
     return next;
   }
   if (props.background && typeof props.background === 'object') {
     if (props.background.type === 'color') {
       return {
         type: 'solid',
-        color: props.background.color
+        color: typeof props.background.color === 'string' && props.background.color.trim().length > 0 ? props.background.color : '0x00FFFFFF'
       };
     }
     return {
@@ -486,7 +666,10 @@ function normalizeStackFill(props) {
       color: props.backgroundColor
     };
   }
-  return undefined;
+  return {
+    type: 'solid',
+    color: '0x00FFFFFF'
+  };
 }
 function normalizeStackBorder(props) {
   if (props.border && typeof props.border === 'object') {
@@ -563,8 +746,17 @@ function mergeStackProps(parentProps, childProps) {
       cornerRadius: Number(childProps.appearance?.cornerRadius ?? parentProps.appearance?.cornerRadius ?? 0)
     }
   };
-  if (axis === 'overlay') {
-    mergedProps.overlayAlignment = childProps.overlayAlignment ?? parentProps.overlayAlignment ?? 'center';
+  if (axis === 'overlay' || childProps.overlayAlignment !== undefined || parentProps.overlayAlignment !== undefined || childProps.mode === 'overlay' || parentProps.mode === 'overlay') {
+    mergedProps.overlayAlignment = childProps.overlayAlignment ?? parentProps.overlayAlignment ?? 'topStart';
+  }
+  if (childProps.mode !== undefined || parentProps.mode !== undefined) {
+    mergedProps.mode = childProps.mode ?? parentProps.mode;
+  }
+  if (childProps.fit !== undefined || parentProps.fit !== undefined) {
+    mergedProps.fit = childProps.fit ?? parentProps.fit;
+  }
+  if (childProps.clipBehavior !== undefined || parentProps.clipBehavior !== undefined) {
+    mergedProps.clipBehavior = childProps.clipBehavior ?? parentProps.clipBehavior;
   }
   if (parentProps.fill || childProps.fill) {
     mergedProps.fill = childProps.fill ?? parentProps.fill;
@@ -612,9 +804,16 @@ function normalizeStackLikeNode(json) {
       cornerRadius: Number(props.appearance?.cornerRadius ?? props.borderRadius ?? 0)
     }
   };
-  if (axis === 'overlay') {
-    normalizedProps.overlayAlignment = normalizeOverlayAlignment(props.overlayAlignment ?? props.alignment);
+  if (props.mode === 'overlay' || props.mode === 'linear') {
+    normalizedProps.mode = props.mode;
   }
+  if (props.fit === 'expand' || props.fit === 'loose' || String(props.fit).toLowerCase() === 'expand' || String(props.fit).toLowerCase() === 'loose') {
+    normalizedProps.fit = String(props.fit).toLowerCase() === 'expand' ? 'expand' : 'loose';
+  }
+  if (String(props.clipBehavior ?? '').toLowerCase() === 'none' || String(props.clipBehavior ?? '').toLowerCase() === 'hardedge') {
+    normalizedProps.clipBehavior = String(props.clipBehavior).toLowerCase() === 'hardedge' ? 'hardEdge' : 'none';
+  }
+  normalizedProps.overlayAlignment = normalizeOverlayAlignment(props.overlayAlignment ?? props.alignment);
   const fill = normalizeStackFill(props);
   if (fill) normalizedProps.fill = fill;
   const border = normalizeStackBorder(props);
@@ -650,56 +849,6 @@ function normalizeStackLikeNode(json) {
     child: undefined
   };
 }
-function parseOverlayGridAlignment(value) {
-  switch (normalizeOverlayAlignment(value)) {
-    case 'topStart':
-      return {
-        justifyContent: 'flex-start',
-        alignItems: 'flex-start'
-      };
-    case 'top':
-      return {
-        justifyContent: 'flex-start',
-        alignItems: 'center'
-      };
-    case 'topEnd':
-      return {
-        justifyContent: 'flex-start',
-        alignItems: 'flex-end'
-      };
-    case 'start':
-      return {
-        justifyContent: 'center',
-        alignItems: 'flex-start'
-      };
-    case 'end':
-      return {
-        justifyContent: 'center',
-        alignItems: 'flex-end'
-      };
-    case 'bottomStart':
-      return {
-        justifyContent: 'flex-end',
-        alignItems: 'flex-start'
-      };
-    case 'bottom':
-      return {
-        justifyContent: 'flex-end',
-        alignItems: 'center'
-      };
-    case 'bottomEnd':
-      return {
-        justifyContent: 'flex-end',
-        alignItems: 'flex-end'
-      };
-    case 'center':
-    default:
-      return {
-        justifyContent: 'center',
-        alignItems: 'center'
-      };
-  }
-}
 function resolveStackDimension(props, axis, key, axisBounds) {
   const mode = props.size?.[key];
   const legacy = normalizeDimension(parseLayoutDimension(props[key]));
@@ -713,6 +862,21 @@ function resolveStackDimension(props, axis, key, axisBounds) {
   if (key === 'height' && axis === 'horizontal' && axisBounds.heightBounded) return '100%';
   return undefined;
 }
+function resolveTextWidthMode(props) {
+  const raw = String(props.size?.width ?? '').trim().toLowerCase();
+  if (raw === 'fill' || raw === 'infinity' || raw === 'infinite' || raw === 'double.infinity' || raw === '+infinity') {
+    return 'fill';
+  }
+  if (raw === 'fit') return 'fit';
+  if (raw === 'fixed') return 'fixed';
+  if (isFillDimensionValue(props.width)) return 'fill';
+  return props.width !== undefined ? 'fixed' : 'fit';
+}
+function resolveTextFixedWidth(props) {
+  const explicit = normalizeDimension(parseLayoutDimension(props.width, true));
+  if (explicit !== undefined) return explicit;
+  return normalizeDimension(parseLayoutDimension(props.size?.widthPx, true));
+}
 function buildWidget(json, params) {
   if (!json || typeof json !== 'object') return null;
   const normalizedJson = normalizeStackLikeNode(json);
@@ -831,6 +995,13 @@ function buildWidget(json, params) {
         const gradient = parseGradient(props.foreground);
         const textStyle = getTextStyle(props, 'color');
         const align = parseTextAlign(props.textAlign);
+        const widthMode = resolveTextWidthMode(props);
+        const fixedWidth = resolveTextFixedWidth(props);
+        const widthBounded = params.pageAxisBounds?.widthBounded ?? true;
+        // Shared width-mode contract across React/Flutter:
+        // fit = intrinsic width (no flex, no 100% stretch)
+        // fill = expand within bounded parent constraints
+        // fixed = explicit width value
         if (gradient) {
           node = /*#__PURE__*/_jsx(GradientText, {
             text: resolvedText,
@@ -847,6 +1018,58 @@ function buildWidget(json, params) {
             children: resolvedText
           });
         }
+        if (widthMode === 'fill') {
+          if (params.parentFlexAxis === 'horizontal') {
+            if (params.parentMainAxisBounded ?? true) {
+              node = /*#__PURE__*/_jsx(View, {
+                style: {
+                  flex: 1,
+                  minWidth: 0,
+                  alignSelf: 'stretch'
+                },
+                children: node
+              });
+            } else {
+              node = /*#__PURE__*/_jsx(View, {
+                style: {
+                  minWidth: 0
+                },
+                children: node
+              });
+            }
+          } else if (widthBounded) {
+            node = /*#__PURE__*/_jsx(View, {
+              style: {
+                width: '100%',
+                minWidth: 0,
+                alignSelf: 'stretch'
+              },
+              children: node
+            });
+          } else {
+            node = /*#__PURE__*/_jsx(View, {
+              style: {
+                minWidth: 0
+              },
+              children: node
+            });
+          }
+        } else if (widthMode === 'fixed') {
+          node = /*#__PURE__*/_jsx(View, {
+            style: {
+              width: fixedWidth,
+              minWidth: 0
+            },
+            children: node
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(View, {
+            style: {
+              minWidth: 0
+            },
+            children: node
+          });
+        }
         break;
       }
     case 'rich_text':
@@ -1214,11 +1437,11 @@ function buildWidget(json, params) {
         const direction = props.direction === 'vertical' ? 'vertical' : 'horizontal';
         const interaction = props.interaction ?? {};
         const pageControl = props.pageControl ?? {};
-        const sliderChildren = (childrenJson ?? []).filter(Boolean);
+        const sliderPages = (childrenJson ?? []).filter(child => child && String(child.type ?? '') === 'stack');
         node = /*#__PURE__*/_jsx(SliderWidget, {
-          id: json._internalId,
+          id: json._internalId ?? json.id,
           sliderProps: props,
-          slidePropsList: sliderChildren.map(child => child?.properties ?? {}),
+          pagePropsList: sliderPages.map(child => child?.properties ?? {}),
           direction: direction,
           pageAlignment: props.pageAlignment === 'start' || props.pageAlignment === 'end' ? props.pageAlignment : 'center',
           pageSpacing: Number(props.pageSpacing ?? 16),
@@ -1228,27 +1451,19 @@ function buildWidget(json, params) {
           autoAdvanceIntervalMs: Number(interaction.autoAdvanceIntervalMs ?? 4000),
           pageControlEnabled: pageControl.enabled !== false,
           pageControlPosition: pageControl.position === 'top' ? 'top' : 'bottom',
-          children: sliderChildren.map((child, index) => /*#__PURE__*/_jsx(View, {
+          children: sliderPages.map((child, index) => /*#__PURE__*/_jsx(View, {
             children: buildWidget(child, {
-              ...params
+              ...params,
+              // Slider pages always render inside a bounded pager viewport.
+              pageAxisBounds: {
+                widthBounded: true,
+                heightBounded: true
+              }
             })
           }, `slider-${index}`))
         });
         break;
       }
-    case 'slide':
-      {
-        node = buildWidget({
-          ...json,
-          type: 'stack',
-          properties: {
-            ...(props || {})
-          }
-        }, {
-          ...params
-        });
-        break;
-      }
     case 'pageview_indicator':
       {
         node = /*#__PURE__*/_jsx(PageViewIndicator, {
@@ -1306,12 +1521,13 @@ function buildWidget(json, params) {
       }
     case 'stack':
       {
-        const axis = props.axis === 'horizontal' || props.axis === 'overlay' ? props.axis : 'vertical';
-        const isOverlay = axis === 'overlay';
+        const axis = props.axis === 'horizontal' ? 'horizontal' : 'vertical';
+        const isOverlay = isOverlayStack(childrenJson, props);
         const spacing = Number(props.childSpacing ?? 0);
         const applySpacing = !STACK_SPACE_DISTRIBUTIONS.has(String(props.distribution ?? 'start'));
-        const width = resolveStackDimension(props, axis, 'width', pageAxisBounds);
-        const height = resolveStackDimension(props, axis, 'height', pageAxisBounds);
+        const resolvedAxis = isOverlay ? 'overlay' : axis;
+        const width = resolveStackDimension(props, resolvedAxis, 'width', pageAxisBounds);
+        const height = resolveStackDimension(props, resolvedAxis, 'height', pageAxisBounds);
         const mainAxisBounded = axis === 'horizontal' ? pageAxisBounds.widthBounded : pageAxisBounds.heightBounded;
         const borderRadius = Number(props.appearance?.cornerRadius ?? props.borderRadius ?? 0);
         const borderWidth = Number(props.border?.width ?? 0);
@@ -1334,12 +1550,17 @@ function buildWidget(json, params) {
           ...fill,
           type: 'gradient'
         }) : undefined;
-        const stackColor = fill?.type === 'solid' || !fill?.type && fill?.color ? parseColor(fill?.color ?? '#FFFFFFFF') : parseColor(props.backgroundColor ?? '#00000000');
+        const stackColor = fill?.type === 'solid' || !fill?.type && fill?.color ? parseColor(fill?.color ?? '0x00FFFFFF') : parseColor(props.backgroundColor ?? '#00000000');
         const baseStackStyle = {
           width,
           height,
+          ...resolveFillSizeStyle(props.size, {
+            allowWidthFill: pageAxisBounds.widthBounded,
+            allowHeightFill: pageAxisBounds.heightBounded
+          }),
+          ...(isOverlay ? resolveOverlayContainerFitStyle(props, pageAxisBounds) : {}),
           borderRadius: borderRadius > 0 ? borderRadius : undefined,
-          overflow: borderRadius > 0 ? 'hidden' : undefined,
+          overflow: isOverlay ? resolveClipBehavior(props.clipBehavior) === 'hardEdge' ? 'hidden' : 'visible' : borderRadius > 0 ? 'hidden' : undefined,
           borderWidth: borderColor ? borderWidth : undefined,
           borderColor: borderColor ?? undefined,
           ...shadowStyle
@@ -1356,7 +1577,24 @@ function buildWidget(json, params) {
             ...stackContentSizeStyle
           },
           children: [(childrenJson ?? []).map((child, index) => {
-            const alignment = parseOverlayGridAlignment(props.overlayAlignment ?? props.alignment);
+            if (isPositionedChild(child)) {
+              if (String(child?.type ?? '') === 'positioned') {
+                return /*#__PURE__*/_jsx(React.Fragment, {
+                  children: buildWidget(child, {
+                    ...params,
+                    pageAxisBounds
+                  })
+                }, `stack-overlay-positioned-${index}`);
+              }
+              return /*#__PURE__*/_jsx(View, {
+                style: resolvePositionedStyle(child?.properties ?? {}),
+                children: buildWidget(child, {
+                  ...params,
+                  pageAxisBounds
+                })
+              }, `stack-overlay-positioned-${index}`);
+            }
+            const alignment = resolveAlignmentToCss(resolveOverlayAlignmentValue(props));
             return /*#__PURE__*/_jsx(View, {
               style: {
                 position: 'absolute',
@@ -1372,7 +1610,7 @@ function buildWidget(json, params) {
                 allowFlexExpansion: true,
                 pageAxisBounds
               })
-            }, `stack-overlay-${index}`);
+            }, `stack-overlay-non-positioned-${index}`);
           }), (childrenJson ?? []).length === 0 ? null : null]
         }) : /*#__PURE__*/_jsx(View, {
           style: {
@@ -1420,22 +1658,8 @@ function buildWidget(json, params) {
       }
     case 'positioned':
       {
-        const left = parseLayoutDimension(props.left);
-        const top = parseLayoutDimension(props.top);
-        const right = parseLayoutDimension(props.right);
-        const bottom = parseLayoutDimension(props.bottom);
-        const width = parseLayoutDimension(props.width);
-        const height = parseLayoutDimension(props.height);
         node = /*#__PURE__*/_jsx(View, {
-          style: {
-            position: 'absolute',
-            left,
-            top,
-            right,
-            bottom,
-            width,
-            height
-          },
+          style: resolvePositionedStyle(props),
           children: childJson ? buildWidget(childJson, {
             ...params
           }) : null
@@ -1486,6 +1710,7 @@ function buildWidget(json, params) {
     let shouldExpand = false;
     const parentAxis = params.parentFlexAxis ?? 'vertical';
     const parentMainAxisBounded = params.parentMainAxisBounded ?? true;
+    const sliderWantsMainAxisFill = type === 'slider' && (parentAxis === 'vertical' && wantsFillHeight(props) || parentAxis === 'horizontal' && wantsFillWidth(props));
     if (parentMainAxisBounded) {
       if (type === 'stack') {
         const legacyExpand = props.fit === 'expand';
@@ -1511,12 +1736,18 @@ function buildWidget(json, params) {
         }
       }
     }
+    if (sliderWantsMainAxisFill) {
+      shouldExpand = true;
+    }
     if (shouldExpand) {
+      // Keep cross-axis stretching on the outer expansion wrapper as well.
+      // Without this, a centered parent cross-axis can collapse effective fill width/height.
       node = /*#__PURE__*/_jsx(View, {
         style: {
           flex: 1,
           minHeight: 0,
-          minWidth: 0
+          minWidth: 0,
+          alignSelf: shouldStretchCrossAxis ? 'stretch' : undefined
         },
         children: node
       });
@@ -1548,9 +1779,30 @@ function buildActionPayload(props, json) {
   return payload;
 }
 function getTextStyle(props, colorKey, defaultColor) {
-  const fontFamily = props.fontFamily;
+  const requestedFontFamily = resolveFontFamily(props.fontFamily);
   const fontSize = Number(props.fontSize ?? 14);
-  const fontWeight = parseFontWeight(props.fontWeight);
+  const parsedFontWeight = parseFontWeight(props.fontWeight);
+  const requestedWeight = Number(parsedFontWeight);
+  const numericRequestedWeight = Number.isFinite(requestedWeight) ? requestedWeight : undefined;
+  let fontFamily = requestedFontFamily;
+  let fontWeight = parsedFontWeight;
+  if (Platform.OS === 'web' && requestedFontFamily) {
+    const resolvedSpec = resolveFontSpec({
+      family: requestedFontFamily,
+      requestedWeight: numericRequestedWeight
+    });
+    fontFamily = resolvedSpec.resolvedFamily;
+    fontWeight = resolvedSpec.resolvedWeight !== undefined ? String(resolvedSpec.resolvedWeight) : parsedFontWeight;
+    ensureWebGoogleFontLoaded(resolvedSpec.resolvedFamily, [fontWeight]);
+  } else if (requestedFontFamily) {
+    const resolvedSpec = resolveFontSpec({
+      family: requestedFontFamily,
+      requestedWeight: numericRequestedWeight
+    });
+    void ensureNativeFontLoaded(resolvedSpec).catch(() => undefined);
+    fontWeight = undefined;
+    fontFamily = isFontLoaded(resolvedSpec) ? resolveAppliedFontFamily(resolvedSpec) : resolvedSpec.resolvedFamily;
+  }
   const fontStyle = props.fontStyle === 'italic' ? 'italic' : 'normal';
   const color = parseColor(props[colorKey] ?? defaultColor ?? '0xFF000000');
   const letterSpacing = props.letterSpacing !== undefined ? Number(props.letterSpacing) : undefined;
@@ -1573,7 +1825,8 @@ function parseGradient(value) {
   if (colors.length === 0) return undefined;
   const start = alignmentToGradient(value.begin ?? 'topLeft');
   const end = alignmentToGradient(value.end ?? 'bottomRight');
-  const stops = Array.isArray(value.stops) ? value.stops.map(s => Number(s)) : undefined;
+  const parsedStops = Array.isArray(value.stops) ? value.stops.map(s => Number(s)) : undefined;
+  const stops = parsedStops && parsedStops.length === colors.length ? parsedStops : undefined;
   return {
     colors,
     start,
@@ -1910,9 +2163,16 @@ function GradientText({
   gradient,
   style
 }) {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: [style, getWebGradientTextStyle(gradient)],
+      children: text
+    });
+  }
   return /*#__PURE__*/_jsx(MaskedView, {
     maskElement: /*#__PURE__*/_jsx(Text, {
       style: [style, {
+        color: '#FFFFFF',
         backgroundColor: 'transparent'
       }],
       children: text
@@ -1924,6 +2184,7 @@ function GradientText({
       locations: gradient.stops,
       children: /*#__PURE__*/_jsx(Text, {
         style: [style, {
+          color: '#FFFFFF',
           opacity: 0
         }],
         children: text
@@ -1931,6 +2192,27 @@ function GradientText({
     })
   });
 }
+function getWebGradientTextStyle(gradient) {
+  const angle = gradientToCssAngle(gradient.start, gradient.end);
+  const normalizedStops = gradient.stops && gradient.stops.length === gradient.colors.length ? gradient.stops.map(stop => `${clamp01(stop) * 100}%`) : undefined;
+  const gradientStops = gradient.colors.map((color, index) => {
+    if (!normalizedStops) return color;
+    return `${color} ${normalizedStops[index]}`;
+  });
+  return {
+    backgroundImage: `linear-gradient(${angle}deg, ${gradientStops.join(', ')})`,
+    backgroundClip: 'text',
+    WebkitBackgroundClip: 'text',
+    color: 'transparent'
+  };
+}
+function gradientToCssAngle(start, end) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const radians = Math.atan2(dy, dx);
+  const degrees = radians * 180 / Math.PI;
+  return (degrees + 90 + 360) % 360;
+}
 function resolveTextInputBackgroundColor(properties) {
   const canonical = properties.backgroundColor;
   if (typeof canonical === 'string' && canonical.trim().length > 0) {
@@ -2772,10 +3054,18 @@ function FakeProgressBar({
     });
   }
   return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: '100%',
+      alignSelf: 'stretch',
+      minWidth: 0,
+      flexDirection: 'column'
+    },
     children: [/*#__PURE__*/_jsx(View, {
       style: {
         height: thickness,
         width: '100%',
+        alignSelf: 'stretch',
+        minWidth: 0,
         borderRadius,
         backgroundColor,
         overflow: 'hidden'
@@ -2793,7 +3083,9 @@ function FakeProgressBar({
       })
     }), showProgressText ? /*#__PURE__*/_jsx(Text, {
       style: [progressTextStyle, {
-        marginTop: 8
+        marginTop: 8,
+        width: '100%',
+        alignSelf: 'stretch'
       }],
       children: progressText
     }) : null]
@@ -2810,12 +3102,20 @@ export function resolvePeekInsets(pageAlignment, pagePeek) {
 }
 function resolveSliderSizeMode(sliderProps, key, fallback) {
   const raw = String(sliderProps?.size?.[key] ?? '').toLowerCase();
-  if (raw === 'fill' || raw === 'fit' || raw === 'fixed') return raw;
+  if (raw === 'fill' || raw === 'infinity' || raw === 'infinite' || raw === 'double.infinity' || raw === '+infinity') {
+    return 'fill';
+  }
+  if (raw === 'fit' || raw === 'fixed') return raw;
+  if (isFillDimensionValue(sliderProps?.[key])) return 'fill';
   return sliderProps?.[key] !== undefined ? 'fixed' : fallback;
 }
-function resolveSlideSizeMode(slideProps, key) {
-  const raw = String(slideProps?.size?.[key] ?? '').toLowerCase();
-  if (raw === 'fill' || raw === 'fit' || raw === 'fixed') return raw;
+function resolvePageSizeMode(pageProps, key) {
+  const raw = String(pageProps?.size?.[key] ?? '').toLowerCase();
+  if (raw === 'fill' || raw === 'infinity' || raw === 'infinite' || raw === 'double.infinity' || raw === '+infinity') {
+    return 'fill';
+  }
+  if (raw === 'fit' || raw === 'fixed') return raw;
+  if (isFillDimensionValue(pageProps?.[key])) return 'fill';
   return key === 'width' ? 'fill' : 'fit';
 }
 function toFinite(value) {
@@ -2827,11 +3127,13 @@ function toFinite(value) {
   return null;
 }
 export function resolveSliderContainerSize(args) {
-  const dotsInset = args.showDots ? 8 + 6 + 8 : 0;
-  const fitPrimary = args.direction === 'horizontal' ? args.activeSlideWidth : args.activeSlideHeight;
+  const dotsTopInset = Math.max(0, args.dotsTopInset ?? 0);
+  const dotsBottomInset = Math.max(0, args.dotsBottomInset ?? (args.showDots ? 18 : 0));
+  const dotsInset = dotsTopInset + dotsBottomInset;
+  const fitPrimary = args.direction === 'horizontal' ? args.activePageWidth : args.activePageHeight;
   const fitViewportPrimary = Math.max(1, fitPrimary + args.leadingPeek + args.trailingPeek);
-  const viewportWidth = args.direction === 'horizontal' ? fitViewportPrimary : Math.max(1, args.activeSlideWidth);
-  const viewportHeight = args.direction === 'vertical' ? fitViewportPrimary : Math.max(1, args.activeSlideHeight);
+  const viewportWidth = args.direction === 'horizontal' ? fitViewportPrimary : Math.max(1, args.activePageWidth);
+  const viewportHeight = args.direction === 'vertical' ? fitViewportPrimary : Math.max(1, args.activePageHeight);
   const fitOuterWidth = Math.min(Math.max(1, viewportWidth), Math.max(1, args.availableWidth || viewportWidth));
   const fitOuterHeight = Math.max(1, viewportHeight + dotsInset);
   const outerWidth = args.widthMode === 'fill' ? '100%' : args.widthMode === 'fixed' ? Math.max(1, args.fixedWidth ?? fitOuterWidth) : fitOuterWidth;
@@ -2843,11 +3145,21 @@ export function resolveSliderContainerSize(args) {
     viewportHeight: args.heightMode === 'fit' ? Math.max(1, fitOuterHeight - dotsInset) : Math.max(1, args.availableHeight || fitOuterHeight - dotsInset)
   };
 }
-export function resolveSlidePageSize(args) {
-  const widthMode = resolveSlideSizeMode(args.slideProps, 'width');
-  const heightMode = resolveSlideSizeMode(args.slideProps, 'height');
-  const fixedWidth = toFinite(parseLayoutDimension(args.slideProps.width ?? args.slideProps.size?.widthPx, true));
-  const fixedHeight = toFinite(parseLayoutDimension(args.slideProps.height ?? args.slideProps.size?.heightPx, true));
+function resolvePageFixedSizeHint(pageProps) {
+  const widthMode = resolvePageSizeMode(pageProps, 'width');
+  const heightMode = resolvePageSizeMode(pageProps, 'height');
+  const width = widthMode === 'fixed' ? toFinite(parseLayoutDimension(pageProps.width ?? pageProps.size?.widthPx, true)) : null;
+  const height = heightMode === 'fixed' ? toFinite(parseLayoutDimension(pageProps.height ?? pageProps.size?.heightPx, true)) : null;
+  return {
+    width,
+    height
+  };
+}
+export function resolvePageSize(args) {
+  const widthMode = resolvePageSizeMode(args.pageProps, 'width');
+  const heightMode = resolvePageSizeMode(args.pageProps, 'height');
+  const fixedWidth = toFinite(parseLayoutDimension(args.pageProps.width ?? args.pageProps.size?.widthPx, true));
+  const fixedHeight = toFinite(parseLayoutDimension(args.pageProps.height ?? args.pageProps.size?.heightPx, true));
   const width = widthMode === 'fixed' ? Math.max(1, fixedWidth ?? args.pagePrimary) : widthMode === 'fit' ? undefined : args.direction === 'horizontal' ? args.pagePrimary : args.crossSize;
   const height = heightMode === 'fixed' ? Math.max(1, fixedHeight ?? args.pagePrimary) : heightMode === 'fit' ? undefined : args.direction === 'vertical' ? args.pagePrimary : args.crossSize;
   return {
@@ -2951,7 +3263,7 @@ function resolveSliderBackgroundColor(sliderProps) {
 function SliderWidget({
   id,
   sliderProps,
-  slidePropsList,
+  pagePropsList,
   direction,
   pageAlignment,
   pageSpacing,
@@ -2975,7 +3287,8 @@ function SliderWidget({
     width: 1,
     height: 1
   });
-  const [activeSlideSize, setActiveSlideSize] = React.useState({
+  const [measuredPageSizes, setMeasuredPageSizes] = React.useState({});
+  const [activePageSize, setActivePageSize] = React.useState({
     width: 1,
     height: 1
   });
@@ -2989,6 +3302,19 @@ function SliderWidget({
   React.useEffect(() => {
     setCurrentPage(prev => clampSliderPage(prev, pageCount));
   }, [pageCount]);
+  React.useEffect(() => {
+    setMeasuredPageSizes(prev => {
+      const next = {};
+      Object.keys(prev).forEach(key => {
+        const index = Number(key);
+        if (Number.isFinite(index) && index < pageCount) {
+          const cached = prev[index];
+          if (cached) next[index] = cached;
+        }
+      });
+      return Object.keys(next).length === Object.keys(prev).length ? prev : next;
+    });
+  }, [pageCount]);
   React.useEffect(() => {
     if (autoAdvance && !isInteracting && pageLength > 1) {
       timerRef.current = setInterval(() => {
@@ -3009,6 +3335,23 @@ function SliderWidget({
       pagerRef.current.setPage(clampSliderPage(currentPage, pageCount));
     }
   }, [currentPage, pageCount]);
+  const syncActivePageSize = React.useCallback(page => {
+    if (pageCount <= 0) return;
+    const safePage = clampSliderPage(page, pageCount);
+    const measured = measuredPageSizes[safePage];
+    const hint = resolvePageFixedSizeHint(pagePropsList[safePage] ?? {});
+    setActivePageSize(prev => {
+      const next = {
+        width: Math.max(1, hint.width ?? measured?.width ?? prev.width),
+        height: Math.max(1, hint.height ?? measured?.height ?? prev.height)
+      };
+      return prev.width === next.width && prev.height === next.height ? prev : next;
+    });
+  }, [measuredPageSizes, pageCount, pagePropsList]);
+  React.useEffect(() => {
+    if (pageCount <= 0) return;
+    syncActivePageSize(currentPage);
+  }, [currentPage, pageCount, syncActivePageSize]);
   React.useEffect(() => {
     if (registry && id && children.length > 0) {
       registry.update(id, currentPage % children.length, children.length);
@@ -3021,13 +3364,15 @@ function SliderWidget({
   // 2) trailingPeek = end?0 : start?pagePeek*2 : pagePeek
   // 3) pagePrimary = viewportPrimary - leadingPeek - trailingPeek (clamped >= 1)
   // 4) track offset = activeIndex * (pagePrimary + pageSpacing)
-  // 5) fit parent mode follows active slide size but is clamped to container width
+  // 5) fit parent mode follows active page size but is clamped to container width
   // 6) viewport always clips track content (no root horizontal overflow)
   const {
     leading,
     trailing
   } = resolvePeekInsets(pageAlignment, pagePeek);
   const showDots = pageControlEnabled && pageLength > 1;
+  const dotsTopInset = showDots && pageControlPosition === 'top' ? 18 : 0;
+  const dotsBottomInset = showDots && pageControlPosition !== 'top' ? 18 : 0;
   const widthMode = resolveSliderSizeMode(sliderProps, 'width', 'fill');
   const heightMode = resolveSliderSizeMode(sliderProps, 'height', 'fit');
   const fixedWidth = toFinite(parseLayoutDimension(sliderProps.width, true));
@@ -3039,14 +3384,17 @@ function SliderWidget({
     heightMode,
     availableWidth: availableSize.width,
     availableHeight: availableSize.height,
-    activeSlideWidth: activeSlideSize.width,
-    activeSlideHeight: activeSlideSize.height,
+    activePageWidth: activePageSize.width,
+    activePageHeight: activePageSize.height,
     fixedWidth,
     fixedHeight,
     leadingPeek: leading,
     trailingPeek: trailing,
-    showDots
+    showDots,
+    dotsTopInset,
+    dotsBottomInset
   });
+  const sliderFillSizeStyle = resolveFillSizeStyle(sliderProps.size);
   const viewportPrimary = direction === 'horizontal' ? resolved.viewportWidth : resolved.viewportHeight;
   const pagePrimary = Math.max(1, viewportPrimary - leading - trailing);
   return /*#__PURE__*/_jsxs(View, {
@@ -3066,46 +3414,35 @@ function SliderWidget({
     style: {
       width: resolved.outerWidth,
       height: resolved.outerHeight,
-      minWidth: 1,
-      minHeight: 1,
+      minWidth: 0,
+      minHeight: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      ...sliderFillSizeStyle,
       backgroundColor: sliderBackgroundColor,
       borderRadius: 0,
-      overflow: 'visible'
+      overflow: 'hidden',
+      position: 'relative'
     },
-    children: [showDots && pageControlPosition === 'top' ? /*#__PURE__*/_jsx(View, {
-      style: {
-        marginBottom: 8,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      children: Array.from({
-        length: pageLength
-      }).map((_, index) => {
-        const isActive = index === currentPage;
-        return /*#__PURE__*/_jsx(View, {
-          style: {
-            width: 6,
-            height: 6,
-            borderRadius: 3,
-            marginHorizontal: 3,
-            backgroundColor: isActive ? parseColor('0xFF111827') : parseColor('0xFFD1D5DB')
-          }
-        }, `slider-dot-top-${index}`);
-      })
-    }) : null, /*#__PURE__*/_jsx(View, {
+    children: [/*#__PURE__*/_jsx(View, {
       style: {
         overflow: 'hidden',
+        width: widthMode === 'fit' ? resolved.viewportWidth : '100%',
+        height: heightMode === 'fit' ? resolved.viewportHeight : '100%',
+        minWidth: 0,
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        flexGrow: heightMode === 'fit' ? 0 : 1,
+        flexShrink: 1,
         ...(direction === 'horizontal' ? {
-          width: resolved.viewportWidth,
-          height: resolved.viewportHeight,
           paddingLeft: leading,
-          paddingRight: trailing
+          paddingRight: trailing,
+          paddingTop: dotsTopInset,
+          paddingBottom: dotsBottomInset
         } : {
-          width: resolved.viewportWidth,
-          height: resolved.viewportHeight,
-          paddingTop: leading,
-          paddingBottom: trailing
+          paddingTop: leading + dotsTopInset,
+          paddingBottom: trailing + dotsBottomInset
         })
       },
       children: /*#__PURE__*/_jsx(PagerView, {
@@ -3113,7 +3450,9 @@ function SliderWidget({
         style: {
           width: '100%',
           height: '100%',
-          minHeight: 1
+          minWidth: 0,
+          minHeight: 0,
+          flex: 1
         },
         orientation: direction,
         pageMargin: Math.max(0, pageSpacing),
@@ -3122,6 +3461,7 @@ function SliderWidget({
           const page = event.nativeEvent.position;
           const safePage = clampSliderPage(page, pageCount);
           setCurrentPage(safePage);
+          syncActivePageSize(safePage);
           markInteracting();
           if (registry && id) {
             registry.update(id, safePage % pageLength, pageLength);
@@ -3130,33 +3470,83 @@ function SliderWidget({
         children: Array.from({
           length: pageCount
         }).map((_, index) => /*#__PURE__*/_jsx(View, {
-          onLayout: index === currentPage ? event => {
-            const nextWidth = Math.max(1, Math.round(event.nativeEvent.layout.width));
-            const nextHeight = Math.max(1, Math.round(event.nativeEvent.layout.height));
-            setActiveSlideSize(prev => prev.width === nextWidth && prev.height === nextHeight ? prev : {
-              width: nextWidth,
-              height: nextHeight
-            });
-          } : undefined,
           style: {
-            alignSelf: 'flex-start',
+            width: '100%',
+            height: '100%',
             overflow: 'hidden',
-            ...resolveSlidePageSize({
-              slideProps: slidePropsList[index] ?? {},
-              direction,
-              pagePrimary,
-              crossSize: '100%'
-            })
+            minWidth: 0,
+            minHeight: 0,
+            display: 'flex',
+            flexDirection: 'column'
           },
-          children: children[index % pageLength]
+          children: /*#__PURE__*/_jsx(View, {
+            onLayout: event => {
+              const nextWidth = Math.max(1, Math.round(event.nativeEvent.layout.width));
+              const nextHeight = Math.max(1, Math.round(event.nativeEvent.layout.height));
+              setMeasuredPageSizes(prev => {
+                const current = prev[index];
+                if (current && current.width === nextWidth && current.height === nextHeight) {
+                  return prev;
+                }
+                return {
+                  ...prev,
+                  [index]: {
+                    width: nextWidth,
+                    height: nextHeight
+                  }
+                };
+              });
+              if (index === currentPage) {
+                setActivePageSize(prev => prev.width === nextWidth && prev.height === nextHeight ? prev : {
+                  width: nextWidth,
+                  height: nextHeight
+                });
+              }
+            },
+            style: {
+              alignSelf: (direction === 'horizontal' ? resolvePageSizeMode(pagePropsList[index] ?? {}, 'height') === 'fill' : resolvePageSizeMode(pagePropsList[index] ?? {}, 'width') === 'fill') ? 'stretch' : 'flex-start',
+              overflow: 'hidden',
+              minWidth: 0,
+              minHeight: 0,
+              display: 'flex',
+              flexDirection: 'column',
+              ...resolvePageSize({
+                pageProps: pagePropsList[index] ?? {},
+                direction,
+                pagePrimary,
+                crossSize: '100%'
+              })
+            },
+            children: /*#__PURE__*/_jsx(View, {
+              style: {
+                width: '100%',
+                height: '100%',
+                minWidth: 0,
+                minHeight: 0,
+                display: 'flex',
+                flexDirection: 'column',
+                flexGrow: 1
+              },
+              children: children[index % pageLength]
+            })
+          })
         }, `slider-page-${index}`))
       })
-    }), showDots && pageControlPosition === 'bottom' ? /*#__PURE__*/_jsx(View, {
+    }), showDots ? /*#__PURE__*/_jsx(View, {
       style: {
-        marginTop: 8,
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        ...(pageControlPosition === 'top' ? {
+          top: 4
+        } : {
+          bottom: 4
+        }),
+        height: 12,
         flexDirection: 'row',
         justifyContent: 'center',
-        alignItems: 'center'
+        alignItems: 'center',
+        pointerEvents: 'none'
       },
       children: Array.from({
         length: pageLength
@@ -3170,7 +3560,7 @@ function SliderWidget({
             marginHorizontal: 3,
             backgroundColor: isActive ? parseColor('0xFF111827') : parseColor('0xFFD1D5DB')
           }
-        }, `slider-dot-bottom-${index}`);
+        }, `slider-dot-${index}`);
       })
     }) : null]
   });
@@ -3192,11 +3582,15 @@ function PageViewIndicator({
 }) {
   const registry = useSliderRegistry();
   const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
   const indicatorStyle = style ?? 'dots';
-  const count = linkedTo && registry ? registry.getPageCount(linkedTo) : 0;
   React.useEffect(() => {
     if (!linkedTo || !registry) return;
-    return registry.getNotifier(linkedTo, setCurrent);
+    setCount(registry.getPageCount(linkedTo));
+    return registry.getNotifier(linkedTo, page => {
+      setCurrent(page);
+      setCount(registry.getPageCount(linkedTo));
+    });
   }, [linkedTo, registry]);
   if (!linkedTo || !registry || count <= 1) return null;
   if (indicatorStyle !== 'dots') {