flowboard-react 0.6.0 → 0.6.2

package/lib/module/components/FlowboardRenderer.js

@@ -429,18 +429,33 @@ function isFillDimensionValue(value) {
   if (typeof value === 'number') return value === Number.POSITIVE_INFINITY;
   if (typeof value !== 'string') return false;
   const normalized = value.trim().toLowerCase();
-  return normalized === 'infinity' || normalized === 'double.infinity' || normalized === '+infinity' || normalized === '100%';
+  return normalized === 'infinity' || normalized === 'infinite' || normalized === 'double.infinity' || normalized === '+infinity' || normalized === '100%';
 }
 function isFixedDimensionValue(value) {
   if (isFillDimensionValue(value)) return false;
   const parsed = Number(value);
   return Number.isFinite(parsed);
 }
+function normalizeStackSizeMode(value) {
+  if (typeof value !== 'string') return undefined;
+  const normalized = value.trim().toLowerCase();
+  if (normalized === 'fit' || normalized === 'fixed') return normalized;
+  if (normalized === 'fill' || normalized === 'infinity' || normalized === 'infinite' || normalized === 'double.infinity' || normalized === '+infinity') {
+    return 'fill';
+  }
+  return undefined;
+}
+function wantsFillWidth(props) {
+  return normalizeStackSizeMode(props.size?.width) === 'fill' || isFillDimensionValue(props.width);
+}
+function wantsFillHeight(props) {
+  return normalizeStackSizeMode(props.size?.height) === 'fill' || isFillDimensionValue(props.height);
+}
 function normalizeStackSize(props, axis) {
-  const widthMode = String(props.size?.width ?? '').toLowerCase();
-  const heightMode = String(props.size?.height ?? '').toLowerCase();
-  const width = widthMode === 'fill' || widthMode === 'fit' || widthMode === 'fixed' ? widthMode : props.fit === 'expand' || props.width === 'infinity' ? 'fill' : isFixedDimensionValue(props.width) ? 'fixed' : axis === 'horizontal' ? 'fit' : 'fill';
-  const height = heightMode === 'fill' || heightMode === 'fit' || heightMode === 'fixed' ? heightMode : props.fit === 'expand' || props.height === 'infinity' ? 'fill' : isFixedDimensionValue(props.height) ? 'fixed' : axis === 'vertical' ? 'fit' : 'fill';
+  const widthMode = normalizeStackSizeMode(props.size?.width);
+  const heightMode = normalizeStackSizeMode(props.size?.height);
+  const width = widthMode ? widthMode : props.fit === 'expand' || isFillDimensionValue(props.width) ? 'fill' : isFixedDimensionValue(props.width) ? 'fixed' : axis === 'horizontal' ? 'fit' : 'fill';
+  const height = heightMode ? heightMode : props.fit === 'expand' || isFillDimensionValue(props.height) ? 'fill' : isFixedDimensionValue(props.height) ? 'fixed' : axis === 'vertical' ? 'fit' : 'fill';
   return {
     width,
     height
@@ -524,8 +539,6 @@ function mergeStackProps(parentProps, childProps) {
   }
   const axisSource = axis === parentAxis && axis !== childAxis ? parentProps : childProps;
   const fallbackAxisSource = axisSource === childProps ? parentProps : childProps;
-  const parentPadding = spacingToInsets(parentProps.layout?.padding);
-  const childPadding = spacingToInsets(childProps.layout?.padding);
   const parentMargin = spacingToInsets(parentProps.layout?.margin);
   const childMargin = spacingToInsets(childProps.layout?.margin);
   const mergedProps = {
@@ -538,12 +551,6 @@ function mergeStackProps(parentProps, childProps) {
       height: childProps.size?.height ?? parentProps.size?.height ?? 'fit'
     },
     layout: {
-      padding: insetsToSpacing({
-        top: parentPadding.top + childPadding.top,
-        right: parentPadding.right + childPadding.right,
-        bottom: parentPadding.bottom + childPadding.bottom,
-        left: parentPadding.left + childPadding.left
-      }),
       margin: insetsToSpacing({
         top: parentMargin.top + childMargin.top,
         right: parentMargin.right + childMargin.right,
@@ -598,7 +605,6 @@ function normalizeStackLikeNode(json) {
     childSpacing: Number(props.childSpacing ?? props.gap ?? props.spacing ?? 0),
     size,
     layout: {
-      padding: normalizeStackSpacingConfig(props.layout?.padding ?? props.padding),
       margin: normalizeStackSpacingConfig(props.layout?.margin ?? props.margin)
     },
     appearance: {
@@ -697,10 +703,11 @@ function parseOverlayGridAlignment(value) {
 function resolveStackDimension(props, axis, key, axisBounds) {
   const mode = props.size?.[key];
   const legacy = normalizeDimension(parseLayoutDimension(props[key]));
+  const fixedPx = parseLayoutDimension(props.size?.[`${key}Px`], true);
   const isBounded = key === 'width' ? axisBounds.widthBounded : axisBounds.heightBounded;
   if (mode === 'fill') return isBounded ? '100%' : legacy;
   if (mode === 'fit') return legacy;
-  if (mode === 'fixed') return legacy;
+  if (mode === 'fixed') return legacy ?? fixedPx;
   if (legacy !== undefined) return legacy;
   if (key === 'width' && axis !== 'horizontal' && axisBounds.widthBounded) return '100%';
   if (key === 'height' && axis === 'horizontal' && axisBounds.heightBounded) return '100%';
@@ -1204,19 +1211,24 @@ function buildWidget(json, params) {
       }
     case 'slider':
       {
+        const direction = props.direction === 'vertical' ? 'vertical' : 'horizontal';
+        const interaction = props.interaction ?? {};
+        const pageControl = props.pageControl ?? {};
+        const sliderChildren = (childrenJson ?? []).filter(Boolean);
         node = /*#__PURE__*/_jsx(SliderWidget, {
           id: json._internalId,
-          linkedTo: props.linkedTo,
-          direction: props.direction === 'vertical' ? 'vertical' : 'horizontal',
-          autoPlay: props.autoPlay === true,
-          autoPlayDelay: Number(props.autoPlayDelay ?? 3000),
-          loop: props.loop === true,
-          height: parseLayoutDimension(props.height),
-          physics: props.physics,
-          children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsx(View, {
-            style: {
-              flex: 1
-            },
+          sliderProps: props,
+          slidePropsList: sliderChildren.map(child => child?.properties ?? {}),
+          direction: direction,
+          pageAlignment: props.pageAlignment === 'start' || props.pageAlignment === 'end' ? props.pageAlignment : 'center',
+          pageSpacing: Number(props.pageSpacing ?? 16),
+          pagePeek: Number(props.pagePeek ?? 16),
+          loop: interaction.loop === true,
+          autoAdvance: interaction.autoAdvance === true,
+          autoAdvanceIntervalMs: Number(interaction.autoAdvanceIntervalMs ?? 4000),
+          pageControlEnabled: pageControl.enabled !== false,
+          pageControlPosition: pageControl.position === 'top' ? 'top' : 'bottom',
+          children: sliderChildren.map((child, index) => /*#__PURE__*/_jsx(View, {
             children: buildWidget(child, {
               ...params
             })
@@ -1224,6 +1236,19 @@ function buildWidget(json, params) {
         });
         break;
       }
+    case 'slide':
+      {
+        node = buildWidget({
+          ...json,
+          type: 'stack',
+          properties: {
+            ...(props || {})
+          }
+        }, {
+          ...params
+        });
+        break;
+      }
     case 'pageview_indicator':
       {
         node = /*#__PURE__*/_jsx(PageViewIndicator, {
@@ -1285,7 +1310,6 @@ function buildWidget(json, params) {
         const isOverlay = axis === 'overlay';
         const spacing = Number(props.childSpacing ?? 0);
         const applySpacing = !STACK_SPACE_DISTRIBUTIONS.has(String(props.distribution ?? 'start'));
-        const paddingInsets = stackSpacingToInsets(props.layout?.padding ?? props.padding);
         const width = resolveStackDimension(props, axis, 'width', pageAxisBounds);
         const height = resolveStackDimension(props, axis, 'height', pageAxisBounds);
         const mainAxisBounded = axis === 'horizontal' ? pageAxisBounds.widthBounded : pageAxisBounds.heightBounded;
@@ -1318,14 +1342,18 @@ function buildWidget(json, params) {
           overflow: borderRadius > 0 ? 'hidden' : undefined,
           borderWidth: borderColor ? borderWidth : undefined,
           borderColor: borderColor ?? undefined,
-          ...insetsToStyle(paddingInsets),
           ...shadowStyle
         };
+        const stackContentSizeStyle = {
+          width: width !== undefined ? '100%' : undefined,
+          height: height !== undefined ? '100%' : undefined
+        };
         const content = isOverlay ? /*#__PURE__*/_jsxs(View, {
           style: {
             position: 'relative',
             minHeight: 0,
-            minWidth: 0
+            minWidth: 0,
+            ...stackContentSizeStyle
           },
           children: [(childrenJson ?? []).map((child, index) => {
             const alignment = parseOverlayGridAlignment(props.overlayAlignment ?? props.alignment);
@@ -1352,7 +1380,8 @@ function buildWidget(json, params) {
             justifyContent: parseFlexAlignment(props.distribution),
             alignItems: parseCrossAlignment(props.alignment),
             minHeight: 0,
-            minWidth: 0
+            minWidth: 0,
+            ...stackContentSizeStyle
           },
           children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsxs(React.Fragment, {
             children: [buildWidget(child, {
@@ -1442,6 +1471,17 @@ function buildWidget(json, params) {
       children: node
     });
   }
+  const shouldStretchCrossAxis = params.parentFlexAxis === 'vertical' && (type === 'selection_list' || type === 'wheel_picker' || wantsFillWidth(props)) || params.parentFlexAxis === 'horizontal' && wantsFillHeight(props);
+  if (shouldStretchCrossAxis) {
+    node = /*#__PURE__*/_jsx(View, {
+      style: {
+        alignSelf: 'stretch',
+        minWidth: 0,
+        minHeight: 0
+      },
+      children: node
+    });
+  }
   if (params.allowFlexExpansion) {
     let shouldExpand = false;
     const parentAxis = params.parentFlexAxis ?? 'vertical';
@@ -1750,7 +1790,7 @@ function parseLayoutDimension(value, zeroIsNull = false) {
   if (typeof value === 'string') {
     const trimmed = value.trim();
     const lowered = trimmed.toLowerCase();
-    if (lowered === 'double.infinity' || lowered === 'infinity' || lowered === '+infinity') {
+    if (lowered === 'double.infinity' || lowered === 'infinite' || lowered === 'infinity' || lowered === '+infinity') {
       return Number.POSITIVE_INFINITY;
     }
     if (trimmed.endsWith('%')) {
@@ -2086,6 +2126,12 @@ function SelectionList({
   };
   const layout = properties.layout ?? 'column';
   const spacing = Number(properties.spacing ?? 8);
+  const shouldOptionFillWidth = option => {
+    if (layout === 'grid') return true;
+    const child = option.child && typeof option.child === 'object' ? normalizeStackLikeNode(option.child) : option.child;
+    const childProps = child && typeof child === 'object' ? child.properties ?? {} : {};
+    return wantsFillWidth(childProps);
+  };
   const renderItem = (option, index) => {
     const value = String(option.value ?? '');
     const isSelected = selectedValues.includes(value);
@@ -2094,10 +2140,12 @@ function SelectionList({
     const borderColor = parseColor(styleProps.borderColor);
     const borderRadius = Number(styleProps.borderRadius ?? 8);
     const borderWidth = Number(styleProps.borderWidth ?? 1);
+    const fillWidth = shouldOptionFillWidth(option);
     return /*#__PURE__*/_jsx(Pressable, {
       onPress: () => toggleSelection(value),
       style: {
-        width: '100%',
+        width: fillWidth ? '100%' : undefined,
+        alignSelf: fillWidth ? 'stretch' : 'flex-start',
         backgroundColor,
         borderColor,
         borderWidth,
@@ -2149,7 +2197,8 @@ function SelectionList({
     },
     children: options.map((option, index) => /*#__PURE__*/_jsx(View, {
       style: {
-        width: '100%',
+        width: shouldOptionFillWidth(option) ? '100%' : undefined,
+        alignSelf: shouldOptionFillWidth(option) ? 'stretch' : 'flex-start',
         marginBottom: spacing
       },
       children: renderItem(option, index)
@@ -2751,15 +2800,167 @@ function FakeProgressBar({
   });
 }
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+export function resolvePeekInsets(pageAlignment, pagePeek) {
+  const leading = pageAlignment === 'start' ? 0 : pageAlignment === 'end' ? pagePeek * 2 : pagePeek;
+  const trailing = pageAlignment === 'end' ? 0 : pageAlignment === 'start' ? pagePeek * 2 : pagePeek;
+  return {
+    leading,
+    trailing
+  };
+}
+function resolveSliderSizeMode(sliderProps, key, fallback) {
+  const raw = String(sliderProps?.size?.[key] ?? '').toLowerCase();
+  if (raw === 'fill' || raw === 'fit' || raw === 'fixed') return raw;
+  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;
+  return key === 'width' ? 'fill' : 'fit';
+}
+function toFinite(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return null;
+}
+export function resolveSliderContainerSize(args) {
+  const dotsInset = args.showDots ? 8 + 6 + 8 : 0;
+  const fitPrimary = args.direction === 'horizontal' ? args.activeSlideWidth : args.activeSlideHeight;
+  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 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;
+  const outerHeight = args.heightMode === 'fill' ? '100%' : args.heightMode === 'fixed' ? Math.max(1, args.fixedHeight ?? fitOuterHeight) : fitOuterHeight;
+  return {
+    outerWidth,
+    outerHeight,
+    viewportWidth: args.widthMode === 'fit' ? fitOuterWidth : Math.max(1, args.availableWidth),
+    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));
+  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 {
+    width: width ?? 'auto',
+    height: height ?? 'auto'
+  };
+}
+function resolveSliderBackgroundColor(sliderProps) {
+  const extractColorCandidate = input => {
+    if (input === null || input === undefined) return undefined;
+    if (typeof input === 'string' || typeof input === 'number') return input;
+    if (Array.isArray(input)) {
+      for (const value of input) {
+        const nested = extractColorCandidate(value);
+        if (nested !== undefined) return nested;
+      }
+      return undefined;
+    }
+    if (typeof input !== 'object') return undefined;
+    const source = input;
+    if (Number.isFinite(Number(source.r)) && Number.isFinite(Number(source.g)) && Number.isFinite(Number(source.b))) {
+      const alphaRaw = Number.isFinite(Number(source.a)) ? Number(source.a) : 1;
+      const alpha = Math.max(0, Math.min(1, alphaRaw));
+      return `rgba(${Number(source.r)},${Number(source.g)},${Number(source.b)},${alpha})`;
+    }
+
+    // If a gradient is provided for slider fill, use the first stop as fallback.
+    if (String(source.type ?? '').toLowerCase() === 'gradient' && Array.isArray(source.colors)) {
+      const first = extractColorCandidate(source.colors);
+      if (first !== undefined) return first;
+    }
+    const candidateKeys = ['value', 'color', 'backgroundColor', 'hex', 'argb', 'rgba', 'raw'];
+    for (const key of candidateKeys) {
+      const nested = extractColorCandidate(source[key]);
+      if (nested !== undefined) return nested;
+    }
+    return undefined;
+  };
+  const parseSliderFillColor = color => {
+    const candidate = extractColorCandidate(color);
+    if (candidate === undefined) return 'transparent';
+    if (typeof candidate === 'string') {
+      const trimmed = candidate.trim();
+      if (/^#[\da-fA-F]{8}$/.test(trimmed)) {
+        // Dashboard stores alpha-enabled web hex as #RRGGBBAA.
+        const rrggbbaa = trimmed.slice(1);
+        const aarrggbb = `${rrggbbaa.slice(6, 8)}${rrggbbaa.slice(0, 6)}`;
+        return parseColor(`0x${aarrggbb}`);
+      }
+      return parseColor(trimmed);
+    }
+    if (typeof candidate === 'number') {
+      return parseColor(candidate);
+    }
+    if (typeof color === 'string') {
+      const trimmed = color.trim();
+      if (/^#[\da-fA-F]{8}$/.test(trimmed)) {
+        // Dashboard stores alpha-enabled web hex as #RRGGBBAA.
+        const rrggbbaa = trimmed.slice(1);
+        const aarrggbb = `${rrggbbaa.slice(6, 8)}${rrggbbaa.slice(0, 6)}`;
+        return parseColor(`0x${aarrggbb}`);
+      }
+    }
+    return parseColor(candidate);
+  };
+  const appearanceFill = sliderProps?.appearance?.fill;
+  if (typeof appearanceFill === 'string' || typeof appearanceFill === 'number') {
+    return parseSliderFillColor(appearanceFill);
+  }
+  if (appearanceFill && typeof appearanceFill === 'object') {
+    const type = String(appearanceFill.type ?? '').toLowerCase();
+    if (type === 'color' || type === 'solid' || type === '') {
+      const color = appearanceFill.value ?? appearanceFill.color;
+      if (color !== undefined) return parseSliderFillColor(color);
+    }
+  }
+  const fill = sliderProps?.fill;
+  if (typeof fill === 'string' || typeof fill === 'number') {
+    return parseSliderFillColor(fill);
+  }
+  if (fill && typeof fill === 'object') {
+    const type = String(fill.type ?? '').toLowerCase();
+    if (type === 'color' || type === 'solid' || type === '') {
+      const color = fill.value ?? fill.color;
+      if (color !== undefined) return parseSliderFillColor(color);
+    }
+  }
+  const background = sliderProps?.background;
+  if (background && typeof background === 'object') {
+    const type = String(background.type ?? '').toLowerCase();
+    if (type === 'color') {
+      const color = background.value ?? background.color;
+      if (color !== undefined) return parseSliderFillColor(color);
+    }
+  }
+  if (sliderProps?.backgroundColor !== undefined) {
+    return parseSliderFillColor(sliderProps.backgroundColor);
+  }
+  return undefined;
+}
 function SliderWidget({
   id,
-  linkedTo,
+  sliderProps,
+  slidePropsList,
   direction,
-  autoPlay,
-  autoPlayDelay,
+  pageAlignment,
+  pageSpacing,
+  pagePeek,
   loop,
-  height,
-  physics,
+  autoAdvance,
+  autoAdvanceIntervalMs,
+  pageControlEnabled,
+  pageControlPosition,
   children
 }) {
   const registry = useSliderRegistry();
@@ -2768,11 +2969,28 @@ function SliderWidget({
   const pageCount = pageLength;
   const [currentPage, setCurrentPage] = React.useState(0);
   const timerRef = React.useRef(null);
+  const [isInteracting, setIsInteracting] = React.useState(false);
+  const idleTimerRef = React.useRef(null);
+  const [availableSize, setAvailableSize] = React.useState({
+    width: 1,
+    height: 1
+  });
+  const [activeSlideSize, setActiveSlideSize] = React.useState({
+    width: 1,
+    height: 1
+  });
+  const markInteracting = React.useCallback(() => {
+    setIsInteracting(true);
+    if (idleTimerRef.current) {
+      clearTimeout(idleTimerRef.current);
+    }
+    idleTimerRef.current = setTimeout(() => setIsInteracting(false), 1400);
+  }, []);
   React.useEffect(() => {
     setCurrentPage(prev => clampSliderPage(prev, pageCount));
   }, [pageCount]);
   React.useEffect(() => {
-    if (autoPlay && !linkedTo && pageLength > 0) {
+    if (autoAdvance && !isInteracting && pageLength > 1) {
       timerRef.current = setInterval(() => {
         setCurrentPage(prev => {
           const safePrev = clampSliderPage(prev, pageCount);
@@ -2780,12 +2998,12 @@ function SliderWidget({
           if (loop) return 0;
           return safePrev;
         });
-      }, autoPlayDelay);
+      }, autoAdvanceIntervalMs);
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [autoPlay, autoPlayDelay, linkedTo, loop, pageCount, pageLength]);
+  }, [autoAdvance, autoAdvanceIntervalMs, isInteracting, loop, pageCount, pageLength]);
   React.useEffect(() => {
     if (pagerRef.current && pageCount > 0) {
       pagerRef.current.setPage(clampSliderPage(currentPage, pageCount));
@@ -2796,44 +3014,165 @@ function SliderWidget({
       registry.update(id, currentPage % children.length, children.length);
     }
   }, [registry, id, currentPage, children.length]);
-  React.useEffect(() => {
-    if (!linkedTo || !registry) return;
-    return registry.getNotifier(linkedTo, value => {
-      const normalized = normalizeLoopIndex(value, pageLength);
-      const targetPage = clampSliderPage(normalized, pageCount);
-      setCurrentPage(targetPage);
-      if (pagerRef.current) {
-        pagerRef.current.setPage(targetPage);
-      }
-    });
-  }, [linkedTo, pageCount, pageLength, registry]);
   if (pageLength === 0) return null;
-  return /*#__PURE__*/_jsx(PagerView, {
-    ref: pagerRef,
-    style: height === undefined ? {
-      flex: 1
-    } : {
-      height
+
+  // Slider layout parity rules copied from Web Preview:
+  // 1) leadingPeek = start?0 : end?pagePeek*2 : pagePeek
+  // 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
+  // 6) viewport always clips track content (no root horizontal overflow)
+  const {
+    leading,
+    trailing
+  } = resolvePeekInsets(pageAlignment, pagePeek);
+  const showDots = pageControlEnabled && pageLength > 1;
+  const widthMode = resolveSliderSizeMode(sliderProps, 'width', 'fill');
+  const heightMode = resolveSliderSizeMode(sliderProps, 'height', 'fit');
+  const fixedWidth = toFinite(parseLayoutDimension(sliderProps.width, true));
+  const fixedHeight = toFinite(parseLayoutDimension(sliderProps.height, true));
+  const sliderBackgroundColor = resolveSliderBackgroundColor(sliderProps);
+  const resolved = resolveSliderContainerSize({
+    direction,
+    widthMode,
+    heightMode,
+    availableWidth: availableSize.width,
+    availableHeight: availableSize.height,
+    activeSlideWidth: activeSlideSize.width,
+    activeSlideHeight: activeSlideSize.height,
+    fixedWidth,
+    fixedHeight,
+    leadingPeek: leading,
+    trailingPeek: trailing,
+    showDots
+  });
+  const viewportPrimary = direction === 'horizontal' ? resolved.viewportWidth : resolved.viewportHeight;
+  const pagePrimary = Math.max(1, viewportPrimary - leading - trailing);
+  return /*#__PURE__*/_jsxs(View, {
+    onTouchStart: markInteracting,
+    onTouchEnd: markInteracting,
+    onTouchCancel: markInteracting,
+    onPointerDown: markInteracting,
+    onPointerUp: markInteracting,
+    onLayout: event => {
+      const nextWidth = Math.max(1, Math.round(event.nativeEvent.layout.width));
+      const nextHeight = Math.max(1, Math.round(event.nativeEvent.layout.height));
+      setAvailableSize(prev => prev.width === nextWidth && prev.height === nextHeight ? prev : {
+        width: nextWidth,
+        height: nextHeight
+      });
     },
-    orientation: direction,
-    scrollEnabled: physics !== 'never',
-    initialPage: clampSliderPage(currentPage, pageCount),
-    onPageSelected: event => {
-      const page = event.nativeEvent.position;
-      const safePage = clampSliderPage(page, pageCount);
-      setCurrentPage(safePage);
-      if (registry && id) {
-        registry.update(id, safePage % pageLength, pageLength);
-      }
+    style: {
+      width: resolved.outerWidth,
+      height: resolved.outerHeight,
+      minWidth: 1,
+      minHeight: 1,
+      backgroundColor: sliderBackgroundColor,
+      borderRadius: 0,
+      overflow: 'visible'
     },
-    children: Array.from({
-      length: pageCount
-    }).map((_, index) => /*#__PURE__*/_jsx(View, {
+    children: [showDots && pageControlPosition === 'top' ? /*#__PURE__*/_jsx(View, {
       style: {
-        flex: 1
+        marginBottom: 8,
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center'
       },
-      children: children[index % pageLength]
-    }, `slider-page-${index}`))
+      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, {
+      style: {
+        overflow: 'hidden',
+        ...(direction === 'horizontal' ? {
+          width: resolved.viewportWidth,
+          height: resolved.viewportHeight,
+          paddingLeft: leading,
+          paddingRight: trailing
+        } : {
+          width: resolved.viewportWidth,
+          height: resolved.viewportHeight,
+          paddingTop: leading,
+          paddingBottom: trailing
+        })
+      },
+      children: /*#__PURE__*/_jsx(PagerView, {
+        ref: pagerRef,
+        style: {
+          width: '100%',
+          height: '100%',
+          minHeight: 1
+        },
+        orientation: direction,
+        pageMargin: Math.max(0, pageSpacing),
+        initialPage: clampSliderPage(currentPage, pageCount),
+        onPageSelected: event => {
+          const page = event.nativeEvent.position;
+          const safePage = clampSliderPage(page, pageCount);
+          setCurrentPage(safePage);
+          markInteracting();
+          if (registry && id) {
+            registry.update(id, safePage % pageLength, pageLength);
+          }
+        },
+        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',
+            overflow: 'hidden',
+            ...resolveSlidePageSize({
+              slideProps: slidePropsList[index] ?? {},
+              direction,
+              pagePrimary,
+              crossSize: '100%'
+            })
+          },
+          children: children[index % pageLength]
+        }, `slider-page-${index}`))
+      })
+    }), showDots && pageControlPosition === 'bottom' ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginTop: 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-bottom-${index}`);
+      })
+    }) : null]
   });
 }
 function clampSliderPage(page, pageCount) {
@@ -2843,11 +3182,6 @@ function clampSliderPage(page, pageCount) {
   if (page >= pageCount) return pageCount - 1;
   return Math.floor(page);
 }
-function normalizeLoopIndex(index, size) {
-  if (size <= 0 || !Number.isFinite(index)) return 0;
-  const normalized = Math.floor(index) % size;
-  return normalized < 0 ? normalized + size : normalized;
-}
 function PageViewIndicator({
   linkedTo,
   activeColor,