50: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"] 51: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"] 52:T3ba0,"use client"; // karaui.kamisama-v0.my.id/components/motion/pull-to-refresh import { AnimatePresence, animate, type MotionValue, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type ReactNode, type PointerEvent as ReactPointerEvent, useCallback, useEffect, useRef, useState, } from "react"; import { EASE_IN_OUT, EASE_OUT, SPRING_PANEL, SPRING_SWAP, } from "@/lib/ease"; import { capturePointer, TOUCH_GESTURE_CONTENT_CLASS } from "@/lib/touch"; import { cn } from "@/lib/utils"; export type PullToRefreshStatus = | "idle" | "pulling" | "ready" | "refreshing"; export interface PullToRefreshProps { /** Runs after the user pulls beyond the threshold and releases. */ onRefresh: () => void | Promise; children: ReactNode; /** Keeps the indicator active while an externally managed refresh runs. */ refreshing?: boolean; disabled?: boolean; /** Resisted pull distance in pixels required to refresh. */ threshold?: number; /** Maximum resisted pull distance in pixels. */ maxPull?: number; /** Content offset in pixels while refreshing. */ holdDistance?: number; pullingLabel?: ReactNode; releaseLabel?: ReactNode; refreshingLabel?: ReactNode; ariaLabel?: string; className?: string; contentClassName?: string; indicatorClassName?: string; } type Gesture = { active: boolean; startX: number; startY: number; pointerId: number | null; }; const EMPTY_GESTURE: Gesture = { active: false, startX: 0, startY: 0, pointerId: null, }; // This character needs a compact repeating rhythm rather than a settling // spring: a small orbit and blink that read as activity without feeling busy. const CHARACTER_LOOP = { duration: 0.9, ease: EASE_IN_OUT, repeat: Number.POSITIVE_INFINITY, } as const; const CALM_PULSE = { duration: 1.2, ease: EASE_IN_OUT, repeat: Number.POSITIVE_INFINITY, } as const; const LABEL_SWAP = { duration: 0.16, ease: EASE_OUT } as const; function resistedDistance(distance: number, maxPull: number) { return maxPull * (1 - Math.exp(-Math.max(0, distance) / maxPull)); } function RefreshBuddy({ progress, status, reduce, }: { progress: MotionValue; status: PullToRefreshStatus; reduce: boolean; }) { const lift = useTransform(progress, [0, 1], [-7, 0]); const tilt = useTransform(progress, [0, 1], [-10, 0]); const stretch = useTransform(progress, [0, 0.55, 1], [0.68, 1.1, 0.92]); const ready = status === "ready"; const refreshing = status === "refreshing"; return ( ); } export function PullToRefresh({ onRefresh, children, refreshing = false, disabled = false, threshold = 76, maxPull = 132, holdDistance = 68, pullingLabel = "Pull to refresh", releaseLabel = "Release to refresh", refreshingLabel = "Refreshing", ariaLabel = "Refreshable content", className, contentClassName, indicatorClassName, }: PullToRefreshProps) { const rootRef = useRef(null); const gestureRef = useRef({ ...EMPTY_GESTURE }); const animationRef = useRef<{ stop: () => void } | null>(null); const statusRef = useRef("idle"); const disabledRef = useRef(disabled); const externalRefreshingRef = useRef(refreshing); const refreshingRef = useRef(refreshing); const [status, setStatusState] = useState("idle"); const [internalRefreshing, setInternalRefreshing] = useState(false); const reduce = useReducedMotion(); const pullThreshold = Math.max(24, threshold); const pullLimit = Math.max(maxPull, pullThreshold + 24); const restingDistance = Math.min( Math.max(0, holdDistance), pullThreshold, ); const y = useMotionValue(0); const progress = useTransform(y, [0, pullThreshold], [0, 1]); const indicatorOpacity = useTransform( y, [0, 10, pullThreshold], [0, 0.45, 1], ); const indicatorScale = useTransform(y, [0, pullThreshold], [0.86, 1]); const isRefreshing = refreshing || internalRefreshing; disabledRef.current = disabled; externalRefreshingRef.current = refreshing; refreshingRef.current = isRefreshing; const setStatus = useCallback((next: PullToRefreshStatus) => { if (statusRef.current === next) return; statusRef.current = next; setStatusState(next); }, []); const settle = useCallback( (target: number) => { animationRef.current?.stop(); if (reduce) { y.set(target); return; } animationRef.current = animate(y, target, SPRING_PANEL); }, [reduce, y], ); const updatePull = useCallback( (distance: number) => { if (disabledRef.current || refreshingRef.current) return; animationRef.current?.stop(); const next = resistedDistance(distance, pullLimit); y.set(next); setStatus(next >= pullThreshold ? "ready" : "pulling"); }, [pullLimit, pullThreshold, setStatus, y], ); const runRefresh = useCallback(async () => { if (disabledRef.current || refreshingRef.current) return; setInternalRefreshing(true); setStatus("refreshing"); settle(restingDistance); try { await onRefresh(); } finally { setInternalRefreshing(false); // A synchronous refresh can resolve before React commits the temporary // internal state, so release here instead of relying only on the effect. if (!externalRefreshingRef.current) { setStatus("idle"); settle(0); } } }, [onRefresh, restingDistance, setStatus, settle]); const finishPull = useCallback(() => { const shouldRefresh = y.get() >= pullThreshold && !disabledRef.current && !refreshingRef.current; gestureRef.current = { ...EMPTY_GESTURE }; if (shouldRefresh) { void runRefresh(); return; } setStatus("idle"); settle(0); }, [pullThreshold, runRefresh, setStatus, settle, y]); useEffect(() => { if (isRefreshing) { setStatus("refreshing"); settle(restingDistance); return; } if (statusRef.current === "refreshing") { setStatus("idle"); settle(0); } }, [isRefreshing, restingDistance, setStatus, settle]); useEffect(() => { const root = rootRef.current; if (!root) return; const onTouchStart = (event: TouchEvent) => { if ( event.touches.length !== 1 || root.scrollTop > 0 || disabledRef.current || refreshingRef.current ) { return; } const touch = event.touches[0]; gestureRef.current = { active: true, startX: touch.clientX, startY: touch.clientY, pointerId: null, }; }; const onTouchMove = (event: TouchEvent) => { const gesture = gestureRef.current; const touch = event.touches[0]; if (!gesture.active || !touch) return; const deltaX = touch.clientX - gesture.startX; const deltaY = touch.clientY - gesture.startY; if (root.scrollTop > 0 || deltaY < 0) { gestureRef.current = { ...EMPTY_GESTURE }; return; } if (Math.abs(deltaX) > deltaY) return; event.preventDefault(); updatePull(deltaY); }; const onTouchEnd = () => { if (gestureRef.current.active) finishPull(); }; root.addEventListener("touchstart", onTouchStart, { passive: true }); root.addEventListener("touchmove", onTouchMove, { passive: false }); root.addEventListener("touchend", onTouchEnd); root.addEventListener("touchcancel", onTouchEnd); return () => { root.removeEventListener("touchstart", onTouchStart); root.removeEventListener("touchmove", onTouchMove); root.removeEventListener("touchend", onTouchEnd); root.removeEventListener("touchcancel", onTouchEnd); }; }, [finishPull, updatePull]); useEffect(() => { return () => animationRef.current?.stop(); }, []); const startPointerPull = (event: ReactPointerEvent) => { // Everything but touch: a finger is driven by the native listeners above, // which can `preventDefault` the page scroll a passive React handler // cannot. A pen fires no touch events at all, so this is its only route. if ( event.pointerType === "touch" || event.button !== 0 || event.currentTarget.scrollTop > 0 || disabled || isRefreshing ) { return; } capturePointer(event.currentTarget, event.pointerId); gestureRef.current = { active: true, startX: event.clientX, startY: event.clientY, pointerId: event.pointerId, }; }; const movePointerPull = (event: ReactPointerEvent) => { const gesture = gestureRef.current; if (!gesture.active || gesture.pointerId !== event.pointerId) return; const deltaX = event.clientX - gesture.startX; const deltaY = event.clientY - gesture.startY; if (deltaY < 0 || Math.abs(deltaX) > deltaY) return; event.preventDefault(); updatePull(deltaY); }; const label = status === "refreshing" ? refreshingLabel : status === "ready" ? releaseLabel : pullingLabel; return (

{ if (gestureRef.current.pointerId === event.pointerId) finishPull(); }} onPointerCancel={(event) => { if (gestureRef.current.pointerId === event.pointerId) finishPull(); }} className={cn( "relative w-full overflow-y-auto overscroll-contain bg-background", // No `touch-none` here — this element is the scroller, and the pull // only takes over once the content is already at the top. The callout // has to be off from the first frame though: iOS decides on it while // the finger is still resting, long before the pull is recognised. // Whatever the consumer renders inside stays selectable with a mouse; // only the pull itself suppresses selection, and only while it runs, // so dragging the page down cannot highlight it on the way. TOUCH_GESTURE_CONTENT_CLASS, status === "pulling" || status === "ready" ? "cursor-grabbing select-none" : "cursor-grab", (disabled || isRefreshing) && "cursor-default", className, )} > {label} {children}

); } 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:T1668,// Shared touch primitives. iOS and iPadOS run their own gestures on top of the // page — the long-press selection callout and the selection it drags in with // it — and they win: once the platform claims a touch it cancels ours // mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own // their gesture have to opt out. // // What the two classes below cover, precisely: // - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only: // it is not a property other engines have, so it is inert everywhere else. // - `user-select: none` stops the long-press selection on every engine, // Android included, and stops a drag from painting a selection under the // cursor. It is inherited, so it reaches every descendant — which is why the // two classes differ only in whether they apply it unconditionally. // What neither covers: // - Chrome for Android's long-press menu on a link or an image. No CSS // suppresses it; a gesture surface that wraps one needs its own // `onContextMenu` with `preventDefault()`. // - The native drag of an `` or `` descendant. `-webkit-user-drag` is // not inherited and plain divs and buttons are not drag sources, so setting // it on the surface does nothing — the child itself needs `draggable={false}`. /** * Classes for a surface that *is* the control: a thumb, a drum, a stage, a * handle, a hold button. Selection is suppressed on every input, because a * drag that highlights the control's own label is wrong on a mouse too. * Compose with `touch-none` when the surface also owns the scroll axis — leave * it off when the page must still scroll from there. */ export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]"; /** * The same opt-out for a gesture surface that wraps content the consumer owns: * a scroller, a context-menu trigger, a sheet header, a list row. Selection is * suppressed only where the platform runs its own press gestures — a coarse * pointer — so a mouse user can still select and copy that content. If the * gesture itself would paint a selection under the cursor, add `select-none` * for the duration of the gesture rather than reaching for * `TOUCH_GESTURE_CLASS`. * * `pointer: coarse` describes the *primary* pointer and nothing else, so a * hybrid machine reads it wrong in both directions: a tablet with a mouse * plugged in keeps touch as primary and loses mouse selection, and a laptop * with a touchscreen keeps the mouse as primary and leaves selection live * under a finger. No media query can answer per interaction — the query is * about the device, and the question is about the gesture in progress. The * default stays here because it is right on the machines that are one thing or * the other, and losing a selection is a nuisance; where the miss costs a * *gesture* instead, the surface pairs it with `holdSelection` on the press. */ export const TOUCH_GESTURE_CONTENT_CLASS = "[-webkit-touch-callout:none] pointer-coarse:select-none"; /** * Suppress selection on `element` for as long as a gesture is running on it, * whatever the primary pointer of the machine happens to be. Returns the * release. Inline, so it wins over the class above and is gone again the * moment the gesture ends. * * For the press gestures a native selection would otherwise steal — a * long-press that opens a menu. Elsewhere prefer the classes: a surface that * takes selection away for the whole session is a surface whose text nobody * can copy. */ export function holdSelection(element: HTMLElement) { element.style.setProperty("user-select", "none"); element.style.setProperty("-webkit-user-select", "none"); return () => { element.style.removeProperty("user-select"); element.style.removeProperty("-webkit-user-select"); }; } /** * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer * is already gone by the time the handler runs — routine on iOS, where the * system can claim the touch first — and an uncaught throw takes the rest of * the handler, the gesture included, down with it. Touch pointers carry * implicit capture anyway, so losing it is never fatal. */ export function capturePointer(element: Element, pointerId: number) { try { element.setPointerCapture(pointerId); } catch { // Pointer is no longer active — implicit capture still applies on touch. } } /** Release a capture taken with `capturePointer`, ignoring a stale pointer. */ export function releasePointer(element: Element, pointerId: number) { try { if (element.hasPointerCapture(pointerId)) { element.releasePointerCapture(pointerId); } } catch { // Capture was already dropped by the browser. } } /** * Whether this event came from a pointer that is *hovering*: not a touch, and * not currently pressed. Which input the user is holding right now is not * something a device capability can answer — a touchscreen laptop hovers and * taps, and iPadOS reports a fine hovering pointer for a finger — so both * paths stay live and each handler branches on the event it was given. * * A pen resting on the glass is making contact, not hovering: `buttons` is the * tell, and it sends a pen tap down the same route a finger takes. * * This answers what an *enter* asks. A leave is the other half of a pair and * has to be read against the enter that started it — `useHoverGesture` in * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it * rather than asking this question twice. */ export const isHoveringPointer = (event: { pointerType: string; buttons: number; }) => event.pointerType !== "touch" && event.buttons === 0; 4f:["$","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","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@karaui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/motion/pull-to-refresh.tsx","content":"$52","type":"registry:component","target":"@components/motion/pull-to-refresh.tsx"},{"path":"lib/ease.ts","content":"$53","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/touch.ts","content":"$54","type":"registry:lib","target":"@lib/touch.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"}],"className":"h-[70svh] min-h-80"}]]}]