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:T281f,"use client"; // karaui.kamisama-v0.my.id/components/motion/sortable-list import { motion, Reorder, useDragControls, useReducedMotion, } from "motion/react"; import { type KeyboardEvent, type ReactNode, useCallback, useEffect, useId, useRef, useState, } from "react"; import { SPRING_LAYOUT } from "@/lib/ease"; import { TOUCH_GESTURE_CLASS } from "@/lib/touch"; import { cn } from "@/lib/utils"; export type SortableItem = { id: string | number }; export type SortableItemState = { /** Zero-based position in the list as currently shown. */ index: number; /** Total number of items. */ count: number; /** True while the item is lifted by pointer or keyboard. */ isDragging: boolean; }; export interface SortableListProps { /** Controlled order. */ items?: T[]; /** Initial order when uncontrolled. */ defaultItems?: T[]; /** Fires once per completed move (pointer release or keyboard drop). */ onChange?: (items: T[]) => void; renderItem: (item: T, state: SortableItemState) => ReactNode; /** Human-readable name used for the handle label and announcements. */ getLabel?: (item: T) => string; className?: string; itemClassName?: string; } /** Keyboard pick-up session: what to restore if the move is cancelled. */ type Grab = { id: T["id"]; original: T[] }; const INSTANT = { duration: 0 } as const; function positionOf(list: T[], id: T["id"]) { return list.findIndex((entry) => entry.id === id) + 1; } function moveItem(list: T[], from: number, to: number) { const next = list.slice(); const [item] = next.splice(from, 1); next.splice(to, 0, item); return next; } function GripIcon() { return ( ); } function SortableRow({ item, index, count, label, lifted, grabbed, describedBy, reduce, className, registerHandle, onPointerLift, onPointerDrop, onHandleKeyDown, onHandleBlur, children, }: { item: T; index: number; count: number; label: string; lifted: boolean; grabbed: boolean; describedBy: string; reduce: boolean; className?: string; registerHandle: (id: T["id"], el: HTMLButtonElement | null) => void; onPointerLift: (item: T) => void; onPointerDrop: (item: T) => void; onHandleKeyDown: (event: KeyboardEvent, item: T) => void; onHandleBlur: (relatedTarget: EventTarget | null) => void; children: ReactNode; }) { const controls = useDragControls(); return ( onPointerLift(item)} onDragEnd={() => onPointerDrop(item)} transition={reduce ? INSTANT : SPRING_LAYOUT} animate={{ scale: lifted && !reduce ? 1.02 : 1 }} className={cn( "relative flex items-center gap-3 rounded-2xl border border-border bg-card px-3 py-2.5", lifted ? "z-10" : "z-0", className, )} > {/* The lift shadow is a separate layer so only its opacity animates. */}

{children}

); } export function SortableList({ items, defaultItems, onChange, renderItem, getLabel = (item) => String(item.id), className, itemClassName, }: SortableListProps) { const reduce = useReducedMotion() ?? false; const instructionsId = useId(); const [internal, setInternal] = useState(defaultItems ?? []); const isControlled = items !== undefined; const committed = isControlled ? items : internal; // Working order while a move is in progress; committed on drop. const [draft, setDraft] = useState(null); const [draggingId, setDraggingId] = useState(null); const [grab, setGrab] = useState | null>(null); const [announcement, setAnnouncement] = useState(""); const handles = useRef(new Map()); const view = draft ?? committed; const commit = useCallback( (next: T[]) => { if (!isControlled) setInternal(next); onChange?.(next); }, [isControlled, onChange], ); const registerHandle = useCallback( (id: T["id"], el: HTMLButtonElement | null) => { if (el) handles.current.set(id, el); else handles.current.delete(id); }, [], ); // React moves list nodes when the order changes, which can drop focus from // the grabbed handle — put it back after every keyboard move. const grabbedId = grab?.id; const grabbedIndex = grabbedId === undefined ? -1 : view.findIndex((entry) => entry.id === grabbedId); useEffect(() => { if (grabbedId === undefined || grabbedIndex < 0) return; const el = handles.current.get(grabbedId); if (el && document.activeElement !== el) el.focus(); }, [grabbedId, grabbedIndex]); const drop = (item: T, list: T[]) => { setGrab(null); setDraft(null); setAnnouncement( `${getLabel(item)} dropped at position ${positionOf(list, item.id)} of ${list.length}.`, ); const changed = list.some((entry, i) => entry !== committed[i]); if (changed) commit(list); }; const onHandleKeyDown = (event: KeyboardEvent, item: T) => { const label = getLabel(item); const isToggle = event.key === " " || event.key === "Enter"; if (!grab) { if (!isToggle) return; event.preventDefault(); setGrab({ id: item.id, original: committed }); setDraft(committed); setAnnouncement( `Picked up ${label}, position ${positionOf(committed, item.id)} of ${committed.length}. Use the up and down arrow keys to move, Space to drop, Escape to cancel.`, ); return; } if (grab.id !== item.id) return; if (isToggle) { event.preventDefault(); drop(item, view); return; } if (event.key === "Escape") { event.preventDefault(); setGrab(null); setDraft(null); setAnnouncement( `Move cancelled. ${label} returned to position ${positionOf(grab.original, item.id)} of ${grab.original.length}.`, ); return; } const delta = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0; if (!delta) return; event.preventDefault(); const from = view.findIndex((entry) => entry.id === item.id); const to = Math.max(0, Math.min(view.length - 1, from + delta)); if (to === from) return; setDraft(moveItem(view, from, to)); setAnnouncement(`Moved ${label} to position ${to + 1} of ${view.length}.`); }; const onHandleBlur = (relatedTarget: EventTarget | null) => { // Focus leaving for another element (Tab, click elsewhere) drops the item // where it is. A null target is React re-parenting the node mid-move. if (!grab || !relatedTarget) return; const item = view.find((entry) => entry.id === grab.id); if (item) drop(item, view); }; return (

Press Space or Enter to pick up an item, the arrow keys to move it, Space or Enter to drop it, and Escape to cancel.

{view.map((item, index) => ( { setDraggingId(lifted.id); setDraft((current) => current ?? committed); }} onPointerDrop={(dropped) => { setDraggingId(null); drop(dropped, draft ?? committed); }} onHandleKeyDown={onHandleKeyDown} onHandleBlur={onHandleBlur} > {renderItem(item, { index, count: view.length, isDragging: draggingId === item.id || grab?.id === item.id, })} ))}

{announcement}

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