@rocapine/react-native-onboarding 1.25.1 → 1.27.0

package/dist/onboarding-example.js

@@ -112,629 +112,676 @@ exports.onboardingExample = {
                         props: { flex: 1, edges: ["top", "bottom"] },
                         children: [
                             {
-                                id: "root",
-                                type: "YStack",
-                                props: { gap: 24, padding: 24 },
+                                id: "scroll-root",
+                                type: "ScrollView",
+                                props: { flex: 1, showsVerticalScrollIndicator: false },
                                 children: [
                                     {
-                                        id: "hero-lottie",
-                                        type: "Lottie",
-                                        props: {
-                                            source: "https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/adrock/data.json",
-                                            height: 180,
-                                            autoPlay: true,
-                                            loop: true,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-rive",
-                                        type: "Rive",
-                                        props: {
-                                            url: "https://cdn.rive.app/animations/vehicles.riv",
-                                            width: "100%",
-                                            aspectRatio: 16 / 9,
-                                            autoPlay: true,
-                                            fit: "FitWidth",
-                                        },
-                                    },
-                                    {
-                                        id: "hero-image",
-                                        type: "Image",
-                                        props: {
-                                            url: "https://picsum.photos/800/400?grayscale",
-                                            height: 180,
-                                            resizeMode: "cover",
-                                            borderRadius: 16,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-icon",
-                                        type: "Icon",
-                                        props: {
-                                            name: "Star",
-                                            size: 48,
-                                            color: "#007AFF",
-                                            marginVertical: 8,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-video",
-                                        type: "Video",
-                                        props: {
-                                            url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-                                            height: 200,
-                                            borderRadius: 12,
-                                            controls: true,
-                                            muted: true,
-                                            contentFit: "cover",
-                                        },
-                                    },
-                                    {
-                                        id: "kav-input",
-                                        type: "KeyboardAvoidingView",
-                                        props: { keyboardVerticalOffset: 24 },
+                                        id: "root",
+                                        type: "YStack",
+                                        props: { gap: 24, padding: 24 },
                                         children: [
                                             {
-                                                id: "hero-input",
-                                                type: "Input",
+                                                id: "hero-lottie",
+                                                type: "Lottie",
+                                                props: {
+                                                    source: "https://raw.githubusercontent.com/airbnb/lottie-web/master/demo/adrock/data.json",
+                                                    height: 180,
+                                                    autoPlay: true,
+                                                    loop: true,
+                                                },
+                                            },
+                                            {
+                                                id: "hero-rive",
+                                                type: "Rive",
+                                                props: {
+                                                    url: "https://cdn.rive.app/animations/vehicles.riv",
+                                                    width: "100%",
+                                                    aspectRatio: 16 / 9,
+                                                    autoPlay: true,
+                                                    fit: "FitWidth",
+                                                },
+                                            },
+                                            {
+                                                id: "hero-image",
+                                                type: "Image",
+                                                props: {
+                                                    url: "https://picsum.photos/800/400?grayscale",
+                                                    height: 180,
+                                                    resizeMode: "cover",
+                                                    borderRadius: 16,
+                                                },
+                                            },
+                                            {
+                                                id: "hero-icon",
+                                                type: "Icon",
                                                 props: {
-                                                    variableName: "name",
-                                                    placeholder: "Enter your name",
-                                                    keyboardType: "default",
-                                                    returnKeyType: "done",
-                                                    autoCapitalize: "words",
+                                                    name: "Star",
+                                                    size: 48,
+                                                    color: "#007AFF",
+                                                    fill: "#007AFF",
+                                                    fillOpacity: 0.2,
                                                     marginVertical: 8,
                                                 },
                                             },
-                                        ],
-                                    },
-                                    {
-                                        id: "scroll-demo",
-                                        type: "ScrollView",
-                                        props: {
-                                            horizontal: true,
-                                            showsHorizontalScrollIndicator: false,
-                                            contentContainerPadding: 4,
-                                        },
-                                        children: [
                                             {
-                                                id: "scroll-card-1",
-                                                type: "Text",
+                                                id: "hero-video",
+                                                type: "Video",
                                                 props: {
-                                                    content: "Card 1",
-                                                    width: 160,
-                                                    height: 100,
-                                                    marginHorizontal: 6,
-                                                    borderWidth: 1,
+                                                    url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+                                                    height: 200,
                                                     borderRadius: 12,
-                                                    borderColor: "#00000020",
-                                                    paddingVertical: 38,
+                                                    controls: true,
+                                                    muted: true,
+                                                    contentFit: "cover",
+                                                },
+                                            },
+                                            {
+                                                id: "kav-input",
+                                                type: "KeyboardAvoidingView",
+                                                props: { keyboardVerticalOffset: 24 },
+                                                children: [
+                                                    {
+                                                        id: "hero-input",
+                                                        type: "Input",
+                                                        props: {
+                                                            variableName: "name",
+                                                            placeholder: "Enter your name",
+                                                            keyboardType: "default",
+                                                            returnKeyType: "done",
+                                                            autoCapitalize: "words",
+                                                            marginVertical: 8,
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                // Only shown once `name` has a non-empty value — demonstrates
+                                                // the unary `is_not_empty` condition operator.
+                                                id: "name-greeting",
+                                                type: "Text",
+                                                renderWhen: { variable: "name", operator: "is_not_empty" },
+                                                props: {
+                                                    content: "Nice to meet you, {{name}}!",
+                                                    mode: "expression",
+                                                    fontSize: 14,
                                                     textAlign: "center",
-                                                    fontSize: 16,
+                                                    opacity: 0.6,
+                                                    marginVertical: 4,
+                                                },
+                                            },
+                                            {
+                                                id: "scroll-demo",
+                                                type: "ScrollView",
+                                                props: {
+                                                    horizontal: true,
+                                                    showsHorizontalScrollIndicator: false,
+                                                    contentContainerPadding: 4,
+                                                },
+                                                children: [
+                                                    {
+                                                        id: "scroll-card-1",
+                                                        type: "Text",
+                                                        props: {
+                                                            content: "Card 1",
+                                                            width: 160,
+                                                            height: 100,
+                                                            marginHorizontal: 6,
+                                                            borderWidth: 1,
+                                                            borderRadius: 12,
+                                                            borderColor: "#00000020",
+                                                            paddingVertical: 38,
+                                                            textAlign: "center",
+                                                            fontSize: 16,
+                                                            fontWeight: "600",
+                                                        },
+                                                    },
+                                                    {
+                                                        id: "scroll-card-2",
+                                                        type: "Text",
+                                                        props: {
+                                                            content: "Card 2",
+                                                            width: 160,
+                                                            height: 100,
+                                                            marginHorizontal: 6,
+                                                            borderWidth: 1,
+                                                            borderRadius: 12,
+                                                            borderColor: "#00000020",
+                                                            paddingVertical: 38,
+                                                            textAlign: "center",
+                                                            fontSize: 16,
+                                                            fontWeight: "600",
+                                                        },
+                                                    },
+                                                    {
+                                                        id: "scroll-card-3",
+                                                        type: "Text",
+                                                        props: {
+                                                            content: "Card 3",
+                                                            width: 160,
+                                                            height: 100,
+                                                            marginHorizontal: 6,
+                                                            borderWidth: 1,
+                                                            borderRadius: 12,
+                                                            borderColor: "#00000020",
+                                                            paddingVertical: 38,
+                                                            textAlign: "center",
+                                                            fontSize: 16,
+                                                            fontWeight: "600",
+                                                        },
+                                                    },
+                                                    {
+                                                        id: "scroll-card-4",
+                                                        type: "Text",
+                                                        props: {
+                                                            content: "Card 4",
+                                                            width: 160,
+                                                            height: 100,
+                                                            marginHorizontal: 6,
+                                                            borderWidth: 1,
+                                                            borderRadius: 12,
+                                                            borderColor: "#00000020",
+                                                            paddingVertical: 38,
+                                                            textAlign: "center",
+                                                            fontSize: 16,
+                                                            fontWeight: "600",
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                id: "greeting",
+                                                type: "Text",
+                                                props: {
+                                                    content: "Hello {{name}}!",
+                                                    mode: "expression",
+                                                    fontSize: 18,
                                                     fontWeight: "600",
+                                                    textAlign: "center",
+                                                    marginVertical: 4,
                                                 },
                                             },
                                             {
-                                                id: "scroll-card-2",
+                                                id: "headline",
                                                 type: "Text",
                                                 props: {
-                                                    content: "Card 2",
-                                                    width: 160,
-                                                    height: 100,
-                                                    marginHorizontal: 6,
-                                                    borderWidth: 1,
-                                                    borderRadius: 12,
-                                                    borderColor: "#00000020",
-                                                    paddingVertical: 38,
+                                                    content: "Built from the CMS",
+                                                    fontSize: 28,
+                                                    fontWeight: "700",
+                                                    fontFamily: "Inter",
                                                     textAlign: "center",
-                                                    fontSize: 16,
-                                                    fontWeight: "600",
                                                 },
                                             },
                                             {
-                                                id: "scroll-card-3",
+                                                id: "headline-display",
                                                 type: "Text",
                                                 props: {
-                                                    content: "Card 3",
-                                                    width: 160,
-                                                    height: 100,
-                                                    marginHorizontal: 6,
-                                                    borderWidth: 1,
-                                                    borderRadius: 12,
-                                                    borderColor: "#00000020",
-                                                    paddingVertical: 38,
+                                                    content: "Runtime-loaded font",
+                                                    fontSize: 32,
+                                                    fontFamily: "Lobster",
+                                                    fontStyle: "italic",
                                                     textAlign: "center",
-                                                    fontSize: 16,
-                                                    fontWeight: "600",
+                                                    marginVertical: 4,
                                                 },
                                             },
                                             {
-                                                id: "scroll-card-4",
+                                                id: "inherit-implicit",
                                                 type: "Text",
                                                 props: {
-                                                    content: "Card 4",
-                                                    width: 160,
-                                                    height: 100,
-                                                    marginHorizontal: 6,
-                                                    borderWidth: 1,
-                                                    borderRadius: 12,
-                                                    borderColor: "#00000020",
-                                                    paddingVertical: 38,
+                                                    content: "Inherits theme.typography.defaultFontFamily (omitted)",
+                                                    fontSize: 14,
                                                     textAlign: "center",
-                                                    fontSize: 16,
-                                                    fontWeight: "600",
+                                                    opacity: 0.6,
                                                 },
                                             },
-                                        ],
-                                    },
-                                    {
-                                        id: "greeting",
-                                        type: "Text",
-                                        props: {
-                                            content: "Hello {{name}}!",
-                                            mode: "expression",
-                                            fontSize: 18,
-                                            fontWeight: "600",
-                                            textAlign: "center",
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "headline",
-                                        type: "Text",
-                                        props: {
-                                            content: "Built from the CMS",
-                                            fontSize: 28,
-                                            fontWeight: "700",
-                                            fontFamily: "Inter",
-                                            textAlign: "center",
-                                        },
-                                    },
-                                    {
-                                        id: "headline-display",
-                                        type: "Text",
-                                        props: {
-                                            content: "Runtime-loaded font",
-                                            fontSize: 32,
-                                            fontFamily: "Lobster",
-                                            fontStyle: "italic",
-                                            textAlign: "center",
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "inherit-implicit",
-                                        type: "Text",
-                                        props: {
-                                            content: "Inherits theme.typography.defaultFontFamily (omitted)",
-                                            fontSize: 14,
-                                            textAlign: "center",
-                                            opacity: 0.6,
-                                        },
-                                    },
-                                    {
-                                        id: "inherit-explicit",
-                                        type: "Text",
-                                        props: {
-                                            content: "Inherits theme.typography.defaultFontFamily (explicit \"inherit\")",
-                                            fontFamily: "inherit",
-                                            fontSize: 14,
-                                            textAlign: "center",
-                                            opacity: 0.6,
-                                        },
-                                    },
-                                    {
-                                        id: "subheadline",
-                                        type: "Text",
-                                        props: {
-                                            content: "This screen is composed entirely from a JSON payload — no custom renderer needed.",
-                                            fontSize: 15,
-                                            textAlign: "center",
-                                            lineHeight: 22,
-                                            opacity: 0.6,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-radio",
-                                        type: "RadioGroup",
-                                        props: {
-                                            variableName: "plan",
-                                            defaultValue: "monthly",
-                                            gap: 8,
-                                            marginVertical: 8,
-                                            items: [
-                                                { label: "Monthly", value: "monthly" },
-                                                { label: "Yearly", value: "yearly" },
-                                                { label: "Lifetime", value: "lifetime" },
-                                            ],
-                                        },
-                                    },
-                                    {
-                                        id: "plan-display",
-                                        type: "Text",
-                                        props: {
-                                            content: "Selected: {{plan}}",
-                                            mode: "expression",
-                                            fontSize: 14,
-                                            textAlign: "center",
-                                            opacity: 0.6,
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "lifetime-badge",
-                                        renderWhen: {
-                                            variable: "plan",
-                                            operator: "eq",
-                                            value: "lifetime",
-                                        },
-                                        type: "Text",
-                                        props: {
-                                            content: "🎉 Best value — lifetime access!",
-                                            fontSize: 14,
-                                            fontWeight: "600",
-                                            textAlign: "center",
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-checkbox",
-                                        type: "CheckboxGroup",
-                                        props: {
-                                            variableName: "goals",
-                                            defaultValues: ["health", "fitness"],
-                                            gap: 8,
-                                            marginVertical: 8,
-                                            items: [
-                                                { label: "Improve health", value: "health" },
-                                                { label: "Build fitness", value: "fitness" },
-                                                { label: "Lose weight", value: "weight" },
-                                                { label: "Gain muscle", value: "muscle" },
-                                            ],
-                                        },
-                                    },
-                                    {
-                                        id: "goals-display",
-                                        type: "Text",
-                                        props: {
-                                            content: "Goals: {{goals}}",
-                                            mode: "expression",
-                                            fontSize: 14,
-                                            textAlign: "center",
-                                            opacity: 0.6,
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-date-picker",
-                                        type: "DatePicker",
-                                        props: {
-                                            variableName: "birthdate",
-                                            defaultValue: "1990-01-01T00:00:00.000Z",
-                                            mode: "date",
-                                            display: "spinner",
-                                            maximumDate: new Date().toISOString(), // static at module load time — suitable for demo; use a runtime value in production
-                                            marginVertical: 8,
-                                        },
-                                    },
-                                    {
-                                        id: "birthdate-display",
-                                        type: "Text",
-                                        props: {
-                                            content: "Birth date: {{birthdate}}",
-                                            mode: "expression",
-                                            fontSize: 14,
-                                            textAlign: "center",
-                                            opacity: 0.6,
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "hero-carousel",
-                                        type: "Carousel",
-                                        props: {
-                                            carouselType: "parallax",
-                                            autoPlay: false,
-                                            loop: true,
-                                            showDots: true,
-                                            height: 220,
-                                            borderRadius: 16,
-                                            marginVertical: 8,
-                                            defaultIndex: 0,
-                                            variableName: "carouselPage",
-                                        },
-                                        children: [
                                             {
-                                                id: "carousel-slide-1",
-                                                type: "Image",
+                                                id: "inherit-explicit",
+                                                type: "Text",
                                                 props: {
-                                                    url: "https://picsum.photos/400/220?random=10",
-                                                    height: 220,
-                                                    resizeMode: "cover",
+                                                    content: "Inherits theme.typography.defaultFontFamily (explicit \"inherit\")",
+                                                    fontFamily: "inherit",
+                                                    fontSize: 14,
+                                                    textAlign: "center",
+                                                    opacity: 0.6,
                                                 },
                                             },
                                             {
-                                                id: "carousel-slide-2",
-                                                type: "Image",
+                                                id: "subheadline",
+                                                type: "Text",
                                                 props: {
-                                                    url: "https://picsum.photos/400/220?random=11",
-                                                    height: 220,
-                                                    resizeMode: "cover",
+                                                    content: "This screen is composed entirely from a JSON payload — no custom renderer needed.",
+                                                    fontSize: 15,
+                                                    textAlign: "center",
+                                                    lineHeight: 22,
+                                                    opacity: 0.6,
                                                 },
                                             },
                                             {
-                                                id: "carousel-slide-3",
-                                                type: "Image",
+                                                id: "hero-radio",
+                                                type: "RadioGroup",
                                                 props: {
-                                                    url: "https://picsum.photos/400/220?random=12",
-                                                    height: 220,
-                                                    resizeMode: "cover",
+                                                    variableName: "plan",
+                                                    defaultValue: "monthly",
+                                                    gap: 8,
+                                                    marginVertical: 8,
+                                                    items: [
+                                                        { label: "Monthly", value: "monthly" },
+                                                        { label: "Yearly", value: "yearly" },
+                                                        { label: "Lifetime", value: "lifetime" },
+                                                    ],
                                                 },
                                             },
-                                        ],
-                                    },
-                                    {
-                                        id: "carousel-page-label",
-                                        type: "Text",
-                                        props: {
-                                            content: "Carousel page: {{carouselPage}}",
-                                            mode: "expression",
-                                            fontSize: 14,
-                                            textAlign: "center",
-                                            opacity: 0.6,
-                                            marginVertical: 4,
-                                        },
-                                    },
-                                    {
-                                        id: "carousel-controls",
-                                        type: "XStack",
-                                        props: { gap: 8, marginVertical: 4 },
-                                        children: [
                                             {
-                                                id: "carousel-go-prev",
-                                                type: "Button",
+                                                id: "plan-display",
+                                                type: "Text",
                                                 props: {
-                                                    label: "Prev",
-                                                    variant: "outlined",
-                                                    flex: 1,
-                                                    actions: [
-                                                        {
-                                                            type: "setVariable",
-                                                            name: "carouselPage",
-                                                            value: "{{carouselPage}} - 1",
-                                                            valueMode: "expression",
-                                                        },
+                                                    content: "Selected: {{plan}}",
+                                                    mode: "expression",
+                                                    fontSize: 14,
+                                                    textAlign: "center",
+                                                    opacity: 0.6,
+                                                    marginVertical: 4,
+                                                },
+                                            },
+                                            {
+                                                id: "lifetime-badge",
+                                                renderWhen: {
+                                                    variable: "plan",
+                                                    operator: "eq",
+                                                    value: "lifetime",
+                                                },
+                                                type: "Text",
+                                                props: {
+                                                    content: "🎉 Best value — lifetime access!",
+                                                    fontSize: 14,
+                                                    fontWeight: "600",
+                                                    textAlign: "center",
+                                                    marginVertical: 4,
+                                                },
+                                            },
+                                            {
+                                                id: "hero-checkbox",
+                                                type: "CheckboxGroup",
+                                                props: {
+                                                    variableName: "goals",
+                                                    defaultValues: ["health", "fitness"],
+                                                    gap: 8,
+                                                    marginVertical: 8,
+                                                    items: [
+                                                        { label: "Improve health", value: "health" },
+                                                        { label: "Build fitness", value: "fitness" },
+                                                        { label: "Lose weight", value: "weight" },
+                                                        { label: "Gain muscle", value: "muscle" },
                                                     ],
                                                 },
                                             },
                                             {
-                                                id: "carousel-go-next",
-                                                type: "Button",
+                                                id: "goals-display",
+                                                type: "Text",
                                                 props: {
-                                                    label: "Next",
-                                                    variant: "outlined",
-                                                    flex: 1,
-                                                    actions: [
-                                                        {
-                                                            type: "setVariable",
-                                                            name: "carouselPage",
-                                                            value: "{{carouselPage}} + 1",
-                                                            valueMode: "expression",
+                                                    content: "Goals: {{goals}}",
+                                                    mode: "expression",
+                                                    fontSize: 14,
+                                                    textAlign: "center",
+                                                    opacity: 0.6,
+                                                    marginVertical: 4,
+                                                },
+                                            },
+                                            {
+                                                id: "hero-date-picker",
+                                                type: "DatePicker",
+                                                props: {
+                                                    variableName: "birthdate",
+                                                    defaultValue: "1990-01-01T00:00:00.000Z",
+                                                    mode: "date",
+                                                    display: "spinner",
+                                                    maximumDate: new Date().toISOString(), // static at module load time — suitable for demo; use a runtime value in production
+                                                    marginVertical: 8,
+                                                },
+                                            },
+                                            {
+                                                id: "birthdate-display",
+                                                type: "Text",
+                                                props: {
+                                                    content: "Birth date: {{birthdate}}",
+                                                    mode: "expression",
+                                                    fontSize: 14,
+                                                    textAlign: "center",
+                                                    opacity: 0.6,
+                                                    marginVertical: 4,
+                                                },
+                                            },
+                                            {
+                                                id: "hero-weight-wheel",
+                                                type: "WheelPicker",
+                                                props: {
+                                                    variableName: "weight",
+                                                    defaultValue: "70",
+                                                    range: { min: 40, max: 200, step: 1, unit: "kg" },
+                                                    height: 180,
+                                                    marginVertical: 8,
+                                                },
+                                            },
+                                            {
+                                                id: "weight-display",
+                                                type: "Text",
+                                                props: {
+                                                    content: "Weight: {{weight}}",
+                                                    mode: "expression",
+                                                    fontSize: 14,
+                                                    textAlign: "center",
+                                                    opacity: 0.6,
+                                                    marginVertical: 4,
+                                                },
+                                            },
+                                            {
+                                                id: "hero-carousel",
+                                                type: "Carousel",
+                                                props: {
+                                                    carouselType: "parallax",
+                                                    autoPlay: false,
+                                                    loop: true,
+                                                    showDots: true,
+                                                    height: 220,
+                                                    borderRadius: 16,
+                                                    marginVertical: 8,
+                                                    defaultIndex: 0,
+                                                    variableName: "carouselPage",
+                                                },
+                                                children: [
+                                                    {
+                                                        id: "carousel-slide-1",
+                                                        type: "Image",
+                                                        props: {
+                                                            url: "https://picsum.photos/400/220?random=10",
+                                                            height: 220,
+                                                            resizeMode: "cover",
                                                         },
-                                                    ],
+                                                    },
+                                                    {
+                                                        id: "carousel-slide-2",
+                                                        type: "Image",
+                                                        props: {
+                                                            url: "https://picsum.photos/400/220?random=11",
+                                                            height: 220,
+                                                            resizeMode: "cover",
+                                                        },
+                                                    },
+                                                    {
+                                                        id: "carousel-slide-3",
+                                                        type: "Image",
+                                                        props: {
+                                                            url: "https://picsum.photos/400/220?random=12",
+                                                            height: 220,
+                                                            resizeMode: "cover",
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                id: "carousel-page-label",
+                                                type: "Text",
+                                                props: {
+                                                    content: "Carousel page: {{carouselPage}}",
+                                                    mode: "expression",
+                                                    fontSize: 14,
+                                                    textAlign: "center",
+                                                    opacity: 0.6,
+                                                    marginVertical: 4,
                                                 },
                                             },
-                                        ],
-                                    },
-                                    {
-                                        id: "zstack-demo",
-                                        type: "ZStack",
-                                        props: {
-                                            height: 200,
-                                            borderRadius: 16,
-                                            overflow: "hidden",
-                                            marginVertical: 8,
-                                        },
-                                        children: [
                                             {
-                                                id: "zstack-bg",
-                                                type: "Image",
+                                                id: "carousel-controls",
+                                                type: "XStack",
+                                                props: { gap: 8, marginVertical: 4 },
+                                                children: [
+                                                    {
+                                                        id: "carousel-go-prev",
+                                                        type: "Button",
+                                                        props: {
+                                                            label: "Prev",
+                                                            variant: "outlined",
+                                                            flex: 1,
+                                                            actions: [
+                                                                {
+                                                                    type: "setVariable",
+                                                                    name: "carouselPage",
+                                                                    value: "{{carouselPage}} - 1",
+                                                                    valueMode: "expression",
+                                                                },
+                                                            ],
+                                                        },
+                                                    },
+                                                    {
+                                                        id: "carousel-go-next",
+                                                        type: "Button",
+                                                        props: {
+                                                            label: "Next",
+                                                            variant: "outlined",
+                                                            flex: 1,
+                                                            actions: [
+                                                                {
+                                                                    type: "setVariable",
+                                                                    name: "carouselPage",
+                                                                    value: "{{carouselPage}} + 1",
+                                                                    valueMode: "expression",
+                                                                },
+                                                            ],
+                                                        },
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                id: "zstack-demo",
+                                                type: "ZStack",
                                                 props: {
-                                                    url: "https://picsum.photos/800/400?random=20",
                                                     height: 200,
-                                                    resizeMode: "cover",
+                                                    borderRadius: 16,
+                                                    overflow: "hidden",
+                                                    marginVertical: 8,
+                                                },
+                                                children: [
+                                                    {
+                                                        id: "zstack-bg",
+                                                        type: "Image",
+                                                        props: {
+                                                            url: "https://picsum.photos/800/400?random=20",
+                                                            height: 200,
+                                                            resizeMode: "cover",
+                                                        },
+                                                    },
+                                                    {
+                                                        id: "zstack-overlay",
+                                                        type: "YStack",
+                                                        props: {
+                                                            flex: 1,
+                                                            backgroundColor: "rgba(0,0,0,0.45)",
+                                                            padding: 20,
+                                                            justifyContent: "flex-end",
+                                                        },
+                                                        children: [
+                                                            {
+                                                                id: "zstack-label",
+                                                                type: "Text",
+                                                                props: {
+                                                                    content: "ZStack: layered elements",
+                                                                    fontSize: 18,
+                                                                    fontWeight: "700",
+                                                                    color: "#fff",
+                                                                },
+                                                            },
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                            {
+                                                id: "hero-button",
+                                                type: "Button",
+                                                props: {
+                                                    label: "Get Started",
+                                                    variant: "filled",
+                                                    marginVertical: 8,
+                                                    actions: [
+                                                        { type: "custom", function: "trackCta", variables: ["name", "plan", "goals"] },
+                                                        "continue",
+                                                    ],
                                                 },
                                             },
                                             {
-                                                id: "zstack-overlay",
+                                                id: "gradient-card",
                                                 type: "YStack",
                                                 props: {
-                                                    flex: 1,
-                                                    backgroundColor: "rgba(0,0,0,0.45)",
                                                     padding: 20,
-                                                    justifyContent: "flex-end",
+                                                    gap: 8,
+                                                    borderRadius: 16,
+                                                    overflow: "hidden",
+                                                    marginVertical: 4,
+                                                    backgroundGradient: {
+                                                        type: "linear",
+                                                        from: "topLeft",
+                                                        to: "bottomRight",
+                                                        stops: [
+                                                            { color: "#6C63FF" },
+                                                            { color: "#FF6584" },
+                                                        ],
+                                                    },
                                                 },
                                                 children: [
                                                     {
-                                                        id: "zstack-label",
+                                                        id: "gradient-card-title",
                                                         type: "Text",
-                                                        props: {
-                                                            content: "ZStack: layered elements",
-                                                            fontSize: 18,
-                                                            fontWeight: "700",
-                                                            color: "#fff",
-                                                        },
+                                                        props: { content: "Linear gradient", fontSize: 15, fontWeight: "700", color: "#fff" },
+                                                    },
+                                                    {
+                                                        id: "gradient-card-body",
+                                                        type: "Text",
+                                                        props: { content: "topLeft → bottomRight", fontSize: 12, color: "#fff", opacity: 0.85 },
                                                     },
                                                 ],
                                             },
-                                        ],
-                                    },
-                                    {
-                                        id: "hero-button",
-                                        type: "Button",
-                                        props: {
-                                            label: "Get Started",
-                                            variant: "filled",
-                                            marginVertical: 8,
-                                            actions: [
-                                                { type: "custom", function: "trackCta", variables: ["name", "plan", "goals"] },
-                                                "continue",
-                                            ],
-                                        },
-                                    },
-                                    {
-                                        id: "gradient-card",
-                                        type: "YStack",
-                                        props: {
-                                            padding: 20,
-                                            gap: 8,
-                                            borderRadius: 16,
-                                            overflow: "hidden",
-                                            marginVertical: 4,
-                                            backgroundGradient: {
-                                                type: "linear",
-                                                from: "topLeft",
-                                                to: "bottomRight",
-                                                stops: [
-                                                    { color: "#6C63FF" },
-                                                    { color: "#FF6584" },
-                                                ],
+                                            {
+                                                id: "gradient-button",
+                                                type: "Button",
+                                                props: {
+                                                    label: "Gradient Button",
+                                                    variant: "filled",
+                                                    marginVertical: 4,
+                                                    backgroundGradient: {
+                                                        type: "linear",
+                                                        from: "left",
+                                                        to: "right",
+                                                        stops: [
+                                                            { color: "#FF6584", position: 0 },
+                                                            { color: "#6C63FF", position: 1 },
+                                                        ],
+                                                    },
+                                                },
                                             },
-                                        },
-                                        children: [
                                             {
-                                                id: "gradient-card-title",
+                                                id: "states-heading",
                                                 type: "Text",
-                                                props: { content: "Linear gradient", fontSize: 15, fontWeight: "700", color: "#fff" },
+                                                props: {
+                                                    content: "Button states & shadow",
+                                                    fontSize: 13,
+                                                    fontWeight: "700",
+                                                    marginVertical: 4,
+                                                    opacity: 0.5,
+                                                },
                                             },
                                             {
-                                                id: "gradient-card-body",
-                                                type: "Text",
-                                                props: { content: "topLeft → bottomRight", fontSize: 12, color: "#fff", opacity: 0.85 },
+                                                id: "btn-shadow",
+                                                type: "Button",
+                                                props: {
+                                                    label: "Elevated (shadow)",
+                                                    variant: "filled",
+                                                    marginVertical: 4,
+                                                    backgroundColor: "#6C63FF",
+                                                    shadowColor: "#6C63FF",
+                                                    shadowOffset: { width: 0, height: 6 },
+                                                    shadowOpacity: 0.4,
+                                                    shadowRadius: 12,
+                                                    elevation: 8,
+                                                },
                                             },
-                                        ],
-                                    },
-                                    {
-                                        id: "gradient-button",
-                                        type: "Button",
-                                        props: {
-                                            label: "Gradient Button",
-                                            variant: "filled",
-                                            marginVertical: 4,
-                                            backgroundGradient: {
-                                                type: "linear",
-                                                from: "left",
-                                                to: "right",
-                                                stops: [
-                                                    { color: "#FF6584", position: 0 },
-                                                    { color: "#6C63FF", position: 1 },
-                                                ],
+                                            {
+                                                id: "btn-pressed",
+                                                type: "Button",
+                                                props: {
+                                                    label: "Press me (hold)",
+                                                    variant: "filled",
+                                                    marginVertical: 4,
+                                                    backgroundColor: "#10b981",
+                                                    transitionDurationMs: 300,
+                                                    pressedStyle: {
+                                                        opacity: 0.6,
+                                                        backgroundColor: "#065f46",
+                                                    },
+                                                },
                                             },
-                                        },
-                                    },
-                                    {
-                                        id: "states-heading",
-                                        type: "Text",
-                                        props: {
-                                            content: "Button states & shadow",
-                                            fontSize: 13,
-                                            fontWeight: "700",
-                                            marginVertical: 4,
-                                            opacity: 0.5,
-                                        },
-                                    },
-                                    {
-                                        id: "btn-shadow",
-                                        type: "Button",
-                                        props: {
-                                            label: "Elevated (shadow)",
-                                            variant: "filled",
-                                            marginVertical: 4,
-                                            backgroundColor: "#6C63FF",
-                                            shadowColor: "#6C63FF",
-                                            shadowOffset: { width: 0, height: 6 },
-                                            shadowOpacity: 0.4,
-                                            shadowRadius: 12,
-                                            elevation: 8,
-                                        },
-                                    },
-                                    {
-                                        id: "btn-pressed",
-                                        type: "Button",
-                                        props: {
-                                            label: "Press me (hold)",
-                                            variant: "filled",
-                                            marginVertical: 4,
-                                            backgroundColor: "#10b981",
-                                            transitionDurationMs: 300,
-                                            pressedStyle: {
-                                                opacity: 0.6,
-                                                backgroundColor: "#065f46",
-                                            },
-                                        },
-                                    },
-                                    {
-                                        id: "btn-disabled",
-                                        type: "Button",
-                                        props: {
-                                            label: "Always disabled",
-                                            variant: "filled",
-                                            marginVertical: 4,
-                                            actions: ["continue"],
-                                            disabledWhen: {
-                                                variable: "never_enabled",
-                                                operator: "neq",
-                                                value: "yes",
-                                            },
-                                            disabledStyle: {
-                                                backgroundColor: "#fee2e2",
-                                                color: "#b91c1c",
-                                                borderRadius: 12,
-                                            },
-                                        },
-                                    },
-                                    {
-                                        id: "consent-toggle",
-                                        type: "Button",
-                                        props: {
-                                            label: "I agree to the terms",
-                                            variant: "outlined",
-                                            marginVertical: 8,
-                                            actions: [
-                                                { type: "setVariable", name: "consent_given", value: "yes", label: "Agreed" },
-                                            ],
-                                        },
-                                    },
-                                    {
-                                        id: "gated-continue",
-                                        type: "Button",
-                                        props: {
-                                            label: "Continue (gated)",
-                                            variant: "filled",
-                                            marginVertical: 4,
-                                            actions: ["continue"],
-                                            disabledWhen: {
-                                                variable: "consent_given",
-                                                operator: "neq",
-                                                value: "yes",
-                                            },
-                                            transitionDurationMs: 180,
-                                            shadowColor: "#000",
-                                            shadowOffset: { width: 0, height: 4 },
-                                            shadowOpacity: 0.18,
-                                            shadowRadius: 8,
-                                            elevation: 4,
-                                            pressedStyle: {
-                                                opacity: 0.7,
-                                                backgroundColor: "#4f46e5",
-                                            },
-                                            disabledStyle: {
-                                                backgroundColor: "#d1d5db",
-                                                color: "#6b7280",
-                                                shadowOpacity: 0,
-                                                elevation: 0,
-                                            },
-                                        },
+                                            {
+                                                id: "btn-disabled",
+                                                type: "Button",
+                                                props: {
+                                                    label: "Always disabled",
+                                                    variant: "filled",
+                                                    marginVertical: 4,
+                                                    actions: ["continue"],
+                                                    disabledWhen: {
+                                                        variable: "never_enabled",
+                                                        operator: "neq",
+                                                        value: "yes",
+                                                    },
+                                                    disabledStyle: {
+                                                        backgroundColor: "#fee2e2",
+                                                        color: "#b91c1c",
+                                                        borderRadius: 12,
+                                                    },
+                                                },
+                                            },
+                                            {
+                                                id: "consent-toggle",
+                                                type: "Button",
+                                                props: {
+                                                    label: "I agree to the terms",
+                                                    variant: "outlined",
+                                                    marginVertical: 8,
+                                                    actions: [
+                                                        { type: "setVariable", name: "consent_given", value: "yes", label: "Agreed" },
+                                                    ],
+                                                },
+                                            },
+                                            {
+                                                id: "gated-continue",
+                                                type: "Button",
+                                                props: {
+                                                    label: "Continue (gated)",
+                                                    variant: "filled",
+                                                    marginVertical: 4,
+                                                    actions: ["continue"],
+                                                    disabledWhen: {
+                                                        variable: "consent_given",
+                                                        operator: "neq",
+                                                        value: "yes",
+                                                    },
+                                                    transitionDurationMs: 180,
+                                                    shadowColor: "#000",
+                                                    shadowOffset: { width: 0, height: 4 },
+                                                    shadowOpacity: 0.18,
+                                                    shadowRadius: 8,
+                                                    elevation: 4,
+                                                    pressedStyle: {
+                                                        opacity: 0.7,
+                                                        backgroundColor: "#4f46e5",
+                                                    },
+                                                    disabledStyle: {
+                                                        backgroundColor: "#d1d5db",
+                                                        color: "#6b7280",
+                                                        shadowOpacity: 0,
+                                                        elevation: 0,
+                                                    },
+                                                },
+                                            },
+                                        ],
                                     },
                                 ],
                             },