fix: iOS nav stack — complete swipe-back + skeleton loader + nav fix

- Swipe-back now completes fully (manual touch handlers, no framer-motion drag)
- No more black screen on back navigation (delayed stack cleanup)
- Skeleton loading screen (shimmer animation)
- Mobile nav: no duplicate home button, Categories replaces Chat, Discover → /videos

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nextjs_tailwind_shadcn_ts",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000 2>&1 | tee dev.log",

public/public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

src/app/globals.css

@@ -286,6 +286,13 @@ button {
   animation: shimmer 1.5s infinite;
 }
 
+/* Shimmer utility — used by loading.tsx skeleton */
+.shimmer {
+  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
 /* Hover lift effect */
 .hover-lift {
   transition: all 0.2s ease;

src/app/loading.tsx

@@ -1,103 +1,71 @@
-'use client';
-
-import { motion, useMotionValue, useTransform } from 'framer-motion';
-import { useRef } from 'react';
-
 /**
- * Playable Skeleton Loader — engagement over waiting.
- * 
- * Instead of a boring spinner, the user sees:
- * 1. Draggable "C" logo with 2D physics (bounces off edges)
- * 2. Playable skeleton cards they can swipe around
- * 3. Smooth spring animations everywhere
- * 
- * Turns waiting into a moment of play.
+ * Loading — skeleton view shown while a page is being loaded.
+ *
+ * This is Next.js's built-in loading.tsx convention. It automatically
+ * wraps every route segment in a Suspense boundary and shows this
+ * skeleton while the page's data is being fetched.
+ *
+ * The skeleton mimics the general layout of a Cellex page:
+ *   - Top bar (back button + title placeholder)
+ *   - Content blocks (shimmer cards)
+ *   - Bottom nav placeholder
  */
 export default function Loading() {
-  const x = useMotionValue(0);
-  const y = useMotionValue(0);
-  const containerRef = useRef<HTMLDivElement>(null);
-
   return (
-    <div ref={containerRef} className="fixed inset-0 z-[9999] bg-white flex flex-col items-center justify-center overflow-hidden">
-      {/* Draggable C logo with physics */}
-      <motion.div
-        drag
-        dragConstraints={containerRef}
-        dragElastic={0.6}
-        dragTransition={{ bounceStiffness: 400, bounceDamping: 15 }}
-        style={{ x, y }}
-        className="cursor-grab active:cursor-grabbing mb-10 relative"
-      >
-        {/* Outer rotating ring */}
-        <motion.div
-          animate={{ rotate: 360 }}
-          transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
-          className="w-20 h-20 rounded-full border-[3px] border-neutral-200"
-          style={{ borderTopColor: '#000' }}
-        />
-        {/* Inner C (pulsing) */}
-        <motion.div
-          animate={{ scale: [1, 1.1, 1] }}
-          transition={{ duration: 1.2, repeat: Infinity, ease: 'easeInOut' }}
-          className="absolute inset-0 flex items-center justify-center"
-        >
-          <span className="text-3xl font-extrabold text-black" style={{ fontFamily: 'var(--font-geist-mono)' }}>C</span>
-        </motion.div>
-      </motion.div>
+    <div className="min-h-screen bg-white flex flex-col">
+      {/* Top bar skeleton */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-slate-100">
+        <div className="w-8 h-8 rounded-full bg-slate-100 shimmer" />
+        <div className="flex-1 h-5 rounded-full bg-slate-100 shimmer" />
+        <div className="w-8 h-8 rounded-full bg-slate-100 shimmer" />
+      </div>
+
+      {/* Content skeleton — mimics a product grid */}
+      <div className="flex-1 p-4 space-y-4">
+        {/* Hero banner placeholder */}
+        <div className="w-full h-40 rounded-2xl bg-slate-100 shimmer" />
+
+        {/* Section title */}
+        <div className="w-32 h-4 rounded-full bg-slate-100 shimmer" />
 
-      {/* Playable skeleton cards (draggable) */}
-      <div className="flex gap-3 mb-8 px-8">
-        {[0, 1, 2].map(i => (
-          <motion.div
-            key={i}
-            drag
-            dragConstraints={containerRef}
-            dragElastic={0.4}
-            dragTransition={{ bounceStiffness: 300, bounceDamping: 20 }}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: i * 0.1 }}
-            className="w-24 h-32 rounded-xl bg-neutral-100 overflow-hidden cursor-grab active:cursor-grabbing shadow-sm"
-          >
-            <div className="w-full h-16 skeleton" />
-            <div className="p-2 space-y-1.5">
-              <div className="skeleton h-2 rounded w-full" />
-              <div className="skeleton h-2 rounded w-2/3" />
-              <div className="skeleton h-3 rounded w-1/2" />
+        {/* Product grid 2x3 */}
+        <div className="grid grid-cols-2 gap-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="space-y-2">
+              <div className="w-full aspect-square rounded-xl bg-slate-100 shimmer" />
+              <div className="w-3/4 h-3 rounded-full bg-slate-100 shimmer" />
+              <div className="w-1/2 h-3 rounded-full bg-slate-100 shimmer" />
             </div>
-          </motion.div>
-        ))}
-      </div>
+          ))}
+        </div>
 
-      {/* Bouncing dots */}
-      <div className="flex gap-2 mb-3">
-        {[0, 1, 2].map(i => (
-          <motion.span
-            key={i}
-            animate={{ scale: [0.5, 1, 0.5], opacity: [0.3, 1, 0.3] }}
-            transition={{ duration: 1.4, repeat: Infinity, delay: i * 0.16, ease: 'easeInOut' }}
-            className="w-2.5 h-2.5 rounded-full bg-black"
-          />
-        ))}
+        {/* Another section */}
+        <div className="w-40 h-4 rounded-full bg-slate-100 shimmer" />
+        <div className="flex gap-3 overflow-hidden">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <div key={i} className="flex-shrink-0 w-32 space-y-2">
+              <div className="w-full h-32 rounded-xl bg-slate-100 shimmer" />
+              <div className="w-3/4 h-3 rounded-full bg-slate-100 shimmer" />
+            </div>
+          ))}
+        </div>
       </div>
 
-      <motion.p
-        animate={{ opacity: [0.3, 0.7, 0.3] }}
-        transition={{ duration: 2, repeat: Infinity, ease: 'easeInOut' }}
-        className="text-xs text-neutral-400 font-medium tracking-wide"
-      >
-        Loading
-      </motion.p>
-
-      <motion.p
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 0.4 }}
-        transition={{ delay: 1.5 }}
-        className="absolute bottom-8 text-[10px] text-neutral-300"
-      >
-        Drag the logo or cards to play ↑
-      </motion.p>
+      {/* Bottom nav skeleton */}
+      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-100 px-4 py-2">
+        <div className="flex items-center justify-around max-w-lg mx-auto">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i} className="flex flex-col items-center gap-1">
+              <div
+                className={`rounded-full bg-slate-100 shimmer ${
+                  i === 2 ? 'w-10 h-10' : 'w-5 h-5'
+                }`}
+              />
+              <div className="w-10 h-2 rounded-full bg-slate-100 shimmer" />
+            </div>
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

src/components/ios-stack.tsx

@@ -4,89 +4,144 @@
  * IOSStack — true iOS-style navigation stack for Next.js App Router.
  *
  * Architecture:
- *   1. Keeps a history array of pages so the "previous" page stays alive
- *      in the DOM (unlike default Next.js which unmounts it).
- *   2. A shared MotionValue (`activeDragX`) connects the drag of the top
- *      page to the parallax movement of the page behind it.
- *   3. Only the top 2 pages are rendered at any time (memory optimization).
+ *   1. Maintains a history array of pages so the "previous" page stays alive.
+ *   2. A shared MotionValue (`dragX`) is the SINGLE source of truth for the
+ *      horizontal position of the TOP page. The BEHIND page's x is derived
+ *      from it via `useTransform` (parallax).
+ *   3. ALL animations are driven by `animate(dragX, ...)` calls — no
+ *      framer-motion variants, no `drag` prop, no AnimatePresence. This
+ *      avoids the MotionValue-vs-variant conflict that caused the exit
+ *      animation to freeze.
  *
- * Bug fixes vs. the original spec:
- *   - Removed `useSearchParams` from the dependency array — it would cause
- *     the effect to fire on every render (since `children` changes each time)
- *     and also requires a Suspense boundary which breaks static export.
- *     We now key the stack on `pathname` only; search-param changes update
- *     the top page in-place (no stack push).
- *   - Added a "same path" check so re-renders that don't change the pathname
- *     update the top item's component instead of pushing a duplicate.
- *   - Guarded against SSR (stack starts empty, fills on first client render).
+ * Navigation flow:
+ *   PUSH:  dragX set to W → animated to 0. New page slides in from right,
+ *          old page shifts to parallax (-30%).
+ *   BACK (drag):  Screen animates dragX to W (page slides off), THEN calls
+ *                 onBack. Stack removes the exiting page, dragX reset to 0.
+ *   BACK (button): IOSStack marks top as exiting, animates dragX to W,
+ *                  then removes it and resets dragX.
  */
 
 import { usePathname, useRouter } from 'next/navigation';
-import { useMotionValue, AnimatePresence } from 'framer-motion';
+import { useMotionValue, useTransform, animate } from 'framer-motion';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { Screen } from '@/components/screen';
 
 interface StackItem {
   key: string;
   component: React.ReactNode;
+  isExiting?: boolean;
 }
 
+const IOS_SPRING = { type: 'spring' as const, stiffness: 350, damping: 40, mass: 1 };
+const SLIDE_EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
+
 export function IOSStack({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
   const router = useRouter();
 
-  // 1. The History Stack
   const [stack, setStack] = useState<StackItem[]>([]);
   const isBack = useRef(false);
-  const isReady = useRef(false);
+  const isDragBack = useRef(false); // true when back was triggered by a drag (animation already done)
+  const isAnimating = useRef(false); // prevent double-animation
 
-  // 2. Shared Physics State
-  // This value tracks the drag position of the TOP page.
-  // We pass it down so the page BEHIND can "watch" the drag and move in parallax.
-  const activeDragX = useMotionValue(0);
+  // Single shared MotionValue — the x position of the TOP page
+  const dragX = useMotionValue(0);
 
-  // 3. Navigation detection — only fires on pathname change, NOT on every children update
-  useEffect(() => {
-    const fullPath = pathname;
+  // Parallax transform for the BEHIND page
+  const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 375;
+  const parallaxX = useTransform(dragX, [0, windowWidth], [-windowWidth * 0.3, 0]);
+  const overlayOpacity = useTransform(dragX, [0, windowWidth], [0.35, 0]);
 
+  // ---- Navigation handler — fires on every pathname change ----
+  useEffect(() => {
+    const ww = typeof window !== 'undefined' ? window.innerWidth : 375;
+
+    if (isDragBack.current) {
+      // Back was triggered by a drag — the Screen already animated dragX to W.
+      // Just clean up the stack and reset.
+      isDragBack.current = false;
+      isBack.current = true;
+      setStack((prev) => {
+        const cleaned = prev.filter((item) => !item.isExiting);
+        return cleaned.slice(0, -1); // remove the top (exiting) page
+      });
+      // Reset dragX to 0 — the remaining page was at parallaxX(0)=0 when dragX was W,
+      // and now it becomes the top with x=dragX=0. No visual jump.
+      dragX.set(0);
+      return;
+    }
+
+    // Normal navigation (push or browser-back)
     setStack((prev) => {
-      // First render — just add the initial page
       if (prev.length === 0) {
         isBack.current = false;
-        return [{ key: fullPath, component: children }];
+        return [{ key: pathname, component: children }];
       }
 
-      // Back detection: if the new path matches the item below the top, it's a "Back" action
-      if (prev.length > 1 && prev[prev.length - 2].key === fullPath) {
+      // Back detection
+      if (prev.length > 1 && prev[prev.length - 2].key === pathname) {
         isBack.current = true;
-        return prev.slice(0, -1); // remove the top item
+        // Mark the top as exiting — DON'T remove it yet (need it for the animation)
+        return prev.map((item, i) =>
+          i === prev.length - 1 ? { ...item, isExiting: true } : item
+        );
       }
 
-      // Same path (e.g. search params changed) — just update the top item's component
-      if (prev[prev.length - 1].key === fullPath) {
+      // Same path — just update the top's component
+      if (prev[prev.length - 1].key === pathname) {
         isBack.current = false;
-        return [...prev.slice(0, -1), { key: fullPath, component: children }];
+        return [...prev.slice(0, -1), { key: pathname, component: children }];
       }
 
-      // Otherwise, it's a "Push" action
+      // Push
       isBack.current = false;
-      return [...prev, { key: fullPath, component: children }];
+      // Clean up any stale exiting items
+      const clean = prev.filter((item) => !item.isExiting);
+      return [...clean, { key: pathname, component: children }];
     });
 
-    // Reset drag value on navigation
-    activeDragX.set(0);
-    isReady.current = true;
+    if (isBack.current) {
+      // Button back (not drag) — need to animate dragX from 0 to W
+      isAnimating.current = true;
+      animate(dragX, ww, {
+        duration: 0.3,
+        ease: SLIDE_EASE,
+        onComplete: () => {
+          isAnimating.current = false;
+          // Now remove the exiting page and reset
+          setStack((prev) => prev.filter((item) => !item.isExiting).slice(0, -1));
+          dragX.set(0);
+        },
+      });
+    } else {
+      // Push — set dragX to W, then animate to 0
+      isAnimating.current = true;
+      dragX.set(ww);
+      animate(dragX, 0, {
+        ...IOS_SPRING,
+        onComplete: () => {
+          isAnimating.current = false;
+        },
+      });
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
-  // Update the top item's component whenever children changes (without pushing)
-  // This ensures context updates (cart count, auth, etc.) propagate to the visible page.
+  // ---- Update top component when children changes (context propagation) ----
   const updateTopComponent = useCallback(() => {
     setStack((prev) => {
       if (prev.length === 0) return prev;
-      const top = prev[prev.length - 1];
-      if (top.key === pathname) {
-        return [...prev.slice(0, -1), { key: top.key, component: children }];
+      // Find the top non-exiting item
+      for (let i = prev.length - 1; i >= 0; i--) {
+        if (!prev[i].isExiting) {
+          if (prev[i].key === pathname) {
+            const updated = [...prev];
+            updated[i] = { ...updated[i], component: children };
+            return updated;
+          }
+          break;
+        }
       }
       return prev;
     });
@@ -97,11 +152,20 @@ export function IOSStack({ children }: { children: React.ReactNode }) {
     updateTopComponent();
   }, [children, updateTopComponent]);
 
-  // Hydration safety — don't render anything until the first effect runs
+  // ---- Handle drag-triggered back ----
+  const handleDragBack = useCallback(() => {
+    // The Screen already animated dragX to W. We just need to trigger the route change.
+    isDragBack.current = true;
+    router.back();
+  }, [router]);
+
+  // ---- Render ----
   if (stack.length === 0) {
     return null;
   }
 
+  const hasExiting = stack.some((item) => item.isExiting);
+
   return (
     <div
       style={{
@@ -111,28 +175,34 @@ export function IOSStack({ children }: { children: React.ReactNode }) {
         background: '#000',
       }}
     >
-      <AnimatePresence initial={false} custom={isBack.current}>
-        {stack.map((item, index) => {
-          const isTop = index === stack.length - 1;
-          const isBehind = index === stack.length - 2;
-
-          // Optimization: Only render the top 2 pages to save memory
-          if (!isTop && !isBehind) return null;
-
-          return (
-            <Screen
-              key={item.key}
-              index={index}
-              isTop={isTop}
-              isBack={isBack.current}
-              dragX={activeDragX}
-              onBack={() => router.back()}
-            >
-              {item.component}
-            </Screen>
-          );
-        })}
-      </AnimatePresence>
+      {stack.map((item, index) => {
+        const isExiting = !!item.isExiting;
+        const isLast = index === stack.length - 1;
+        const isSecondLast = index === stack.length - 2;
+
+        // Only render the top 2 non-exit-hidden items + any exiting item
+        if (!isLast && !isSecondLast && !isExiting) return null;
+
+        // Determine role:
+        // - EXITING page: uses dragX (sliding off-screen)
+        // - TOP page (no exiting): uses dragX (draggable)
+        // - BEHIND page OR new top (when exiting exists): uses parallaxX
+        const useDragX = isExiting || (isLast && !hasExiting);
+        const useParallaxX = !useDragX;
+
+        return (
+          <Screen
+            key={item.key}
+            isTop={isLast && !isExiting}
+            isExiting={isExiting}
+            xValue={useDragX ? dragX : parallaxX}
+            overlayOpacity={useParallaxX ? overlayOpacity : undefined}
+            onBack={handleDragBack}
+          >
+            {item.component}
+          </Screen>
+        );
+      })}
     </div>
   );
 }

src/components/mobile-nav.tsx

@@ -2,13 +2,25 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Home, MessageCircle, Compass, ShoppingCart, User } from 'lucide-react';
+import { Home, Search, Compass, ShoppingCart, User } from 'lucide-react';
 import { useAuth } from '@/components/auth-provider';
 
+/**
+ * MobileNav — bottom navigation bar.
+ *
+ * Architecture (per user's "Hidden Engine" vision):
+ *   - Home: the immersive Instagram-style feed (/)
+ *   - Categories: the "hidden engine" — lightning-fast search & category tab
+ *   - [center] Discover: immersive video/content discovery (/videos)
+ *   - Cart: shopping cart
+ *   - Account: user profile
+ *
+ * No two buttons point to the same route.
+ */
 const navItems = [
   { href: '/', label: 'Home', icon: Home },
-  { href: '/ai-chat', label: 'Chat', icon: MessageCircle },
-  { href: '/', label: 'Discover', icon: Compass, center: true },
+  { href: '/categories', label: 'Categories', icon: Search },
+  { href: '/videos', label: 'Discover', icon: Compass, center: true },
   { href: '/cart', label: 'Cart', icon: ShoppingCart, showBadge: true },
   { href: '/profile', label: 'Account', icon: User, showDot: true },
 ];
@@ -18,7 +30,10 @@ export function MobileNav() {
   const { cartCount, user } = useAuth();
 
   return (
-    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-slate-200 md:hidden">
+    <nav
+      className="fixed bottom-0 left-0 right-0 z-[60] bg-white border-t border-slate-200 md:hidden"
+      style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+    >
       <div className="flex items-center justify-around max-w-lg mx-auto py-2 relative">
         {navItems.map((item) => {
           const isActive = pathname === item.href;

src/components/screen.tsx

@@ -3,110 +3,168 @@
 /**
  * Screen — the interactive view layer for the IOSStack.
  *
- * Each Screen represents one page in the navigation stack.
+ * Each Screen is an absolutely-positioned layer. Its horizontal position
+ * is controlled by a MotionValue passed from IOSStack:
+ *   - TOP page: x = dragX (draggable via touch)
+ *   - BEHIND page: x = parallaxX (derived from dragX)
+ *   - EXITING page: x = dragX (animating to W)
  *
- *   - The TOP page is draggable (swipe right to go back).
- *   - The BEHIND page follows the top page's drag in parallax (0 → -30%).
- *   - A dark overlay dims the behind page; it fades as the top page is dragged away.
- *   - Uses framer-motion spring physics tuned to feel like iOS.
+ * Drag gesture:
+ *   - Touch must start within EDGE_ZONE_PX of the left edge
+ *   - Only horizontal-dominant gestures are intercepted (vertical = page scroll)
+ *   - On release: if past COMMIT_THRESHOLD → animate dragX to W, then onBack()
+ *                 otherwise → animate dragX back to 0 (snap back)
  */
 
-import { motion, useTransform, type MotionValue, type PanInfo } from 'framer-motion';
-import { type ReactNode, useMemo } from 'react';
+import { motion, animate, type MotionValue } from 'framer-motion';
+import {
+  type ReactNode,
+  useRef,
+  useState,
+  type TouchEvent as ReactTouchEvent,
+  useEffect,
+} from 'react';
 
-// Tuned Physics: High stiffness/damping for that "Apple" snap
-const IOS_SPRING = {
-  type: 'spring' as const,
-  stiffness: 350,
-  damping: 40,
-  mass: 1,
-};
+const EDGE_ZONE_PX = 28;
+const COMMIT_THRESHOLD_PX = 120;
+const DRAG_MAX_PX = 320;
+const SLIDE_EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
+const SNAP_EASE: [number, number, number, number] = [0.32, 0.72, 0, 1];
 
 interface ScreenProps {
   children: ReactNode;
-  index: number;
   isTop: boolean;
-  isBack: boolean;
-  dragX: MotionValue<number>;
+  isExiting: boolean;
+  xValue: MotionValue<number>;
+  overlayOpacity?: MotionValue<number>;
   onBack: () => void;
 }
 
-export function Screen({ children, index, isTop, isBack, dragX, onBack }: ScreenProps) {
-  // Calculate window width once (client-side only — this component is 'use client')
-  const windowWidth = useMemo(() => {
-    if (typeof window === 'undefined') return 375;
-    return window.innerWidth;
-  }, []);
-
-  // -- PARALLAX LOGIC --
-  // If we are the page BEHIND, we map the Top Page's drag (0px -> ScreenWidth)
-  // to our parallax movement (-30% -> 0%).
-  const parallaxX = useTransform(dragX, [0, windowWidth], [-windowWidth * 0.3, 0]);
-
-  // We also fade the black dimming overlay as the top page is dragged away
-  const overlayOpacity = useTransform(dragX, [0, windowWidth], [0.3, 0]);
-
-  // -- ANIMATION VARIANTS --
-  const variants = {
-    initial: (back: boolean) => ({
-      // If pushing: enter from right (100%)
-      // If popping: start at parallax position (-30%)
-      x: back ? '-30%' : '100%',
-      zIndex: index,
-    }),
-    animate: {
-      x: 0,
-      zIndex: index,
-      transition: IOS_SPRING,
-    },
-    exit: (back: boolean) => ({
-      // If pushing: move to parallax position (-30%)
-      // If popping: slide out to right (100%)
-      x: back ? '100%' : '-30%',
-      zIndex: index,
-      transition: IOS_SPRING,
-    }),
-  };
-
-  const handleDragEnd = (_: unknown, info: PanInfo) => {
-    const velocity = info.velocity.x;
-    const offset = info.offset.x;
-    const threshold = windowWidth * 0.35;
-
-    // Trigger 'Back' if dragged 35% of screen OR flicked fast
-    if (offset > threshold || velocity > 400) {
-      onBack();
+export function Screen({ children, isTop, isExiting, xValue, overlayOpacity, onBack }: ScreenProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const touchState = useRef<{
+    startX: number;
+    startY: number;
+    active: boolean;
+    horizontal: boolean | null;
+  } | null>(null);
+
+  // Get window width (cached)
+  const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 375;
+
+  // ---- Touch handlers (only for the TOP, non-exiting page) ----
+  function onTouchStart(e: ReactTouchEvent<HTMLDivElement>) {
+    if (!isTop || isExiting) return;
+    const t = e.touches[0];
+    if (!t) return;
+
+    // Only start tracking if touch is in the left edge zone
+    if (t.clientX > EDGE_ZONE_PX) {
+      touchState.current = null;
+      return;
+    }
+
+    touchState.current = {
+      startX: t.clientX,
+      startY: t.clientY,
+      active: true,
+      horizontal: null,
+    };
+  }
+
+  function onTouchMove(e: ReactTouchEvent<HTMLDivElement>) {
+    if (!isTop || isExiting) return;
+    const state = touchState.current;
+    if (!state || !state.active) return;
+
+    const t = e.touches[0];
+    if (!t) return;
+    const dx = t.clientX - state.startX;
+    const dy = t.clientY - state.startY;
+
+    // Decide gesture direction on first significant move
+    if (state.horizontal === null) {
+      const absDx = Math.abs(dx);
+      const absDy = Math.abs(dy);
+      if (absDx < 8 && absDy < 8) return;
+      // Vertical-dominant → let the browser handle it (page scroll)
+      if (absDy > absDx) {
+        state.active = false;
+        return;
+      }
+      state.horizontal = true;
+      setIsDragging(true);
+    }
+
+    if (!state.horizontal) return;
+
+    // Prevent vertical scroll while dragging horizontally
+    if (e.cancelable) e.preventDefault();
+
+    // Follow the finger, capped at DRAG_MAX_PX
+    const clamped = Math.max(0, Math.min(dx, DRAG_MAX_PX));
+    xValue.set(clamped);
+  }
+
+  function onTouchEnd() {
+    if (!isTop || isExiting) return;
+    const state = touchState.current;
+    touchState.current = null;
+    if (!state || !state.active || !state.horizontal) {
+      setIsDragging(false);
+      return;
+    }
+
+    const current = xValue.get();
+    if (current >= COMMIT_THRESHOLD_PX) {
+      // COMMIT: animate the page all the way off-screen, THEN navigate back
+      animate(xValue, windowWidth, {
+        duration: 0.3,
+        ease: SLIDE_EASE,
+        onComplete: () => {
+          onBack();
+        },
+      });
+    } else {
+      // CANCEL: snap back to 0
+      animate(xValue, 0, {
+        duration: 0.24,
+        ease: SNAP_EASE,
+        onComplete: () => setIsDragging(false),
+      });
     }
-  };
+  }
 
+  // ---- Render ----
   return (
     <motion.div
       style={{
         position: 'absolute',
         inset: 0,
+        x: xValue,
         background: '#fff',
-        boxShadow: isTop ? '-10px 0 25px rgba(0,0,0,0.2)' : 'none',
-        // CRITICAL: If Top, use the raw drag value. If Behind, use the calculated parallax.
-        x: isTop ? dragX : parallaxX,
+        boxShadow: isTop && !isExiting ? '-10px 0 25px rgba(0,0,0,0.2)' : 'none',
+        zIndex: isExiting ? 2 : isTop ? 2 : 1,
       }}
-      initial="initial"
-      animate="animate"
-      exit="exit"
-      variants={variants}
-      custom={isBack}
-      // Only enable gestures if this is the active top page
-      drag={isTop ? 'x' : false}
-      dragConstraints={{ left: 0, right: 0 }}
-      dragElastic={{ left: 0, right: 1 }}
-      onDragEnd={handleDragEnd}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={onTouchEnd}
+      onTouchCancel={onTouchEnd}
     >
-      {/* Page Content — each screen has its own scroll container */}
-      <div style={{ height: '100%', overflowY: 'auto', WebkitOverflowScrolling: 'touch' }}>
+      {/* Page content — each screen has its own scroll container */}
+      <div
+        style={{
+          height: '100%',
+          overflowY: 'auto',
+          WebkitOverflowScrolling: 'touch',
+          background: '#fff',
+        }}
+      >
         {children}
       </div>
 
-      {/* Dimming Overlay (Only for the page sitting behind) */}
-      {!isTop && (
+      {/* Dimming overlay for the BEHIND page */}
+      {overlayOpacity && (
         <motion.div
           style={{
             position: 'absolute',