flowboard-react 0.4.3 → 0.5.1

package/src/components/FlowboardRenderer.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
 import {
   Animated,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
   ScrollView,
   StyleSheet,
@@ -10,8 +12,9 @@ import {
   Image,
   Vibration,
   type TextStyle,
+  type ViewStyle,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+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';
@@ -53,7 +56,7 @@ const styles = StyleSheet.create({
   whiteBg: {
     backgroundColor: '#ffffff',
   },
-  safeArea: { flex: 1 },
+  contentLayer: { flex: 1 },
   progressWrapper: { width: '100%' },
 });
 
@@ -67,6 +70,32 @@ type FlowboardRendererProps = {
   totalScreens?: number;
 };
 
+type PageScrollAxis = 'vertical' | 'none';
+
+type AxisBounds = {
+  widthBounded: boolean;
+  heightBounded: boolean;
+};
+
+function resolvePageScrollAxis(
+  screenData: Record<string, any>
+): PageScrollAxis {
+  const raw = String(
+    screenData.pageScroll ??
+      screenData.scrollDirection ??
+      (screenData.scrollable === true ? 'vertical' : 'none')
+  ).toLowerCase();
+  if (raw === 'none') return 'none';
+  return 'vertical';
+}
+
+function getAxisBoundsForPageScroll(pageScroll: PageScrollAxis): AxisBounds {
+  if (pageScroll === 'vertical') {
+    return { widthBounded: true, heightBounded: false };
+  }
+  return { widthBounded: true, heightBounded: true };
+}
+
 export default function FlowboardRenderer(props: FlowboardRendererProps) {
   const {
     screenData,
@@ -90,8 +119,12 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
   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' = 'vertical';
 
   const padding = parseInsets(screenData.padding);
   const contentPaddingStyle = insetsToStyle(padding);
@@ -102,6 +135,14 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
   };
   const rootCrossAxisAlignment =
     screenData.crossAxisAlignment ?? screenData.crossAxis;
+  const safeAreaPaddingStyle = safeArea
+    ? {
+        paddingTop: safeAreaInsets.top,
+        paddingRight: safeAreaInsets.right,
+        paddingBottom: safeAreaInsets.bottom,
+        paddingLeft: safeAreaInsets.left,
+      }
+    : null;
 
   const content = (
     <View style={{ flex: 1 }}>
@@ -120,6 +161,11 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
 
       {scrollable ? (
         <ScrollView
+          horizontal={false}
+          keyboardShouldPersistTaps="handled"
+          keyboardDismissMode={
+            Platform.OS === 'ios' ? 'interactive' : 'on-drag'
+          }
           contentContainerStyle={{
             ...contentPaddingStyle,
             paddingTop: showProgress ? 0 : padding.top,
@@ -128,8 +174,11 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
           <View
             style={{
               flexGrow: 1,
+              flexDirection: 'column',
               justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
               alignItems: parseRootCrossAlignment(rootCrossAxisAlignment),
+              minHeight: 0,
+              minWidth: 0,
             }}
           >
             {childrenData.map((child, index) =>
@@ -138,6 +187,9 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
                 formData,
                 onInputChange,
                 allowFlexExpansion: true,
+                parentFlexAxis: rootAxis,
+                parentMainAxisBounded: pageAxisBounds.heightBounded,
+                pageAxisBounds,
                 screenData,
                 enableFontAwesomeIcons,
                 key: `child-${index}`,
@@ -161,6 +213,9 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
               formData,
               onInputChange,
               allowFlexExpansion: true,
+              parentFlexAxis: rootAxis,
+              parentMainAxisBounded: true,
+              pageAxisBounds,
               screenData,
               enableFontAwesomeIcons,
               key: `child-${index}`,
@@ -174,17 +229,21 @@ export default function FlowboardRenderer(props: FlowboardRendererProps) {
   return (
     <View style={styles.root}>
       {renderBackground(backgroundData, bgColorCode)}
-      {safeArea ? (
-        <SafeAreaView
-          style={styles.safeArea}
-          mode="padding"
-          edges={['top', 'right', 'bottom', 'left']}
-        >
+      <KeyboardAvoidingView
+        style={styles.contentLayer}
+        behavior={
+          Platform.OS === 'ios'
+            ? 'padding'
+            : Platform.OS === 'android'
+            ? 'height'
+            : undefined
+        }
+        keyboardVerticalOffset={0}
+      >
+        <View style={[styles.contentLayer, safeAreaPaddingStyle]}>
           {content}
-        </SafeAreaView>
-      ) : (
-        content
-      )}
+        </View>
+      </KeyboardAvoidingView>
     </View>
   );
 }
@@ -357,6 +416,484 @@ function renderProgressBar(
   );
 }
 
+const STACK_SPACE_DISTRIBUTIONS = new Set([
+  'spaceBetween',
+  'spaceAround',
+  'spaceEvenly',
+]);
+
+function normalizeStackSpacingConfig(value: any): Record<string, number> {
+  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: Record<string, number> = {};
+  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: any) {
+  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: unknown): boolean {
+  return [
+    'topLeft',
+    'topCenter',
+    'topRight',
+    'centerLeft',
+    'center',
+    'centerRight',
+    'bottomLeft',
+    'bottomCenter',
+    'bottomRight',
+  ].includes(String(value ?? ''));
+}
+
+function normalizeStackAxis(type: string, props: Record<string, any>) {
+  const explicit = String(props.axis ?? '').toLowerCase();
+  if (
+    explicit === 'vertical' ||
+    explicit === 'horizontal' ||
+    explicit === 'overlay'
+  ) {
+    return explicit as 'vertical' | 'horizontal' | 'overlay';
+  }
+  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: unknown) {
+  const normalized = String(value ?? '').trim();
+  if (
+    normalized === 'center' ||
+    normalized === 'end' ||
+    normalized === 'spaceBetween' ||
+    normalized === 'spaceAround' ||
+    normalized === 'spaceEvenly'
+  ) {
+    return normalized;
+  }
+  return 'start';
+}
+
+function normalizeStackCrossAlignment(value: unknown) {
+  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: unknown) {
+  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: unknown) {
+  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: unknown) {
+  if (isFillDimensionValue(value)) return false;
+  const parsed = Number(value);
+  return Number.isFinite(parsed);
+}
+
+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';
+
+  return { width, height };
+}
+
+function normalizeStackFill(props: Record<string, any>) {
+  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: Record<string, any>) {
+  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: Record<string, any>) {
+  if (props.shadow && typeof props.shadow === 'object') {
+    return { ...props.shadow };
+  }
+  return undefined;
+}
+
+function spacingToInsets(value: any) {
+  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: {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}) {
+  if (insets.top === insets.bottom && insets.left === insets.right) {
+    return { x: insets.left, y: insets.top };
+  }
+  return insets;
+}
+
+function mergeStackProps(
+  parentProps: Record<string, any>,
+  childProps: Record<string, any>
+) {
+  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: Record<string, any> = {
+    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: Record<string, any>
+): Record<string, any> {
+  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 ?? {}) } as Record<string, any>;
+  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: Record<string, any> = {
+    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: Record<string, any> = normalizeStackLikeNode(
+        childCandidate as Record<string, any>
+      );
+      if (normalizedChild?.type === 'stack') {
+        const childProps = {
+          ...(normalizedChild.properties ?? {}),
+        } as Record<string, any>;
+        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?: string
+): Pick<ViewStyle, 'justifyContent' | 'alignItems'> {
+  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: Record<string, any>,
+  axis: 'vertical' | 'horizontal' | 'overlay',
+  key: 'width' | 'height',
+  axisBounds: 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: Record<string, any>,
   params: {
@@ -364,19 +901,32 @@ function buildWidget(
     formData: Record<string, any>;
     onInputChange?: (id: string, value: any) => void;
     allowFlexExpansion?: boolean;
+    parentFlexAxis?: 'vertical' | 'horizontal';
+    parentMainAxisBounded?: boolean;
+    pageAxisBounds?: AxisBounds;
     screenData: Record<string, any>;
     enableFontAwesomeIcons: boolean;
     key?: string;
   }
 ): React.ReactNode {
   if (!json || typeof json !== 'object') return null;
-  const type = json.type;
-  const id = json.id;
-  const props = { ...(json.properties ?? {}) } as Record<string, any>;
-  const childrenJson = Array.isArray(json.children) ? json.children : undefined;
-  const childJson = json.child as Record<string, any> | undefined;
-  const action = json.action as string | undefined;
-  const actionPayload = action ? buildActionPayload(props, json) : undefined;
+  const normalizedJson = normalizeStackLikeNode(json);
+  const type = normalizedJson.type;
+  const id = normalizedJson.id;
+  const props = { ...(normalizedJson.properties ?? {}) } as Record<string, any>;
+  const pageAxisBounds =
+    params.pageAxisBounds ??
+    getAxisBoundsForPageScroll(resolvePageScrollAxis(params.screenData));
+  const childrenJson: Record<string, any>[] | undefined = Array.isArray(
+    normalizedJson.children
+  )
+    ? (normalizedJson.children as Record<string, any>[])
+    : undefined;
+  const childJson = normalizedJson.child as Record<string, any> | undefined;
+  const action = normalizedJson.action as string | undefined;
+  const actionPayload = action
+    ? buildActionPayload(props, normalizedJson)
+    : undefined;
 
   let node: React.ReactNode = null;
 
@@ -565,62 +1115,121 @@ function buildWidget(
       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 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: any = {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        borderRadius,
+        overflow: 'hidden',
+        ...(centeredStrokeStyle ?? {}),
+      };
+      const nativeShadowEffectsInPaintOrder = normalizedEffects
+        .slice()
+        .reverse();
 
-      const content = (
-        <View
-          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+      const pressableStyle: any = {
+        width,
+        height,
+        borderRadius,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'visible',
+        ...(nativePrimaryShadowStyle ?? {}),
+      };
+
+      node = (
+        <Pressable
+          collapsable={false}
+          onPress={
+            action
+              ? () => params.onAction(action, actionPayload ?? props)
+              : undefined
+          }
+          style={pressableStyle}
         >
-          <Text style={textStyle}>{label}</Text>
-        </View>
-      );
+          {Platform.OS === 'web' ? (
+            webShadowStyle ? (
+              <View
+                pointerEvents="none"
+                style={{
+                  position: 'absolute',
+                  ...shadowBounds,
+                  ...webShadowStyle,
+                }}
+              />
+            ) : null
+          ) : (
+            nativeShadowEffectsInPaintOrder.map((effect, index) => (
+              <View
+                key={`shadow-${index}`}
+                collapsable={false}
+                pointerEvents="none"
+                style={{
+                  position: 'absolute',
+                  ...shadowBounds,
+                  ...buildButtonNativeShadowStyle(effect),
+                }}
+              />
+            ))
+          )}
 
-      if (gradient) {
-        node = (
-          <Pressable
-            onPress={
-              action
-                ? () => params.onAction(action, actionPayload ?? props)
-                : undefined
-            }
-            style={{ width, height }}
-          >
+          {gradient ? (
             <LinearGradient
               colors={gradient.colors}
               start={gradient.start}
               end={gradient.end}
               locations={gradient.stops}
-              style={{ flex: 1, borderRadius, overflow: 'hidden' }}
-            >
-              {content}
-            </LinearGradient>
-          </Pressable>
-        );
-      } else {
-        node = (
-          <Pressable
-            onPress={
-              action
-                ? () => params.onAction(action, actionPayload ?? props)
-                : undefined
-            }
-            style={{
-              width,
-              height,
-              backgroundColor: parseColor(props.color ?? '0xFF2196F3'),
-              borderRadius,
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
+              style={fillLayerStyle}
+            />
+          ) : (
+            <View
+              style={{
+                ...fillLayerStyle,
+                backgroundColor,
+              }}
+            />
+          )}
+
+          {renderButtonStrokeOverlay(normalizedStroke, borderRadius)}
+
+          <View
+            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
           >
-            {content}
-          </Pressable>
-        );
-      }
+            <Text style={textStyle}>{label}</Text>
+          </View>
+        </Pressable>
+      );
       break;
     }
     case 'text_input': {
@@ -793,12 +1402,15 @@ function buildWidget(
       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 = (
           <LottieView
             source={{ uri: props.path ?? '' }}
-            style={{ width, height }}
+            style={style}
+            resizeMode={resizeMode}
             autoPlay
             loop={loop}
           />
@@ -808,7 +1420,8 @@ function buildWidget(
         node = (
           <LottieView
             source={{ uri: props.url }}
-            style={{ width, height }}
+            style={style}
+            resizeMode={resizeMode}
             autoPlay
             loop={loop}
           />
@@ -936,25 +1549,170 @@ function buildWidget(
       break;
     }
     case 'stack': {
-      const alignment = parseAlignment(props.alignment ?? 'topLeft');
-      const fit = props.fit === 'expand' ? 'expand' : 'loose';
-      node = (
+      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: Record<string, any> =
+        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: any = {
+        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 ? (
+        <View style={{ position: 'relative', minHeight: 0, minWidth: 0 }}>
+          {(childrenJson ?? []).map((child, index) => {
+            const alignment = parseOverlayGridAlignment(
+              props.overlayAlignment ?? props.alignment
+            );
+            return (
+              <View
+                key={`stack-overlay-${index}`}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  bottom: 0,
+                  left: 0,
+                  justifyContent: alignment.justifyContent,
+                  alignItems: alignment.alignItems,
+                }}
+              >
+                {buildWidget(child, {
+                  ...params,
+                  allowFlexExpansion: true,
+                  pageAxisBounds,
+                })}
+              </View>
+            );
+          })}
+          {(childrenJson ?? []).length === 0 ? null : null}
+        </View>
+      ) : (
         <View
           style={{
-            position: 'relative',
-            width: fit === 'expand' ? '100%' : undefined,
-            height: fit === 'expand' ? '100%' : undefined,
-            justifyContent: alignment.justifyContent,
-            alignItems: alignment.alignItems,
+            flexDirection: axis === 'horizontal' ? 'row' : 'column',
+            justifyContent: parseFlexAlignment(props.distribution),
+            alignItems: parseCrossAlignment(props.alignment),
+            minHeight: 0,
+            minWidth: 0,
           }}
         >
           {(childrenJson ?? []).map((child, index) => (
             <React.Fragment key={`stack-${index}`}>
-              {buildWidget(child, { ...params })}
+              {buildWidget(child, {
+                ...params,
+                allowFlexExpansion: true,
+                parentFlexAxis:
+                  axis === 'horizontal' ? 'horizontal' : 'vertical',
+                parentMainAxisBounded: mainAxisBounded,
+                pageAxisBounds,
+              })}
+              {applySpacing &&
+              spacing > 0 &&
+              index < (childrenJson?.length ?? 0) - 1 ? (
+                <View
+                  style={{
+                    width: axis === 'horizontal' ? spacing : undefined,
+                    height: axis === 'vertical' ? spacing : undefined,
+                  }}
+                />
+              ) : null}
             </React.Fragment>
           ))}
         </View>
       );
+
+      if (stackGradient) {
+        node = (
+          <LinearGradient
+            colors={stackGradient.colors}
+            start={stackGradient.start}
+            end={stackGradient.end}
+            locations={stackGradient.stops}
+            style={baseStackStyle}
+          >
+            {content}
+          </LinearGradient>
+        );
+      } else {
+        node = (
+          <View style={{ ...baseStackStyle, backgroundColor: stackColor }}>
+            {content}
+          </View>
+        );
+      }
       break;
     }
     case 'positioned': {
@@ -987,29 +1745,76 @@ function buildWidget(
 
   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 = <View style={insetsToMarginStyle(marginInsets)}>{node}</View>;
-  } else if (type !== 'container' && type !== 'padding' && props.padding) {
+  } else if (
+    type !== 'container' &&
+    type !== 'padding' &&
+    type !== 'stack' &&
+    props.padding
+  ) {
     const paddingInsets = parseInsets(props.padding);
     node = <View style={insetsToStyle(paddingInsets)}>{node}</View>;
   }
 
-  if (params.allowFlexExpansion && params.screenData.scrollable !== true) {
+  const shouldStretchTextInput =
+    type === 'text_input' &&
+    props.width === undefined &&
+    props.size?.width === undefined;
+  if (shouldStretchTextInput) {
+    node = (
+      <View style={{ width: '100%', alignSelf: 'stretch', minWidth: 0 }}>
+        {node}
+      </View>
+    );
+  }
+
+  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 = <View style={{ flex: 1 }}>{node}</View>;
+      node = <View style={{ flex: 1, minHeight: 0, minWidth: 0 }}>{node}</View>;
     }
   }
 
@@ -1066,26 +1871,247 @@ function getTextStyle(
   };
 }
 
-function parseGradient(value: any):
-  | {
-      colors: string[];
-      start: { x: number; y: number };
-      end: { x: number; y: number };
-      stops?: number[];
-    }
-  | undefined {
-  if (!value || typeof value !== 'object' || value.type !== 'gradient')
-    return undefined;
-  const colors = Array.isArray(value.colors)
-    ? value.colors.map((c: string) => parseColor(c))
-    : [];
-  if (colors.length === 0) return undefined;
-  const start = alignmentToGradient(value.begin ?? 'topLeft');
-  const end = alignmentToGradient(value.end ?? 'bottomRight');
-  const stops = Array.isArray(value.stops)
-    ? value.stops.map((s: number) => Number(s))
-    : undefined;
-  return { colors, start, end, stops };
+function parseGradient(value: any):
+  | {
+      colors: string[];
+      start: { x: number; y: number };
+      end: { x: number; y: number };
+      stops?: number[];
+    }
+  | undefined {
+  if (!value || typeof value !== 'object' || value.type !== 'gradient')
+    return undefined;
+  const colors = Array.isArray(value.colors)
+    ? value.colors.map((c: string) => parseColor(c))
+    : [];
+  if (colors.length === 0) return undefined;
+  const start = alignmentToGradient(value.begin ?? 'topLeft');
+  const end = alignmentToGradient(value.end ?? 'bottomRight');
+  const stops = Array.isArray(value.stops)
+    ? value.stops.map((s: number) => Number(s))
+    : undefined;
+  return { colors, start, end, stops };
+}
+
+type ButtonStrokePosition = 'inside' | 'center' | 'outside';
+
+interface ButtonStroke {
+  enabled?: boolean;
+  color?: string;
+  opacity?: number;
+  width?: number;
+  position?: ButtonStrokePosition;
+}
+
+interface ButtonDropShadowEffect {
+  type?: 'dropShadow' | string;
+  enabled?: boolean;
+  x?: number;
+  y?: number;
+  blur?: number;
+  spread?: number;
+  color?: string;
+  opacity?: number;
+}
+
+interface LegacyButtonShadow {
+  enabled?: boolean;
+  x?: number;
+  y?: number;
+  blur?: number;
+  color?: string;
+}
+
+type NormalizedButtonStroke = {
+  color: string;
+  width: number;
+  position: ButtonStrokePosition;
+};
+
+type NormalizedButtonDropShadow = {
+  x: number;
+  y: number;
+  blur: number;
+  spread: number;
+  color: string;
+  opacity: number;
+};
+
+function normalizeButtonStroke(
+  input: ButtonStroke | undefined
+): NormalizedButtonStroke | null {
+  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: ButtonDropShadowEffect[] | undefined,
+  legacyShadowInput: LegacyButtonShadow | undefined
+): NormalizedButtonDropShadow[] {
+  if (Array.isArray(effectsInput)) {
+    return effectsInput
+      .map(normalizeDropShadowEffect)
+      .filter(
+        (effect): effect is NormalizedButtonDropShadow => 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: ButtonDropShadowEffect
+): NormalizedButtonDropShadow | null {
+  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: string | undefined,
+  opacity: number
+): string {
+  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: NormalizedButtonDropShadow[]
+): Record<string, any> | null {
+  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: NormalizedButtonDropShadow
+): Record<string, any> {
+  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: NormalizedButtonStroke | null,
+  borderRadius: number
+): Record<string, number> {
+  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: NormalizedButtonStroke | null,
+  borderRadius: number
+) {
+  if (!stroke || stroke.position === 'center') {
+    return null;
+  }
+
+  if (stroke.position === 'inside') {
+    return (
+      <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 (
+    <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: string) {
@@ -1113,13 +2139,29 @@ function alignmentToGradient(value: string) {
 }
 
 function withOpacity(color: string, opacity: number): string {
-  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: string
+): { r: number; g: number; b: number; a: number } | null {
+  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: number): number {
+  if (!Number.isFinite(value)) return 1;
+  return Math.max(0, Math.min(1, value));
 }
 
 function normalizeDimension(
@@ -1251,6 +2293,45 @@ function SduiImage({
   );
 }
 
+function resolveLottieStyle(
+  width: number | string | undefined,
+  height: number | string | undefined
+) {
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const style: Record<string, number | string> = {};
+
+  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,
@@ -1278,6 +2359,81 @@ function GradientText({
   );
 }
 
+type TextInputStrokeStyle = 'solid' | 'dashed' | 'dotted';
+
+type NormalizedTextInputStroke = {
+  width: number;
+  color: string;
+  radius: number;
+  style: TextInputStrokeStyle;
+};
+
+function resolveTextInputBackgroundColor(properties: Record<string, any>) {
+  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: unknown) => 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: Record<string, any>
+): NormalizedTextInputStroke {
+  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: TextInputStrokeStyle =
+    properties.strokeStyle === 'dashed' || properties.strokeStyle === 'dotted'
+      ? properties.strokeStyle
+      : 'solid';
+
+  return {
+    width: normalizedWidth,
+    color,
+    radius,
+    style,
+  };
+}
+
 function DynamicInput({
   initialValue,
   properties,
@@ -1315,20 +2471,25 @@ function DynamicInput({
   );
   const inputStyle = getTextStyle({ ...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 (
-    <View>
+    <View style={{ width: '100%' }}>
       {label ? <Text style={labelStyle}>{label}</Text> : null}
       <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,
         }}
       >
         {mask ? (
@@ -1498,7 +2659,7 @@ function SelectionList({
 
   if (layout === 'row') {
     return (
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      <View style={{ width: '100%', flexDirection: 'row', flexWrap: 'wrap' }}>
         {options.map((option, index) => (
           <View
             key={`row-option-${index}`}
@@ -1515,7 +2676,7 @@ function SelectionList({
     const crossAxisCount = Number(properties.gridCrossAxisCount ?? 2);
     const aspectRatio = Number(properties.gridAspectRatio ?? 1);
     return (
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      <View style={{ width: '100%', flexDirection: 'row', flexWrap: 'wrap' }}>
         {options.map((option, index) => (
           <View
             key={`grid-option-${index}`}
@@ -1534,9 +2695,12 @@ function SelectionList({
   }
 
   return (
-    <View>
+    <View style={{ width: '100%' }}>
       {options.map((option, index) => (
-        <View key={`column-option-${index}`} style={{ marginBottom: spacing }}>
+        <View
+          key={`column-option-${index}`}
+          style={{ width: '100%', marginBottom: spacing }}
+        >
           {renderItem(option, index)}
         </View>
       ))}
@@ -1653,7 +2817,11 @@ function WheelPicker({
     const parsed = Number(raw);
     if (!Number.isFinite(parsed)) return 1;
     return Math.max(1, Math.floor(parsed));
-  }, [properties.startIndex, properties.startItemIndex, properties.start_index]);
+  }, [
+    properties.startIndex,
+    properties.startItemIndex,
+    properties.start_index,
+  ]);
 
   const clampWheelIndex = React.useCallback(
     (index: number) =>
@@ -1697,7 +2865,14 @@ function WheelPicker({
         }
       }
     },
-    [clampWheelIndex, onAction, onChanged, properties.autoGoNext, resolvedOptions, triggerLightHaptic]
+    [
+      clampWheelIndex,
+      onAction,
+      onChanged,
+      properties.autoGoNext,
+      resolvedOptions,
+      triggerLightHaptic,
+    ]
   );
 
   React.useEffect(() => {
@@ -1809,7 +2984,14 @@ function WheelPicker({
 
   if (layout === 'row') {
     return (
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      <View
+        style={{
+          width: '100%',
+          alignSelf: 'stretch',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}
+      >
         {resolvedOptions.map((option, index) => (
           <View
             key={`wheel-row-option-${index}`}
@@ -1826,7 +3008,14 @@ function WheelPicker({
     const crossAxisCount = Number(properties.gridCrossAxisCount ?? 2);
     const aspectRatio = Number(properties.gridAspectRatio ?? 1);
     return (
-      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+      <View
+        style={{
+          width: '100%',
+          alignSelf: 'stretch',
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+        }}
+      >
         {resolvedOptions.map((option, index) => (
           <View
             key={`wheel-grid-option-${index}`}
@@ -1861,10 +3050,19 @@ function WheelPicker({
     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: any) => {
       const offsetY = Number(event?.nativeEvent?.contentOffset?.y ?? 0);
-      const settledIndex = clampWheelIndex(Math.round(offsetY / wheelRowStride));
+      const settledIndex = clampWheelIndex(
+        Math.round(offsetY / wheelRowStride)
+      );
       const targetOffset = settledIndex * wheelRowStride;
       if (Math.abs(targetOffset - offsetY) > 0.5) {
         wheelScrollRef.current?.scrollTo({
@@ -1876,9 +3074,18 @@ function WheelPicker({
     };
 
     return (
-      <View style={{ height: wheelContainerHeight, overflow: 'hidden' }}>
+      <View
+        style={{
+          width: '100%',
+          alignSelf: 'stretch',
+          height: wheelContainerHeight,
+          overflow: 'hidden',
+          justifyContent: 'center',
+        }}
+      >
         <Animated.ScrollView
           ref={wheelScrollRef}
+          style={{ width: '100%' }}
           showsVerticalScrollIndicator={false}
           bounces={false}
           decelerationRate="fast"
@@ -1886,7 +3093,11 @@ function WheelPicker({
           snapToAlignment="start"
           disableIntervalMomentum={false}
           onMomentumScrollEnd={handleWheelMomentumEnd}
-          contentContainerStyle={{ paddingVertical: centerPadding }}
+          contentContainerStyle={{
+            width: '100%',
+            paddingVertical: centerPadding,
+            alignItems: 'center',
+          }}
           onScroll={Animated.event(
             [{ nativeEvent: { contentOffset: { y: wheelScrollY } } }],
             { useNativeDriver: true }
@@ -1926,8 +3137,10 @@ function WheelPicker({
               <Animated.View
                 key={`wheel-column-option-${index}`}
                 style={{
+                  width: '100%',
                   height: wheelRowStride,
                   justifyContent: 'center',
+                  alignItems: 'center',
                   opacity,
                   transform: [
                     { perspective: 1200 },
@@ -1937,7 +3150,14 @@ function WheelPicker({
                   ],
                 }}
               >
-                <View style={{ minHeight: wheelItemHeight, justifyContent: 'center' }}>
+                <View
+                  style={{
+                    width: '100%',
+                    minHeight: wheelItemHeight,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}
+                >
                   {renderItem(option, index)}
                 </View>
               </Animated.View>
@@ -1959,30 +3179,49 @@ function WheelPicker({
             backgroundColor: overlayBackgroundColor,
           }}
         />
-        <LinearGradient
-          pointerEvents="none"
-          colors={['rgba(255,255,255,0.92)', 'rgba(255,255,255,0)']}
-          style={{ position: 'absolute', top: 0, left: 0, right: 0, height: centerPadding }}
-        />
-        <LinearGradient
-          pointerEvents="none"
-          colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.92)']}
-          style={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            height: centerPadding,
-          }}
-        />
+        {wheelEdgeFadeOpacity > 0 && centerPadding > 0 ? (
+          <LinearGradient
+            pointerEvents="none"
+            colors={[
+              withOpacity(wheelEdgeFadeColor, wheelEdgeFadeOpacity),
+              withOpacity(wheelEdgeFadeColor, 0),
+            ]}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: centerPadding,
+            }}
+          />
+        ) : null}
+        {wheelEdgeFadeOpacity > 0 && centerPadding > 0 ? (
+          <LinearGradient
+            pointerEvents="none"
+            colors={[
+              withOpacity(wheelEdgeFadeColor, 0),
+              withOpacity(wheelEdgeFadeColor, wheelEdgeFadeOpacity),
+            ]}
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: centerPadding,
+            }}
+          />
+        ) : null}
       </View>
     );
   }
 
   return (
-    <View>
+    <View style={{ width: '100%', alignSelf: 'stretch' }}>
       {resolvedOptions.map((option, index) => (
-        <View key={`wheel-list-option-${index}`} style={{ marginBottom: spacing }}>
+        <View
+          key={`wheel-list-option-${index}`}
+          style={{ width: '100%', marginBottom: spacing }}
+        >
           {renderItem(option, index)}
         </View>
       ))}
@@ -2066,7 +3305,10 @@ function buildWheelTemplateBaseContext(
     properties.start ?? properties.itemStart,
     context
   );
-  const step = resolveNumericValue(properties.step ?? properties.itemStep, context);
+  const step = resolveNumericValue(
+    properties.step ?? properties.itemStep,
+    context
+  );
 
   if (start !== null) context.start = start;
   if (step !== null) context.step = step;
@@ -2527,6 +3769,14 @@ function RadarChart({
     '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);
@@ -2536,14 +3786,21 @@ function RadarChart({
     '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 center = { x: width / 2, y: height / 2 };
+  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: padding.left + innerWidth / 2,
+    y: padding.top + innerHeight / 2,
+  };
 
   const axisAngle = (Math.PI * 2) / axes.length;
 
@@ -2562,7 +3819,10 @@ 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);
@@ -2571,16 +3831,24 @@ function RadarChart({
     return { dataset, points };
   });
 
+  const isVerticalLegend =
+    legendPosition === 'left' || legendPosition === 'right';
   const legend = (
-    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
+    <View
+      style={{
+        flexDirection: isVerticalLegend ? 'column' : 'row',
+        flexWrap: isVerticalLegend ? 'nowrap' : 'wrap',
+        alignItems: isVerticalLegend ? 'flex-start' : 'center',
+      }}
+    >
       {datasets.map((dataset, index) => (
         <View
           key={`legend-${index}`}
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            marginRight: legendSpacing,
-            marginBottom: 6,
+            marginRight: isVerticalLegend ? 0 : legendSpacing,
+            marginBottom: isVerticalLegend ? legendSpacing : 6,
           }}
         >
           <View
@@ -2588,11 +3856,15 @@ function RadarChart({
               width: 12,
               height: 12,
               borderRadius: 6,
-              backgroundColor: dataset.borderColor,
+              backgroundColor: dataset.fillColor ?? dataset.borderColor,
+              borderWidth: 1,
+              borderColor: dataset.borderColor,
               marginRight: 6,
             }}
           />
-          <Text style={legendStyle}>{dataset.label}</Text>
+          <Text numberOfLines={1} style={legendStyle}>
+            {dataset.label}
+          </Text>
         </View>
       ))}
     </View>
@@ -2601,12 +3873,10 @@ function RadarChart({
   const chart = (
     <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) => {
@@ -2657,14 +3927,16 @@ function RadarChart({
           })}
           {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 (
               <SvgText
                 key={`label-${index}`}
                 x={labelX}
                 y={labelY}
-                fontSize={axisLabelStyle.fontSize ?? 12}
+                fontSize={resolvedAxisLabelFontSize}
                 fontWeight={axisLabelStyle.fontWeight}
                 fill={axisLabelStyle.color}
                 textAnchor="middle"
@@ -2673,21 +3945,20 @@ function RadarChart({
               </SvgText>
             );
           })}
-          {datasetPolygons.map((entry, index) => (
-            <Polygon
-              key={`dataset-${index}`}
-              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
-              }
-            />
-          ))}
+          {datasetPolygons.map((entry, index) => {
+            const strokePattern = resolveRadarStrokePattern(entry.dataset);
+            return (
+              <Polygon
+                key={`dataset-${index}`}
+                points={entry.points.join(' ')}
+                stroke={entry.dataset.borderColor}
+                strokeWidth={entry.dataset.borderWidth}
+                fill={entry.dataset.fillColor ?? 'transparent'}
+                strokeDasharray={strokePattern.strokeDasharray}
+                strokeLinecap={strokePattern.strokeLinecap}
+              />
+            );
+          })}
           {datasetPolygons.map((entry, datasetIndex) =>
             entry.dataset.showPoints
               ? entry.points.map((point, pointIndex) => {
@@ -2709,22 +3980,15 @@ function RadarChart({
     </Animated.View>
   );
 
-  const composed = (
-    <View style={{ backgroundColor }}>
-      {chart}
-      {showLegend && legendPosition === 'bottom' ? (
-        <View style={{ marginTop: 12 }}>{legend}</View>
-      ) : null}
-    </View>
-  );
-
-  if (!showLegend || legendPosition === 'bottom') return composed;
+  if (!showLegend) {
+    return <View style={{ backgroundColor }}>{chart}</View>;
+  }
 
   if (legendPosition === 'top') {
     return (
-      <View>
+      <View style={{ backgroundColor, alignItems: 'center' }}>
         {legend}
-        <View style={{ height: 12 }} />
+        <View style={{ height: legendSpacing }} />
         {chart}
       </View>
     );
@@ -2732,9 +3996,11 @@ function RadarChart({
 
   if (legendPosition === 'left') {
     return (
-      <View style={{ flexDirection: 'row' }}>
+      <View
+        style={{ backgroundColor, flexDirection: 'row', alignItems: 'center' }}
+      >
         {legend}
-        <View style={{ width: 12 }} />
+        <View style={{ width: legendSpacing }} />
         {chart}
       </View>
     );
@@ -2742,32 +4008,262 @@ function RadarChart({
 
   if (legendPosition === 'right') {
     return (
-      <View style={{ flexDirection: 'row' }}>
+      <View
+        style={{ backgroundColor, flexDirection: 'row', alignItems: 'center' }}
+      >
         {chart}
-        <View style={{ width: 12 }} />
+        <View style={{ width: legendSpacing }} />
         {legend}
       </View>
     );
   }
 
-  return composed;
+  return (
+    <View style={{ backgroundColor, alignItems: 'center' }}>
+      {chart}
+      <View style={{ height: legendSpacing }} />
+      {legend}
+    </View>
+  );
 }
 
 export type RadarAxis = { label: string; maxValue: number };
+export type RadarBorderStyle = 'solid' | 'dotted' | 'dashed';
 
 export type RadarDataset = {
   label: string;
   values: number[];
   borderColor: string;
   borderWidth: number;
-  borderStyle: string;
+  borderStyle: RadarBorderStyle;
   dashArray?: number[];
+  dashLength?: number;
   showPoints: boolean;
   pointRadius: number;
   pointColor: string;
   fillColor?: string;
 };
 
+type RadarStrokePattern = {
+  strokeDasharray?: string;
+  strokeLinecap?: 'butt' | 'round';
+};
+
+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<string>();
+
+function isDevelopmentEnvironment(): boolean {
+  return process.env.NODE_ENV !== 'production';
+}
+
+function warnRadarDashConflictOnce(label: string) {
+  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: Record<string, any>,
+  fallbackLabel: string
+): RadarBorderStyle {
+  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: RadarDataset): RadarStrokePattern {
+  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,
+} as const;
+
+export function resolveRadarAxisLabelFontSize(value: unknown): number {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) {
+    return RADAR_LABEL_ESTIMATION.defaultFontSize;
+  }
+  return parsed;
+}
+
+export function resolveRadarLabelOffset(
+  value: unknown,
+  fontSize: number
+): number {
+  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: string,
+  fontSize: number
+): {
+  width: number;
+  height: number;
+} {
+  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,
+}: {
+  width: number;
+  height: number;
+  padding: { left: number; right: number; top: number; bottom: number };
+  axisLabels: string[];
+  fontSize: number;
+  autoFitLabels?: boolean;
+  labelOffset: number;
+}): number {
+  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: any): RadarAxis[] {
   if (!Array.isArray(rawAxes)) return [];
   const axes: RadarAxis[] = [];
@@ -2776,7 +4272,9 @@ export function parseRadarAxes(rawAxes: any): RadarAxis[] {
     const label = axis.label ?? '';
     if (!label) return;
     const maxValue = resolveNumericValue(axis.maxValue, {}) ?? 100;
-    axes.push({ label, maxValue: maxValue > 0 ? maxValue : 100 });
+    const normalizedMaxValue =
+      Number.isFinite(maxValue) && maxValue > 0 ? maxValue : 100;
+    axes.push({ label, maxValue: normalizedMaxValue });
   });
   return axes;
 }
@@ -2788,14 +4286,16 @@ export function parseRadarDatasets(
 ): RadarDataset[] {
   if (!Array.isArray(raw) || axisLength === 0) return [];
   const datasets: RadarDataset[] = [];
-  raw.forEach((dataset) => {
+  raw.forEach((dataset, datasetIndex) => {
     if (!dataset || typeof dataset !== 'object') return;
     const valuesRaw = Array.isArray(dataset.data) ? dataset.data : [];
     const values: number[] = [];
     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}`;
@@ -2806,18 +4306,30 @@ export function parseRadarDatasets(
     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 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: any) => Number(val))
+      ? dataset.dashArray
+          .map((val: any) => Number(val))
+          .filter((val: number) => 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({
@@ -2827,6 +4339,7 @@ export function parseRadarDatasets(
       borderWidth,
       borderStyle: normalizedStyle,
       dashArray,
+      dashLength,
       showPoints,
       pointRadius,
       pointColor,
@@ -2844,7 +4357,9 @@ export function normalizeAxisMaximums(
     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, maxValue };
   });
@@ -2854,12 +4369,15 @@ function resolveRadarWidth(
   parsedWidth: number | string | undefined,
   measuredWidth: number
 ): number {
+  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;
 }