flowboard-react 0.1.0

package/lib/module/components/FlowboardRenderer.js

@@ -0,0 +1,1684 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Animated, Pressable, ScrollView, StyleSheet, Text, TextInput, View, Image } from 'react-native';
+import { SafeAreaView } 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';
+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 { 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
+  },
+  background: {
+    ...StyleSheet.absoluteFillObject
+  },
+  safeArea: {
+    flex: 1
+  },
+  progressWrapper: {
+    width: '100%'
+  }
+});
+export default function FlowboardRenderer(props) {
+  const {
+    screenData,
+    onAction,
+    formData = {},
+    onInputChange,
+    enableFontAwesomeIcons = true,
+    currentIndex = 0,
+    totalScreens = 1
+  } = props;
+  const childrenData = Array.isArray(screenData.children) ? screenData.children : [];
+  const backgroundData = screenData.background;
+  const bgColorCode = screenData.backgroundColor;
+  const showProgress = screenData.showProgress === true;
+  const progressColor = parseColor(screenData.progressColor ?? '0xFF000000');
+  const progressThickness = Number(screenData.progressThickness ?? 4);
+  const progressRadius = Number(screenData.progressRadius ?? 0);
+  const progressStyle = screenData.progressStyle ?? 'linear';
+  const scrollable = screenData.scrollable === true;
+  const safeArea = screenData.safeArea !== false;
+  const padding = parseInsets(screenData.padding);
+  const paddingStyle = insetsToStyle(padding);
+  const content = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flex: 1
+    },
+    children: [showProgress && /*#__PURE__*/_jsx(View, {
+      style: [paddingStyle, {
+        paddingBottom: 8
+      }],
+      children: renderProgressBar(currentIndex, totalScreens, progressColor, progressThickness, progressRadius, progressStyle)
+    }), scrollable ? /*#__PURE__*/_jsx(ScrollView, {
+      contentContainerStyle: {
+        ...paddingStyle,
+        paddingTop: showProgress ? 0 : padding.top
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          flexGrow: 1,
+          justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+          alignItems: parseCrossAlignment(screenData.crossAxisAlignment)
+        },
+        children: childrenData.map((child, index) => buildWidget(child, {
+          onAction,
+          formData,
+          onInputChange,
+          allowFlexExpansion: true,
+          screenData,
+          enableFontAwesomeIcons,
+          key: `child-${index}`
+        }))
+      })
+    }) : /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        ...paddingStyle,
+        paddingTop: showProgress ? 0 : padding.top,
+        justifyContent: parseFlexAlignment(screenData.mainAxisAlignment),
+        alignItems: parseCrossAlignment(screenData.crossAxisAlignment)
+      },
+      children: childrenData.map((child, index) => buildWidget(child, {
+        onAction,
+        formData,
+        onInputChange,
+        allowFlexExpansion: true,
+        screenData,
+        enableFontAwesomeIcons,
+        key: `child-${index}`
+      }))
+    })]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.root,
+    children: [renderBackground(backgroundData, bgColorCode), safeArea ? /*#__PURE__*/_jsx(SafeAreaView, {
+      style: styles.safeArea,
+      children: content
+    }) : content]
+  });
+}
+function renderBackground(bgData, legacyColorCode) {
+  if (!bgData) {
+    return /*#__PURE__*/_jsx(View, {
+      style: [styles.background, {
+        backgroundColor: parseColor(legacyColorCode)
+      }]
+    });
+  }
+  if (typeof bgData === 'object') {
+    const type = bgData.type;
+    const fit = parseResizeMode(bgData.fit ?? 'cover');
+    switch (type) {
+      case 'gradient':
+        {
+          const colors = Array.isArray(bgData.colors) ? bgData.colors.map(c => parseColor(c)) : [];
+          if (colors.length === 0) return null;
+          const start = alignmentToGradient(bgData.begin ?? 'topLeft');
+          const end = alignmentToGradient(bgData.end ?? 'bottomRight');
+          const stops = Array.isArray(bgData.stops) ? bgData.stops.map(s => Number(s)) : undefined;
+          return /*#__PURE__*/_jsx(LinearGradient, {
+            colors: colors,
+            start: start,
+            end: end,
+            locations: stops,
+            style: styles.background
+          });
+        }
+      case 'image':
+        {
+          const url = bgData.url;
+          if (!url) return null;
+          return /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: url
+            },
+            style: styles.background,
+            resizeMode: fit
+          });
+        }
+      case 'asset':
+        {
+          const path = bgData.path;
+          if (!path) return null;
+          return /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: path
+            },
+            style: styles.background,
+            resizeMode: fit
+          });
+        }
+      case 'color':
+        {
+          return /*#__PURE__*/_jsx(View, {
+            style: [styles.background, {
+              backgroundColor: parseColor(bgData.color)
+            }]
+          });
+        }
+      default:
+        break;
+    }
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.background, {
+      backgroundColor: '#ffffff'
+    }]
+  });
+}
+function renderProgressBar(currentIndex, totalScreens, color, thickness, radius, style) {
+  if (style === 'dotted') {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row'
+      },
+      children: Array.from({
+        length: totalScreens
+      }).map((_, index) => {
+        const isActive = index <= currentIndex;
+        return /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1,
+            height: thickness,
+            marginRight: index < totalScreens - 1 ? 4 : 0,
+            backgroundColor: isActive ? color : withOpacity(color, 0.1),
+            borderRadius: radius
+          }
+        }, `dot-${index}`);
+      })
+    });
+  }
+  const progress = totalScreens > 0 ? (currentIndex + 1) / totalScreens : 0;
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: '100%',
+      height: thickness,
+      borderRadius: radius,
+      backgroundColor: withOpacity(color, 0.1),
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        width: `${progress * 100}%`,
+        height: '100%',
+        backgroundColor: color,
+        borderRadius: radius
+      }
+    })
+  });
+}
+function buildWidget(json, params) {
+  if (!json || typeof json !== 'object') return null;
+  const type = json.type;
+  const id = json.id;
+  const props = {
+    ...(json.properties ?? {})
+  };
+  const childrenJson = Array.isArray(json.children) ? json.children : undefined;
+  const childJson = json.child;
+  const action = json.action;
+  const actionPayload = action ? buildActionPayload(props, json) : undefined;
+  let node = null;
+  switch (type) {
+    case 'column':
+      {
+        const spacing = Number(props.spacing ?? props.gap ?? 0);
+        const mainAxisSize = props.mainAxisSize === 'min' ? 'min' : 'max';
+        const childWidgets = (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [buildWidget(child, {
+            ...params,
+            allowFlexExpansion: true
+          }), spacing > 0 && index < (childrenJson?.length ?? 0) - 1 ? /*#__PURE__*/_jsx(View, {
+            style: {
+              height: spacing
+            }
+          }) : null]
+        }, `column-${index}`));
+        node = /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'column',
+            justifyContent: parseFlexAlignment(props.mainAxisAlignment),
+            alignItems: parseCrossAlignment(props.crossAxisAlignment),
+            flexGrow: mainAxisSize === 'max' ? 1 : 0
+          },
+          children: childWidgets
+        });
+        break;
+      }
+    case 'row':
+      {
+        const spacing = Number(props.spacing ?? props.gap ?? 0);
+        const mainAxisSize = props.mainAxisSize === 'min' ? 'min' : 'max';
+        const childWidgets = (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+          children: [buildWidget(child, {
+            ...params,
+            allowFlexExpansion: true
+          }), spacing > 0 && index < (childrenJson?.length ?? 0) - 1 ? /*#__PURE__*/_jsx(View, {
+            style: {
+              width: spacing
+            }
+          }) : null]
+        }, `row-${index}`));
+        node = /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'row',
+            justifyContent: parseFlexAlignment(props.mainAxisAlignment),
+            alignItems: parseCrossAlignment(props.crossAxisAlignment),
+            flexGrow: mainAxisSize === 'max' ? 1 : 0
+          },
+          children: childWidgets
+        });
+        break;
+      }
+    case 'container':
+      {
+        const gradient = parseGradient(props.background);
+        const width = normalizeDimension(parseDimension(props.width));
+        const height = normalizeDimension(parseDimension(props.height));
+        const borderRadius = props.borderRadius ? Number(props.borderRadius) : undefined;
+        const borderColor = props.borderColor ? parseColor(props.borderColor) : undefined;
+        const borderWidth = borderColor ? 1 : 0;
+        const padding = parseInsets(props.padding);
+        const content = childJson ? buildWidget(childJson, {
+          ...params,
+          allowFlexExpansion: false
+        }) : null;
+        if (gradient) {
+          node = /*#__PURE__*/_jsx(LinearGradient, {
+            colors: gradient.colors,
+            start: gradient.start,
+            end: gradient.end,
+            locations: gradient.stops,
+            style: {
+              width,
+              height,
+              borderRadius,
+              borderColor,
+              borderWidth,
+              overflow: 'hidden',
+              ...insetsToStyle(padding)
+            },
+            children: content
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(View, {
+            style: {
+              width,
+              height,
+              backgroundColor: parseColor(props.backgroundColor),
+              borderRadius,
+              borderColor,
+              borderWidth,
+              ...insetsToStyle(padding)
+            },
+            children: content
+          });
+        }
+        break;
+      }
+    case 'text':
+      {
+        const rawText = props.text ?? '';
+        const resolvedText = resolveText(String(rawText), params.formData);
+        const gradient = parseGradient(props.foreground);
+        const textStyle = getTextStyle(props, 'color');
+        const align = parseTextAlign(props.textAlign);
+        if (gradient) {
+          node = /*#__PURE__*/_jsx(GradientText, {
+            text: resolvedText,
+            gradient: gradient,
+            style: [textStyle, {
+              textAlign: align
+            }]
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(Text, {
+            style: [textStyle, {
+              textAlign: align
+            }],
+            children: resolvedText
+          });
+        }
+        break;
+      }
+    case 'rich_text':
+      {
+        const spansList = Array.isArray(props.spans) ? props.spans : [];
+        const richTextGradient = parseGradient(props.foreground);
+        const align = parseTextAlign(props.textAlign);
+        if (richTextGradient) {
+          const combined = spansList.map(span => resolveText(String(span.text ?? ''), params.formData)).join('');
+          node = /*#__PURE__*/_jsx(GradientText, {
+            text: combined,
+            gradient: richTextGradient,
+            style: {
+              textAlign: align
+            }
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(View, {
+            style: {
+              flexDirection: 'row',
+              flexWrap: 'wrap'
+            },
+            children: spansList.map((span, index) => {
+              const spanText = resolveText(String(span.text ?? ''), params.formData);
+              const spanStyle = getTextStyle(span, 'color');
+              const spanGradient = parseGradient(span.foreground);
+              if (spanGradient) {
+                return /*#__PURE__*/_jsx(GradientText, {
+                  text: spanText,
+                  gradient: spanGradient,
+                  style: [spanStyle, {
+                    textAlign: align
+                  }]
+                }, `span-${index}`);
+              }
+              return /*#__PURE__*/_jsx(Text, {
+                style: [spanStyle, {
+                  textAlign: align
+                }],
+                children: spanText
+              }, `span-${index}`);
+            })
+          });
+        }
+        break;
+      }
+    case 'button':
+      {
+        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 label = props.label ?? 'Button';
+        const textStyle = getTextStyle({
+          ...props,
+          height: null
+        }, 'textColor', '0xFFFFFFFF');
+        const content = /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center'
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: textStyle,
+            children: label
+          })
+        });
+        if (gradient) {
+          node = /*#__PURE__*/_jsx(Pressable, {
+            onPress: action ? () => params.onAction(action, actionPayload ?? props) : undefined,
+            style: {
+              width,
+              height
+            },
+            children: /*#__PURE__*/_jsx(LinearGradient, {
+              colors: gradient.colors,
+              start: gradient.start,
+              end: gradient.end,
+              locations: gradient.stops,
+              style: {
+                flex: 1,
+                borderRadius,
+                overflow: 'hidden'
+              },
+              children: content
+            })
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(Pressable, {
+            onPress: action ? () => params.onAction(action, actionPayload ?? props) : undefined,
+            style: {
+              width,
+              height,
+              backgroundColor: parseColor(props.color ?? '0xFF2196F3'),
+              borderRadius,
+              justifyContent: 'center',
+              alignItems: 'center'
+            },
+            children: content
+          });
+        }
+        break;
+      }
+    case 'text_input':
+      {
+        node = /*#__PURE__*/_jsx(DynamicInput, {
+          initialValue: params.formData[id ?? ''] ?? '',
+          properties: props,
+          onChanged: value => {
+            if (params.onInputChange && id) {
+              params.onInputChange(id, value);
+            }
+          }
+        });
+        break;
+      }
+    case 'spacer':
+      {
+        node = /*#__PURE__*/_jsx(View, {
+          style: {
+            height: normalizeDimension(parseDimension(props.height)),
+            width: normalizeDimension(parseDimension(props.width))
+          }
+        });
+        break;
+      }
+    case 'expanded':
+      {
+        const expandedChild = childJson ? buildWidget(childJson, {
+          ...params,
+          allowFlexExpansion: true
+        }) : null;
+        if (params.allowFlexExpansion) {
+          return /*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1
+            },
+            children: expandedChild
+          });
+        }
+        return expandedChild;
+      }
+    case 'padding':
+      {
+        const padding = parseInsets(props.padding ?? 0);
+        node = /*#__PURE__*/_jsx(View, {
+          style: insetsToStyle(padding),
+          children: childJson ? buildWidget(childJson, {
+            ...params
+          }) : null
+        });
+        break;
+      }
+    case 'align':
+      {
+        const alignment = parseAlignment(props.alignment ?? 'center');
+        node = /*#__PURE__*/_jsx(View, {
+          style: {
+            justifyContent: alignment.justifyContent,
+            alignItems: alignment.alignItems
+          },
+          children: childJson ? buildWidget(childJson, {
+            ...params
+          }) : null
+        });
+        break;
+      }
+    case 'selection_list':
+      {
+        node = /*#__PURE__*/_jsx(SelectionList, {
+          properties: props,
+          options: Array.isArray(json.options) ? json.options : [],
+          initialValue: params.formData[id ?? ''],
+          onChanged: value => {
+            if (params.onInputChange && id) {
+              params.onInputChange(id, value);
+            }
+          },
+          onAction: params.onAction,
+          buildWidget: widgetJson => buildWidget(widgetJson, {
+            ...params,
+            allowFlexExpansion: true
+          })
+        });
+        break;
+      }
+    case 'image':
+      {
+        const source = props.source;
+        const width = normalizeDimension(parseDimension(props.width, true));
+        const height = normalizeDimension(parseDimension(props.height, true));
+        if (source === 'asset') {
+          node = /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: props.path
+            },
+            style: {
+              width,
+              height
+            },
+            resizeMode: parseResizeMode(props.fit)
+          });
+        } else if (source === 'network') {
+          if (!props.url) return null;
+          node = /*#__PURE__*/_jsx(Image, {
+            source: {
+              uri: props.url
+            },
+            style: {
+              width,
+              height
+            },
+            resizeMode: parseResizeMode(props.fit)
+          });
+        } else {
+          node = null;
+        }
+        break;
+      }
+    case 'lottie':
+      {
+        const source = props.source;
+        const width = normalizeDimension(parseDimension(props.width, true));
+        const height = normalizeDimension(parseDimension(props.height, true));
+        const loop = props.loop === true;
+        if (source === 'asset') {
+          node = /*#__PURE__*/_jsx(LottieView, {
+            source: {
+              uri: props.path ?? ''
+            },
+            style: {
+              width,
+              height
+            },
+            autoPlay: true,
+            loop: loop
+          });
+        } else if (source === 'network') {
+          if (!props.url) return null;
+          node = /*#__PURE__*/_jsx(LottieView, {
+            source: {
+              uri: props.url
+            },
+            style: {
+              width,
+              height
+            },
+            autoPlay: true,
+            loop: loop
+          });
+        } else {
+          node = null;
+        }
+        break;
+      }
+    case 'grid':
+      {
+        const crossAxisCount = Number(props.crossAxisCount ?? 2);
+        const spacing = Number(props.spacing ?? 8);
+        const mainAxisSpacing = Number(props.mainAxisSpacing ?? spacing);
+        const crossAxisSpacing = Number(props.crossAxisSpacing ?? spacing);
+        const childAspectRatio = Number(props.childAspectRatio ?? 1);
+        node = /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'row',
+            flexWrap: 'wrap'
+          },
+          children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsx(View, {
+            style: {
+              width: `${100 / crossAxisCount}%`,
+              paddingRight: (index + 1) % crossAxisCount === 0 ? 0 : crossAxisSpacing,
+              paddingBottom: mainAxisSpacing,
+              aspectRatio: childAspectRatio
+            },
+            children: buildWidget(child, {
+              ...params
+            })
+          }, `grid-${index}`))
+        });
+        break;
+      }
+    case 'fake_progress_bar':
+      {
+        node = /*#__PURE__*/_jsx(FakeProgressBar, {
+          progressColor: parseColor(props.progressColor ?? '0xFF2196F3'),
+          backgroundColor: parseColor(props.backgroundColor ?? '0xFFE0E0E0'),
+          thickness: Number(props.thickness ?? 4),
+          borderRadius: Number(props.borderRadius ?? 0),
+          durationMs: Number(props.duration ?? 3000),
+          startDelayMs: Number(props.startDelay ?? 0),
+          style: props.style ?? 'linear',
+          showProgressText: props.showProgressText === true,
+          progressTextStyle: getTextStyle(props.progressTextStyle ?? {}, 'color'),
+          progressTextFormat: props.progressTextFormat ?? '{{progress}}%',
+          size: Number(props.size ?? 50),
+          onComplete: () => {
+            if (action) {
+              params.onAction(action, actionPayload ?? props);
+            }
+          }
+        });
+        break;
+      }
+    case 'slider':
+      {
+        node = /*#__PURE__*/_jsx(SliderWidget, {
+          id: json._internalId,
+          linkedTo: props.linkedTo,
+          direction: props.direction === 'vertical' ? 'vertical' : 'horizontal',
+          autoPlay: props.autoPlay === true,
+          autoPlayDelay: Number(props.autoPlayDelay ?? 3000),
+          loop: props.loop === true,
+          height: parseDimension(props.height),
+          physics: props.physics,
+          children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsx(View, {
+            style: {
+              flex: 1
+            },
+            children: buildWidget(child, {
+              ...params
+            })
+          }, `slider-${index}`))
+        });
+        break;
+      }
+    case 'pageview_indicator':
+      {
+        node = /*#__PURE__*/_jsx(PageViewIndicator, {
+          linkedTo: props.linkedTo,
+          activeColor: parseColor(props.activeColor ?? '0xFF2196F3'),
+          inactiveColor: parseColor(props.inactiveColor ?? '0xFFE0E0E0'),
+          dotSize: Number(props.dotSize ?? 8),
+          spacing: Number(props.spacing ?? 8),
+          style: props.style ?? 'dots'
+        });
+        break;
+      }
+    case 'radar_chart':
+      {
+        node = /*#__PURE__*/_jsx(RadarChart, {
+          properties: props,
+          formData: params.formData
+        });
+        break;
+      }
+    case 'icon':
+      {
+        const iconName = props.icon ?? props.name;
+        const iconStyle = props.style ?? 'solid';
+        const size = Number(props.size ?? 24);
+        const color = parseColor(props.color ?? '0xFF000000');
+        if (!params.enableFontAwesomeIcons) {
+          node = /*#__PURE__*/_jsx(Text, {
+            style: {
+              fontSize: size,
+              color
+            },
+            children: "?"
+          });
+          break;
+        }
+        const icon = resolveFontAwesomeIcon(iconName, iconStyle);
+        if (!icon.name) {
+          node = /*#__PURE__*/_jsx(Text, {
+            style: {
+              fontSize: size,
+              color
+            },
+            children: "?"
+          });
+        } else {
+          node = /*#__PURE__*/_jsx(FontAwesome6, {
+            name: icon.name,
+            size: size,
+            color: color,
+            ...icon.props
+          });
+        }
+        break;
+      }
+    case 'stack':
+      {
+        const alignment = parseAlignment(props.alignment ?? 'topLeft');
+        const fit = props.fit === 'expand' ? 'expand' : 'loose';
+        node = /*#__PURE__*/_jsx(View, {
+          style: {
+            position: 'relative',
+            width: fit === 'expand' ? '100%' : undefined,
+            height: fit === 'expand' ? '100%' : undefined,
+            justifyContent: alignment.justifyContent,
+            alignItems: alignment.alignItems
+          },
+          children: (childrenJson ?? []).map((child, index) => /*#__PURE__*/_jsx(React.Fragment, {
+            children: buildWidget(child, {
+              ...params
+            })
+          }, `stack-${index}`))
+        });
+        break;
+      }
+    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, {
+          style: {
+            position: 'absolute',
+            left,
+            top,
+            right,
+            bottom,
+            width,
+            height
+          },
+          children: childJson ? buildWidget(childJson, {
+            ...params
+          }) : null
+        });
+      }
+    default:
+      node = null;
+  }
+  if (!node) return null;
+  const marginVal = props.margin;
+  if (marginVal !== undefined && marginVal !== null) {
+    const marginInsets = parseInsets(marginVal);
+    node = /*#__PURE__*/_jsx(View, {
+      style: insetsToStyle(marginInsets),
+      children: node
+    });
+  } else if (type !== 'container' && type !== 'padding' && props.padding) {
+    const paddingInsets = parseInsets(props.padding);
+    node = /*#__PURE__*/_jsx(View, {
+      style: insetsToStyle(paddingInsets),
+      children: node
+    });
+  }
+  if (params.allowFlexExpansion && params.screenData.scrollable !== true) {
+    let shouldExpand = false;
+    if (type === 'stack' && props.fit === 'expand') {
+      shouldExpand = true;
+    }
+    if (props.height !== undefined) {
+      const heightVal = parseDimension(props.height);
+      if (heightVal === Number.POSITIVE_INFINITY) {
+        shouldExpand = true;
+      }
+    }
+    if (shouldExpand) {
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1
+        },
+        children: node
+      });
+    }
+  }
+  return node;
+}
+function buildActionPayload(props, json) {
+  const payload = {
+    ...props
+  };
+  const actionPermission = json.actionPermission;
+  if (actionPermission !== undefined) payload.actionPermission = actionPermission;
+  const extraData = json.actionData;
+  if (extraData && typeof extraData === 'object') {
+    Object.assign(payload, extraData);
+  }
+  return payload;
+}
+function getTextStyle(props, colorKey, defaultColor) {
+  const fontFamily = props.fontFamily;
+  const fontSize = Number(props.fontSize ?? 14);
+  const fontWeight = parseFontWeight(props.fontWeight);
+  const fontStyle = props.fontStyle === 'italic' ? 'italic' : 'normal';
+  const color = parseColor(props[colorKey] ?? defaultColor ?? '0xFF000000');
+  const letterSpacing = props.letterSpacing !== undefined ? Number(props.letterSpacing) : undefined;
+  const height = props.height !== undefined ? Number(props.height) : undefined;
+  const textDecoration = parseTextDecoration(props.decoration);
+  return {
+    fontFamily,
+    fontSize,
+    fontWeight,
+    fontStyle,
+    color,
+    letterSpacing,
+    lineHeight: height ? height * fontSize : undefined,
+    textDecorationLine: textDecoration
+  };
+}
+function parseGradient(value) {
+  if (!value || typeof value !== 'object' || value.type !== 'gradient') return undefined;
+  const colors = Array.isArray(value.colors) ? value.colors.map(c => 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(s)) : undefined;
+  return {
+    colors,
+    start,
+    end,
+    stops
+  };
+}
+function alignmentToGradient(value) {
+  switch (value) {
+    case 'topCenter':
+      return {
+        x: 0.5,
+        y: 0
+      };
+    case 'bottomCenter':
+      return {
+        x: 0.5,
+        y: 1
+      };
+    case 'centerLeft':
+      return {
+        x: 0,
+        y: 0.5
+      };
+    case 'centerRight':
+      return {
+        x: 1,
+        y: 0.5
+      };
+    case 'center':
+      return {
+        x: 0.5,
+        y: 0.5
+      };
+    case 'bottomLeft':
+      return {
+        x: 0,
+        y: 1
+      };
+    case 'bottomRight':
+      return {
+        x: 1,
+        y: 1
+      };
+    case 'topRight':
+      return {
+        x: 1,
+        y: 0
+      };
+    case 'topLeft':
+    default:
+      return {
+        x: 0,
+        y: 0
+      };
+  }
+}
+function withOpacity(color, opacity) {
+  if (color.startsWith('rgba')) {
+    return color.replace(/rgba\((\d+),(\d+),(\d+),([\d.]+)\)/, (_m, r, g, b) => `rgba(${r},${g},${b},${opacity})`);
+  }
+  return color;
+}
+function normalizeDimension(value) {
+  if (value === Number.POSITIVE_INFINITY) {
+    return '100%';
+  }
+  return value;
+}
+function GradientText({
+  text,
+  gradient,
+  style
+}) {
+  return /*#__PURE__*/_jsx(MaskedView, {
+    maskElement: /*#__PURE__*/_jsx(Text, {
+      style: [style, {
+        backgroundColor: 'transparent'
+      }],
+      children: text
+    }),
+    children: /*#__PURE__*/_jsx(LinearGradient, {
+      colors: gradient.colors,
+      start: gradient.start,
+      end: gradient.end,
+      locations: gradient.stops,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [style, {
+          opacity: 0
+        }],
+        children: text
+      })
+    })
+  });
+}
+function DynamicInput({
+  initialValue,
+  properties,
+  onChanged
+}) {
+  const [value, setValue] = React.useState(initialValue ?? '');
+  React.useEffect(() => {
+    setValue(initialValue ?? '');
+  }, [initialValue]);
+  const keyboardType = mapKeyboardType(properties.keyboardType);
+  const autoCapitalize = mapAutoCapitalize(properties.autoCapitalize);
+  const secureTextEntry = properties.obscureText === true;
+  const multiline = properties.keyboardType === 'multiline';
+  const maxLength = properties.maxLength ? Number(properties.maxLength) : undefined;
+  const mask = properties.mask ? String(properties.mask) : null;
+  const label = properties.label;
+  const placeholder = properties.placeholder;
+  const labelStyle = getTextStyle(properties.labelStyle ?? {}, 'color', '0xFF9E9E9E');
+  const hintStyle = getTextStyle(properties.hintStyle ?? {}, 'color', '0xFF9E9E9E');
+  const inputStyle = getTextStyle({
+    ...properties,
+    height: null
+  }, 'textColor');
+  const backgroundColor = parseColor(properties.backgroundColor ?? '0xFFF0F0F0');
+  const borderRadius = Number(properties.borderRadius ?? 8);
+  return /*#__PURE__*/_jsxs(View, {
+    children: [label ? /*#__PURE__*/_jsx(Text, {
+      style: labelStyle,
+      children: label
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: {
+        backgroundColor,
+        borderRadius,
+        paddingHorizontal: 16,
+        paddingVertical: 10
+      },
+      children: mask ? /*#__PURE__*/_jsx(MaskInput, {
+        value: value,
+        onChangeText: (_masked, unmasked) => {
+          setValue(unmasked);
+          onChanged(unmasked);
+        },
+        autoFocus: true,
+        autoCapitalize: autoCapitalize,
+        keyboardType: keyboardType,
+        secureTextEntry: secureTextEntry,
+        multiline: multiline,
+        maxLength: maxLength,
+        style: inputStyle,
+        mask: mask.split('').map(char => {
+          if (char === '#') return /\d/;
+          if (char === 'A') return /[a-zA-Z]/;
+          return char;
+        }),
+        placeholder: placeholder,
+        placeholderTextColor: hintStyle.color
+      }) : /*#__PURE__*/_jsx(TextInput, {
+        value: value,
+        onChangeText: text => {
+          setValue(text);
+          onChanged(text);
+        },
+        autoFocus: true,
+        autoCapitalize: autoCapitalize,
+        keyboardType: keyboardType,
+        secureTextEntry: secureTextEntry,
+        multiline: multiline,
+        maxLength: maxLength,
+        style: inputStyle,
+        placeholder: placeholder,
+        placeholderTextColor: hintStyle.color
+      })
+    })]
+  });
+}
+function mapKeyboardType(type) {
+  switch (type) {
+    case 'email':
+      return 'email-address';
+    case 'number':
+      return 'numeric';
+    case 'phone':
+      return 'phone-pad';
+    case 'multiline':
+      return 'default';
+    default:
+      return 'default';
+  }
+}
+function mapAutoCapitalize(type) {
+  switch (type) {
+    case 'words':
+      return 'words';
+    case 'sentences':
+      return 'sentences';
+    case 'characters':
+      return 'characters';
+    default:
+      return 'none';
+  }
+}
+function SelectionList({
+  properties,
+  options,
+  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());
+        } catch {
+          return [initialValue];
+        }
+      }
+      return [initialValue];
+    }
+    return [];
+  });
+  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) {
+          onAction('next');
+        }
+      }
+      return next;
+    });
+  };
+  const layout = properties.layout ?? 'column';
+  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 ?? {} : option.unselectedStyle ?? properties.unselectedStyle ?? {};
+    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)
+    }, `option-${index}`);
+  };
+  if (layout === 'row') {
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        flexWrap: 'wrap'
+      },
+      children: options.map((option, index) => /*#__PURE__*/_jsx(View, {
+        style: {
+          marginRight: spacing,
+          marginBottom: spacing
+        },
+        children: renderItem(option, index)
+      }, `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: options.map((option, index) => /*#__PURE__*/_jsx(View, {
+        style: {
+          width: `${100 / crossAxisCount}%`,
+          paddingRight: (index + 1) % crossAxisCount === 0 ? 0 : spacing,
+          paddingBottom: spacing,
+          aspectRatio
+        },
+        children: renderItem(option, index)
+      }, `grid-option-${index}`))
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    children: options.map((option, index) => /*#__PURE__*/_jsx(View, {
+      style: {
+        marginBottom: spacing
+      },
+      children: renderItem(option, index)
+    }, `column-option-${index}`))
+  });
+}
+function FakeProgressBar({
+  progressColor,
+  backgroundColor,
+  thickness,
+  borderRadius,
+  durationMs,
+  startDelayMs,
+  style,
+  showProgressText,
+  progressTextStyle,
+  progressTextFormat,
+  size,
+  onComplete
+}) {
+  const animation = useMemo(() => new Animated.Value(0), []);
+  const [progressValue, setProgressValue] = React.useState(0);
+  React.useEffect(() => {
+    const listenerId = animation.addListener(({
+      value
+    }) => {
+      setProgressValue(Math.round(value * 100));
+    });
+    const timeout = setTimeout(() => {
+      Animated.timing(animation, {
+        toValue: 1,
+        duration: durationMs,
+        useNativeDriver: false
+      }).start(({
+        finished
+      }) => {
+        if (finished && onComplete) onComplete();
+      });
+    }, startDelayMs);
+    return () => {
+      animation.removeListener(listenerId);
+      clearTimeout(timeout);
+      animation.stopAnimation();
+    };
+  }, [animation, durationMs, startDelayMs, onComplete]);
+  const progressText = progressTextFormat.replace('{{progress}}', progressValue.toString());
+  if (style === 'circular') {
+    const radius = size / 2 - thickness;
+    const circumference = 2 * Math.PI * radius;
+    const strokeDashoffset = animation.interpolate({
+      inputRange: [0, 1],
+      outputRange: [circumference, 0]
+    });
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsxs(Svg, {
+        width: size,
+        height: size,
+        children: [/*#__PURE__*/_jsx(Circle, {
+          cx: size / 2,
+          cy: size / 2,
+          r: radius,
+          stroke: backgroundColor,
+          strokeWidth: thickness,
+          fill: "none"
+        }), /*#__PURE__*/_jsx(AnimatedCircle, {
+          cx: size / 2,
+          cy: size / 2,
+          r: radius,
+          stroke: progressColor,
+          strokeWidth: thickness,
+          strokeDasharray: `${circumference} ${circumference}`,
+          strokeDashoffset: strokeDashoffset,
+          fill: "none",
+          strokeLinecap: "round"
+        })]
+      }), showProgressText && /*#__PURE__*/_jsx(Text, {
+        style: progressTextStyle,
+        children: progressText
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        height: thickness,
+        width: '100%',
+        borderRadius,
+        backgroundColor,
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: {
+          height: '100%',
+          width: animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0%', '100%']
+          }),
+          backgroundColor: progressColor,
+          borderRadius
+        }
+      })
+    }), showProgressText ? /*#__PURE__*/_jsx(Text, {
+      style: [progressTextStyle, {
+        marginTop: 8
+      }],
+      children: progressText
+    }) : null]
+  });
+}
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+function SliderWidget({
+  id,
+  linkedTo,
+  direction,
+  autoPlay,
+  autoPlayDelay,
+  loop,
+  height,
+  physics,
+  children
+}) {
+  const registry = useSliderRegistry();
+  const pagerRef = React.useRef(null);
+  const pageLength = children.length;
+  const [currentPage, setCurrentPage] = React.useState(() => loop && pageLength > 0 ? pageLength * 1000 : 0);
+  const timerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (autoPlay && !linkedTo) {
+      timerRef.current = setInterval(() => {
+        setCurrentPage(prev => {
+          if (loop) return prev + 1;
+          if (prev < children.length - 1) return prev + 1;
+          return 0;
+        });
+      }, autoPlayDelay);
+    }
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [autoPlay, autoPlayDelay, loop, linkedTo, children.length]);
+  React.useEffect(() => {
+    if (pagerRef.current) {
+      pagerRef.current.setPage(currentPage);
+    }
+  }, [currentPage]);
+  React.useEffect(() => {
+    if (registry && id && children.length > 0) {
+      registry.update(id, currentPage % children.length, children.length);
+    }
+  }, [registry, id, currentPage, children.length]);
+  React.useEffect(() => {
+    if (!linkedTo || !registry) return;
+    return registry.getNotifier(linkedTo, value => {
+      if (pagerRef.current) {
+        pagerRef.current.setPage(value);
+      }
+    });
+  }, [linkedTo, registry]);
+  if (pageLength === 0) return null;
+  const pageCount = loop ? pageLength * 1000 : pageLength;
+  return /*#__PURE__*/_jsx(PagerView, {
+    ref: pagerRef,
+    style: {
+      height: height ?? 200
+    },
+    orientation: direction,
+    scrollEnabled: physics !== 'never',
+    initialPage: currentPage,
+    onPageSelected: event => {
+      const page = event.nativeEvent.position;
+      setCurrentPage(page);
+      if (registry && id) {
+        registry.update(id, page % pageLength, pageLength);
+      }
+    },
+    children: Array.from({
+      length: pageCount
+    }).map((_, index) => /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1
+      },
+      children: children[index % pageLength]
+    }, `slider-page-${index}`))
+  });
+}
+function PageViewIndicator({
+  linkedTo,
+  activeColor,
+  inactiveColor,
+  dotSize,
+  spacing,
+  style
+}) {
+  const registry = useSliderRegistry();
+  const [current, setCurrent] = React.useState(0);
+  const indicatorStyle = style ?? 'dots';
+  const count = linkedTo && registry ? registry.getPageCount(linkedTo) : 0;
+  React.useEffect(() => {
+    if (!linkedTo || !registry) return;
+    return registry.getNotifier(linkedTo, setCurrent);
+  }, [linkedTo, registry]);
+  if (!linkedTo || !registry || count <= 1) return null;
+  if (indicatorStyle !== 'dots') {
+    // Only dots are supported currently; fallback to dots.
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      flexDirection: 'row',
+      justifyContent: 'center'
+    },
+    children: Array.from({
+      length: count
+    }).map((_, index) => /*#__PURE__*/_jsx(View, {
+      style: {
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotSize / 2,
+        marginHorizontal: spacing / 2,
+        backgroundColor: index === current ? activeColor : inactiveColor
+      }
+    }, `dot-${index}`))
+  });
+}
+function RadarChart({
+  properties,
+  formData
+}) {
+  const animate = properties.animate !== false;
+  const animationDurationMs = Number(properties.animationDurationMs ?? 800);
+  const scale = useMemo(() => new Animated.Value(animate ? 0 : 1), [animate]);
+  React.useEffect(() => {
+    if (!animate) return;
+    Animated.timing(scale, {
+      toValue: 1,
+      duration: animationDurationMs,
+      useNativeDriver: true
+    }).start();
+  }, [animate, animationDurationMs, scale]);
+  const axes = parseRadarAxes(properties.axes);
+  if (axes.length < 3) {
+    return radarPlaceholder('Radar chart requires at least 3 axes.');
+  }
+  const datasets = parseRadarDatasets(properties.datasets, axes.length, formData);
+  if (datasets.length === 0) {
+    return radarPlaceholder('Add at least one dataset with the same number of values as axes.');
+  }
+  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 padding = parseInsets(properties.padding);
+  const gridLevels = Math.min(Math.max(Number(properties.gridLevels ?? 5), 1), 12);
+  const gridColor = parseColor(properties.gridColor ?? '0xFFE0E0E0');
+  const gridStrokeWidth = Number(properties.gridStrokeWidth ?? 1);
+  const axisColor = parseColor(properties.axisColor ?? '0xFF9E9E9E');
+  const axisStrokeWidth = Number(properties.axisStrokeWidth ?? 1);
+  const axisLabelStyle = getTextStyle(properties.axisLabelStyle ?? {}, 'color', '0xFF424242');
+  const showLegend = properties.showLegend !== false;
+  const legendPosition = (properties.legendPosition ?? 'bottom').toLowerCase();
+  const legendSpacing = Number(properties.legendSpacing ?? 12);
+  const legendStyle = getTextStyle(properties.legendStyle ?? {}, 'color', '0xFF212121');
+  const shape = (properties.shape ?? 'polygon').toLowerCase();
+  const chartSize = Math.min(width, height);
+  const radius = chartSize / 2 - Math.max(padding.left, padding.right, padding.top, padding.bottom);
+  const center = {
+    x: width / 2,
+    y: height / 2
+  };
+  const axisAngle = Math.PI * 2 / axes.length;
+  const gridPolygons = Array.from({
+    length: gridLevels
+  }).map((_, level) => {
+    const ratio = (level + 1) / gridLevels;
+    const points = axes.map((_, index) => {
+      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);
+      return `${x},${y}`;
+    });
+    return {
+      points
+    };
+  });
+  const datasetPolygons = datasets.map(dataset => {
+    const points = dataset.values.map((value, index) => {
+      const axis = normalizedAxes[index];
+      const maxValue = axis?.maxValue ?? 0;
+      const ratio = maxValue > 0 ? value / maxValue : 0;
+      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);
+      return `${x},${y}`;
+    });
+    return {
+      dataset,
+      points
+    };
+  });
+  const legend = /*#__PURE__*/_jsx(View, {
+    style: {
+      flexDirection: 'row',
+      flexWrap: 'wrap'
+    },
+    children: datasets.map((dataset, index) => /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginRight: legendSpacing,
+        marginBottom: 6
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          width: 12,
+          height: 12,
+          borderRadius: 6,
+          backgroundColor: dataset.borderColor,
+          marginRight: 6
+        }
+      }), /*#__PURE__*/_jsx(Text, {
+        style: legendStyle,
+        children: dataset.label
+      })]
+    }, `legend-${index}`))
+  });
+  const chart = /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      width,
+      height,
+      paddingLeft: padding.left,
+      paddingRight: padding.right,
+      paddingTop: padding.top,
+      paddingBottom: padding.bottom,
+      transform: [{
+        scale
+      }]
+    },
+    children: /*#__PURE__*/_jsx(Svg, {
+      width: width,
+      height: height,
+      children: /*#__PURE__*/_jsxs(G, {
+        children: [shape === 'circle' ? gridPolygons.map((_, level) => /*#__PURE__*/_jsx(Circle, {
+          cx: center.x,
+          cy: center.y,
+          r: radius * ((level + 1) / gridLevels),
+          stroke: gridColor,
+          strokeWidth: gridStrokeWidth,
+          fill: "none"
+        }, `grid-circle-${level}`)) : gridPolygons.map((grid, level) => /*#__PURE__*/_jsx(Polygon, {
+          points: grid.points.join(' '),
+          stroke: gridColor,
+          strokeWidth: gridStrokeWidth,
+          fill: "none"
+        }, `grid-${level}`)), axes.map((_axis, index) => {
+          const angle = index * axisAngle - Math.PI / 2;
+          const x = center.x + radius * Math.cos(angle);
+          const y = center.y + radius * Math.sin(angle);
+          return /*#__PURE__*/_jsx(Line, {
+            x1: center.x,
+            y1: center.y,
+            x2: x,
+            y2: y,
+            stroke: axisColor,
+            strokeWidth: axisStrokeWidth
+          }, `axis-${index}`);
+        }), axes.map((axis, index) => {
+          const angle = index * axisAngle - Math.PI / 2;
+          const labelX = center.x + (radius + 12) * Math.cos(angle);
+          const labelY = center.y + (radius + 12) * Math.sin(angle);
+          return /*#__PURE__*/_jsx(SvgText, {
+            x: labelX,
+            y: labelY,
+            fontSize: axisLabelStyle.fontSize ?? 12,
+            fontWeight: axisLabelStyle.fontWeight,
+            fill: axisLabelStyle.color,
+            textAnchor: "middle",
+            children: axis.label
+          }, `label-${index}`);
+        }), datasetPolygons.map((entry, index) => /*#__PURE__*/_jsx(Polygon, {
+          points: entry.points.join(' '),
+          stroke: entry.dataset.borderColor,
+          strokeWidth: entry.dataset.borderWidth,
+          fill: entry.dataset.fillColor ?? 'transparent',
+          strokeDasharray: entry.dataset.borderStyle === 'dotted' || entry.dataset.borderStyle === 'dashed' ? entry.dataset.dashArray ?? '6 4' : undefined
+        }, `dataset-${index}`)), datasetPolygons.map((entry, datasetIndex) => entry.dataset.showPoints ? entry.points.map((point, pointIndex) => {
+          const [x, y] = point.split(',').map(val => Number(val));
+          return /*#__PURE__*/_jsx(Circle, {
+            cx: x,
+            cy: y,
+            r: entry.dataset.pointRadius,
+            fill: entry.dataset.pointColor
+          }, `point-${datasetIndex}-${pointIndex}`);
+        }) : null)]
+      })
+    })
+  });
+  const composed = /*#__PURE__*/_jsxs(View, {
+    style: {
+      backgroundColor
+    },
+    children: [chart, showLegend && legendPosition === 'bottom' ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginTop: 12
+      },
+      children: legend
+    }) : null]
+  });
+  if (!showLegend || legendPosition === 'bottom') return composed;
+  if (legendPosition === 'top') {
+    return /*#__PURE__*/_jsxs(View, {
+      children: [legend, /*#__PURE__*/_jsx(View, {
+        style: {
+          height: 12
+        }
+      }), chart]
+    });
+  }
+  if (legendPosition === 'left') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row'
+      },
+      children: [legend, /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 12
+        }
+      }), chart]
+    });
+  }
+  if (legendPosition === 'right') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row'
+      },
+      children: [chart, /*#__PURE__*/_jsx(View, {
+        style: {
+          width: 12
+        }
+      }), legend]
+    });
+  }
+  return composed;
+}
+export function parseRadarAxes(rawAxes) {
+  if (!Array.isArray(rawAxes)) return [];
+  const axes = [];
+  rawAxes.forEach(axis => {
+    if (!axis || typeof axis !== 'object') return;
+    const label = axis.label ?? '';
+    if (!label) return;
+    const maxValue = resolveNumericValue(axis.maxValue, {}) ?? 100;
+    axes.push({
+      label,
+      maxValue: maxValue > 0 ? maxValue : 100
+    });
+  });
+  return axes;
+}
+export function parseRadarDatasets(raw, axisLength, formData) {
+  if (!Array.isArray(raw) || axisLength === 0) return [];
+  const datasets = [];
+  raw.forEach(dataset => {
+    if (!dataset || typeof dataset !== 'object') return;
+    const valuesRaw = Array.isArray(dataset.data) ? dataset.data : [];
+    const values = [];
+    for (let i = 0; i < axisLength; i += 1) {
+      const rawValue = i < valuesRaw.length ? valuesRaw[i] : null;
+      const resolved = resolveNumericValue(rawValue, formData) ?? 0;
+      values.push(resolved);
+    }
+    const label = dataset.label ?? `Dataset ${datasets.length + 1}`;
+    const borderColor = parseColor(dataset.borderColor ?? '0xFF2196F3');
+    const fillColor = dataset.fillColor ? parseColor(dataset.fillColor) : undefined;
+    const pointColor = parseColor(dataset.pointColor ?? dataset.borderColor ?? '0xFF2196F3');
+    const borderWidth = Number(dataset.borderWidth ?? 2);
+    const pointRadius = Number(dataset.pointRadius ?? 4);
+    const borderStyle = (dataset.borderStyle ?? 'solid').toString().toLowerCase();
+    const normalizedStyle = borderStyle === 'dotted' || borderStyle === 'dashed' ? borderStyle : 'solid';
+    const dashArray = Array.isArray(dataset.dashArray) ? dataset.dashArray.map(val => Number(val)) : undefined;
+    const showPoints = dataset.showPoints !== false;
+    datasets.push({
+      label,
+      values,
+      borderColor,
+      borderWidth,
+      borderStyle: normalizedStyle,
+      dashArray,
+      showPoints,
+      pointRadius,
+      pointColor,
+      fillColor
+    });
+  });
+  return datasets;
+}
+export function normalizeAxisMaximums(axes, datasets) {
+  return axes.map((axis, index) => {
+    let maxValue = axis.maxValue;
+    datasets.forEach(dataset => {
+      const value = dataset.values[index];
+      if (value !== undefined && value > maxValue) maxValue = value;
+    });
+    return {
+      ...axis,
+      maxValue
+    };
+  });
+}
+function radarPlaceholder(message) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      padding: 16,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: 'rgba(255,0,0,0.2)',
+      backgroundColor: 'rgba(255,0,0,0.05)'
+    },
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: 'rgba(255,0,0,0.7)',
+        fontSize: 12,
+        textAlign: 'center'
+      },
+      children: message
+    })
+  });
+}
+//# sourceMappingURL=FlowboardRenderer.js.map