4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T973,"use client"; import { useDeckController } from "@/components/ui/slide-cn/use-deck-controller"; import { useKeyboardNavigation } from "@/components/ui/slide-cn/use-keyboard-navigation"; import { NavigationToast } from "@/components/ui/slide-cn/navigation-toast"; import React from "react"; import { AnimatePresence } from "motion/react"; import { SlideNav } from "@/components/ui/slide-cn/slide-nav"; import { cn } from "@/lib/utils"; /** * Deck * * Root container for a slide presentation. * * Responsibilities: * - Owns viewport height (`h-screen`) * - Manages active slide index * - Handles global navigation (keyboard, nav UI) * - Provides deck state via context * * Non-responsibilities: * - Does NOT manage slide layout or content * - Does NOT manage per-slide scroll behavior * - Does NOT impose styling on slides * * Usage: * ```tsx * * ... * ... * * ``` * * Notes: * - Deck must be mounted in a client component * - Slides are rendered one at a time via AnimatePresence * - Height is fixed to the viewport; do not nest Deck inside another Deck */ const DeckContext = React.createContext | null>(null); type NavigationToastProps = { duration?: number; desktopMessage?: string; mobileMessage?: string; className?: string; }; type DeckProps = { children: React.ReactNode; className?: string; showNavigationToast?: boolean; navigationToastProps?: NavigationToastProps; }; export function Deck({ children, className, showNavigationToast = true, navigationToastProps }: DeckProps) { const slides = React.Children.toArray(children); const deck = useDeckController(slides.length); useKeyboardNavigation({ onNext: deck.next, onPrev: deck.prev }); return (

{slides[deck.index]}

{showNavigationToast && }

); } export function useDeck() { const ctx = React.useContext(DeckContext); if (!ctx) throw new Error("useDeck must be used inside Deck"); return ctx; } 51:T8ec,"use client"; import React from "react"; import { motion } from "motion/react"; import { useDeck } from "@/components/ui/slide-cn/deck"; import { SlideFooter } from "@/components/ui/slide-cn/slide-footer"; /** * Slide * * Main container for each slide. * * Responsibilities: * - Handles the transition animation between slides * - Handles swipe navigation on mobile * - Renders a background for the slide if provided, and a footer by default * * Non Responsibilities: * - Does not handle slide layout * * Usage: * ```tsx * * }> * {slide content} * * * ``` */ type SlideProps = { children: React.ReactNode; background?: React.ReactNode; footer?: React.ReactNode; }; export function Slide({ children, background, footer = }: SlideProps) { const deck = useDeck(); return ( {/* Background layer (viewport-scoped, never scrolls) */} {background && (

{background}

)} {/* Scroll layer (mobile scroll lives here) */} { const swipeDistance = info.offset.x; const swipeVelocity = info.velocity.x; const DISTANCE_THRESHOLD = 60; const VELOCITY_THRESHOLD = 600; if (Math.abs(info.offset.y) > Math.abs(info.offset.x)) return; if ( swipeDistance > DISTANCE_THRESHOLD || swipeVelocity > VELOCITY_THRESHOLD ) { deck.prev(); } else if ( swipeDistance < -DISTANCE_THRESHOLD || swipeVelocity < -DISTANCE_THRESHOLD ) { deck.next(); } }} >

{children}

{footer && (

{footer}

)}

); } 52:Tc38,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useDeck } from "@/components/ui/slide-cn/deck"; import { ChevronLeft, ChevronRight } from "lucide-react"; function FooterKeyCap({ children }: { children: React.ReactNode }) { return ( {children} ); } /** * SlideFooter * * Optional footer component for slides that provides contextual metadata * and navigation affordances without affecting slide layout. * * Responsibilities: * - Display slide progress (current / total) * - Show navigation hints appropriate to device (keyboard vs swipe) * - Optionally render lightweight branding attribution * * Interaction model: * - Purely informational (no navigation control) * - Adapts copy and hints for mobile vs desktop * * Usage: * ```tsx * } /> * * } * /> * ``` * * Notes: * - Footer is part of content flow (non-sticky) * - Does not control slide navigation or state * - Intended to remain visually subtle and non-distracting */ type SlideFooterProps = { className?: string; showProgress?: boolean; showHint?: boolean; showAdd?: boolean; }; export function SlideFooter({ className, showProgress = true, showHint = true, showAdd = false, }: SlideFooterProps) { const deck = useDeck(); // Using grid layout for precise alignment: Left (Progress), Center (Branding), Right (Hint) return ( ); } 53:T4e5,"use client"; import { Button } from "@/components/ui/button"; import { useDeck } from "@/components/ui/slide-cn/deck"; /** * SlideNav * * SlideNav is already included in the deck component by default. You dont need to touch this component unless you want to modify how changing slides works */ export function SlideNav() { const deck = useDeck(); return ( <> {/* LEFT ZONE */}

{/* RIGHT ZONE */}

); } 54:Ta19,"use client"; import * as React from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { useDeck } from "@/components/ui/slide-cn/deck"; import { useIsMobile } from "@/hooks/use-mobile"; type NavigationToastProps = { duration?: number; desktopMessage?: string; mobileMessage?: string; className?: string; }; export function NavigationToast({ duration = 3000, desktopMessage = "Use arrow keys to navigate", mobileMessage = "Swipe left or right to navigate", className, }: NavigationToastProps) { const [visible, setVisible] = React.useState(true); const isMobile = useIsMobile(); const deck = useDeck(); const initialIndex = React.useRef(deck.index); // Dismiss on navigation React.useEffect(() => { if (deck.index !== initialIndex.current) { setVisible(false); } }, [deck.index]); // Auto-dismiss after duration React.useEffect(() => { const timer = setTimeout(() => setVisible(false), duration); return () => clearTimeout(timer); }, [duration]); return ( {visible && ( setVisible(false)} className={cn( "cursor-pointer", "absolute bottom-20 left-1/2 -translate-x-1/2 z-50", "flex items-center gap-3 px-5 py-3 rounded-full", "bg-foreground/10 backdrop-blur-xl border border-foreground/10", "text-sm font-medium text-foreground/80", "shadow-lg", className )} > {isMobile ? ( <> {mobileMessage} ) : ( <> {desktopMessage}

← →

)} )} ); } function KeyCap({ children }: { children: React.ReactNode }) { return ( {children} ); } function SwipeIcon() { return ( ); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@slide-cn","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/ui/slide-cn/deck.tsx","content":"$50","type":"registry:component","target":"components/ui/slide-cn/deck.tsx"},{"path":"components/ui/slide-cn/slide.tsx","content":"$51","type":"registry:component","target":"components/ui/slide-cn/slide.tsx"},{"path":"components/ui/slide-cn/slide-footer.tsx","content":"$52","type":"registry:component","target":"components/ui/slide-cn/slide-footer.tsx"},{"path":"components/ui/slide-cn/slide-nav.tsx","content":"$53","type":"registry:component","target":"components/ui/slide-cn/slide-nav.tsx"},{"path":"components/ui/slide-cn/navigation-toast.tsx","content":"$54","type":"registry:component","target":"components/ui/slide-cn/navigation-toast.tsx"},{"path":"components/ui/slide-cn/use-deck-controller.ts","content":"\"use client\";\nimport { useCallback, useState } from 'react';\n\nexport function useDeckController(slideCount: number) {\n\tconst [index, setIndex] = useState(0);\n\n\tconst clamp = useCallback(\n\t\t(slideIndex: number) => {\n\t\t\tif (slideIndex < 0) return 0;\n\t\t\tif (slideIndex >= slideCount) return slideCount - 1;\n\t\t\treturn slideIndex;\n\t\t},\n\t\t[slideCount]\n\t);\n\n\tconst next = useCallback(() => {\n\t\tsetIndex((i) => clamp(i + 1));\n\t}, [clamp]);\n\n\tconst prev = useCallback(() => {\n\t\tsetIndex((i) => clamp(i - 1));\n\t}, [clamp]);\n\n\tconst goTo = useCallback(\n\t\t(target: number) => {\n\t\t\tsetIndex(clamp(target));\n\t\t},\n\t\t[clamp]\n\t);\n\n\treturn {\n\t\tindex,\n\t\tnext,\n\t\tprev,\n\t\tgoTo,\n\t\ttotal: slideCount,\n\t};\n}\n","type":"registry:component","target":"components/ui/slide-cn/use-deck-controller.ts"},{"path":"components/ui/slide-cn/use-keyboard-navigation.ts","content":"import { useEffect } from \"react\";\n\ntype KeyboardNavigationOptions = {\n\tonNext: () => void;\n\tonPrev: () => void;\n\tdisabled?: boolean;\n};\n\nexport function useKeyboardNavigation({\n\tonNext,\n\tonPrev,\n\tdisabled = false,\n}: KeyboardNavigationOptions) {\n\tuseEffect(() => {\n\t\tif (disabled) return;\n\n\t\tconst handler = (e: KeyboardEvent) => {\n\t\t\t// Ignore key repeat (holding down key)\n\t\t\tif (e.repeat) return;\n\n\t\t\tif (e.key === \"ArrowRight\" || e.key === \" \") {\n\t\t\t\te.preventDefault();\n\t\t\t\tonNext();\n\t\t\t}\n\n\t\t\tif (e.key === \"ArrowLeft\") {\n\t\t\t\te.preventDefault();\n\t\t\t\tonPrev();\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener(\"keydown\", handler);\n\t\treturn () => {\n\t\t\twindow.removeEventListener(\"keydown\", handler);\n\t\t};\n\t}, [onNext, onPrev, disabled]);\n}\n","type":"registry:component","target":"components/ui/slide-cn/use-keyboard-navigation.ts"}],"className":"h-[70svh] min-h-80"}]]}]