{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "packing-slip-generator",
  "title": "Packing Slip Generator",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/packing-slip-generator/PackingSlipGenerator.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  AlertCircle,\n  ArrowRight,\n  Barcode as BarcodeIcon,\n  Box,\n  Building2,\n  Calendar,\n  Check,\n  CheckCheck,\n  CheckCircle2,\n  Clock,\n  Copy,\n  ExternalLink,\n  FileCheck,\n  FileDown,\n  Info,\n  MapPin,\n  Package,\n  PackageCheck,\n  Printer,\n  QrCode,\n  RotateCcw,\n  Scan,\n  ShieldCheck,\n  Tag,\n  Truck,\n  User,\n  Warehouse,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Checkbox } from '@/components/ui/checkbox'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface PackingSlipItem {\n  id: string\n  sku: string\n  barcode: string\n  name: string\n  variant: string\n  location: string\n  qtyOrdered: number\n  qtyPacked: number\n  weightLbs: number\n  notes?: string\n  initialPacked?: boolean\n}\n\nexport interface PackingSlipProps {\n  class?: HTMLAttributes['class']\n  packingSlipNo?: string\n  orderNo?: string\n  carrier?: string\n  carrierService?: string\n  trackingNo?: string\n  orderDate?: string\n  shipDate?: string\n  warehouseName?: string\n  warehouseFacility?: string\n  warehouseAddress?: string\n  warehousePhone?: string\n  warehouseEmail?: string\n  customerName?: string\n  customerCompany?: string\n  customerAddress?: string\n  customerPhone?: string\n  customerEmail?: string\n  deliveryNotes?: string\n  pickerName?: string\n  pickerId?: string\n  packStation?: string\n  shift?: string\n  boxSize?: string\n  dunnageType?: string\n  qcInspector?: string\n  qcStamp?: string\n  qcTimestamp?: string\n  items?: PackingSlipItem[]\n  showActions?: boolean\n  initialPackedAll?: boolean\n}\n\nconst defaultItems: PackingSlipItem[] = [\n  {\n    id: 'item-1',\n    sku: '#SKU-84920',\n    barcode: '849201928410',\n    name: 'Aero Minimalist Runner',\n    variant: 'Size 10.5 · Matte Black',\n    location: 'Aisle 04 · Rack B · Shelf 02',\n    qtyOrdered: 1,\n    qtyPacked: 1,\n    weightLbs: 1.8,\n    notes: 'Eco-Knit Upper / EVA Cushioning Sole',\n    initialPacked: true,\n  },\n  {\n    id: 'item-2',\n    sku: '#SKU-77219',\n    barcode: '772198421093',\n    name: 'HydroShield Waterproof Shell Jacket',\n    variant: \"Men's M · Alpine Green\",\n    location: 'Aisle 02 · Rack D · Shelf 01',\n    qtyOrdered: 1,\n    qtyPacked: 1,\n    weightLbs: 1.6,\n    notes: '3-Layer DWR Membrane / Sealed Seams',\n    initialPacked: true,\n  },\n  {\n    id: 'item-3',\n    sku: '#SKU-31904',\n    barcode: '319045812903',\n    name: 'Ergonomic Trail Crew Socks (3-Pack)',\n    variant: 'Charcoal / Grey · L',\n    location: 'Aisle 08 · Rack A · Shelf 04',\n    qtyOrdered: 1,\n    qtyPacked: 1,\n    weightLbs: 1.4,\n    notes: 'Merino Wool Blend / Seamless Toe',\n    initialPacked: false,\n  },\n]\n\nconst props = withDefaults(defineProps<PackingSlipProps>(), {\n  packingSlipNo: '#PS-849201',\n  orderNo: '#ORD-92841',\n  carrier: 'FedEx',\n  carrierService: 'FedEx 2-Day Air',\n  trackingNo: '7849 2018 9284 1029',\n  orderDate: 'Aug 21, 2026',\n  shipDate: 'Aug 21, 2026',\n  warehouseName: 'Apex Retail Warehouse #04',\n  warehouseFacility: 'West Coast Omnichannel Hub',\n  warehouseAddress: '1040 North Industry Pkwy, Reno, NV 89502',\n  warehousePhone: '+1 (800) 555-0199',\n  warehouseEmail: 'fulfillment-reno4@apexretail.io',\n  customerName: 'Eleanor Vance',\n  customerCompany: 'Vance Design Studios · Suite 400',\n  customerAddress: '742 Evergreen Terrace, Springfield, OR 97477',\n  customerPhone: '+1 (555) 839-2019',\n  customerEmail: 'eleanor.vance@vancestudios.design',\n  deliveryNotes: 'Gate Code: #4829. Leave at covered front porch if unavailable. Do not bend.',\n  pickerName: 'Marcus Vance',\n  pickerId: '#EMP-4821',\n  packStation: 'Pack Station #4',\n  shift: 'Morning Shift · Bay Alpha',\n  boxSize: 'Box #3 · 14\" × 10\" × 6\"',\n  dunnageType: 'Recycled Kraft Void Fill (1.2 oz)',\n  qcInspector: 'Elena Rostova (#QC-89)',\n  qcStamp: 'QC Passed · Station #4',\n  qcTimestamp: '2026-08-21 09:42 PST',\n  showActions: true,\n  initialPackedAll: false,\n})\n\n// Item packed state map\nconst packedState = ref<Record<string, boolean>>(\n  (() => {\n    const map: Record<string, boolean> = {}\n    const list = props.items ?? defaultItems\n    for (const item of list) {\n      map[item.id] = props.initialPackedAll ? true : (item.initialPacked ?? false)\n    }\n    return map\n  })(),\n)\n\nconst copiedTracking = ref(false)\nconst isPrinting = ref(false)\nconst isDownloading = ref(false)\n\nconst effectiveItems = computed(() => props.items ?? defaultItems)\n\nconst totalOrderedUnits = computed(() => {\n  return effectiveItems.value.reduce((sum, item) => sum + item.qtyOrdered, 0)\n})\n\nconst totalPackedUnits = computed(() => {\n  return effectiveItems.value.reduce((sum, item) => {\n    return sum + (packedState.value[item.id] ? item.qtyPacked : 0)\n  }, 0)\n})\n\nconst totalWeight = computed(() => {\n  return effectiveItems.value.reduce((sum, item) => sum + item.weightLbs, 0)\n})\n\nconst isAllPacked = computed(() => {\n  return effectiveItems.value.every((item) => packedState.value[item.id])\n})\n\nconst verifiedItemsCount = computed(() => {\n  return effectiveItems.value.filter((item) => packedState.value[item.id]).length\n})\n\nconst progressPercentage = computed(() => {\n  if (effectiveItems.value.length === 0) return 0\n  return Math.round((verifiedItemsCount.value / effectiveItems.value.length) * 100)\n})\n\nfunction toggleItemPacked(id: string) {\n  packedState.value[id] = !packedState.value[id]\n}\n\nfunction setItemPacked(id: string, value: boolean | 'indeterminate') {\n  packedState.value[id] = value === true\n}\n\nfunction markAllPacked() {\n  for (const item of effectiveItems.value) {\n    packedState.value[item.id] = true\n  }\n}\n\nfunction resetPackingChecklist() {\n  for (const item of effectiveItems.value) {\n    packedState.value[item.id] = false\n  }\n}\n\nasync function copyTrackingNumber() {\n  if (navigator?.clipboard) {\n    await navigator.clipboard.writeText(props.trackingNo)\n    copiedTracking.value = true\n    setTimeout(() => {\n      copiedTracking.value = false\n    }, 2000)\n  }\n}\n\nfunction handlePrint() {\n  isPrinting.value = true\n  if (typeof window !== 'undefined') {\n    window.print()\n  }\n  setTimeout(() => {\n    isPrinting.value = false\n  }, 1000)\n}\n\nfunction handleDownloadPdf() {\n  isDownloading.value = true\n  setTimeout(() => {\n    isDownloading.value = false\n  }, 1500)\n}\n</script>\n\n<template>\n  <div data-slot=\"packing-slip-generator\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Top Action & Fulfillment Toolbar (Screen Only) -->\n    <div\n      v-if=\"showActions\"\n      class=\"no-print border-border bg-card flex flex-col gap-4 rounded-xl border p-4 shadow-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <div class=\"flex items-center gap-2\">\n          <span class=\"text-foreground font-mono text-sm font-semibold tracking-tight\">{{ packingSlipNo }}</span>\n          <Badge variant=\"outline\" class=\"gap-1 font-mono text-xs\">\n            <Tag class=\"text-muted-foreground size-3\" aria-hidden=\"true\" />\n            {{ orderNo }}\n          </Badge>\n        </div>\n\n        <Separator orientation=\"vertical\" class=\"hidden h-4 sm:block\" />\n\n        <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n          <Truck class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n          <span class=\"text-foreground font-medium\">{{ carrierService }}</span>\n        </div>\n\n        <Badge :variant=\"isAllPacked ? 'default' : 'secondary'\" class=\"gap-1 text-xs font-medium\">\n          <component :is=\"isAllPacked ? CheckCircle2 : Clock\" class=\"size-3\" aria-hidden=\"true\" />\n          {{\n            isAllPacked\n              ? 'All Items Verified'\n              : `${verifiedItemsCount}/${effectiveItems.length} Packed (${progressPercentage}%)`\n          }}\n        </Badge>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"gap-1.5 text-xs font-medium\"\n          @click=\"isAllPacked ? resetPackingChecklist() : markAllPacked()\"\n        >\n          <component :is=\"isAllPacked ? RotateCcw : CheckCheck\" class=\"size-3.5\" aria-hidden=\"true\" />\n          {{ isAllPacked ? 'Reset Checklist' : 'Verify All' }}\n        </Button>\n\n        <Button\n          aria-label=\"Download attachment\"\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"gap-1.5 text-xs font-medium\"\n          :disabled=\"isDownloading\"\n          @click=\"handleDownloadPdf\"\n        >\n          <FileDown class=\"size-3.5\" aria-hidden=\"true\" />\n          {{ isDownloading ? 'Generating PDF...' : 'Download PDF' }}\n        </Button>\n\n        <Button type=\"button\" size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"handlePrint\">\n          <Printer class=\"size-3.5\" aria-hidden=\"true\" />\n          Print 4x6 Slip\n        </Button>\n      </div>\n    </div>\n\n    <!-- Printable Packing Slip Paper Container -->\n    <div\n      class=\"packing-slip-paper border-border bg-card mx-auto w-full max-w-4xl space-y-6 rounded-xl border p-6 shadow-md transition-shadow sm:p-8\"\n    >\n      <!-- Section 1: Warehouse & Slip Header -->\n      <div class=\"flex flex-col gap-6 sm:flex-row sm:items-start sm:justify-between\">\n        <div class=\"space-y-2\">\n          <div class=\"flex items-center gap-2.5\">\n            <div\n              class=\"bg-primary text-primary-foreground flex size-10 items-center justify-center rounded-lg shadow-xs\"\n            >\n              <Warehouse class=\"size-5\" aria-hidden=\"true\" />\n            </div>\n            <div>\n              <h2 class=\"text-foreground text-base font-semibold tracking-tight sm:text-lg\">\n                {{ warehouseName }}\n              </h2>\n              <p class=\"text-muted-foreground text-xs\">\n                {{ warehouseFacility }}\n              </p>\n            </div>\n          </div>\n          <div class=\"text-muted-foreground text-xs\">\n            <p>{{ warehouseAddress }}</p>\n            <p class=\"mt-0.5\">{{ warehousePhone }} · {{ warehouseEmail }}</p>\n          </div>\n        </div>\n\n        <!-- Slip Meta & Barcode Header -->\n        <div class=\"flex flex-col items-start gap-3 sm:items-end\">\n          <div\n            class=\"border-primary/20 bg-primary/5 text-primary inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-semibold\"\n          >\n            COMMERCIAL PACKING SLIP\n          </div>\n          <div class=\"space-y-1 text-left text-xs sm:text-right\">\n            <div class=\"flex items-center gap-2 sm:justify-end\">\n              <span class=\"text-muted-foreground\">Packing Slip Ref:</span>\n              <span class=\"text-foreground font-mono font-semibold\">{{ packingSlipNo }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 sm:justify-end\">\n              <span class=\"text-muted-foreground\">Order Reference:</span>\n              <span class=\"text-foreground font-mono font-semibold\">{{ orderNo }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 sm:justify-end\">\n              <span class=\"text-muted-foreground\">Order Date:</span>\n              <span class=\"text-foreground font-medium\">{{ orderDate }}</span>\n            </div>\n            <div class=\"flex items-center gap-2 sm:justify-end\">\n              <span class=\"text-muted-foreground\">Ship Date:</span>\n              <span class=\"text-foreground font-medium\">{{ shipDate }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <Separator />\n\n      <!-- Section 2: Routing Grid (Ship-To, Origin, Carrier) -->\n      <div class=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n        <!-- Ship-To Customer Details -->\n        <div class=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n          <div class=\"text-muted-foreground mb-2.5 flex items-center gap-2 text-xs font-medium\">\n            <User class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            Ship-To Recipient\n          </div>\n          <div class=\"space-y-1 text-xs\">\n            <p class=\"text-foreground text-sm font-semibold\">{{ customerName }}</p>\n            <p class=\"text-foreground/80 font-medium\">{{ customerCompany }}</p>\n            <p class=\"text-muted-foreground\">{{ customerAddress }}</p>\n            <p class=\"text-muted-foreground\">{{ customerPhone }}</p>\n            <div v-if=\"deliveryNotes\" class=\"border-warning/20 bg-warning/10 text-warning mt-2.5 rounded border p-2\">\n              <p class=\"text-xs font-semibold\">Delivery Note:</p>\n              <p class=\"text-xs\">{{ deliveryNotes }}</p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Ship-From Origin Hub -->\n        <div class=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n          <div class=\"text-muted-foreground mb-2.5 flex items-center gap-2 text-xs font-medium\">\n            <Building2 class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            Fulfillment Origin\n          </div>\n          <div class=\"space-y-1 text-xs\">\n            <p class=\"text-foreground text-sm font-semibold\">{{ warehouseName }}</p>\n            <p class=\"text-foreground/80 font-medium\">Outbound Logistics Dock #12</p>\n            <p class=\"text-muted-foreground\">{{ warehouseAddress }}</p>\n            <p class=\"text-muted-foreground\">Support: {{ warehousePhone }}</p>\n            <div class=\"text-muted-foreground mt-2.5 flex items-center gap-1.5 text-xs\">\n              <Zap class=\"text-success size-3\" aria-hidden=\"true\" />\n              <span>Direct EDI Dispatch Cleared</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Carrier & Logistics Routing -->\n        <div class=\"border-border/80 bg-muted/20 rounded-lg border p-4\">\n          <div class=\"text-muted-foreground mb-2.5 flex items-center gap-2 text-xs font-medium\">\n            <Truck class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            Carrier & Service\n          </div>\n          <div class=\"space-y-2 text-xs\">\n            <div>\n              <p class=\"text-foreground text-sm font-semibold\">{{ carrierService }}</p>\n              <p class=\"text-muted-foreground\">Standard Air Parcel · Guaranteed</p>\n            </div>\n            <div>\n              <span class=\"text-muted-foreground\">Tracking Number:</span>\n              <div class=\"mt-1 flex items-center gap-2\">\n                <span class=\"text-foreground font-mono text-xs font-semibold\">{{ trackingNo }}</span>\n                <button\n                  type=\"button\"\n                  class=\"no-print border-border hover:bg-muted focus-visible:ring-ring inline-flex size-6 items-center justify-center rounded border focus-visible:ring-2 focus-visible:outline-none\"\n                  title=\"Copy Tracking Number\"\n                  @click=\"copyTrackingNumber\"\n                >\n                  <component\n                    :is=\"copiedTracking ? Check : Copy\"\n                    class=\"text-muted-foreground size-3\"\n                    aria-hidden=\"true\"\n                  />\n                </button>\n              </div>\n            </div>\n            <div class=\"text-muted-foreground border-border/40 flex items-center justify-between border-t pt-1 text-xs\">\n              <span>Billing: Prepaid</span>\n              <span class=\"font-mono\">Declared: $349.00</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 3: Picker & Pack Station Barcode Verification Ribbon -->\n      <div\n        class=\"border-border bg-muted/40 flex flex-col gap-4 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"flex flex-wrap items-center gap-4\">\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n              <User class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n              Picker & Station\n            </div>\n            <p class=\"text-foreground text-sm font-semibold\">\n              {{ pickerName }} <span class=\"text-muted-foreground font-mono text-xs font-normal\">({{ pickerId }})</span>\n            </p>\n            <p class=\"text-muted-foreground text-xs\">{{ packStation }} · {{ shift }}</p>\n          </div>\n\n          <Separator orientation=\"vertical\" class=\"hidden h-10 md:block\" />\n\n          <div class=\"space-y-0.5\">\n            <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs font-medium\">\n              <Scan class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n              Packing Progress\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <div class=\"bg-muted border-border/50 h-2 w-28 overflow-hidden rounded-full border\">\n                <div\n                  class=\"bg-primary h-full transition-[width] duration-300\"\n                  :style=\"{ width: `${progressPercentage}%` }\"\n                />\n              </div>\n              <span class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">\n                {{ verifiedItemsCount }}/{{ effectiveItems.length }} Verified\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Authentic Code 128 Simulated Barcode Scan Tag -->\n        <div\n          class=\"border-border/60 bg-background/80 flex flex-col items-center justify-center rounded border px-3 py-2 text-center shadow-2xs sm:items-end\"\n        >\n          <div class=\"flex h-8 items-center gap-[2px]\" aria-label=\"Barcode\">\n            <span class=\"bg-foreground h-8 w-[3px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[2px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[4px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[1px]\" />\n            <span class=\"bg-foreground h-8 w-[3px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[5px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[2px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[4px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[3px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[5px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[2px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[3px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[4px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[5px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[3px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[4px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[2px]\" />\n            <span class=\"h-8 w-[2px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[5px]\" />\n            <span class=\"h-8 w-[1px] bg-transparent\" />\n            <span class=\"bg-foreground h-8 w-[3px]\" />\n          </div>\n          <p class=\"text-foreground font-mono text-xs font-semibold tracking-widest\">\n            *{{ orderNo.replace('#', '') }}*\n          </p>\n        </div>\n      </div>\n\n      <!-- Section 4: Itemized Pick List Table -->\n      <div class=\"space-y-2\">\n        <div class=\"flex items-center justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <h3 class=\"text-foreground text-sm font-semibold tracking-tight\">Itemized Pick & Pack Checklist</h3>\n            <Badge variant=\"outline\" class=\"font-mono text-xs\"> {{ effectiveItems.length }} Line Items </Badge>\n          </div>\n          <span class=\"text-muted-foreground text-xs\">Check items upon bin scan and physical carton packing</span>\n        </div>\n\n        <div class=\"border-border overflow-hidden rounded-lg border\">\n          <div class=\"overflow-x-auto\">\n            <Table>\n              <TableHeader class=\"bg-muted/40\">\n                <TableRow>\n                  <TableHead class=\"w-12 text-center\">Packed</TableHead>\n                  <TableHead class=\"w-48\">Bin / Location</TableHead>\n                  <TableHead class=\"w-36\">SKU & Barcode</TableHead>\n                  <TableHead>Item Name & Variant Details</TableHead>\n                  <TableHead class=\"w-28 text-center\">Qty Pick/Ord</TableHead>\n                  <TableHead class=\"w-24 text-right\">Weight</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow\n                  v-for=\"item in effectiveItems\"\n                  :key=\"item.id\"\n                  :class=\"\n                    cn(\n                      'cursor-pointer transition-colors select-none',\n                      packedState[item.id] ? 'bg-primary/[0.02] dark:bg-primary/[0.04]' : 'hover:bg-muted/20',\n                    )\n                  \"\n                  @click=\"toggleItemPacked(item.id)\"\n                >\n                  <!-- Interactive Packed Checkbox -->\n                  <TableCell class=\"text-center\" @click.stop>\n                    <div class=\"flex items-center justify-center\">\n                      <Checkbox\n                        :id=\"'chk-' + item.id\"\n                        :model-value=\"packedState[item.id]\"\n                        @update:model-value=\"(val) => setItemPacked(item.id, val)\"\n                      />\n                    </div>\n                  </TableCell>\n\n                  <!-- Warehouse Bin / Location Tag -->\n                  <TableCell>\n                    <div\n                      class=\"border-border bg-muted/60 text-foreground inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium\"\n                    >\n                      <MapPin class=\"text-primary size-3 shrink-0\" aria-hidden=\"true\" />\n                      <span>{{ item.location }}</span>\n                    </div>\n                  </TableCell>\n\n                  <!-- SKU & Barcode -->\n                  <TableCell>\n                    <div class=\"space-y-0.5\">\n                      <p class=\"text-foreground font-mono text-xs font-semibold\">\n                        {{ item.sku }}\n                      </p>\n                      <p class=\"text-muted-foreground font-mono text-xs\">UPC: {{ item.barcode }}</p>\n                    </div>\n                  </TableCell>\n\n                  <!-- Item Description & Variant Notes -->\n                  <TableCell>\n                    <div class=\"space-y-0.5\">\n                      <p\n                        :class=\"\n                          cn('text-foreground text-xs font-semibold', packedState[item.id] && 'text-foreground/90')\n                        \"\n                      >\n                        {{ item.name }}\n                      </p>\n                      <p class=\"text-muted-foreground text-xs\">\n                        {{ item.variant }}\n                      </p>\n                      <p v-if=\"item.notes\" class=\"text-muted-foreground/80 text-xs italic\">\n                        {{ item.notes }}\n                      </p>\n                    </div>\n                  </TableCell>\n\n                  <!-- Quantity Ordered vs Packed -->\n                  <TableCell class=\"text-center\">\n                    <div\n                      class=\"border-border/80 bg-background text-foreground inline-flex items-center gap-1 rounded border px-2 py-0.5 font-mono text-xs font-semibold shadow-2xs\"\n                    >\n                      <span :class=\"packedState[item.id] ? 'text-primary' : 'text-foreground'\">{{\n                        packedState[item.id] ? item.qtyPacked : 0\n                      }}</span>\n                      <span class=\"text-muted-foreground font-normal\">/</span>\n                      <span class=\"tabular-nums\">{{ item.qtyOrdered }}</span>\n                    </div>\n                  </TableCell>\n\n                  <!-- Item Unit Weight -->\n                  <TableCell class=\"text-right\">\n                    <span class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                      {{ item.weightLbs.toFixed(1) }} lbs\n                    </span>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n              <TableFooter class=\"bg-muted/50 font-medium\">\n                <TableRow>\n                  <TableCell colspan=\"4\" class=\"text-foreground text-left text-xs font-semibold\">\n                    Order Package Totals ({{ effectiveItems.length }} Distinct SKUs)\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-center font-mono text-xs font-semibold tabular-nums\">\n                    {{ totalPackedUnits }} / {{ totalOrderedUnits }} Units\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-right font-mono text-xs font-semibold tabular-nums\">\n                    {{ totalWeight.toFixed(1) }} lbs\n                  </TableCell>\n                </TableRow>\n              </TableFooter>\n            </Table>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 5: Package Summary & Quality Control Certification -->\n      <div class=\"grid grid-cols-1 gap-4 md:grid-cols-3\">\n        <!-- Package Carton Specs -->\n        <div class=\"border-border/80 bg-muted/20 space-y-2 rounded-lg border p-4\">\n          <div class=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\n            <Box class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            Carton Specifications\n          </div>\n          <div class=\"space-y-1.5 text-xs\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Packing Box:</span>\n              <span class=\"text-foreground font-medium\">{{ boxSize }}</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Total Units:</span>\n              <span class=\"text-foreground font-mono font-semibold\">{{ totalOrderedUnits }} items</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Gross Weight:</span>\n              <span class=\"text-foreground font-mono font-semibold\">{{ totalWeight.toFixed(1) }} lbs</span>\n            </div>\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground\">Void Fill / Dunnage:</span>\n              <span class=\"text-muted-foreground\">{{ dunnageType }}</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Customer Returns & Exchange Notice -->\n        <div class=\"border-border/80 bg-muted/20 space-y-2 rounded-lg border p-4\">\n          <div class=\"text-muted-foreground flex items-center gap-2 text-xs font-medium\">\n            <QrCode class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n            Hassle-Free Returns\n          </div>\n          <div class=\"text-muted-foreground space-y-1 text-xs\">\n            <p class=\"text-foreground font-medium\">Need to make an exchange or return?</p>\n            <p>\n              Scan the QR code or visit <span class=\"text-foreground font-mono\">apexretail.com/returns</span> within 30\n              days.\n            </p>\n            <p class=\"text-muted-foreground/90 pt-1 text-xs\">\n              Please include this packing slip with items in original condition.\n            </p>\n          </div>\n        </div>\n\n        <!-- Quality Control Stamp Container -->\n        <div class=\"border-border/80 bg-muted/20 flex flex-col items-center justify-center rounded-lg border p-4\">\n          <div\n            class=\"border-success/70 bg-success/10 border-success/70 bg-success/15 w-full rotate-[-1.5deg] rounded-lg border-2 border-dashed p-3 text-center transition-transform hover:rotate-0\"\n          >\n            <div class=\"text-success flex items-center justify-center gap-1.5\">\n              <ShieldCheck class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n              <span class=\"font-mono text-xs font-semibold tracking-widest uppercase\">\n                {{ qcStamp }}\n              </span>\n            </div>\n            <p class=\"text-success dark:text-foreground mt-1 font-mono text-xs font-semibold\">AUDITED & SEALED</p>\n            <p class=\"text-success/80 mt-0.5 text-xs\">Inspector: {{ qcInspector }}</p>\n            <p class=\"text-success/70 font-mono text-xs\">\n              {{ qcTimestamp }}\n            </p>\n          </div>\n        </div>\n      </div>\n\n      <!-- Section 6: Document Footer Note -->\n      <div\n        class=\"border-border text-muted-foreground flex flex-col items-center justify-between gap-2 border-t pt-4 text-xs sm:flex-row\"\n      >\n        <p>Generated by Apex Logistics WMS v4.8.2 · Station ID: {{ packStation }}</p>\n        <p class=\"font-mono\">DOC ID: PS-2026-849201-US-04 · Barcode Validated</p>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@media print {\n  body {\n    background: white !important;\n    color: black !important;\n  }\n  .no-print {\n    display: none !important;\n  }\n  .packing-slip-paper {\n    border: none !important;\n    box-shadow: none !important;\n    padding: 0 !important;\n    margin: 0 !important;\n    max-width: 100% !important;\n  }\n}\n</style>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PackingSlipGenerator.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",
    "https://uipkge.dev/r/vue/checkbox.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Shopify and ShipStation style warehouse order packing slip and picker verification checklist with warehouse header, customer ship-to routing, picker pack station barcode scan identifier, itemized pick list table with interactive packed checkboxes, bin location tags, SKU barcodes, weight calculations, and quality control inspector stamp.",
  "categories": [
    "logistics",
    "app",
    "ecommerce",
    "documents"
  ]
}