@uipath/apollo-wind 0.9.0 → 0.10.0-pr257.2a4b17b

package/dist/examples/flow-start-example.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
 import { Blocks, Bot, FolderKanban, GitBranch, LayoutGrid, List, MoreHorizontal } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { Badge } from "../components/ui/badge.js";
 import { Button } from "../components/ui/button.js";
 import { ButtonGroup } from "../components/ui/button-group.js";
@@ -10,42 +11,93 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 import { Skeleton } from "../components/ui/skeleton.js";
 import { Column, Grid, Row } from "../components/ui/layout/index.js";
 import { cn } from "../lib/index.js";
-function ProcessOptionCard({ option, isSelected, onSelect }) {
-    return /*#__PURE__*/ jsxs(Card, {
-        className: cn('group relative cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-md', isSelected && 'border-primary ring-2 ring-primary/20'),
-        onClick: onSelect,
-        children: [
-            option.badge && /*#__PURE__*/ jsx(Badge, {
-                variant: option.badgeVariant,
-                className: "absolute -top-2 right-4 text-[10px] px-2 py-0.5",
-                children: option.badge
-            }),
-            /*#__PURE__*/ jsx(CardHeader, {
-                className: "pb-3",
-                children: /*#__PURE__*/ jsx(Row, {
-                    gap: 3,
-                    align: "center",
-                    children: /*#__PURE__*/ jsx("div", {
-                        className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary",
-                        children: option.icon
-                    })
+function ProcessOptionCard(t0) {
+    const $ = c(20);
+    const { option, isSelected, onSelect } = t0;
+    const t1 = isSelected && "border-primary ring-2 ring-primary/20";
+    let t2;
+    if ($[0] !== t1) {
+        t2 = cn("group relative cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-md", t1);
+        $[0] = t1;
+        $[1] = t2;
+    } else t2 = $[1];
+    let t3;
+    if ($[2] !== option.badge || $[3] !== option.badgeVariant) {
+        t3 = option.badge && /*#__PURE__*/ jsx(Badge, {
+            variant: option.badgeVariant,
+            className: "absolute -top-2 right-4 text-[10px] px-2 py-0.5",
+            children: option.badge
+        });
+        $[2] = option.badge;
+        $[3] = option.badgeVariant;
+        $[4] = t3;
+    } else t3 = $[4];
+    let t4;
+    if ($[5] !== option.icon) {
+        t4 = /*#__PURE__*/ jsx(CardHeader, {
+            className: "pb-3",
+            children: /*#__PURE__*/ jsx(Row, {
+                gap: 3,
+                align: "center",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary",
+                    children: option.icon
                 })
-            }),
-            /*#__PURE__*/ jsxs(CardContent, {
-                className: "pt-0",
-                children: [
-                    /*#__PURE__*/ jsx(CardTitle, {
-                        className: "text-base mb-2",
-                        children: option.title
-                    }),
-                    /*#__PURE__*/ jsx(CardDescription, {
-                        className: "text-sm leading-relaxed",
-                        children: option.description
-                    })
-                ]
             })
-        ]
-    });
+        });
+        $[5] = option.icon;
+        $[6] = t4;
+    } else t4 = $[6];
+    let t5;
+    if ($[7] !== option.title) {
+        t5 = /*#__PURE__*/ jsx(CardTitle, {
+            className: "text-base mb-2",
+            children: option.title
+        });
+        $[7] = option.title;
+        $[8] = t5;
+    } else t5 = $[8];
+    let t6;
+    if ($[9] !== option.description) {
+        t6 = /*#__PURE__*/ jsx(CardDescription, {
+            className: "text-sm leading-relaxed",
+            children: option.description
+        });
+        $[9] = option.description;
+        $[10] = t6;
+    } else t6 = $[10];
+    let t7;
+    if ($[11] !== t5 || $[12] !== t6) {
+        t7 = /*#__PURE__*/ jsxs(CardContent, {
+            className: "pt-0",
+            children: [
+                t5,
+                t6
+            ]
+        });
+        $[11] = t5;
+        $[12] = t6;
+        $[13] = t7;
+    } else t7 = $[13];
+    let t8;
+    if ($[14] !== onSelect || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t7) {
+        t8 = /*#__PURE__*/ jsxs(Card, {
+            className: t2,
+            onClick: onSelect,
+            children: [
+                t3,
+                t4,
+                t7
+            ]
+        });
+        $[14] = onSelect;
+        $[15] = t2;
+        $[16] = t3;
+        $[17] = t4;
+        $[18] = t7;
+        $[19] = t8;
+    } else t8 = $[19];
+    return t8;
 }
 function getTypeIcon(type) {
     switch(type){
@@ -91,96 +143,187 @@ function getStatusVariant(status) {
             return 'secondary';
     }
 }
-function RecentProjectCard({ project, onSelect }) {
-    return /*#__PURE__*/ jsx(Card, {
-        className: "group cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-sm",
-        onClick: onSelect,
-        children: /*#__PURE__*/ jsx(CardContent, {
+function RecentProjectCard(t0) {
+    const $ = c(22);
+    const { project, onSelect } = t0;
+    let t1;
+    if ($[0] !== project.type) {
+        t1 = getTypeIcon(project.type);
+        $[0] = project.type;
+        $[1] = t1;
+    } else t1 = $[1];
+    let t2;
+    if ($[2] !== t1) {
+        t2 = /*#__PURE__*/ jsx("div", {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
+            children: t1
+        });
+        $[2] = t1;
+        $[3] = t2;
+    } else t2 = $[3];
+    let t3;
+    if ($[4] !== project.name) {
+        t3 = /*#__PURE__*/ jsx("span", {
+            className: "truncate font-medium text-sm",
+            children: project.name
+        });
+        $[4] = project.name;
+        $[5] = t3;
+    } else t3 = $[5];
+    let t4;
+    if ($[6] !== project.status) {
+        t4 = project.status && /*#__PURE__*/ jsx(Badge, {
+            variant: getStatusVariant(project.status),
+            className: "shrink-0 text-[10px]",
+            children: project.status
+        });
+        $[6] = project.status;
+        $[7] = t4;
+    } else t4 = $[7];
+    let t5;
+    if ($[8] !== t3 || $[9] !== t4) {
+        t5 = /*#__PURE__*/ jsxs(Row, {
+            justify: "between",
+            align: "center",
+            gap: 2,
+            children: [
+                t3,
+                t4
+            ]
+        });
+        $[8] = t3;
+        $[9] = t4;
+        $[10] = t5;
+    } else t5 = $[10];
+    let t6;
+    if ($[11] !== project.lastModified) {
+        t6 = /*#__PURE__*/ jsx("span", {
+            className: "text-xs text-muted-foreground",
+            children: project.lastModified
+        });
+        $[11] = project.lastModified;
+        $[12] = t6;
+    } else t6 = $[12];
+    let t7;
+    if ($[13] !== t5 || $[14] !== t6) {
+        t7 = /*#__PURE__*/ jsxs(Column, {
+            gap: 1,
+            flex: 1,
+            className: "min-w-0",
+            children: [
+                t5,
+                t6
+            ]
+        });
+        $[13] = t5;
+        $[14] = t6;
+        $[15] = t7;
+    } else t7 = $[15];
+    let t8;
+    if ($[16] !== t2 || $[17] !== t7) {
+        t8 = /*#__PURE__*/ jsx(CardContent, {
             className: "p-4",
             children: /*#__PURE__*/ jsxs(Row, {
                 gap: 3,
                 align: "start",
                 children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground",
-                        children: getTypeIcon(project.type)
-                    }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        gap: 1,
-                        flex: 1,
-                        className: "min-w-0",
-                        children: [
-                            /*#__PURE__*/ jsxs(Row, {
-                                justify: "between",
-                                align: "center",
-                                gap: 2,
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: "truncate font-medium text-sm",
-                                        children: project.name
-                                    }),
-                                    project.status && /*#__PURE__*/ jsx(Badge, {
-                                        variant: getStatusVariant(project.status),
-                                        className: "shrink-0 text-[10px]",
-                                        children: project.status
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: "text-xs text-muted-foreground",
-                                children: project.lastModified
-                            })
-                        ]
-                    })
+                    t2,
+                    t7
                 ]
             })
-        })
-    });
+        });
+        $[16] = t2;
+        $[17] = t7;
+        $[18] = t8;
+    } else t8 = $[18];
+    let t9;
+    if ($[19] !== onSelect || $[20] !== t8) {
+        t9 = /*#__PURE__*/ jsx(Card, {
+            className: "group cursor-pointer transition-all duration-200 hover:border-primary/50 hover:shadow-sm",
+            onClick: onSelect,
+            children: t8
+        });
+        $[19] = onSelect;
+        $[20] = t8;
+        $[21] = t9;
+    } else t9 = $[21];
+    return t9;
 }
 function SkeletonSection() {
-    return /*#__PURE__*/ jsxs(Column, {
-        gap: 4,
-        children: [
-            /*#__PURE__*/ jsx(Skeleton, {
-                className: "h-5 w-32"
-            }),
-            /*#__PURE__*/ jsxs(Column, {
-                gap: 3,
-                children: [
-                    /*#__PURE__*/ jsx(Row, {
-                        gap: 2,
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            className: "h-4 flex-1 max-w-[280px]"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Row, {
-                        gap: 2,
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            className: "h-4 flex-1 max-w-[240px]"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Row, {
-                        gap: 2,
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            className: "h-4 flex-1 max-w-[320px]"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Row, {
-                        gap: 2,
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            className: "h-4 flex-1 max-w-[200px]"
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(Row, {
-                        gap: 2,
-                        children: /*#__PURE__*/ jsx(Skeleton, {
-                            className: "h-4 flex-1 max-w-[260px]"
-                        })
-                    })
-                ]
+    const $ = c(6);
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = /*#__PURE__*/ jsx(Skeleton, {
+            className: "h-5 w-32"
+        });
+        $[0] = t0;
+    } else t0 = $[0];
+    let t1;
+    if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = /*#__PURE__*/ jsx(Row, {
+            gap: 2,
+            children: /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-4 flex-1 max-w-[280px]"
+            })
+        });
+        $[1] = t1;
+    } else t1 = $[1];
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+        t2 = /*#__PURE__*/ jsx(Row, {
+            gap: 2,
+            children: /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-4 flex-1 max-w-[240px]"
+            })
+        });
+        $[2] = t2;
+    } else t2 = $[2];
+    let t3;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+        t3 = /*#__PURE__*/ jsx(Row, {
+            gap: 2,
+            children: /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-4 flex-1 max-w-[320px]"
             })
-        ]
-    });
+        });
+        $[3] = t3;
+    } else t3 = $[3];
+    let t4;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+        t4 = /*#__PURE__*/ jsx(Row, {
+            gap: 2,
+            children: /*#__PURE__*/ jsx(Skeleton, {
+                className: "h-4 flex-1 max-w-[200px]"
+            })
+        });
+        $[4] = t4;
+    } else t4 = $[4];
+    let t5;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /*#__PURE__*/ jsxs(Column, {
+            gap: 4,
+            children: [
+                t0,
+                /*#__PURE__*/ jsxs(Column, {
+                    gap: 3,
+                    children: [
+                        t1,
+                        t2,
+                        t3,
+                        t4,
+                        /*#__PURE__*/ jsx(Row, {
+                            gap: 2,
+                            children: /*#__PURE__*/ jsx(Skeleton, {
+                                className: "h-4 flex-1 max-w-[260px]"
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+        $[5] = t5;
+    } else t5 = $[5];
+    return t5;
 }
 function createProjectColumns(onProjectSelect) {
     return [
@@ -277,157 +420,271 @@ function createProjectColumns(onProjectSelect) {
         }
     ];
 }
-function FlowStartExample({ className, title = 'BUILD YOUR FIRST AGENTIC PROCESS', subtitle = 'What would you like to start with?', processOptions = [], recentProjects = [], showSkeleton = false, defaultViewMode = 'cards', onOptionSelect, onProjectSelect }) {
+function FlowStartExample(t0) {
+    const $ = c(44);
+    const { className, title: t1, subtitle: t2, processOptions: t3, recentProjects: t4, showSkeleton: t5, defaultViewMode: t6, onOptionSelect, onProjectSelect } = t0;
+    const title = void 0 === t1 ? "BUILD YOUR FIRST AGENTIC PROCESS" : t1;
+    const subtitle = void 0 === t2 ? "What would you like to start with?" : t2;
+    let t7;
+    if ($[0] !== t3) {
+        t7 = void 0 === t3 ? [] : t3;
+        $[0] = t3;
+        $[1] = t7;
+    } else t7 = $[1];
+    const processOptions = t7;
+    let t8;
+    if ($[2] !== t4) {
+        t8 = void 0 === t4 ? [] : t4;
+        $[2] = t4;
+        $[3] = t8;
+    } else t8 = $[3];
+    const recentProjects = t8;
+    const showSkeleton = void 0 === t5 ? false : t5;
+    const defaultViewMode = void 0 === t6 ? "cards" : t6;
     const [selectedOption, setSelectedOption] = useState(null);
     const [viewMode, setViewMode] = useState(defaultViewMode);
-    const handleOptionSelect = (optionId)=>{
-        setSelectedOption(optionId);
-        onOptionSelect?.(optionId);
-    };
-    const columns = useMemo(()=>createProjectColumns(onProjectSelect), [
-        onProjectSelect
-    ]);
-    return /*#__PURE__*/ jsxs(Column, {
-        minH: "screen",
-        className: className,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "bg-muted/40",
+    let t9;
+    if ($[4] !== onOptionSelect) {
+        t9 = (optionId)=>{
+            setSelectedOption(optionId);
+            onOptionSelect?.(optionId);
+        };
+        $[4] = onOptionSelect;
+        $[5] = t9;
+    } else t9 = $[5];
+    const handleOptionSelect = t9;
+    let t10;
+    if ($[6] !== onProjectSelect) {
+        t10 = createProjectColumns(onProjectSelect);
+        $[6] = onProjectSelect;
+        $[7] = t10;
+    } else t10 = $[7];
+    const columns = t10;
+    let t11;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+        t11 = /*#__PURE__*/ jsx("header", {
+            className: "border-b border-border/50 ",
+            children: /*#__PURE__*/ jsxs(Row, {
+                justify: "between",
+                align: "center",
+                className: "h-14 px-6",
                 children: [
-                    /*#__PURE__*/ jsx("header", {
-                        className: "border-b border-border/50 ",
-                        children: /*#__PURE__*/ jsxs(Row, {
-                            justify: "between",
-                            align: "center",
-                            className: "h-14 px-6",
-                            children: [
-                                /*#__PURE__*/ jsx("span", {
-                                    className: "font-semibold text-lg",
-                                    children: "UiPath Maestro"
-                                }),
-                                /*#__PURE__*/ jsx(Skeleton, {
-                                    className: "h-8 w-8 rounded-full"
-                                })
-                            ]
-                        })
+                    /*#__PURE__*/ jsx("span", {
+                        className: "font-semibold text-lg",
+                        children: "UiPath Maestro"
                     }),
-                    /*#__PURE__*/ jsxs(Column, {
-                        className: "px-8 py-16 md:px-16",
+                    /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-8 w-8 rounded-full"
+                    })
+                ]
+            })
+        });
+        $[8] = t11;
+    } else t11 = $[8];
+    let t12;
+    if ($[9] !== title) {
+        t12 = /*#__PURE__*/ jsx("h1", {
+            className: "text-3xl md:text-4xl font-bold tracking-tight uppercase",
+            children: title
+        });
+        $[9] = title;
+        $[10] = t12;
+    } else t12 = $[10];
+    let t13;
+    if ($[11] !== subtitle) {
+        t13 = /*#__PURE__*/ jsx("p", {
+            className: "text-muted-foreground text-lg",
+            children: subtitle
+        });
+        $[11] = subtitle;
+        $[12] = t13;
+    } else t13 = $[12];
+    let t14;
+    if ($[13] !== t12 || $[14] !== t13) {
+        t14 = /*#__PURE__*/ jsxs(Column, {
+            gap: 3,
+            align: "center",
+            className: "mb-12 text-center",
+            children: [
+                t12,
+                t13
+            ]
+        });
+        $[13] = t12;
+        $[14] = t13;
+        $[15] = t14;
+    } else t14 = $[15];
+    let t15;
+    if ($[16] !== handleOptionSelect || $[17] !== processOptions || $[18] !== selectedOption) {
+        let t16;
+        if ($[20] !== handleOptionSelect || $[21] !== selectedOption) {
+            t16 = (option)=>/*#__PURE__*/ jsx(ProcessOptionCard, {
+                    option: option,
+                    isSelected: selectedOption === option.id,
+                    onSelect: ()=>handleOptionSelect(option.id)
+                }, option.id);
+            $[20] = handleOptionSelect;
+            $[21] = selectedOption;
+            $[22] = t16;
+        } else t16 = $[22];
+        t15 = processOptions.map(t16);
+        $[16] = handleOptionSelect;
+        $[17] = processOptions;
+        $[18] = selectedOption;
+        $[19] = t15;
+    } else t15 = $[19];
+    let t16;
+    if ($[23] !== t15) {
+        t16 = /*#__PURE__*/ jsx(Grid, {
+            cols: 1,
+            gap: 4,
+            className: "sm:grid-cols-2 lg:grid-cols-4 max-w-6xl mx-auto w-full",
+            children: t15
+        });
+        $[23] = t15;
+        $[24] = t16;
+    } else t16 = $[24];
+    let t17;
+    if ($[25] !== showSkeleton) {
+        t17 = showSkeleton && /*#__PURE__*/ jsx(Column, {
+            gap: 12,
+            className: "max-w-6xl mx-auto w-full mt-16",
+            children: /*#__PURE__*/ jsxs(Grid, {
+                cols: 1,
+                gap: 8,
+                className: "lg:grid-cols-3",
+                children: [
+                    /*#__PURE__*/ jsx(SkeletonSection, {}),
+                    /*#__PURE__*/ jsx(SkeletonSection, {}),
+                    /*#__PURE__*/ jsx(SkeletonSection, {})
+                ]
+            })
+        });
+        $[25] = showSkeleton;
+        $[26] = t17;
+    } else t17 = $[26];
+    let t18;
+    if ($[27] !== t14 || $[28] !== t16 || $[29] !== t17) {
+        t18 = /*#__PURE__*/ jsxs("div", {
+            className: "bg-muted/40",
+            children: [
+                t11,
+                /*#__PURE__*/ jsxs(Column, {
+                    className: "px-8 py-16 md:px-16",
+                    children: [
+                        t14,
+                        t16,
+                        t17
+                    ]
+                })
+            ]
+        });
+        $[27] = t14;
+        $[28] = t16;
+        $[29] = t17;
+        $[30] = t18;
+    } else t18 = $[30];
+    let t19;
+    if ($[31] !== columns || $[32] !== onProjectSelect || $[33] !== recentProjects || $[34] !== showSkeleton || $[35] !== viewMode) {
+        t19 = recentProjects.length > 0 && !showSkeleton && /*#__PURE__*/ jsx(Column, {
+            flex: 1,
+            className: "px-8 py-12 md:px-16",
+            children: /*#__PURE__*/ jsxs(Column, {
+                gap: 6,
+                className: "max-w-6xl mx-auto w-full",
+                children: [
+                    /*#__PURE__*/ jsxs(Row, {
+                        justify: "between",
+                        align: "center",
                         children: [
-                            /*#__PURE__*/ jsxs(Column, {
-                                gap: 3,
-                                align: "center",
-                                className: "mb-12 text-center",
+                            /*#__PURE__*/ jsx("h2", {
+                                className: "text-xl font-semibold",
+                                children: "Recent Projects"
+                            }),
+                            /*#__PURE__*/ jsxs(ButtonGroup, {
                                 children: [
-                                    /*#__PURE__*/ jsx("h1", {
-                                        className: "text-3xl md:text-4xl font-bold tracking-tight uppercase",
-                                        children: title
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "cards" === viewMode ? "secondary" : "outline",
+                                        size: "icon",
+                                        onClick: ()=>setViewMode("cards"),
+                                        "aria-label": "Card view",
+                                        children: /*#__PURE__*/ jsx(LayoutGrid, {
+                                            className: "h-4 w-4"
+                                        })
                                     }),
-                                    /*#__PURE__*/ jsx("p", {
-                                        className: "text-muted-foreground text-lg",
-                                        children: subtitle
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "table" === viewMode ? "secondary" : "outline",
+                                        size: "icon",
+                                        onClick: ()=>setViewMode("table"),
+                                        "aria-label": "Table view",
+                                        children: /*#__PURE__*/ jsx(List, {
+                                            className: "h-4 w-4"
+                                        })
                                     })
                                 ]
-                            }),
-                            /*#__PURE__*/ jsx(Grid, {
-                                cols: 1,
-                                gap: 4,
-                                className: "sm:grid-cols-2 lg:grid-cols-4 max-w-6xl mx-auto w-full",
-                                children: processOptions.map((option)=>/*#__PURE__*/ jsx(ProcessOptionCard, {
-                                        option: option,
-                                        isSelected: selectedOption === option.id,
-                                        onSelect: ()=>handleOptionSelect(option.id)
-                                    }, option.id))
-                            }),
-                            showSkeleton && /*#__PURE__*/ jsx(Column, {
-                                gap: 12,
-                                className: "max-w-6xl mx-auto w-full mt-16",
-                                children: /*#__PURE__*/ jsxs(Grid, {
-                                    cols: 1,
-                                    gap: 8,
-                                    className: "lg:grid-cols-3",
-                                    children: [
-                                        /*#__PURE__*/ jsx(SkeletonSection, {}),
-                                        /*#__PURE__*/ jsx(SkeletonSection, {}),
-                                        /*#__PURE__*/ jsx(SkeletonSection, {})
-                                    ]
-                                })
                             })
                         ]
+                    }),
+                    "cards" === viewMode && /*#__PURE__*/ jsx(Grid, {
+                        cols: 1,
+                        gap: 4,
+                        className: "sm:grid-cols-2 lg:grid-cols-4",
+                        children: recentProjects.map((project)=>/*#__PURE__*/ jsx(RecentProjectCard, {
+                                project: project,
+                                onSelect: ()=>onProjectSelect?.(project.id)
+                            }, project.id))
+                    }),
+                    "table" === viewMode && /*#__PURE__*/ jsx(DataTable, {
+                        columns: columns,
+                        data: recentProjects,
+                        searchKey: "name",
+                        searchPlaceholder: "Search projects...",
+                        showColumnToggle: false,
+                        showPagination: recentProjects.length > 10,
+                        compact: true
                     })
                 ]
-            }),
-            recentProjects.length > 0 && !showSkeleton && /*#__PURE__*/ jsx(Column, {
-                flex: 1,
-                className: "px-8 py-12 md:px-16",
-                children: /*#__PURE__*/ jsxs(Column, {
-                    gap: 6,
-                    className: "max-w-6xl mx-auto w-full",
-                    children: [
-                        /*#__PURE__*/ jsxs(Row, {
-                            justify: "between",
-                            align: "center",
-                            children: [
-                                /*#__PURE__*/ jsx("h2", {
-                                    className: "text-xl font-semibold",
-                                    children: "Recent Projects"
-                                }),
-                                /*#__PURE__*/ jsxs(ButtonGroup, {
-                                    children: [
-                                        /*#__PURE__*/ jsx(Button, {
-                                            variant: 'cards' === viewMode ? 'secondary' : 'outline',
-                                            size: "icon",
-                                            onClick: ()=>setViewMode('cards'),
-                                            "aria-label": "Card view",
-                                            children: /*#__PURE__*/ jsx(LayoutGrid, {
-                                                className: "h-4 w-4"
-                                            })
-                                        }),
-                                        /*#__PURE__*/ jsx(Button, {
-                                            variant: 'table' === viewMode ? 'secondary' : 'outline',
-                                            size: "icon",
-                                            onClick: ()=>setViewMode('table'),
-                                            "aria-label": "Table view",
-                                            children: /*#__PURE__*/ jsx(List, {
-                                                className: "h-4 w-4"
-                                            })
-                                        })
-                                    ]
-                                })
-                            ]
-                        }),
-                        'cards' === viewMode && /*#__PURE__*/ jsx(Grid, {
-                            cols: 1,
-                            gap: 4,
-                            className: "sm:grid-cols-2 lg:grid-cols-4",
-                            children: recentProjects.map((project)=>/*#__PURE__*/ jsx(RecentProjectCard, {
-                                    project: project,
-                                    onSelect: ()=>onProjectSelect?.(project.id)
-                                }, project.id))
-                        }),
-                        'table' === viewMode && /*#__PURE__*/ jsx(DataTable, {
-                            columns: columns,
-                            data: recentProjects,
-                            searchKey: "name",
-                            searchPlaceholder: "Search projects...",
-                            showColumnToggle: false,
-                            showPagination: recentProjects.length > 10,
-                            compact: true
-                        })
-                    ]
-                })
-            }),
-            showSkeleton && /*#__PURE__*/ jsx("div", {
-                className: "bg-background border-t flex-1",
-                children: /*#__PURE__*/ jsx(Row, {
-                    justify: "center",
-                    className: "px-8 py-8",
-                    children: /*#__PURE__*/ jsx(Skeleton, {
-                        className: "h-24 w-full max-w-4xl rounded-lg"
-                    })
+            })
+        });
+        $[31] = columns;
+        $[32] = onProjectSelect;
+        $[33] = recentProjects;
+        $[34] = showSkeleton;
+        $[35] = viewMode;
+        $[36] = t19;
+    } else t19 = $[36];
+    let t20;
+    if ($[37] !== showSkeleton) {
+        t20 = showSkeleton && /*#__PURE__*/ jsx("div", {
+            className: "bg-background border-t flex-1",
+            children: /*#__PURE__*/ jsx(Row, {
+                justify: "center",
+                className: "px-8 py-8",
+                children: /*#__PURE__*/ jsx(Skeleton, {
+                    className: "h-24 w-full max-w-4xl rounded-lg"
                 })
             })
-        ]
-    });
+        });
+        $[37] = showSkeleton;
+        $[38] = t20;
+    } else t20 = $[38];
+    let t21;
+    if ($[39] !== className || $[40] !== t18 || $[41] !== t19 || $[42] !== t20) {
+        t21 = /*#__PURE__*/ jsxs(Column, {
+            minH: "screen",
+            className: className,
+            children: [
+                t18,
+                t19,
+                t20
+            ]
+        });
+        $[39] = className;
+        $[40] = t18;
+        $[41] = t19;
+        $[42] = t20;
+        $[43] = t21;
+    } else t21 = $[43];
+    return t21;
 }
 export { FlowStartExample };