flowboard-react 0.2.0 → 0.4.0

package/lib/module/components/FlowboardRenderer.js

@@ -9,17 +9,21 @@ import LottieView from 'lottie-react-native';
 import MaskInput from 'react-native-mask-input';
 import Svg, { Circle, G, Line, Polygon, Text as SvgText } from 'react-native-svg';
 import PagerView from 'react-native-pager-view';
-import { insetsToStyle, parseAlignment, parseColor, parseCrossAlignment, parseDimension, parseFlexAlignment, parseFontWeight, parseInsets, parseResizeMode, parseTextAlign, parseTextDecoration, resolveNumericValue, resolveText } from "../utils/flowboardUtils.js";
+import { insetsToStyle, insetsToMarginStyle, parseAlignment, parseColor, parseCrossAlignment, parseDimension, parseFlexAlignment, parseFontWeight, parseInsets, parseResizeMode, parseTextAlign, parseTextDecoration, resolveNumericValue, resolveText } from "../utils/flowboardUtils.js";
 import { resolveFontAwesomeIcon, FontAwesome6 } from "../core/fontAwesome.js";
 import { useSliderRegistry } from "./widgets/sliderRegistry.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = StyleSheet.create({
   root: {
-    flex: 1
+    flex: 1,
+    backgroundColor: '#ffffff'
   },
   background: {
     ...StyleSheet.absoluteFillObject
   },
+  whiteBg: {
+    backgroundColor: '#ffffff'
+  },
   safeArea: {
     flex: 1
   },
@@ -48,26 +52,32 @@ export default function FlowboardRenderer(props) {
   const scrollable = screenData.scrollable === true;
   const safeArea = screenData.safeArea !== false;
   const padding = parseInsets(screenData.padding);
-  const paddingStyle = insetsToStyle(padding);
+  const contentPaddingStyle = insetsToStyle(padding);
+  const progressPaddingStyle = {
+    paddingTop: padding.top,
+    paddingRight: padding.right,
+    paddingLeft: padding.left
+  };
+  const rootCrossAxisAlignment = screenData.crossAxisAlignment ?? screenData.crossAxis;
   const content = /*#__PURE__*/_jsxs(View, {
     style: {
       flex: 1
     },
     children: [showProgress && /*#__PURE__*/_jsx(View, {
-      style: [paddingStyle, {
+      style: [progressPaddingStyle, {
         paddingBottom: 8
       }],
       children: renderProgressBar(currentIndex, totalScreens, progressColor, progressThickness, progressRadius, progressStyle)
     }), scrollable ? /*#__PURE__*/_jsx(ScrollView, {
       contentContainerStyle: {
-        ...paddingStyle,
+        ...contentPaddingStyle,
         paddingTop: showProgress ? 0 : padding.top
       },
       children: /*#__PURE__*/_jsx(View, {
         style: {
           flexGrow: 1,
           justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
-          alignItems: parseCrossAlignment(screenData.crossAxisAlignment)
+          alignItems: parseRootCrossAlignment(rootCrossAxisAlignment)
         },
         children: childrenData.map((child, index) => buildWidget(child, {
           onAction,
@@ -82,10 +92,10 @@ export default function FlowboardRenderer(props) {
     }) : /*#__PURE__*/_jsx(View, {
       style: {
         flex: 1,
-        ...paddingStyle,
+        ...contentPaddingStyle,
         paddingTop: showProgress ? 0 : padding.top,
         justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
-        alignItems: parseCrossAlignment(screenData.crossAxisAlignment)
+        alignItems: parseRootCrossAlignment(rootCrossAxisAlignment)
       },
       children: childrenData.map((child, index) => buildWidget(child, {
         onAction,
@@ -102,15 +112,18 @@ export default function FlowboardRenderer(props) {
     style: styles.root,
     children: [renderBackground(backgroundData, bgColorCode), safeArea ? /*#__PURE__*/_jsx(SafeAreaView, {
       style: styles.safeArea,
+      mode: "padding",
+      edges: ['top', 'right', 'bottom', 'left'],
       children: content
     }) : content]
   });
 }
 function renderBackground(bgData, legacyColorCode) {
   if (!bgData) {
+    const fallbackBackground = parseColor(legacyColorCode);
     return /*#__PURE__*/_jsx(View, {
       style: [styles.background, {
-        backgroundColor: parseColor(legacyColorCode)
+        backgroundColor: fallbackBackground === 'transparent' ? 'rgba(255,255,255,1)' : fallbackBackground
       }]
     });
   }
@@ -136,25 +149,27 @@ function renderBackground(bgData, legacyColorCode) {
       case 'image':
         {
           const url = bgData.url;
-          if (!url) return null;
-          return /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: url
-            },
-            style: styles.background,
-            resizeMode: fit
+          if (!hasImageUri(url)) {
+            return /*#__PURE__*/_jsx(View, {
+              style: [styles.background, styles.whiteBg]
+            });
+          }
+          return /*#__PURE__*/_jsx(BackgroundImageLayer, {
+            uri: String(url),
+            fit: fit
           });
         }
       case 'asset':
         {
           const path = bgData.path;
-          if (!path) return null;
-          return /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: path
-            },
-            style: styles.background,
-            resizeMode: fit
+          if (!hasImageUri(path)) {
+            return /*#__PURE__*/_jsx(View, {
+              style: [styles.background, styles.whiteBg]
+            });
+          }
+          return /*#__PURE__*/_jsx(BackgroundImageLayer, {
+            uri: String(path),
+            fit: fit
           });
         }
       case 'color':
@@ -175,6 +190,47 @@ function renderBackground(bgData, legacyColorCode) {
     }]
   });
 }
+function BackgroundImageLayer({
+  uri,
+  fit
+}) {
+  const [hasError, setHasError] = React.useState(false);
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    opacity.setValue(0);
+  }, [uri, opacity]);
+  const fadeIn = React.useCallback(() => {
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: 160,
+      useNativeDriver: true
+    }).start();
+  }, [opacity]);
+  if (hasError) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.background, styles.whiteBg]
+    });
+  }
+  return /*#__PURE__*/_jsx(Animated.Image, {
+    source: {
+      uri
+    },
+    style: [styles.background, {
+      opacity
+    }],
+    resizeMode: fit,
+    onLoad: fadeIn,
+    onError: () => setHasError(true)
+  });
+}
+function hasImageUri(value) {
+  if (typeof value !== 'string') return false;
+  return value.trim().length > 0;
+}
+function isNetworkLikeUri(value) {
+  if (!hasImageUri(value)) return false;
+  return /^(https?:|file:|content:|data:)/i.test(value.trim());
+}
 function renderProgressBar(currentIndex, totalScreens, color, thickness, radius, style) {
   if (style === 'dotted') {
     return /*#__PURE__*/_jsx(View, {
@@ -282,8 +338,8 @@ function buildWidget(json, params) {
     case 'container':
       {
         const gradient = parseGradient(props.background);
-        const width = normalizeDimension(parseDimension(props.width));
-        const height = normalizeDimension(parseDimension(props.height));
+        const width = normalizeDimension(parseLayoutDimension(props.width));
+        const height = normalizeDimension(parseLayoutDimension(props.height));
         const borderRadius = props.borderRadius ? Number(props.borderRadius) : undefined;
         const borderColor = props.borderColor ? parseColor(props.borderColor) : undefined;
         const borderWidth = borderColor ? 1 : 0;
@@ -398,8 +454,8 @@ function buildWidget(json, params) {
       {
         const gradient = parseGradient(props.background);
         const borderRadius = Number(props.borderRadius ?? 10);
-        const width = normalizeDimension(parseDimension(props.width)) ?? '100%';
-        const height = normalizeDimension(parseDimension(props.height)) ?? 50;
+        const width = normalizeDimension(parseLayoutDimension(props.width)) ?? '100%';
+        const height = normalizeDimension(parseLayoutDimension(props.height)) ?? 50;
         const label = props.label ?? 'Button';
         const textStyle = getTextStyle({
           ...props,
@@ -469,8 +525,8 @@ function buildWidget(json, params) {
       {
         node = /*#__PURE__*/_jsx(View, {
           style: {
-            height: normalizeDimension(parseDimension(props.height)),
-            width: normalizeDimension(parseDimension(props.width))
+            height: normalizeDimension(parseLayoutDimension(props.height)),
+            width: normalizeDimension(parseLayoutDimension(props.width))
           }
         });
         break;
@@ -481,15 +537,13 @@ function buildWidget(json, params) {
           ...params,
           allowFlexExpansion: true
         }) : null;
-        if (params.allowFlexExpansion) {
-          return /*#__PURE__*/_jsx(View, {
-            style: {
-              flex: 1
-            },
-            children: expandedChild
-          });
-        }
-        return expandedChild;
+        node = params.allowFlexExpansion ? /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1
+          },
+          children: expandedChild
+        }) : expandedChild;
+        break;
       }
     case 'padding':
       {
@@ -527,7 +581,48 @@ function buildWidget(json, params) {
               params.onInputChange(id, value);
             }
           },
-          onAction: params.onAction,
+          onAction: (actionName, payload) => {
+            if (actionName === 'next' && params.onInputChange && id && Object.prototype.hasOwnProperty.call(payload ?? {}, 'selectedValue')) {
+              params.onInputChange(id, payload?.selectedValue);
+            }
+            params.onAction(actionName, {
+              ...(payload ?? {}),
+              ...(id ? {
+                fieldId: id
+              } : {})
+            });
+          },
+          buildWidget: widgetJson => buildWidget(widgetJson, {
+            ...params,
+            allowFlexExpansion: true
+          })
+        });
+        break;
+      }
+    case 'wheel_picker':
+      {
+        node = /*#__PURE__*/_jsx(WheelPicker, {
+          properties: props,
+          options: Array.isArray(json.options) ? json.options : [],
+          itemTemplate: json.itemTemplate ?? props.itemTemplate,
+          formData: params.formData,
+          initialValue: params.formData[id ?? ''],
+          onChanged: value => {
+            if (params.onInputChange && id) {
+              params.onInputChange(id, value);
+            }
+          },
+          onAction: (actionName, payload) => {
+            if (actionName === 'next' && params.onInputChange && id && Object.prototype.hasOwnProperty.call(payload ?? {}, 'selectedValue')) {
+              params.onInputChange(id, payload?.selectedValue);
+            }
+            params.onAction(actionName, {
+              ...(payload ?? {}),
+              ...(id ? {
+                fieldId: id
+              } : {})
+            });
+          },
           buildWidget: widgetJson => buildWidget(widgetJson, {
             ...params,
             allowFlexExpansion: true
@@ -538,30 +633,23 @@ function buildWidget(json, params) {
     case 'image':
       {
         const source = props.source;
-        const width = normalizeDimension(parseDimension(props.width, true));
-        const height = normalizeDimension(parseDimension(props.height, true));
+        const width = normalizeDimension(parseLayoutDimension(props.width, true));
+        const height = normalizeDimension(parseLayoutDimension(props.height, true));
         if (source === 'asset') {
-          node = /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: props.path
-            },
-            style: {
-              width,
-              height
-            },
-            resizeMode: parseResizeMode(props.fit)
+          if (!hasImageUri(props.path)) return null;
+          node = /*#__PURE__*/_jsx(SduiImage, {
+            uri: String(props.path),
+            fit: parseResizeMode(props.fit),
+            width: width,
+            height: height
           });
         } else if (source === 'network') {
-          if (!props.url) return null;
-          node = /*#__PURE__*/_jsx(Image, {
-            source: {
-              uri: props.url
-            },
-            style: {
-              width,
-              height
-            },
-            resizeMode: parseResizeMode(props.fit)
+          if (!isNetworkLikeUri(props.url)) return null;
+          node = /*#__PURE__*/_jsx(SduiImage, {
+            uri: String(props.url),
+            fit: parseResizeMode(props.fit),
+            width: width,
+            height: height
           });
         } else {
           node = null;
@@ -571,8 +659,8 @@ function buildWidget(json, params) {
     case 'lottie':
       {
         const source = props.source;
-        const width = normalizeDimension(parseDimension(props.width, true));
-        const height = normalizeDimension(parseDimension(props.height, true));
+        const width = normalizeDimension(parseLayoutDimension(props.width, true));
+        const height = normalizeDimension(parseLayoutDimension(props.height, true));
         const loop = props.loop === true;
         if (source === 'asset') {
           node = /*#__PURE__*/_jsx(LottieView, {
@@ -661,7 +749,7 @@ function buildWidget(json, params) {
           autoPlay: props.autoPlay === true,
           autoPlayDelay: Number(props.autoPlayDelay ?? 3000),
           loop: props.loop === true,
-          height: parseDimension(props.height),
+          height: parseLayoutDimension(props.height),
           physics: props.physics,
           children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsx(View, {
             style: {
@@ -751,13 +839,13 @@ function buildWidget(json, params) {
       }
     case 'positioned':
       {
-        const left = parseDimension(props.left);
-        const top = parseDimension(props.top);
-        const right = parseDimension(props.right);
-        const bottom = parseDimension(props.bottom);
-        const width = parseDimension(props.width);
-        const height = parseDimension(props.height);
-        return /*#__PURE__*/_jsx(View, {
+        const left = parseLayoutDimension(props.left);
+        const top = parseLayoutDimension(props.top);
+        const right = parseLayoutDimension(props.right);
+        const bottom = parseLayoutDimension(props.bottom);
+        const width = parseLayoutDimension(props.width);
+        const height = parseLayoutDimension(props.height);
+        node = /*#__PURE__*/_jsx(View, {
           style: {
             position: 'absolute',
             left,
@@ -771,6 +859,7 @@ function buildWidget(json, params) {
             ...params
           }) : null
         });
+        break;
       }
     default:
       node = null;
@@ -780,7 +869,7 @@ function buildWidget(json, params) {
   if (marginVal !== undefined && marginVal !== null) {
     const marginInsets = parseInsets(marginVal);
     node = /*#__PURE__*/_jsx(View, {
-      style: insetsToStyle(marginInsets),
+      style: insetsToMarginStyle(marginInsets),
       children: node
     });
   } else if (type !== 'container' && type !== 'padding' && props.padding) {
@@ -796,13 +885,13 @@ function buildWidget(json, params) {
       shouldExpand = true;
     }
     if (props.height !== undefined) {
-      const heightVal = parseDimension(props.height);
+      const heightVal = parseLayoutDimension(props.height);
       if (heightVal === Number.POSITIVE_INFINITY) {
         shouldExpand = true;
       }
     }
     if (shouldExpand) {
-      return /*#__PURE__*/_jsx(View, {
+      node = /*#__PURE__*/_jsx(View, {
         style: {
           flex: 1
         },
@@ -810,6 +899,17 @@ function buildWidget(json, params) {
       });
     }
   }
+  if (params.key !== undefined && params.key !== null) {
+    if (/*#__PURE__*/React.isValidElement(node)) {
+      node = /*#__PURE__*/React.cloneElement(node, {
+        key: params.key
+      });
+    } else {
+      node = /*#__PURE__*/_jsx(React.Fragment, {
+        children: node
+      }, params.key);
+    }
+  }
   return node;
 }
 function buildActionPayload(props, json) {
@@ -920,6 +1020,100 @@ function normalizeDimension(value) {
   }
   return value;
 }
+function parseRootCrossAlignment(value) {
+  if (!value) return 'stretch';
+  return parseCrossAlignment(value);
+}
+function parseLayoutDimension(value, zeroIsNull = false) {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    const lowered = trimmed.toLowerCase();
+    if (lowered === 'double.infinity' || lowered === 'infinity' || lowered === '+infinity') {
+      return Number.POSITIVE_INFINITY;
+    }
+    if (trimmed.endsWith('%')) {
+      const numeric = Number(trimmed.slice(0, -1));
+      if (!Number.isNaN(numeric) && Number.isFinite(numeric)) {
+        if (zeroIsNull && numeric === 0) return undefined;
+        return `${numeric}%`;
+      }
+    }
+  }
+  return parseDimension(value, zeroIsNull);
+}
+function SduiImage({
+  uri,
+  fit,
+  width,
+  height
+}) {
+  const hasExplicitWidth = width !== undefined;
+  const hasExplicitHeight = height !== undefined;
+  const [aspectRatio, setAspectRatio] = React.useState(undefined);
+  const [hasError, setHasError] = React.useState(false);
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  const updateAspectRatio = (w, h) => {
+    if (!w || !h) return;
+    if (!Number.isFinite(w) || !Number.isFinite(h) || h <= 0) return;
+    const ratio = w / h;
+    if (Number.isFinite(ratio) && ratio > 0) {
+      setAspectRatio(ratio);
+    }
+  };
+  React.useEffect(() => {
+    if (hasExplicitWidth && hasExplicitHeight) return;
+    Image.getSize(uri, (w, h) => updateAspectRatio(w, h), () => null);
+  }, [uri, hasExplicitWidth, hasExplicitHeight]);
+  React.useEffect(() => {
+    opacity.setValue(0);
+  }, [uri, opacity]);
+  if (hasError) {
+    return null;
+  }
+  const style = {
+    width,
+    height
+  };
+  if (!hasExplicitWidth && !hasExplicitHeight) {
+    style.width = '100%';
+    if (aspectRatio) {
+      style.aspectRatio = aspectRatio;
+    } else {
+      style.minHeight = 160;
+    }
+  } else if (hasExplicitWidth && !hasExplicitHeight) {
+    if (aspectRatio) {
+      style.aspectRatio = aspectRatio;
+    } else {
+      style.minHeight = 100;
+    }
+  } else if (!hasExplicitWidth && hasExplicitHeight) {
+    if (aspectRatio) {
+      style.aspectRatio = aspectRatio;
+    } else {
+      style.width = '100%';
+    }
+  }
+  return /*#__PURE__*/_jsx(Animated.Image, {
+    source: {
+      uri
+    },
+    style: [style, {
+      opacity
+    }],
+    resizeMode: fit,
+    onLoad: event => {
+      const source = event?.nativeEvent?.source;
+      updateAspectRatio(source?.width, source?.height);
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 160,
+        useNativeDriver: true
+      }).start();
+    },
+    onError: () => setHasError(true)
+  });
+}
 function GradientText({
   text,
   gradient,
@@ -1085,7 +1279,9 @@ function SelectionList({
         next = [value];
         onChanged(value);
         if (properties.autoGoNext === true) {
-          onAction('next');
+          requestAnimationFrame(() => onAction('next', {
+            selectedValue: value
+          }));
         }
       }
       return next;
@@ -1157,6 +1353,274 @@ function SelectionList({
     }, `column-option-${index}`))
   });
 }
+function WheelPicker({
+  properties,
+  options,
+  itemTemplate,
+  formData,
+  initialValue,
+  onChanged,
+  onAction,
+  buildWidget
+}) {
+  const multiSelect = properties.multiSelect === true;
+  const [selectedValues, setSelectedValues] = React.useState(() => {
+    if (initialValue === null || initialValue === undefined) return [];
+    if (Array.isArray(initialValue)) return initialValue.map(String);
+    if (typeof initialValue === 'string') {
+      if (multiSelect) {
+        try {
+          return initialValue.replace('[', '').replace(']', '').split(',').map(val => val.trim()).filter(val => val.length > 0);
+        } catch {
+          return [initialValue];
+        }
+      }
+      return [initialValue];
+    }
+    return [];
+  });
+  const resolvedOptions = React.useMemo(() => buildWheelPickerOptions({
+    options,
+    properties,
+    formData,
+    itemTemplate
+  }), [formData, itemTemplate, options, properties]);
+  const toggleSelection = value => {
+    setSelectedValues(prev => {
+      let next = [...prev];
+      if (multiSelect) {
+        if (next.includes(value)) {
+          next = next.filter(item => item !== value);
+        } else {
+          next.push(value);
+        }
+        onChanged(next.join(','));
+      } else {
+        next = [value];
+        onChanged(value);
+        if (properties.autoGoNext === true) {
+          requestAnimationFrame(() => onAction('next', {
+            selectedValue: value
+          }));
+        }
+      }
+      return next;
+    });
+  };
+  const layout = properties.layout ?? 'wheel';
+  const spacing = Number(properties.spacing ?? 8);
+  const renderItem = (option, index) => {
+    const value = String(option.value ?? '');
+    const isSelected = selectedValues.includes(value);
+    const styleProps = isSelected ? option.selectedStyle ?? properties.selectedStyle ?? {
+      backgroundColor: properties.wheelSelectedBackgroundColor,
+      borderColor: properties.wheelSelectedBorderColor
+    } : option.unselectedStyle ?? properties.unselectedStyle ?? {
+      backgroundColor: properties.wheelUnselectedBackgroundColor,
+      borderColor: properties.wheelUnselectedBorderColor
+    };
+    const backgroundColor = parseColor(styleProps.backgroundColor);
+    const borderColor = parseColor(styleProps.borderColor);
+    const borderRadius = Number(styleProps.borderRadius ?? 8);
+    const borderWidth = Number(styleProps.borderWidth ?? 1);
+    return /*#__PURE__*/_jsx(Pressable, {
+      onPress: () => toggleSelection(value),
+      style: {
+        width: '100%',
+        backgroundColor,
+        borderColor,
+        borderWidth,
+        borderRadius,
+        padding: 0
+      },
+      children: buildWidget(option.child)
+    }, `wheel-option-${index}`);
+  };
+  if (layout === 'row') {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      children: resolvedOptions.map((option, index) => /*#__PURE__*/_jsx(View, {
+        style: {
+          marginRight: spacing,
+          marginBottom: spacing
+        },
+        children: renderItem(option, index)
+      }, `wheel-row-option-${index}`))
+    });
+  }
+  if (layout === 'grid') {
+    const crossAxisCount = Number(properties.gridCrossAxisCount ?? 2);
+    const aspectRatio = Number(properties.gridAspectRatio ?? 1);
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      children: resolvedOptions.map((option, index) => /*#__PURE__*/_jsx(View, {
+        style: {
+          width: `${100 / crossAxisCount}%`,
+          paddingRight: (index + 1) % crossAxisCount === 0 ? 0 : spacing,
+          paddingBottom: spacing,
+          aspectRatio
+        },
+        children: renderItem(option, index)
+      }, `wheel-grid-option-${index}`))
+    });
+  }
+  if (layout === 'wheel') {
+    const itemHeight = Math.max(1, Number(properties.wheelItemHeight ?? 48));
+    const requestedVisible = Math.max(3, Math.floor(Number(properties.visibleItems ?? 5)));
+    const visibleItems = requestedVisible % 2 === 0 ? requestedVisible + 1 : requestedVisible;
+    const containerHeight = itemHeight * visibleItems;
+    const centerPadding = Math.max(0, (containerHeight - itemHeight) / 2);
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        height: containerHeight
+      },
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        showsVerticalScrollIndicator: false,
+        contentContainerStyle: {
+          paddingVertical: centerPadding
+        },
+        children: resolvedOptions.map((option, index) => /*#__PURE__*/_jsx(View, {
+          style: {
+            minHeight: itemHeight,
+            justifyContent: 'center',
+            marginBottom: spacing > 0 && index < resolvedOptions.length - 1 ? spacing : 0
+          },
+          children: renderItem(option, index)
+        }, `wheel-column-option-${index}`))
+      })
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    children: resolvedOptions.map((option, index) => /*#__PURE__*/_jsx(View, {
+      style: {
+        marginBottom: spacing
+      },
+      children: renderItem(option, index)
+    }, `wheel-list-option-${index}`))
+  });
+}
+function buildWheelPickerOptions({
+  options,
+  properties,
+  formData,
+  itemTemplate
+}) {
+  const templateContext = buildWheelTemplateBaseContext(formData, properties);
+  const itemCountRaw = properties.itemCount ?? properties.item_count;
+  const itemCountResolved = resolveNumericValue(itemCountRaw, templateContext);
+  const itemCount = normalizeItemCount(itemCountResolved);
+  if (itemCount > 0) {
+    const generatedTemplate = normalizeWheelOptionTemplate(itemTemplate ?? properties.itemTemplate ?? options[0]);
+    if (!generatedTemplate) return [];
+    const start = resolveNumericValue(properties.start ?? properties.itemStart ?? 0, templateContext) ?? 0;
+    const step = resolveNumericValue(properties.step ?? properties.itemStep ?? 1, templateContext) ?? 1;
+    return Array.from({
+      length: itemCount
+    }).map((_, index) => {
+      const itemValue = start + step * index;
+      const context = {
+        ...templateContext,
+        start,
+        step,
+        index,
+        item: itemValue
+      };
+      const resolvedOption = resolveWheelTemplateValue(generatedTemplate, context);
+      return ensureWheelOptionShape(resolvedOption, String(itemValue));
+    });
+  }
+  return options.map((option, index) => {
+    const itemValue = option?.value ?? index;
+    const context = {
+      ...templateContext,
+      index,
+      item: itemValue
+    };
+    const resolvedOption = resolveWheelTemplateValue(option, context);
+    return ensureWheelOptionShape(resolvedOption, String(itemValue));
+  });
+}
+function normalizeItemCount(value) {
+  if (value === null || !Number.isFinite(value)) return 0;
+  return Math.max(0, Math.floor(value));
+}
+function buildWheelTemplateBaseContext(formData, properties) {
+  const context = {
+    ...formData
+  };
+  const start = resolveNumericValue(properties.start ?? properties.itemStart, context);
+  const step = resolveNumericValue(properties.step ?? properties.itemStep, context);
+  if (start !== null) context.start = start;
+  if (step !== null) context.step = step;
+  return context;
+}
+function normalizeWheelOptionTemplate(template) {
+  if (!template || typeof template !== 'object') return null;
+  const asMap = template;
+  if (Object.prototype.hasOwnProperty.call(asMap, 'value') || Object.prototype.hasOwnProperty.call(asMap, 'child')) {
+    return {
+      ...asMap
+    };
+  }
+  if (typeof asMap.type === 'string') {
+    return {
+      value: '{{item}}',
+      child: asMap
+    };
+  }
+  return null;
+}
+function ensureWheelOptionShape(option, fallbackValue) {
+  if (!option || typeof option !== 'object') {
+    return {
+      value: fallbackValue,
+      child: {
+        type: 'text',
+        properties: {
+          text: fallbackValue
+        }
+      }
+    };
+  }
+  const normalized = {
+    ...option
+  };
+  const rawValue = normalized.value ?? fallbackValue;
+  const value = String(rawValue);
+  const child = normalized.child && typeof normalized.child === 'object' ? normalized.child : {
+    type: 'text',
+    properties: {
+      text: value
+    }
+  };
+  return {
+    ...normalized,
+    value,
+    child
+  };
+}
+function resolveWheelTemplateValue(value, context) {
+  if (typeof value === 'string') {
+    return resolveText(value, context);
+  }
+  if (Array.isArray(value)) {
+    return value.map(entry => resolveWheelTemplateValue(entry, context));
+  }
+  if (value && typeof value === 'object') {
+    const result = {};
+    Object.keys(value).forEach(key => {
+      result[key] = resolveWheelTemplateValue(value[key], context);
+    });
+    return result;
+  }
+  return value;
+}
 function FakeProgressBar({
   progressColor,
   backgroundColor,
@@ -1278,27 +1742,32 @@ function SliderWidget({
   const registry = useSliderRegistry();
   const pagerRef = React.useRef(null);
   const pageLength = children.length;
-  const [currentPage, setCurrentPage] = React.useState(() => loop && pageLength > 0 ? pageLength * 1000 : 0);
+  const pageCount = pageLength;
+  const [currentPage, setCurrentPage] = React.useState(0);
   const timerRef = React.useRef(null);
   React.useEffect(() => {
-    if (autoPlay && !linkedTo) {
+    setCurrentPage(prev => clampSliderPage(prev, pageCount));
+  }, [pageCount]);
+  React.useEffect(() => {
+    if (autoPlay && !linkedTo && pageLength > 0) {
       timerRef.current = setInterval(() => {
         setCurrentPage(prev => {
-          if (loop) return prev + 1;
-          if (prev < children.length - 1) return prev + 1;
-          return 0;
+          const safePrev = clampSliderPage(prev, pageCount);
+          if (safePrev < pageLength - 1) return safePrev + 1;
+          if (loop) return 0;
+          return safePrev;
         });
       }, autoPlayDelay);
     }
     return () => {
       if (timerRef.current) clearInterval(timerRef.current);
     };
-  }, [autoPlay, autoPlayDelay, loop, linkedTo, children.length]);
+  }, [autoPlay, autoPlayDelay, linkedTo, loop, pageCount, pageLength]);
   React.useEffect(() => {
-    if (pagerRef.current) {
-      pagerRef.current.setPage(currentPage);
+    if (pagerRef.current && pageCount > 0) {
+      pagerRef.current.setPage(clampSliderPage(currentPage, pageCount));
     }
-  }, [currentPage]);
+  }, [currentPage, pageCount]);
   React.useEffect(() => {
     if (registry && id && children.length > 0) {
       registry.update(id, currentPage % children.length, children.length);
@@ -1307,26 +1776,31 @@ function SliderWidget({
   React.useEffect(() => {
     if (!linkedTo || !registry) return;
     return registry.getNotifier(linkedTo, value => {
+      const normalized = normalizeLoopIndex(value, pageLength);
+      const targetPage = clampSliderPage(normalized, pageCount);
+      setCurrentPage(targetPage);
       if (pagerRef.current) {
-        pagerRef.current.setPage(value);
+        pagerRef.current.setPage(targetPage);
       }
     });
-  }, [linkedTo, registry]);
+  }, [linkedTo, pageCount, pageLength, registry]);
   if (pageLength === 0) return null;
-  const pageCount = loop ? pageLength * 1000 : pageLength;
   return /*#__PURE__*/_jsx(PagerView, {
     ref: pagerRef,
-    style: {
-      height: height ?? 200
+    style: height === undefined ? {
+      flex: 1
+    } : {
+      height
     },
     orientation: direction,
     scrollEnabled: physics !== 'never',
-    initialPage: currentPage,
+    initialPage: clampSliderPage(currentPage, pageCount),
     onPageSelected: event => {
       const page = event.nativeEvent.position;
-      setCurrentPage(page);
+      const safePage = clampSliderPage(page, pageCount);
+      setCurrentPage(safePage);
       if (registry && id) {
-        registry.update(id, page % pageLength, pageLength);
+        registry.update(id, safePage % pageLength, pageLength);
       }
     },
     children: Array.from({
@@ -1339,6 +1813,18 @@ function SliderWidget({
     }, `slider-page-${index}`))
   });
 }
+function clampSliderPage(page, pageCount) {
+  if (pageCount <= 0) return 0;
+  if (!Number.isFinite(page)) return 0;
+  if (page < 0) return 0;
+  if (page >= pageCount) return pageCount - 1;
+  return Math.floor(page);
+}
+function normalizeLoopIndex(index, size) {
+  if (size <= 0 || !Number.isFinite(index)) return 0;
+  const normalized = Math.floor(index) % size;
+  return normalized < 0 ? normalized + size : normalized;
+}
 function PageViewIndicator({
   linkedTo,
   activeColor,
@@ -1383,15 +1869,34 @@ function RadarChart({
 }) {
   const animate = properties.animate !== false;
   const animationDurationMs = Number(properties.animationDurationMs ?? 800);
-  const scale = useMemo(() => new Animated.Value(animate ? 0 : 1), [animate]);
+  const reveal = useMemo(() => new Animated.Value(animate ? 0 : 1), [animate]);
+  const [lineProgress, setLineProgress] = React.useState(animate ? 0 : 1);
   React.useEffect(() => {
-    if (!animate) return;
-    Animated.timing(scale, {
+    if (!animate) {
+      reveal.setValue(1);
+      setLineProgress(1);
+      return;
+    }
+    reveal.setValue(0);
+    setLineProgress(0);
+    const listenerId = reveal.addListener(({
+      value
+    }) => {
+      setLineProgress(Math.max(0, Math.min(1, value)));
+    });
+    Animated.timing(reveal, {
       toValue: 1,
       duration: animationDurationMs,
-      useNativeDriver: true
+      useNativeDriver: false
     }).start();
-  }, [animate, animationDurationMs, scale]);
+    return () => {
+      reveal.removeListener(listenerId);
+    };
+  }, [animate, animationDurationMs, reveal]);
+  const parsedWidth = parseLayoutDimension(properties.width);
+  const normalizedWidth = normalizeDimension(parsedWidth);
+  const [measuredWidth, setMeasuredWidth] = React.useState(0);
+  const width = resolveRadarWidth(parsedWidth, measuredWidth);
   const axes = parseRadarAxes(properties.axes);
   if (axes.length < 3) {
     return radarPlaceholder('Radar chart requires at least 3 axes.');
@@ -1402,9 +1907,8 @@ function RadarChart({
   }
   const normalizedAxes = normalizeAxisMaximums(axes, datasets);
   const backgroundColor = parseColor(properties.backgroundColor);
-  const width = parseDimension(properties.width) ?? 300;
-  const rawHeight = parseDimension(properties.height);
-  const height = rawHeight === undefined || rawHeight === Number.POSITIVE_INFINITY ? 300 : rawHeight;
+  const rawHeight = parseLayoutDimension(properties.height);
+  const height = typeof rawHeight === 'number' && Number.isFinite(rawHeight) && rawHeight > 0 ? rawHeight : 300;
   const padding = parseInsets(properties.padding);
   const gridLevels = Math.min(Math.max(Number(properties.gridLevels ?? 5), 1), 12);
   const gridColor = parseColor(properties.gridColor ?? '0xFFE0E0E0');
@@ -1418,7 +1922,7 @@ function RadarChart({
   const legendStyle = getTextStyle(properties.legendStyle ?? {}, 'color', '0xFF212121');
   const shape = (properties.shape ?? 'polygon').toLowerCase();
   const chartSize = Math.min(width, height);
-  const radius = chartSize / 2 - Math.max(padding.left, padding.right, padding.top, padding.bottom);
+  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
@@ -1442,7 +1946,7 @@ 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;
+      const ratio = (maxValue > 0 ? value / maxValue : 0) * 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);
@@ -1481,15 +1985,19 @@ function RadarChart({
   });
   const chart = /*#__PURE__*/_jsx(Animated.View, {
     style: {
-      width,
+      width: normalizedWidth ?? width,
       height,
       paddingLeft: padding.left,
       paddingRight: padding.right,
       paddingTop: padding.top,
       paddingBottom: padding.bottom,
-      transform: [{
-        scale
-      }]
+      opacity: reveal
+    },
+    onLayout: event => {
+      const nextWidth = Math.floor(event.nativeEvent.layout.width);
+      if (nextWidth > 0 && nextWidth !== measuredWidth) {
+        setMeasuredWidth(nextWidth);
+      }
     },
     children: /*#__PURE__*/_jsx(Svg, {
       width: width,
@@ -1662,6 +2170,15 @@ export function normalizeAxisMaximums(axes, datasets) {
     };
   });
 }
+function resolveRadarWidth(parsedWidth, measuredWidth) {
+  if (typeof parsedWidth === 'number' && Number.isFinite(parsedWidth)) {
+    return parsedWidth;
+  }
+  if (measuredWidth > 0) {
+    return measuredWidth;
+  }
+  return 300;
+}
 function radarPlaceholder(message) {
   return /*#__PURE__*/_jsx(View, {
     style: {