4f: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"] 50: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"] 51:T291c,"use client"; // karaui.kamisama-v0.my.id/components/blocks/cookie-consent import { Cookie, Lock } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type ReactNode, useEffect, useId, useRef, useState } from "react"; import { Button } from "@/components/motion/button"; import { Switch } from "@/components/motion/switch"; import { EASE_OUT, SPRING_PANEL } from "@/lib/ease"; import { cn } from "@/lib/utils"; export interface CookiePreferences { /** Always true — required for the site to work. */ necessary: true; analytics: boolean; marketing: boolean; } export type CookieConsentPosition = "bottom-left" | "bottom" | "bottom-right"; type OptionalCategory = "analytics" | "marketing"; const CATEGORIES: { key: keyof CookiePreferences; label: string; description: string; }[] = [ { key: "necessary", label: "Necessary", description: "Sign-in, security and saving these choices. Always on.", }, { key: "analytics", label: "Analytics", description: "Anonymous usage stats that help us improve the product.", }, { key: "marketing", label: "Marketing", description: "Personalised ads and measuring campaigns across sites.", }, ]; const POSITION_CLASS: Record = { "bottom-left": "bottom-4 left-4 max-w-sm", bottom: "inset-x-0 bottom-4 mx-auto max-w-xl", "bottom-right": "right-4 bottom-4 max-w-sm", }; export interface CookieConsentProps { /** Called with the final preferences whenever the visitor decides. */ onConsentChange?: (preferences: CookiePreferences) => void; /** * Persist the choice to `localStorage` under this key. When a saved choice * exists the banner stays hidden. Read after mount, so SSR output is stable. */ storageKey?: string; position?: CookieConsentPosition; /** * Position inside the nearest positioned ancestor (`absolute`) instead of the * viewport (`fixed`). Use for previews and contained layouts. */ contained?: boolean; /** Delay before sliding up, in ms. Default 500. */ delay?: number; /** Starting state of the optional toggles in the Customize panel. */ defaultPreferences?: Partial>; title?: ReactNode; description?: ReactNode; className?: string; } function readStored(key: string): CookiePreferences | null { try { const raw = window.localStorage.getItem(key); if (!raw) return null; const parsed = JSON.parse(raw) as Partial | null; if (!parsed || typeof parsed !== "object") return null; return { necessary: true, analytics: Boolean(parsed.analytics), marketing: Boolean(parsed.marketing), }; } catch { return null; } } function writeStored(key: string, preferences: CookiePreferences) { try { window.localStorage.setItem(key, JSON.stringify(preferences)); } catch { // Private mode / blocked storage: the callback still reports the choice. } } /** * Cookie consent card that slides up after mount with Accept all / Reject * non-essential / Customize. Customize grows the card into per-category * toggles (Necessary locked on) with Save. Non-modal: it never traps focus. */ export function CookieConsent({ onConsentChange, storageKey, position = "bottom-right", contained = false, delay = 500, defaultPreferences, title = "We use cookies", description = "Some are essential to run the site. Others help us understand usage and show relevant ads — only with your permission.", className, }: CookieConsentProps) { const reduce = useReducedMotion() ?? false; const [visible, setVisible] = useState(false); const [customizing, setCustomizing] = useState(false); const [draft, setDraft] = useState({ analytics: defaultPreferences?.analytics ?? false, marketing: defaultPreferences?.marketing ?? false, }); const titleId = useId(); const firstToggleRef = useRef(null); useEffect(() => { if (storageKey && readStored(storageKey)) return; const timer = window.setTimeout(() => setVisible(true), delay); return () => window.clearTimeout(timer); }, [storageKey, delay]); // Move focus into the expanded panel so keyboard users land on the toggles. useEffect(() => { if (!customizing) return; const frame = requestAnimationFrame(() => { firstToggleRef.current ?.querySelector("[role='switch']:not([disabled])") ?.focus({ preventScroll: true }); }); return () => cancelAnimationFrame(frame); }, [customizing]); const decide = (preferences: CookiePreferences) => { if (storageKey) writeStored(storageKey, preferences); onConsentChange?.(preferences); setVisible(false); }; const acceptAll = () => decide({ necessary: true, analytics: true, marketing: true }); const rejectAll = () => decide({ necessary: true, analytics: false, marketing: false }); const save = () => decide({ necessary: true, ...draft }); return ( {visible ? (

{title}

{description}

{/* Height is animated on purpose: growing the card into the toggle list is what this disclosure is for. */} {customizing ? (

{CATEGORIES.map((category) => { const locked = category.key === "necessary"; const checked = locked ? true : draft[category.key as OptionalCategory]; return (

{category.label} {locked ? ( {category.description}

{ if (locked) return; setDraft((prev) => ({ ...prev, [category.key]: next })); }} />

); })}

) : null}

{customizing ? ( <> ) : ( <> )}

) : null} ); } 52:Tc4e,"use client"; import { animate, motion, MotionConfig, useReducedMotion } from "motion/react"; import { useEffect, useId, useRef, useState } from "react"; import { cn } from "@/lib/utils"; // Heavy, deliberate thumb — high mass keeps the travel weighty without wobble. const THUMB_SPRING = { type: "spring", stiffness: 800, damping: 80, mass: 4 } as const; export interface SwitchProps { checked: boolean; onCheckedChange: (checked: boolean) => void; disabled?: boolean; label?: string; ariaLabel?: string; className?: string; } export function Switch({ checked, onCheckedChange, disabled, label, ariaLabel, className, }: SwitchProps) { const id = useId(); const thumbRef = useRef(null); const reduce = useReducedMotion(); const [isPressed, setIsPressed] = useState(false); const [isPointer, setIsPointer] = useState(false); // Disabled shake feedback when pressed. useEffect(() => { if (!thumbRef.current || reduce) return; if (disabled && isPressed) { animate( thumbRef.current, { x: [0, -2, 2, -1, 0] }, { delay: 0.2, duration: 0.6 }, ); } }, [disabled, isPressed, reduce]); const squish = !disabled && isPointer && isPressed && !reduce; return ( !disabled && onCheckedChange(!checked)} onPointerDown={(e) => { setIsPressed(true); setIsPointer(e.type.startsWith("pointer")); }} onPointerUp={() => setIsPressed(false)} onPointerLeave={() => setIsPressed(false)} initial={false} data-state={checked ? "checked" : "unchecked"} className={cn( "group peer inline-flex h-7 w-12 shrink-0 cursor-pointer items-center px-1 rounded-full outline-none transition-colors duration-200", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-60", checked ? "justify-end bg-primary" : "justify-start bg-muted-foreground/60", )} > {/* Stretch toward the destination while active. */}

{label ? ( {label} ) : null} ); } 53:T686,// Shared motion tokens. Easing curves mirror the CSS custom properties in // globals.css; springs are the canonical physics used across components. // Strong custom variants — defaults like `ease-in`/`ease-out` feel weak. export const EASE_OUT = [0.16, 1, 0.3, 1] as const; export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const; export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const; /** CSS string form of EASE_OUT for inline style transitions. */ export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)"; /** Press feedback on buttons and other tappable surfaces. */ export const SPRING_PRESS = { type: "spring", stiffness: 500, damping: 30, mass: 0.6, } as const; /** Content swaps — label/icon slots trading places inside a control. */ export const SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55, } as const; /** Overlay panel entrances — modals and sheets summoned by pointer. */ export const SPRING_PANEL = { type: "spring", stiffness: 420, damping: 40, mass: 0.5, } as const; /** Shared-layout glides — pills, indicators and panels morphing between positions. */ export const SPRING_LAYOUT = { type: "spring", stiffness: 360, damping: 32, mass: 0.6, } as const; /** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */ export const SPRING_MOUSE = { stiffness: 200, damping: 15, mass: 0.3, } as const; /** Dragged handles and fills (sliders) — critically damped `useSpring` config, * so the value follows the pointer butterily and never rebounds off an end. */ export const SPRING_GLIDE = { stiffness: 700, damping: 50, mass: 0.5, } as const; 54:T149a,"use client"; import { AnimatePresence, type HTMLMotionProps, motion, useReducedMotion, } from "motion/react"; import { forwardRef, type PointerEvent, type ReactNode, useCallback, useRef, useState, } from "react"; import { EASE_OUT, SPRING_PRESS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export type ButtonVariant = "primary" | "secondary" | "ghost" | "outline"; export type ButtonSize = "sm" | "md" | "lg" | "icon"; export interface ButtonProps extends Omit< HTMLMotionProps<"button">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; /** Spawn a Material-style ripple from the press point. Off by default. */ ripple?: boolean; children?: ReactNode; } export interface ButtonLinkProps extends Omit< HTMLMotionProps<"a">, "children" > { variant?: ButtonVariant; size?: ButtonSize; pressScale?: number; children?: ReactNode; } type Ripple = { id: number; x: number; y: number; size: number }; const VARIANT_CLASS: Record = { primary: "bg-primary text-primary-foreground hover:bg-primary/90", secondary: "border border-border bg-card text-foreground hover:border-border", ghost: "text-muted-foreground hover:text-foreground hover:bg-primary/5", outline: "border border-border bg-transparent text-foreground hover:bg-primary/5", }; const SIZE_CLASS: Record = { sm: "h-8 px-3 text-xs gap-1.5 rounded-full", md: "h-10 px-5 text-sm gap-2 rounded-full", lg: "h-12 px-6 text-base gap-2 rounded-full", icon: "h-8 w-8 rounded-lg", }; export const Button = forwardRef( function Button( { variant = "primary", size = "md", pressScale = 0.93, ripple = false, className, children, onPointerDown, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); const [ripples, setRipples] = useState([]); const nextId = useRef(0); const handlePointerDown = useCallback( (event: PointerEvent) => { if (ripple && !reduce) { const rect = event.currentTarget.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; const id = nextId.current++; setRipples((prev) => [ ...prev, { id, x: event.clientX - rect.left, y: event.clientY - rect.top, size, }, ]); } onPointerDown?.(event); }, [ripple, reduce, onPointerDown], ); return ( {ripple && !reduce ? ( {ripples.map((r) => ( setRipples((prev) => prev.filter((x) => x.id !== r.id)) } /> ))} ) : null} {children} ); }, ); export const ButtonLink = forwardRef( function ButtonLink( { variant = "primary", size = "md", pressScale = 0.93, className, children, ...rest }, ref, ) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); return ( {children} ); }, ); 55:T1b47,"use client"; import { Check, Loader2, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion, type Variants, } from "motion/react"; import { forwardRef, type ReactNode, useLayoutEffect, useRef, useState, } from "react"; import { EASE_OUT, SPRING_SWAP } from "@/lib/ease"; import { Button, type ButtonProps } from "./base"; export type ButtonState = "idle" | "loading" | "success" | "error"; export interface StatefulButtonProps extends Omit { state?: ButtonState; children: ReactNode; loadingText?: ReactNode; successText?: ReactNode; errorText?: ReactNode; icon?: ReactNode; } const CASCADE_STAGGER = 0.025; const ROLL_BLUR = "blur(6px)"; const CASCADE_LETTER_VARIANTS: Variants = { initial: { opacity: 0, y: "105%", filter: ROLL_BLUR }, animate: (delay: number = 0) => ({ opacity: 1, y: "0%", filter: "blur(0px)", transition: { ...SPRING_SWAP, delay }, }), exit: (delay: number = 0) => ({ opacity: 0, y: "-105%", filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT, delay: delay * 0.5 }, }), }; const ICON_VARIANTS: Variants = { // Width collapses too, so the icon adds/removes its own space smoothly // instead of popping the row width in a single frame. initial: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR }, animate: { opacity: 1, width: "1.5rem", scale: 1, filter: "blur(0px)", transition: SPRING_SWAP, }, exit: { opacity: 0, width: 0, scale: 0.7, filter: ROLL_BLUR, transition: { duration: 0.16, ease: EASE_OUT }, }, }; function IconSlot({ keyId, children }: { keyId: string; children: ReactNode }) { const reduce = useReducedMotion(); return ( {children} ); } function TextSlot({ value, children, }: { value: string; children: ReactNode; }) { const reduce = useReducedMotion(); const measureRef = useRef(null); const [width, setWidth] = useState(); const label = typeof children === "string" ? children : null; const cascade = label !== null && !reduce; // Measure strings with the same per-letter layout as the cascade. Measuring // the whole string preserves kerning, which can make it narrower than the // inline-block letters and clip the final glyph during the width animation. useLayoutEffect(() => { const nextWidth = measureRef.current?.offsetWidth; if (!nextWidth) return; setWidth((current) => (current === nextWidth ? current : nextWidth)); }); return ( {cascade ? label.split("").map((char, index) => ( {char} )) : children} {cascade ? ( <> {label} {label.split("").map((char, index) => ( {char} ))} ) : ( {children} )} ); } export const StatefulButton = forwardRef(function StatefulButton( { state = "idle", children, loadingText = "Loading", successText = "Done", errorText = "Try again", icon, disabled, ...rest }, ref, ) { const isBusy = state === "loading"; const stateText = state === "loading" ? loadingText : state === "success" ? successText : state === "error" ? errorText : children; const textKey = typeof stateText === "string" ? `${state}-${stateText}` : state; return ( ); }); 56:T5a6,"use client"; import { motion, useMotionValue, useReducedMotion, useSpring } from "motion/react"; import { useRef, type ReactNode } from "react"; import { SPRING_MOUSE } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export interface MagneticProps { children: ReactNode; strength?: number; className?: string; } export function Magnetic({ children, strength = 0.35, className }: MagneticProps) { const ref = useRef(null); const reduce = useReducedMotion(); const canHover = useHoverCapable(); // Decorative cursor-follow: skip on touch (phantom hover) and reduced motion. const enabled = !reduce && canHover; const x = useMotionValue(0); const y = useMotionValue(0); const sx = useSpring(x, SPRING_MOUSE); const sy = useSpring(y, SPRING_MOUSE); const onMove = (e: React.MouseEvent) => { const el = ref.current; if (!el || !enabled) return; const rect = el.getBoundingClientRect(); x.set((e.clientX - rect.left - rect.width / 2) * strength); y.set((e.clientY - rect.top - rect.height / 2) * strength); }; const onLeave = () => { x.set(0); y.set(0); }; return ( {children} ); } 4e:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/cookie-consent.tsx","content":"$51","type":"registry:component","target":"@components/motion/cookie-consent.tsx"},{"path":"components/motion/button/index.tsx","content":"export type {\n ButtonLinkProps,\n ButtonProps,\n ButtonSize,\n ButtonVariant,\n} from \"./base\";\nexport { Button, ButtonLink } from \"./base\";\nexport type { MagneticButtonProps } from \"./magnetic\";\nexport { MagneticButton } from \"./magnetic\";\nexport type { ButtonState, StatefulButtonProps } from \"./stateful\";\nexport { StatefulButton } from \"./stateful\";\n","type":"registry:component","target":"@components/motion/button/index.tsx"},{"path":"components/motion/switch.tsx","content":"$52","type":"registry:component","target":"@components/motion/switch.tsx"},{"path":"lib/ease.ts","content":"$53","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"},{"path":"components/motion/button/base.tsx","content":"$54","type":"registry:component","target":"@components/motion/button/base.tsx"},{"path":"components/motion/button/magnetic.tsx","content":"\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Magnetic } from \"../magnetic\";\nimport { Button, type ButtonProps } from \"./base\";\n\nexport interface MagneticButtonProps extends ButtonProps {\n /** Magnetic pull strength. Default 0.25. */\n strength?: number;\n /** Class applied to the magnetic wrapper. */\n magneticClassName?: string;\n}\n\nexport const MagneticButton = forwardRef(function MagneticButton(\n { strength = 0.25, magneticClassName, children, ...rest },\n ref,\n) {\n return (\n \n \n \n );\n});\n","type":"registry:component","target":"@components/motion/button/magnetic.tsx"},{"path":"components/motion/button/stateful.tsx","content":"$55","type":"registry:component","target":"@components/motion/button/stateful.tsx"},{"path":"lib/hooks/use-hover-capable.ts","content":"\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\n/**\n * Returns true only on devices that have a true hover (mouse / trackpad).\n * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere\n * — gate hover-only effects (scale lifts, magnetic pulls) behind this.\n */\nexport function useHoverCapable() {\n const [canHover, setCanHover] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\" || !window.matchMedia) return;\n const mq = window.matchMedia(\"(hover: hover) and (pointer: fine)\");\n const update = () => setCanHover(mq.matches);\n update();\n mq.addEventListener?.(\"change\", update);\n return () => mq.removeEventListener?.(\"change\", update);\n }, []);\n\n return canHover;\n}\n","type":"registry:hook","target":"@lib/hooks/use-hover-capable.ts"},{"path":"components/motion/magnetic.tsx","content":"$56","type":"registry:component","target":"@components/motion/magnetic.tsx"}],"className":"h-[70svh] min-h-80"}]]}]