{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "secure-envelope", "title": "Secure Envelope", "author": "AlgorizeTech", "description": "An interactive classified security envelope & travel pass sleeve component featuring a secret card that glides out horizontally on hover and elevates gracefully onto the cover on click with 3D flip physics.", "dependencies": [], "registryDependencies": [ "utils" ], "files": [ { "path": "src/components/custom/blocks/SecureEnvelopeBlock.tsx", "content": "\"use client\";\n\nimport React, { useRef, useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// ============================================================================\n// CLASSIFIED SECURITY CREST SEAL SVG\n// ============================================================================\nexport function ClassifiedSeal({\n className,\n style,\n size = 260,\n strokeWidth = 1.3,\n}: {\n className?: string;\n style?: React.CSSProperties;\n size?: number | string;\n strokeWidth?: number;\n}) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport const OrbitalSpirograph = ClassifiedSeal;\n\n// ============================================================================\n// HYPERBOLT EXPRESS BULLET TRAIN LOGO & WATERMARK SVGS\n// ============================================================================\nexport function HyperboltTrainLogo({ className }: { className?: string }) {\n return (\n \n {/* 5 Aerodynamic Speed Streak Fins */}\n \n \n \n \n \n\n {/* Main Bullet Locomotive Body */}\n \n\n {/* Cockpit Windshield */}\n \n\n {/* Wheel Tracks & Undercarriage */}\n \n \n \n \n \n );\n}\n\nexport function TrainWatermark({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport function HyperboltSleeveSeal({\n className,\n style,\n size = 240,\n}: {\n className?: string;\n style?: React.CSSProperties;\n size?: number | string;\n}) {\n return (\n \n \n {/* Outer Dotted Speed Orbit */}\n \n \n\n {/* Speed Rays */}\n \n \n \n \n\n {/* Center Bullet Train Silhouette */}\n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Outer Circular Train Track Markers */}\n {[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => (\n \n ))}\n \n \n );\n}\n\n// ============================================================================\n// CYBER NEXUS SMARTCARD SEAL & CIRCUIT WATERMARK SVGS\n// ============================================================================\nexport function CyberNexusSeal({\n className,\n style,\n size = 240,\n}: {\n className?: string;\n style?: React.CSSProperties;\n size?: number | string;\n}) {\n return (\n \n \n {/* Outer Hexagon Tech Boundary */}\n \n {/* Outer Circular Degree Marks & Rings */}\n \n \n \n\n {/* Diagonal Corner Nodes */}\n \n \n \n \n \n \n \n \n\n {/* Center Hexagonal Microprocessor Core */}\n \n {/* Fingerprint / Biometric Waves inside center */}\n \n \n \n\n {/* Telemetry Perimeter Text */}\n NFC • FIDO2 • 13.56 MHz\n SECURE VAULT // 09\n \n \n );\n}\n\nexport const BiometricIrisSeal = CyberNexusSeal;\nexport const LuxuryDiamondCrownSeal = CyberNexusSeal;\n\nexport function SmartChipGlyph({ className }: { className?: string }) {\n return (\n \n {/* Golden Metallic Chip Body */}\n \n {/* Contact Pads Geometry */}\n \n \n \n \n \n \n );\n}\n\nexport function NfcContactlessGlyph({ className }: { className?: string }) {\n return (\n \n \n \n \n \n );\n}\n\nexport function CyberCircuitWatermark({ className }: { className?: string }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n );\n}\n\nexport const ArtDecoWatermark = CyberCircuitWatermark;\n\n// ============================================================================\n// AVIATION BOARDING PASS & RADAR SEAL SVGS\n// ============================================================================\nexport function AviationRadarSeal({\n className,\n style,\n size = 240,\n}: {\n className?: string;\n style?: React.CSSProperties;\n size?: number | string;\n}) {\n return (\n \n \n {/* Outer Degree Marks & Radar Rings */}\n \n \n \n \n\n {/* Compass Crosshairs */}\n \n \n \n \n\n {/* Compass Cardinal Points */}\n N\n E\n S\n W\n\n {/* Flight Trajectory Orbit Arcs */}\n \n \n\n {/* Center Jet Airplane Silhouette */}\n \n \n \n\n {/* Waypoint Markers */}\n {[30, 60, 120, 150, 210, 240, 300, 330].map((angle, i) => (\n \n ))}\n \n \n );\n}\n\nexport function FlightWingsLogo({ className }: { className?: string }) {\n return (\n \n {/* Left Wing Feathers */}\n \n \n \n \n\n {/* Right Wing Feathers */}\n \n \n \n \n\n {/* Center Jet Emblem */}\n \n \n \n {/* Stars on bottom */}\n \n \n \n \n );\n}\n\nexport function AirplaneWatermark({ className }: { className?: string }) {\n return (\n \n \n \n \n \n );\n}\n\nexport function VerticalBarcode({\n code = \"0 734664 235788\",\n className,\n}: {\n code?: string;\n className?: string;\n}) {\n const bars = [2, 1, 3, 1, 2, 4, 1, 2, 3, 1, 4, 2, 1, 3, 2, 1, 4, 2, 3, 1, 2, 4, 1, 3, 2, 1, 2, 3];\n return (\n
\n
\n {bars.map((w, i) => (\n \n ))}\n
\n \n {code}\n \n
\n );\n}\n\n// ============================================================================\n// TYPES & PROPS\n// ============================================================================\nexport type ConfidentialFolderInteractionMode = \"auto-flip\" | \"step-flip\";\nexport type ConfidentialFolderCardDesign =\n | \"classified\"\n | \"train-ticket\"\n | \"smart-card\"\n | \"keycard\"\n | \"cyber-card\"\n | \"boarding-pass\"\n | \"vip-card\"\n | \"black-card\";\n\nexport interface CouponMetric {\n label: string;\n value: string;\n}\n\nexport interface CouponCardData {\n // Sleeve info\n sleeveTitle?: string;\n sleeveSubtitle?: string;\n\n // Keycard / VIP Black Metal Card Specific Fields\n holderName?: string;\n cardNumber?: string;\n memberSince?: string;\n tierName?: string;\n conciergePhone?: string;\n cvv?: string;\n accessId?: string;\n roleTitle?: string;\n department?: string;\n authLevel?: string;\n expiryDate?: string;\n chipSerial?: string;\n securityKey?: string;\n hashSignature?: string;\n\n // Train / Boarding Pass Specific Fields\n ticketTitle?: string;\n passengerName?: string;\n routeText?: string;\n flightRoute?: string;\n origin?: string;\n destination?: string;\n date?: string;\n departureTime?: string;\n boardingTime?: string;\n seatNumber?: string;\n trainNumber?: string;\n flightNumber?: string;\n gate?: string;\n cabinClass?: string;\n trainCompany?: string;\n airlineCompany?: string;\n slogan?: string;\n barcodeNumber?: string;\n websiteUrl?: string;\n eticketNumber?: string;\n\n // Face 1: Front Cover / Voucher Pass (General & Classified)\n frontBadge?: string;\n frontSerial?: string;\n frontTitle?: string;\n frontSubtitle?: string;\n frontStamp?: string;\n stampSuffix?: string;\n barcodeText?: string;\n clearanceLevel?: string;\n\n // Face 2: Back Details / Manifesto (General & Classified)\n cardCategory?: string;\n cardDate?: string;\n cardTitle?: string;\n cardSubtitle?: string;\n statement?: string;\n highlightQuote?: string;\n authorText?: string;\n\n // Metrics (array or individual fields)\n metrics?: CouponMetric[];\n metric1Label?: string;\n metric1Value?: string;\n metric2Label?: string;\n metric2Value?: string;\n metric3Label?: string;\n metric3Value?: string;\n\n // Positioning\n initialPeek?: number;\n hoverPeek?: number;\n\n // Fallbacks\n cardBadge?: string;\n cardVersion?: string;\n pillar1Title?: string;\n pillar1Desc?: string;\n pillar2Title?: string;\n pillar2Desc?: string;\n quote?: string;\n quoteAuthor?: string;\n statusText?: string;\n sessionLabel?: string;\n sessionNumber?: string;\n subquote?: string;\n}\n\nexport type ConfidentialFolderData = CouponCardData;\n\nexport interface ConfidentialFolderProps\n extends React.HTMLAttributes {\n /** Structured data object or array for all ticket, voucher, and card fields. */\n data?: CouponCardData | CouponCardData[];\n folderColor?: string;\n interactionMode?: ConfidentialFolderInteractionMode;\n mode?: ConfidentialFolderInteractionMode;\n variant?: ConfidentialFolderInteractionMode;\n cardDesign?: ConfidentialFolderCardDesign;\n cardType?: ConfidentialFolderCardDesign;\n designVariant?: ConfidentialFolderCardDesign;\n sleeveTitle?: string;\n sleeveSubtitle?: string;\n // Train Ticket Specific Props (Matching Exact User Reference)\n passengerName?: string;\n routeText?: string;\n date?: string;\n departureTime?: string;\n seatNumber?: string;\n trainNumber?: string;\n trainCompany?: string;\n slogan?: string;\n barcodeNumber?: string;\n websiteUrl?: string;\n ticketTitle?: string;\n // Boarding Pass Specific Props\n flightNumber?: string;\n gate?: string;\n boardingTime?: string;\n cabinClass?: string;\n origin?: string;\n destination?: string;\n flightRoute?: string;\n eticketNumber?: string;\n airlineCompany?: string;\n // Keycard Specific Props\n holderName?: string;\n accessId?: string;\n roleTitle?: string;\n department?: string;\n authLevel?: string;\n expiryDate?: string;\n chipSerial?: string;\n securityKey?: string;\n hashSignature?: string;\n // Face 1: Front Cover / Voucher Pass (General & Classified)\n frontBadge?: string;\n frontSerial?: string;\n frontTitle?: string;\n frontSubtitle?: string;\n frontStamp?: string;\n stampSuffix?: string;\n barcodeText?: string;\n clearanceLevel?: string;\n // Face 2: Back Details / Manifesto (General & Classified)\n cardCategory?: string;\n cardDate?: string;\n cardTitle?: string;\n cardSubtitle?: string;\n statement?: string;\n highlightQuote?: string;\n authorText?: string;\n metrics?: CouponMetric[];\n metric1Label?: string;\n metric1Value?: string;\n metric2Label?: string;\n metric2Value?: string;\n metric3Label?: string;\n metric3Value?: string;\n // Positioning & Motion\n initialPeek?: number;\n hoverPeek?: number;\n // Fallbacks\n cardBadge?: string;\n cardVersion?: string;\n pillar1Title?: string;\n pillar1Desc?: string;\n pillar2Title?: string;\n pillar2Desc?: string;\n quote?: string;\n quoteAuthor?: string;\n statusText?: string;\n sessionLabel?: string;\n sessionNumber?: string;\n subquote?: string;\n // Visual Options\n centerIcon?: React.ReactNode;\n cardVariant?: \"adaptive\" | \"ivory\";\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n sleeveClassName?: string;\n cardClassName?: string;\n}\n\nexport function ConfidentialFolder({\n data,\n folderColor,\n interactionMode = \"step-flip\",\n mode,\n variant,\n cardDesign = \"classified\",\n cardType,\n designVariant,\n centerIcon,\n sleeveTitle,\n sleeveSubtitle,\n // Keycard Specific Defaults\n holderName = \"Kaelen Vance\",\n accessId = \"SEC-8940-QUANTUM\",\n roleTitle = \"SECURITY ARCHITECT\",\n department = \"QUANTUM PROTOCOL CORE\",\n authLevel = \"LEVEL 09\",\n expiryDate = \"10/2030\",\n chipSerial = \"RFID // 13.56 MHz\",\n securityKey = \"KEY // 892-ALPHA\",\n hashSignature = \"SHA-512 : 9f8a42e7b9104c8f2a6e...c27e80\",\n // Train Ticket Reference Defaults (1:1 with Reference Image)\n passengerName = \"Barbara M. Sandoval\",\n routeText = \"ZÜRICH HB - PARIS-EST\",\n date = \"25/11/2024\",\n departureTime = \"06.30\",\n seatNumber = \"18A\",\n trainNumber = \"6\",\n trainCompany = \"HYPERBOLT EXPRESS\",\n slogan = \"UNLEASH THE POWER OF SPEED WITH HYPERBOLT EXPRESS\",\n barcodeNumber = \"0 734664 235788\",\n websiteUrl = \"HYPERBOLTEXPRESS.COM\",\n ticketTitle = \"TRAIN ONLINE TICKET\",\n // Boarding Pass Specific Defaults\n flightNumber,\n gate,\n boardingTime,\n cabinClass,\n origin,\n destination,\n flightRoute,\n eticketNumber,\n airlineCompany,\n // Classified Defaults\n frontBadge,\n frontSerial,\n frontTitle,\n frontSubtitle,\n frontStamp,\n stampSuffix,\n barcodeText,\n clearanceLevel,\n cardCategory,\n cardDate,\n cardTitle,\n cardSubtitle,\n statement,\n highlightQuote,\n authorText,\n metrics,\n metric1Label,\n metric1Value,\n metric2Label,\n metric2Value,\n metric3Label,\n metric3Value,\n initialPeek = 38,\n hoverPeek = 88,\n cardBadge,\n cardVersion,\n pillar1Title,\n pillar1Desc,\n pillar2Title,\n pillar2Desc,\n quote,\n quoteAuthor,\n statusText,\n sessionLabel,\n sessionNumber,\n subquote,\n cardVariant = \"adaptive\",\n defaultOpen = false,\n onOpenChange,\n className,\n sleeveClassName,\n cardClassName,\n ...props\n}: ConfidentialFolderProps) {\n const activeMode: ConfidentialFolderInteractionMode =\n mode ?? variant ?? interactionMode ?? \"auto-flip\";\n\n const activeDesign: ConfidentialFolderCardDesign =\n cardType ?? designVariant ?? cardDesign ?? \"classified\";\n\n const isTrainTicket = activeDesign === \"train-ticket\";\n const isBoardingPass = activeDesign === \"boarding-pass\";\n const isKeycard =\n activeDesign === \"smart-card\" ||\n activeDesign === \"keycard\" ||\n activeDesign === \"cyber-card\" ||\n activeDesign === \"vip-card\" ||\n activeDesign === \"black-card\";\n\n const [isOpen, setIsOpen] = useState(defaultOpen);\n const [isHovered, setIsHovered] = useState(false);\n\n const [animStage, setAnimStage] = useState<\n | \"inside\"\n | \"sliding-out\"\n | \"sliding-in-top\"\n | \"resting-top-front\"\n | \"flipping-open\"\n | \"resting-top\"\n | \"flipping-close\"\n | \"sliding-out-top\"\n | \"sliding-in-back\"\n >(\n defaultOpen\n ? activeMode === \"step-flip\"\n ? \"resting-top-front\"\n : \"resting-top\"\n : \"inside\"\n );\n\n const [cardZIndex, setCardZIndex] = useState(defaultOpen ? 30 : 10);\n const isTransitioningRef = useRef(false);\n\n const handleToggle = () => {\n if (isTransitioningRef.current) return;\n isTransitioningRef.current = true;\n\n if (activeMode === \"step-flip\") {\n if (animStage === \"inside\") {\n setAnimStage(\"sliding-out\");\n setTimeout(() => {\n setCardZIndex(30);\n setTimeout(() => {\n setAnimStage(\"sliding-in-top\");\n setTimeout(() => {\n setAnimStage(\"resting-top-front\");\n setIsOpen(true);\n onOpenChange?.(true);\n isTransitioningRef.current = false;\n }, 500);\n }, 40);\n }, 380);\n } else if (animStage === \"resting-top-front\") {\n setAnimStage(\"flipping-open\");\n setTimeout(() => {\n setAnimStage(\"resting-top\");\n isTransitioningRef.current = false;\n }, 580);\n } else if (animStage === \"resting-top\") {\n setAnimStage(\"flipping-close\");\n setTimeout(() => {\n setAnimStage(\"sliding-out-top\");\n setTimeout(() => {\n setCardZIndex(10);\n setTimeout(() => {\n setAnimStage(\"sliding-in-back\");\n setTimeout(() => {\n setAnimStage(\"inside\");\n setIsOpen(false);\n onOpenChange?.(false);\n isTransitioningRef.current = false;\n }, 450);\n }, 40);\n }, 380);\n }, 540);\n } else {\n isTransitioningRef.current = false;\n }\n } else {\n if (!isOpen || animStage === \"inside\") {\n setAnimStage(\"sliding-out\");\n setTimeout(() => {\n setCardZIndex(30);\n setTimeout(() => {\n setAnimStage(\"sliding-in-top\");\n setTimeout(() => {\n setAnimStage(\"flipping-open\");\n setTimeout(() => {\n setAnimStage(\"resting-top\");\n setIsOpen(true);\n onOpenChange?.(true);\n isTransitioningRef.current = false;\n }, 580);\n }, 500);\n }, 40);\n }, 380);\n } else {\n setAnimStage(\"flipping-close\");\n setTimeout(() => {\n setAnimStage(\"sliding-out-top\");\n setTimeout(() => {\n setCardZIndex(10);\n setTimeout(() => {\n setAnimStage(\"sliding-in-back\");\n setTimeout(() => {\n setAnimStage(\"inside\");\n setIsOpen(false);\n onOpenChange?.(false);\n isTransitioningRef.current = false;\n }, 450);\n }, 40);\n }, 380);\n }, 540);\n }\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n handleToggle();\n } else if (e.key === \"Escape\" && isOpen) {\n e.preventDefault();\n handleToggle();\n }\n };\n\n const isSleeveShifted = animStage === \"sliding-out\" || animStage === \"sliding-out-top\";\n\n let cardTransform = \"translate3d(var(--cf-initial-peek, 14px), 0px, 0px) rotateY(0deg)\";\n let cardTransition = \"transform 0.4s cubic-bezier(0.22, 1, 0.36, 1)\";\n\n if (animStage === \"inside\") {\n cardTransform = isHovered\n ? \"translate3d(var(--cf-hover-peek, 30px), 0px, 0px) rotateY(0deg)\"\n : \"translate3d(var(--cf-initial-peek, 14px), 0px, 0px) rotateY(0deg)\";\n cardTransition = \"transform 0.3s cubic-bezier(0.16, 1, 0.3, 1)\";\n } else if (animStage === \"sliding-out\") {\n cardTransform = \"translate3d(calc(100% + 12px), 0px, 0px) rotateY(0deg)\";\n cardTransition = \"transform 0.38s cubic-bezier(0.25, 1, 0.5, 1)\";\n } else if (animStage === \"sliding-in-top\" || animStage === \"resting-top-front\") {\n cardTransform = \"translate3d(0px, 0px, 0px) rotate(-2.5deg) rotateY(0deg)\";\n cardTransition =\n animStage === \"sliding-in-top\"\n ? \"transform 0.48s cubic-bezier(0.16, 1, 0.3, 1)\"\n : \"transform 0.25s ease-out\";\n } else if (animStage === \"flipping-open\" || animStage === \"resting-top\") {\n cardTransform = \"translate3d(0px, 0px, 0px) rotate(-2.5deg) rotateY(180deg)\";\n cardTransition =\n animStage === \"flipping-open\"\n ? \"transform 0.58s cubic-bezier(0.4, 0, 0.2, 1)\"\n : \"transform 0.25s ease-out\";\n } else if (animStage === \"flipping-close\") {\n cardTransform = \"translate3d(0px, 0px, 0px) rotate(-2.5deg) rotateY(0deg)\";\n cardTransition = \"transform 0.52s cubic-bezier(0.4, 0, 0.2, 1)\";\n } else if (animStage === \"sliding-out-top\") {\n cardTransform = \"translate3d(calc(100% + 12px), 0px, 0px) rotateY(0deg)\";\n cardTransition = \"transform 0.38s cubic-bezier(0.25, 1, 0.5, 1)\";\n } else if (animStage === \"sliding-in-back\") {\n cardTransform = isHovered\n ? \"translate3d(var(--cf-hover-peek, 30px), 0px, 0px) rotateY(0deg)\"\n : \"translate3d(var(--cf-initial-peek, 14px), 0px, 0px) rotateY(0deg)\";\n cardTransition = \"transform 0.44s cubic-bezier(0.16, 1, 0.3, 1)\";\n }\n\n const isAdaptive = cardVariant === \"adaptive\";\n\n const activeData = Array.isArray(data) ? data[0] : data;\n\n // Smart Card / Biometric Access Card Specific Resolved Variables\n const resolvedHolderName =\n activeData?.holderName ??\n holderName ??\n \"Dr. Kaelen Vance\";\n const resolvedRoleTitle =\n activeData?.roleTitle ??\n roleTitle ??\n \"CHIEF ARCHITECT\";\n const resolvedDepartment =\n activeData?.department ??\n department ??\n \"QUANTUM PROTOCOL LABS\";\n const resolvedAuthLevel =\n activeData?.authLevel ??\n authLevel ??\n \"LEVEL 09 // OMNI\";\n const resolvedAccessId =\n activeData?.accessId ??\n accessId ??\n \"SEC-8940-QUANTUM\";\n const resolvedExpiryDate =\n activeData?.expiryDate ??\n expiryDate ??\n \"10/2030\";\n const resolvedChipSerial =\n activeData?.chipSerial ??\n chipSerial ??\n \"RFID // 13.56 MHz\";\n const resolvedSecurityKey =\n activeData?.securityKey ??\n securityKey ??\n \"KEY-892-ALPHA\";\n const resolvedHashSignature =\n activeData?.hashSignature ??\n hashSignature ??\n \"SHA-512 : 9f8a42e7b9104c8f2a6e...c27e80\";\n\n const resolvedPassengerName =\n activeData?.passengerName ??\n passengerName ??\n (isBoardingPass ? \"Alexander V. Wright\" : \"Barbara M. Sandoval\");\n const resolvedRouteText = activeData?.routeText ?? routeText;\n const resolvedFlightRoute =\n activeData?.flightRoute ??\n activeData?.routeText ??\n (isBoardingPass ? \"JFK ➔ LHR\" : routeText);\n const resolvedDate = activeData?.date ?? date;\n const resolvedDepartureTime = activeData?.departureTime ?? departureTime;\n const resolvedBoardingTime =\n activeData?.boardingTime ?? activeData?.departureTime ?? (isBoardingPass ? \"10:45 AM\" : departureTime);\n const resolvedSeatNumber =\n activeData?.seatNumber ?? seatNumber ?? (isBoardingPass ? \"02K\" : \"18A\");\n const resolvedTrainNumber = activeData?.trainNumber ?? trainNumber;\n const resolvedFlightNumber =\n activeData?.flightNumber ?? activeData?.trainNumber ?? (isBoardingPass ? \"SA-892\" : \"6\");\n const resolvedGate = activeData?.gate ?? (isBoardingPass ? \"G-14\" : \"1\");\n const resolvedCabinClass = activeData?.cabinClass ?? \"FIRST CLASS\";\n const resolvedTrainCompany = activeData?.trainCompany ?? trainCompany;\n const resolvedAirlineCompany =\n activeData?.airlineCompany ?? activeData?.trainCompany ?? \"SKYLINE AIRWAYS\";\n const resolvedSlogan =\n activeData?.slogan ??\n slogan ??\n (isBoardingPass\n ? \"THE ART OF LUXURY SKY TRAVEL • WORLDWIDE ALLIANCE\"\n : \"UNLEASH THE POWER OF SPEED WITH HYPERBOLT EXPRESS\");\n const resolvedBarcodeNumber =\n activeData?.barcodeNumber ?? barcodeNumber ?? \"0 734664 235788\";\n const resolvedWebsiteUrl =\n activeData?.websiteUrl ?? websiteUrl ?? (isBoardingPass ? \"SKYLINEAIRWAYS.COM\" : \"HYPERBOLTEXPRESS.COM\");\n const resolvedTicketTitle =\n activeData?.ticketTitle ??\n ticketTitle ??\n (isBoardingPass ? \"AIRLINE BOARDING PASS\" : \"TRAIN ONLINE TICKET\");\n\n const resolvedInitialPeek = activeData?.initialPeek ?? initialPeek;\n const resolvedHoverPeek = activeData?.hoverPeek ?? hoverPeek;\n\n // Resolved Sleeve Text\n const resolvedSleeveTitle =\n activeData?.sleeveTitle ??\n sleeveTitle ??\n (isKeycard\n ? \"Quantum Key Vault\"\n : isBoardingPass\n ? \"Boarding Pass Wallet\"\n : isTrainTicket\n ? \"Hyperbolt Express\"\n : \"Designed to endure\");\n const resolvedSleeveSubtitle =\n activeData?.sleeveSubtitle ??\n sleeveSubtitle ??\n (isKeycard\n ? \"Biometric Smartcard & Encrypted NFC Protocol\"\n : isBoardingPass\n ? \"First Class Priority Boarding • Gate G-14\"\n : isTrainTicket\n ? \"High-speed European rail transit pass.\"\n : \"Crafted for those who value timeless clarity.\");\n\n // Classified Mode Labels\n const fBadge =\n activeData?.frontBadge ??\n frontBadge ??\n activeData?.cardBadge ??\n cardBadge ??\n activeData?.sessionLabel ??\n sessionLabel ??\n \"SPECIAL OFFER\";\n const fSerial =\n activeData?.frontSerial ??\n frontSerial ??\n activeData?.cardVersion ??\n cardVersion ??\n activeData?.sessionNumber ??\n sessionNumber ??\n \"VOUCHER // 2026-X\";\n const fTitle =\n activeData?.frontTitle ??\n frontTitle ??\n activeData?.cardTitle ??\n cardTitle ??\n \"Exclusive Access\";\n const fSubtitle =\n activeData?.frontSubtitle ??\n frontSubtitle ??\n activeData?.cardSubtitle ??\n cardSubtitle ??\n \"Limited edition membership and premium reward voucher.\";\n const fStamp = activeData?.frontStamp ?? frontStamp ?? \"VERIFIED\";\n const fStampSuffix = activeData?.stampSuffix ?? stampSuffix ?? \"// VIP PASS\";\n const fBarcode =\n activeData?.barcodeText ?? barcodeText ?? \"COUPON // APEX-07-CORE\";\n const fStatus =\n activeData?.clearanceLevel ??\n clearanceLevel ??\n activeData?.statusText ??\n statusText ??\n \"REWARD STATUS: ACTIVE\";\n\n const bCategory =\n activeData?.cardCategory ??\n cardCategory ??\n activeData?.cardBadge ??\n cardBadge ??\n activeData?.sessionLabel ??\n sessionLabel ??\n \"COUPON VOUCHER\";\n const bDate =\n activeData?.cardDate ??\n cardDate ??\n activeData?.cardVersion ??\n cardVersion ??\n activeData?.sessionNumber ??\n sessionNumber ??\n \"VALID // 2026\";\n const bTitle =\n activeData?.cardTitle ??\n cardTitle ??\n activeData?.frontTitle ??\n frontTitle ??\n \"The Art of Craft\";\n const bSubtitle =\n activeData?.cardSubtitle ??\n cardSubtitle ??\n activeData?.frontSubtitle ??\n frontSubtitle ??\n \"Foundational reward tier for premium members.\";\n const bStatement =\n activeData?.statement ??\n statement ??\n activeData?.quote ??\n quote ??\n \"Redeem this exclusive voucher across any tier. Every detail is crafted with perfection to bring maximum value to your workflow.\";\n const bHighlight =\n activeData?.highlightQuote ??\n highlightQuote ??\n activeData?.subquote ??\n subquote ??\n \"Unlock 50% off on all annual pro plans.\";\n const bAuthor =\n activeData?.authorText ??\n authorText ??\n activeData?.quoteAuthor ??\n quoteAuthor ??\n \"PRO MEMBERSHIP\";\n const m1L =\n activeData?.metrics?.[0]?.label ??\n activeData?.metric1Label ??\n metric1Label ??\n pillar1Title ??\n \"DISCOUNT\";\n const m1V =\n activeData?.metrics?.[0]?.value ??\n activeData?.metric1Value ??\n metric1Value ??\n pillar1Desc ??\n \"50% OFF\";\n const m2L =\n activeData?.metrics?.[1]?.label ??\n activeData?.metric2Label ??\n metric2Label ??\n pillar2Title ??\n \"TIER\";\n const m2V =\n activeData?.metrics?.[1]?.value ??\n activeData?.metric2Value ??\n metric2Value ??\n pillar2Desc ??\n \"VIP Elite\";\n const m3L =\n activeData?.metrics?.[2]?.label ??\n activeData?.metric3Label ??\n metric3Label ??\n \"STATUS\";\n const m3V =\n activeData?.metrics?.[2]?.value ??\n activeData?.metric3Value ??\n metric3Value ??\n \"Active\";\n\n return (\n \n \n\n {/* Interactive Sleeve Wrapper with Global Border Radius */}\n setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n style={{\n perspective: 1200,\n transform: isSleeveShifted ? \"translateX(var(--cf-sleeve-shift, 0px))\" : \"translateX(0px)\",\n transition: \"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)\",\n borderRadius: \"var(--radius, 1.25rem)\",\n }}\n className={cn(\n \"relative w-[160px] min-[400px]:w-[185px] sm:w-[360px] h-[215px] min-[400px]:h-[247px] sm:h-[480px] cursor-pointer outline-none select-none shadow-[0_0_15px_rgba(0,0,0,0.05)] dark:shadow-[0_0_20px_rgba(0,0,0,0.35)]\",\n \"focus-visible:ring-2 focus-visible:ring-primary/60 focus-visible:ring-offset-4 focus-visible:ring-offset-background\",\n sleeveClassName\n )}\n >\n {/* ============================================================== */}\n {/* LAYER 1: BACK PLATE (Folder Sleeve Backing) */}\n {/* ============================================================== */}\n \n\n {/* ============================================================== */}\n {/* LAYER 2: THE CARD (Dual-Sided 3D Flipping Ticket) */}\n {/* ============================================================== */}\n \n {/* ============================================================ */}\n {/* FACE 1: FRONT FACE OF TICKET (Left side in user's image) */}\n {/* ============================================================ */}\n \n {isKeycard ? (\n /* -------------------------------------------------------- */\n /* MODERN BIOMETRIC NFC SMARTCARD (FRONT FACE) */\n /* -------------------------------------------------------- */\n
\n {/* Corner Tech Brackets */}\n
\n
\n
\n
\n\n {/* Subtle Cyber Circuit Background */}\n \n\n {/* Top Header: Contactless & Active Level */}\n
\n
\n \n \n NFC SMART ID\n \n
\n
\n \n {resolvedAuthLevel}\n
\n
\n\n {/* Mid Section: EMV Microchip & Access ID */}\n
\n \n
\n \n SEC PROTOCOL\n \n \n {resolvedAccessId}\n \n
\n
\n\n {/* Authorized Identity & Role */}\n
\n \n AUTHORIZED IDENTITY\n \n

\n {resolvedHolderName}\n

\n

\n {resolvedRoleTitle} • {resolvedDepartment}\n

\n
\n\n {/* Bottom Row: Chip Serial, Expiry & ISO Standard */}\n
\n
\n \n SECURITY CHIP\n \n \n {resolvedChipSerial}\n \n
\n
\n
\n \n VALID THRU\n \n \n {resolvedExpiryDate}\n \n
\n
\n \n STANDARD\n \n \n ISO-7816\n \n
\n
\n
\n
\n ) : isBoardingPass ? (\n /* -------------------------------------------------------- */\n /* AIRLINE BOARDING PASS (FRONT FACE) */\n /* -------------------------------------------------------- */\n
\n {/* Vector Card Shell with Inward Curved Notch Cutouts */}\n \n \n \n\n {/* Card Content */}\n
\n {/* Upper Section */}\n
\n {/* 1. Top Aviation Blue/Primary Pill Banner Tab */}\n
\n
\n ✈ {resolvedTicketTitle}\n
\n
\n\n {/* 2. Upper Passenger & Flight Details Grid */}\n
\n
\n {/* Passenger Name & Class */}\n
\n
\n \n PASSENGER NAME\n \n \n {resolvedCabinClass}\n \n
\n \n {resolvedPassengerName}\n \n
\n\n {/* Flight, Gate & Boarding Time */}\n
\n
\n \n FLIGHT\n \n \n {resolvedFlightNumber}\n \n
\n
\n \n GATE\n \n \n {resolvedGate}\n \n
\n
\n \n BOARDING\n \n \n {resolvedBoardingTime}\n \n
\n
\n\n {/* Seat & Date */}\n
\n
\n \n SEAT\n \n \n {resolvedSeatNumber}\n \n
\n
\n \n DATE\n \n \n {resolvedDate}\n \n
\n
\n
\n\n {/* Vertical Barcode on Right */}\n
\n \n
\n
\n\n {/* 3. Middle Primary Route Banner with Airplane Watermark */}\n
\n \n \n {resolvedFlightRoute}\n \n
\n
\n\n {/* Dotted Perforation Line */}\n
\n
\n
\n\n {/* 4. Bottom Tear-Off Stub (Lower Section) */}\n
\n {/* Mini Primary banner */}\n
\n ✦ {resolvedAirlineCompany} {\"//\"} PASSENGER STUB\n
\n\n
\n
\n
\n \n PASSENGER NAME\n \n \n {resolvedPassengerName}\n \n
\n\n
\n
\n SEAT: {resolvedSeatNumber}\n
\n
\n GATE: {resolvedGate}\n
\n
\n FLIGHT: {resolvedFlightNumber}\n
\n
\n\n {/* Solid Route Badge */}\n
\n {resolvedFlightRoute}\n
\n
\n\n {/* Mini Vertical Barcode */}\n
\n \n
\n
\n
\n
\n
\n ) : isTrainTicket ? (\n /* -------------------------------------------------------- */\n /* EXACT 1:1 REPLICA OF LEFT TICKET (FRONT FACE) */\n /* -------------------------------------------------------- */\n
\n {/* 100% Vector Card Shell with Inward Curved Notch Borders (All-Time Transparent Cutouts) */}\n \n \n \n\n {/* Card Content (Layered over the SVG Shell) */}\n
\n {/* Upper Section */}\n
\n {/* 1. Top Blue/Primary Pill Banner Tab */}\n
\n
\n {resolvedTicketTitle}\n
\n
\n\n {/* 2. Upper Passenger & Trip Info Grid */}\n
\n
\n {/* Passenger Name */}\n
\n \n PASSENGER NAME\n \n \n {resolvedPassengerName}\n \n
\n\n {/* Date & Departure */}\n
\n
\n \n DATE\n \n \n {resolvedDate}\n \n
\n
\n \n DEPARTURE\n \n \n {resolvedDepartureTime}\n \n
\n
\n\n {/* Seat & Train */}\n
\n
\n \n SEAT\n \n \n {resolvedSeatNumber}\n \n
\n
\n \n TRAIN\n \n \n {resolvedTrainNumber}\n \n
\n
\n
\n\n {/* Vertical Barcode on Right */}\n
\n \n
\n
\n\n {/* 3. Middle Primary Station Banner with Watermark */}\n
\n \n \n {resolvedRouteText}\n \n
\n
\n\n {/* Dotted Perforation Line (Extends seamlessly from Left Notch to Right Notch) */}\n
\n
\n
\n\n {/* 4. Bottom Tear-Off Stub (Lower Section) */}\n
\n {/* Mini Primary banner */}\n
\n {resolvedTicketTitle}\n
\n\n
\n
\n
\n \n PASSENGER NAME\n \n \n {resolvedPassengerName}\n \n
\n\n
\n
\n SEAT: {resolvedSeatNumber}\n
\n
\n TRAIN: {resolvedTrainNumber}\n
\n
\n DATE: {resolvedDate}\n
\n
\n\n {/* Solid Station Badge */}\n
\n {resolvedRouteText}\n
\n
\n\n {/* Mini Vertical Barcode */}\n
\n \n
\n
\n
\n
\n
\n ) : (\n /* -------------------------------------------------------- */\n /* CLASSIFIED DOSSIER FACE 1 (Voucher Pass & Clearance) */\n /* -------------------------------------------------------- */\n <>\n
\n
\n
\n \n {fBadge}\n
\n {fSerial}\n
\n \n \n {fTitle}\n \n \n {fSubtitle}\n

\n
\n\n
\n \n {fStamp} {fStampSuffix}\n
\n
\n
\n {[2, 4, 1, 3, 2, 5, 2, 1, 4, 3, 1, 5, 2, 3, 4, 2, 1, 3, 5, 2, 4, 1, 3].map((w, i) => (\n \n ))}\n
\n \n {fBarcode}\n \n
\n
\n\n
\n \n
\n {fStatus}\n \n
\n
\n \n )}\n
\n\n {/* ============================================================ */}\n {/* FACE 2: BACK FACE OF TICKET / PASS */}\n {/* ============================================================ */}\n \n {isKeycard ? (\n /* -------------------------------------------------------- */\n /* MODERN BIOMETRIC SMARTCARD REVERSE (MAGNETIC & TELEMETRY)*/\n /* -------------------------------------------------------- */\n
\n {/* 1. Encrypted Magnetic Stripe */}\n
\n \n ENCRYPTED NFC // FIDO2 MAGNETIC TRACK\n \n \n CRC: 8940-X\n \n
\n\n {/* 2. Signature Panel & Security Code */}\n
\n
\n \n DIGITAL SIGNATURE\n \n \n SEC KEY: {resolvedSecurityKey}\n \n
\n\n {/* Signature Box */}\n
\n {resolvedHolderName}\n CRYPTO SIGNED\n
\n\n {/* SHA-512 Telemetry Hash */}\n

\n ✦ HASH: {resolvedHashSignature}\n

\n
\n\n {/* 3. Three Security Telemetry Pillars */}\n
\n
\n
\n ENCRYPTION\n AES-256\n
\n
\n PROTOCOL\n FIDO2 / NFC\n
\n
\n ACCESS\n GLOBAL\n
\n
\n
\n\n {/* 4. Bottom Footer */}\n
\n QUANTUM VAULT CORE\n AUTH.QUANTUMVAULT.IO\n
\n
\n ) : isBoardingPass ? (\n /* -------------------------------------------------------- */\n /* AIRLINE VIP LOUNGE & PASS PRIVILEGES (BACK FACE) */\n /* -------------------------------------------------------- */\n
\n {/* Vector Card Shell */}\n \n {/* Top Half: Card background */}\n \n {/* Bottom Half: Primary Blue background */}\n \n {/* Full Outer Perimeter Stroke */}\n \n \n\n {/* Card Content */}\n
\n {/* Upper Section: Flight Wings & Slogan */}\n
\n \n

\n {resolvedAirlineCompany}\n

\n

\n {resolvedSlogan}\n

\n
\n\n {/* Dotted Perforation Line */}\n
\n
\n
\n\n {/* Lower Section: VIP Lounge Perks & Metrics */}\n
\n \n\n {/* Black Lounge Banner */}\n
\n \n ✦ SKYCLUB VIP LOUNGE ACCESS ✦\n \n
\n\n {/* 3 VIP Badges Grid */}\n
\n
\n LOUNGE\n T4 ACCESS\n
\n
\n TIER\n PLATINUM\n
\n
\n BAGGAGE\n 3 × 32KG\n
\n
\n\n {/* Website link */}\n \n {resolvedWebsiteUrl} {\"//\"} 24/7 CONCIERGE\n \n
\n
\n
\n ) : isTrainTicket ? (\n /* -------------------------------------------------------- */\n /* EXACT 1:1 REPLICA OF RIGHT TICKET (BACK FACE) */\n /* -------------------------------------------------------- */\n
\n {/* 100% Vector Card Shell with Inward Curved Notch Borders (All-Time Transparent Cutouts) */}\n \n {/* Top Half: Card background */}\n \n {/* Bottom Half: Primary Blue background */}\n \n {/* Full Continuous Outer Perimeter Stroke with Inward Curved Notch Arcs */}\n \n \n\n {/* Card Content (Layered over the SVG Shell) */}\n
\n {/* Upper White/Card Section: Train Logo & Slogan */}\n
\n \n

\n {resolvedTrainCompany}\n

\n

\n {resolvedSlogan}\n

\n
\n\n {/* Dotted Perforation Line (Extends seamlessly from Left Notch to Right Notch) */}\n
\n
\n
\n\n {/* Lower Primary Banner Section with Station Name */}\n
\n \n\n {/* Black Station Box */}\n
\n \n {resolvedRouteText}\n \n
\n\n {/* Website link */}\n \n {resolvedWebsiteUrl}\n \n
\n
\n
\n ) : (\n /* -------------------------------------------------------- */\n /* CLASSIFIED DOSSIER FACE 2 (Editorial Manifesto & Metrics)*/\n /* -------------------------------------------------------- */\n <>\n
\n
\n
\n \n {bCategory}\n
\n \n {bDate}\n \n
\n
\n \n {bTitle}\n \n \n {bSubtitle}\n

\n
\n \n \n {bStatement}\n

\n
\n \n “{bHighlight}”\n

\n
\n
\n \n \n {m1L}\n \n \n {m1V}\n \n
\n \n \n {m2L}\n \n \n {m2V}\n \n
\n \n \n {m3L}\n \n \n {m3V}\n \n
\n
\n
\n\n
\n \n
\n \n ✦ {bAuthor}\n \n \n
\n
\n \n )}\n
\n
\n\n {/* ============================================================== */}\n {/* LAYER 3: FRONT SLEEVE FLAP (CARD BOX DESIGN) */}\n {/* Custom styled envelope box matching the chosen design aesthetic*/}\n {/* ============================================================== */}\n {/* 3A. Flap Background Plate with Thumb Notch Scoop Mask */}\n \n\n {/* 3B. Flap Surface Content Layer (UNMASKED -> 100% CRISP VECTOR TYPOGRAPHY, ZERO BLUR) */}\n \n {/* Top Floating Badge */}\n
\n {isKeycard ? (\n \n \n NFC SMART CARD // SEC-09\n
\n ) : isBoardingPass ? (\n \n ✦ {resolvedAirlineCompany} {\"//\"} VIP LOUNGE\n
\n ) : isTrainTicket ? (\n \n ✦ {trainCompany}\n \n ) : (\n
\n )}\n
\n\n {/* Center Emblem Seal */}\n
\n {centerIcon ? (\n
\n {centerIcon}\n
\n ) : isKeycard ? (\n \n ) : isBoardingPass ? (\n \n ) : isTrainTicket ? (\n \n ) : (\n \n )}\n
\n\n {/* Bottom Title & Subtitle with Crystal Clear High Contrast Vector Typography */}\n
\n \n {resolvedSleeveTitle}\n \n \n {resolvedSleeveSubtitle}\n

\n
\n \n \n \n );\n}\n\n// Aliases for modern naming\nexport const SecureEnvelope = ConfidentialFolder;\nexport type SecureEnvelopeProps = ConfidentialFolderProps;\nexport type SecureEnvelopeInteractionMode = ConfidentialFolderInteractionMode;\nexport type SecureEnvelopeCardDesign = ConfidentialFolderCardDesign;\nexport type SecureEnvelopeData = CouponCardData;\n\nexport default SecureEnvelope;\n", "type": "registry:component", "target": "components/custom/blocks/SecureEnvelopeBlock.tsx" } ], "docs": "Named export: SecureEnvelope (also ConfidentialFolder).", "categories": [ "data-display", "marketing", "actions" ], "type": "registry:component" }