@idealyst/mcp-server 1.2.24 → 1.2.26

package/dist/data/recipes.js

@@ -1,2945 +0,0 @@
-/**
- * Idealyst Recipes - Common UI Patterns
- * Ready-to-use code examples for building apps with Idealyst
- */
-export const recipes = {
-    "login-form": {
-        name: "Login Form",
-        description: "A complete login form with email/password validation and error handling",
-        category: "auth",
-        difficulty: "beginner",
-        packages: ["@idealyst/components", "@idealyst/theme"],
-        code: `import React, { useState } from 'react';
-import { Button, Input, Card, Text, View } from '@idealyst/components';
-
-interface LoginFormProps {
-  onSubmit: (email: string, password: string) => Promise<void>;
-  onForgotPassword?: () => void;
-}
-
-export function LoginForm({ onSubmit, onForgotPassword }: LoginFormProps) {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
-  const [isLoading, setIsLoading] = useState(false);
-  const [submitError, setSubmitError] = useState<string | null>(null);
-
-  const validate = () => {
-    const newErrors: typeof errors = {};
-
-    if (!email) {
-      newErrors.email = 'Email is required';
-    } else if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {
-      newErrors.email = 'Please enter a valid email';
-    }
-
-    if (!password) {
-      newErrors.password = 'Password is required';
-    } else if (password.length < 8) {
-      newErrors.password = 'Password must be at least 8 characters';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async () => {
-    setSubmitError(null);
-
-    if (!validate()) return;
-
-    setIsLoading(true);
-    try {
-      await onSubmit(email, password);
-    } catch (error) {
-      setSubmitError(error instanceof Error ? error.message : 'Login failed');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Card padding="lg">
-      <Text variant="headline" style={{ marginBottom: 24 }}>
-        Sign In
-      </Text>
-
-      {submitError && (
-        <View style={{ marginBottom: 16 }}>
-          <Text intent="danger">{submitError}</Text>
-        </View>
-      )}
-
-      <View style={{ gap: 16 }}>
-        <Input
-          label="Email"
-          placeholder="you@example.com"
-          value={email}
-          onChangeText={setEmail}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          autoComplete="email"
-          error={errors.email}
-        />
-
-        <Input
-          label="Password"
-          placeholder="Enter your password"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-          autoComplete="current-password"
-          error={errors.password}
-        />
-
-        <Button
-          onPress={handleSubmit}
-          loading={isLoading}
-          disabled={isLoading}
-        >
-          Sign In
-        </Button>
-
-        {onForgotPassword && (
-          <Button type="text" onPress={onForgotPassword}>
-            Forgot Password?
-          </Button>
-        )}
-      </View>
-    </Card>
-  );
-}`,
-        explanation: `This login form demonstrates:
-- Controlled inputs with useState
-- Client-side validation with error messages
-- Loading state during submission
-- Error handling for failed login attempts
-- Proper keyboard types and autocomplete hints for better UX`,
-        tips: [
-            "Add onBlur validation for immediate feedback",
-            "Consider using react-hook-form for complex forms",
-            "Store tokens securely using @idealyst/storage after successful login",
-        ],
-        relatedRecipes: ["signup-form", "forgot-password", "protected-route"],
-    },
-    "signup-form": {
-        name: "Signup Form",
-        description: "User registration form with password confirmation and terms acceptance",
-        category: "auth",
-        difficulty: "beginner",
-        packages: ["@idealyst/components", "@idealyst/theme"],
-        code: `import React, { useState } from 'react';
-import { Button, Input, Card, Text, View, Checkbox, Link } from '@idealyst/components';
-
-interface SignupFormProps {
-  onSubmit: (data: { name: string; email: string; password: string }) => Promise<void>;
-  onTermsPress?: () => void;
-}
-
-export function SignupForm({ onSubmit, onTermsPress }: SignupFormProps) {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [acceptedTerms, setAcceptedTerms] = useState(false);
-  const [errors, setErrors] = useState<Record<string, string>>({});
-  const [isLoading, setIsLoading] = useState(false);
-
-  const validate = () => {
-    const newErrors: Record<string, string> = {};
-
-    if (!name.trim()) {
-      newErrors.name = 'Name is required';
-    }
-
-    if (!email) {
-      newErrors.email = 'Email is required';
-    } else if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)) {
-      newErrors.email = 'Please enter a valid email';
-    }
-
-    if (!password) {
-      newErrors.password = 'Password is required';
-    } else if (password.length < 8) {
-      newErrors.password = 'Password must be at least 8 characters';
-    }
-
-    if (password !== confirmPassword) {
-      newErrors.confirmPassword = 'Passwords do not match';
-    }
-
-    if (!acceptedTerms) {
-      newErrors.terms = 'You must accept the terms and conditions';
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async () => {
-    if (!validate()) return;
-
-    setIsLoading(true);
-    try {
-      await onSubmit({ name, email, password });
-    } catch (error) {
-      setErrors({ submit: error instanceof Error ? error.message : 'Signup failed' });
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Card padding="lg">
-      <Text variant="headline" style={{ marginBottom: 24 }}>
-        Create Account
-      </Text>
-
-      {errors.submit && (
-        <View style={{ marginBottom: 16 }}>
-          <Text intent="danger">{errors.submit}</Text>
-        </View>
-      )}
-
-      <View style={{ gap: 16 }}>
-        <Input
-          label="Full Name"
-          placeholder="John Doe"
-          value={name}
-          onChangeText={setName}
-          autoComplete="name"
-          error={errors.name}
-        />
-
-        <Input
-          label="Email"
-          placeholder="you@example.com"
-          value={email}
-          onChangeText={setEmail}
-          keyboardType="email-address"
-          autoCapitalize="none"
-          autoComplete="email"
-          error={errors.email}
-        />
-
-        <Input
-          label="Password"
-          placeholder="At least 8 characters"
-          value={password}
-          onChangeText={setPassword}
-          secureTextEntry
-          autoComplete="new-password"
-          error={errors.password}
-        />
-
-        <Input
-          label="Confirm Password"
-          placeholder="Confirm your password"
-          value={confirmPassword}
-          onChangeText={setConfirmPassword}
-          secureTextEntry
-          autoComplete="new-password"
-          error={errors.confirmPassword}
-        />
-
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-          <Checkbox
-            checked={acceptedTerms}
-            onCheckedChange={setAcceptedTerms}
-          />
-          <Text>
-            I agree to the{' '}
-            <Link onPress={onTermsPress}>Terms and Conditions</Link>
-          </Text>
-        </View>
-        {errors.terms && <Text intent="danger" size="sm">{errors.terms}</Text>}
-
-        <Button
-          onPress={handleSubmit}
-          loading={isLoading}
-          disabled={isLoading}
-        >
-          Create Account
-        </Button>
-      </View>
-    </Card>
-  );
-}`,
-        explanation: `This signup form includes:
-- Multiple field validation including password matching
-- Terms and conditions checkbox with validation
-- Proper autocomplete hints for password managers
-- Loading and error states`,
-        tips: [
-            "Add password strength indicator for better UX",
-            "Consider email verification flow after signup",
-            "Use secure password hashing on the backend",
-        ],
-        relatedRecipes: ["login-form", "email-verification"],
-    },
-    "settings-screen": {
-        name: "Settings Screen",
-        description: "App settings screen with toggles, selections, and grouped options",
-        category: "settings",
-        difficulty: "beginner",
-        packages: ["@idealyst/components", "@idealyst/theme", "@idealyst/storage"],
-        code: `import React, { useState, useEffect } from 'react';
-import { ScrollView } from 'react-native';
-import {
-  View, Text, Switch, Select, Card, Divider, Icon
-} from '@idealyst/components';
-import { storage } from '@idealyst/storage';
-
-interface Settings {
-  notifications: boolean;
-  emailUpdates: boolean;
-  darkMode: boolean;
-  language: string;
-  fontSize: string;
-}
-
-const defaultSettings: Settings = {
-  notifications: true,
-  emailUpdates: false,
-  darkMode: false,
-  language: 'en',
-  fontSize: 'medium',
-};
-
-export function SettingsScreen() {
-  const [settings, setSettings] = useState<Settings>(defaultSettings);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    loadSettings();
-  }, []);
-
-  const loadSettings = async () => {
-    try {
-      const saved = await storage.get<Settings>('user-settings');
-      if (saved) {
-        setSettings(saved);
-      }
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const updateSetting = async <K extends keyof Settings>(
-    key: K,
-    value: Settings[K]
-  ) => {
-    const newSettings = { ...settings, [key]: value };
-    setSettings(newSettings);
-    await storage.set('user-settings', newSettings);
-  };
-
-  if (isLoading) {
-    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-      <Text>Loading...</Text>
-    </View>;
-  }
-
-  return (
-    <ScrollView style={{ flex: 1 }}>
-      <View style={{ padding: 16, gap: 16 }}>
-        {/* Notifications Section */}
-        <Card>
-          <Text variant="title" style={{ marginBottom: 16 }}>
-            Notifications
-          </Text>
-
-          <SettingRow
-            icon="bell"
-            label="Push Notifications"
-            description="Receive push notifications"
-          >
-            <Switch
-              checked={settings.notifications}
-              onCheckedChange={(v) => updateSetting('notifications', v)}
-            />
-          </SettingRow>
-
-          <Divider />
-
-          <SettingRow
-            icon="email"
-            label="Email Updates"
-            description="Receive weekly email updates"
-          >
-            <Switch
-              checked={settings.emailUpdates}
-              onCheckedChange={(v) => updateSetting('emailUpdates', v)}
-            />
-          </SettingRow>
-        </Card>
-
-        {/* Appearance Section */}
-        <Card>
-          <Text variant="title" style={{ marginBottom: 16 }}>
-            Appearance
-          </Text>
-
-          <SettingRow
-            icon="theme-light-dark"
-            label="Dark Mode"
-            description="Use dark theme"
-          >
-            <Switch
-              checked={settings.darkMode}
-              onCheckedChange={(v) => updateSetting('darkMode', v)}
-            />
-          </SettingRow>
-
-          <Divider />
-
-          <SettingRow
-            icon="format-size"
-            label="Font Size"
-          >
-            <Select
-              value={settings.fontSize}
-              onValueChange={(v) => updateSetting('fontSize', v)}
-              options={[
-                { label: 'Small', value: 'small' },
-                { label: 'Medium', value: 'medium' },
-                { label: 'Large', value: 'large' },
-              ]}
-              style={{ width: 120 }}
-            />
-          </SettingRow>
-        </Card>
-
-        {/* Language Section */}
-        <Card>
-          <Text variant="title" style={{ marginBottom: 16 }}>
-            Language & Region
-          </Text>
-
-          <SettingRow
-            icon="translate"
-            label="Language"
-          >
-            <Select
-              value={settings.language}
-              onValueChange={(v) => updateSetting('language', v)}
-              options={[
-                { label: 'English', value: 'en' },
-                { label: 'Spanish', value: 'es' },
-                { label: 'French', value: 'fr' },
-                { label: 'German', value: 'de' },
-              ]}
-              style={{ width: 140 }}
-            />
-          </SettingRow>
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}
-
-// Helper component for consistent setting rows
-function SettingRow({
-  icon,
-  label,
-  description,
-  children
-}: {
-  icon: string;
-  label: string;
-  description?: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <View style={{
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingVertical: 12,
-    }}>
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12, flex: 1 }}>
-        <Icon name={icon} size={24} />
-        <View style={{ flex: 1 }}>
-          <Text>{label}</Text>
-          {description && (
-            <Text size="sm" style={{ opacity: 0.7 }}>{description}</Text>
-          )}
-        </View>
-      </View>
-      {children}
-    </View>
-  );
-}`,
-        explanation: `This settings screen demonstrates:
-- Loading and persisting settings with @idealyst/storage
-- Grouped settings sections with Cards
-- Switch toggles for boolean options
-- Select dropdowns for choices
-- Reusable SettingRow component for consistent layout`,
-        tips: [
-            "Consider debouncing saves for rapid toggles",
-            "Add a 'Reset to Defaults' option",
-            "Sync settings with backend for cross-device consistency",
-        ],
-        relatedRecipes: ["theme-switcher", "profile-screen"],
-    },
-    "theme-switcher": {
-        name: "Theme Switcher",
-        description: "Toggle between light and dark mode with persistence",
-        category: "settings",
-        difficulty: "beginner",
-        packages: ["@idealyst/components", "@idealyst/theme", "@idealyst/storage"],
-        code: `import React, { createContext, useContext, useEffect, useState } from 'react';
-import { UnistylesRuntime } from 'react-native-unistyles';
-import { storage } from '@idealyst/storage';
-import { Switch, View, Text, Icon } from '@idealyst/components';
-
-type ThemeMode = 'light' | 'dark' | 'system';
-
-interface ThemeContextType {
-  mode: ThemeMode;
-  setMode: (mode: ThemeMode) => void;
-  isDark: boolean;
-}
-
-const ThemeContext = createContext<ThemeContextType | null>(null);
-
-export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [mode, setModeState] = useState<ThemeMode>('system');
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  useEffect(() => {
-    loadTheme();
-  }, []);
-
-  useEffect(() => {
-    if (!isLoaded) return;
-
-    // Apply theme based on mode
-    if (mode === 'system') {
-      UnistylesRuntime.setAdaptiveThemes(true);
-    } else {
-      UnistylesRuntime.setAdaptiveThemes(false);
-      UnistylesRuntime.setTheme(mode);
-    }
-  }, [mode, isLoaded]);
-
-  const loadTheme = async () => {
-    const saved = await storage.get<ThemeMode>('theme-mode');
-    if (saved) {
-      setModeState(saved);
-    }
-    setIsLoaded(true);
-  };
-
-  const setMode = async (newMode: ThemeMode) => {
-    setModeState(newMode);
-    await storage.set('theme-mode', newMode);
-  };
-
-  const isDark = mode === 'dark' ||
-    (mode === 'system' && UnistylesRuntime.colorScheme === 'dark');
-
-  if (!isLoaded) return null;
-
-  return (
-    <ThemeContext.Provider value={{ mode, setMode, isDark }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (!context) {
-    throw new Error('useTheme must be used within ThemeProvider');
-  }
-  return context;
-}
-
-// Simple toggle component
-export function ThemeToggle() {
-  const { isDark, setMode } = useTheme();
-
-  return (
-    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
-      <Icon name={isDark ? 'weather-night' : 'weather-sunny'} size={24} />
-      <Text>Dark Mode</Text>
-      <Switch
-        checked={isDark}
-        onCheckedChange={(checked) => setMode(checked ? 'dark' : 'light')}
-      />
-    </View>
-  );
-}
-
-// Full selector with system option
-export function ThemeSelector() {
-  const { mode, setMode } = useTheme();
-
-  return (
-    <View style={{ gap: 8 }}>
-      <ThemeOption
-        label="Light"
-        icon="weather-sunny"
-        selected={mode === 'light'}
-        onPress={() => setMode('light')}
-      />
-      <ThemeOption
-        label="Dark"
-        icon="weather-night"
-        selected={mode === 'dark'}
-        onPress={() => setMode('dark')}
-      />
-      <ThemeOption
-        label="System"
-        icon="cellphone"
-        selected={mode === 'system'}
-        onPress={() => setMode('system')}
-      />
-    </View>
-  );
-}
-
-function ThemeOption({
-  label,
-  icon,
-  selected,
-  onPress
-}: {
-  label: string;
-  icon: string;
-  selected: boolean;
-  onPress: () => void;
-}) {
-  return (
-    <Pressable onPress={onPress}>
-      <View style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 12,
-        padding: 12,
-        borderRadius: 8,
-        backgroundColor: selected ? 'rgba(0,0,0,0.1)' : 'transparent',
-      }}>
-        <Icon name={icon} size={20} />
-        <Text>{label}</Text>
-        {selected && <Icon name="check" size={20} intent="success" />}
-      </View>
-    </Pressable>
-  );
-}`,
-        explanation: `This theme switcher provides:
-- ThemeProvider context for app-wide theme state
-- Persistence with @idealyst/storage
-- Support for light, dark, and system-follow modes
-- Integration with Unistyles runtime
-- Both simple toggle and full selector UI components`,
-        tips: [
-            "Wrap your app root with ThemeProvider",
-            "The system option follows device settings automatically",
-            "Theme changes are instant with no reload required",
-        ],
-        relatedRecipes: ["settings-screen"],
-    },
-    "tab-navigation": {
-        name: "Tab Navigation",
-        description: "Bottom tab navigation with icons and badges",
-        category: "navigation",
-        difficulty: "beginner",
-        packages: ["@idealyst/components", "@idealyst/navigation"],
-        code: `import React from 'react';
-import { Router, TabBar } from '@idealyst/navigation';
-import { Icon, Badge, View } from '@idealyst/components';
-
-// Define your screens
-function HomeScreen() {
-  return <View><Text>Home</Text></View>;
-}
-
-function SearchScreen() {
-  return <View><Text>Search</Text></View>;
-}
-
-function NotificationsScreen() {
-  return <View><Text>Notifications</Text></View>;
-}
-
-function ProfileScreen() {
-  return <View><Text>Profile</Text></View>;
-}
-
-// Route configuration
-const routes = {
-  home: {
-    path: '/',
-    screen: HomeScreen,
-    options: {
-      title: 'Home',
-      tabBarIcon: ({ focused }: { focused: boolean }) => (
-        <Icon name={focused ? 'home' : 'home-outline'} size={24} />
-      ),
-    },
-  },
-  search: {
-    path: '/search',
-    screen: SearchScreen,
-    options: {
-      title: 'Search',
-      tabBarIcon: ({ focused }: { focused: boolean }) => (
-        <Icon name={focused ? 'magnify' : 'magnify'} size={24} />
-      ),
-    },
-  },
-  notifications: {
-    path: '/notifications',
-    screen: NotificationsScreen,
-    options: {
-      title: 'Notifications',
-      tabBarIcon: ({ focused }: { focused: boolean }) => (
-        <View>
-          <Icon name={focused ? 'bell' : 'bell-outline'} size={24} />
-          {/* Show badge when there are unread notifications */}
-          <Badge
-            count={3}
-            style={{ position: 'absolute', top: -4, right: -8 }}
-          />
-        </View>
-      ),
-    },
-  },
-  profile: {
-    path: '/profile',
-    screen: ProfileScreen,
-    options: {
-      title: 'Profile',
-      tabBarIcon: ({ focused }: { focused: boolean }) => (
-        <Icon name={focused ? 'account' : 'account-outline'} size={24} />
-      ),
-    },
-  },
-};
-
-export function App() {
-  return (
-    <Router
-      routes={routes}
-      navigator="tabs"
-      tabBarPosition="bottom"
-    />
-  );
-}`,
-        explanation: `This tab navigation setup includes:
-- Four tabs with icons that change when focused
-- Badge on notifications tab for unread count
-- Type-safe route configuration
-- Works on both web and native`,
-        tips: [
-            "Use outline/filled icon variants to indicate focus state",
-            "Keep tab count to 3-5 for best usability",
-            "Consider hiding tabs on certain screens (like detail views)",
-        ],
-        relatedRecipes: ["drawer-navigation", "stack-navigation", "protected-route"],
-    },
-    "drawer-navigation": {
-        name: "Drawer Navigation",
-        description: "Side drawer menu with navigation items and user profile",
-        category: "navigation",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components", "@idealyst/navigation"],
-        code: `import React from 'react';
-import { Router, useNavigator } from '@idealyst/navigation';
-import { View, Text, Icon, Avatar, Pressable, Divider } from '@idealyst/components';
-
-// Custom drawer content
-function DrawerContent() {
-  const { navigate, currentRoute } = useNavigator();
-
-  const menuItems = [
-    { route: 'home', icon: 'home', label: 'Home' },
-    { route: 'dashboard', icon: 'view-dashboard', label: 'Dashboard' },
-    { route: 'messages', icon: 'message', label: 'Messages' },
-    { route: 'settings', icon: 'cog', label: 'Settings' },
-  ];
-
-  return (
-    <View style={{ flex: 1, padding: 16 }}>
-      {/* User Profile Header */}
-      <View style={{ alignItems: 'center', paddingVertical: 24 }}>
-        <Avatar
-          source={{ uri: 'https://example.com/avatar.jpg' }}
-          size="lg"
-        />
-        <Text variant="title" style={{ marginTop: 12 }}>John Doe</Text>
-        <Text size="sm" style={{ opacity: 0.7 }}>john@example.com</Text>
-      </View>
-
-      <Divider style={{ marginVertical: 16 }} />
-
-      {/* Menu Items */}
-      <View style={{ gap: 4 }}>
-        {menuItems.map((item) => (
-          <DrawerItem
-            key={item.route}
-            icon={item.icon}
-            label={item.label}
-            active={currentRoute === item.route}
-            onPress={() => navigate(item.route)}
-          />
-        ))}
-      </View>
-
-      {/* Footer */}
-      <View style={{ marginTop: 'auto' }}>
-        <Divider style={{ marginVertical: 16 }} />
-        <DrawerItem
-          icon="logout"
-          label="Sign Out"
-          onPress={() => {
-            // Handle logout
-          }}
-        />
-      </View>
-    </View>
-  );
-}
-
-function DrawerItem({
-  icon,
-  label,
-  active,
-  onPress
-}: {
-  icon: string;
-  label: string;
-  active?: boolean;
-  onPress: () => void;
-}) {
-  return (
-    <Pressable onPress={onPress}>
-      <View style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 16,
-        padding: 12,
-        borderRadius: 8,
-        backgroundColor: active ? 'rgba(0,0,0,0.1)' : 'transparent',
-      }}>
-        <Icon name={icon} size={24} intent={active ? 'primary' : undefined} />
-        <Text intent={active ? 'primary' : undefined}>{label}</Text>
-      </View>
-    </Pressable>
-  );
-}
-
-// Route configuration
-const routes = {
-  home: { path: '/', screen: HomeScreen },
-  dashboard: { path: '/dashboard', screen: DashboardScreen },
-  messages: { path: '/messages', screen: MessagesScreen },
-  settings: { path: '/settings', screen: SettingsScreen },
-};
-
-export function App() {
-  return (
-    <Router
-      routes={routes}
-      navigator="drawer"
-      drawerContent={DrawerContent}
-    />
-  );
-}`,
-        explanation: `This drawer navigation includes:
-- Custom drawer content with user profile
-- Active state highlighting for current route
-- Grouped menu items with icons
-- Sign out button at the bottom
-- Works on both web (sidebar) and native (slide-out drawer)`,
-        tips: [
-            "Add a hamburger menu button to open drawer on native",
-            "Consider using drawer on tablet/desktop, tabs on mobile",
-            "Add gesture support for swipe-to-open on native",
-        ],
-        relatedRecipes: ["tab-navigation", "stack-navigation"],
-    },
-    "protected-route": {
-        name: "Protected Routes",
-        description: "Redirect unauthenticated users to login with auth state management",
-        category: "auth",
-        difficulty: "intermediate",
-        packages: ["@idealyst/navigation", "@idealyst/storage", "@idealyst/components"],
-        code: `import React, { createContext, useContext, useEffect, useState } from 'react';
-import { Router, useNavigator } from '@idealyst/navigation';
-import { storage } from '@idealyst/storage';
-import { View, Text, ActivityIndicator } from '@idealyst/components';
-
-// Auth Context
-interface User {
-  id: string;
-  email: string;
-  name: string;
-}
-
-interface AuthContextType {
-  user: User | null;
-  isLoading: boolean;
-  login: (email: string, password: string) => Promise<void>;
-  logout: () => Promise<void>;
-}
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    checkAuth();
-  }, []);
-
-  const checkAuth = async () => {
-    try {
-      const token = await storage.get<string>('auth-token');
-      if (token) {
-        // Validate token and get user data
-        const userData = await fetchUser(token);
-        setUser(userData);
-      }
-    } catch (error) {
-      // Token invalid or expired
-      await storage.remove('auth-token');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const login = async (email: string, password: string) => {
-    const { token, user } = await apiLogin(email, password);
-    await storage.set('auth-token', token);
-    setUser(user);
-  };
-
-  const logout = async () => {
-    await storage.remove('auth-token');
-    setUser(null);
-  };
-
-  return (
-    <AuthContext.Provider value={{ user, isLoading, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  );
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth must be used within AuthProvider');
-  }
-  return context;
-}
-
-// Protected Route Wrapper
-function ProtectedRoute({ children }: { children: React.ReactNode }) {
-  const { user, isLoading } = useAuth();
-  const { navigate } = useNavigator();
-
-  useEffect(() => {
-    if (!isLoading && !user) {
-      navigate('login');
-    }
-  }, [user, isLoading]);
-
-  if (isLoading) {
-    return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <ActivityIndicator size="lg" />
-      </View>
-    );
-  }
-
-  if (!user) {
-    return null; // Will redirect
-  }
-
-  return <>{children}</>;
-}
-
-// Route configuration
-const routes = {
-  login: {
-    path: '/login',
-    screen: LoginScreen,
-    options: { public: true },
-  },
-  signup: {
-    path: '/signup',
-    screen: SignupScreen,
-    options: { public: true },
-  },
-  home: {
-    path: '/',
-    screen: () => (
-      <ProtectedRoute>
-        <HomeScreen />
-      </ProtectedRoute>
-    ),
-  },
-  profile: {
-    path: '/profile',
-    screen: () => (
-      <ProtectedRoute>
-        <ProfileScreen />
-      </ProtectedRoute>
-    ),
-  },
-  settings: {
-    path: '/settings',
-    screen: () => (
-      <ProtectedRoute>
-        <SettingsScreen />
-      </ProtectedRoute>
-    ),
-  },
-};
-
-export function App() {
-  return (
-    <AuthProvider>
-      <Router routes={routes} />
-    </AuthProvider>
-  );
-}`,
-        explanation: `This protected routes setup includes:
-- AuthProvider context for app-wide auth state
-- Token persistence with @idealyst/storage
-- Loading state while checking authentication
-- Automatic redirect to login for unauthenticated users
-- ProtectedRoute wrapper component for easy use`,
-        tips: [
-            "Add token refresh logic for long-lived sessions",
-            "Consider deep link handling for login redirects",
-            "Use @idealyst/oauth-client for OAuth flows",
-        ],
-        relatedRecipes: ["login-form", "oauth-flow"],
-    },
-    "data-list": {
-        name: "Data List with Pull-to-Refresh",
-        description: "Scrollable list with pull-to-refresh, loading states, and empty state",
-        category: "data",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components"],
-        code: `import React, { useState, useEffect, useCallback } from 'react';
-import { FlatList, RefreshControl } from 'react-native';
-import { View, Text, Card, ActivityIndicator, Button, Icon } from '@idealyst/components';
-
-interface Item {
-  id: string;
-  title: string;
-  description: string;
-  createdAt: string;
-}
-
-interface DataListProps {
-  fetchItems: () => Promise<Item[]>;
-  onItemPress?: (item: Item) => void;
-}
-
-export function DataList({ fetchItems, onItemPress }: DataListProps) {
-  const [items, setItems] = useState<Item[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const loadData = useCallback(async (showLoader = true) => {
-    if (showLoader) setIsLoading(true);
-    setError(null);
-
-    try {
-      const data = await fetchItems();
-      setItems(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load data');
-    } finally {
-      setIsLoading(false);
-      setIsRefreshing(false);
-    }
-  }, [fetchItems]);
-
-  useEffect(() => {
-    loadData();
-  }, [loadData]);
-
-  const handleRefresh = () => {
-    setIsRefreshing(true);
-    loadData(false);
-  };
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-        <ActivityIndicator size="lg" />
-        <Text style={{ marginTop: 16 }}>Loading...</Text>
-      </View>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
-        <Icon name="alert-circle" size={48} intent="danger" />
-        <Text variant="title" style={{ marginTop: 16 }}>Something went wrong</Text>
-        <Text style={{ textAlign: 'center', marginTop: 8, opacity: 0.7 }}>
-          {error}
-        </Text>
-        <Button onPress={() => loadData()} style={{ marginTop: 24 }}>
-          Try Again
-        </Button>
-      </View>
-    );
-  }
-
-  // Empty state
-  if (items.length === 0) {
-    return (
-      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 24 }}>
-        <Icon name="inbox" size={48} style={{ opacity: 0.5 }} />
-        <Text variant="title" style={{ marginTop: 16 }}>No items yet</Text>
-        <Text style={{ textAlign: 'center', marginTop: 8, opacity: 0.7 }}>
-          Pull down to refresh or check back later
-        </Text>
-      </View>
-    );
-  }
-
-  return (
-    <FlatList
-      data={items}
-      keyExtractor={(item) => item.id}
-      contentContainerStyle={{ padding: 16, gap: 12 }}
-      refreshControl={
-        <RefreshControl
-          refreshing={isRefreshing}
-          onRefresh={handleRefresh}
-        />
-      }
-      renderItem={({ item }) => (
-        <Card
-          onPress={() => onItemPress?.(item)}
-          style={{ padding: 16 }}
-        >
-          <Text variant="title">{item.title}</Text>
-          <Text style={{ marginTop: 4, opacity: 0.7 }}>
-            {item.description}
-          </Text>
-          <Text size="sm" style={{ marginTop: 8, opacity: 0.5 }}>
-            {new Date(item.createdAt).toLocaleDateString()}
-          </Text>
-        </Card>
-      )}
-    />
-  );
-}
-
-// Usage example
-function MyScreen() {
-  const fetchItems = async () => {
-    const response = await fetch('/api/items');
-    return response.json();
-  };
-
-  return (
-    <DataList
-      fetchItems={fetchItems}
-      onItemPress={(item) => console.log('Selected:', item)}
-    />
-  );
-}`,
-        explanation: `This data list component handles:
-- Initial loading state with spinner
-- Pull-to-refresh functionality
-- Error state with retry button
-- Empty state with helpful message
-- Efficient FlatList rendering for large lists`,
-        tips: [
-            "Add pagination with onEndReached for large datasets",
-            "Use skeleton loading for smoother perceived performance",
-            "Consider optimistic updates for better UX",
-        ],
-        relatedRecipes: ["search-filter", "infinite-scroll"],
-    },
-    "search-filter": {
-        name: "Search with Filters",
-        description: "Search input with filter chips and debounced search",
-        category: "data",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components"],
-        code: `import React, { useState, useEffect, useMemo } from 'react';
-import { ScrollView } from 'react-native';
-import { View, Input, Chip, Text, Icon } from '@idealyst/components';
-
-interface SearchFilterProps<T> {
-  data: T[];
-  searchKeys: (keyof T)[];
-  filterOptions: { key: string; label: string; values: string[] }[];
-  renderItem: (item: T) => React.ReactNode;
-  placeholder?: string;
-}
-
-// Debounce hook
-function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-
-export function SearchFilter<T extends Record<string, any>>({
-  data,
-  searchKeys,
-  filterOptions,
-  renderItem,
-  placeholder = 'Search...',
-}: SearchFilterProps<T>) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeFilters, setActiveFilters] = useState<Record<string, string[]>>({});
-
-  const debouncedQuery = useDebounce(searchQuery, 300);
-
-  const toggleFilter = (key: string, value: string) => {
-    setActiveFilters((prev) => {
-      const current = prev[key] || [];
-      const updated = current.includes(value)
-        ? current.filter((v) => v !== value)
-        : [...current, value];
-
-      return { ...prev, [key]: updated };
-    });
-  };
-
-  const clearFilters = () => {
-    setActiveFilters({});
-    setSearchQuery('');
-  };
-
-  const filteredData = useMemo(() => {
-    let result = data;
-
-    // Apply search
-    if (debouncedQuery) {
-      const query = debouncedQuery.toLowerCase();
-      result = result.filter((item) =>
-        searchKeys.some((key) =>
-          String(item[key]).toLowerCase().includes(query)
-        )
-      );
-    }
-
-    // Apply filters
-    for (const [key, values] of Object.entries(activeFilters)) {
-      if (values.length > 0) {
-        result = result.filter((item) => values.includes(String(item[key])));
-      }
-    }
-
-    return result;
-  }, [data, debouncedQuery, activeFilters, searchKeys]);
-
-  const hasActiveFilters =
-    searchQuery || Object.values(activeFilters).some((v) => v.length > 0);
-
-  return (
-    <View style={{ flex: 1 }}>
-      {/* Search Input */}
-      <View style={{ padding: 16 }}>
-        <Input
-          placeholder={placeholder}
-          value={searchQuery}
-          onChangeText={setSearchQuery}
-          leftIcon="magnify"
-          rightIcon={searchQuery ? 'close' : undefined}
-          onRightIconPress={() => setSearchQuery('')}
-        />
-      </View>
-
-      {/* Filter Chips */}
-      {filterOptions.map((filter) => (
-        <View key={filter.key} style={{ paddingHorizontal: 16, marginBottom: 12 }}>
-          <Text size="sm" style={{ marginBottom: 8, opacity: 0.7 }}>
-            {filter.label}
-          </Text>
-          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
-            <View style={{ flexDirection: 'row', gap: 8 }}>
-              {filter.values.map((value) => (
-                <Chip
-                  key={value}
-                  selected={(activeFilters[filter.key] || []).includes(value)}
-                  onPress={() => toggleFilter(filter.key, value)}
-                >
-                  {value}
-                </Chip>
-              ))}
-            </View>
-          </ScrollView>
-        </View>
-      ))}
-
-      {/* Results Header */}
-      <View style={{
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-      }}>
-        <Text size="sm" style={{ opacity: 0.7 }}>
-          {filteredData.length} result{filteredData.length !== 1 ? 's' : ''}
-        </Text>
-        {hasActiveFilters && (
-          <Chip onPress={clearFilters} size="sm">
-            <Icon name="close" size={14} /> Clear all
-          </Chip>
-        )}
-      </View>
-
-      {/* Results */}
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
-        {filteredData.length === 0 ? (
-          <View style={{ alignItems: 'center', paddingVertical: 32 }}>
-            <Icon name="magnify-close" size={48} style={{ opacity: 0.5 }} />
-            <Text style={{ marginTop: 16 }}>No results found</Text>
-          </View>
-        ) : (
-          filteredData.map((item, index) => (
-            <View key={index}>{renderItem(item)}</View>
-          ))
-        )}
-      </ScrollView>
-    </View>
-  );
-}
-
-// Usage example
-const products = [
-  { id: '1', name: 'iPhone', category: 'Electronics', price: 999 },
-  { id: '2', name: 'MacBook', category: 'Electronics', price: 1999 },
-  { id: '3', name: 'Desk Chair', category: 'Furniture', price: 299 },
-];
-
-function ProductSearch() {
-  return (
-    <SearchFilter
-      data={products}
-      searchKeys={['name']}
-      filterOptions={[
-        { key: 'category', label: 'Category', values: ['Electronics', 'Furniture'] },
-      ]}
-      renderItem={(product) => (
-        <Card>
-          <Text>{product.name}</Text>
-          <Text>\${product.price}</Text>
-        </Card>
-      )}
-    />
-  );
-}`,
-        explanation: `This search and filter component provides:
-- Debounced search input (300ms delay)
-- Multiple filter categories with chips
-- Combined search + filter logic
-- Clear all filters button
-- Result count display
-- Empty state handling`,
-        tips: [
-            "Add URL query params sync for shareable filtered views",
-            "Consider server-side filtering for large datasets",
-            "Add sort options alongside filters",
-        ],
-        relatedRecipes: ["data-list", "infinite-scroll"],
-    },
-    "modal-confirmation": {
-        name: "Confirmation Dialog",
-        description: "Reusable confirmation modal for destructive actions",
-        category: "layout",
-        difficulty: "beginner",
-        packages: ["@idealyst/components"],
-        code: `import React, { createContext, useContext, useState, useCallback } from 'react';
-import { Dialog, Button, Text, View, Icon } from '@idealyst/components';
-
-interface ConfirmOptions {
-  title: string;
-  message: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  intent?: 'danger' | 'warning' | 'primary';
-  icon?: string;
-}
-
-interface ConfirmContextType {
-  confirm: (options: ConfirmOptions) => Promise<boolean>;
-}
-
-const ConfirmContext = createContext<ConfirmContextType | null>(null);
-
-export function ConfirmProvider({ children }: { children: React.ReactNode }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [options, setOptions] = useState<ConfirmOptions | null>(null);
-  const [resolveRef, setResolveRef] = useState<((value: boolean) => void) | null>(null);
-
-  const confirm = useCallback((opts: ConfirmOptions): Promise<boolean> => {
-    return new Promise((resolve) => {
-      setOptions(opts);
-      setResolveRef(() => resolve);
-      setIsOpen(true);
-    });
-  }, []);
-
-  const handleClose = (confirmed: boolean) => {
-    setIsOpen(false);
-    resolveRef?.(confirmed);
-    // Clean up after animation
-    setTimeout(() => {
-      setOptions(null);
-      setResolveRef(null);
-    }, 300);
-  };
-
-  return (
-    <ConfirmContext.Provider value={{ confirm }}>
-      {children}
-
-      <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose(false)}>
-        {options && (
-          <View style={{ padding: 24, alignItems: 'center' }}>
-            {options.icon && (
-              <Icon
-                name={options.icon}
-                size={48}
-                intent={options.intent || 'danger'}
-                style={{ marginBottom: 16 }}
-              />
-            )}
-
-            <Text variant="headline" style={{ textAlign: 'center' }}>
-              {options.title}
-            </Text>
-
-            <Text style={{ textAlign: 'center', marginTop: 8, opacity: 0.7 }}>
-              {options.message}
-            </Text>
-
-            <View style={{
-              flexDirection: 'row',
-              gap: 12,
-              marginTop: 24,
-              width: '100%',
-            }}>
-              <Button
-                type="outlined"
-                onPress={() => handleClose(false)}
-                style={{ flex: 1 }}
-              >
-                {options.cancelLabel || 'Cancel'}
-              </Button>
-
-              <Button
-                intent={options.intent || 'danger'}
-                onPress={() => handleClose(true)}
-                style={{ flex: 1 }}
-              >
-                {options.confirmLabel || 'Confirm'}
-              </Button>
-            </View>
-          </View>
-        )}
-      </Dialog>
-    </ConfirmContext.Provider>
-  );
-}
-
-export function useConfirm() {
-  const context = useContext(ConfirmContext);
-  if (!context) {
-    throw new Error('useConfirm must be used within ConfirmProvider');
-  }
-  return context.confirm;
-}
-
-// Usage example
-function DeleteButton({ onDelete }: { onDelete: () => void }) {
-  const confirm = useConfirm();
-
-  const handleDelete = async () => {
-    const confirmed = await confirm({
-      title: 'Delete Item?',
-      message: 'This action cannot be undone. Are you sure you want to delete this item?',
-      confirmLabel: 'Delete',
-      cancelLabel: 'Keep',
-      intent: 'danger',
-      icon: 'delete',
-    });
-
-    if (confirmed) {
-      onDelete();
-    }
-  };
-
-  return (
-    <Button intent="danger" type="outlined" onPress={handleDelete}>
-      Delete
-    </Button>
-  );
-}
-
-// Wrap your app
-function App() {
-  return (
-    <ConfirmProvider>
-      <MyApp />
-    </ConfirmProvider>
-  );
-}`,
-        explanation: `This confirmation dialog system provides:
-- Async/await API for easy use: \`if (await confirm({...})) { ... }\`
-- Customizable title, message, buttons, and icon
-- Intent-based styling (danger, warning, primary)
-- Promise-based resolution
-- Clean context-based architecture`,
-        tips: [
-            "Use danger intent for destructive actions",
-            "Keep messages concise and actionable",
-            "Consider adding a 'Don't ask again' checkbox for repeated actions",
-        ],
-        relatedRecipes: ["toast-notifications"],
-    },
-    "toast-notifications": {
-        name: "Toast Notifications",
-        description: "Temporary notification messages that auto-dismiss",
-        category: "layout",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components"],
-        code: `import React, { createContext, useContext, useState, useCallback } from 'react';
-import { Animated, Pressable } from 'react-native';
-import { View, Text, Icon } from '@idealyst/components';
-
-type ToastType = 'success' | 'error' | 'warning' | 'info';
-
-interface Toast {
-  id: string;
-  type: ToastType;
-  message: string;
-  duration?: number;
-}
-
-interface ToastContextType {
-  showToast: (type: ToastType, message: string, duration?: number) => void;
-  success: (message: string) => void;
-  error: (message: string) => void;
-  warning: (message: string) => void;
-  info: (message: string) => void;
-}
-
-const ToastContext = createContext<ToastContextType | null>(null);
-
-const toastConfig: Record<ToastType, { icon: string; intent: string }> = {
-  success: { icon: 'check-circle', intent: 'success' },
-  error: { icon: 'alert-circle', intent: 'danger' },
-  warning: { icon: 'alert', intent: 'warning' },
-  info: { icon: 'information', intent: 'primary' },
-};
-
-export function ToastProvider({ children }: { children: React.ReactNode }) {
-  const [toasts, setToasts] = useState<Toast[]>([]);
-
-  const removeToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  const showToast = useCallback((type: ToastType, message: string, duration = 3000) => {
-    const id = Date.now().toString();
-    const toast: Toast = { id, type, message, duration };
-
-    setToasts((prev) => [...prev, toast]);
-
-    if (duration > 0) {
-      setTimeout(() => removeToast(id), duration);
-    }
-  }, [removeToast]);
-
-  const contextValue: ToastContextType = {
-    showToast,
-    success: (msg) => showToast('success', msg),
-    error: (msg) => showToast('error', msg),
-    warning: (msg) => showToast('warning', msg),
-    info: (msg) => showToast('info', msg),
-  };
-
-  return (
-    <ToastContext.Provider value={contextValue}>
-      {children}
-
-      {/* Toast Container */}
-      <View
-        style={{
-          position: 'absolute',
-          top: 60,
-          left: 16,
-          right: 16,
-          zIndex: 9999,
-          gap: 8,
-        }}
-        pointerEvents="box-none"
-      >
-        {toasts.map((toast) => (
-          <ToastItem
-            key={toast.id}
-            toast={toast}
-            onDismiss={() => removeToast(toast.id)}
-          />
-        ))}
-      </View>
-    </ToastContext.Provider>
-  );
-}
-
-function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }) {
-  const fadeAnim = React.useRef(new Animated.Value(0)).current;
-  const config = toastConfig[toast.type];
-
-  React.useEffect(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 200,
-      useNativeDriver: true,
-    }).start();
-  }, []);
-
-  return (
-    <Animated.View style={{ opacity: fadeAnim, transform: [{ translateY: fadeAnim.interpolate({
-      inputRange: [0, 1],
-      outputRange: [-20, 0],
-    }) }] }}>
-      <Pressable onPress={onDismiss}>
-        <View
-          style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
-            padding: 16,
-            borderRadius: 8,
-            backgroundColor: '#1a1a1a',
-            shadowColor: '#000',
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.25,
-            shadowRadius: 4,
-            elevation: 5,
-          }}
-        >
-          <Icon name={config.icon} size={20} intent={config.intent as any} />
-          <Text style={{ flex: 1, color: '#fff' }}>{toast.message}</Text>
-          <Icon name="close" size={16} style={{ opacity: 0.5 }} />
-        </View>
-      </Pressable>
-    </Animated.View>
-  );
-}
-
-export function useToast() {
-  const context = useContext(ToastContext);
-  if (!context) {
-    throw new Error('useToast must be used within ToastProvider');
-  }
-  return context;
-}
-
-// Usage example
-function SaveButton() {
-  const toast = useToast();
-  const [isSaving, setIsSaving] = useState(false);
-
-  const handleSave = async () => {
-    setIsSaving(true);
-    try {
-      await saveData();
-      toast.success('Changes saved successfully!');
-    } catch (error) {
-      toast.error('Failed to save changes. Please try again.');
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <Button onPress={handleSave} loading={isSaving}>
-      Save
-    </Button>
-  );
-}
-
-// Wrap your app
-function App() {
-  return (
-    <ToastProvider>
-      <MyApp />
-    </ToastProvider>
-  );
-}`,
-        explanation: `This toast notification system provides:
-- Simple API: \`toast.success('Message')\`
-- Four types: success, error, warning, info
-- Auto-dismiss with configurable duration
-- Tap to dismiss
-- Animated entrance
-- Stacking multiple toasts`,
-        tips: [
-            "Use success for completed actions, error for failures",
-            "Keep messages under 50 characters for readability",
-            "Don't show toasts for every action - use sparingly",
-        ],
-        relatedRecipes: ["modal-confirmation"],
-    },
-    "form-with-validation": {
-        name: "Form with Validation",
-        description: "Multi-field form with real-time validation and error handling",
-        category: "forms",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components"],
-        code: `import React, { useState } from 'react';
-import { ScrollView } from 'react-native';
-import {
-  View, Text, Input, Select, Checkbox, Button, Card
-} from '@idealyst/components';
-
-// Validation rules
-type ValidationRule<T> = {
-  validate: (value: T, formData: FormData) => boolean;
-  message: string;
-};
-
-interface FormData {
-  name: string;
-  email: string;
-  phone: string;
-  country: string;
-  message: string;
-  subscribe: boolean;
-}
-
-const validationRules: Partial<Record<keyof FormData, ValidationRule<any>[]>> = {
-  name: [
-    { validate: (v) => v.trim().length > 0, message: 'Name is required' },
-    { validate: (v) => v.trim().length >= 2, message: 'Name must be at least 2 characters' },
-  ],
-  email: [
-    { validate: (v) => v.length > 0, message: 'Email is required' },
-    { validate: (v) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(v), message: 'Invalid email format' },
-  ],
-  phone: [
-    { validate: (v) => !v || /^[+]?[0-9\\s-]{10,}$/.test(v), message: 'Invalid phone number' },
-  ],
-  country: [
-    { validate: (v) => v.length > 0, message: 'Please select a country' },
-  ],
-  message: [
-    { validate: (v) => v.length > 0, message: 'Message is required' },
-    { validate: (v) => v.length >= 10, message: 'Message must be at least 10 characters' },
-  ],
-};
-
-export function ContactForm({ onSubmit }: { onSubmit: (data: FormData) => Promise<void> }) {
-  const [formData, setFormData] = useState<FormData>({
-    name: '',
-    email: '',
-    phone: '',
-    country: '',
-    message: '',
-    subscribe: false,
-  });
-
-  const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({});
-  const [touched, setTouched] = useState<Partial<Record<keyof FormData, boolean>>>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const validateField = (field: keyof FormData, value: any): string | undefined => {
-    const rules = validationRules[field];
-    if (!rules) return undefined;
-
-    for (const rule of rules) {
-      if (!rule.validate(value, formData)) {
-        return rule.message;
-      }
-    }
-    return undefined;
-  };
-
-  const validateAll = (): boolean => {
-    const newErrors: typeof errors = {};
-    let isValid = true;
-
-    for (const field of Object.keys(validationRules) as (keyof FormData)[]) {
-      const error = validateField(field, formData[field]);
-      if (error) {
-        newErrors[field] = error;
-        isValid = false;
-      }
-    }
-
-    setErrors(newErrors);
-    return isValid;
-  };
-
-  const handleChange = (field: keyof FormData, value: any) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-
-    // Validate on change if field was touched
-    if (touched[field]) {
-      const error = validateField(field, value);
-      setErrors((prev) => ({ ...prev, [field]: error }));
-    }
-  };
-
-  const handleBlur = (field: keyof FormData) => {
-    setTouched((prev) => ({ ...prev, [field]: true }));
-    const error = validateField(field, formData[field]);
-    setErrors((prev) => ({ ...prev, [field]: error }));
-  };
-
-  const handleSubmit = async () => {
-    // Mark all fields as touched
-    const allTouched = Object.keys(formData).reduce(
-      (acc, key) => ({ ...acc, [key]: true }),
-      {}
-    );
-    setTouched(allTouched);
-
-    if (!validateAll()) return;
-
-    setIsSubmitting(true);
-    try {
-      await onSubmit(formData);
-    } catch (error) {
-      setErrors({
-        submit: error instanceof Error ? error.message : 'Submission failed'
-      } as any);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <ScrollView>
-      <Card padding="lg">
-        <Text variant="headline" style={{ marginBottom: 24 }}>
-          Contact Us
-        </Text>
-
-        <View style={{ gap: 16 }}>
-          <Input
-            label="Name *"
-            placeholder="Your full name"
-            value={formData.name}
-            onChangeText={(v) => handleChange('name', v)}
-            onBlur={() => handleBlur('name')}
-            error={touched.name ? errors.name : undefined}
-          />
-
-          <Input
-            label="Email *"
-            placeholder="you@example.com"
-            value={formData.email}
-            onChangeText={(v) => handleChange('email', v)}
-            onBlur={() => handleBlur('email')}
-            keyboardType="email-address"
-            autoCapitalize="none"
-            error={touched.email ? errors.email : undefined}
-          />
-
-          <Input
-            label="Phone"
-            placeholder="+1 234 567 8900"
-            value={formData.phone}
-            onChangeText={(v) => handleChange('phone', v)}
-            onBlur={() => handleBlur('phone')}
-            keyboardType="phone-pad"
-            error={touched.phone ? errors.phone : undefined}
-          />
-
-          <Select
-            label="Country *"
-            placeholder="Select your country"
-            value={formData.country}
-            onValueChange={(v) => handleChange('country', v)}
-            options={[
-              { label: 'United States', value: 'us' },
-              { label: 'United Kingdom', value: 'uk' },
-              { label: 'Canada', value: 'ca' },
-              { label: 'Australia', value: 'au' },
-              { label: 'Other', value: 'other' },
-            ]}
-            error={touched.country ? errors.country : undefined}
-          />
-
-          <Input
-            label="Message *"
-            placeholder="How can we help you?"
-            value={formData.message}
-            onChangeText={(v) => handleChange('message', v)}
-            onBlur={() => handleBlur('message')}
-            multiline
-            numberOfLines={4}
-            error={touched.message ? errors.message : undefined}
-          />
-
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Checkbox
-              checked={formData.subscribe}
-              onCheckedChange={(v) => handleChange('subscribe', v)}
-            />
-            <Text>Subscribe to our newsletter</Text>
-          </View>
-
-          <Button
-            onPress={handleSubmit}
-            loading={isSubmitting}
-            disabled={isSubmitting}
-            style={{ marginTop: 8 }}
-          >
-            Send Message
-          </Button>
-        </View>
-      </Card>
-    </ScrollView>
-  );
-}`,
-        explanation: `This form demonstrates:
-- Field-level validation with custom rules
-- Validation on blur (after first touch)
-- Real-time validation after field is touched
-- Full form validation on submit
-- Error display with touched state tracking
-- Loading state during submission`,
-        tips: [
-            "Consider using a form library like react-hook-form for complex forms",
-            "Add success state/message after submission",
-            "Implement autosave for long forms",
-        ],
-        relatedRecipes: ["login-form", "signup-form"],
-    },
-    "image-upload": {
-        name: "Image Upload",
-        description: "Image picker with preview, crop option, and upload progress",
-        category: "media",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components", "@idealyst/camera"],
-        code: `import React, { useState } from 'react';
-import { Image } from 'react-native';
-import { View, Text, Button, Card, Icon, Progress } from '@idealyst/components';
-// Note: You'll need expo-image-picker or react-native-image-picker
-
-interface ImageUploadProps {
-  onUpload: (uri: string) => Promise<string>; // Returns uploaded URL
-  currentImage?: string;
-}
-
-export function ImageUpload({ onUpload, currentImage }: ImageUploadProps) {
-  const [imageUri, setImageUri] = useState<string | null>(currentImage || null);
-  const [isUploading, setIsUploading] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState(0);
-  const [error, setError] = useState<string | null>(null);
-
-  const pickImage = async () => {
-    try {
-      // Using expo-image-picker as example
-      const result = await ImagePicker.launchImageLibraryAsync({
-        mediaTypes: ImagePicker.MediaTypeOptions.Images,
-        allowsEditing: true,
-        aspect: [1, 1],
-        quality: 0.8,
-      });
-
-      if (!result.canceled && result.assets[0]) {
-        setImageUri(result.assets[0].uri);
-        setError(null);
-      }
-    } catch (err) {
-      setError('Failed to pick image');
-    }
-  };
-
-  const takePhoto = async () => {
-    try {
-      const result = await ImagePicker.launchCameraAsync({
-        allowsEditing: true,
-        aspect: [1, 1],
-        quality: 0.8,
-      });
-
-      if (!result.canceled && result.assets[0]) {
-        setImageUri(result.assets[0].uri);
-        setError(null);
-      }
-    } catch (err) {
-      setError('Failed to take photo');
-    }
-  };
-
-  const handleUpload = async () => {
-    if (!imageUri) return;
-
-    setIsUploading(true);
-    setUploadProgress(0);
-    setError(null);
-
-    try {
-      // Simulate upload progress
-      const progressInterval = setInterval(() => {
-        setUploadProgress((prev) => Math.min(prev + 10, 90));
-      }, 200);
-
-      const uploadedUrl = await onUpload(imageUri);
-
-      clearInterval(progressInterval);
-      setUploadProgress(100);
-      setImageUri(uploadedUrl);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Upload failed');
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const removeImage = () => {
-    setImageUri(null);
-    setUploadProgress(0);
-    setError(null);
-  };
-
-  return (
-    <Card padding="lg">
-      <Text variant="title" style={{ marginBottom: 16 }}>
-        Profile Photo
-      </Text>
-
-      {/* Image Preview */}
-      <View style={{ alignItems: 'center', marginBottom: 16 }}>
-        {imageUri ? (
-          <View style={{ position: 'relative' }}>
-            <Image
-              source={{ uri: imageUri }}
-              style={{
-                width: 150,
-                height: 150,
-                borderRadius: 75,
-              }}
-            />
-            <Pressable
-              onPress={removeImage}
-              style={{
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                backgroundColor: 'rgba(0,0,0,0.6)',
-                borderRadius: 12,
-                padding: 4,
-              }}
-            >
-              <Icon name="close" size={16} color="#fff" />
-            </Pressable>
-          </View>
-        ) : (
-          <View
-            style={{
-              width: 150,
-              height: 150,
-              borderRadius: 75,
-              backgroundColor: 'rgba(0,0,0,0.1)',
-              justifyContent: 'center',
-              alignItems: 'center',
-            }}
-          >
-            <Icon name="account" size={64} style={{ opacity: 0.3 }} />
-          </View>
-        )}
-      </View>
-
-      {/* Upload Progress */}
-      {isUploading && (
-        <View style={{ marginBottom: 16 }}>
-          <Progress value={uploadProgress} />
-          <Text size="sm" style={{ textAlign: 'center', marginTop: 4 }}>
-            Uploading... {uploadProgress}%
-          </Text>
-        </View>
-      )}
-
-      {/* Error Message */}
-      {error && (
-        <Text intent="danger" style={{ textAlign: 'center', marginBottom: 16 }}>
-          {error}
-        </Text>
-      )}
-
-      {/* Action Buttons */}
-      <View style={{ gap: 12 }}>
-        <View style={{ flexDirection: 'row', gap: 12 }}>
-          <Button
-            type="outlined"
-            onPress={pickImage}
-            disabled={isUploading}
-            style={{ flex: 1 }}
-          >
-            <Icon name="image" size={18} /> Gallery
-          </Button>
-          <Button
-            type="outlined"
-            onPress={takePhoto}
-            disabled={isUploading}
-            style={{ flex: 1 }}
-          >
-            <Icon name="camera" size={18} /> Camera
-          </Button>
-        </View>
-
-        {imageUri && !imageUri.startsWith('http') && (
-          <Button
-            onPress={handleUpload}
-            loading={isUploading}
-            disabled={isUploading}
-          >
-            Upload Photo
-          </Button>
-        )}
-      </View>
-    </Card>
-  );
-}
-
-// Usage
-function ProfileScreen() {
-  const uploadImage = async (uri: string): Promise<string> => {
-    // Upload to your server/cloud storage
-    const formData = new FormData();
-    formData.append('image', {
-      uri,
-      type: 'image/jpeg',
-      name: 'photo.jpg',
-    } as any);
-
-    const response = await fetch('/api/upload', {
-      method: 'POST',
-      body: formData,
-    });
-
-    const { url } = await response.json();
-    return url;
-  };
-
-  return (
-    <ImageUpload
-      currentImage="https://example.com/current-avatar.jpg"
-      onUpload={uploadImage}
-    />
-  );
-}`,
-        explanation: `This image upload component provides:
-- Pick from gallery or take photo
-- Image preview with circular crop
-- Upload progress indicator
-- Error handling
-- Remove/replace image option
-- Works with any backend upload API`,
-        tips: [
-            "Add image compression before upload to reduce size",
-            "Consider using a CDN for image hosting",
-            "Implement retry logic for failed uploads",
-        ],
-        relatedRecipes: ["form-with-validation"],
-    },
-    "web-stack-layout": {
-        name: "Web Stack Layout",
-        description: "Stack layout for web that mimics native stack navigator with header, back button, and title",
-        category: "navigation",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components", "@idealyst/navigation"],
-        code: `import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { View, Text, Pressable, Icon } from '@idealyst/components';
-import { useNavigator } from '@idealyst/navigation';
-import type { StackLayoutProps, NavigatorOptions } from '@idealyst/navigation';
-
-/**
- * Web Stack Layout - mimics native stack navigator header
- *
- * Features:
- * - Header with title (from options.headerTitle)
- * - Automatic back button when canGoBack() is true
- * - Left and right header slots
- * - Hide header with headerShown: false
- */
-export function WebStackLayout({ options }: StackLayoutProps) {
-  const { canGoBack, goBack } = useNavigator();
-
-  const showHeader = options?.headerShown !== false;
-  const showBackButton = options?.headerBackVisible !== false && canGoBack();
-
-  return (
-    <View style={{ flex: 1 }}>
-      {/* Header bar - like native stack header */}
-      {showHeader && (
-        <View style={{
-          height: 56,
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingHorizontal: 8,
-          backgroundColor: '#ffffff',
-          borderBottomWidth: 1,
-          borderBottomColor: '#e0e0e0',
-          // Web shadow
-          boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
-        }}>
-          {/* Back button */}
-          {showBackButton && (
-            <Pressable
-              onPress={goBack}
-              style={{
-                width: 40,
-                height: 40,
-                alignItems: 'center',
-                justifyContent: 'center',
-                borderRadius: 20,
-              }}
-            >
-              <Icon name="arrow-left" size={24} />
-            </Pressable>
-          )}
-
-          {/* Left header slot */}
-          {options?.headerLeft && (
-            <View style={{ marginLeft: 8 }}>
-              {renderHeaderComponent(options.headerLeft)}
-            </View>
-          )}
-
-          {/* Title */}
-          <View style={{ flex: 1, marginHorizontal: 8 }}>
-            {typeof options?.headerTitle === 'string' ? (
-              <Text variant="title" numberOfLines={1}>
-                {options.headerTitle}
-              </Text>
-            ) : options?.headerTitle ? (
-              renderHeaderComponent(options.headerTitle)
-            ) : null}
-          </View>
-
-          {/* Right header slot */}
-          {options?.headerRight && (
-            <View>
-              {renderHeaderComponent(options.headerRight)}
-            </View>
-          )}
-        </View>
-      )}
-
-      {/* Content area - Outlet renders child routes */}
-      <View style={{ flex: 1 }}>
-        <Outlet />
-      </View>
-    </View>
-  );
-}
-
-// Helper to render header components (can be React element or function)
-function renderHeaderComponent(
-  component: React.ComponentType | React.ReactElement | undefined
-) {
-  if (!component) return null;
-  if (typeof component === 'function') {
-    const Component = component;
-    return <Component />;
-  }
-  return component;
-}
-
-// Usage in router config:
-// {
-//   path: "/",
-//   type: 'navigator',
-//   layout: 'stack',
-//   layoutComponent: WebStackLayout,
-//   options: {
-//     headerTitle: "My App",
-//     headerRight: <UserMenu />,
-//   },
-//   routes: [...]
-// }`,
-        explanation: `This layout mimics the native stack navigator header:
-
-**What it provides:**
-- Fixed header bar at the top (56px height like native)
-- Automatic back button that appears when canGoBack() returns true
-- headerTitle renders as text or custom component
-- headerLeft and headerRight slots for custom actions
-- headerShown: false hides the entire header
-- headerBackVisible: false hides just the back button
-
-**Key insight:** On web, canGoBack() checks if there's a parent route in the hierarchy, not browser history. This matches the native behavior where back goes "up" the navigation stack.`,
-        tips: [
-            "Use options.headerShown: false for fullscreen content like media players",
-            "The back button appears automatically - no need to manage visibility",
-            "headerRight is great for action buttons, user menus, or search",
-            "Wrap your entire app router with this for consistent headers",
-        ],
-        relatedRecipes: ["web-tab-layout", "web-drawer-layout", "responsive-navigation"],
-    },
-    "web-tab-layout": {
-        name: "Web Tab Layout",
-        description: "Tab layout for web that mimics native bottom tab navigator with icons, labels, and badges",
-        category: "navigation",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components", "@idealyst/navigation"],
-        code: `import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { View, Text, Pressable, Icon, Badge } from '@idealyst/components';
-import { useNavigator } from '@idealyst/navigation';
-import type { TabLayoutProps } from '@idealyst/navigation';
-
-/**
- * Web Tab Layout - mimics native bottom tab navigator
- *
- * Features:
- * - Bottom tab bar (like iOS/Android)
- * - Icons from tabBarIcon option
- * - Labels from tabBarLabel option
- * - Badge counts from tabBarBadge option
- * - Active state highlighting
- */
-export function WebTabLayout({ routes, currentPath }: TabLayoutProps) {
-  const { navigate } = useNavigator();
-
-  return (
-    <View style={{ flex: 1 }}>
-      {/* Content area - takes remaining space */}
-      <View style={{ flex: 1 }}>
-        <Outlet />
-      </View>
-
-      {/* Bottom tab bar */}
-      <View style={{
-        height: 56,
-        flexDirection: 'row',
-        backgroundColor: '#ffffff',
-        borderTopWidth: 1,
-        borderTopColor: '#e0e0e0',
-        // Safe area padding for mobile web
-        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-      }}>
-        {routes.map((route) => {
-          // Check if this tab is active
-          const isActive = currentPath === route.fullPath ||
-            currentPath.startsWith(route.fullPath + '/');
-
-          const tabOptions = route.options;
-          const activeColor = '#007AFF';
-          const inactiveColor = '#8E8E93';
-
-          return (
-            <Pressable
-              key={route.fullPath}
-              onPress={() => navigate({ path: route.fullPath })}
-              style={{
-                flex: 1,
-                alignItems: 'center',
-                justifyContent: 'center',
-                paddingVertical: 4,
-              }}
-            >
-              {/* Icon container with badge */}
-              <View style={{ position: 'relative' }}>
-                {tabOptions?.tabBarIcon?.({
-                  focused: isActive,
-                  color: isActive ? activeColor : inactiveColor,
-                  size: 24,
-                })}
-
-                {/* Badge */}
-                {tabOptions?.tabBarBadge != null && (
-                  <View style={{
-                    position: 'absolute',
-                    top: -4,
-                    right: -12,
-                    minWidth: 18,
-                    height: 18,
-                    borderRadius: 9,
-                    backgroundColor: '#FF3B30',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    paddingHorizontal: 4,
-                  }}>
-                    <Text style={{ color: '#fff', fontSize: 10, fontWeight: '600' }}>
-                      {typeof tabOptions.tabBarBadge === 'number' && tabOptions.tabBarBadge > 99
-                        ? '99+'
-                        : tabOptions.tabBarBadge}
-                    </Text>
-                  </View>
-                )}
-              </View>
-
-              {/* Label */}
-              {tabOptions?.tabBarLabel && (
-                <Text
-                  size="xs"
-                  style={{
-                    marginTop: 2,
-                    color: isActive ? activeColor : inactiveColor,
-                    fontWeight: isActive ? '600' : '400',
-                  }}
-                >
-                  {tabOptions.tabBarLabel}
-                </Text>
-              )}
-            </Pressable>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-// Usage in router config:
-// {
-//   path: "/main",
-//   type: 'navigator',
-//   layout: 'tab',
-//   layoutComponent: WebTabLayout,
-//   routes: [
-//     {
-//       path: "home",
-//       type: 'screen',
-//       component: HomeScreen,
-//       options: {
-//         tabBarLabel: "Home",
-//         tabBarIcon: ({ focused, color }) => (
-//           <Icon name={focused ? "home" : "home-outline"} color={color} />
-//         ),
-//       },
-//     },
-//     {
-//       path: "notifications",
-//       type: 'screen',
-//       component: NotificationsScreen,
-//       options: {
-//         tabBarLabel: "Notifications",
-//         tabBarIcon: ({ color }) => <Icon name="bell" color={color} />,
-//         tabBarBadge: 5,
-//       },
-//     },
-//   ],
-// }`,
-        explanation: `This layout mimics the native bottom tab bar:
-
-**What routes provide:**
-- \`route.fullPath\` - The complete path for navigation
-- \`route.options.tabBarIcon\` - Function that receives { focused, color, size }
-- \`route.options.tabBarLabel\` - Text label for the tab
-- \`route.options.tabBarBadge\` - Badge count (number or string)
-
-**Active state detection:**
-\`currentPath === route.fullPath\` - Exact match for active state
-Or use \`startsWith\` for nested routes under a tab
-
-**Platform parity:**
-- 56px tab bar height matches iOS/Android
-- Icon + label layout matches native patterns
-- Badge styling matches iOS notification badges
-- Safe area inset for mobile web browsers`,
-        tips: [
-            "Use outlined/filled icon variants for focused state (home-outline vs home)",
-            "Keep tab count to 3-5 for best usability",
-            "Badge counts over 99 should show '99+' to fit",
-            "Consider hiding the tab bar on detail screens with conditional rendering",
-        ],
-        relatedRecipes: ["web-stack-layout", "tab-navigation", "responsive-navigation"],
-    },
-    "web-drawer-layout": {
-        name: "Web Drawer/Sidebar Layout",
-        description: "Sidebar layout for web that provides persistent navigation menu with collapsible support",
-        category: "navigation",
-        difficulty: "intermediate",
-        packages: ["@idealyst/components", "@idealyst/navigation"],
-        code: `import React, { useState } from 'react';
-import { Outlet } from 'react-router-dom';
-import { View, Text, Pressable, Icon, Avatar } from '@idealyst/components';
-import { useNavigator } from '@idealyst/navigation';
-import type { StackLayoutProps } from '@idealyst/navigation';
-
-interface DrawerLayoutOptions {
-  expandedWidth?: number;
-  collapsedWidth?: number;
-  initiallyCollapsed?: boolean;
-}
-
-/**
- * Web Drawer Layout - persistent sidebar navigation
- *
- * Features:
- * - Collapsible sidebar with smooth animation
- * - Active route highlighting
- * - Icon + label navigation items
- * - User profile section
- * - Works with any navigator layout type
- */
-export function WebDrawerLayout({
-  routes,
-  currentPath,
-  options,
-}: StackLayoutProps & { drawerOptions?: DrawerLayoutOptions }) {
-  const { navigate } = useNavigator();
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  const expandedWidth = 240;
-  const collapsedWidth = 64;
-  const sidebarWidth = isCollapsed ? collapsedWidth : expandedWidth;
-
-  return (
-    <View style={{ flex: 1, flexDirection: 'row' }}>
-      {/* Sidebar */}
-      <View style={{
-        width: sidebarWidth,
-        backgroundColor: '#1a1a2e',
-        transition: 'width 0.2s ease',
-        overflow: 'hidden',
-      }}>
-        {/* Logo / App Header */}
-        <View style={{
-          height: 64,
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingHorizontal: 16,
-          borderBottomWidth: 1,
-          borderBottomColor: 'rgba(255,255,255,0.1)',
-        }}>
-          <Icon name="rocket" size={28} color="#fff" />
-          {!isCollapsed && (
-            <Text
-              variant="title"
-              style={{ color: '#fff', marginLeft: 12 }}
-            >
-              {options?.headerTitle || 'My App'}
-            </Text>
-          )}
-        </View>
-
-        {/* Navigation Items */}
-        <View style={{ flex: 1, paddingVertical: 8 }}>
-          {routes.map((route) => {
-            const isActive = currentPath === route.fullPath ||
-              currentPath.startsWith(route.fullPath + '/');
-
-            return (
-              <Pressable
-                key={route.fullPath}
-                onPress={() => navigate({ path: route.fullPath })}
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  paddingVertical: 12,
-                  paddingHorizontal: 16,
-                  marginHorizontal: 8,
-                  marginVertical: 2,
-                  borderRadius: 8,
-                  backgroundColor: isActive ? 'rgba(255,255,255,0.15)' : 'transparent',
-                }}
-              >
-                <Icon
-                  name={route.options?.icon || 'circle'}
-                  size={24}
-                  color={isActive ? '#fff' : 'rgba(255,255,255,0.6)'}
-                />
-                {!isCollapsed && (
-                  <Text
-                    style={{
-                      marginLeft: 12,
-                      color: isActive ? '#fff' : 'rgba(255,255,255,0.6)',
-                      fontWeight: isActive ? '600' : '400',
-                    }}
-                  >
-                    {route.options?.title || route.path}
-                  </Text>
-                )}
-              </Pressable>
-            );
-          })}
-        </View>
-
-        {/* User Section (optional) */}
-        <View style={{
-          padding: 16,
-          borderTopWidth: 1,
-          borderTopColor: 'rgba(255,255,255,0.1)',
-        }}>
-          <Pressable
-            style={{ flexDirection: 'row', alignItems: 'center' }}
-            onPress={() => navigate({ path: '/profile' })}
-          >
-            <Avatar size="sm" />
-            {!isCollapsed && (
-              <View style={{ marginLeft: 12 }}>
-                <Text style={{ color: '#fff', fontWeight: '500' }}>John Doe</Text>
-                <Text size="xs" style={{ color: 'rgba(255,255,255,0.5)' }}>
-                  View profile
-                </Text>
-              </View>
-            )}
-          </Pressable>
-        </View>
-
-        {/* Collapse Toggle */}
-        <Pressable
-          onPress={() => setIsCollapsed(!isCollapsed)}
-          style={{
-            padding: 16,
-            borderTopWidth: 1,
-            borderTopColor: 'rgba(255,255,255,0.1)',
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: isCollapsed ? 'center' : 'flex-start',
-          }}
-        >
-          <Icon
-            name={isCollapsed ? 'chevron-right' : 'chevron-left'}
-            size={20}
-            color="rgba(255,255,255,0.6)"
-          />
-          {!isCollapsed && (
-            <Text style={{ marginLeft: 12, color: 'rgba(255,255,255,0.6)' }}>
-              Collapse
-            </Text>
-          )}
-        </Pressable>
-      </View>
-
-      {/* Main Content */}
-      <View style={{ flex: 1, backgroundColor: '#f5f5f5' }}>
-        <Outlet />
-      </View>
-    </View>
-  );
-}
-
-// Usage:
-// {
-//   path: "/",
-//   type: 'navigator',
-//   layout: 'drawer',  // or 'stack' - layout type doesn't matter for web
-//   layoutComponent: WebDrawerLayout,
-//   options: { headerTitle: "Dashboard" },
-//   routes: [
-//     { path: "home", component: Home, options: { title: "Home", icon: "home" } },
-//     { path: "users", component: Users, options: { title: "Users", icon: "account-group" } },
-//     { path: "settings", component: Settings, options: { title: "Settings", icon: "cog" } },
-//   ],
-// }`,
-        explanation: `This sidebar layout is ideal for dashboards and admin panels:
-
-**Route options used:**
-- \`route.options.title\` - Menu item label
-- \`route.options.icon\` - Material Design Icon name
-
-**Features:**
-- Collapsible sidebar with smooth width transition
-- Active state with background highlight
-- User profile section at bottom
-- Collapse toggle button
-- Dark theme (easily customizable)
-
-**Why this differs from mobile:**
-On native, a drawer slides over content. On web, a persistent sidebar is more common and user-friendly. This layout provides the web-appropriate pattern while using the same route configuration.`,
-        tips: [
-            "Add tooltips on collapsed icons using the title attribute",
-            "Consider responsive behavior - hide sidebar on mobile, show bottom tabs instead",
-            "Use the icon option on routes to define sidebar icons",
-            "The collapse state could be persisted to localStorage",
-        ],
-        relatedRecipes: ["web-stack-layout", "responsive-navigation", "drawer-navigation"],
-    },
-    "responsive-navigation": {
-        name: "Responsive Navigation Layout",
-        description: "Layout that switches between bottom tabs on mobile and sidebar on desktop",
-        category: "navigation",
-        difficulty: "advanced",
-        packages: ["@idealyst/components", "@idealyst/navigation"],
-        code: `import React, { useState, useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
-import { View, Text, Pressable, Icon } from '@idealyst/components';
-import { useNavigator } from '@idealyst/navigation';
-import type { StackLayoutProps } from '@idealyst/navigation';
-
-// Custom hook for responsive breakpoints
-function useResponsive() {
-  const [width, setWidth] = useState(
-    typeof window !== 'undefined' ? window.innerWidth : 1024
-  );
-
-  useEffect(() => {
-    const handleResize = () => setWidth(window.innerWidth);
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  return {
-    isMobile: width < 768,
-    isTablet: width >= 768 && width < 1024,
-    isDesktop: width >= 1024,
-    width,
-  };
-}
-
-/**
- * Responsive Navigation Layout
- *
- * - Mobile (<768px): Bottom tab bar
- * - Desktop (>=768px): Sidebar navigation
- *
- * Uses the same route configuration for both!
- */
-export function ResponsiveNavLayout({ routes, currentPath, options }: StackLayoutProps) {
-  const { isMobile } = useResponsive();
-
-  // Same routes power both layouts
-  return isMobile ? (
-    <MobileTabBar routes={routes} currentPath={currentPath} />
-  ) : (
-    <DesktopSidebar routes={routes} currentPath={currentPath} options={options} />
-  );
-}
-
-// Mobile: Bottom tab bar
-function MobileTabBar({ routes, currentPath }: StackLayoutProps) {
-  const { navigate } = useNavigator();
-
-  return (
-    <View style={{ flex: 1 }}>
-      <View style={{ flex: 1 }}>
-        <Outlet />
-      </View>
-
-      <View style={{
-        flexDirection: 'row',
-        height: 56,
-        backgroundColor: '#fff',
-        borderTopWidth: 1,
-        borderTopColor: '#e0e0e0',
-        paddingBottom: 'env(safe-area-inset-bottom, 0px)',
-      }}>
-        {routes.slice(0, 5).map((route) => {
-          const isActive = currentPath.startsWith(route.fullPath);
-          return (
-            <Pressable
-              key={route.fullPath}
-              onPress={() => navigate({ path: route.fullPath })}
-              style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
-            >
-              <Icon
-                name={route.options?.icon || 'circle'}
-                size={24}
-                color={isActive ? '#007AFF' : '#8E8E93'}
-              />
-              <Text
-                size="xs"
-                style={{
-                  marginTop: 2,
-                  color: isActive ? '#007AFF' : '#8E8E93',
-                }}
-              >
-                {route.options?.tabBarLabel || route.options?.title}
-              </Text>
-            </Pressable>
-          );
-        })}
-      </View>
-    </View>
-  );
-}
-
-// Desktop: Sidebar
-function DesktopSidebar({ routes, currentPath, options }: StackLayoutProps) {
-  const { navigate } = useNavigator();
-  const [isCollapsed, setIsCollapsed] = useState(false);
-
-  return (
-    <View style={{ flex: 1, flexDirection: 'row' }}>
-      {/* Sidebar */}
-      <View style={{
-        width: isCollapsed ? 64 : 240,
-        backgroundColor: '#1e1e2d',
-        transition: 'width 0.2s',
-      }}>
-        {/* Header */}
-        <View style={{
-          height: 64,
-          flexDirection: 'row',
-          alignItems: 'center',
-          paddingHorizontal: 16,
-        }}>
-          <Icon name="rocket" size={28} color="#fff" />
-          {!isCollapsed && (
-            <Text style={{ color: '#fff', marginLeft: 12, fontWeight: '600' }}>
-              {options?.headerTitle || 'App'}
-            </Text>
-          )}
-        </View>
-
-        {/* Nav Items */}
-        <View style={{ flex: 1, paddingTop: 8 }}>
-          {routes.map((route) => {
-            const isActive = currentPath.startsWith(route.fullPath);
-            return (
-              <Pressable
-                key={route.fullPath}
-                onPress={() => navigate({ path: route.fullPath })}
-                style={{
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  padding: 12,
-                  marginHorizontal: 8,
-                  marginVertical: 2,
-                  borderRadius: 8,
-                  backgroundColor: isActive ? 'rgba(255,255,255,0.1)' : 'transparent',
-                }}
-              >
-                <Icon
-                  name={route.options?.icon || 'circle'}
-                  size={24}
-                  color={isActive ? '#fff' : 'rgba(255,255,255,0.6)'}
-                />
-                {!isCollapsed && (
-                  <Text style={{
-                    marginLeft: 12,
-                    color: isActive ? '#fff' : 'rgba(255,255,255,0.6)',
-                  }}>
-                    {route.options?.title}
-                  </Text>
-                )}
-              </Pressable>
-            );
-          })}
-        </View>
-
-        {/* Collapse toggle */}
-        <Pressable
-          onPress={() => setIsCollapsed(!isCollapsed)}
-          style={{ padding: 16 }}
-        >
-          <Icon
-            name={isCollapsed ? 'menu' : 'menu-open'}
-            size={24}
-            color="rgba(255,255,255,0.6)"
-          />
-        </Pressable>
-      </View>
-
-      {/* Content */}
-      <View style={{ flex: 1 }}>
-        <Outlet />
-      </View>
-    </View>
-  );
-}
-
-// Usage - works with same routes for both mobile and desktop:
-// {
-//   path: "/",
-//   type: 'navigator',
-//   layout: 'stack',
-//   layoutComponent: ResponsiveNavLayout,
-//   options: { headerTitle: "My App" },
-//   routes: [
-//     {
-//       path: "home",
-//       component: HomeScreen,
-//       options: {
-//         title: "Home",          // Used by sidebar
-//         tabBarLabel: "Home",    // Used by tab bar
-//         icon: "home",           // Used by both
-//       },
-//     },
-//     {
-//       path: "search",
-//       component: SearchScreen,
-//       options: { title: "Search", tabBarLabel: "Search", icon: "magnify" },
-//     },
-//     // ... more routes
-//   ],
-// }`,
-        explanation: `This layout automatically adapts to screen size:
-
-**Breakpoint logic:**
-- Mobile (<768px): Bottom tab bar like native apps
-- Desktop (>=768px): Persistent sidebar like web apps
-
-**Key insight:** The same route configuration powers both layouts! Routes define:
-- \`title\` - Used by sidebar menu
-- \`tabBarLabel\` - Used by tab bar (falls back to title)
-- \`icon\` - Used by both
-
-**Why this matters:**
-1. Write routes once, render appropriately per device
-2. Users get the expected pattern for their device
-3. No need for separate mobile/desktop route configs
-4. Smooth transition when resizing browser
-
-**useResponsive hook:**
-Custom hook that tracks window width and provides boolean flags for breakpoints. Could be extended with more breakpoints or use a library like react-responsive.`,
-        tips: [
-            "Limit mobile tabs to 5 items max (slice shown in code)",
-            "Consider adding a 'More' tab that opens a menu for additional items",
-            "Persist sidebar collapsed state to localStorage",
-            "Add transition animation when switching between layouts",
-            "Consider tablet-specific layout (sidebar + different styling)",
-        ],
-        relatedRecipes: ["web-stack-layout", "web-tab-layout", "web-drawer-layout"],
-    },
-};
-/**
- * Get all recipes grouped by category
- */
-export function getRecipesByCategory() {
-    const grouped = {};
-    for (const recipe of Object.values(recipes)) {
-        if (!grouped[recipe.category]) {
-            grouped[recipe.category] = [];
-        }
-        grouped[recipe.category].push(recipe);
-    }
-    return grouped;
-}
-/**
- * Get a summary list of all recipes
- */
-export function getRecipeSummary() {
-    return Object.entries(recipes).map(([id, recipe]) => ({
-        id,
-        name: recipe.name,
-        description: recipe.description,
-        category: recipe.category,
-        difficulty: recipe.difficulty,
-        packages: recipe.packages,
-    }));
-}
-/**
- * Search recipes by query
- */
-export function searchRecipes(query) {
-    const lowerQuery = query.toLowerCase();
-    return Object.values(recipes).filter((recipe) => recipe.name.toLowerCase().includes(lowerQuery) ||
-        recipe.description.toLowerCase().includes(lowerQuery) ||
-        recipe.category.toLowerCase().includes(lowerQuery) ||
-        recipe.packages.some((p) => p.toLowerCase().includes(lowerQuery)));
-}
-//# sourceMappingURL=recipes.js.map