{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "shipment-tracking-timeline",
  "title": "Shipment Tracking Timeline",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/shipment-tracking-timeline/ShipmentTrackingTimeline.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Anchor,\n  ArrowRight,\n  Box,\n  CalendarClock,\n  Check,\n  Compass,\n  Copy,\n  Download,\n  FileCheck2,\n  FileText,\n  MapPin,\n  Navigation,\n  Radio,\n  Search,\n  Share2,\n  ShieldCheck,\n  Ship,\n  Thermometer,\n  Timer,\n} from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nexport type MilestoneStatus = 'completed' | 'current' | 'upcoming'\nexport type MilestoneFilter = 'all' | 'completed' | 'upcoming'\n\nexport interface Milestone {\n  id: string\n  stepNumber: number\n  title: string\n  location: string\n  facility: string\n  country: string\n  date: string\n  status: MilestoneStatus\n  description: string\n  coordinates?: string\n  telemetry?: {\n    speed?: string\n    heading?: string\n    depth?: string\n  }\n}\n\ninterface Props {\n  initialContainerId?: string\n  initialFilter?: MilestoneFilter\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialContainerId: 'MSKU-9482014',\n  initialFilter: 'all',\n})\n\nconst searchQuery = ref(props.initialContainerId)\nconst activeFilter = ref<MilestoneFilter>(props.initialFilter)\nconst copiedContainerId = ref(false)\nconst copiedBLLink = ref(false)\n\nconst milestones: Milestone[] = [\n  {\n    id: 'ms-1',\n    stepNumber: 1,\n    title: 'Cargo Loaded at Factory',\n    location: 'Ningbo Depot',\n    facility: 'Apex Logistics Hub South',\n    country: 'CN',\n    date: 'Aug 06, 2026 · 08:30 CST',\n    status: 'completed',\n    description: 'Container stuffed, Reefer unit pre-cooled to -18°C, bolt seal #SL-94021 applied.',\n  },\n  {\n    id: 'ms-2',\n    stepNumber: 2,\n    title: 'Export Customs Cleared',\n    location: 'Shanghai Port',\n    facility: 'Yangshan Customs Gate 4',\n    country: 'CN',\n    date: 'Aug 08, 2026 · 14:15 CST',\n    status: 'completed',\n    description: 'Export declaration approved. Customs electronic release note #CN-SH-992 issued.',\n  },\n  {\n    id: 'ms-3',\n    stepNumber: 3,\n    title: 'Vessel Departed Port',\n    location: 'Shanghai Port (CNSHA)',\n    facility: 'Yangshan Deepwater Terminal Berth 3',\n    country: 'CN',\n    date: 'Aug 10, 2026 · 22:00 CST',\n    status: 'completed',\n    description: 'Loaded onto vessel Ever Given (Voyage V.042W, Bay 42, Tier 04). Ocean transit started.',\n  },\n  {\n    id: 'ms-4',\n    stepNumber: 4,\n    title: 'Current Position · Sea Transit',\n    location: 'Red Sea International Waters',\n    facility: 'Maritime Convoy Corridor 2',\n    country: 'INT',\n    date: 'Aug 21, 2026 · 11:20 UTC (Live)',\n    status: 'current',\n    description: 'Cruising in transit towards Suez Canal. High-frequency AIS beacon reporting healthy telemetry.',\n    coordinates: \"24°18'N, 37°42'E\",\n    telemetry: {\n      speed: '18.4 knots',\n      heading: '315° NW',\n      depth: '840 m',\n    },\n  },\n  {\n    id: 'ms-5',\n    stepNumber: 5,\n    title: 'Suez Canal Transit',\n    location: 'Port Said / Suez (EGPSD)',\n    facility: 'Suez Canal Authority Convoy Hub',\n    country: 'EG',\n    date: 'Est. Aug 25, 2026 · 06:00 EEST',\n    status: 'upcoming',\n    description: 'Scheduled northbound convoy passage slot #04 with authorized maritime pilotage.',\n  },\n  {\n    id: 'ms-6',\n    stepNumber: 6,\n    title: 'Port of Discharge Arrival',\n    location: 'Rotterdam (NLRTM)',\n    facility: 'APM Terminals Maasvlakte II',\n    country: 'NL',\n    date: 'Est. Sep 04, 2026 · 14:00 CEST',\n    status: 'upcoming',\n    description: 'Vessel berthing & container unlashing operations. Import customs clearance processing.',\n  },\n  {\n    id: 'ms-7',\n    stepNumber: 7,\n    title: 'Final Destination Delivery',\n    location: 'Duisburg Distribution Center',\n    facility: 'EuroHub Logistics Terminal',\n    country: 'DE',\n    date: 'Est. Sep 07, 2026 · 09:00 CEST',\n    status: 'upcoming',\n    description: 'Intermodal electric rail transfer from Rotterdam to Duisburg bonded warehouse.',\n  },\n]\n\nconst filteredMilestones = computed(() => {\n  if (activeFilter.value === 'completed') {\n    return milestones.filter((m) => m.status === 'completed')\n  }\n  if (activeFilter.value === 'upcoming') {\n    return milestones.filter((m) => m.status === 'upcoming')\n  }\n  return milestones\n})\n\nfunction copyContainerId() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText('MSKU-9482014')\n    copiedContainerId.value = true\n    setTimeout(() => {\n      copiedContainerId.value = false\n    }, 2000)\n  }\n}\n\nfunction copyTrackingLink() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText('https://uipkge.dev/track/MSKU-9482014')\n    copiedBLLink.value = true\n    setTimeout(() => {\n      copiedBLLink.value = false\n    }, 2000)\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"shipment-tracking-timeline\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-4 sm:p-6\">\n        <div class=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Left: ID, Vessel & Route -->\n          <div class=\"space-y-3\">\n            <div class=\"flex flex-wrap items-center gap-2 sm:gap-3\">\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"text-foreground font-mono text-xl font-bold tracking-tight sm:text-2xl\">\n                  #MSKU-9482014\n                </span>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  class=\"text-muted-foreground hover:text-foreground size-7\"\n                  title=\"Copy Container ID\"\n                  @click=\"copyContainerId\"\n                >\n                  <Check v-if=\"copiedContainerId\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n                  <Copy v-else class=\"size-3.5\" aria-hidden=\"true\" />\n                  <span class=\"sr-only\">Copy container number</span>\n                </Button>\n              </div>\n\n              <Badge\n                wrap\n                variant=\"secondary\"\n                class=\"border-success/30 bg-success/10 text-success gap-1.5 px-2.5 py-0.5 text-xs font-medium\"\n              >\n                <span class=\"relative flex size-2 shrink-0\">\n                  <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span class=\"bg-success relative inline-flex size-2 rounded-full\" />\n                </span>\n                In Transit · On Schedule\n              </Badge>\n\n              <Badge wrap variant=\"outline\" class=\"border-border bg-muted/30 text-muted-foreground gap-1 text-xs\">\n                <Ship class=\"text-primary size-3\" aria-hidden=\"true\" />\n                Ocean Freight · FCL 40ft High Cube\n              </Badge>\n            </div>\n\n            <!-- Route and Vessel meta -->\n            <div class=\"flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n              <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n                <span class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">CNSHA</span>\n                <span>Shanghai</span>\n                <ArrowRight class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                <span class=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">NLRTM</span>\n                <span>Rotterdam</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n              <div class=\"text-muted-foreground flex items-center gap-1.5\">\n                <Ship class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                <span>Vessel:</span>\n                <span class=\"text-foreground font-semibold\">Ever Given / V.042W</span>\n                <span class=\"text-muted-foreground font-mono text-xs\">(IMO 9811000)</span>\n              </div>\n              <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n              <div class=\"text-muted-foreground flex items-center gap-1\">\n                <span>Carrier:</span>\n                <span class=\"text-foreground font-medium\">Maersk Line</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: Container search & Quick Actions -->\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n            <div class=\"relative w-full sm:w-64\">\n              <Search\n                class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n                aria-hidden=\"true\"\n              />\n              <Input\n                v-model=\"searchQuery\"\n                placeholder=\"Track Container / B/L...\"\n                class=\"h-9 pl-8 font-mono text-xs focus-visible:ring-2\"\n              />\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Button size=\"sm\" class=\"gap-1.5 shadow-xs\">\n                <Search class=\"size-3.5\" aria-hidden=\"true\" />\n                Track\n              </Button>\n              <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 shadow-xs\" @click=\"copyTrackingLink\">\n                <Share2 class=\"size-3.5\" aria-hidden=\"true\" />\n                <span class=\"hidden sm:inline\">{{ copiedBLLink ? 'Copied' : 'Share' }}</span>\n              </Button>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 4 Summary Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- ETA Card -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardContent class=\"p-4 sm:p-5\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Estimated Arrival (ETA)</p>\n              <p class=\"text-foreground font-mono text-base font-bold tabular-nums sm:text-lg\">Sep 04, 2026</p>\n              <p class=\"text-muted-foreground text-xs tabular-nums\">14:00 CEST · Berth 4A confirmed</p>\n            </div>\n            <div class=\"bg-primary/10 text-primary flex size-9 shrink-0 items-center justify-center rounded-lg\">\n              <CalendarClock class=\"size-4.5\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/60 bg-muted/40 mt-3.5 flex items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n          >\n            <span class=\"text-muted-foreground\">Remaining</span>\n            <span class=\"text-success font-medium\">14 days left</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Days in Transit Card -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardContent class=\"p-4 sm:p-5\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Days in Transit</p>\n              <p class=\"text-foreground font-mono text-base font-bold tabular-nums sm:text-lg\">\n                18 <span class=\"text-muted-foreground text-sm font-normal\">of 28 days</span>\n              </p>\n              <p class=\"text-muted-foreground text-xs tabular-nums\">64% of voyage completed</p>\n            </div>\n            <div class=\"bg-success/10 text-success flex size-9 shrink-0 items-center justify-center rounded-lg\">\n              <Timer class=\"size-4.5\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-3.5 space-y-1.5\">\n            <div class=\"bg-muted h-1.5 w-full overflow-hidden rounded-full\">\n              <div class=\"bg-success h-full rounded-full transition-[width]\" style=\"width: 64%\" />\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Departed: Aug 10</span>\n              <span>ETA: Sep 04</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Current Coordinates Card -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardContent class=\"p-4 sm:p-5\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Current Vessel Position</p>\n              <p class=\"text-foreground font-mono text-base font-bold tabular-nums sm:text-lg\">24°18'N, 37°42'E</p>\n              <p class=\"text-muted-foreground text-xs\">\n                Red Sea · Speed <span class=\"text-foreground font-mono font-medium\">18.4 kn</span>\n              </p>\n            </div>\n            <div class=\"bg-info/10 text-info flex size-9 shrink-0 items-center justify-center rounded-lg\">\n              <Compass class=\"size-4.5\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/60 bg-muted/40 mt-3.5 flex items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n          >\n            <span class=\"text-muted-foreground\">Heading</span>\n            <span class=\"text-foreground font-mono font-medium\">315° NW (Convoy)</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Next Milestone Port Card -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardContent class=\"p-4 sm:p-5\">\n          <div class=\"flex items-start justify-between\">\n            <div class=\"space-y-1\">\n              <p class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">Next Milestone Port</p>\n              <p class=\"text-foreground font-mono text-base font-bold sm:text-lg\">Suez Canal</p>\n              <p class=\"text-muted-foreground text-xs tabular-nums\">Aug 25 · Northbound Convoy</p>\n            </div>\n            <div class=\"bg-warning/10 text-warning flex size-9 shrink-0 items-center justify-center rounded-lg\">\n              <Anchor class=\"size-4.5\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div\n            class=\"border-border/60 bg-muted/40 mt-3.5 flex items-center justify-between rounded-md border px-2.5 py-1.5 text-xs\"\n          >\n            <span class=\"text-muted-foreground\">Pilotage Slot</span>\n            <span class=\"text-foreground font-mono font-medium\">Slot #04 (06:00 EEST)</span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Multimodal Journey Milestones Stepper Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"flex flex-col gap-3 pb-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"space-y-1\">\n          <div class=\"flex items-center gap-2\">\n            <Navigation class=\"text-primary size-4.5\" aria-hidden=\"true\" />\n            <CardTitle class=\"text-base font-semibold\">Multimodal Journey Milestones</CardTitle>\n            <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">7 Milestones</Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            End-to-end container tracking from factory loading in Ningbo to warehouse in Duisburg.\n          </CardDescription>\n        </div>\n\n        <!-- Filter Buttons -->\n        <div class=\"border-border bg-muted/40 flex items-center gap-1 rounded-lg border p-0.5 text-xs\">\n          <button\n            type=\"button\"\n            class=\"rounded-md px-2.5 py-1 font-medium transition-colors\"\n            :class=\"\n              activeFilter === 'all'\n                ? 'bg-background text-foreground font-semibold shadow-xs'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"activeFilter = 'all'\"\n          >\n            All (7)\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-md px-2.5 py-1 font-medium transition-colors\"\n            :class=\"\n              activeFilter === 'completed'\n                ? 'bg-background text-foreground font-semibold shadow-xs'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"activeFilter = 'completed'\"\n          >\n            Completed (3)\n          </button>\n          <button\n            type=\"button\"\n            class=\"rounded-md px-2.5 py-1 font-medium transition-colors\"\n            :class=\"\n              activeFilter === 'upcoming'\n                ? 'bg-background text-foreground font-semibold shadow-xs'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"activeFilter = 'upcoming'\"\n          >\n            Upcoming (3)\n          </button>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-6 pt-2\">\n        <!-- Live AIS Telemetry Beacon Banner -->\n        <div class=\"border-primary/30 bg-primary/5 relative overflow-hidden rounded-xl border p-4\">\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex items-center gap-3\">\n              <div class=\"bg-primary/10 text-primary relative flex size-10 items-center justify-center rounded-lg\">\n                <Radio class=\"size-5\" aria-hidden=\"true\" />\n                <span class=\"absolute -top-1 -right-1 flex size-3\">\n                  <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span class=\"bg-success relative inline-flex size-3 rounded-full\" />\n                </span>\n              </div>\n              <div>\n                <div class=\"flex items-center gap-2\">\n                  <h4 class=\"text-foreground text-sm font-semibold\">Active AIS Sea Telemetry</h4>\n                  <Badge wrap variant=\"secondary\" class=\"bg-success/10 text-success text-xs\"> Live Transponder </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">\n                  Vessel Ever Given navigating Red Sea corridor · Last ping:\n                  <span class=\"text-foreground font-mono font-medium\">12s ago</span>\n                </p>\n              </div>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-3 font-mono text-xs\">\n              <div class=\"border-border/80 bg-background/80 rounded-md border px-2.5 py-1.5\">\n                <span class=\"text-muted-foreground\">Speed: </span>\n                <span class=\"text-foreground font-semibold tabular-nums\">18.4 knots</span>\n              </div>\n              <div class=\"border-border/80 bg-background/80 rounded-md border px-2.5 py-1.5\">\n                <span class=\"text-muted-foreground\">Heading: </span>\n                <span class=\"text-foreground font-semibold\">315° NW</span>\n              </div>\n              <div class=\"border-border/80 bg-background/80 rounded-md border px-2.5 py-1.5\">\n                <span class=\"text-muted-foreground\">Coords: </span>\n                <span class=\"text-foreground font-semibold tabular-nums\">24°18'N, 37°42'E</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Connected Timeline Stepper -->\n        <div class=\"relative pl-6 sm:pl-8\">\n          <!-- Vertical Track Line -->\n          <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 -translate-x-1/2 sm:left-4\" />\n\n          <div class=\"space-y-6\">\n            <div v-for=\"milestone in filteredMilestones\" :key=\"milestone.id\" class=\"group relative flex flex-col gap-2\">\n              <!-- Step Node Circle -->\n              <div class=\"absolute -left-6 flex items-center justify-center sm:-left-8\">\n                <!-- Completed Icon -->\n                <div\n                  v-if=\"milestone.status === 'completed'\"\n                  class=\"ring-background bg-success bg-success flex size-6 items-center justify-center rounded-full text-white shadow-2xs ring-4 sm:size-8 dark:text-zinc-950\"\n                >\n                  <Check class=\"size-3.5 stroke-[2.5] sm:size-4\" aria-hidden=\"true\" />\n                </div>\n\n                <!-- Current Active Pulsing Node -->\n                <div\n                  v-else-if=\"milestone.status === 'current'\"\n                  class=\"border-primary bg-background text-primary ring-background relative flex size-6 items-center justify-center rounded-full border-2 shadow-xs ring-4 sm:size-8\"\n                >\n                  <span class=\"relative flex size-2.5 sm:size-3\">\n                    <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                    <span class=\"bg-primary relative inline-flex size-2.5 rounded-full sm:size-3\" />\n                  </span>\n                </div>\n\n                <!-- Upcoming Node -->\n                <div\n                  v-else\n                  class=\"border-border bg-muted/60 text-muted-foreground ring-background flex size-6 items-center justify-center rounded-full border ring-4 sm:size-8\"\n                >\n                  <span class=\"font-mono text-xs font-medium\">{{ milestone.stepNumber }}</span>\n                </div>\n              </div>\n\n              <!-- Milestone Content Card -->\n              <div\n                class=\"rounded-xl border p-4 transition-colors\"\n                :class=\"\n                  milestone.status === 'current'\n                    ? 'border-primary/50 bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                    : milestone.status === 'completed'\n                      ? 'border-border/80 bg-card/60 hover:bg-muted/30'\n                      : 'border-border/60 bg-muted/20 opacity-80 hover:opacity-100'\n                \"\n              >\n                <div class=\"flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between\">\n                  <div class=\"space-y-1\">\n                    <div class=\"flex flex-wrap items-center gap-2\">\n                      <span class=\"text-foreground text-sm font-semibold\">\n                        {{ milestone.title }}\n                      </span>\n\n                      <Badge\n                        v-if=\"milestone.status === 'completed'\"\n                        variant=\"secondary\"\n                        class=\"bg-success/10 text-success text-xs font-medium whitespace-normal\"\n                      >\n                        Completed\n                      </Badge>\n                      <Badge\n                        v-else-if=\"milestone.status === 'current'\"\n                        class=\"bg-primary text-primary-foreground text-xs font-medium whitespace-normal\"\n                      >\n                        Active Now\n                      </Badge>\n                      <Badge wrap v-else variant=\"outline\" class=\"border-border text-muted-foreground text-xs\">\n                        Upcoming\n                      </Badge>\n\n                      <span class=\"text-muted-foreground font-mono text-xs\"> ({{ milestone.facility }}) </span>\n                    </div>\n\n                    <p class=\"text-muted-foreground text-xs\">\n                      {{ milestone.description }}\n                    </p>\n                  </div>\n\n                  <div class=\"shrink-0 text-left sm:text-right\">\n                    <span class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                      {{ milestone.date }}\n                    </span>\n                    <div class=\"text-muted-foreground mt-0.5 flex items-center gap-1 text-xs sm:justify-end\">\n                      <MapPin class=\"size-3\" aria-hidden=\"true\" />\n                      <span>{{ milestone.location }}</span>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Telemetry sub-box for current milestone -->\n                <div\n                  v-if=\"milestone.telemetry\"\n                  class=\"border-primary/20 bg-background/90 mt-3 grid grid-cols-2 gap-2 rounded-lg border p-2.5 font-mono text-xs sm:grid-cols-4\"\n                >\n                  <div>\n                    <span class=\"text-muted-foreground\">Speed: </span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ milestone.telemetry.speed }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground\">Heading: </span>\n                    <span class=\"text-foreground font-semibold\">{{ milestone.telemetry.heading }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground\">Water Depth: </span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ milestone.telemetry.depth }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground\">AIS Status: </span>\n                    <span class=\"text-success font-semibold\">Broadcasting</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 2-Column Grid: Specifications & Documentation Manifest -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n      <!-- Container Specifications & Cold Chain Card -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <Box class=\"text-primary size-4.5\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Container & Cold Chain Specifications</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">ISO 6346 Verified</Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Physical parameters, high-security seal integrity, and live Reefer temperature control log.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-5\">\n            <!-- Key Metric Chips -->\n            <div class=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <span class=\"text-muted-foreground text-xs\">Gross Weight</span>\n                <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">24,500 kg</p>\n                <span class=\"text-muted-foreground text-xs\">Max: 30,480 kg</span>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <span class=\"text-muted-foreground text-xs\">Bolt Seal #</span>\n                <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold\">SL-94021</p>\n                <span class=\"text-success text-xs\">ISO 17712 High Sec</span>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <span class=\"text-muted-foreground text-xs\">Temperature</span>\n                <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">-18.0°C</p>\n                <span class=\"text-success text-xs\">Actual: -18.2°C</span>\n              </div>\n              <div class=\"border-border bg-muted/30 rounded-lg border p-3\">\n                <span class=\"text-muted-foreground text-xs\">Humidity & Vent</span>\n                <p class=\"text-foreground mt-0.5 font-mono text-sm font-bold tabular-nums\">85% RH</p>\n                <span class=\"text-muted-foreground text-xs\">Vent: Closed (0 cbm)</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Detailed Specifications Table / List -->\n            <div class=\"grid grid-cols-1 gap-4 text-xs sm:grid-cols-2\">\n              <div class=\"space-y-2.5\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Equipment Size:</span>\n                  <span class=\"text-foreground font-medium\">40ft High Cube Reefer (40HR)</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Tare Weight:</span>\n                  <span class=\"text-foreground font-mono font-medium tabular-nums\">3,300 kg</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Net Cargo Weight:</span>\n                  <span class=\"text-foreground font-mono font-medium tabular-nums\">21,200 kg</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Cargo Volume:</span>\n                  <span class=\"text-foreground font-mono font-medium tabular-nums\">67.3 CBM</span>\n                </div>\n              </div>\n\n              <div class=\"space-y-2.5\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Reefer Unit:</span>\n                  <span class=\"text-foreground font-medium\">Carrier Transicold PrimeLINE</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Power Source:</span>\n                  <span class=\"text-foreground font-medium\">Vessel 440V 3-Phase Plug</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Defrost Cycle:</span>\n                  <span class=\"text-foreground font-mono font-medium\">Auto-Defrost (Every 12h)</span>\n                </div>\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-muted-foreground\">Cold-Chain Compliance:</span>\n                  <span class=\"text-success font-semibold\">HACCP / GDP Certified</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Cold Chain Live Sensor Gauge Banner -->\n            <div\n              class=\"border-border/80 bg-muted/40 flex flex-col gap-3 rounded-lg border p-3 text-xs sm:flex-row sm:items-center sm:justify-between\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <Thermometer class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <span class=\"text-foreground font-medium\">Continuous Temperature Telemetry:</span>\n                <span class=\"text-muted-foreground font-mono\">24-hour variance ±0.3°C (Nominal)</span>\n              </div>\n              <div class=\"text-success flex items-center gap-1.5 font-medium\">\n                <ShieldCheck class=\"size-3.5\" aria-hidden=\"true\" />\n                <span>Zero Excursions</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Commercial Documents & Shipping Manifest Card -->\n      <div class=\"space-y-6 lg:col-span-5\">\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2\">\n                <FileText class=\"text-primary size-4.5\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Shipping Documentation</CardTitle>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"text-xs\">Customs Released</Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Bill of Lading, invoice identifiers, and trade compliance references.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <div class=\"space-y-2.5 text-xs\">\n              <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Commercial Invoice #:</span>\n                <span class=\"text-foreground font-mono font-bold\">CI-2026-849</span>\n              </div>\n              <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Master Bill of Lading (MBL):</span>\n                <span class=\"text-foreground font-mono font-bold\">MAEU-98421094</span>\n              </div>\n              <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Booking Reference:</span>\n                <span class=\"text-foreground font-mono font-medium\">BKG-7712093</span>\n              </div>\n              <div class=\"border-border/60 bg-muted/30 flex items-center justify-between rounded-lg border p-2.5\">\n                <span class=\"text-muted-foreground\">Incoterms 2020:</span>\n                <span class=\"text-foreground font-medium\">FOB Shanghai Port</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Parties: Shipper and Consignee -->\n            <div class=\"space-y-3 text-xs\">\n              <div>\n                <p class=\"text-muted-foreground font-medium\">Shipper / Exporter</p>\n                <p class=\"text-foreground font-semibold\">Ningbo Apex International Marine Trade Co.</p>\n                <p class=\"text-muted-foreground\">Beilun District, Ningbo, Zhejiang, China</p>\n              </div>\n              <div>\n                <p class=\"text-muted-foreground font-medium\">Consignee / Importer</p>\n                <p class=\"text-foreground font-semibold\">EuroHub Logistics & Cold Storage GmbH</p>\n                <p class=\"text-muted-foreground\">Logport I, 47226 Duisburg, Germany</p>\n              </div>\n            </div>\n\n            <div class=\"flex flex-col items-center gap-2 pt-2 sm:flex-row\">\n              <Button\n                aria-label=\"Download attachment\"\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"min-w-0 justify-center gap-2 text-xs shadow-xs sm:flex-1\"\n              >\n                <Download class=\"size-3.5\" aria-hidden=\"true\" />\n                Download Bill of Lading\n              </Button>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                class=\"text-muted-foreground hover:text-foreground min-w-0 justify-center gap-2 text-xs sm:flex-1\"\n              >\n                <FileCheck2 class=\"size-3.5\" aria-hidden=\"true\" />\n                Customs Pack (PDF)\n              </Button>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ShipmentTrackingTimeline.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/input.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Flexport & Maersk style container freight tracking timeline with live AIS vessel telemetry, voyage ETA milestones, Reefer cold-chain specifications, and multimodal transport logistics.",
  "categories": [
    "logistics",
    "dashboard",
    "app"
  ]
}