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:T3037,"use client"; // karaui.kamisama-v0.my.id/components/blocks/command-palette import { motion, useReducedMotion } from "motion/react"; import { Search, type LucideIcon } from "lucide-react"; import { type ReactNode, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react"; import { createPortal } from "react-dom"; import { EASE_OUT } from "@/lib/ease"; import { useTouchCapable } from "@/lib/hooks/use-touch-capable"; import { cn } from "@/lib/utils"; export type CommandItem = { id: string; label: string; group?: string; hint?: string; keywords?: string[]; icon?: LucideIcon; badge?: ReactNode; onSelect: () => void; }; export interface CommandPaletteProps { items: CommandItem[]; /** Opens with Cmd/Ctrl + this key. Default: "k" */ shortcut?: string; placeholder?: string; emptyMessage?: string; open?: boolean; onOpenChange?: (open: boolean) => void; } function fuzzyMatch(needle: string, hay: string) { if (!needle) return true; needle = needle.toLowerCase(); hay = hay.toLowerCase(); let i = 0; for (const ch of hay) { if (ch === needle[i]) i++; if (i === needle.length) return true; } return false; } // Opened via a keyboard shortcut many times a day — entrance must read as // instant. Tight spring, even faster exit. const PANEL_SPRING = { type: "spring", stiffness: 560, damping: 40, mass: 0.5, } as const; export function CommandPalette({ items, shortcut = "k", placeholder = "Type a command or search…", emptyMessage = "No results found.", open: controlledOpen, onOpenChange, }: CommandPaletteProps) { const [internalOpen, setInternalOpen] = useState(false); const controlled = controlledOpen !== undefined; const open = controlled ? controlledOpen : internalOpen; const setOpen = useCallback( (v: boolean) => { if (!controlled) setInternalOpen(v); onOpenChange?.(v); }, [controlled, onOpenChange], ); const [query, setQuery] = useState(""); const [active, setActive] = useState(0); // Portal target only exists client-side; render nothing during SSR/hydration. const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); const uid = useId(); const reduce = useReducedMotion(); const canTouch = useTouchCapable(); const updateQuery = useCallback((value: string) => { setQuery(value); setActive(0); }, []); const inputRef = useRef(null); const listRef = useRef(null); useEffect(() => { const onKey = (e: KeyboardEvent) => { if ( (e.metaKey || e.ctrlKey) && e.key.toLowerCase() === shortcut.toLowerCase() ) { e.preventDefault(); setOpen(!open); return; } if (e.key === "Escape" && open) { e.preventDefault(); setOpen(false); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, shortcut, setOpen]); useEffect(() => { if (open) { updateQuery(""); setActive(0); requestAnimationFrame(() => inputRef.current?.focus()); } }, [open, updateQuery]); useEffect(() => { if (!open) return; const root = document.documentElement; const previousRootOverflow = root.style.overflow; const previousBodyOverflow = document.body.style.overflow; root.style.overflow = "hidden"; document.body.style.overflow = "hidden"; return () => { root.style.overflow = previousRootOverflow; document.body.style.overflow = previousBodyOverflow; }; }, [open]); const filtered = useMemo(() => { if (!query) return items; return items.filter((it) => { const haystacks = [it.label, it.group ?? "", ...(it.keywords ?? [])]; return haystacks.some((h) => fuzzyMatch(query, h)); }); }, [items, query]); // Reserve the icon column only when at least one item brings an icon, so // icon-less lists don't render a dead gap before every label. const hasIcons = useMemo(() => items.some((it) => it.icon), [items]); const grouped = useMemo(() => { const map = new Map(); filtered.forEach((it) => { const g = it.group ?? "Results"; const groupItems = map.get(g) ?? []; groupItems.push(it); map.set(g, groupItems); }); return Array.from(map.entries()); }, [filtered]); const onKeyDown = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(filtered.length - 1, a + 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(0, a - 1)); } else if (e.key === "Enter") { e.preventDefault(); const it = filtered[active]; if (it) { it.onSelect(); setOpen(false); } } }; useEffect(() => { if (!open) return; const el = listRef.current?.querySelector( `[data-index="${active}"]`, ); el?.scrollIntoView({ block: "nearest" }); }, [active, open]); let cursor = 0; if (!mounted) return null; // Always-mounted container; pointer events fully disabled when closed so clicks // pass through to the page. Portaled to so ancestors with transforms, // filters, or fixed positioning can't trap the overlay in their stacking context. return createPortal(

setOpen(false)} className={cn( "absolute inset-0 bg-background/5 [backdrop-filter:blur(12px)_saturate(140%)] [-webkit-backdrop-filter:blur(12px)_saturate(140%)]", open ? "pointer-events-auto" : "pointer-events-none", )} />

, document.body, ); } 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:T4a7,"use client"; import { useEffect, useState } from "react"; /** * Returns true on devices that can be touched, whatever else they claim. * * This is not the inverse of `useHoverCapable`: iPadOS Safari browses * desktop-class and answers `(hover: hover) and (pointer: fine)` with true * while a finger is the only input there is, so anything that treats * hover-capable as "no touch here" strands every iPad. Gate the *touch path* * of an interaction on this hook and leave hover-only polish on * `useHoverCapable`, so a component that opens on hover also opens on tap. */ export function useTouchCapable() { const [canTouch, setCanTouch] = useState(false); useEffect(() => { if (typeof window === "undefined") return; const mq = window.matchMedia?.("(any-pointer: coarse)"); // iPadOS disguises its pointer media queries; maxTouchPoints it reports // honestly, which is what makes it the standard iPad tell. const update = () => setCanTouch(Boolean(mq?.matches) || navigator.maxTouchPoints > 0); update(); mq?.addEventListener?.("change", update); return () => mq?.removeEventListener?.("change", update); }, []); return canTouch; } 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/command-palette.tsx","content":"$51","type":"registry:component","target":"@components/motion/command-palette.tsx"},{"path":"lib/ease.ts","content":"$52","type":"registry:lib","target":"@lib/ease.ts"},{"path":"lib/hooks/use-touch-capable.ts","content":"$53","type":"registry:hook","target":"@lib/hooks/use-touch-capable.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"}]]}]