{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "certificate-credential-card",
  "title": "Certificate Credential Card",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/certificate-credential-card/CertificateCredentialCard.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { ref } from 'vue'\nimport { Award, Check, Copy, Download, ExternalLink, Share2, ShieldCheck } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\nconst copiedCertId = ref(false)\nconst copiedVerifyUrl = ref(false)\nconst copiedDigest = ref(false)\nconst sharedLinkedIn = ref(false)\nconst downloadingPdf = ref(false)\n\nconst credentialData = {\n  certId: 'CERT-2026-984210',\n  institution: 'UIPKGE Engineering Academy',\n  motto: 'EXCELLENTIA IN ARCHITECTURA',\n  type: 'Professional Certificate of Mastery in Full-Stack UI Engineering',\n  recipientName: 'Elena Rostova',\n  achievementDescription:\n    'For demonstrating advanced mastery in headless component architecture, OKLCH token systems, accessibility compliance, and dual-framework engineering.',\n  issueDate: 'August 21, 2026',\n  expiration: 'No Expiration · Lifetime Validity',\n  skills: ['Vue 3.5', 'React 19', 'TypeScript', 'Tailwind v4', 'Reka UI', 'WCAG AA A11y'],\n  leadInstructor: {\n    name: 'Dr. Marcus Vance',\n    title: 'Lead Instructor & Distinguished Architect',\n  },\n  academicDean: {\n    name: 'Sarah Jenkins, Ph.D.',\n    title: 'Academic Dean of Engineering',\n  },\n  sha256Digest: '7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069',\n  verifyUrl: 'https://uipkge.dev/verify/CERT-2026-984210',\n  blockLedger: 'Block #19,482,019 (OpenAttestation v3)',\n}\n\nfunction copyCertId() {\n  navigator.clipboard?.writeText(credentialData.certId)\n  copiedCertId.value = true\n  setTimeout(() => {\n    copiedCertId.value = false\n  }, 2000)\n}\n\nfunction copyVerifyUrl() {\n  navigator.clipboard?.writeText(credentialData.verifyUrl)\n  copiedVerifyUrl.value = true\n  setTimeout(() => {\n    copiedVerifyUrl.value = false\n  }, 2000)\n}\n\nfunction copyDigest() {\n  navigator.clipboard?.writeText(credentialData.sha256Digest)\n  copiedDigest.value = true\n  setTimeout(() => {\n    copiedDigest.value = false\n  }, 2000)\n}\n\nfunction handleLinkedInShare() {\n  const shareText = `Proud to share my ${credentialData.type} from ${credentialData.institution}!`\n  const url = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(credentialData.verifyUrl)}`\n  window.open(url, '_blank', 'noopener,noreferrer')\n  sharedLinkedIn.value = true\n  setTimeout(() => {\n    sharedLinkedIn.value = false\n  }, 2500)\n}\n\nfunction handleDownloadPdf() {\n  downloadingPdf.value = true\n  setTimeout(() => {\n    downloadingPdf.value = false\n  }, 2000)\n}\n</script>\n\n<template>\n  <div data-slot=\"certificate-credential-card\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Card -->\n    <Card class=\"border shadow-xs\">\n      <CardHeader class=\"flex flex-col gap-4 pb-6 sm:flex-row sm:items-start sm:justify-between\">\n        <div class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <Badge wrap variant=\"outline\" class=\"gap-1.5 font-mono text-xs\">\n              <Award class=\"text-warning size-3.5\" aria-hidden=\"true\" />\n              Verified Credential\n            </Badge>\n            <div\n              class=\"border-success/20 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\"\n            >\n              <span class=\"relative flex size-1.5\">\n                <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n                <span class=\"bg-success relative inline-flex size-1.5 rounded-full\"></span>\n              </span>\n              Authentic · Cryptographically Signed\n            </div>\n          </div>\n\n          <div>\n            <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">\n              Verified Credential &amp; Certificate of Mastery\n            </h1>\n            <div class=\"text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n              <span>Credential ID:</span>\n              <button\n                type=\"button\"\n                @click=\"copyCertId\"\n                class=\"hover:bg-muted focus-visible:ring-ring border-border bg-muted/40 text-foreground inline-flex min-h-6 items-center gap-1.5 rounded border px-2 py-0.5 font-mono text-xs font-semibold transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n                title=\"Click to copy credential ID\"\n              >\n                #{{ credentialData.certId }}\n                <Check v-if=\"copiedCertId\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                <Copy v-else class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n              </button>\n              <span class=\"text-muted-foreground tabular-nums\">Issued {{ credentialData.issueDate }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Action Buttons -->\n        <div class=\"flex flex-wrap items-center gap-2.5 pt-1\">\n          <Button variant=\"default\" @click=\"handleLinkedInShare\" class=\"gap-2 shadow-xs\">\n            <Share2 class=\"size-4\" aria-hidden=\"true\" />\n            {{ sharedLinkedIn ? 'Shared!' : 'Share on LinkedIn' }}\n          </Button>\n          <Button aria-label=\"Download attachment\" variant=\"outline\" @click=\"handleDownloadPdf\" class=\"gap-2 shadow-xs\">\n            <Download class=\"size-4\" aria-hidden=\"true\" />\n            {{ downloadingPdf ? 'Generating PDF...' : 'Download High-Res PDF' }}\n          </Button>\n        </div>\n      </CardHeader>\n    </Card>\n\n    <!-- Certificate Visual Diploma Frame -->\n    <Card\n      class=\"border-border from-card via-card/95 to-card/90 relative overflow-hidden rounded-2xl border bg-gradient-to-b shadow-sm\"\n    >\n      <!-- Watermark Background Graphic -->\n      <div\n        class=\"pointer-events-none absolute inset-0 flex items-center justify-center overflow-hidden opacity-[0.03] select-none dark:opacity-[0.05]\"\n        aria-hidden=\"true\"\n      >\n        <svg\n          class=\"h-[680px] w-full max-w-[680px]\"\n          viewBox=\"0 0 500 500\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <!-- Concentric Guilloché Circles -->\n          <circle cx=\"250\" cy=\"250\" r=\"230\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-dasharray=\"4 4\" />\n          <circle cx=\"250\" cy=\"250\" r=\"210\" stroke=\"currentColor\" stroke-width=\"2\" />\n          <circle cx=\"250\" cy=\"250\" r=\"185\" stroke=\"currentColor\" stroke-width=\"1\" stroke-dasharray=\"2 2\" />\n          <circle cx=\"250\" cy=\"250\" r=\"150\" stroke=\"currentColor\" stroke-width=\"1.5\" />\n          <circle cx=\"250\" cy=\"250\" r=\"120\" stroke=\"currentColor\" stroke-width=\"1\" />\n          <circle cx=\"250\" cy=\"250\" r=\"90\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6 3\" />\n          <circle cx=\"250\" cy=\"250\" r=\"60\" stroke=\"currentColor\" stroke-width=\"1\" />\n          <!-- Radial Radiating Lines -->\n          <g stroke=\"currentColor\" stroke-width=\"0.75\" opacity=\"0.6\">\n            <line x1=\"250\" y1=\"20\" x2=\"250\" y2=\"480\" />\n            <line x1=\"20\" y1=\"250\" x2=\"480\" y2=\"250\" />\n            <line x1=\"87\" y1=\"87\" x2=\"413\" y2=\"413\" />\n            <line x1=\"87\" y1=\"413\" x2=\"413\" y2=\"87\" />\n            <line x1=\"135\" y1=\"51\" x2=\"365\" y2=\"449\" />\n            <line x1=\"365\" y1=\"51\" x2=\"135\" y2=\"449\" />\n            <line x1=\"51\" y1=\"135\" x2=\"449\" y2=\"365\" />\n            <line x1=\"51\" y1=\"365\" x2=\"449\" y2=\"135\" />\n          </g>\n          <!-- Center Emblem Symbol -->\n          <polygon\n            points=\"250,170 275,220 330,225 290,265 300,320 250,290 200,320 210,265 170,225 225,220\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>\n\n      <CardContent class=\"relative z-10 p-6 sm:p-10 lg:p-12\">\n        <!-- Certificate Inner Ornamental Border Container -->\n        <div class=\"border-border/80 bg-background/50 relative rounded-xl border p-6 backdrop-blur-xs sm:p-10 lg:p-12\">\n          <!-- Inner Double Inset Border with Corner Filigree Accents -->\n          <div class=\"border-border/70 pointer-events-none absolute inset-3 rounded-lg border border-dashed sm:inset-4\">\n            <!-- Top-Left Corner Rosette -->\n            <div class=\"text-warning/70 absolute -top-2.5 -left-2.5 flex size-5 items-center justify-center\">\n              <svg class=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n              </svg>\n            </div>\n            <!-- Top-Right Corner Rosette -->\n            <div class=\"text-warning/70 absolute -top-2.5 -right-2.5 flex size-5 items-center justify-center\">\n              <svg class=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n              </svg>\n            </div>\n            <!-- Bottom-Left Corner Rosette -->\n            <div class=\"text-warning/70 absolute -bottom-2.5 -left-2.5 flex size-5 items-center justify-center\">\n              <svg class=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n              </svg>\n            </div>\n            <!-- Bottom-Right Corner Rosette -->\n            <div class=\"text-warning/70 absolute -right-2.5 -bottom-2.5 flex size-5 items-center justify-center\">\n              <svg class=\"size-4\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M12 2v20M2 12h20M5 5l14 14M5 19L19 5\" />\n              </svg>\n            </div>\n          </div>\n\n          <div class=\"relative space-y-8 text-center sm:space-y-10\">\n            <!-- 1. Issuing Institution Crest & Header -->\n            <div class=\"flex flex-col items-center space-y-3\">\n              <!-- Academy Crest Emblem SVG -->\n              <div class=\"relative flex size-20 items-center justify-center sm:size-24\">\n                <div\n                  class=\"to-primary/20 absolute inset-0 rounded-full bg-gradient-to-tr from-amber-500/20 via-emerald-500/20 blur-md\"\n                ></div>\n                <div\n                  class=\"bg-card border-warning/40 relative flex size-18 items-center justify-center rounded-full border-2 p-3 shadow-md sm:size-20\"\n                >\n                  <svg\n                    class=\"text-foreground size-full\"\n                    viewBox=\"0 0 100 100\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-label=\"UIPKGE Engineering Academy Crest\"\n                  >\n                    <!-- Outer Shield -->\n                    <path\n                      d=\"M50 8 L84 20 V50 C84 72 50 92 50 92 C50 92 16 72 16 50 V20 Z\"\n                      fill=\"currentColor\"\n                      fill-opacity=\"0.06\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"3\"\n                      stroke-linejoin=\"round\"\n                    />\n                    <!-- Inner Shield Contour -->\n                    <path\n                      d=\"M50 16 L76 26 V48 C76 66 50 82 50 82 C50 82 24 66 24 48 V26 Z\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      stroke-dasharray=\"3 2\"\n                    />\n                    <!-- Dual-Framework Atom Rings -->\n                    <ellipse\n                      cx=\"50\"\n                      cy=\"48\"\n                      rx=\"20\"\n                      ry=\"8\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      transform=\"rotate(-30 50 48)\"\n                    />\n                    <ellipse\n                      cx=\"50\"\n                      cy=\"48\"\n                      rx=\"20\"\n                      ry=\"8\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.5\"\n                      transform=\"rotate(30 50 48)\"\n                    />\n                    <!-- Center Core Star & Graduation Cap Symbol -->\n                    <circle cx=\"50\" cy=\"48\" r=\"4\" fill=\"currentColor\" />\n                    <polygon\n                      points=\"50,30 54,38 63,39 56,45 58,54 50,49 42,54 44,45 37,39 46,38\"\n                      fill=\"currentColor\"\n                      fill-opacity=\"0.8\"\n                    />\n                  </svg>\n                </div>\n              </div>\n\n              <div class=\"space-y-1\">\n                <p class=\"text-muted-foreground text-xs font-bold tracking-[0.25em] uppercase\">\n                  {{ credentialData.institution }}\n                </p>\n                <p class=\"text-success font-mono text-xs font-semibold tracking-widest\">\n                  {{ credentialData.motto }}\n                </p>\n              </div>\n\n              <div class=\"text-muted-foreground/60 flex items-center justify-center gap-3 pt-1\">\n                <span class=\"bg-border h-px w-12 sm:w-20\"></span>\n                <Award class=\"text-warning/80 size-3.5\" aria-hidden=\"true\" />\n                <span class=\"font-mono text-xs tracking-wider uppercase\">Accredited Diploma</span>\n                <Award class=\"text-warning/80 size-3.5\" aria-hidden=\"true\" />\n                <span class=\"bg-border h-px w-12 sm:w-20\"></span>\n              </div>\n            </div>\n\n            <!-- 2. Recipient Presentation & Certificate Title -->\n            <div class=\"space-y-4\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-[0.2em] uppercase\">\n                This is to certify that\n              </p>\n\n              <!-- Recipient Name in Elegant / Prominent Display -->\n              <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n                {{ credentialData.recipientName }}\n              </h2>\n\n              <p class=\"text-muted-foreground text-xs italic sm:text-sm\">\n                has successfully fulfilled all rigorous requirements and demonstrated distinguished mastery in\n              </p>\n\n              <!-- Certificate Specialization Heading -->\n              <div class=\"border-primary/20 bg-primary/5 mx-auto max-w-2xl rounded-lg border px-4 py-3 sm:px-6\">\n                <h3 class=\"text-foreground text-base font-semibold tracking-tight sm:text-xl md:text-2xl\">\n                  {{ credentialData.type }}\n                </h3>\n              </div>\n\n              <!-- Achievement Description -->\n              <p class=\"text-muted-foreground mx-auto max-w-2xl text-xs leading-relaxed sm:text-sm\">\n                {{ credentialData.achievementDescription }}\n              </p>\n\n              <!-- Distinction Badge -->\n              <div\n                class=\"border-warning/30 bg-warning/10 text-warning inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium\"\n              >\n                <Award class=\"size-3.5\" aria-hidden=\"true\" />\n                <span>Conferred with Highest Distinction · Top 1% Cohort · 480 CEU Hours</span>\n              </div>\n            </div>\n\n            <!-- 3. Validated Skills Pills -->\n            <div class=\"space-y-3 pt-2\">\n              <p class=\"text-muted-foreground text-xs font-medium\">\n                Validated Competencies &amp; Technical Proficiencies\n              </p>\n              <div class=\"flex flex-wrap items-center justify-center gap-2\">\n                <Badge\n                  wrap\n                  v-for=\"skill in credentialData.skills\"\n                  :key=\"skill\"\n                  variant=\"secondary\"\n                  class=\"border-border/80 bg-muted/60 hover:bg-muted gap-1.5 border px-3 py-1 text-xs font-medium transition-colors\"\n                >\n                  <span class=\"bg-success size-1.5 rounded-full\"></span>\n                  {{ skill }}\n                </Badge>\n              </div>\n            </div>\n\n            <!-- 4. Issue Date & Validity Bar -->\n            <div\n              class=\"border-border/60 bg-muted/20 mx-auto grid max-w-xl grid-cols-1 gap-3 rounded-lg border p-3 text-xs sm:grid-cols-3\"\n            >\n              <div>\n                <span class=\"text-muted-foreground\">Issue Date</span>\n                <p class=\"text-foreground mt-0.5 font-semibold\">{{ credentialData.issueDate }}</p>\n              </div>\n              <div class=\"border-border/60 border-t pt-2 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n                <span class=\"text-muted-foreground\">Validity</span>\n                <p class=\"text-success mt-0.5 font-semibold\">\n                  {{ credentialData.expiration }}\n                </p>\n              </div>\n              <div class=\"border-border/60 border-t pt-2 sm:border-t-0 sm:border-l sm:pt-0 sm:pl-3\">\n                <span class=\"text-muted-foreground\">Credential Status</span>\n                <p class=\"text-foreground mt-0.5 font-mono font-semibold\">Active · Verified</p>\n              </div>\n            </div>\n\n            <!-- 5. Signatures & Verification Seal / QR Code Grid -->\n            <div class=\"grid grid-cols-1 items-end gap-8 pt-4 sm:grid-cols-3 sm:gap-6\">\n              <!-- Lead Instructor Signature -->\n              <div class=\"flex flex-col items-center space-y-2 text-center\">\n                <!-- Handwritten Signature SVG -->\n                <div class=\"flex h-14 w-44 items-center justify-center\">\n                  <svg\n                    class=\"text-foreground h-full w-full opacity-90\"\n                    viewBox=\"0 0 200 60\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-label=\"Signature of Dr. Marcus Vance\"\n                  >\n                    <!-- Cursive handwritten stroke: M. Vance -->\n                    <path\n                      d=\"M 15,45 C 18,20 28,12 36,25 C 44,38 48,15 56,22 C 64,29 68,48 76,42 C 84,36 92,30 102,32 C 114,34 122,46 134,36 C 144,28 152,18 162,26 C 172,34 180,42 188,40\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2.2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                    />\n                    <path\n                      d=\"M 30,52 C 70,50 140,53 180,48\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.2\"\n                      stroke-linecap=\"round\"\n                      stroke-dasharray=\"4 2\"\n                      opacity=\"0.6\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"border-border w-full max-w-[200px] border-t pt-1.5\">\n                  <p class=\"text-foreground text-xs font-bold\">{{ credentialData.leadInstructor.name }}</p>\n                  <p class=\"text-muted-foreground text-xs\">{{ credentialData.leadInstructor.title }}</p>\n                </div>\n              </div>\n\n              <!-- Center Gold/Emerald Cryptographic Seal & SVG QR Code -->\n              <div class=\"flex flex-col items-center space-y-3\">\n                <div class=\"relative flex flex-col items-center\">\n                  <!-- Medallion Seal Badge Outer -->\n                  <div\n                    class=\"via-background border-warning/60 relative flex size-28 flex-col items-center justify-center rounded-full border-2 bg-gradient-to-br from-amber-500/10 to-emerald-500/10 p-2 shadow-md\"\n                  >\n                    <!-- QR Code SVG with finder blocks -->\n                    <svg\n                      class=\"text-foreground size-16\"\n                      viewBox=\"0 0 21 21\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      aria-label=\"QR code for online credential verification\"\n                    >\n                      <!-- Top-Left Finder Pattern (7x7) -->\n                      <rect x=\"0\" y=\"0\" width=\"7\" height=\"7\" rx=\"0.5\" />\n                      <rect x=\"1\" y=\"1\" width=\"5\" height=\"5\" fill=\"var(--color-card, #fff)\" />\n                      <rect x=\"2\" y=\"2\" width=\"3\" height=\"3\" />\n\n                      <!-- Top-Right Finder Pattern (7x7) -->\n                      <rect x=\"14\" y=\"0\" width=\"7\" height=\"7\" rx=\"0.5\" />\n                      <rect x=\"15\" y=\"1\" width=\"5\" height=\"5\" fill=\"var(--color-card, #fff)\" />\n                      <rect x=\"16\" y=\"2\" width=\"3\" height=\"3\" />\n\n                      <!-- Bottom-Left Finder Pattern (7x7) -->\n                      <rect x=\"0\" y=\"14\" width=\"7\" height=\"7\" rx=\"0.5\" />\n                      <rect x=\"1\" y=\"15\" width=\"5\" height=\"5\" fill=\"var(--color-card, #fff)\" />\n                      <rect x=\"2\" y=\"16\" width=\"3\" height=\"3\" />\n\n                      <!-- Timing Patterns (Row 6 & Col 6) -->\n                      <rect x=\"8\" y=\"6\" width=\"1\" height=\"1\" />\n                      <rect x=\"10\" y=\"6\" width=\"1\" height=\"1\" />\n                      <rect x=\"12\" y=\"6\" width=\"1\" height=\"1\" />\n                      <rect x=\"6\" y=\"8\" width=\"1\" height=\"1\" />\n                      <rect x=\"6\" y=\"10\" width=\"1\" height=\"1\" />\n                      <rect x=\"6\" y=\"12\" width=\"1\" height=\"1\" />\n\n                      <!-- Data Modules -->\n                      <rect x=\"8\" y=\"0\" width=\"1\" height=\"1\" />\n                      <rect x=\"10\" y=\"1\" width=\"1\" height=\"1\" />\n                      <rect x=\"12\" y=\"2\" width=\"1\" height=\"1\" />\n                      <rect x=\"9\" y=\"3\" width=\"1\" height=\"1\" />\n                      <rect x=\"11\" y=\"4\" width=\"1\" height=\"1\" />\n\n                      <rect x=\"0\" y=\"8\" width=\"1\" height=\"1\" />\n                      <rect x=\"2\" y=\"9\" width=\"1\" height=\"1\" />\n                      <rect x=\"4\" y=\"10\" width=\"1\" height=\"1\" />\n                      <rect x=\"1\" y=\"12\" width=\"1\" height=\"1\" />\n\n                      <rect x=\"8\" y=\"8\" width=\"2\" height=\"2\" />\n                      <rect x=\"11\" y=\"8\" width=\"1\" height=\"1\" />\n                      <rect x=\"13\" y=\"9\" width=\"2\" height=\"1\" />\n                      <rect x=\"8\" y=\"11\" width=\"1\" height=\"2\" />\n                      <rect x=\"10\" y=\"11\" width=\"2\" height=\"1\" />\n                      <rect x=\"13\" y=\"12\" width=\"1\" height=\"1\" />\n\n                      <rect x=\"14\" y=\"8\" width=\"1\" height=\"1\" />\n                      <rect x=\"16\" y=\"9\" width=\"1\" height=\"1\" />\n                      <rect x=\"19\" y=\"10\" width=\"1\" height=\"1\" />\n                      <rect x=\"15\" y=\"11\" width=\"2\" height=\"1\" />\n                      <rect x=\"18\" y=\"12\" width=\"1\" height=\"1\" />\n\n                      <rect x=\"8\" y=\"14\" width=\"1\" height=\"1\" />\n                      <rect x=\"10\" y=\"15\" width=\"2\" height=\"1\" />\n                      <rect x=\"8\" y=\"17\" width=\"1\" height=\"2\" />\n                      <rect x=\"10\" y=\"18\" width=\"1\" height=\"1\" />\n                      <rect x=\"12\" y=\"16\" width=\"1\" height=\"2\" />\n                      <rect x=\"12\" y=\"19\" width=\"1\" height=\"1\" />\n\n                      <rect x=\"14\" y=\"14\" width=\"2\" height=\"1\" />\n                      <rect x=\"17\" y=\"15\" width=\"1\" height=\"1\" />\n                      <rect x=\"19\" y=\"14\" width=\"2\" height=\"1\" />\n                      <rect x=\"15\" y=\"17\" width=\"1\" height=\"2\" />\n                      <rect x=\"17\" y=\"18\" width=\"2\" height=\"1\" />\n                      <rect x=\"20\" y=\"19\" width=\"1\" height=\"1\" />\n                    </svg>\n\n                    <!-- Cryptographic Seal Label -->\n                    <div class=\"text-success mt-1 flex items-center gap-1\">\n                      <ShieldCheck class=\"size-3\" aria-hidden=\"true\" />\n                      <span class=\"font-mono text-xs font-semibold\">VERIFIED</span>\n                    </div>\n                  </div>\n                </div>\n\n                <p class=\"text-muted-foreground text-xs font-medium\">Scan to Verify Authenticity</p>\n              </div>\n\n              <!-- Academic Dean Signature -->\n              <div class=\"flex flex-col items-center space-y-2 text-center\">\n                <!-- Handwritten Signature SVG -->\n                <div class=\"flex h-14 w-44 items-center justify-center\">\n                  <svg\n                    class=\"text-foreground h-full w-full opacity-90\"\n                    viewBox=\"0 0 200 60\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    aria-label=\"Signature of Dr. Sarah Jenkins\"\n                  >\n                    <!-- Cursive handwritten stroke: S. Jenkins -->\n                    <path\n                      d=\"M 20,25 C 24,14 34,12 40,20 C 46,28 32,48 42,48 C 52,48 60,30 70,30 C 80,30 84,42 94,40 C 104,38 112,24 122,24 C 132,24 136,44 148,42 C 158,40 166,28 176,32 C 182,35 186,40 190,38\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2.2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                    />\n                    <path\n                      d=\"M 25,54 C 65,52 130,50 175,48\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.2\"\n                      stroke-linecap=\"round\"\n                      stroke-dasharray=\"4 2\"\n                      opacity=\"0.6\"\n                    />\n                  </svg>\n                </div>\n                <div class=\"border-border w-full max-w-[200px] border-t pt-1.5\">\n                  <p class=\"text-foreground text-xs font-bold\">{{ credentialData.academicDean.name }}</p>\n                  <p class=\"text-muted-foreground text-xs\">{{ credentialData.academicDean.title }}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Cryptographic Verification & Blockchain Ledger Audit Strip -->\n    <Card class=\"border-border bg-muted/20 border shadow-xs\">\n      <CardContent class=\"flex flex-col gap-4 p-4 text-xs lg:flex-row lg:items-center lg:justify-between\">\n        <div class=\"text-muted-foreground flex items-center gap-2.5\">\n          <ShieldCheck class=\"text-success size-4 shrink-0\" aria-hidden=\"true\" />\n          <span>\n            Tamper-Proof Credential · W3C Verifiable Credentials &amp;\n            <span class=\"text-foreground font-mono font-medium\">{{ credentialData.blockLedger }}</span>\n          </span>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-3\">\n          <!-- SHA-256 Digest Copy Button -->\n          <div class=\"flex items-center gap-1.5 font-mono\">\n            <span class=\"text-muted-foreground\">SHA-256:</span>\n            <button\n              type=\"button\"\n              @click=\"copyDigest\"\n              class=\"hover:bg-muted focus-visible:ring-ring border-border bg-muted/60 text-foreground inline-flex min-h-6 items-center gap-1 rounded border px-2 py-0.5 transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n              title=\"Click to copy SHA-256 cryptographic digest\"\n            >\n              <span class=\"tabular-nums\">7f83b1...126d9069</span>\n              <Check v-if=\"copiedDigest\" class=\"text-success size-3\" aria-hidden=\"true\" />\n              <Copy v-else class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n            </button>\n          </div>\n\n          <!-- Direct Verification URL Button -->\n          <button\n            type=\"button\"\n            @click=\"copyVerifyUrl\"\n            class=\"hover:bg-muted focus-visible:ring-ring text-primary hover:text-primary/80 inline-flex min-h-6 items-center gap-1 rounded px-1.5 py-0.5 font-medium transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n            title=\"Click to copy public verification URL\"\n          >\n            <span>{{ copiedVerifyUrl ? 'URL Copied' : 'Copy Verification URL' }}</span>\n            <Check v-if=\"copiedVerifyUrl\" class=\"text-success size-3\" aria-hidden=\"true\" />\n            <ExternalLink v-else class=\"size-3\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CertificateCredentialCard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Digital diploma and verified credential card featuring ornamental certificate container, cryptographic seal with QR code verification, recipient honors, validated skill pills, instructor signatures, and social sharing.",
  "categories": [
    "education",
    "app",
    "card"
  ]
}