64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:I[544296,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ItemStyles"] 66:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollArea"] 67:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 68: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 69:T2a12,"use client"; import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from "react"; // --------------------------------------------------------------------------- // FolioTurn — pagination rendered as a row of book folios instead of bare // numbers. Every button is a paper "card"; the current one sits 1px raised // with a soft shadow. Each card carries a corner dog-ear built from the // classic CSS border-triangle technique (an element with all size in // border-width and only two adjacent border colors opaque) so it costs no // extra markup layer — just a --curl custom property driving border-width. // // Three distinct curl behaviors, all on that same triangle: // - hovering ANY page number: its own corner dog-ear grows a few px and // its ink darkens (a light "this is interactive" tell). // - hovering prev/next: the CURRENT page's corner grows further and a // small preview of the destination number fades in beside it — you're // peeking at what prev/next would turn to, not what you're hovering. // - completing a turn (the `page` prop actually changes, from any // trigger): the outgoing page's corner grows the rest of the way while // the card itself gets a brief eased tilt+fade, then the new current // page settles into its raised resting state. A once-visited page // keeps a small permanent crease (a second, smaller, static triangle) // forever after. // // Keyboard is a roving-tabindex toolbar (prev, every page number, next, all // one tab stop): ArrowLeft/ArrowRight move focus by one among the ENABLED // controls, Home/End jump to the first/last, matching the roving pattern // used elsewhere in this registry (dropdown-drape, accordion-latch) rather than a // custom listbox. Enter/Space activate the focused control natively. // `

` + `aria-current="page"` on the current button is the // only semantic layer; there is no live region because the page number // itself, visibly raised, is the state. // // prefers-reduced-motion: no curl growth, no tilt/fade on turn, pages swap // instantly — the permanent visited-crease still appears (it is not an // animation, just a static mark) so history stays visible either way. // --------------------------------------------------------------------------- export interface FolioTurnProps { /** Current page, 1-indexed. */ page: number; /** Total number of pages. */ count: number; /** called with the new 1-indexed page when a different page is chosen */ onChange: (page: number) => void; /** extra classes merged onto the rendered root element */ className?: string; } const TURN_MS = 280; export function FolioTurn({ page, count, onChange, className = "" }: FolioTurnProps) { const [hoverPage, setHoverPage] = useState(null); const [peekDir, setPeekDir] = useState<0 | -1 | 1>(0); const [turning, setTurning] = useState<{ from: number } | null>(null); const [visited, setVisited] = useState>(() => new Set([page])); const reducedRef = useRef(false); const prevPageRef = useRef(page); const turnTimerRef = useRef(undefined); // Flat control list: index 0 = prev, 1..count = page numbers, count+1 = next. const total = count + 2; const btnRefs = useRef>([]); const isDisabled = (i: number) => (i === 0 && page <= 1) || (i === total - 1 && page >= count); const enabledIndices = Array.from({ length: total }, (_, i) => i).filter((i) => !isDisabled(i)); useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); reducedRef.current = mq.matches; const onMq = () => { reducedRef.current = mq.matches; }; mq.addEventListener("change", onMq); return () => mq.removeEventListener("change", onMq); }, []); useEffect(() => { const prev = prevPageRef.current; prevPageRef.current = page; setVisited((v) => (v.has(page) ? v : new Set(v).add(page))); if (prev === page) return; window.clearTimeout(turnTimerRef.current); if (reducedRef.current) return; setTurning({ from: prev }); turnTimerRef.current = window.setTimeout(() => setTurning(null), TURN_MS); return () => window.clearTimeout(turnTimerRef.current); }, [page]); const onKeyDown = (e: ReactKeyboardEvent, i: number) => { const pos = enabledIndices.indexOf(i); let nextPos = -1; if (e.key === "ArrowLeft") nextPos = pos <= 0 ? enabledIndices.length - 1 : pos - 1; else if (e.key === "ArrowRight") nextPos = (pos + 1) % enabledIndices.length; else if (e.key === "Home") nextPos = 0; else if (e.key === "End") nextPos = enabledIndices.length - 1; if (nextPos >= 0) { e.preventDefault(); btnRefs.current[enabledIndices[nextPos]!]?.focus(); } }; const go = (n: number) => { if (n < 1 || n > count || n === page) return; onChange(n); }; return (

); } const CSS = ` .ns-ft-nav{display:inline-block;} .ns-ft-list{display:flex;align-items:flex-end;gap:6px;list-style:none;margin:0;padding:0;} .ns-ft-nav-btn{ display:flex;align-items:center;justify-content:center; width:32px;height:38px; border:1px solid var(--border);border-radius:4px; background:var(--background);color:var(--ns-muted); font-size:16px;line-height:1;cursor:pointer; transition:color 150ms ease, border-color 150ms ease; } .ns-ft-nav-btn:not(:disabled):hover{color:var(--foreground);border-color:var(--ns-muted);} .ns-ft-nav-btn:disabled{opacity:0.35;cursor:default;} .ns-ft-nav-btn:focus-visible{outline:2px solid var(--ns-accent);outline-offset:1px;} .ns-ft-item{position:relative;} .ns-ft-page{ --curl:0; position:relative; overflow:hidden; width:34px;height:40px; border:1px solid var(--border);border-radius:4px; background:var(--background); color:var(--ns-muted); font-family:var(--font-geist-mono, ui-monospace, monospace); font-size:13px; cursor:pointer; transform:translateY(0); box-shadow:none; transition:color 150ms ease, transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 200ms ease, border-color 150ms ease; } .ns-ft-page:hover{color:var(--foreground);border-color:var(--ns-muted);} .ns-ft-page:focus-visible{outline:2px solid var(--ns-accent);outline-offset:1px;} .ns-ft-page[data-current]{ color:var(--foreground); transform:translateY(-1px); box-shadow:0 2px 4px -1px rgba(0,0,0,0.35); border-color:var(--foreground); } .ns-ft-page[data-turning]{ transition:transform ${TURN_MS}ms cubic-bezier(0.55,0,0.85,0.35), opacity ${TURN_MS}ms ease; transform:translateY(-1px) rotateZ(-3deg) translateX(-2px); opacity:0.75; } .ns-ft-num{position:relative;z-index:1;} .ns-ft-peek{ position:absolute; top:3px;right:3px; font-size:9px; color:var(--ns-muted); opacity:0; transition:opacity 200ms ease; z-index:1; } .ns-ft-page[data-peek] .ns-ft-peek{opacity:1;} .ns-ft-curl{ position:absolute; top:0;right:0; width:0;height:0; border-style:solid; border-color:transparent var(--border) transparent transparent; border-width:0 calc(var(--curl) * 16px) calc(var(--curl) * 16px) 0; transition:border-width 220ms cubic-bezier(0.22,1,0.36,1); } .ns-ft-crease{ position:absolute; bottom:0;right:0; width:0;height:0; border-style:solid; border-width:0 0 7px 7px; border-color:transparent transparent var(--border) transparent; } @media (prefers-reduced-motion: reduce){ .ns-ft-page,.ns-ft-curl,.ns-ft-peek{transition:none !important;} } `; 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/pagination-dog-ear/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/pagination-dog-ear.tsx"}],"className":"h-[70svh] min-h-80"}]]}]