flowboard-react 0.6.1 → 0.6.2

package/src/components/FlowboardRenderer.tsx

@@ -563,6 +563,7 @@ function isFillDimensionValue(value: unknown) {
   const normalized = value.trim().toLowerCase();
   return (
     normalized === 'infinity' ||
+    normalized === 'infinite' ||
     normalized === 'double.infinity' ||
     normalized === '+infinity' ||
     normalized === '100%'
@@ -575,33 +576,63 @@ function isFixedDimensionValue(value: unknown) {
   return Number.isFinite(parsed);
 }
 
+function normalizeStackSizeMode(
+  value: unknown
+): 'fill' | 'fit' | 'fixed' | undefined {
+  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: Record<string, any>) {
+  return (
+    normalizeStackSizeMode(props.size?.width) === 'fill' ||
+    isFillDimensionValue(props.width)
+  );
+}
+
+function wantsFillHeight(props: Record<string, any>) {
+  return (
+    normalizeStackSizeMode(props.size?.height) === 'fill' ||
+    isFillDimensionValue(props.height)
+  );
+}
+
 function normalizeStackSize(
   props: Record<string, any>,
   axis: 'vertical' | 'horizontal' | 'overlay'
 ) {
-  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 };
 }
@@ -687,8 +718,6 @@ function mergeStackProps(
   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);
 
@@ -705,12 +734,6 @@ function mergeStackProps(
       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,
@@ -783,9 +806,6 @@ function normalizeStackLikeNode(
     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: {
@@ -881,11 +901,12 @@ function resolveStackDimension(
 ) {
   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%';
@@ -1485,19 +1506,38 @@ function buildWidget(
       break;
     }
     case 'slider': {
+      const direction =
+        props.direction === 'vertical' ? 'vertical' : 'horizontal';
+      const interaction = props.interaction ?? {};
+      const pageControl = props.pageControl ?? {};
+      const sliderChildren = (childrenJson ?? []).filter(Boolean);
       node = (
         <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}
+          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'
+          }
         >
-          {(childrenJson ?? []).map((child, index) => (
-            <View key={`slider-${index}`} style={{ flex: 1 }}>
+          {sliderChildren.map((child, index) => (
+            <View key={`slider-${index}`}>
               {buildWidget(child, { ...params })}
             </View>
           ))}
@@ -1505,6 +1545,19 @@ function buildWidget(
       );
       break;
     }
+    case 'slide': {
+      node = buildWidget(
+        {
+          ...json,
+          type: 'stack',
+          properties: {
+            ...(props || {}),
+          },
+        },
+        { ...params }
+      );
+      break;
+    }
     case 'pageview_indicator': {
       node = (
         <PageViewIndicator
@@ -1558,9 +1611,6 @@ function buildWidget(
       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,
@@ -1626,12 +1676,22 @@ function buildWidget(
         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 ? (
-        <View style={{ position: 'relative', minHeight: 0, minWidth: 0 }}>
+        <View
+          style={{
+            position: 'relative',
+            minHeight: 0,
+            minWidth: 0,
+            ...stackContentSizeStyle,
+          }}
+        >
           {(childrenJson ?? []).map((child, index) => {
             const alignment = parseOverlayGridAlignment(
               props.overlayAlignment ?? props.alignment
@@ -1667,6 +1727,7 @@ function buildWidget(
             alignItems: parseCrossAlignment(props.alignment),
             minHeight: 0,
             minWidth: 0,
+            ...stackContentSizeStyle,
           }}
         >
           {(childrenJson ?? []).map((child, index) => (
@@ -1775,6 +1836,27 @@ function buildWidget(
     );
   }
 
+  const shouldStretchCrossAxis =
+    (params.parentFlexAxis === 'vertical' &&
+      (type === 'selection_list' ||
+        type === 'wheel_picker' ||
+        wantsFillWidth(props))) ||
+    (params.parentFlexAxis === 'horizontal' && wantsFillHeight(props));
+
+  if (shouldStretchCrossAxis) {
+    node = (
+      <View
+        style={{
+          alignSelf: 'stretch',
+          minWidth: 0,
+          minHeight: 0,
+        }}
+      >
+        {node}
+      </View>
+    );
+  }
+
   if (params.allowFlexExpansion) {
     let shouldExpand = false;
     const parentAxis = params.parentFlexAxis ?? 'vertical';
@@ -2188,6 +2270,7 @@ function parseLayoutDimension(
 
     if (
       lowered === 'double.infinity' ||
+      lowered === 'infinite' ||
       lowered === 'infinity' ||
       lowered === '+infinity'
     ) {
@@ -2626,6 +2709,16 @@ function SelectionList({
 
   const layout = properties.layout ?? 'column';
   const spacing = Number(properties.spacing ?? 8);
+  const shouldOptionFillWidth = (option: Record<string, any>) => {
+    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: Record<string, any>, index: number) => {
     const value = String(option.value ?? '');
@@ -2638,13 +2731,15 @@ function SelectionList({
     const borderColor = parseColor(styleProps.borderColor);
     const borderRadius = Number(styleProps.borderRadius ?? 8);
     const borderWidth = Number(styleProps.borderWidth ?? 1);
+    const fillWidth = shouldOptionFillWidth(option);
 
     return (
       <Pressable
         key={`option-${index}`}
         onPress={() => toggleSelection(value)}
         style={{
-          width: '100%',
+          width: fillWidth ? '100%' : undefined,
+          alignSelf: fillWidth ? 'stretch' : 'flex-start',
           backgroundColor,
           borderColor,
           borderWidth,
@@ -2699,7 +2794,11 @@ function SelectionList({
       {options.map((option, index) => (
         <View
           key={`column-option-${index}`}
-          style={{ width: '100%', marginBottom: spacing }}
+          style={{
+            width: shouldOptionFillWidth(option) ? '100%' : undefined,
+            alignSelf: shouldOptionFillWidth(option) ? 'stretch' : 'flex-start',
+            marginBottom: spacing,
+          }}
         >
           {renderItem(option, index)}
         </View>
@@ -3529,25 +3628,325 @@ function FakeProgressBar({
 
 const AnimatedCircle = Animated.createAnimatedComponent(Circle);
 
+type SliderSizeMode = 'fill' | 'fit' | 'fixed';
+
+export function resolvePeekInsets(
+  pageAlignment: 'start' | 'center' | 'end',
+  pagePeek: number
+): { leading: number; trailing: number } {
+  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: Record<string, any>,
+  key: 'width' | 'height',
+  fallback: SliderSizeMode
+): SliderSizeMode {
+  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: Record<string, any>,
+  key: 'width' | 'height'
+): SliderSizeMode {
+  const raw = String(slideProps?.size?.[key] ?? '').toLowerCase();
+  if (raw === 'fill' || raw === 'fit' || raw === 'fixed') return raw;
+  return key === 'width' ? 'fill' : 'fit';
+}
+
+function toFinite(value: unknown): number | null {
+  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: {
+  direction: 'horizontal' | 'vertical';
+  widthMode: SliderSizeMode;
+  heightMode: SliderSizeMode;
+  availableWidth: number;
+  availableHeight: number;
+  activeSlideWidth: number;
+  activeSlideHeight: number;
+  fixedWidth: number | null;
+  fixedHeight: number | null;
+  leadingPeek: number;
+  trailingPeek: number;
+  showDots: boolean;
+}): {
+  outerWidth: number | string;
+  outerHeight: number | string;
+  viewportWidth: number;
+  viewportHeight: number;
+} {
+  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: {
+  slideProps: Record<string, any>;
+  direction: 'horizontal' | 'vertical';
+  pagePrimary: number;
+  crossSize: number | string;
+}): { width: number | string; height: number | string } {
+  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: Record<string, any>
+): string | undefined {
+  const extractColorCandidate = (input: unknown): unknown => {
+    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 as Record<string, any>;
+    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: unknown): string => {
+    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 as string | number | null | undefined);
+  };
+
+  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,
 }: {
   id?: string;
-  linkedTo?: string;
+  sliderProps: Record<string, any>;
+  slidePropsList: Record<string, any>[];
   direction: 'horizontal' | 'vertical';
-  autoPlay: boolean;
-  autoPlayDelay: number;
+  pageAlignment: 'start' | 'center' | 'end';
+  pageSpacing: number;
+  pagePeek: number;
   loop: boolean;
-  height?: number | string;
-  physics?: string;
+  autoAdvance: boolean;
+  autoAdvanceIntervalMs: number;
+  pageControlEnabled: boolean;
+  pageControlPosition: 'top' | 'bottom';
   children: React.ReactNode[];
 }) {
   const registry = useSliderRegistry();
@@ -3556,13 +3955,31 @@ function SliderWidget({
   const pageCount = pageLength;
   const [currentPage, setCurrentPage] = React.useState(0);
   const timerRef = React.useRef<NodeJS.Timeout | null>(null);
+  const [isInteracting, setIsInteracting] = React.useState(false);
+  const idleTimerRef = React.useRef<NodeJS.Timeout | null>(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);
@@ -3570,12 +3987,19 @@ 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) {
@@ -3589,42 +4013,205 @@ function SliderWidget({
     }
   }, [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;
 
+  // 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 (
-    <PagerView
-      ref={pagerRef}
-      style={height === undefined ? { flex: 1 } : { height }}
-      orientation={direction}
-      scrollEnabled={physics !== 'never'}
-      initialPage={clampSliderPage(currentPage, pageCount)}
-      onPageSelected={(event: PagerViewOnPageSelectedEvent) => {
-        const page = event.nativeEvent.position;
-        const safePage = clampSliderPage(page, pageCount);
-        setCurrentPage(safePage);
-        if (registry && id) {
-          registry.update(id, safePage % pageLength, pageLength);
-        }
+    <View
+      onTouchStart={markInteracting}
+      onTouchEnd={markInteracting}
+      onTouchCancel={markInteracting}
+      onPointerDown={markInteracting as any}
+      onPointerUp={markInteracting as any}
+      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 }
+        );
+      }}
+      style={{
+        width: resolved.outerWidth,
+        height: resolved.outerHeight,
+        minWidth: 1,
+        minHeight: 1,
+        backgroundColor: sliderBackgroundColor,
+        borderRadius: 0,
+        overflow: 'visible',
       }}
     >
-      {Array.from({ length: pageCount }).map((_, index) => (
-        <View key={`slider-page-${index}`} style={{ flex: 1 }}>
-          {children[index % pageLength]}
+      {showDots && pageControlPosition === 'top' ? (
+        <View
+          style={{
+            marginBottom: 8,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {Array.from({ length: pageLength }).map((_, index) => {
+            const isActive = index === currentPage;
+            return (
+              <View
+                key={`slider-dot-top-${index}`}
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: 3,
+                  marginHorizontal: 3,
+                  backgroundColor: isActive
+                    ? parseColor('0xFF111827')
+                    : parseColor('0xFFD1D5DB'),
+                }}
+              />
+            );
+          })}
         </View>
-      ))}
-    </PagerView>
+      ) : null}
+
+      <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,
+              }),
+        }}
+      >
+        <PagerView
+          ref={pagerRef}
+          style={{ width: '100%', height: '100%', minHeight: 1 }}
+          orientation={direction}
+          pageMargin={Math.max(0, pageSpacing)}
+          initialPage={clampSliderPage(currentPage, pageCount)}
+          onPageSelected={(event: PagerViewOnPageSelectedEvent) => {
+            const page = event.nativeEvent.position;
+            const safePage = clampSliderPage(page, pageCount);
+            setCurrentPage(safePage);
+            markInteracting();
+            if (registry && id) {
+              registry.update(id, safePage % pageLength, pageLength);
+            }
+          }}
+        >
+          {Array.from({ length: pageCount }).map((_, index) => (
+            <View
+              key={`slider-page-${index}`}
+              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%',
+                }) as ViewStyle),
+              }}
+            >
+              {children[index % pageLength]}
+            </View>
+          ))}
+        </PagerView>
+      </View>
+
+      {showDots && pageControlPosition === 'bottom' ? (
+        <View
+          style={{
+            marginTop: 8,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {Array.from({ length: pageLength }).map((_, index) => {
+            const isActive = index === currentPage;
+            return (
+              <View
+                key={`slider-dot-bottom-${index}`}
+                style={{
+                  width: 6,
+                  height: 6,
+                  borderRadius: 3,
+                  marginHorizontal: 3,
+                  backgroundColor: isActive
+                    ? parseColor('0xFF111827')
+                    : parseColor('0xFFD1D5DB'),
+                }}
+              />
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
   );
 }
 
@@ -3636,12 +4223,6 @@ function clampSliderPage(page: number, pageCount: number): number {
   return Math.floor(page);
 }
 
-function normalizeLoopIndex(index: number, size: number): number {
-  if (size <= 0 || !Number.isFinite(index)) return 0;
-  const normalized = Math.floor(index) % size;
-  return normalized < 0 ? normalized + size : normalized;
-}
-
 function PageViewIndicator({
   linkedTo,
   activeColor,