{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "not-found", "title": "Not Found", "author": "AlgorizeTech", "description": "Ask the user to pick one of 6 not found variants: https://avaraui.com/view/not-found. This item holds 6 of them as looks of one component (component-wall, aurora-glass, blueprint, spatial-portal, hyperspace, quantum-hologram). Skip the question if the user already named one. A responsive, full-page 404 Hyperspace website section with ambient radial glow, masked cyber grid backdrop, animated compass indicator, and customizable shortcuts.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "utils" ], "files": [ { "path": "src/components/custom/blocks/NotFoundBlock.tsx", "content": "\"use client\";\n\nimport React, { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { accentStyle } from \"@/lib/accent\";\nimport {\n BookOpen,\n Home,\n LayoutGrid,\n Compass,\n Sparkles,\n ArrowRight,\n Activity,\n Search,\n Cpu,\n Radio,\n Zap,\n} from \"lucide-react\";\n\nexport type NotFoundVariant =\n | \"hyperspace\"\n | \"animated-beam-border\"\n | \"quantum-hologram\"\n | \"spatial-portal\"\n | \"kinetic-wireframe\"\n | \"infinite-horizon\"\n | \"dimensional-portal\"\n | \"portal\"\n | \"aurora-glass\"\n | \"component-wall\"\n | \"mosaic-wall\"\n | \"card-wall\";\n\nexport interface ShortcutItem {\n label: string;\n href?: string;\n onClick?: () => void;\n icon?: React.ReactNode;\n}\n\nexport interface NotFoundAction {\n label: string;\n href?: string;\n onClick?: () => void;\n icon?: React.ReactNode;\n}\n\nexport interface NotFoundSectionProps\n extends React.HTMLAttributes {\n /** Visual variant: classic \"hyperspace\" or vibrant \"animated-beam-border\" */\n variant?: NotFoundVariant;\n /** Numerical error code, defaults to \"404\" */\n code?: string;\n /** Floating badge text */\n badge?: string;\n /** Main heading title */\n title?: string;\n /** Explanatory description */\n description?: string;\n /** Primary button action */\n primaryAction?: NotFoundAction;\n /** Secondary button action */\n secondaryAction?: NotFoundAction;\n /** Section heading for shortcut quicklinks */\n shortcutsTitle?: string;\n /** List of shortcut links */\n shortcuts?: ShortcutItem[];\n /** Toggle visibility of shortcut quicklinks card */\n showShortcuts?: boolean;\n /** Optional theme accent color string */\n color?: string;\n}\n\n/* ========================================================================== */\n/* VARIANT 1: CLASSIC HYPERSPACE 404 SECTION */\n/* ========================================================================== */\n\nexport function HyperspaceNotFoundSection({\n code = \"404\",\n badge = \"Error 404 • Page Not Found\",\n title = \"Lost in Hyperspace?\",\n description = \"The page you are looking for doesn't exist, was relocated, or is temporarily unavailable in this documentation.\",\n primaryAction = {\n label: \"Explore Documentation\",\n href: \"#\",\n icon: ,\n },\n secondaryAction = {\n label: \"Back to Home\",\n href: \"/\",\n icon: ,\n },\n shortcutsTitle = \"Popular Shortcuts\",\n shortcuts = [\n {\n label: \"All Components\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"Installation\",\n href: \"#\",\n icon: ,\n },\n ],\n showShortcuts = true,\n color,\n className,\n ...props\n}: NotFoundSectionProps) {\n const dynamicAccent = accentStyle(color);\n\n const renderAction = (action?: NotFoundAction, isPrimary = false) => {\n if (!action) return null;\n\n const baseClass = isPrimary\n ? \"inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-full bg-foreground px-7 py-3 text-[14px] font-semibold tracking-[0.3px] text-background transition-all hover:bg-foreground/90 active:scale-[0.98] cursor-pointer\"\n : \"inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-full bg-foreground/[0.04] px-7 py-3 text-[14px] font-medium text-foreground transition-all hover:bg-foreground/10 active:scale-[0.98] cursor-pointer\";\n\n const defaultIcon = isPrimary ? (\n \n ) : (\n \n );\n const actionIcon = action.icon !== undefined ? action.icon : defaultIcon;\n\n if (action.href) {\n return (\n {\n if (action.onClick) {\n e.preventDefault();\n action.onClick();\n }\n }}\n className={baseClass}\n >\n {actionIcon}\n {action.label}\n \n );\n }\n\n return (\n \n {actionIcon}\n {action.label}\n \n );\n };\n\n return (\n \n {/* Ambient Radial Background Glows */}\n \n \n\n {/* Grid Pattern Background overlay */}\n \n\n
\n {/* Status Badge */}\n {badge && (\n
\n \n {badge}\n
\n )}\n\n {/* Big Code Heading */}\n

\n {code}\n

\n\n {/* Title & Description */}\n
\n

\n {title}\n

\n

\n {description}\n

\n
\n\n {/* Primary Action Buttons */}\n {(primaryAction || secondaryAction) && (\n
\n {renderAction(primaryAction, true)}\n {renderAction(secondaryAction, false)}\n
\n )}\n\n {/* Quick Links Footer Card */}\n {showShortcuts && shortcuts && shortcuts.length > 0 && (\n
\n

\n {shortcutsTitle}\n

\n
\n {shortcuts.map((shortcut, idx) => {\n const ItemTag = shortcut.href ? \"a\" : \"button\";\n return (\n {\n if (shortcut.onClick) {\n e.preventDefault();\n shortcut.onClick();\n }\n }}\n className=\"flex items-center gap-2.5 rounded-lg bg-foreground/[0.04] p-2.5 text-left text-[13px] text-foreground/70 transition-all hover:bg-foreground/[0.07] hover:text-foreground cursor-pointer border border-transparent hover:border-foreground/[0.04]\"\n >\n {shortcut.icon}\n {shortcut.label}\n \n );\n })}\n
\n
\n )}\n
\n \n );\n}\n\n/* ========================================================================== */\n/* VARIANT 2: ARCHITECTURAL MODULAR CAD BLUEPRINT 404 SECTION */\n/* ========================================================================== */\n\nconst ANIMATED_BORDER_KEYFRAMES = `\n@keyframes not-found-float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-4px); }\n}\n@keyframes not-found-ruler-scan {\n 0% { transform: translateX(-100%); }\n 50% { transform: translateX(500%); }\n 100% { transform: translateX(-100%); }\n}\n`;\n\nexport function AnimatedBeamNotFoundSection({\n code = \"404\",\n badge = \"CAD SPEC // 0x404 ROUTE EXCEPTION\",\n title = \"Lost in the Digital Architecture?\",\n description = \"The requested navigation vector has collapsed or relocated to an unindexed partition. Re-anchor to safety using the architectural directory below.\",\n primaryAction = {\n label: \"Explore Documentation\",\n href: \"#\",\n icon: ,\n },\n secondaryAction = {\n label: \"Return to Homepage\",\n href: \"/\",\n icon: ,\n },\n shortcutsTitle = \"Tactical Navigation Directory\",\n shortcuts = [\n {\n label: \"All Components\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"Installation Guide\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"Templates Library\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"Live Changelog\",\n href: \"#\",\n icon: ,\n },\n ],\n showShortcuts = true,\n color,\n className,\n ...props\n}: NotFoundSectionProps) {\n const dynamicAccent = accentStyle(color);\n const [searchVal, setSearchVal] = useState(\"\");\n const [searchStatus, setSearchStatus] = useState(null);\n\n const handleSearch = (e: React.FormEvent) => {\n e.preventDefault();\n if (!searchVal.trim()) return;\n setSearchStatus(`Scanning vector \"${searchVal.trim()}\"... 4 verified healthy routes identified.`);\n setTimeout(() => setSearchStatus(null), 3500);\n };\n\n const renderAction = (action?: NotFoundAction, isPrimary = false) => {\n if (!action) return null;\n\n const baseClass = isPrimary\n ? \"group relative inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-[var(--radius-xl,0.875rem)] bg-primary text-primary-foreground font-semibold px-5 sm:px-6 py-2.5 text-xs sm:text-sm hover:opacity-90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200 cursor-pointer select-none\"\n : \"relative inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-[var(--radius-xl,0.875rem)] border border-border bg-background hover:bg-muted hover:border-primary/40 hover:scale-[1.02] text-foreground font-medium px-5 sm:px-6 py-2.5 text-xs sm:text-sm active:scale-[0.98] transition-all duration-200 cursor-pointer select-none\";\n\n const defaultIcon = isPrimary ? (\n \n ) : (\n \n );\n const actionIcon = action.icon !== undefined ? action.icon : defaultIcon;\n\n if (action.href) {\n return (\n {\n if (action.onClick) {\n e.preventDefault();\n action.onClick();\n }\n }}\n className={baseClass}\n >\n {actionIcon}\n {action.label}\n {isPrimary && (\n \n )}\n \n );\n }\n\n return (\n \n );\n };\n\n return (\n \n \n\n {/* Crisp Architectural Background Grid (Zero Blur Blobs) */}\n \n\n {/* Architectural CAD Blueprint Master Container (Zero Shadow) */}\n
\n {/* ================================================================== */}\n {/* TOP SPEC RAIL: Technical Status Header */}\n {/* ================================================================== */}\n
\n
\n \n \n \n \n \n {badge}\n \n
\n
\n {\"CAD SPEC // ROUTE_EXCEPTION\"}\n /\n 0x404\n
\n
\n STATUS: 404_NOT_FOUND\n \n UNRESOLVED\n \n
\n
\n\n {/* ================================================================== */}\n {/* HERO ROW: Monumental Typographic 404 + Metadata Spec Tiles */}\n {/* ================================================================== */}\n
\n
\n \n [+]\n {\"ERROR_IDENTIFIER // VECTOR_NULL\"}\n \n

\n {code}\n

\n
\n\n {/* Technical Metadata Spec Box with Hover Scale & Border Glow Transitions */}\n
\n
\n PROTOCOL\n HTTP/3 QUIC\n
\n
\n STATE\n NULL_POINTER\n
\n
\n SAFE_NODES\n \n \n \n \n \n 04 VERIFIED\n \n
\n
\n
\n\n {/* ================================================================== */}\n {/* DRAFTING RULER TICK BAR (Architectural Spec Lines with Scan Beam) */}\n {/* ================================================================== */}\n
\n {/* Animated laser scan beam along the ruler bar */}\n \n +\n
\n {Array.from({ length: 32 }).map((_, i) => (\n \n ))}\n
\n +\n
\n\n {/* ================================================================== */}\n {/* MODULAR CONTENT BODY: 2-Column Architectural Layout */}\n {/* ================================================================== */}\n
\n {/* Left Column: Diagnostics, Description & Action Controls */}\n
\n
\n
\n \n {\"// DIAGNOSTIC SUMMARY\"}\n \n
\n

\n {title}\n

\n

\n {description}\n

\n
\n\n {/* Flat Route Resolver Search Form (Zero Shadow, Smooth Focus) */}\n
\n
\n \n setSearchVal(e.target.value)}\n placeholder=\"Search route or component directory...\"\n className=\"w-full rounded-[var(--radius-xl,0.875rem)] bg-background border border-border pl-10 pr-22 py-2.5 text-xs sm:text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-200 font-mono\"\n />\n \n RESOLVE\n \n
\n {searchStatus && (\n

\n {searchStatus}\n

\n )}\n
\n\n {/* Primary & Secondary Action Buttons (Zero Shadow with Smooth Micro-Interaction) */}\n {(primaryAction || secondaryAction) && (\n
\n {renderAction(primaryAction, true)}\n {renderAction(secondaryAction, false)}\n
\n )}\n
\n\n {/* Right Column: Navigation Directory Tiles */}\n
\n
\n
\n \n {shortcutsTitle}\n \n \n [SELECT VECTOR]\n \n
\n\n {/* 4 Quick-link tiles in responsive grid with Smooth Hover Transitions */}\n {showShortcuts && shortcuts && shortcuts.length > 0 && (\n
\n {shortcuts.map((shortcut, idx) => {\n const ItemTag = shortcut.href ? \"a\" : \"button\";\n return (\n {\n if (shortcut.onClick) {\n e.preventDefault();\n shortcut.onClick();\n }\n }}\n className=\"group relative flex items-center justify-between gap-3 p-3 rounded-[var(--radius-lg,0.5rem)] border border-border bg-background hover:bg-muted/70 hover:border-primary/50 hover:translate-x-0.5 transition-all duration-200 cursor-pointer text-left\"\n >\n
\n {/* Icon container: flat border, fills with solid primary on hover, icon turns pure white */}\n
\n {shortcut.icon}\n
\n
\n \n {shortcut.label}\n \n \n VEC_0{idx + 1}\n \n
\n
\n \n \n );\n })}\n
\n )}\n
\n\n {/* Bottom Status Spec within Right Column */}\n
\n DESTINATION_STATUS\n \n \n READY TO ANCHOR\n \n
\n
\n
\n\n {/* ================================================================== */}\n {/* BOTTOM ARCHITECTURAL SPEC BAR */}\n {/* ================================================================== */}\n
\n {\"CAD DRAFT // 01_ROOT -- RECOVERY DIRECTORY\"}\n ALGORIZE UI • SYSTEM SPEC\n COORD: [404, 0, NULL]\n
\n
\n \n );\n}\n\n/* ========================================================================== */\n/* VARIANT 3: ADVANCED QUANTUM HOLOGRAM & GYROSCOPIC SINGULARITY 404 */\n/* ========================================================================== */\n\nconst QUANTUM_HOLOGRAM_KEYFRAMES = `\n@keyframes quantum-orbit-clockwise {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes quantum-orbit-counter {\n 0% { transform: rotate(360deg); }\n 100% { transform: rotate(0deg); }\n}\n@keyframes quantum-hologram-flicker {\n 0%, 100% { transform: translate(0, 0); opacity: 0.9; }\n 25% { transform: translate(-2px, 1px); opacity: 0.7; }\n 50% { transform: translate(2px, -1px); opacity: 0.95; }\n 75% { transform: translate(-1px, -2px); opacity: 0.8; }\n}\n@keyframes quantum-wave-pulse {\n 0%, 100% { transform: scaleY(0.3); opacity: 0.6; }\n 50% { transform: scaleY(1.4); opacity: 1; }\n}\n@keyframes quantum-radar-sweep {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes quantum-pulse-glow {\n 0%, 100% { transform: scale(0.95); opacity: 0.35; }\n 50% { transform: scale(1.08); opacity: 0.7; }\n}\n`;\n\nexport function QuantumHologramNotFoundSection({\n code = \"404\",\n badge = \"QUANTUM ROUTE ANOMALY // 0x404\",\n title = \"Lost in the Quantum Singularity?\",\n description = \"The spacetime coordinates of this page have drifted into an unmapped event horizon. Re-align your navigational trajectory via the recovery vectors below.\",\n primaryAction = {\n label: \"Re-anchor to Orbit\",\n href: \"#\",\n icon: ,\n },\n secondaryAction = {\n label: \"Return to Base\",\n href: \"/\",\n icon: ,\n },\n shortcutsTitle = \"Quantum Recovery Trajectories\",\n shortcuts = [\n {\n label: \"Component Matrix\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"System Quickstart\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"Telemetry Hub\",\n href: \"#\",\n icon: ,\n },\n {\n label: \"Live Changelog\",\n href: \"#\",\n icon: ,\n },\n ],\n showShortcuts = true,\n color,\n className,\n ...props\n}: NotFoundSectionProps) {\n const dynamicAccent = accentStyle(color);\n const [searchVal, setSearchVal] = useState(\"\");\n const [searchStatus, setSearchStatus] = useState(null);\n\n const handleSearch = (e: React.FormEvent) => {\n e.preventDefault();\n if (!searchVal.trim()) return;\n setSearchStatus(`Analyzing coordinates \"${searchVal.trim()}\"... Event horizon bypassed. 4 safe trajectories locked.`);\n setTimeout(() => setSearchStatus(null), 3500);\n };\n\n const renderAction = (action?: NotFoundAction, isPrimary = false) => {\n if (!action) return null;\n\n const baseClass = isPrimary\n ? \"group relative inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-[var(--radius-xl,1rem)] bg-primary text-primary-foreground font-semibold px-6 py-3 text-xs sm:text-sm shadow-lg shadow-primary/25 hover:shadow-primary/40 hover:scale-[1.02] active:scale-[0.98] transition-all cursor-pointer select-none\"\n : \"relative inline-flex w-full sm:w-auto items-center justify-center gap-2 rounded-[var(--radius-xl,1rem)] border border-border/80 bg-background/80 hover:bg-muted text-foreground font-medium px-6 py-3 text-xs sm:text-sm hover:scale-[1.02] active:scale-[0.98] transition-all cursor-pointer backdrop-blur-md select-none\";\n\n const defaultIcon = isPrimary ? (\n \n ) : (\n \n );\n const actionIcon = action.icon !== undefined ? action.icon : defaultIcon;\n\n if (action.href) {\n return (\n {\n if (action.onClick) {\n e.preventDefault();\n action.onClick();\n }\n }}\n className={baseClass}\n >\n {actionIcon}\n {action.label}\n {isPrimary && (\n \n )}\n \n );\n }\n\n return (\n \n );\n };\n\n return (\n \n \n\n {/* Bioluminescent Cosmic Ambient Light Blooms */}\n \n \n\n {/* Futuristic Cyber-Grid Background Mesh */}\n \n\n
\n {/* ================================================================== */}\n {/* TOP QUANTUM HUD TELEMETRY RAIL */}\n {/* ================================================================== */}\n
\n {/* Left: Signal beacon with animated frequency waveform */}\n
\n \n \n \n \n \n {badge}\n \n
\n \n \n \n \n
\n
\n\n {/* Center: System coordinates with live pulsating icon */}\n
\n \n SINGULARITY: EVENT_HORIZON_0x404\n
\n\n {/* Right: Quantum State Status */}\n
\n \n \n PARITY: UNBOUND\n \n •\n \n HTTP/3\n \n
\n
\n\n {/* ================================================================== */}\n {/* CENTERPIECE: 3D GYROSCOPIC SINGULARITY & CHROMATIC HOLOGRAM 404 */}\n {/* ================================================================== */}\n
\n {/* Gyroscopic 3D Concentric Orbit Rings */}\n
\n {/* Ambient Pulsing Glow Core */}\n \n\n {/* Outer Tilted 3D Orbit Ring (Clockwise) with Orbiting Satellite Bead */}\n \n \n \n
\n\n {/* Middle Tilted 3D Orbit Ring (Counter-Clockwise) */}\n \n \n
\n\n {/* Inner Circular Radar Sweep Scanner */}\n \n
\n
\n\n {/* Center Chromatic Aberration Holographic 404 Display */}\n
\n {/* Cyan/Rose Chromatic Aberration Underlayer with Glitch Flicker */}\n \n {code}\n \n \n {code}\n \n\n {/* Main Crisp Holographic Headline */}\n

\n {code}\n

\n
\n
\n\n {/* Title and Human-Friendly Explanatory Description */}\n
\n

\n {title}\n

\n

\n {description}\n

\n
\n\n {/* Interactive Quantum Terminal Resolver Search Bar */}\n
\n
\n \n >>\n \n setSearchVal(e.target.value)}\n placeholder=\"INPUT_COORDINATE // RESOLVE_ROUTE\"\n className=\"w-full rounded-[var(--radius-xl,1rem)] bg-card/80 dark:bg-neutral-900/80 border border-primary/30 pl-11 pr-22 py-2.5 sm:py-3 text-xs sm:text-sm text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/25 backdrop-blur-md transition-all font-mono\"\n />\n \n RESOLVE\n \n
\n {searchStatus && (\n

\n {searchStatus}\n

\n )}\n
\n\n {/* Primary & Secondary Call to Action Buttons */}\n {(primaryAction || secondaryAction) && (\n
\n {renderAction(primaryAction, true)}\n {renderAction(secondaryAction, false)}\n
\n )}\n \n\n {/* ================================================================== */}\n {/* HOLOGRAPHIC RECOVERY TRAJECTORIES GRID */}\n {/* ================================================================== */}\n {showShortcuts && shortcuts && shortcuts.length > 0 && (\n
\n
\n \n [+] {shortcutsTitle}\n \n \n SELECT_TRAJECTORY\n \n
\n\n
\n {shortcuts.map((shortcut, idx) => {\n const ItemTag = shortcut.href ? \"a\" : \"button\";\n return (\n {\n if (shortcut.onClick) {\n e.preventDefault();\n shortcut.onClick();\n }\n }}\n className=\"group relative flex items-center justify-between gap-3 p-3 sm:p-3.5 rounded-[var(--radius-xl,1rem)] border border-border/80 bg-card/60 hover:bg-card hover:border-primary/60 transition-all duration-200 hover:scale-[1.02] cursor-pointer text-left backdrop-blur-md shadow-xs hover:shadow-primary/10\"\n >\n
\n {/* Icon Container: Turns solid primary with crisp WHITE icon on hover */}\n
\n {shortcut.icon}\n
\n
\n \n {shortcut.label}\n \n \n {`TRAJ_0${idx + 1} // STABLE`}\n \n
\n
\n \n \n );\n })}\n
\n
\n )}\n \n \n );\n}\n\n/* ========================================================================== */\n/* VARIANT 4: KINETIC RADAR MATRIX WITH COLOR-ANIMATED 404 */\n/* ========================================================================== */\n\nconst WIREFRAME_STYLES = `\n@keyframes perspective-grid-flow {\n 0% {\n background-position: 0 0;\n }\n 100% {\n background-position: 0 60px;\n }\n}\n@keyframes horizon-glow-pulse {\n 0%, 100% {\n opacity: 0.35;\n transform: scaleY(0.85);\n }\n 50% {\n opacity: 0.85;\n transform: scaleY(1.2);\n }\n}\n@keyframes float-particle-rise-1 {\n 0% {\n transform: translateY(15px) scale(0.8);\n opacity: 0;\n }\n 50% {\n opacity: 0.85;\n }\n 100% {\n transform: translateY(-80px) scale(1.2);\n opacity: 0;\n }\n}\n@keyframes float-particle-rise-2 {\n 0% {\n transform: translateY(30px) scale(0.6);\n opacity: 0;\n }\n 50% {\n opacity: 0.95;\n }\n 100% {\n transform: translateY(-90px) scale(1.1);\n opacity: 0;\n }\n}\n@keyframes hero-404-color-flow {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n@keyframes hero-404-glow {\n 0%, 100% {\n filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.45));\n }\n 33% {\n filter: drop-shadow(0 0 35px rgba(6, 182, 212, 0.5));\n }\n 66% {\n filter: drop-shadow(0 0 35px rgba(236, 72, 153, 0.5));\n }\n}\n`;\n\nexport function KineticWireframeNotFoundSection({\n code = \"404\",\n badge,\n title = \"Page Not Found\",\n description = \"The page you are looking for doesn't exist, has been relocated, or is temporarily unavailable.\",\n primaryAction = {\n label: \"Back to Home\",\n href: \"/\",\n icon: ,\n },\n secondaryAction = {\n label: \"Explore Documentation\",\n href: \"#\",\n icon: ,\n },\n color,\n className,\n ...props\n}: NotFoundSectionProps) {\n const dynamicAccent = accentStyle(color);\n\n const renderAction = (action?: NotFoundAction, isPrimary = false) => {\n if (!action) return null;\n const baseClass = isPrimary\n ? \"inline-flex w-full sm:w-auto items-center justify-center gap-2.5 rounded-full bg-primary text-primary-foreground font-semibold px-8 py-3.5 text-xs sm:text-sm hover:opacity-95 hover:scale-[1.02] active:scale-[0.98] transition-all cursor-pointer shadow-lg shadow-primary/20\"\n : \"inline-flex w-full sm:w-auto items-center justify-center gap-2.5 rounded-full border border-border bg-card/80 hover:bg-card hover:border-foreground/30 text-foreground font-medium px-8 py-3.5 text-xs sm:text-sm backdrop-blur-md active:scale-[0.98] transition-all cursor-pointer\";\n\n const content = (\n <>\n {action.icon}\n {action.label}\n \n );\n\n if (action.onClick) {\n return (\n \n {content}\n \n );\n }\n\n return (\n \n {content}\n \n );\n };\n\n return (\n \n \n\n {/* ==================================================================== */}\n {/* FULL BACKGROUND: 3D PERSPECTIVE RUNWAY & HORIZON LIGHT BEAM */}\n {/* ==================================================================== */}\n \n {/* Subtle Cosmic Starfield / Dot Matrix */}\n \n\n {/* 3D Infinite Perspective Grid Floor */}\n \n \n \n\n {/* Horizon Light Beam & Aurora Glow */}\n \n \n\n {/* Rising Ambient Digital Sparks / Particles */}\n \n \n \n \n \n \n\n {/* ==================================================================== */}\n {/* FOREGROUND CONTENT: HERO 404 + MIRROR FLOOR REFLECTION */}\n {/* ==================================================================== */}\n
\n {/* Optional Clean Badge (Only if provided) */}\n {badge && (\n
\n \n \n \n \n {badge}\n
\n )}\n\n {/* MASSIVE 404 WITH INVERTED MIRROR REFLECTION */}\n
\n {/* Main 404 */}\n \n {code}\n
\n\n {/* Inverted Mirror Floor Reflection */}\n \n {code}\n
\n \n\n {/* Title & Description */}\n

\n {title}\n

\n

\n {description}\n

\n\n {/* Action Buttons */}\n
\n {renderAction(primaryAction, true)}\n {renderAction(secondaryAction, false)}\n
\n \n \n );\n}\n\nexport { KineticWireframeNotFoundSection as SpatialPortalNotFoundSection };\n\n/* ========================================================================== */\n/* VARIANT 5: AURORA CELESTIAL SINGULARITY & 3D ORBITAL PORTAL 404 SECTION */\n/* ========================================================================== */\n\nconst AURORA_GLASS_STYLES = `\n@keyframes hero-prismatic-flow {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n}\n@keyframes hero-float-left {\n 0%, 100% {\n transform: translateY(0px) rotate(0deg);\n }\n 50% {\n transform: translateY(-12px) rotate(-1deg);\n }\n}\n@keyframes hero-float-center {\n 0%, 100% {\n transform: translateY(0px) scale(1);\n }\n 50% {\n transform: translateY(-16px) scale(1.03);\n }\n}\n@keyframes hero-float-right {\n 0%, 100% {\n transform: translateY(0px) rotate(0deg);\n }\n 50% {\n transform: translateY(-12px) rotate(1deg);\n }\n}\n@keyframes portal-vortex-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes portal-vortex-spin-reverse {\n 0% {\n transform: rotate(360deg);\n }\n 100% {\n transform: rotate(0deg);\n }\n}\n@keyframes portal-singularity-pulse {\n 0%, 100% {\n transform: scale(0.92);\n opacity: 0.9;\n }\n 50% {\n transform: scale(1.15);\n opacity: 1;\n }\n}\n@keyframes sonar-wave-pulse {\n 0% {\n transform: scale(0.35);\n opacity: 0.8;\n }\n 100% {\n transform: scale(2.4);\n opacity: 0;\n }\n}\n@keyframes radar-sweep-360 {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n@keyframes starlight-twinkle {\n 0%, 100% {\n transform: scale(0.85);\n opacity: 0.3;\n }\n 50% {\n transform: scale(1.4);\n opacity: 1;\n }\n}\n`;\n\nexport function AuroraGlassNotFoundSection({\n code = \"404\",\n badge,\n title = \"Lost Beyond the Horizon\",\n description = \"The coordinate you were navigating to has drifted into uncharted space or never existed. Let's guide you back to safety.\",\n primaryAction = {\n label: \"Return to Safety\",\n href: \"/\",\n icon: ,\n },\n secondaryAction = {\n label: \"Explore Documentation\",\n href: \"#\",\n icon: ,\n },\n color,\n className,\n ...props\n}: NotFoundSectionProps) {\n const dynamicAccent = accentStyle(color);\n\n const renderAction = (action?: NotFoundAction, isPrimary = false) => {\n if (!action) return null;\n const baseClass = isPrimary\n ? \"inline-flex w-full sm:w-auto items-center justify-center gap-2.5 rounded-full bg-primary text-primary-foreground font-semibold px-8 py-3.5 text-xs sm:text-sm hover:opacity-95 hover:scale-[1.03] active:scale-[0.98] transition-all cursor-pointer shadow-lg shadow-primary/25 relative overflow-hidden group select-none\"\n : \"inline-flex w-full sm:w-auto items-center justify-center gap-2.5 rounded-full border border-border/80 bg-card/60 hover:bg-card hover:border-primary/40 text-foreground font-medium px-8 py-3.5 text-xs sm:text-sm backdrop-blur-md active:scale-[0.98] hover:scale-[1.02] transition-all cursor-pointer select-none\";\n\n const content = (\n <>\n {action.icon}\n {action.label}\n {isPrimary && (\n \n )}\n \n );\n\n if (action.onClick) {\n return (\n \n );\n }\n\n return (\n \n {content}\n \n );\n };\n\n const isStandard404 = code === \"404\";\n\n return (\n \n \n\n {/* ==================================================================== */}\n {/* BACKGROUND: CYBER RADAR SWEEP, SONAR PULSES, LASER STREAMS & HORIZON */}\n {/* ==================================================================== */}\n \n {/* Subtle Cosmic Starfield / Dot Matrix */}\n \n\n {/* Concentric Cyber Radar Rings in Background */}\n
\n
\n
\n\n {/* Dynamic Rotating 360° Radar Scanner Cone */}\n \n\n {/* Concentric Expanding Sonar Pulse Waves */}\n \n \n \n\n {/* Twinkling Star Points */}\n \n \n \n \n
\n\n {/* ==================================================================== */}\n {/* FOREGROUND CONTENT: BALANCED 3-ROW GRID - 404 ALWAYS AT EXACT CENTER */}\n {/* ==================================================================== */}\n
\n {/* Top Equalizer Row: ensures 404 sits at exactly 50% viewport on all screens */}\n
\n\n {/* Middle Row: 404 Hero Representation centered directly on Radar Apex */}\n
\n {isStandard404 ? (\n
\n {/* Digit 4 (Left) */}\n \n 4\n \n\n {/* Center '0' - HYPER-MODERN ANIMATED SINGULARITY PORTAL (ORIGINAL FRAME PRESERVED) */}\n
\n {/* Layer 2: Outer Precision Dash/Tick Chrono Ring (Clockwise) with Glowing Blue & Theme Satellites */}\n \n \n \n
\n\n {/* Layer 3: Middle 3D Tilted Orbit Ring (Counter-Clockwise) with Satellite */}\n \n \n
\n\n {/* Layer 4: Swirling Liquid Plasma Conic Torus Ring */}\n \n \n
\n\n {/* Layer 5: Star Icon Center Core - Light Mode: White, Dark Mode: Black */}\n
\n {/* Pulsing Singularity Star Flare */}\n
\n {/* 4-Point Radiant Sparkle / Star Flare */}\n \n \n \n {/* High-Intensity Inner Core Dot */}\n \n
\n
\n
\n\n {/* Digit 4 (Right) */}\n \n 4\n \n
\n ) : (\n \n {code}\n
\n )}\n
\n\n {/* Bottom Row: Title, Description, and Action Buttons */}\n
\n

\n {title}\n

\n

\n {description}\n

\n\n
\n {renderAction(primaryAction, true)}\n {renderAction(secondaryAction, false)}\n
\n
\n \n \n );\n}\n\n/* ========================================================================== */\n/* VARIANT 6: COMPONENT WALL MOSAIC 404 SECTION */\n/* ========================================================================== */\n\nconst COMPONENT_WALL_IMAGES = {\n bento:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/bento-showcase-1790516064489.jpg\",\n appointment:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/book-appointment-1790516064490.jpg\",\n calendar:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/calendar-1790516064491.jpg\",\n chart:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516056/chart-1790516064492.jpg\",\n collage:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/collage-hero-1790516064493.jpg\",\n dataFlow:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516056/data-flow-1790516064493.jpg\",\n dataGrid:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516056/data-grid-1790516064494.jpg\",\n fashion:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/fashion-hero-1790516064495.jpg\",\n footer:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/footer-1790516064495.jpg\",\n hero:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/hero-1790516064495.jpg\",\n heroCarousel:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516059/hero-carousel-1790516064496.jpg\",\n honeycomb:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516059/honeycomb-hero-1790516064497.jpg\",\n invoice:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516059/invoice-1790516064498.jpg\",\n login:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/login-form-1790516064498.jpg\",\n navbar:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/navbar-1790516064499.jpg\",\n newsletter:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/newsletter-1790516064499.jpg\",\n gallery:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/orbit-gallery-1790516064499.jpg\",\n platform:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516057/platform-grid-1790516064500.jpg\",\n pricing:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/pricing-1790516064500.jpg\",\n product:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/product-details-1790516064500.jpg\",\n profile:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516058/profile-page-1790516064501.jpg\",\n reviews:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516059/reviews-1790516064502.jpg\",\n support:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516059/support-hero-1790516064502.jpg\",\n waitlist:\n \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_500,c_limit/v1790516059/waitlist-1790516064503.jpg\",\n};\n\ninterface MosaicCard {\n x: number;\n y: number;\n w: number;\n h: number;\n title: string;\n image?: string;\n content?: React.ReactNode;\n bgClass?: string;\n}\n\nconst CENTER_ZERO_CARDS: MosaicCard[] = [\n // --- TOP APEX CARD (Centered at 50%: x: 38%, y: 0%, w: 24%, h: 11%) ---\n { x: 38, y: 0, w: 24, h: 11, title: \"Hero Showcase\", image: COMPONENT_WALL_IMAGES.hero },\n\n // --- UPPER-RIGHT ARCH (Smoothly curving down and outward) ---\n { x: 63, y: 5.5, w: 24, h: 11, title: \"Profile Page\", image: COMPONENT_WALL_IMAGES.profile },\n { x: 73, y: 18, w: 24, h: 11, title: \"Reviews Component\", image: COMPONENT_WALL_IMAGES.reviews },\n\n // --- RIGHT VERTICAL FLANK (Rows at y = 30.5%, 43.5%, 56.5% - uniform 2% gap, h: 11%) ---\n { x: 76, y: 30.5, w: 24, h: 11, title: \"Bento Showcase\", image: COMPONENT_WALL_IMAGES.bento },\n { x: 76, y: 43.5, w: 24, h: 11, title: \"Chart Analytics\", image: COMPONENT_WALL_IMAGES.chart },\n { x: 76, y: 56.5, w: 24, h: 11, title: \"Calendar Scheduler\", image: COMPONENT_WALL_IMAGES.calendar },\n\n // --- LOWER-RIGHT ARCH (Smoothly curving down and inward towards bottom apex) ---\n { x: 73, y: 69.5, w: 24, h: 11, title: \"Pricing Grid\", image: COMPONENT_WALL_IMAGES.pricing },\n { x: 63, y: 82, w: 24, h: 11, title: \"Orbit Gallery\", image: COMPONENT_WALL_IMAGES.gallery },\n\n // --- BOTTOM APEX CARD (Centered at 50%: x: 38%, y: 87.5%, w: 24%, h: 11% - mirrors top apex) ---\n { x: 38, y: 87.5, w: 24, h: 11, title: \"Invoice Billing\", image: COMPONENT_WALL_IMAGES.invoice },\n\n // --- LOWER-LEFT ARCH (Smoothly curving up and outward from bottom apex) ---\n { x: 13, y: 82, w: 24, h: 11, title: \"Hero Carousel\", image: COMPONENT_WALL_IMAGES.heroCarousel },\n { x: 3, y: 69.5, w: 24, h: 11, title: \"Newsletter App\", image: COMPONENT_WALL_IMAGES.newsletter },\n\n // --- LEFT VERTICAL FLANK (Rows at y = 56.5%, 43.5%, 30.5% - uniform 2% gap, mirrors right flank) ---\n { x: 0, y: 56.5, w: 24, h: 11, title: \"Navbar Showcase\", image: COMPONENT_WALL_IMAGES.navbar },\n { x: 0, y: 43.5, w: 24, h: 11, title: \"Fashion Hero\", image: COMPONENT_WALL_IMAGES.fashion },\n { x: 0, y: 30.5, w: 24, h: 11, title: \"Support Hero\", image: COMPONENT_WALL_IMAGES.support },\n\n // --- UPPER-LEFT ARCH (Smoothly curving up and inward towards top apex) ---\n { x: 3, y: 18, w: 24, h: 11, title: \"Collage Hero\", image: COMPONENT_WALL_IMAGES.collage },\n { x: 13, y: 5.5, w: 24, h: 11, title: \"Product Details\", image: COMPONENT_WALL_IMAGES.product },\n];\n\nconst FOUR_CARDS: MosaicCard[] = [\n // --- VERTICAL STEM COLUMN (all w: 24%, h: 11% - identical size as '0') ---\n { x: 50.5, y: 0, w: 24, h: 11, title: \"Mobile Wireframe\", image: COMPONENT_WALL_IMAGES.waitlist },\n { x: 50.5, y: 12.5, w: 24, h: 11, title: \"Book Appointment\", image: COMPONENT_WALL_IMAGES.appointment },\n { x: 50.5, y: 25, w: 24, h: 11, title: \"Data Flow Architecture\", image: COMPONENT_WALL_IMAGES.dataFlow },\n { x: 50.5, y: 37.5, w: 24, h: 11, title: \"Calendar Scheduler\", image: COMPONENT_WALL_IMAGES.calendar },\n { x: 50.5, y: 50, w: 24, h: 11, title: \"Platform Grid\", image: COMPONENT_WALL_IMAGES.platform },\n // Intersection Card (Data Grid) - aligned with stem and crossbar\n { x: 50.5, y: 62.5, w: 24, h: 11, title: \"Data Grid Table\", image: COMPONENT_WALL_IMAGES.dataGrid },\n { x: 50.5, y: 75, w: 24, h: 11, title: \"Honeycomb Hero\", image: COMPONENT_WALL_IMAGES.honeycomb },\n { x: 50.5, y: 87.5, w: 24, h: 11, title: \"Bento Showcase\", image: COMPONENT_WALL_IMAGES.bento },\n\n // --- HORIZONTAL CROSSBAR ROW (all y: 62.5%, w: 24%, h: 11% - spans from x: 0% to exactly 100%) ---\n { x: 0, y: 62.5, w: 24, h: 11, title: \"Login Form\", image: COMPONENT_WALL_IMAGES.login },\n { x: 25.25, y: 62.5, w: 24, h: 11, title: \"Chart Analytics\", image: COMPONENT_WALL_IMAGES.chart },\n // Right-side tail card (Hero Carousel) - ends precisely at 100% (76% + 24% = 100%)\n { x: 76, y: 62.5, w: 24, h: 11, title: \"Hero Carousel\", image: COMPONENT_WALL_IMAGES.heroCarousel },\n\n // --- DIAGONAL ARM (all w: 24%, h: 11% - perfectly spaced without overlap, 1.5% gap to stem at top-left) ---\n { x: 25.0, y: 12.5, w: 24, h: 11, title: \"Invoice Summary\", image: COMPONENT_WALL_IMAGES.invoice },\n { x: 16.7, y: 25, w: 24, h: 11, title: \"Profile Page\", image: COMPONENT_WALL_IMAGES.profile },\n { x: 8.3, y: 37.5, w: 24, h: 11, title: \"Product Details\", image: COMPONENT_WALL_IMAGES.product },\n { x: 0, y: 50, w: 24, h: 11, title: \"Orbit Gallery\", image: COMPONENT_WALL_IMAGES.gallery },\n];\n\nconst BUBBLE_DOTS = [\n { left: 5, size: 5, dur: 7, delay: 0 },\n { left: 13, size: 7, dur: 9, delay: 2.5 },\n { left: 21, size: 4, dur: 6.5, delay: 1.2 },\n { left: 30, size: 8, dur: 10, delay: 4.1 },\n { left: 39, size: 5, dur: 7.5, delay: 0.8 },\n { left: 48, size: 6, dur: 8.5, delay: 3.2 },\n { left: 57, size: 8, dur: 11, delay: 1.9 },\n { left: 66, size: 4, dur: 6, delay: 4.8 },\n { left: 74, size: 7, dur: 8, delay: 0.5 },\n { left: 82, size: 5, dur: 9.5, delay: 2.1 },\n { left: 90, size: 8, dur: 10.5, delay: 3.7 },\n { left: 96, size: 4, dur: 7, delay: 5.3 },\n];\n\nexport function ComponentWallNotFoundSection({\n color,\n className,\n ...props\n}: NotFoundSectionProps) {\n const dynamicAccent = accentStyle(color);\n\n const renderCard = (card: MosaicCard, idx: number) => {\n return (\n \n {card.image ? (\n \n ) : (\n card.content\n )}\n \n );\n };\n\n return (\n \n {/* Dynamic Keyframes for Bidirectional Scanner & Rising Bubble Dots */}\n \n\n {/* Background Subtle Dot Matrix Grid */}\n \n\n {/* Floating Glowing Bubble Dots (rising up continuously from bottom) */}\n
\n {BUBBLE_DOTS.map((dot, i) => (\n \n ))}\n
\n\n {/* ================================================================== */}\n {/* HIGH-TECH DUAL-BEAM HOLOGRAPHIC SCANNER GATE (Bidirectional Sweep) */}\n {/* ================================================================== */}\n \n {/* Soft volumetric light aura trailing behind the scanner */}\n
\n\n {/* Leading Razor-Sharp Laser Beam (Top Edge) */}\n \n\n {/* Translucent Luminous Scanning Field with Cyber HUD Readouts */}\n
\n {/* Micro-scanline texture inside the field */}\n \n\n {/* Left HUD Telemetry Tag */}\n
\n \n \n \n \n SYSTEM_SCAN\n ::\n 0x404\n
\n\n {/* Center High-Intensity Laser Lens Reticle */}\n
\n
\n
\n
\n
\n
\n\n {/* Right HUD Telemetry Tag */}\n \n
\n\n {/* Trailing Razor-Sharp Laser Beam (Bottom Edge) */}\n \n
\n\n {/* Ambient Radial Color Spot with Subtle Pulse */}\n \n\n {/* Main Foreground Container: Perfectly Centered 404 Mosaic */}\n
\n {/* ================================================================== */}\n {/* MONUMENTAL 404 COMPONENT WALL MOSAIC */}\n {/* ================================================================== */}\n
\n {/* Digit 4 (Left - Identical card dimensions as '0') */}\n
\n {FOUR_CARDS.map(renderCard)}\n
\n\n {/* Digit 0 (Center - Identical card dimensions as '4') */}\n
\n {CENTER_ZERO_CARDS.map(renderCard)}\n
\n\n {/* Digit 4 (Right - Identical card dimensions as '0') */}\n
\n {FOUR_CARDS.map(renderCard)}\n
\n
\n
\n \n );\n}\n\n/* ========================================================================== */\n/* MAIN EXPORT: DISPATCHES TO SELECTED VARIANT */\n/* ========================================================================== */\n\nexport function NotFoundSection({\n variant = \"hyperspace\",\n ...props\n}: NotFoundSectionProps) {\n if (\n variant === \"component-wall\" ||\n (variant as string) === \"mosaic-wall\" ||\n (variant as string) === \"card-wall\" ||\n (variant as string) === \"mosaic\"\n ) {\n return ;\n }\n if (variant === \"aurora-glass\") {\n return ;\n }\n if (variant === \"animated-beam-border\") {\n return ;\n }\n if (variant === \"quantum-hologram\") {\n return ;\n }\n if (\n variant === \"kinetic-wireframe\" ||\n variant === \"spatial-portal\" ||\n variant === \"infinite-horizon\" ||\n variant === \"dimensional-portal\" ||\n variant === \"portal\"\n ) {\n return ;\n }\n return ;\n}\n\nexport default NotFoundSection;\n", "type": "registry:component", "target": "components/custom/blocks/NotFoundBlock.tsx" }, { "path": "src/lib/accent.ts", "content": "import type { CSSProperties } from \"react\";\n\n/**\n * Bridging the docs colour picker into a preview.\n *\n * Most blocks are already written against the `--primary` token (`bg-primary`,\n * `ring-primary/30`, `text-primary-foreground`…). Rather than teaching each one a\n * bespoke `color` prop, a demo can repoint that token for its own subtree and\n * every one of those classes follows along.\n */\n\n/** The swatches the picker offers, as concrete CSS colours. */\nconst PRESET_HEX: Record = {\n lavender: \"#9b8afb\",\n indigo: \"#6366f1\",\n rose: \"#f43f5e\",\n emerald: \"#10b981\",\n zinc: \"#18181b\",\n};\n\n/** True when the picker sits on \"Default\" — the page theme should win. */\nexport function isDefaultAccent(color?: string): boolean {\n return !color || color === \"primary\" || color === \"default\";\n}\n\n/**\n * Turns a picker value into a CSS colour, or null for \"Default\" — meaning\n * nothing should be overridden, so the theme (and the sidebar customizer)\n * keeps control.\n */\nexport function resolveAccent(color?: string): string | null {\n if (isDefaultAccent(color)) return null;\n return PRESET_HEX[color as string] ?? (color as string);\n}\n\n/**\n * The picker value in a form every block accepts. Blocks know the older swatch\n * names but not \"lavender\" — and since that is also a CSS named colour\n * (#e6e6fa), a block that passes unknown names straight through would paint\n * the wrong shade, while others fall back to a different palette. Demos that\n * hand the picker value to such a block run it through this first. Every\n * other value is returned untouched.\n */\nexport function toBlockColor(color: string): string;\nexport function toBlockColor(color: string | undefined): string | undefined;\nexport function toBlockColor(color?: string): string | undefined {\n return color === \"lavender\" ? PRESET_HEX.lavender : color;\n}\n\nfunction parseHex(input: string): [number, number, number] | null {\n const hex = input.trim().replace(/^#/, \"\");\n if (/^[a-f\\d]{3}$/i.test(hex)) {\n const [r, g, b] = hex.split(\"\");\n return [parseInt(r + r, 16), parseInt(g + g, 16), parseInt(b + b, 16)];\n }\n if (/^[a-f\\d]{6}$/i.test(hex)) {\n return [\n parseInt(hex.slice(0, 2), 16),\n parseInt(hex.slice(2, 4), 16),\n parseInt(hex.slice(4, 6), 16),\n ];\n }\n return null;\n}\n\n/** Legible foreground for content sitting on a filled `color` swatch. */\nexport function accentForeground(color: string): string {\n const rgb = parseHex(color);\n if (!rgb) return \"#ffffff\";\n const channel = (v: number) => {\n const c = v / 255;\n return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);\n };\n const luminance =\n 0.2126 * channel(rgb[0]) +\n 0.7152 * channel(rgb[1]) +\n 0.0722 * channel(rgb[2]);\n return luminance > 0.45 ? \"#09090b\" : \"#ffffff\";\n}\n\n/** The theme tokens a picked accent repoints, as `--name` → value. */\nexport function accentTokens(color?: string): Record {\n const resolved = resolveAccent(color);\n if (!resolved) return {};\n return {\n \"--primary\": resolved,\n \"--primary-foreground\": accentForeground(resolved),\n \"--ring\": resolved,\n };\n}\n\n/**\n * Inline style repointing `--primary` at the picked accent for one subtree.\n * `--primary-foreground` is derived alongside it, otherwise a light pick leaves\n * `text-primary-foreground` content unreadable on its own fill. Returns `{}` on\n * \"Default\" so the page theme still wins.\n */\nexport function accentStyle(color?: string): CSSProperties {\n return accentTokens(color) as CSSProperties;\n}\n", "type": "registry:component", "target": "lib/accent.ts" } ], "docs": "Named export: NotFoundSection (also default export) and NotFoundSectionProps. Ready for drop-in use in Next.js not-found.tsx or standalone 404 routes.", "categories": [ "marketing", "layout", "feedback" ], "type": "registry:component" }