flowboard-react 0.4.3 → 0.5.1

package/lib/module/components/FlowboardRenderer.js

@@ -1,8 +1,8 @@
 "use strict";
 
 import React, { useMemo } from 'react';
-import { Animated, Pressable, ScrollView, StyleSheet, Text, TextInput, View, Image, Vibration } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Animated, KeyboardAvoidingView, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, View, Image, Vibration } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import MaskedView from '@react-native-masked-view/masked-view';
 import LinearGradient from 'react-native-linear-gradient';
 import LottieView from 'lottie-react-native';
@@ -24,13 +24,30 @@ const styles = StyleSheet.create({
   whiteBg: {
     backgroundColor: '#ffffff'
   },
-  safeArea: {
+  contentLayer: {
     flex: 1
   },
   progressWrapper: {
     width: '100%'
   }
 });
+function resolvePageScrollAxis(screenData) {
+  const raw = String(screenData.pageScroll ?? screenData.scrollDirection ?? (screenData.scrollable === true ? 'vertical' : 'none')).toLowerCase();
+  if (raw === 'none') return 'none';
+  return 'vertical';
+}
+function getAxisBoundsForPageScroll(pageScroll) {
+  if (pageScroll === 'vertical') {
+    return {
+      widthBounded: true,
+      heightBounded: false
+    };
+  }
+  return {
+    widthBounded: true,
+    heightBounded: true
+  };
+}
 export default function FlowboardRenderer(props) {
   const {
     screenData,
@@ -49,8 +66,12 @@ export default function FlowboardRenderer(props) {
   const progressThickness = Number(screenData.progressThickness ?? 4);
   const progressRadius = Number(screenData.progressRadius ?? 0);
   const progressStyle = screenData.progressStyle ?? 'linear';
-  const scrollable = screenData.scrollable === true;
+  const pageScroll = resolvePageScrollAxis(screenData);
+  const pageAxisBounds = getAxisBoundsForPageScroll(pageScroll);
+  const scrollable = pageScroll !== 'none';
   const safeArea = screenData.safeArea !== false;
+  const safeAreaInsets = useSafeAreaInsets();
+  const rootAxis = 'vertical';
   const padding = parseInsets(screenData.padding);
   const contentPaddingStyle = insetsToStyle(padding);
   const progressPaddingStyle = {
@@ -59,6 +80,12 @@ export default function FlowboardRenderer(props) {
     paddingLeft: padding.left
   };
   const rootCrossAxisAlignment = screenData.crossAxisAlignment ?? screenData.crossAxis;
+  const safeAreaPaddingStyle = safeArea ? {
+    paddingTop: safeAreaInsets.top,
+    paddingRight: safeAreaInsets.right,
+    paddingBottom: safeAreaInsets.bottom,
+    paddingLeft: safeAreaInsets.left
+  } : null;
   const content = /*#__PURE__*/_jsxs(View, {
     style: {
       flex: 1
@@ -69,6 +96,9 @@ export default function FlowboardRenderer(props) {
       }],
       children: renderProgressBar(currentIndex, totalScreens, progressColor, progressThickness, progressRadius, progressStyle)
     }), scrollable ? /*#__PURE__*/_jsx(ScrollView, {
+      horizontal: false,
+      keyboardShouldPersistTaps: "handled",
+      keyboardDismissMode: Platform.OS === 'ios' ? 'interactive' : 'on-drag',
       contentContainerStyle: {
         ...contentPaddingStyle,
         paddingTop: showProgress ? 0 : padding.top
@@ -76,14 +106,20 @@ export default function FlowboardRenderer(props) {
       children: /*#__PURE__*/_jsx(View, {
         style: {
           flexGrow: 1,
+          flexDirection: 'column',
           justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
-          alignItems: parseRootCrossAlignment(rootCrossAxisAlignment)
+          alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
+          minHeight: 0,
+          minWidth: 0
         },
         children: childrenData.map((child, index) => buildWidget(child, {
           onAction,
           formData,
           onInputChange,
           allowFlexExpansion: true,
+          parentFlexAxis: rootAxis,
+          parentMainAxisBounded: pageAxisBounds.heightBounded,
+          pageAxisBounds,
           screenData,
           enableFontAwesomeIcons,
           key: `child-${index}`
@@ -102,6 +138,9 @@ export default function FlowboardRenderer(props) {
         formData,
         onInputChange,
         allowFlexExpansion: true,
+        parentFlexAxis: rootAxis,
+        parentMainAxisBounded: true,
+        pageAxisBounds,
         screenData,
         enableFontAwesomeIcons,
         key: `child-${index}`
@@ -110,12 +149,15 @@ export default function FlowboardRenderer(props) {
   });
   return /*#__PURE__*/_jsxs(View, {
     style: styles.root,
-    children: [renderBackground(backgroundData, bgColorCode), safeArea ? /*#__PURE__*/_jsx(SafeAreaView, {
-      style: styles.safeArea,
-      mode: "padding",
-      edges: ['top', 'right', 'bottom', 'left'],
-      children: content
-    }) : content]
+    children: [renderBackground(backgroundData, bgColorCode), /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+      style: styles.contentLayer,
+      behavior: Platform.OS === 'ios' ? 'padding' : Platform.OS === 'android' ? 'height' : undefined,
+      keyboardVerticalOffset: 0,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [styles.contentLayer, safeAreaPaddingStyle],
+        children: content
+      })
+    })]
   });
 }
 function renderBackground(bgData, legacyColorCode) {
@@ -272,17 +314,411 @@ function renderProgressBar(currentIndex, totalScreens, color, thickness, radius,
     })
   });
 }
+const STACK_SPACE_DISTRIBUTIONS = new Set(['spaceBetween', 'spaceAround', 'spaceEvenly']);
+function normalizeStackSpacingConfig(value) {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return {
+      x: value,
+      y: value
+    };
+  }
+  if (!value || typeof value !== 'object') {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+  const x = Number(value.x ?? value.horizontal);
+  const y = Number(value.y ?? value.vertical);
+  const top = Number(value.top);
+  const right = Number(value.right);
+  const bottom = Number(value.bottom);
+  const left = Number(value.left);
+  const normalized = {};
+  if (!Number.isNaN(x)) normalized.x = x;
+  if (!Number.isNaN(y)) normalized.y = y;
+  if (!Number.isNaN(top)) normalized.top = top;
+  if (!Number.isNaN(right)) normalized.right = right;
+  if (!Number.isNaN(bottom)) normalized.bottom = bottom;
+  if (!Number.isNaN(left)) normalized.left = left;
+  if (Object.keys(normalized).length === 0) {
+    return {
+      x: 0,
+      y: 0
+    };
+  }
+  return normalized;
+}
+function stackSpacingToInsets(value) {
+  const normalized = normalizeStackSpacingConfig(value);
+  return parseInsets({
+    horizontal: normalized.x,
+    vertical: normalized.y,
+    top: normalized.top,
+    right: normalized.right,
+    bottom: normalized.bottom,
+    left: normalized.left
+  });
+}
+function isLegacyOverlayAlignment(value) {
+  return ['topLeft', 'topCenter', 'topRight', 'centerLeft', 'center', 'centerRight', 'bottomLeft', 'bottomCenter', 'bottomRight'].includes(String(value ?? ''));
+}
+function normalizeStackAxis(type, props) {
+  const explicit = String(props.axis ?? '').toLowerCase();
+  if (explicit === 'vertical' || explicit === 'horizontal' || explicit === 'overlay') {
+    return explicit;
+  }
+  if (type === 'container') return 'overlay';
+  if (type === 'row') return 'horizontal';
+  if (type === 'column') return 'vertical';
+  if (type === 'layout') {
+    return props.direction === 'horizontal' ? 'horizontal' : 'vertical';
+  }
+  if (type === 'stack' && (props.fit !== undefined || isLegacyOverlayAlignment(props.alignment))) {
+    return 'overlay';
+  }
+  return 'vertical';
+}
+function normalizeStackDistribution(value) {
+  const normalized = String(value ?? '').trim();
+  if (normalized === 'center' || normalized === 'end' || normalized === 'spaceBetween' || normalized === 'spaceAround' || normalized === 'spaceEvenly') {
+    return normalized;
+  }
+  return 'start';
+}
+function normalizeStackCrossAlignment(value) {
+  const raw = String(value ?? '').toLowerCase();
+  if (raw === 'center' || raw.includes('center')) return 'center';
+  if (raw === 'end' || raw.endsWith('right') || raw.startsWith('bottom')) return 'end';
+  return 'start';
+}
+function normalizeOverlayAlignment(value) {
+  const raw = String(value ?? '').trim();
+  switch (raw) {
+    case 'topStart':
+    case 'top':
+    case 'topEnd':
+    case 'start':
+    case 'center':
+    case 'end':
+    case 'bottomStart':
+    case 'bottom':
+    case 'bottomEnd':
+      return raw;
+    case 'topLeft':
+      return 'topStart';
+    case 'topCenter':
+      return 'top';
+    case 'topRight':
+      return 'topEnd';
+    case 'centerLeft':
+      return 'start';
+    case 'centerRight':
+      return 'end';
+    case 'bottomLeft':
+      return 'bottomStart';
+    case 'bottomCenter':
+      return 'bottom';
+    case 'bottomRight':
+      return 'bottomEnd';
+    default:
+      return 'center';
+  }
+}
+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%';
+}
+function isFixedDimensionValue(value) {
+  if (isFillDimensionValue(value)) return false;
+  const parsed = Number(value);
+  return Number.isFinite(parsed);
+}
+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';
+  return {
+    width,
+    height
+  };
+}
+function normalizeStackFill(props) {
+  if (props.fill && typeof props.fill === 'object') {
+    const next = {
+      ...props.fill
+    };
+    if (!next.type && next.color) next.type = 'solid';
+    return next;
+  }
+  if (props.background && typeof props.background === 'object') {
+    if (props.background.type === 'color') {
+      return {
+        type: 'solid',
+        color: props.background.color
+      };
+    }
+    return {
+      ...props.background
+    };
+  }
+  if (props.backgroundColor) {
+    return {
+      type: 'solid',
+      color: props.backgroundColor
+    };
+  }
+  return undefined;
+}
+function normalizeStackBorder(props) {
+  if (props.border && typeof props.border === 'object') {
+    return {
+      ...props.border
+    };
+  }
+  if (props.borderColor || props.borderWidth !== undefined) {
+    return {
+      width: Number(props.borderWidth ?? 1),
+      color: props.borderColor
+    };
+  }
+  return undefined;
+}
+function normalizeStackShadow(props) {
+  if (props.shadow && typeof props.shadow === 'object') {
+    return {
+      ...props.shadow
+    };
+  }
+  return undefined;
+}
+function spacingToInsets(value) {
+  const normalized = normalizeStackSpacingConfig(value);
+  const x = normalized.x ?? 0;
+  const y = normalized.y ?? 0;
+  return {
+    top: normalized.top ?? y,
+    right: normalized.right ?? x,
+    bottom: normalized.bottom ?? y,
+    left: normalized.left ?? x
+  };
+}
+function insetsToSpacing(insets) {
+  if (insets.top === insets.bottom && insets.left === insets.right) {
+    return {
+      x: insets.left,
+      y: insets.top
+    };
+  }
+  return insets;
+}
+function mergeStackProps(parentProps, childProps) {
+  const parentAxis = String(parentProps.axis ?? 'vertical');
+  const childAxis = String(childProps.axis ?? 'vertical');
+  let axis = childAxis;
+  if (parentAxis !== childAxis) {
+    if (parentAxis === 'overlay' && childAxis !== 'overlay') axis = childAxis;else if (childAxis === 'overlay' && parentAxis !== 'overlay') axis = parentAxis;
+  }
+  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 = {
+    axis,
+    alignment: axisSource.alignment ?? fallbackAxisSource.alignment ?? 'start',
+    distribution: axisSource.distribution ?? fallbackAxisSource.distribution ?? 'start',
+    childSpacing: Number(axisSource.childSpacing ?? fallbackAxisSource.childSpacing ?? 0) || 0,
+    size: {
+      width: childProps.size?.width ?? parentProps.size?.width ?? 'fill',
+      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,
+        bottom: parentMargin.bottom + childMargin.bottom,
+        left: parentMargin.left + childMargin.left
+      })
+    },
+    appearance: {
+      shape: 'rectangle',
+      cornerRadius: Number(childProps.appearance?.cornerRadius ?? parentProps.appearance?.cornerRadius ?? 0)
+    }
+  };
+  if (axis === 'overlay') {
+    mergedProps.overlayAlignment = childProps.overlayAlignment ?? parentProps.overlayAlignment ?? 'center';
+  }
+  if (parentProps.fill || childProps.fill) {
+    mergedProps.fill = childProps.fill ?? parentProps.fill;
+  }
+  if (parentProps.border || childProps.border) {
+    mergedProps.border = childProps.border ?? parentProps.border;
+  }
+  if (parentProps.shadow || childProps.shadow) {
+    mergedProps.shadow = childProps.shadow ?? parentProps.shadow;
+  }
+  if (childProps.width !== undefined || parentProps.width !== undefined) {
+    mergedProps.width = childProps.width ?? parentProps.width;
+  }
+  if (childProps.height !== undefined || parentProps.height !== undefined) {
+    mergedProps.height = childProps.height ?? parentProps.height;
+  }
+  return mergedProps;
+}
+function normalizeStackLikeNode(json) {
+  if (!json || typeof json !== 'object') return json;
+  const type = String(json.type ?? '');
+  if (!['stack', 'container', 'layout', 'row', 'column', 'grid'].includes(type)) {
+    return json;
+  }
+  const props = {
+    ...(json.properties ?? {})
+  };
+  const axis = normalizeStackAxis(type, props);
+  const size = normalizeStackSize(props, axis);
+  const children = Array.isArray(json.children) ? [...json.children] : [];
+  if (json.child) {
+    children.push(json.child);
+  }
+  const normalizedProps = {
+    axis,
+    alignment: normalizeStackCrossAlignment(props.alignment ?? props.crossAxisAlignment),
+    distribution: normalizeStackDistribution(props.distribution ?? props.mainAxisAlignment),
+    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: {
+      shape: 'rectangle',
+      cornerRadius: Number(props.appearance?.cornerRadius ?? props.borderRadius ?? 0)
+    }
+  };
+  if (axis === 'overlay') {
+    normalizedProps.overlayAlignment = normalizeOverlayAlignment(props.overlayAlignment ?? props.alignment);
+  }
+  const fill = normalizeStackFill(props);
+  if (fill) normalizedProps.fill = fill;
+  const border = normalizeStackBorder(props);
+  if (border) normalizedProps.border = border;
+  const shadow = normalizeStackShadow(props);
+  if (shadow) normalizedProps.shadow = shadow;
+  if (props.width !== undefined) normalizedProps.width = props.width;
+  if (props.height !== undefined) normalizedProps.height = props.height;
+  if ((type === 'container' || type === 'layout') && children.length === 1) {
+    const childCandidate = children[0];
+    if (childCandidate && typeof childCandidate === 'object') {
+      const normalizedChild = normalizeStackLikeNode(childCandidate);
+      if (normalizedChild?.type === 'stack') {
+        const childProps = {
+          ...(normalizedChild.properties ?? {})
+        };
+        const mergedProps = mergeStackProps(normalizedProps, childProps);
+        return {
+          ...json,
+          type: 'stack',
+          properties: mergedProps,
+          children: Array.isArray(normalizedChild.children) ? normalizedChild.children : [],
+          child: undefined
+        };
+      }
+    }
+  }
+  return {
+    ...json,
+    type: 'stack',
+    properties: normalizedProps,
+    children,
+    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]));
+  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 (legacy !== undefined) return legacy;
+  if (key === 'width' && axis !== 'horizontal' && axisBounds.widthBounded) return '100%';
+  if (key === 'height' && axis === 'horizontal' && axisBounds.heightBounded) return '100%';
+  return undefined;
+}
 function buildWidget(json, params) {
   if (!json || typeof json !== 'object') return null;
-  const type = json.type;
-  const id = json.id;
+  const normalizedJson = normalizeStackLikeNode(json);
+  const type = normalizedJson.type;
+  const id = normalizedJson.id;
   const props = {
-    ...(json.properties ?? {})
+    ...(normalizedJson.properties ?? {})
   };
-  const childrenJson = Array.isArray(json.children) ? json.children : undefined;
-  const childJson = json.child;
-  const action = json.action;
-  const actionPayload = action ? buildActionPayload(props, json) : undefined;
+  const pageAxisBounds = params.pageAxisBounds ?? getAxisBoundsForPageScroll(resolvePageScrollAxis(params.screenData));
+  const childrenJson = Array.isArray(normalizedJson.children) ? normalizedJson.children : undefined;
+  const childJson = normalizedJson.child;
+  const action = normalizedJson.action;
+  const actionPayload = action ? buildActionPayload(props, normalizedJson) : undefined;
   let node = null;
   switch (type) {
     case 'column':
@@ -457,55 +893,83 @@ function buildWidget(json, params) {
         const width = normalizeDimension(parseLayoutDimension(props.width)) ?? '100%';
         const height = normalizeDimension(parseLayoutDimension(props.height)) ?? 50;
         const label = props.label ?? 'Button';
+        const normalizedStroke = normalizeButtonStroke(props.stroke);
+        const normalizedEffects = normalizeButtonEffects(props.effects, props.shadow);
         const textStyle = getTextStyle({
           ...props,
           height: null
         }, 'textColor', '0xFFFFFFFF');
-        const content = /*#__PURE__*/_jsx(View, {
-          style: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center'
-          },
-          children: /*#__PURE__*/_jsx(Text, {
-            style: textStyle,
-            children: label
-          })
-        });
-        if (gradient) {
-          node = /*#__PURE__*/_jsx(Pressable, {
-            onPress: action ? () => params.onAction(action, actionPayload ?? props) : undefined,
+        const backgroundColor = parseColor(props.color ?? '0xFF2196F3');
+        const shadowBounds = getButtonShadowLayerBounds(normalizedStroke, borderRadius);
+        const webShadowStyle = buildButtonWebShadowStyle(normalizedEffects);
+        const firstNativeEffect = normalizedEffects.length > 0 ? normalizedEffects[0] : null;
+        const nativePrimaryShadowStyle = Platform.OS === 'web' || !firstNativeEffect ? null : buildButtonNativeShadowStyle(firstNativeEffect);
+        const centeredStrokeStyle = normalizedStroke && normalizedStroke.position === 'center' ? {
+          borderWidth: normalizedStroke.width,
+          borderColor: normalizedStroke.color
+        } : null;
+        const fillLayerStyle = {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          borderRadius,
+          overflow: 'hidden',
+          ...(centeredStrokeStyle ?? {})
+        };
+        const nativeShadowEffectsInPaintOrder = normalizedEffects.slice().reverse();
+        const pressableStyle = {
+          width,
+          height,
+          borderRadius,
+          justifyContent: 'center',
+          alignItems: 'center',
+          overflow: 'visible',
+          ...(nativePrimaryShadowStyle ?? {})
+        };
+        node = /*#__PURE__*/_jsxs(Pressable, {
+          collapsable: false,
+          onPress: action ? () => params.onAction(action, actionPayload ?? props) : undefined,
+          style: pressableStyle,
+          children: [Platform.OS === 'web' ? webShadowStyle ? /*#__PURE__*/_jsx(View, {
+            pointerEvents: "none",
             style: {
-              width,
-              height
-            },
-            children: /*#__PURE__*/_jsx(LinearGradient, {
-              colors: gradient.colors,
-              start: gradient.start,
-              end: gradient.end,
-              locations: gradient.stops,
-              style: {
-                flex: 1,
-                borderRadius,
-                overflow: 'hidden'
-              },
-              children: content
-            })
-          });
-        } else {
-          node = /*#__PURE__*/_jsx(Pressable, {
-            onPress: action ? () => params.onAction(action, actionPayload ?? props) : undefined,
+              position: 'absolute',
+              ...shadowBounds,
+              ...webShadowStyle
+            }
+          }) : null : nativeShadowEffectsInPaintOrder.map((effect, index) => /*#__PURE__*/_jsx(View, {
+            collapsable: false,
+            pointerEvents: "none",
             style: {
-              width,
-              height,
-              backgroundColor: parseColor(props.color ?? '0xFF2196F3'),
-              borderRadius,
+              position: 'absolute',
+              ...shadowBounds,
+              ...buildButtonNativeShadowStyle(effect)
+            }
+          }, `shadow-${index}`)), gradient ? /*#__PURE__*/_jsx(LinearGradient, {
+            colors: gradient.colors,
+            start: gradient.start,
+            end: gradient.end,
+            locations: gradient.stops,
+            style: fillLayerStyle
+          }) : /*#__PURE__*/_jsx(View, {
+            style: {
+              ...fillLayerStyle,
+              backgroundColor
+            }
+          }), renderButtonStrokeOverlay(normalizedStroke, borderRadius), /*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1,
               justifyContent: 'center',
               alignItems: 'center'
             },
-            children: content
-          });
-        }
+            children: /*#__PURE__*/_jsx(Text, {
+              style: textStyle,
+              children: label
+            })
+          })]
+        });
         break;
       }
     case 'text_input':
@@ -661,16 +1125,16 @@ function buildWidget(json, params) {
         const source = props.source;
         const width = normalizeDimension(parseLayoutDimension(props.width, true));
         const height = normalizeDimension(parseLayoutDimension(props.height, true));
+        const style = resolveLottieStyle(width, height);
+        const resizeMode = parseResizeMode(props.fit);
         const loop = props.loop === true;
         if (source === 'asset') {
           node = /*#__PURE__*/_jsx(LottieView, {
             source: {
               uri: props.path ?? ''
             },
-            style: {
-              width,
-              height
-            },
+            style: style,
+            resizeMode: resizeMode,
             autoPlay: true,
             loop: loop
           });
@@ -680,10 +1144,8 @@ function buildWidget(json, params) {
             source: {
               uri: props.url
             },
-            style: {
-              width,
-              height
-            },
+            style: style,
+            resizeMode: resizeMode,
             autoPlay: true,
             loop: loop
           });
@@ -819,22 +1281,112 @@ function buildWidget(json, params) {
       }
     case 'stack':
       {
-        const alignment = parseAlignment(props.alignment ?? 'topLeft');
-        const fit = props.fit === 'expand' ? 'expand' : 'loose';
-        node = /*#__PURE__*/_jsx(View, {
+        const axis = props.axis === 'horizontal' || props.axis === 'overlay' ? props.axis : 'vertical';
+        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;
+        const borderRadius = Number(props.appearance?.cornerRadius ?? props.borderRadius ?? 0);
+        const borderWidth = Number(props.border?.width ?? 0);
+        const borderColor = borderWidth > 0 ? parseColor(props.border?.color ?? '#E5E7EB') : null;
+        const shadowColor = props.shadow?.color ? parseColor(props.shadow.color) : null;
+        const shadowStyle = shadowColor && props.shadow ? Platform.OS === 'web' ? {
+          boxShadow: `${Number(props.shadow.x ?? 0)}px ${Number(props.shadow.y ?? 8)}px ${Number(props.shadow.blur ?? 24)}px ${shadowColor}`
+        } : {
+          shadowColor,
+          shadowOffset: {
+            width: Number(props.shadow.x ?? 0),
+            height: Number(props.shadow.y ?? 8)
+          },
+          shadowOpacity: 0.35,
+          shadowRadius: Math.max(0, Number(props.shadow.blur ?? 24) / 2),
+          elevation: Math.max(1, Math.round((Number(props.shadow.blur ?? 24) + Math.abs(Number(props.shadow.y ?? 8))) / 3))
+        } : {};
+        const fill = props.fill;
+        const stackGradient = fill?.type === 'gradient' ? parseGradient({
+          ...fill,
+          type: 'gradient'
+        }) : undefined;
+        const stackColor = fill?.type === 'solid' || !fill?.type && fill?.color ? parseColor(fill?.color ?? '#FFFFFFFF') : parseColor(props.backgroundColor ?? '#00000000');
+        const baseStackStyle = {
+          width,
+          height,
+          borderRadius: borderRadius > 0 ? borderRadius : undefined,
+          overflow: borderRadius > 0 ? 'hidden' : undefined,
+          borderWidth: borderColor ? borderWidth : undefined,
+          borderColor: borderColor ?? undefined,
+          ...insetsToStyle(paddingInsets),
+          ...shadowStyle
+        };
+        const content = isOverlay ? /*#__PURE__*/_jsxs(View, {
           style: {
             position: 'relative',
-            width: fit === 'expand' ? '100%' : undefined,
-            height: fit === 'expand' ? '100%' : undefined,
-            justifyContent: alignment.justifyContent,
-            alignItems: alignment.alignItems
+            minHeight: 0,
+            minWidth: 0
           },
-          children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsx(React.Fragment, {
-            children: buildWidget(child, {
-              ...params
-            })
+          children: [(childrenJson ?? []).map((child, index) => {
+            const alignment = parseOverlayGridAlignment(props.overlayAlignment ?? props.alignment);
+            return /*#__PURE__*/_jsx(View, {
+              style: {
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                justifyContent: alignment.justifyContent,
+                alignItems: alignment.alignItems
+              },
+              children: buildWidget(child, {
+                ...params,
+                allowFlexExpansion: true,
+                pageAxisBounds
+              })
+            }, `stack-overlay-${index}`);
+          }), (childrenJson ?? []).length === 0 ? null : null]
+        }) : /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: axis === 'horizontal' ? 'row' : 'column',
+            justifyContent: parseFlexAlignment(props.distribution),
+            alignItems: parseCrossAlignment(props.alignment),
+            minHeight: 0,
+            minWidth: 0
+          },
+          children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [buildWidget(child, {
+              ...params,
+              allowFlexExpansion: true,
+              parentFlexAxis: axis === 'horizontal' ? 'horizontal' : 'vertical',
+              parentMainAxisBounded: mainAxisBounded,
+              pageAxisBounds
+            }), applySpacing && spacing > 0 && index < (childrenJson?.length ?? 0) - 1 ? /*#__PURE__*/_jsx(View, {
+              style: {
+                width: axis === 'horizontal' ? spacing : undefined,
+                height: axis === 'vertical' ? spacing : undefined
+              }
+            }) : null]
           }, `stack-${index}`))
         });
+        if (stackGradient) {
+          node = /*#__PURE__*/_jsx(LinearGradient, {
+            colors: stackGradient.colors,
+            start: stackGradient.start,
+            end: stackGradient.end,
+            locations: stackGradient.stops,
+            style: baseStackStyle,
+            children: content
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(View, {
+            style: {
+              ...baseStackStyle,
+              backgroundColor: stackColor
+            },
+            children: content
+          });
+        }
         break;
       }
     case 'positioned':
@@ -865,35 +1417,66 @@ function buildWidget(json, params) {
       node = null;
   }
   if (!node) return null;
-  const marginVal = props.margin;
+  const marginVal = type === 'stack' ? props.layout?.margin ?? props.margin : props.margin;
   if (marginVal !== undefined && marginVal !== null) {
-    const marginInsets = parseInsets(marginVal);
+    const marginInsets = type === 'stack' ? stackSpacingToInsets(marginVal) : parseInsets(marginVal);
     node = /*#__PURE__*/_jsx(View, {
       style: insetsToMarginStyle(marginInsets),
       children: node
     });
-  } else if (type !== 'container' && type !== 'padding' && props.padding) {
+  } else if (type !== 'container' && type !== 'padding' && type !== 'stack' && props.padding) {
     const paddingInsets = parseInsets(props.padding);
     node = /*#__PURE__*/_jsx(View, {
       style: insetsToStyle(paddingInsets),
       children: node
     });
   }
-  if (params.allowFlexExpansion && params.screenData.scrollable !== true) {
+  const shouldStretchTextInput = type === 'text_input' && props.width === undefined && props.size?.width === undefined;
+  if (shouldStretchTextInput) {
+    node = /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%',
+        alignSelf: 'stretch',
+        minWidth: 0
+      },
+      children: node
+    });
+  }
+  if (params.allowFlexExpansion) {
     let shouldExpand = false;
-    if (type === 'stack' && props.fit === 'expand') {
-      shouldExpand = true;
-    }
-    if (props.height !== undefined) {
-      const heightVal = parseLayoutDimension(props.height);
-      if (heightVal === Number.POSITIVE_INFINITY) {
-        shouldExpand = true;
+    const parentAxis = params.parentFlexAxis ?? 'vertical';
+    const parentMainAxisBounded = params.parentMainAxisBounded ?? true;
+    if (parentMainAxisBounded) {
+      if (type === 'stack') {
+        const legacyExpand = props.fit === 'expand';
+        const widthMode = String(props.size?.width ?? '').toLowerCase();
+        const heightMode = String(props.size?.height ?? '').toLowerCase();
+        if (parentAxis === 'vertical' && (legacyExpand || heightMode === 'fill')) {
+          shouldExpand = true;
+        }
+        if (parentAxis === 'horizontal' && (legacyExpand || widthMode === 'fill')) {
+          shouldExpand = true;
+        }
+      }
+      if (parentAxis === 'vertical' && props.height !== undefined) {
+        const heightVal = parseLayoutDimension(props.height);
+        if (heightVal === Number.POSITIVE_INFINITY) {
+          shouldExpand = true;
+        }
+      }
+      if (parentAxis === 'horizontal' && props.width !== undefined) {
+        const widthVal = parseLayoutDimension(props.width);
+        if (widthVal === Number.POSITIVE_INFINITY) {
+          shouldExpand = true;
+        }
       }
     }
     if (shouldExpand) {
       node = /*#__PURE__*/_jsx(View, {
         style: {
-          flex: 1
+          flex: 1,
+          minHeight: 0,
+          minWidth: 0
         },
         children: node
       });
@@ -958,6 +1541,132 @@ function parseGradient(value) {
     stops
   };
 }
+function normalizeButtonStroke(input) {
+  if (!input || typeof input !== 'object') return null;
+  const legacyStrokeWithoutEnabled = input.enabled === undefined;
+  const enabled = legacyStrokeWithoutEnabled ? true : input.enabled === true;
+  if (!enabled) return null;
+  const width = Number(input.width ?? 1);
+  if (!Number.isFinite(width) || width <= 0) return null;
+  const position = input.position === 'inside' || input.position === 'center' || input.position === 'outside' ? input.position : 'center';
+  const opacity = clamp01(Number(input.opacity ?? 1));
+  const color = normalizeColorWithOpacity(input.color, opacity);
+  if (color === 'transparent') return null;
+  return {
+    color,
+    width,
+    position
+  };
+}
+function normalizeButtonEffects(effectsInput, legacyShadowInput) {
+  if (Array.isArray(effectsInput)) {
+    return effectsInput.map(normalizeDropShadowEffect).filter(effect => effect !== null);
+  }
+  if (!legacyShadowInput || typeof legacyShadowInput !== 'object') {
+    return [];
+  }
+  if (legacyShadowInput.enabled !== true) return [];
+  const migrated = normalizeDropShadowEffect({
+    type: 'dropShadow',
+    enabled: true,
+    x: legacyShadowInput.x,
+    y: legacyShadowInput.y,
+    blur: legacyShadowInput.blur,
+    spread: 0,
+    color: legacyShadowInput.color,
+    opacity: 1
+  });
+  return migrated ? [migrated] : [];
+}
+function normalizeDropShadowEffect(effect) {
+  if (!effect || typeof effect !== 'object') return null;
+  if ((effect.type ?? 'dropShadow') !== 'dropShadow') return null;
+  if (effect.enabled === false) return null;
+  const opacity = clamp01(Number(effect.opacity ?? 1));
+  const color = normalizeColorWithOpacity(effect.color, opacity);
+  if (color === 'transparent') return null;
+  return {
+    x: Number(effect.x ?? 0),
+    y: Number(effect.y ?? 0),
+    blur: Math.max(0, Number(effect.blur ?? 0)),
+    spread: Number(effect.spread ?? 0),
+    color,
+    opacity
+  };
+}
+function normalizeColorWithOpacity(input, opacity) {
+  const raw = typeof input === 'string' ? input.trim() : '';
+  const normalizedOpacity = clamp01(opacity);
+  if (raw.startsWith('rgba(') || raw.startsWith('rgb(')) {
+    return withOpacity(raw, normalizedOpacity);
+  }
+  return withOpacity(parseColor(input ?? '0xFF000000'), normalizedOpacity);
+}
+function buildButtonWebShadowStyle(effects) {
+  if (effects.length === 0) return null;
+  const layers = effects.map(effect => `${effect.x}px ${effect.y}px ${effect.blur}px ${effect.spread}px ${effect.color}`);
+  return {
+    boxShadow: layers.join(', ')
+  };
+}
+function buildButtonNativeShadowStyle(effect) {
+  const rgba = parseRgbaColor(effect.color);
+  return {
+    // Android elevation requires a drawable host shape; keep it effectively invisible.
+    backgroundColor: 'rgba(255,255,255,0.02)',
+    shadowColor: rgba ? `rgba(${rgba.r},${rgba.g},${rgba.b},1)` : effect.color,
+    shadowOffset: {
+      width: effect.x,
+      height: effect.y
+    },
+    shadowOpacity: rgba ? rgba.a : effect.opacity,
+    shadowRadius: effect.blur / 2,
+    elevation: Math.max(1, Math.round((effect.blur + Math.abs(effect.y)) / 3))
+  };
+}
+function getButtonShadowLayerBounds(stroke, borderRadius) {
+  const expandBy = !stroke || stroke.position === 'inside' ? 0 : stroke.position === 'center' ? stroke.width / 2 : stroke.width;
+  return {
+    top: -expandBy,
+    right: -expandBy,
+    bottom: -expandBy,
+    left: -expandBy,
+    borderRadius: borderRadius + expandBy
+  };
+}
+function renderButtonStrokeOverlay(stroke, borderRadius) {
+  if (!stroke || stroke.position === 'center') {
+    return null;
+  }
+  if (stroke.position === 'inside') {
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: {
+        position: 'absolute',
+        top: stroke.width / 2,
+        left: stroke.width / 2,
+        right: stroke.width / 2,
+        bottom: stroke.width / 2,
+        borderRadius: Math.max(0, borderRadius - stroke.width / 2),
+        borderWidth: stroke.width,
+        borderColor: stroke.color
+      }
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: {
+      position: 'absolute',
+      top: -stroke.width,
+      left: -stroke.width,
+      right: -stroke.width,
+      bottom: -stroke.width,
+      borderRadius: borderRadius + stroke.width,
+      borderWidth: stroke.width,
+      borderColor: stroke.color
+    }
+  });
+}
 function alignmentToGradient(value) {
   switch (value) {
     case 'topCenter':
@@ -1009,10 +1718,23 @@ function alignmentToGradient(value) {
   }
 }
 function withOpacity(color, opacity) {
-  if (color.startsWith('rgba')) {
-    return color.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, (_m, r, g, b) => `rgba(${r},${g},${b},${opacity})`);
-  }
-  return color;
+  const rgba = parseRgbaColor(color);
+  if (!rgba) return color;
+  return `rgba(${rgba.r},${rgba.g},${rgba.b},${clamp01(rgba.a * opacity)})`;
+}
+function parseRgbaColor(color) {
+  const match = color.match(/^rgba?\(\s*([0-9.]+)\s*,\s*([0-9.]+)\s*,\s*([0-9.]+)(?:\s*,\s*([0-9.]+))?\s*\)$/i);
+  if (!match) return null;
+  return {
+    r: Math.round(Number(match[1])),
+    g: Math.round(Number(match[2])),
+    b: Math.round(Number(match[3])),
+    a: match[4] === undefined ? 1 : clamp01(Number(match[4]))
+  };
+}
+function clamp01(value) {
+  if (!Number.isFinite(value)) return 1;
+  return Math.max(0, Math.min(1, value));
 }
 function normalizeDimension(value) {
   if (value === Number.POSITIVE_INFINITY) {
@@ -1114,6 +1836,35 @@ function SduiImage({
     onError: () => setHasError(true)
   });
 }
+function resolveLottieStyle(width, height) {
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const style = {};
+  if (hasExplicitWidth) {
+    style.width = width;
+  } else {
+    style.width = 'auto';
+  }
+  if (hasExplicitHeight) {
+    style.height = height;
+  } else {
+    style.height = 'auto';
+  }
+  if (width === '100%') {
+    style.width = '100%';
+    style.alignSelf = 'stretch';
+    style.minWidth = 0;
+  }
+  if (hasExplicitWidth && !hasExplicitHeight) {
+    delete style.height;
+    style.aspectRatio = 1;
+  }
+  if (!hasExplicitWidth && hasExplicitHeight) {
+    delete style.width;
+    style.aspectRatio = 1;
+  }
+  return style;
+}
 function GradientText({
   text,
   gradient,
@@ -1140,6 +1891,44 @@ function GradientText({
     })
   });
 }
+function resolveTextInputBackgroundColor(properties) {
+  const canonical = properties.backgroundColor;
+  if (typeof canonical === 'string' && canonical.trim().length > 0) {
+    return parseColor(canonical);
+  }
+  const legacyBackground = properties.background;
+  if (legacyBackground && typeof legacyBackground === 'object' && !Array.isArray(legacyBackground)) {
+    const type = String(legacyBackground.type ?? '').toLowerCase();
+    if (type === 'color' && typeof legacyBackground.color === 'string') {
+      return parseColor(legacyBackground.color);
+    }
+    if (type === 'gradient' && Array.isArray(legacyBackground.colors)) {
+      const firstGradientColor = legacyBackground.colors.find(value => typeof value === 'string' && value.trim().length > 0);
+      if (typeof firstGradientColor === 'string') {
+        return parseColor(firstGradientColor);
+      }
+    }
+  } else if (typeof legacyBackground === 'string' && legacyBackground.trim().length > 0) {
+    return parseColor(legacyBackground);
+  }
+  return parseColor('0xFFF0F0F0');
+}
+function normalizeTextInputStroke(properties) {
+  const parsedWidth = Number(properties.strokeWidth ?? 0);
+  const width = Number.isFinite(parsedWidth) && parsedWidth > 0 ? parsedWidth : 0;
+  const enabled = typeof properties.strokeEnabled === 'boolean' ? properties.strokeEnabled : width > 0;
+  const normalizedWidth = enabled ? width : 0;
+  const color = normalizedWidth > 0 ? parseColor(properties.strokeColor ?? '#000000') : 'transparent';
+  const parsedRadius = Number(properties.strokeRadius ?? properties.borderRadius ?? 8);
+  const radius = Number.isFinite(parsedRadius) ? Math.max(0, parsedRadius) : 8;
+  const style = properties.strokeStyle === 'dashed' || properties.strokeStyle === 'dotted' ? properties.strokeStyle : 'solid';
+  return {
+    width: normalizedWidth,
+    color,
+    radius,
+    style
+  };
+}
 function DynamicInput({
   initialValue,
   properties,
@@ -1163,18 +1952,26 @@ function DynamicInput({
     ...properties,
     height: null
   }, 'textColor');
-  const backgroundColor = parseColor(properties.backgroundColor ?? '0xFFF0F0F0');
-  const borderRadius = Number(properties.borderRadius ?? 8);
+  const backgroundColor = resolveTextInputBackgroundColor(properties);
+  const stroke = normalizeTextInputStroke(properties);
+  const parsedPadding = Number(properties.padding ?? 12);
+  const padding = Number.isFinite(parsedPadding) ? Math.max(0, parsedPadding) : 12;
   return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: '100%'
+    },
     children: [label ? /*#__PURE__*/_jsx(Text, {
       style: labelStyle,
       children: label
     }) : null, /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
         backgroundColor,
-        borderRadius,
-        paddingHorizontal: 16,
-        paddingVertical: 10
+        borderRadius: stroke.radius,
+        borderStyle: stroke.width > 0 ? stroke.style : undefined,
+        borderWidth: stroke.width,
+        borderColor: stroke.color,
+        padding
       },
       children: mask ? /*#__PURE__*/_jsx(MaskInput, {
         value: value,
@@ -1313,6 +2110,7 @@ function SelectionList({
   if (layout === 'row') {
     return /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
         flexDirection: 'row',
         flexWrap: 'wrap'
       },
@@ -1330,6 +2128,7 @@ function SelectionList({
     const aspectRatio = Number(properties.gridAspectRatio ?? 1);
     return /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
         flexDirection: 'row',
         flexWrap: 'wrap'
       },
@@ -1345,8 +2144,12 @@ function SelectionList({
     });
   }
   return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: '100%'
+    },
     children: options.map((option, index) => /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
         marginBottom: spacing
       },
       children: renderItem(option, index)
@@ -1529,6 +2332,8 @@ function WheelPicker({
   if (layout === 'row') {
     return /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
+        alignSelf: 'stretch',
         flexDirection: 'row',
         flexWrap: 'wrap'
       },
@@ -1546,6 +2351,8 @@ function WheelPicker({
     const aspectRatio = Number(properties.gridAspectRatio ?? 1);
     return /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
+        alignSelf: 'stretch',
         flexDirection: 'row',
         flexWrap: 'wrap'
       },
@@ -1566,6 +2373,8 @@ function WheelPicker({
     const baseUnselectedStyle = properties.unselectedStyle ?? properties.selectedStyle ?? {};
     const overlayBorderColor = parseColor(properties.wheelCenterBorderColor ?? properties.wheelSelectedBorderColor ?? baseUnselectedStyle.borderColor ?? '#D6D6DC');
     const overlayBackgroundColor = parseColor(properties.wheelCenterBackgroundColor ?? '#24FFFFFF');
+    const wheelEdgeFadeOpacity = Math.max(0, Math.min(1, Number(properties.wheelEdgeFadeOpacity ?? 0)));
+    const wheelEdgeFadeColor = parseColor(properties.wheelEdgeFadeColor ?? '#FFFFFF');
     const handleWheelMomentumEnd = event => {
       const offsetY = Number(event?.nativeEvent?.contentOffset?.y ?? 0);
       const settledIndex = clampWheelIndex(Math.round(offsetY / wheelRowStride));
@@ -1580,11 +2389,17 @@ function WheelPicker({
     };
     return /*#__PURE__*/_jsxs(View, {
       style: {
+        width: '100%',
+        alignSelf: 'stretch',
         height: wheelContainerHeight,
-        overflow: 'hidden'
+        overflow: 'hidden',
+        justifyContent: 'center'
       },
       children: [/*#__PURE__*/_jsx(Animated.ScrollView, {
         ref: wheelScrollRef,
+        style: {
+          width: '100%'
+        },
         showsVerticalScrollIndicator: false,
         bounces: false,
         decelerationRate: "fast",
@@ -1593,7 +2408,9 @@ function WheelPicker({
         disableIntervalMomentum: false,
         onMomentumScrollEnd: handleWheelMomentumEnd,
         contentContainerStyle: {
-          paddingVertical: centerPadding
+          width: '100%',
+          paddingVertical: centerPadding,
+          alignItems: 'center'
         },
         onScroll: Animated.event([{
           nativeEvent: {
@@ -1629,8 +2446,10 @@ function WheelPicker({
           });
           return /*#__PURE__*/_jsx(Animated.View, {
             style: {
+              width: '100%',
               height: wheelRowStride,
               justifyContent: 'center',
+              alignItems: 'center',
               opacity,
               transform: [{
                 perspective: 1200
@@ -1644,8 +2463,10 @@ function WheelPicker({
             },
             children: /*#__PURE__*/_jsx(View, {
               style: {
+                width: '100%',
                 minHeight: wheelItemHeight,
-                justifyContent: 'center'
+                justifyContent: 'center',
+                alignItems: 'center'
               },
               children: renderItem(option, index)
             })
@@ -1664,9 +2485,9 @@ function WheelPicker({
           borderColor: overlayBorderColor,
           backgroundColor: overlayBackgroundColor
         }
-      }), /*#__PURE__*/_jsx(LinearGradient, {
+      }), wheelEdgeFadeOpacity > 0 && centerPadding > 0 ? /*#__PURE__*/_jsx(LinearGradient, {
         pointerEvents: "none",
-        colors: ['rgba(255,255,255,0.92)', 'rgba(255,255,255,0)'],
+        colors: [withOpacity(wheelEdgeFadeColor, wheelEdgeFadeOpacity), withOpacity(wheelEdgeFadeColor, 0)],
         style: {
           position: 'absolute',
           top: 0,
@@ -1674,9 +2495,9 @@ function WheelPicker({
           right: 0,
           height: centerPadding
         }
-      }), /*#__PURE__*/_jsx(LinearGradient, {
+      }) : null, wheelEdgeFadeOpacity > 0 && centerPadding > 0 ? /*#__PURE__*/_jsx(LinearGradient, {
         pointerEvents: "none",
-        colors: ['rgba(255,255,255,0)', 'rgba(255,255,255,0.92)'],
+        colors: [withOpacity(wheelEdgeFadeColor, 0), withOpacity(wheelEdgeFadeColor, wheelEdgeFadeOpacity)],
         style: {
           position: 'absolute',
           bottom: 0,
@@ -1684,12 +2505,17 @@ function WheelPicker({
           right: 0,
           height: centerPadding
         }
-      })]
+      }) : null]
     });
   }
   return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: '100%',
+      alignSelf: 'stretch'
+    },
     children: resolvedOptions.map((option, index) => /*#__PURE__*/_jsx(View, {
       style: {
+        width: '100%',
         marginBottom: spacing
       },
       children: renderItem(option, index)
@@ -2113,16 +2939,33 @@ function RadarChart({
   const axisColor = parseColor(properties.axisColor ?? '0xFF9E9E9E');
   const axisStrokeWidth = Number(properties.axisStrokeWidth ?? 1);
   const axisLabelStyle = getTextStyle(properties.axisLabelStyle ?? {}, 'color', '0xFF424242');
+  const resolvedAxisLabelFontSize = resolveRadarAxisLabelFontSize(axisLabelStyle.fontSize);
+  const autoFitLabels = properties.autoFitLabels !== false;
+  const resolvedLabelOffset = resolveRadarLabelOffset(properties.labelOffset, resolvedAxisLabelFontSize);
   const showLegend = properties.showLegend !== false;
   const legendPosition = (properties.legendPosition ?? 'bottom').toLowerCase();
   const legendSpacing = Number(properties.legendSpacing ?? 12);
   const legendStyle = getTextStyle(properties.legendStyle ?? {}, 'color', '0xFF212121');
   const shape = (properties.shape ?? 'polygon').toLowerCase();
-  const chartSize = Math.min(width, height);
-  const radius = Math.max(chartSize / 2 - Math.max(padding.left, padding.right, padding.top, padding.bottom), 8);
+  const innerWidth = Math.max(1, width - padding.left - padding.right);
+  const innerHeight = Math.max(1, height - padding.top - padding.bottom);
+  const radius = calculateRadarChartRadius({
+    width: innerWidth,
+    height: innerHeight,
+    padding: {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    axisLabels: axes.map(axis => axis.label),
+    fontSize: resolvedAxisLabelFontSize,
+    autoFitLabels,
+    labelOffset: resolvedLabelOffset
+  });
   const center = {
-    x: width / 2,
-    y: height / 2
+    x: padding.left + innerWidth / 2,
+    y: padding.top + innerHeight / 2
   };
   const axisAngle = Math.PI * 2 / axes.length;
   const gridPolygons = Array.from({
@@ -2143,7 +2986,8 @@ function RadarChart({
     const points = dataset.values.map((value, index) => {
       const axis = normalizedAxes[index];
       const maxValue = axis?.maxValue ?? 0;
-      const ratio = (maxValue > 0 ? value / maxValue : 0) * lineProgress;
+      const normalizedRatio = maxValue > 0 ? value / maxValue : 0;
+      const ratio = Math.max(0, Math.min(1, normalizedRatio)) * Math.max(0, Math.min(1, lineProgress));
       const angle = index * axisAngle - Math.PI / 2;
       const x = center.x + radius * ratio * Math.cos(angle);
       const y = center.y + radius * ratio * Math.sin(angle);
@@ -2154,27 +2998,32 @@ function RadarChart({
       points
     };
   });
+  const isVerticalLegend = legendPosition === 'left' || legendPosition === 'right';
   const legend = /*#__PURE__*/_jsx(View, {
     style: {
-      flexDirection: 'row',
-      flexWrap: 'wrap'
+      flexDirection: isVerticalLegend ? 'column' : 'row',
+      flexWrap: isVerticalLegend ? 'nowrap' : 'wrap',
+      alignItems: isVerticalLegend ? 'flex-start' : 'center'
     },
     children: datasets.map((dataset, index) => /*#__PURE__*/_jsxs(View, {
       style: {
         flexDirection: 'row',
         alignItems: 'center',
-        marginRight: legendSpacing,
-        marginBottom: 6
+        marginRight: isVerticalLegend ? 0 : legendSpacing,
+        marginBottom: isVerticalLegend ? legendSpacing : 6
       },
       children: [/*#__PURE__*/_jsx(View, {
         style: {
           width: 12,
           height: 12,
           borderRadius: 6,
-          backgroundColor: dataset.borderColor,
+          backgroundColor: dataset.fillColor ?? dataset.borderColor,
+          borderWidth: 1,
+          borderColor: dataset.borderColor,
           marginRight: 6
         }
       }), /*#__PURE__*/_jsx(Text, {
+        numberOfLines: 1,
         style: legendStyle,
         children: dataset.label
       })]
@@ -2182,12 +3031,10 @@ function RadarChart({
   });
   const chart = /*#__PURE__*/_jsx(Animated.View, {
     style: {
-      width: normalizedWidth ?? width,
+      width: isVerticalLegend ? width : normalizedWidth ?? '100%',
+      maxWidth: '100%',
+      flexShrink: 1,
       height,
-      paddingLeft: padding.left,
-      paddingRight: padding.right,
-      paddingTop: padding.top,
-      paddingBottom: padding.bottom,
       opacity: reveal
     },
     onLayout: event => {
@@ -2226,24 +3073,28 @@ function RadarChart({
           }, `axis-${index}`);
         }), axes.map((axis, index) => {
           const angle = index * axisAngle - Math.PI / 2;
-          const labelX = center.x + (radius + 12) * Math.cos(angle);
-          const labelY = center.y + (radius + 12) * Math.sin(angle);
+          const labelX = center.x + (radius + resolvedLabelOffset) * Math.cos(angle);
+          const labelY = center.y + (radius + resolvedLabelOffset) * Math.sin(angle);
           return /*#__PURE__*/_jsx(SvgText, {
             x: labelX,
             y: labelY,
-            fontSize: axisLabelStyle.fontSize ?? 12,
+            fontSize: resolvedAxisLabelFontSize,
             fontWeight: axisLabelStyle.fontWeight,
             fill: axisLabelStyle.color,
             textAnchor: "middle",
             children: axis.label
           }, `label-${index}`);
-        }), datasetPolygons.map((entry, index) => /*#__PURE__*/_jsx(Polygon, {
-          points: entry.points.join(' '),
-          stroke: entry.dataset.borderColor,
-          strokeWidth: entry.dataset.borderWidth,
-          fill: entry.dataset.fillColor ?? 'transparent',
-          strokeDasharray: entry.dataset.borderStyle === 'dotted' || entry.dataset.borderStyle === 'dashed' ? entry.dataset.dashArray ?? '6 4' : undefined
-        }, `dataset-${index}`)), datasetPolygons.map((entry, datasetIndex) => entry.dataset.showPoints ? entry.points.map((point, pointIndex) => {
+        }), datasetPolygons.map((entry, index) => {
+          const strokePattern = resolveRadarStrokePattern(entry.dataset);
+          return /*#__PURE__*/_jsx(Polygon, {
+            points: entry.points.join(' '),
+            stroke: entry.dataset.borderColor,
+            strokeWidth: entry.dataset.borderWidth,
+            fill: entry.dataset.fillColor ?? 'transparent',
+            strokeDasharray: strokePattern.strokeDasharray,
+            strokeLinecap: strokePattern.strokeLinecap
+          }, `dataset-${index}`);
+        }), datasetPolygons.map((entry, datasetIndex) => entry.dataset.showPoints ? entry.points.map((point, pointIndex) => {
           const [x, y] = point.split(',').map(val => Number(val));
           return /*#__PURE__*/_jsx(Circle, {
             cx: x,
@@ -2255,23 +3106,23 @@ function RadarChart({
       })
     })
   });
-  const composed = /*#__PURE__*/_jsxs(View, {
-    style: {
-      backgroundColor
-    },
-    children: [chart, showLegend && legendPosition === 'bottom' ? /*#__PURE__*/_jsx(View, {
+  if (!showLegend) {
+    return /*#__PURE__*/_jsx(View, {
       style: {
-        marginTop: 12
+        backgroundColor
       },
-      children: legend
-    }) : null]
-  });
-  if (!showLegend || legendPosition === 'bottom') return composed;
+      children: chart
+    });
+  }
   if (legendPosition === 'top') {
     return /*#__PURE__*/_jsxs(View, {
+      style: {
+        backgroundColor,
+        alignItems: 'center'
+      },
       children: [legend, /*#__PURE__*/_jsx(View, {
         style: {
-          height: 12
+          height: legendSpacing
         }
       }), chart]
     });
@@ -2279,11 +3130,13 @@ function RadarChart({
   if (legendPosition === 'left') {
     return /*#__PURE__*/_jsxs(View, {
       style: {
-        flexDirection: 'row'
+        backgroundColor,
+        flexDirection: 'row',
+        alignItems: 'center'
       },
       children: [legend, /*#__PURE__*/_jsx(View, {
         style: {
-          width: 12
+          width: legendSpacing
         }
       }), chart]
     });
@@ -2291,16 +3144,167 @@ function RadarChart({
   if (legendPosition === 'right') {
     return /*#__PURE__*/_jsxs(View, {
       style: {
-        flexDirection: 'row'
+        backgroundColor,
+        flexDirection: 'row',
+        alignItems: 'center'
       },
       children: [chart, /*#__PURE__*/_jsx(View, {
         style: {
-          width: 12
+          width: legendSpacing
         }
       }), legend]
     });
   }
-  return composed;
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      backgroundColor,
+      alignItems: 'center'
+    },
+    children: [chart, /*#__PURE__*/_jsx(View, {
+      style: {
+        height: legendSpacing
+      }
+    }), legend]
+  });
+}
+const RADAR_DASH_DEFAULT_LENGTH = 8;
+const RADAR_DASH_GAP_FACTOR = 0.6;
+const RADAR_DOT_DASH_LENGTH = 0.001;
+const RADAR_DOT_GAP_FACTOR = 2.4;
+const RADAR_DOT_MIN_GAP = 3;
+const radarDashConflictWarnings = new Set();
+function isDevelopmentEnvironment() {
+  return process.env.NODE_ENV !== 'production';
+}
+function warnRadarDashConflictOnce(label) {
+  if (!isDevelopmentEnvironment()) return;
+  if (radarDashConflictWarnings.has(label)) return;
+  radarDashConflictWarnings.add(label);
+  // Keep API backward-compatible but deterministic when both flags are passed.
+  console.warn(`[RadarChart] Dataset "${label}" received both dotted=true and dashed=true. dashed takes precedence.`);
+}
+function resolveRadarBorderStyle(dataset, fallbackLabel) {
+  const dotted = dataset.dotted === true;
+  const dashed = dataset.dashed === true;
+  if (dotted && dashed) {
+    warnRadarDashConflictOnce(fallbackLabel);
+    return 'dashed';
+  }
+  if (dashed) return 'dashed';
+  if (dotted) return 'dotted';
+  const borderStyle = (dataset.borderStyle ?? 'solid').toString().toLowerCase();
+  if (borderStyle === 'dotted' || borderStyle === 'dashed') {
+    return borderStyle;
+  }
+  return 'solid';
+}
+function resolveRadarStrokePattern(dataset) {
+  if (dataset.borderStyle === 'dotted') {
+    // Tiny dash + round caps renders circular dots more reliably than short dashes.
+    const gap = Math.max(RADAR_DOT_MIN_GAP, dataset.borderWidth * RADAR_DOT_GAP_FACTOR);
+    return {
+      strokeDasharray: `${RADAR_DOT_DASH_LENGTH} ${gap}`,
+      strokeLinecap: 'round'
+    };
+  }
+  if (dataset.borderStyle === 'dashed') {
+    if (Array.isArray(dataset.dashArray) && dataset.dashArray.length > 0) {
+      const dash = Math.max(1, dataset.dashArray[0] ?? RADAR_DASH_DEFAULT_LENGTH);
+      const gap = Math.max(1, dataset.dashArray[1] ?? dash * RADAR_DASH_GAP_FACTOR);
+      return {
+        strokeDasharray: `${dash} ${gap}`,
+        strokeLinecap: 'butt'
+      };
+    }
+    const dashLength = typeof dataset.dashLength === 'number' && Number.isFinite(dataset.dashLength) && dataset.dashLength > 0 ? dataset.dashLength : RADAR_DASH_DEFAULT_LENGTH;
+    const gap = Math.max(2, dashLength * RADAR_DASH_GAP_FACTOR);
+    return {
+      strokeDasharray: `${dashLength} ${gap}`,
+      strokeLinecap: 'butt'
+    };
+  }
+  return {};
+}
+export const RADAR_LABEL_ESTIMATION = {
+  minRadius: 10,
+  safeEdge: 4,
+  minLabelWidthFactor: 1.2,
+  avgCharWidthFactor: 0.58,
+  lineHeightFactor: 1.2,
+  defaultFontSize: 14,
+  minLabelOffset: 20,
+  labelOffsetFactor: 1.5
+};
+export function resolveRadarAxisLabelFontSize(value) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return RADAR_LABEL_ESTIMATION.defaultFontSize;
+  }
+  return parsed;
+}
+export function resolveRadarLabelOffset(value, fontSize) {
+  const parsed = Number(value);
+  if (Number.isFinite(parsed) && parsed > 0) {
+    return parsed;
+  }
+  return Math.max(RADAR_LABEL_ESTIMATION.minLabelOffset, fontSize * RADAR_LABEL_ESTIMATION.labelOffsetFactor);
+}
+export function estimateRadarLabelSize(label, fontSize) {
+  const safeLabel = `${label ?? ''}`;
+  const width = Math.max(safeLabel.length * fontSize * RADAR_LABEL_ESTIMATION.avgCharWidthFactor, fontSize * RADAR_LABEL_ESTIMATION.minLabelWidthFactor);
+  const height = fontSize * RADAR_LABEL_ESTIMATION.lineHeightFactor;
+  return {
+    width,
+    height
+  };
+}
+export function calculateRadarChartRadius({
+  width,
+  height,
+  padding,
+  axisLabels,
+  fontSize,
+  autoFitLabels = true,
+  labelOffset
+}) {
+  const center = {
+    x: width / 2,
+    y: height / 2
+  };
+  const baseRadius = Math.max(Math.min(width, height) / 2 - Math.max(padding.left, padding.right, padding.top, padding.bottom), RADAR_LABEL_ESTIMATION.minRadius);
+  if (!autoFitLabels || axisLabels.length === 0) {
+    return baseRadius;
+  }
+  const angleStep = Math.PI * 2 / axisLabels.length;
+  let maxAllowedRadius = baseRadius;
+  for (let index = 0; index < axisLabels.length; index += 1) {
+    const {
+      width: labelWidth,
+      height: labelHeight
+    } = estimateRadarLabelSize(axisLabels[index] ?? '', fontSize);
+    const halfWidth = labelWidth / 2;
+    const halfHeight = labelHeight / 2;
+    const angle = index * angleStep - Math.PI / 2;
+    const dx = Math.cos(angle);
+    const dy = Math.sin(angle);
+
+    // Solve per-axis line constraints so estimated label bounds stay inside.
+    if (dx > 0.0001) {
+      maxAllowedRadius = Math.min(maxAllowedRadius, (width - RADAR_LABEL_ESTIMATION.safeEdge - halfWidth - center.x) / dx - labelOffset);
+    } else if (dx < -0.0001) {
+      maxAllowedRadius = Math.min(maxAllowedRadius, (RADAR_LABEL_ESTIMATION.safeEdge + halfWidth - center.x) / dx - labelOffset);
+    }
+    if (dy > 0.0001) {
+      maxAllowedRadius = Math.min(maxAllowedRadius, (height - RADAR_LABEL_ESTIMATION.safeEdge - halfHeight - center.y) / dy - labelOffset);
+    } else if (dy < -0.0001) {
+      maxAllowedRadius = Math.min(maxAllowedRadius, (RADAR_LABEL_ESTIMATION.safeEdge + halfHeight - center.y) / dy - labelOffset);
+    }
+  }
+  const boundedRadius = Math.min(maxAllowedRadius, baseRadius);
+  if (!Number.isFinite(boundedRadius)) {
+    return baseRadius;
+  }
+  return Math.max(boundedRadius, RADAR_LABEL_ESTIMATION.minRadius);
 }
 export function parseRadarAxes(rawAxes) {
   if (!Array.isArray(rawAxes)) return [];
@@ -2310,9 +3314,10 @@ export function parseRadarAxes(rawAxes) {
     const label = axis.label ?? '';
     if (!label) return;
     const maxValue = resolveNumericValue(axis.maxValue, {}) ?? 100;
+    const normalizedMaxValue = Number.isFinite(maxValue) && maxValue > 0 ? maxValue : 100;
     axes.push({
       label,
-      maxValue: maxValue > 0 ? maxValue : 100
+      maxValue: normalizedMaxValue
     });
   });
   return axes;
@@ -2320,24 +3325,27 @@ export function parseRadarAxes(rawAxes) {
 export function parseRadarDatasets(raw, axisLength, formData) {
   if (!Array.isArray(raw) || axisLength === 0) return [];
   const datasets = [];
-  raw.forEach(dataset => {
+  raw.forEach((dataset, datasetIndex) => {
     if (!dataset || typeof dataset !== 'object') return;
     const valuesRaw = Array.isArray(dataset.data) ? dataset.data : [];
     const values = [];
     for (let i = 0; i < axisLength; i += 1) {
       const rawValue = i < valuesRaw.length ? valuesRaw[i] : null;
-      const resolved = resolveNumericValue(rawValue, formData) ?? 0;
-      values.push(resolved);
+      const resolved = resolveNumericValue(rawValue, formData);
+      values.push(typeof resolved === 'number' && Number.isFinite(resolved) ? resolved : 0);
     }
     const label = dataset.label ?? `Dataset ${datasets.length + 1}`;
     const borderColor = parseColor(dataset.borderColor ?? '0xFF2196F3');
     const fillColor = dataset.fillColor ? parseColor(dataset.fillColor) : undefined;
     const pointColor = parseColor(dataset.pointColor ?? dataset.borderColor ?? '0xFF2196F3');
-    const borderWidth = Number(dataset.borderWidth ?? 2);
-    const pointRadius = Number(dataset.pointRadius ?? 4);
-    const borderStyle = (dataset.borderStyle ?? 'solid').toString().toLowerCase();
-    const normalizedStyle = borderStyle === 'dotted' || borderStyle === 'dashed' ? borderStyle : 'solid';
-    const dashArray = Array.isArray(dataset.dashArray) ? dataset.dashArray.map(val => Number(val)) : undefined;
+    const rawBorderWidth = Number(dataset.borderWidth ?? 2);
+    const borderWidth = Number.isFinite(rawBorderWidth) && rawBorderWidth > 0 ? rawBorderWidth : 2;
+    const rawPointRadius = Number(dataset.pointRadius ?? 4);
+    const pointRadius = Number.isFinite(rawPointRadius) && rawPointRadius >= 0 ? rawPointRadius : 4;
+    const normalizedStyle = resolveRadarBorderStyle(dataset, label ?? `Dataset ${datasetIndex + 1}`);
+    const dashArray = Array.isArray(dataset.dashArray) ? dataset.dashArray.map(val => Number(val)).filter(val => Number.isFinite(val) && val > 0) : undefined;
+    const rawDashLength = Number(dataset.dashLength);
+    const dashLength = Number.isFinite(rawDashLength) && rawDashLength > 0 ? rawDashLength : undefined;
     const showPoints = dataset.showPoints !== false;
     datasets.push({
       label,
@@ -2346,6 +3354,7 @@ export function parseRadarDatasets(raw, axisLength, formData) {
       borderWidth,
       borderStyle: normalizedStyle,
       dashArray,
+      dashLength,
       showPoints,
       pointRadius,
       pointColor,
@@ -2359,7 +3368,9 @@ export function normalizeAxisMaximums(axes, datasets) {
     let maxValue = axis.maxValue;
     datasets.forEach(dataset => {
       const value = dataset.values[index];
-      if (value !== undefined && value > maxValue) maxValue = value;
+      if (value !== undefined && Number.isFinite(value) && value > maxValue) {
+        maxValue = value;
+      }
     });
     return {
       ...axis,
@@ -2368,12 +3379,15 @@ export function normalizeAxisMaximums(axes, datasets) {
   });
 }
 function resolveRadarWidth(parsedWidth, measuredWidth) {
+  if (measuredWidth > 0) {
+    if (typeof parsedWidth === 'number' && Number.isFinite(parsedWidth)) {
+      return Math.max(1, Math.min(parsedWidth, measuredWidth));
+    }
+    return Math.max(1, measuredWidth);
+  }
   if (typeof parsedWidth === 'number' && Number.isFinite(parsedWidth)) {
     return parsedWidth;
   }
-  if (measuredWidth > 0) {
-    return measuredWidth;
-  }
   return 300;
 }
 function radarPlaceholder(message) {