{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "delivery-proof-card",
  "title": "Delivery Proof Card",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/delivery-proof-card/DeliveryProofCard.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { ref } from 'vue'\nimport {\n  Camera,\n  Check,\n  Copy,\n  Download,\n  FileCheck,\n  Fingerprint,\n  Key,\n  MapPin,\n  Package,\n  Share2,\n  ShieldCheck,\n  Truck,\n} from 'lucide-vue-next'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\nconst copiedTracking = ref(false)\nconst copiedGps = ref(false)\nconst copiedHash = ref(false)\nconst sharedLink = ref(false)\n\nfunction copyTracking() {\n  navigator.clipboard?.writeText('TRK-98421094')\n  copiedTracking.value = true\n  setTimeout(() => {\n    copiedTracking.value = false\n  }, 2000)\n}\n\nfunction copyGps() {\n  navigator.clipboard?.writeText('34.0522°N, 118.2437°W')\n  copiedGps.value = true\n  setTimeout(() => {\n    copiedGps.value = false\n  }, 2000)\n}\n\nfunction copyHash() {\n  navigator.clipboard?.writeText('7f83b1657ff1fc53b92dc18148a1d65dfc2d4b1fa3d677284addd200126d9069')\n  copiedHash.value = true\n  setTimeout(() => {\n    copiedHash.value = false\n  }, 2000)\n}\n\nfunction handleShare() {\n  navigator.clipboard?.writeText('https://uipkge.dev/epod/TRK-98421094')\n  sharedLink.value = true\n  setTimeout(() => {\n    sharedLink.value = false\n  }, 2000)\n}\n</script>\n\n<template>\n  <div data-slot=\"delivery-proof-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              <FileCheck class=\"text-success size-3.5\" aria-hidden=\"true\" />\n              ePOD Receipt\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              Delivered · Signed & Verified\n            </div>\n          </div>\n\n          <div>\n            <h1 class=\"text-foreground text-xl font-semibold tracking-tight sm:text-2xl\">\n              Electronic Proof of Delivery (ePOD)\n            </h1>\n            <div class=\"text-muted-foreground mt-1 flex flex-wrap items-center gap-2 text-xs sm:text-sm\">\n              <span>Tracking Number:</span>\n              <button\n                type=\"button\"\n                @click=\"copyTracking\"\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 tracking number\"\n              >\n                #TRK-98421094\n                <Check v-if=\"copiedTracking\" 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\">Aug 21, 2026 at 14:32:08 PST</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 aria-label=\"Download attachment\" variant=\"default\" class=\"gap-2 shadow-xs\">\n            <Download class=\"size-4\" aria-hidden=\"true\" />\n            Download ePOD PDF\n          </Button>\n          <Button variant=\"outline\" @click=\"handleShare\" class=\"gap-2 shadow-xs\">\n            <Check v-if=\"sharedLink\" class=\"text-success size-4\" aria-hidden=\"true\" />\n            <Share2 v-else class=\"size-4\" aria-hidden=\"true\" />\n            {{ sharedLink ? 'Link Copied' : 'Share Proof Link' }}\n          </Button>\n        </div>\n      </CardHeader>\n    </Card>\n\n    <!-- 2-Column Delivery Verification Grid -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Left Column: Visual Proof & Electronic Signatures (lg:col-span-6) -->\n      <div class=\"space-y-6 lg:col-span-6\">\n        <!-- Drop-off Photo Card -->\n        <Card class=\"border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <Camera class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Drop-off Photo Verification</CardTitle>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"font-mono text-xs\"> Front Porch / Secure Entry </Badge>\n            </div>\n            <CardDescription> Photographic proof of drop-off captured at consignee doorstep </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Delivery Photo Container with Viewfinder and HUD overlay -->\n            <div\n              class=\"group border-border relative aspect-[16/10] w-full overflow-hidden rounded-lg border bg-gradient-to-br from-zinc-800 via-zinc-900 to-black text-white shadow-inner\"\n            >\n              <!-- Photographic Canvas Composition -->\n              <div class=\"absolute inset-0 flex items-center justify-center p-6\">\n                <!-- Porch Perspective & Doorstep Elements -->\n                <svg\n                  class=\"h-full w-full opacity-90\"\n                  viewBox=\"0 0 600 375\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  aria-label=\"Delivery parcel positioned securely on consignee front porch\"\n                >\n                  <!-- Background Architectural Siding & Wall -->\n                  <rect width=\"600\" height=\"375\" fill=\"#18181b\" />\n                  <line x1=\"0\" y1=\"40\" x2=\"600\" y2=\"40\" stroke=\"#27272a\" stroke-width=\"1.5\" />\n                  <line x1=\"0\" y1=\"80\" x2=\"600\" y2=\"80\" stroke=\"#27272a\" stroke-width=\"1.5\" />\n                  <line x1=\"0\" y1=\"120\" x2=\"600\" y2=\"120\" stroke=\"#27272a\" stroke-width=\"1.5\" />\n                  <line x1=\"0\" y1=\"160\" x2=\"600\" y2=\"160\" stroke=\"#27272a\" stroke-width=\"1.5\" />\n\n                  <!-- Doorframe & Entry Siding -->\n                  <rect x=\"70\" y=\"30\" width=\"160\" height=\"345\" fill=\"#09090b\" stroke=\"#3f3f46\" stroke-width=\"2\" />\n                  <line x1=\"150\" y1=\"30\" x2=\"150\" y2=\"375\" stroke=\"#27272a\" stroke-width=\"2\" />\n                  <circle cx=\"215\" cy=\"190\" r=\"5\" fill=\"#a1a1aa\" />\n\n                  <!-- Porch Slate Flooring Horizon -->\n                  <polygon points=\"0,210 600,210 600,375 0,375\" fill=\"#1c1917\" />\n                  <line x1=\"0\" y1=\"210\" x2=\"600\" y2=\"210\" stroke=\"#44403c\" stroke-width=\"2\" />\n                  <line x1=\"0\" y1=\"270\" x2=\"600\" y2=\"270\" stroke=\"#292524\" stroke-width=\"1\" />\n                  <line x1=\"0\" y1=\"330\" x2=\"600\" y2=\"330\" stroke=\"#292524\" stroke-width=\"1\" />\n\n                  <!-- Floor Plank Angles -->\n                  <line x1=\"120\" y1=\"210\" x2=\"60\" y2=\"375\" stroke=\"#292524\" stroke-width=\"1.5\" />\n                  <line x1=\"280\" y1=\"210\" x2=\"240\" y2=\"375\" stroke=\"#292524\" stroke-width=\"1.5\" />\n                  <line x1=\"440\" y1=\"210\" x2=\"420\" y2=\"375\" stroke=\"#292524\" stroke-width=\"1.5\" />\n\n                  <!-- Woven Door Mat -->\n                  <rect\n                    x=\"250\"\n                    y=\"225\"\n                    width=\"230\"\n                    height=\"115\"\n                    rx=\"4\"\n                    fill=\"#451a03\"\n                    fill-opacity=\"0.4\"\n                    stroke=\"#78350f\"\n                    stroke-width=\"1.5\"\n                  />\n                  <line\n                    x1=\"260\"\n                    y1=\"235\"\n                    x2=\"470\"\n                    y2=\"235\"\n                    stroke=\"#78350f\"\n                    stroke-width=\"0.75\"\n                    stroke-dasharray=\"3 3\"\n                  />\n                  <line\n                    x1=\"260\"\n                    y1=\"330\"\n                    x2=\"470\"\n                    y2=\"330\"\n                    stroke=\"#78350f\"\n                    stroke-width=\"0.75\"\n                    stroke-dasharray=\"3 3\"\n                  />\n\n                  <!-- Package Shadow -->\n                  <ellipse cx=\"360\" cy=\"305\" rx=\"75\" ry=\"18\" fill=\"#000000\" fill-opacity=\"0.6\" />\n\n                  <!-- 3D Cardboard Package Box -->\n                  <!-- Box Front Face -->\n                  <polygon\n                    points=\"305,230 405,230 405,300 305,300\"\n                    fill=\"#b45309\"\n                    stroke=\"#78350f\"\n                    stroke-width=\"1.5\"\n                  />\n                  <!-- Box Top Face -->\n                  <polygon\n                    points=\"305,230 350,195 450,195 405,230\"\n                    fill=\"#d97706\"\n                    stroke=\"#78350f\"\n                    stroke-width=\"1.5\"\n                  />\n                  <!-- Box Right Face -->\n                  <polygon\n                    points=\"405,230 450,195 450,265 405,300\"\n                    fill=\"#92400e\"\n                    stroke=\"#78350f\"\n                    stroke-width=\"1.5\"\n                  />\n\n                  <!-- Sealing Tape Across Top & Front -->\n                  <polygon points=\"370,195 385,195 355,230 340,230\" fill=\"#f59e0b\" fill-opacity=\"0.8\" />\n                  <rect x=\"348\" y=\"230\" width=\"14\" height=\"70\" fill=\"#f59e0b\" fill-opacity=\"0.8\" />\n\n                  <!-- White Shipping Label on Box Front -->\n                  <rect x=\"315\" y=\"242\" width=\"48\" height=\"34\" rx=\"1.5\" fill=\"#ffffff\" />\n                  <line x1=\"320\" y1=\"248\" x2=\"350\" y2=\"248\" stroke=\"#18181b\" stroke-width=\"1.5\" />\n                  <line x1=\"320\" y1=\"252\" x2=\"340\" y2=\"252\" stroke=\"#71717a\" stroke-width=\"1\" />\n                  <!-- Barcode on Label -->\n                  <line x1=\"320\" y1=\"262\" x2=\"320\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1.5\" />\n                  <line x1=\"323\" y1=\"262\" x2=\"323\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1\" />\n                  <line x1=\"325\" y1=\"262\" x2=\"325\" y2=\"272\" stroke=\"#000000\" stroke-width=\"2\" />\n                  <line x1=\"329\" y1=\"262\" x2=\"329\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1\" />\n                  <line x1=\"332\" y1=\"262\" x2=\"332\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1.5\" />\n                  <line x1=\"336\" y1=\"262\" x2=\"336\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1\" />\n                  <line x1=\"340\" y1=\"262\" x2=\"340\" y2=\"272\" stroke=\"#000000\" stroke-width=\"2\" />\n                  <line x1=\"344\" y1=\"262\" x2=\"344\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1\" />\n                  <line x1=\"348\" y1=\"262\" x2=\"348\" y2=\"272\" stroke=\"#000000\" stroke-width=\"1.5\" />\n\n                  <!-- Fragile / Express Stamp -->\n                  <rect\n                    x=\"370\"\n                    y=\"248\"\n                    width=\"26\"\n                    height=\"14\"\n                    rx=\"1\"\n                    fill=\"#ef4444\"\n                    fill-opacity=\"0.15\"\n                    stroke=\"#ef4444\"\n                    stroke-width=\"0.75\"\n                  />\n                  <line x1=\"373\" y1=\"255\" x2=\"393\" y2=\"255\" stroke=\"#ef4444\" stroke-width=\"1\" />\n                </svg>\n              </div>\n\n              <!-- Camera Viewfinder Overlay Reticles -->\n              <div class=\"pointer-events-none absolute inset-4 border border-white/20\">\n                <!-- Top-Left Corner -->\n                <div class=\"border-success absolute -top-1 -left-1 size-3 border-t-2 border-l-2\"></div>\n                <!-- Top-Right Corner -->\n                <div class=\"border-success absolute -top-1 -right-1 size-3 border-t-2 border-r-2\"></div>\n                <!-- Bottom-Left Corner -->\n                <div class=\"border-success absolute -bottom-1 -left-1 size-3 border-b-2 border-l-2\"></div>\n                <!-- Bottom-Right Corner -->\n                <div class=\"border-success absolute -right-1 -bottom-1 size-3 border-r-2 border-b-2\"></div>\n                <!-- Center Target Crosshair -->\n                <div class=\"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2\">\n                  <div class=\"relative size-6\">\n                    <div class=\"absolute top-0 left-1/2 h-2 w-0.5 -translate-x-1/2 bg-white/40\"></div>\n                    <div class=\"absolute bottom-0 left-1/2 h-2 w-0.5 -translate-x-1/2 bg-white/40\"></div>\n                    <div class=\"absolute top-1/2 left-0 h-0.5 w-2 -translate-y-1/2 bg-white/40\"></div>\n                    <div class=\"absolute top-1/2 right-0 h-0.5 w-2 -translate-y-1/2 bg-white/40\"></div>\n                    <div\n                      class=\"border-success absolute top-1/2 left-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full border\"\n                    ></div>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Top Telemetry Pill -->\n              <div\n                class=\"absolute top-3 left-3 flex items-center gap-1.5 rounded-md bg-black/60 px-2 py-1 backdrop-blur-md\"\n              >\n                <span class=\"bg-success size-2 animate-pulse rounded-full\"></span>\n                <span class=\"font-mono text-xs font-medium text-white/90\">OPTICAL PROOF CAPTURED</span>\n              </div>\n\n              <!-- Bottom Geostamp HUD Banner -->\n              <div\n                class=\"absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/95 via-black/75 to-transparent p-3 pt-6 sm:p-4\"\n              >\n                <div class=\"flex flex-col gap-1.5 sm:flex-row sm:items-end sm:justify-between\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"text-success flex items-center gap-1.5\">\n                      <MapPin class=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n                      <span class=\"font-mono text-xs font-semibold tracking-tight tabular-nums\">\n                        34.0522°N, 118.2437°W · Accurate to 3m\n                      </span>\n                    </div>\n                    <p class=\"font-mono text-xs text-zinc-300\">Springfield, OR · Geofence Validated (0.8m delta)</p>\n                  </div>\n                  <div class=\"flex items-center gap-2 text-right\">\n                    <span class=\"rounded bg-white/10 px-1.5 py-0.5 font-mono text-xs text-zinc-300\"> Zebra TC57x </span>\n                    <span class=\"text-muted-foreground font-mono text-xs tabular-nums\"> 14:32:08 PST </span>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <!-- Photo Metadata Breakdown -->\n            <div class=\"grid grid-cols-2 gap-2 text-xs sm:grid-cols-4\">\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <p class=\"text-muted-foreground\">Capture Time</p>\n                <p class=\"text-foreground mt-0.5 font-mono font-medium tabular-nums\">14:32:08 PST</p>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <p class=\"text-muted-foreground\">Camera Sensor</p>\n                <p class=\"text-foreground mt-0.5 font-mono font-medium\">13 MP AutoFocus</p>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <p class=\"text-muted-foreground\">Geofence Delta</p>\n                <p class=\"text-success text-success mt-0.5 font-mono font-medium tabular-nums\">0.8m radius</p>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <p class=\"text-muted-foreground\">Integrity Stamp</p>\n                <p class=\"text-foreground mt-0.5 font-mono font-medium\">SHA-256 Valid</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Customer Electronic Signature Card -->\n        <Card class=\"border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <Fingerprint class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Customer Electronic Signature</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1\">\n                <ShieldCheck class=\"size-3\" aria-hidden=\"true\" />\n                ID Verified\n              </Badge>\n            </div>\n            <CardDescription>\n              Legally binding digital acceptance recorded via courier handheld terminal\n            </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Digital Signature Lined Canvas Readout -->\n            <div class=\"border-border bg-muted/20 relative rounded-lg border border-dashed p-4 sm:p-6\">\n              <!-- Security Watermark Background -->\n              <div\n                class=\"pointer-events-none absolute inset-0 flex items-center justify-center opacity-[0.03] select-none dark:opacity-[0.06]\"\n              >\n                <span class=\"font-mono text-xl font-semibold tracking-widest uppercase sm:text-2xl\">\n                  VERIFIED DIGITAL SIGNATURE • EPOD-#98421094\n                </span>\n              </div>\n\n              <!-- Signature SVG Canvas -->\n              <div class=\"relative z-10 flex h-24 w-full items-center justify-center\">\n                <svg\n                  class=\"stroke-foreground h-full w-full max-w-md\"\n                  viewBox=\"0 0 460 110\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  aria-label=\"Handwritten signature of Elena Rostova\"\n                >\n                  <!-- Natural Cursive Handwritten Signature Path: Elena Rostova -->\n                  <path\n                    d=\"M 35,68 C 42,32 55,24 64,28 C 74,32 78,78 86,76 C 94,74 98,52 108,52 C 118,52 122,68 134,68 C 142,68 146,56 158,56 C 170,56 174,68 186,68 M 205,38 C 208,62 212,80 220,78 C 228,76 238,44 250,44 C 262,44 266,74 278,74 C 286,74 290,62 300,62 C 310,62 316,74 328,74 C 342,74 358,48 372,44 C 388,40 398,62 414,64 C 424,65 435,52 445,48\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"2.6\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <!-- Flourish Underline -->\n                  <path\n                    d=\"M 50,88 C 110,84 240,88 380,82 C 410,81 430,78 440,74\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.6\"\n                    stroke-linecap=\"round\"\n                    stroke-dasharray=\"4 2\"\n                    class=\"opacity-60\"\n                  />\n                </svg>\n              </div>\n\n              <!-- Signer Line Marker -->\n              <div\n                class=\"border-border text-muted-foreground mt-2 flex flex-wrap items-center justify-between border-t pt-2 text-xs\"\n              >\n                <span class=\"font-mono\">✕ Signer Baseline</span>\n                <span class=\"text-success font-mono\">● Digitally Encrypted</span>\n              </div>\n            </div>\n\n            <!-- Signer Audit Metadata -->\n            <div class=\"space-y-2 text-sm\">\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs\">Received By</span>\n                <span class=\"text-foreground text-xs font-semibold sm:text-sm\">Elena Rostova</span>\n              </div>\n              <Separator />\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs\">Signer Identity</span>\n                <span class=\"text-foreground text-xs font-medium\">Direct Consignee (Government ID Verified)</span>\n              </div>\n              <Separator />\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs\">Timestamp</span>\n                <span class=\"text-foreground font-mono text-xs tabular-nums\">Aug 21, 2026 at 14:32:08 PST</span>\n              </div>\n              <Separator />\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs\">Capture Method</span>\n                <span class=\"text-foreground font-mono text-xs\">Capacitive Stylus · Terminal #SCAN-842</span>\n              </div>\n              <Separator />\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs\">Cryptographic Seal</span>\n                <button\n                  type=\"button\"\n                  @click=\"copyHash\"\n                  class=\"hover:bg-muted focus-visible:ring-ring text-muted-foreground hover:text-foreground inline-flex min-h-6 items-center gap-1 rounded font-mono text-xs transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n                  title=\"Click to copy SHA-256 seal hash\"\n                >\n                  <span>SHA-256: 7f83b1...126d9069</span>\n                  <Check v-if=\"copiedHash\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                </button>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Delivery Address, Courier Metadata, & Package Manifest (lg:col-span-6) -->\n      <div class=\"space-y-6 lg:col-span-6\">\n        <!-- Delivery Address & Locker Card -->\n        <Card class=\"border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <MapPin class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Delivery Destination</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"text-xs\">Residential</Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-3.5 text-sm\">\n            <div class=\"space-y-1\">\n              <p class=\"text-foreground font-semibold\">Elena Rostova</p>\n              <p class=\"text-muted-foreground\">742 Evergreen Terrace, Apt 4B</p>\n              <p class=\"text-muted-foreground\">Springfield, OR 97477</p>\n              <p class=\"text-muted-foreground text-xs\">United States • +1 (555) 839-2041</p>\n            </div>\n\n            <!-- Delivery Instructions Callout -->\n            <div class=\"border-warning/30 bg-warning/10 flex items-start gap-3 rounded-lg border p-3 text-xs\">\n              <Key class=\"text-warning mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n              <div class=\"space-y-0.5\">\n                <p class=\"text-foreground text-warning font-medium\">Delivery Instruction Recorded:</p>\n                <p class=\"text-warning/90 text-warning/80\">\"Left inside package locker #4B\"</p>\n                <p class=\"text-muted-foreground pt-0.5 text-xs\">Electronic latch verified locked at 14:32 PST.</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Courier & Vehicle Metadata Card -->\n        <Card class=\"border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <Truck class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Courier & Vehicle Metadata</CardTitle>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"bg-primary/10 text-primary text-xs font-medium\">\n                FedEx Express Priority\n              </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Driver Profile Row -->\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-3\">\n                <Avatar class=\"border-border size-10 border\">\n                  <AvatarFallback class=\"bg-primary/10 text-primary text-xs font-semibold\"> DC </AvatarFallback>\n                </Avatar>\n                <div>\n                  <p class=\"text-foreground text-sm font-semibold\">David Chen</p>\n                  <p class=\"text-muted-foreground text-xs\">Van #204 · Ford Transit 350</p>\n                </div>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs\"> Rating: 4.99 ★ </Badge>\n            </div>\n\n            <Separator />\n\n            <!-- Dispatch & Terminal Grid -->\n            <div class=\"grid grid-cols-1 gap-3 text-xs sm:grid-cols-2\">\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground\">Carrier Service</span>\n                <p class=\"text-foreground font-medium\">FedEx Express Priority</p>\n              </div>\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground\">Handheld Terminal ID</span>\n                <p class=\"text-foreground font-mono font-medium\">#SCAN-842</p>\n              </div>\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground\">Dispatch Hub</span>\n                <p class=\"text-foreground font-medium\">Pacific NW Hub (PDX-04)</p>\n              </div>\n              <div class=\"space-y-1\">\n                <span class=\"text-muted-foreground\">Route & Sequence</span>\n                <p class=\"text-foreground font-mono font-medium\">RTE-NW-084 · Stop #42</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Package Manifest Table Card -->\n        <Card class=\"border shadow-xs\">\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <Package class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Package Manifest</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs\"> 2 Items · 1 Parcel </Badge>\n            </div>\n            <CardDescription> Itemized manifest details and physical cargo specifications </CardDescription>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <!-- Manifest Table -->\n            <div class=\"border-border overflow-hidden rounded-lg border\">\n              <div class=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader>\n                    <TableRow class=\"bg-muted/40\">\n                      <TableHead class=\"text-xs font-semibold\">Item Description</TableHead>\n                      <TableHead class=\"text-xs font-semibold\">SKU / Ref</TableHead>\n                      <TableHead class=\"text-right text-xs font-semibold\">Qty</TableHead>\n                      <TableHead class=\"text-right text-xs font-semibold\">Weight</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"text-foreground py-2.5 text-xs font-medium\">\n                        Pro Wireless Studio Headphones X9\n                      </TableCell>\n                      <TableCell class=\"text-muted-foreground py-2.5 font-mono text-xs\"> SKU-AUD-9821 </TableCell>\n                      <TableCell class=\"text-foreground py-2.5 text-right font-mono text-xs tabular-nums\">\n                        1\n                      </TableCell>\n                      <TableCell class=\"text-muted-foreground py-2.5 text-right font-mono text-xs tabular-nums\">\n                        5.6 lbs\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"text-foreground py-2.5 text-xs font-medium\">\n                        Braided Balanced XLR Cable (Pair, 3m)\n                      </TableCell>\n                      <TableCell class=\"text-muted-foreground py-2.5 font-mono text-xs\"> SKU-CBL-4482 </TableCell>\n                      <TableCell class=\"text-foreground py-2.5 text-right font-mono text-xs tabular-nums\">\n                        1\n                      </TableCell>\n                      <TableCell class=\"text-muted-foreground py-2.5 text-right font-mono text-xs tabular-nums\">\n                        2.8 lbs\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </div>\n            </div>\n\n            <!-- Physical Specs Summary Grid -->\n            <div class=\"grid grid-cols-2 gap-2 text-xs sm:grid-cols-4\">\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Total Weight</span>\n                <p class=\"text-foreground mt-0.5 font-mono font-semibold tabular-nums\">8.4 lbs (3.81 kg)</p>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Dimensions</span>\n                <p class=\"text-foreground mt-0.5 font-mono font-semibold tabular-nums\">14\" × 10\" × 6\"</p>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Handling</span>\n                <p class=\"text-foreground mt-0.5 font-medium\">Fragile Express</p>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Tamper Seal</span>\n                <p class=\"text-success mt-0.5 font-mono font-medium\">#SEAL-9842</p>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Security & Chain of Custody Audit Strip -->\n    <Card class=\"border-border bg-muted/20 border shadow-xs\">\n      <CardContent class=\"flex flex-col gap-3 p-4 text-xs sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"text-muted-foreground flex items-center gap-2\">\n          <ShieldCheck class=\"text-success size-4 shrink-0\" aria-hidden=\"true\" />\n          <span> Chain of Custody Verified · Cryptographically Timestamped & Geofence Locked </span>\n        </div>\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 font-mono\">\n          <span class=\"text-muted-foreground/80\">GPS Lock:</span>\n          <button\n            type=\"button\"\n            @click=\"copyGps\"\n            class=\"hover:bg-muted focus-visible:ring-ring bg-muted/60 text-foreground inline-flex min-h-6 items-center gap-1 rounded px-1.5 py-0.5 transition-colors focus-visible:ring-2 focus-visible:outline-hidden\"\n            title=\"Click to copy GPS coordinates\"\n          >\n            <span class=\"tabular-nums\">34.0522°N, 118.2437°W</span>\n            <Check v-if=\"copiedGps\" class=\"text-success size-3\" aria-hidden=\"true\" />\n            <Copy 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/DeliveryProofCard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Last-mile Electronic Proof of Delivery (ePOD) receipt featuring customer signature canvas readout, high-contrast drop-off photo with GPS geostamp HUD overlay, recipient & courier metadata, and itemized package manifest.",
  "categories": [
    "logistics",
    "app",
    "ecommerce"
  ]
}