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/1o6_421saitt-.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/1o6_421saitt-.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:T331d,"use client"; // beui.dev/components/blocks/swipeable-list import { animate, motion, useMotionValue, useReducedMotion, type PanInfo, } from "motion/react"; import { useCallback, useEffect, useRef, useState, type ReactNode, } from "react"; import { TOUCH_GESTURE_CONTENT_CLASS } from "@/lib/touch"; import { cn } from "@/lib/utils"; export type SwipeSide = "left" | "right"; export type SwipeableListValue = { id: string; side: SwipeSide; }; export type SwipeActionTone = | "neutral" | "primary" | "success" | "warning" | "danger"; export type SwipeAction = { id: string; label: ReactNode; icon: ReactNode; tone?: SwipeActionTone; disabled?: boolean; onClick?: (item: SwipeableListItem) => void; }; export type SwipeableListItem = { id: string; title?: ReactNode; description?: ReactNode; meta?: ReactNode; leading?: ReactNode; content?: ReactNode; leftActions?: SwipeAction[]; rightActions?: SwipeAction[]; disabled?: boolean; }; export type SwipeableListClassNames = { root?: string; item?: string; rail?: string; action?: string; surface?: string; leading?: string; content?: string; title?: string; description?: string; meta?: string; }; export interface SwipeableListProps { items: SwipeableListItem[]; value?: SwipeableListValue | null; defaultValue?: SwipeableListValue | null; onValueChange?: (value: SwipeableListValue | null) => void; onAction?: (payload: { item: SwipeableListItem; action: SwipeAction; side: SwipeSide; }) => void; actionWidth?: number; revealThreshold?: number; closeOnAction?: boolean; className?: string; classNames?: SwipeableListClassNames; renderItem?: (item: SwipeableListItem) => ReactNode; } // Distance-based release spring keeps short rebounds and full reveals feeling // equally direct, closer to native mobile list interactions. const ROW_SETTLE = { type: "spring", stiffness: 560, damping: 48, mass: 0.82, restDelta: 0.5, restSpeed: 8, } as const; const OPEN_DISTANCE_RATIO = 0.46; const CLOSE_DISTANCE_RATIO = 0.72; const OPEN_VELOCITY = 720; const CLOSE_VELOCITY = 320; const FLING_DISTANCE = 14; const RELEASE_VELOCITY_LIMIT = 1500; const ACTION_TONE_CLASS: Record = { neutral: "text-muted-foreground group-hover:text-foreground", primary: "text-foreground", success: "text-emerald-600 dark:text-emerald-400", warning: "text-amber-600 dark:text-amber-400", danger: "text-destructive", }; function useControllableSwipeValue({ value, defaultValue, onValueChange, }: { value?: SwipeableListValue | null; defaultValue?: SwipeableListValue | null; onValueChange?: (value: SwipeableListValue | null) => void; }) { const [internalValue, setInternalValue] = useState(defaultValue ?? null); const isControlled = value !== undefined; const currentValue = value ?? internalValue; const setValue = useCallback( (next: SwipeableListValue | null) => { if (!isControlled) { setInternalValue(next); } onValueChange?.(next); }, [isControlled, onValueChange], ); return [currentValue, setValue] as const; } function isActionableSide(value: number, sideWidth: number) { return sideWidth > 0 && Math.abs(value) > 0; } function clampReleaseVelocity(velocity: number) { return Math.max( -RELEASE_VELOCITY_LIMIT, Math.min(RELEASE_VELOCITY_LIMIT, velocity), ); } function SwipeActionButton({ action, actionWidth, side, focusable, onAction, className, }: { action: SwipeAction; actionWidth: number; side: SwipeSide; focusable: boolean; onAction: (action: SwipeAction, side: SwipeSide) => void; className?: string; }) { return ( ); } function SwipeableListRow({ item, actionWidth, revealThreshold, openValue, setOpenValue, closeOnAction, onAction, classNames, renderItem, }: { item: SwipeableListItem; actionWidth: number; revealThreshold: number; openValue: SwipeableListValue | null; setOpenValue: (value: SwipeableListValue | null) => void; closeOnAction: boolean; onAction?: SwipeableListProps["onAction"]; classNames?: SwipeableListClassNames; renderItem?: (item: SwipeableListItem) => ReactNode; }) { const reduce = useReducedMotion(); const x = useMotionValue(0); const animationRef = useRef<{ stop: () => void } | null>(null); const commandedTargetRef = useRef(0); const leftActions = item.leftActions ?? []; const rightActions = item.rightActions ?? []; const leftWidth = leftActions.length * actionWidth; const rightWidth = rightActions.length * actionWidth; const openSide = openValue?.id === item.id ? openValue.side : null; const targetX = openSide === "left" ? leftWidth : openSide === "right" ? -rightWidth : 0; const settleX = useCallback( (nextX: number, velocity = 0) => { commandedTargetRef.current = nextX; animationRef.current?.stop(); if (reduce) { x.set(nextX); return; } animationRef.current = animate(x, nextX, { ...ROW_SETTLE, velocity: clampReleaseVelocity(velocity), onComplete: () => x.set(nextX), }); }, [reduce, x], ); useEffect(() => { return () => animationRef.current?.stop(); }, []); useEffect(() => { if (commandedTargetRef.current === targetX) { return; } settleX(targetX); }, [settleX, targetX]); const getTargetX = useCallback( (side: SwipeSide | null) => side === "left" ? leftWidth : side === "right" ? -rightWidth : 0, [leftWidth, rightWidth], ); const snapTo = useCallback( (side: SwipeSide | null, velocity = 0) => { setOpenValue(side ? { id: item.id, side } : null); settleX(getTargetX(side), velocity); }, [getTargetX, item.id, setOpenValue, settleX], ); const onDragStart = useCallback(() => { animationRef.current?.stop(); if (openValue && openValue.id !== item.id) { setOpenValue(null); } }, [item.id, openValue, setOpenValue]); const onDragEnd = useCallback( (_: PointerEvent, info: PanInfo) => { const velocity = info.velocity.x; const latest = x.get(); const leftOpenThreshold = Math.max( revealThreshold, leftWidth * OPEN_DISTANCE_RATIO, ); const rightOpenThreshold = Math.max( revealThreshold, rightWidth * OPEN_DISTANCE_RATIO, ); if (openSide === "left") { if ( latest < leftWidth * CLOSE_DISTANCE_RATIO || velocity < -CLOSE_VELOCITY ) { snapTo(null, velocity); return; } snapTo("left", velocity); return; } if (openSide === "right") { if ( Math.abs(latest) < rightWidth * CLOSE_DISTANCE_RATIO || velocity > CLOSE_VELOCITY ) { snapTo(null, velocity); return; } snapTo("right", velocity); return; } if ( isActionableSide(latest, leftWidth) && (latest > leftOpenThreshold || (velocity > OPEN_VELOCITY && latest > FLING_DISTANCE)) ) { snapTo("left", velocity); return; } if ( isActionableSide(latest, rightWidth) && (latest < -rightOpenThreshold || (velocity < -OPEN_VELOCITY && latest < -FLING_DISTANCE)) ) { snapTo("right", velocity); return; } snapTo(null, velocity); }, [ leftWidth, openSide, revealThreshold, rightWidth, snapTo, x, ], ); const handleAction = useCallback( (action: SwipeAction, side: SwipeSide) => { action.onClick?.(item); onAction?.({ item, action, side }); if (closeOnAction) { snapTo(null); } }, [closeOnAction, item, onAction, snapTo], ); const defaultContent = (

{item.leading ? (

{item.leading}

) : null}

{item.title ? (

{item.title}

) : null} {item.description ? (

{item.description}

) : null}

{item.meta ? (

{item.meta}

) : null}

); return (

{leftActions.map((action) => ( ))}

{rightActions.map((action) => ( ))}

{renderItem ? renderItem(item) : item.content ?? defaultContent}

); } export function SwipeableList({ items, value, defaultValue = null, onValueChange, onAction, actionWidth = 56, revealThreshold = 34, closeOnAction = true, className, classNames, renderItem, }: SwipeableListProps) { const [openValue, setOpenValue] = useControllableSwipeValue({ value, defaultValue, onValueChange, }); return (

{items.map((item) => ( ))}

); } 52: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; 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","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":"@catalogs","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/motion/swipeable-list.tsx","content":"$51","type":"registry:component","target":"@components/motion/swipeable-list.tsx"},{"path":"lib/touch.ts","content":"$52","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"}]]}]