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:Td2f,"use client"; // karaui.kamisama-v0.my.id/components/blocks/not-found import { useEffect, useState } from "react"; import { useReducedMotion } from "motion/react"; import { NOT_FOUND_DEFAULTS, NotFoundActions, NotFoundStage, type NotFoundProps, } from "./shared"; const GLYPHS = "ABCDEFGHJKLMNPQRSTUVWXYZ0123456789#%&@$?/\\"; const SCRAMBLE_MS = 700; const TICK_MS = 45; /** * Renders the code, scrambling each character on mount before it settles. * SSR and the first paint show the real code, so the scramble is a pure * client-side enhancement and reduced-motion users see the code immediately. */ function Scramble({ text }: { text: string }) { const reduce = useReducedMotion(); const [display, setDisplay] = useState(text); useEffect(() => { if (reduce) { setDisplay(text); return; } const chars = text.split(""); const start = performance.now(); let raf = 0; let last = 0; const loop = (now: number) => { if (now - last >= TICK_MS) { last = now; const progress = Math.min((now - start) / SCRAMBLE_MS, 1); const settled = Math.floor(progress * chars.length); setDisplay( chars .map((ch, i) => i < settled || ch === " " ? ch : GLYPHS[Math.floor(Math.random() * GLYPHS.length)], ) .join(""), ); } if (now - start < SCRAMBLE_MS) { raf = requestAnimationFrame(loop); } else { setDisplay(text); } }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, [text, reduce]); return {display}; } export function NotFoundGlitch({ className, code = NOT_FOUND_DEFAULTS.code, title = NOT_FOUND_DEFAULTS.title, description = NOT_FOUND_DEFAULTS.description, homeHref, homeLabel, browseHref, browseLabel, }: NotFoundProps) { return (

{/* Chromatic ghost layers, nudged apart on hover. */}

{title}

{description}

); } 53:Ta83,"use client"; import { motion, useReducedMotion } from "motion/react"; import { SPRING_PRESS } from "@/lib/ease"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { cn } from "@/lib/utils"; export interface NotFoundProps { className?: string; /** The big status code. */ code?: string; title?: string; description?: string; homeHref?: string; homeLabel?: string; browseHref?: string; browseLabel?: string; } export const NOT_FOUND_DEFAULTS = { code: "404", title: "Page not found", description: "The page you are looking for moved, vanished, or never existed.", homeHref: "/", homeLabel: "Back home", browseHref: "/components/motion", browseLabel: "Browse components", } as const; type ActionsProps = Pick< NotFoundProps, "homeHref" | "homeLabel" | "browseHref" | "browseLabel" | "className" >; /** The shared dual CTA: a primary "Back home" and a secondary "Browse". */ export function NotFoundActions({ homeHref = NOT_FOUND_DEFAULTS.homeHref, homeLabel = NOT_FOUND_DEFAULTS.homeLabel, browseHref = NOT_FOUND_DEFAULTS.browseHref, browseLabel = NOT_FOUND_DEFAULTS.browseLabel, className, }: ActionsProps) { const reduce = useReducedMotion(); const canHover = useHoverCapable(); const whileTap = reduce ? undefined : { scale: 0.96 }; const whileHover = reduce || !canHover ? undefined : { scale: 1.02 }; return (

{homeLabel} {browseLabel}

); } /** Centers a variant and gives it a consistent minimum stage height. */ export function NotFoundStage({ className, children, }: { className?: string; children: React.ReactNode; }) { return (

{children}

); } 54: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; 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/not-found/glitch.tsx","content":"$52","type":"registry:component","target":"@components/motion/not-found/glitch.tsx"},{"path":"components/motion/not-found/shared.tsx","content":"$53","type":"registry:component","target":"@components/motion/not-found/shared.tsx"},{"path":"lib/ease.ts","content":"$54","type":"registry:lib","target":"@lib/ease.ts"},{"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":"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"}]]}]