5f: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"] 60: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"] 61: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"] 62: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"] 63: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"] 64:T34c1,"use client"; import { useEffect, useId, useMemo, useRef, useState } from "react"; import { LayoutGroup, motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; export type CodeFile = { name: string; language: "tsx" | "css"; code: string }; type Kind = "keyword" | "string" | "comment" | "number" | "plain"; type Token = { kind: Kind; text: string }; // Syntax colors are data, like the swatches in color-swatches: they encode // token kinds rather than decorate, so they sit outside the token palette. // Each pair keeps the same hue and roughly 4.5:1 against the surface in both // themes; comments and plain text stay on the muted and foreground tokens. const COLORS: Record = { keyword: "light-dark(oklch(0.5 0.14 285), oklch(0.78 0.11 285))", string: "light-dark(oklch(0.5 0.1 155), oklch(0.8 0.1 155))", number: "light-dark(oklch(0.5 0.14 285), oklch(0.78 0.11 285))", comment: "var(--muted-foreground)", plain: undefined, }; const TS_KEYWORDS = new Set( "import from export default function return const let type interface if else as new true false null undefined async await".split( " ", ), ); // One pass per language. Earlier alternatives win, so a number inside a // string or comment stays part of that string or comment. // Each group maps, in order, to the kind in GROUPS. A TS word is only a // keyword when it is in TS_KEYWORDS; a CSS keyword is an at-rule or a // property name at the start of a line. const PATTERNS = { tsx: /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)|("[^"\n]*"|'[^'\n]*'|`[^`]*`)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)/g, css: /(\/\*[\s\S]*?\*\/)|("[^"\n]*"|'[^'\n]*')|(\b\d+(?:\.\d+)?(?:px|ms|s|rem|em|%)?)|(@[\w-]+|(?<=^[ \t]*)[a-z-]+(?=\s*:))/gm, }; const GROUPS = ["comment", "string", "number", "word"] as const; function tokenize(code: string, language: CodeFile["language"]): Token[][] { const tokens: Token[] = []; let last = 0; for (const match of code.matchAll(PATTERNS[language])) { const index = match.index ?? 0; if (index > last) tokens.push({ kind: "plain", text: code.slice(last, index) }); const group = GROUPS[match.slice(1).findIndex((g) => g !== undefined)]; const kind: Kind = group !== "word" ? group : language === "css" || TS_KEYWORDS.has(match[0]) ? "keyword" : "plain"; tokens.push({ kind, text: match[0] }); last = index + match[0].length; } if (last < code.length) tokens.push({ kind: "plain", text: code.slice(last) }); // Split into lines, cutting any token that spans one, like a block comment. const lines: Token[][] = [[]]; for (const token of tokens) { token.text.split("\n").forEach((part, i) => { if (i > 0) lines.push([]); if (part) lines[lines.length - 1].push({ kind: token.kind, text: part }); }); } return lines; } export function CodeBlock({ files, className }: { files: CodeFile[]; className?: string }) { const reduceMotion = useReducedMotion(); const id = useId(); const [active, setActive] = useState(0); const tabs = useRef<(HTMLButtonElement | null)[]>([]); const highlighted = useMemo(() => files.map((f) => tokenize(f.code.trim(), f.language)), [files]); return (

{files.map((file, i) => { const selected = i === active; return ( ); })}

{/* Every file keeps its own scroll box, stacked in one fixed-height cell, so switching is a true crossfade and each file remembers where you had scrolled to. */}

{files.map((file, i) => { const selected = i === active; return (

                
                  {highlighted[i].map((line, n) => (
                    
                      {/* Sticky, so numbers stay put while long lines scroll
                          sideways underneath them. */}
                      
                        {n + 1}
                      
                      
                        {line.map((token, t) => (
                          
                            {token.text}
                          
                        ))}
                        {/* Keeps empty lines one row tall. */}
                        {line.length === 0 && " "}
                      
                    
                  ))}

); })}

); } type Status = "idle" | "copied" | "failed"; function CopyCode({ value }: { value: string }) { const reduceMotion = useReducedMotion(); const [status, setStatus] = useState("idle"); const timer = useRef>(undefined); const attempt = useRef(0); useEffect(() => () => clearTimeout(timer.current), []); const show = (next: Status) => { setStatus(next); clearTimeout(timer.current); // Long enough to read the label, short enough to copy again soon. timer.current = setTimeout(() => setStatus("idle"), 1600); }; const copy = async () => { const id = ++attempt.current; // Confirms on press; the write is near instant and waiting for it makes // the click feel ignored. show("copied"); try { if (!navigator.clipboard) throw new Error("Clipboard unavailable"); await navigator.clipboard.writeText(value); } catch { // A newer click has already taken over the label. if (id === attempt.current) show("failed"); } }; const labels: Record = { idle: "Copy", copied: "Copied", failed: "Failed" }; return ( ); } function Icon({ visible, reduceMotion, children, }: { visible: boolean; reduceMotion: boolean | null; children: React.ReactNode; }) { const hidden = reduceMotion ? { opacity: 0 } : { scale: 0.25, opacity: 0, filter: "blur(4px)" }; return ( {children} ); } const FILES: CodeFile[] = [ { name: "button.tsx", language: "tsx", code: ` import { cn } from "@/lib/utils"; type ButtonProps = React.ComponentProps<"button">; // Scales to 0.96 on press, so the click feels physical. export function Button({ className, ...props }: ButtonProps) { return ( ; } `, }, { name: "styles.css", language: "css", code: ` /* Strong ease-out: responds at once, then settles. */ .button { height: 40px; padding: 0 16px; border-radius: 999px; transition: scale 150ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease; } .button:active { scale: 0.96; } @media (prefers-reduced-motion: reduce) { .button { transition: background-color 150ms ease; } } `, }, ]; export default function CodeBlockDemo() { return ; } 5e:["$","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","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"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],["$","$L60",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.06), 0 6px 16px -6px oklch(0 0 0 / 0.12)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"0 0 0 1px oklch(1 0 0 / 0.08), 0 1px 2px oklch(0 0 0 / 0.4), 0 6px 16px -6px oklch(0 0 0 / 0.6)"}]]}]]}],["$","$L62",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":["$","$L61",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","shadow-raised",{"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":["--","shadow-raised",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--shadow-raised)"}]]}]]}],["$","$L62",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L63",null,{"files":[{"path":"components/code-block.tsx","content":"$64","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"}],"className":"h-[70svh] min-h-80"}]]}]