52: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"] 53: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"] 54:T2329,"use client"; import { useEffect, useRef, useState } from "react"; import type { KeyboardEvent, ReactNode } from "react"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { useSoundCue } from "../../sound/use-sound"; import { cn } from "../../utils"; export interface AppleCardData { /** Category label shown above the title */ category: string; /** Main card title */ title: string; /** URL of the card background image */ src: string; /** Short description shown in the expanded view */ description?: string; /** Rich content shown in the expanded view (takes precedence over description) */ content?: ReactNode; } /** Shared transition duration — must stay in sync with the inline transition below */ export const TRANSITION_MS = 400; export interface AppleCardProps { card: AppleCardData; index: number; expandedIndex: number; reducedMotion: boolean; onExpand: (index: number) => void; onCollapse: () => void; className?: string; /** * Plays the matching open/close cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } interface Rect { top: number; left: number; width: number; height: number; } export function AppleCard({ card, index, expandedIndex, reducedMotion, onExpand, onCollapse, className = "", sound = false, }: AppleCardProps) { const cardEl = useRef(null); const dialogEl = useRef(null); const closeBtn = useRef(null); const previousFocus = useRef(null); const [rect, setRect] = useState(null); const [overlayVisible, setOverlayVisible] = useState(false); const [fullyExpanded, setFullyExpanded] = useState(false); // Collapse-in-progress latch. Not state: nothing renders off it — it only // dedupes handleCollapse calls (Escape + backdrop click) during the exit // window, and gates the close cue on the overlay actually being open // rather than on the entrance animation having finished. const closing = useRef(false); // Read at expand time so the animation branch is decided once per expand, // exactly like the source's imperative handler. const reducedMotionRef = useRef(reducedMotion); reducedMotionRef.current = reducedMotion; const playCue = useSoundCue(sound); function handleExpand() { if (expandedIndex !== -1) return; playCue("open"); previousFocus.current = document.activeElement as HTMLElement; const r = cardEl.current!.getBoundingClientRect(); setRect({ top: r.top, left: r.left, width: r.width, height: r.height }); setOverlayVisible(true); onExpand(index); } // Once the overlay is in the DOM, focus lands in the layout phase — before // the user's first painted frame, where the source's `await tick()` puts // it. The reduced-motion branch has no entrance leg, so its still frame is // committed here too. useIsomorphicLayoutEffect(() => { if (!overlayVisible) return; closeBtn.current?.focus(); if (reducedMotionRef.current) { setFullyExpanded(true); } }, [overlayVisible]); // Flip to the fully expanded geometry (double rAF so the initial card-rect // frame paints) — a painted first frame is the point, so this one stays // passive. useEffect(() => { if (!overlayVisible || reducedMotionRef.current) return; let raf2 = 0; const raf1 = requestAnimationFrame(() => { raf2 = requestAnimationFrame(() => { setFullyExpanded(true); }); }); return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); }; }, [overlayVisible]); function handleCollapse() { if (!overlayVisible || closing.current) return; closing.current = true; // Gated on the overlay being open, not on `fullyExpanded` — a dismissal // during the two entrance frames (Escape right after Enter) must still // pair the `open` cue with a `close`. playCue("close"); setFullyExpanded(false); const delay = reducedMotion ? 0 : TRANSITION_MS; setTimeout(() => { setOverlayVisible(false); closing.current = false; onCollapse(); setRect(null); previousFocus.current?.focus(); previousFocus.current = null; }, delay); } function handleCardKeydown(e: KeyboardEvent) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); handleExpand(); } } function handleOverlayKeydown(e: KeyboardEvent) { if (e.key === "Escape") { handleCollapse(); return; } // Simple focus trap: cycle focus within the dialog on Tab if (e.key === "Tab" && dialogEl.current) { const focusable = Array.from( dialogEl.current.querySelectorAll( 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])' ) ); if (focusable.length === 0) return; const first = focusable[0]!; const last = focusable[focusable.length - 1]!; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } } } return ( <> {/* Collapsed card in the carousel */}

{card.category}

{card.title}

{/* Expanded overlay */} {overlayVisible && rect !== null && ( <> )} ); } 55:T530,"use client"; import { useState } from "react"; import { useReducedMotion } from "../../internals/motion/media-query"; import { cn } from "../../utils"; import { AppleCard } from "./AppleCard"; import type { AppleCardData } from "./AppleCard"; export type { AppleCardData }; export interface AppleCardCarouselProps { /** Cards to display in the carousel */ cards: AppleCardData[]; /** Additional CSS classes */ className?: string; /** * Plays the matching open/close cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } export function AppleCardCarousel({ cards, className = "", sound = false, }: AppleCardCarouselProps) { const [expandedIndex, setExpandedIndex] = useState(-1); const reducedMotion = useReducedMotion(); return (

{cards.map((card, i) => ( setExpandedIndex(idx)} onCollapse={() => setExpandedIndex(-1)} sound={sound} /> ))}

); } 51:["$","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":[null,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/apple-card-carousel/AppleCard.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/apple-card-carousel/AppleCard.tsx"},{"path":"react/src/components/apple-card-carousel/AppleCardCarousel.tsx","content":"$55","type":"registry:ui","target":"@ui/fancy/components/apple-card-carousel/AppleCardCarousel.tsx"},{"path":"react/src/components/apple-card-carousel/index.ts","content":"\"use client\";\n\nexport { AppleCardCarousel } from \"./AppleCardCarousel\";\nexport type { AppleCardCarouselProps, AppleCardData } from \"./AppleCardCarousel\";\nexport { AppleCard } from \"./AppleCard\";\nexport type { AppleCardProps } from \"./AppleCard\";\n","type":"registry:ui","target":"@ui/fancy/components/apple-card-carousel/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]