{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cold-chain-temp-monitor",
  "title": "Cold Chain Temp Monitor",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cold-chain-temp-monitor/ColdChainTempMonitor.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed, type HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  Battery,\n  Bell,\n  Bluetooth,\n  CheckCircle2,\n  Download,\n  Droplets,\n  Flame,\n  PhoneCall,\n  ShieldAlert,\n  ShieldCheck,\n  Snowflake,\n  ThermometerSnowflake,\n  ThermometerSun,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface LogEntry {\n  id: string\n  timestamp: string\n  timeAgo: string\n  internalTemp: number\n  ambientTemp: number\n  deltaT: number\n  probeLocation: string\n  probeId: string\n  humidity: number\n  status: 'optimal' | 'in-spec' | 'warning' | 'breach'\n  isLatest?: boolean\n}\n\nexport interface ChartReading {\n  time: string\n  hourLabel: string\n  internalTemp: number\n  ambientTemp: number\n  milestone: string\n}\n\nexport interface ColdChainTempMonitorProps {\n  shipmentId?: string\n  shipmentTitle?: string\n  tempClass?: string\n  beaconId?: string\n  protocolVersion?: string\n  batteryPercent?: number\n  batteryDays?: number\n  currentInternalTemp?: number\n  currentAmbientTemp?: number\n  currentHumidity?: number\n  totalExcursions?: number\n  monitoringHours?: number\n  logs?: LogEntry[]\n  chartData?: ChartReading[]\n  class?: HTMLAttributes['class']\n}\n\nconst defaultChartData: ChartReading[] = [\n  { time: '00:00', hourLabel: '00:00 UTC', internalTemp: -19.8, ambientTemp: 18.2, milestone: 'FRA Departure Tarmac' },\n  { time: '03:00', hourLabel: '03:00 UTC', internalTemp: -20.4, ambientTemp: -4.5, milestone: 'Flight EK046 Climb' },\n  {\n    time: '06:00',\n    hourLabel: '06:00 UTC',\n    internalTemp: -20.8,\n    ambientTemp: -6.2,\n    milestone: 'Cruise Flight Level 380',\n  },\n  {\n    time: '09:00',\n    hourLabel: '09:00 UTC',\n    internalTemp: -20.1,\n    ambientTemp: 12.4,\n    milestone: 'DXB Descent & Approach',\n  },\n  {\n    time: '12:00',\n    hourLabel: '12:00 UTC',\n    internalTemp: -19.2,\n    ambientTemp: 38.6,\n    milestone: 'DXB Ramp Tarmac Transfer',\n  },\n  {\n    time: '15:00',\n    hourLabel: '15:00 UTC',\n    internalTemp: -19.6,\n    ambientTemp: 32.0,\n    milestone: 'Perishable Hub Staging',\n  },\n  { time: '18:00', hourLabel: '18:00 UTC', internalTemp: -19.8, ambientTemp: 26.5, milestone: 'Active Reefer Bay #4' },\n  {\n    time: '21:00',\n    hourLabel: '21:00 UTC',\n    internalTemp: -19.5,\n    ambientTemp: 25.0,\n    milestone: 'Pre-Connection QA Inspection',\n  },\n  { time: '24:00', hourLabel: '14:30 UTC', internalTemp: -19.4, ambientTemp: 24.8, milestone: 'Dubai Hub Terminal 2' },\n]\n\nconst defaultLogs: LogEntry[] = [\n  {\n    id: 'log-1',\n    timestamp: 'Aug 21, 14:30 UTC',\n    timeAgo: '24s ago',\n    internalTemp: -19.4,\n    ambientTemp: 24.8,\n    deltaT: 44.2,\n    probeLocation: 'Pallet Center Core',\n    probeId: 'Probe #A1',\n    humidity: 18,\n    status: 'optimal',\n    isLatest: true,\n  },\n  {\n    id: 'log-2',\n    timestamp: 'Aug 21, 14:00 UTC',\n    timeAgo: '30m ago',\n    internalTemp: -19.5,\n    ambientTemp: 25.2,\n    deltaT: 44.7,\n    probeLocation: 'Upper Cargo Lid',\n    probeId: 'Probe #B2',\n    humidity: 18,\n    status: 'optimal',\n  },\n  {\n    id: 'log-3',\n    timestamp: 'Aug 21, 13:30 UTC',\n    timeAgo: '1h ago',\n    internalTemp: -19.2,\n    ambientTemp: 28.4,\n    deltaT: 47.6,\n    probeLocation: 'Lower Ventral Core',\n    probeId: 'Probe #C1',\n    humidity: 19,\n    status: 'in-spec',\n  },\n  {\n    id: 'log-4',\n    timestamp: 'Aug 21, 13:00 UTC',\n    timeAgo: '1.5h ago',\n    internalTemp: -19.8,\n    ambientTemp: 36.1,\n    deltaT: 55.9,\n    probeLocation: 'Pallet Center Core',\n    probeId: 'Probe #A1',\n    humidity: 20,\n    status: 'optimal',\n  },\n  {\n    id: 'log-5',\n    timestamp: 'Aug 21, 12:30 UTC',\n    timeAgo: '2h ago',\n    internalTemp: -20.1,\n    ambientTemp: 38.6,\n    deltaT: 58.7,\n    probeLocation: 'Outer Thermal Jacket',\n    probeId: 'Probe #D4',\n    humidity: 19,\n    status: 'optimal',\n  },\n]\n\nconst props = withDefaults(defineProps<ColdChainTempMonitorProps>(), {\n  shipmentId: '#CC-9482',\n  shipmentTitle: 'Vaccine Cold-Chain Consignment #CC-9482',\n  tempClass: 'Ultra-Cold Frozen · Target: -20°C ± 2°C',\n  beaconId: 'SensorTag #BT-4892 · BLE 5.3',\n  protocolVersion: 'IATA CEIV / WHO-PQS Standard',\n  batteryPercent: 94,\n  batteryDays: 180,\n  currentInternalTemp: -19.4,\n  currentAmbientTemp: 24.8,\n  currentHumidity: 18,\n  totalExcursions: 0,\n  monitoringHours: 96,\n})\n\nconst activeLogs = computed(() => props.logs ?? defaultLogs)\nconst activeChartData = computed(() => props.chartData ?? defaultChartData)\n\nconst isExporting = ref(false)\nconst exportNotification = ref(false)\nconst activeTimeframe = ref<'24h' | '48h' | '96h'>('24h')\nconst selectedReadingIndex = ref<number | null>(null)\nconst dryIceEnduranceHours = ref(72)\nconst dryIceCapacityPercent = ref(78)\n\nfunction handleExportCSV() {\n  isExporting.value = true\n  setTimeout(() => {\n    isExporting.value = false\n    exportNotification.value = true\n    setTimeout(() => {\n      exportNotification.value = false\n    }, 4500)\n  }, 500)\n}\n\n// Coordinate mapping for SVG telemetry chart\n// Internal Temp scale: -24°C (Y: 200) to -16°C (Y: 20)\n// Setpoint -20°C -> Y: 110\n// Upper threshold -18°C -> Y: 65\n// Lower threshold -22°C -> Y: 155\nconst chartPoints = computed(() => {\n  const data = activeChartData.value\n  const svgWidth = 740\n  const svgHeight = 220\n  const paddingX = 40\n\n  const usableWidth = svgWidth - paddingX * 2\n\n  return data.map((d, i) => {\n    const x = paddingX + (i / (data.length - 1)) * usableWidth\n    // Map -24°C..-16°C to 195..25\n    // formula: y = 110 - (temp - (-20)) * 22.5\n    const yInternal = 110 - (d.internalTemp - -20) * 22.5\n    // Map ambient -10°C..+45°C to 200..30\n    const yAmbient = 180 - ((d.ambientTemp - -10) / 55) * 150\n\n    return {\n      x,\n      yInternal,\n      yAmbient,\n      ...d,\n    }\n  })\n})\n\nconst internalPath = computed(() => {\n  const pts = chartPoints.value\n  if (!pts.length) return ''\n  let path = `M ${pts[0].x},${pts[0].yInternal}`\n  for (let i = 1; i < pts.length; i++) {\n    const prev = pts[i - 1]\n    const curr = pts[i]\n    const cx = (prev.x + curr.x) / 2\n    path += ` C ${cx},${prev.yInternal} ${cx},${curr.yInternal} ${curr.x},${curr.yInternal}`\n  }\n  return path\n})\n\nconst internalArea = computed(() => {\n  const pts = chartPoints.value\n  if (!pts.length) return ''\n  const firstX = pts[0].x\n  const lastX = pts[pts.length - 1].x\n  return `${internalPath.value} L ${lastX},210 L ${firstX},210 Z`\n})\n\nconst ambientPath = computed(() => {\n  const pts = chartPoints.value\n  if (!pts.length) return ''\n  let path = `M ${pts[0].x},${pts[0].yAmbient}`\n  for (let i = 1; i < pts.length; i++) {\n    const prev = pts[i - 1]\n    const curr = pts[i]\n    const cx = (prev.x + curr.x) / 2\n    path += ` C ${cx},${prev.yAmbient} ${cx},${curr.yAmbient} ${curr.x},${curr.yAmbient}`\n  }\n  return path\n})\n</script>\n\n<template>\n  <div data-slot=\"cold-chain-temp-monitor\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div class=\"flex items-center gap-2\">\n            <div\n              class=\"border-info/30 bg-info/10 text-info text-info flex size-9 items-center justify-center rounded-lg border shadow-xs\"\n            >\n              <Snowflake class=\"size-5\" />\n            </div>\n            <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n              {{ shipmentTitle }}\n            </h1>\n          </div>\n          <!-- Temperature Class Badge in Sky Blue -->\n          <Badge wrap variant=\"outline\" class=\"border-info/30 bg-info/10 text-info gap-1.5 text-xs font-medium\">\n            <span class=\"bg-info size-1.5 rounded-full\" />\n            <span>{{ tempClass }}</span>\n          </Badge>\n        </div>\n\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 text-xs\">\n          <div class=\"flex items-center gap-1.5\">\n            <Bluetooth class=\"text-primary size-3.5\" />\n            <span class=\"text-foreground font-medium\">{{ beaconId }}</span>\n          </div>\n          <span>·</span>\n          <div class=\"flex items-center gap-1.5\">\n            <Battery class=\"text-success size-3.5\" />\n            <span class=\"text-foreground font-medium tabular-nums\">{{ batteryPercent }}%</span>\n            <span>({{ batteryDays }} days remaining)</span>\n          </div>\n          <span>·</span>\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"relative flex size-2\">\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            <span class=\"text-foreground font-medium\">Live Telemetry</span>\n            <span>· DXB Terminal 2 Transit</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Action Button -->\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <Button\n          aria-label=\"Download attachment\"\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"gap-2 text-xs font-medium shadow-xs\"\n          :disabled=\"isExporting\"\n          @click=\"handleExportCSV\"\n        >\n          <Download :class=\"['size-3.5', isExporting ? 'animate-bounce' : '']\" />\n          <span>{{ isExporting ? 'Exporting...' : 'Export Audit Log CSV' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Export Success Banner -->\n    <div\n      v-if=\"exportNotification\"\n      class=\"border-border bg-card text-card-foreground flex items-center justify-between gap-x-2 rounded-lg border p-3 text-xs shadow-xs\"\n      role=\"status\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n        <span class=\"text-foreground font-medium\">\n          Cold-chain telemetry audit log exported successfully with cryptographic SHA-256 chain-of-custody seal.\n        </span>\n      </div>\n      <Button\n        aria-label=\"Dismiss notification\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"text-muted-foreground hover:text-foreground size-6\"\n        @click=\"exportNotification = false\"\n      >\n        <span class=\"text-xs\">✕</span>\n      </Button>\n    </div>\n\n    <!-- 4 Telemetry Overview Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- 1. Current Internal Temperature -->\n      <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"border-info/20 bg-info/10 text-info flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n              >\n                <ThermometerSnowflake class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Internal Core Temp</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">In Target Zone</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2.5 pt-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">\n                {{ currentInternalTemp > 0 ? `+${currentInternalTemp}` : currentInternalTemp }}°C\n              </span>\n              <span class=\"text-muted-foreground text-xs font-normal\">Payload</span>\n            </div>\n            <span class=\"text-success text-success text-xs font-medium tabular-nums\">±0.6°C setpoint</span>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Target Corridor:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">-22.0°C to -18.0°C</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Probe #A1 (Pallet Center Core)</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Ambient External Temperature -->\n      <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"border-warning/20 bg-warning/10 text-warning flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n              >\n                <ThermometerSun class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Ambient External</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"shrink-0 text-xs\">Dubai Tarmac</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2.5 pt-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">\n                {{ currentAmbientTemp > 0 ? `+${currentAmbientTemp}` : currentAmbientTemp }}°C\n              </span>\n              <span class=\"text-muted-foreground text-xs font-normal\">Air Temp</span>\n            </div>\n            <div class=\"text-muted-foreground flex items-center gap-1 text-xs font-medium tabular-nums\">\n              <Flame class=\"text-warning size-3\" />\n              <span>ΔT 44.2°C</span>\n            </div>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Transfer Node:</span>\n              <span class=\"text-foreground font-medium\">DXB Cargo T2</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">VIP Cryo-Insulation Envelope Active</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Relative Humidity -->\n      <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"flex size-8 shrink-0 items-center justify-center rounded-lg border border-teal-500/20 bg-teal-500/10 text-teal-600 dark:text-teal-400\"\n              >\n                <Droplets class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Cargo Humidity</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Optimal Dry</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2.5 pt-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">{{ currentHumidity }}%</span>\n              <span class=\"text-muted-foreground text-xs font-normal\">RH</span>\n            </div>\n            <span class=\"text-xs font-medium text-teal-600 dark:text-teal-400\">Zero Condensation</span>\n          </div>\n\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"currentHumidity\" class=\"h-1.5 [&_[data-slot=progress-indicator]]:bg-teal-500\" />\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2 text-xs\">\n              <span>Dew Point: <span class=\"text-foreground font-medium tabular-nums\">-32.4°C</span></span>\n              <span>Spec &lt; 35%</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Total Excursions / Breach Events -->\n      <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2.5\">\n              <div\n                class=\"border-success/20 bg-success/10 text-success flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n              >\n                <ShieldCheck class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Excursion Events</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">100% Compliant</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2.5 pt-1\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">{{ totalExcursions }}</span>\n              <span class=\"text-muted-foreground text-xs font-normal\">Breaches</span>\n            </div>\n            <span class=\"text-success text-success text-xs font-medium tabular-nums\">\n              {{ monitoringHours }}h in-transit\n            </span>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2 text-xs\">\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Mean Kinetic Temp (MKT):</span>\n              <span class=\"text-foreground font-medium tabular-nums\">-19.7°C</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">0 cumulative seconds out-of-spec</p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- 24-Hour Temperature Curve / Telemetry Graph -->\n    <Card class=\"border-border bg-card text-card-foreground shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <Activity class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-semibold\">24-Hour Payload & Ambient Telemetry Curve</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Continuous thermal gradient monitoring comparing internal core payload against ambient flight & tarmac\n              temperatures with strict excursion threshold corridors.\n            </CardDescription>\n          </div>\n\n          <!-- Legend & Timeframe -->\n          <div class=\"flex flex-wrap items-center gap-3\">\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-3 text-xs\">\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"bg-info size-2 rounded-full\" />\n                <span class=\"text-foreground font-medium\">Internal Core</span>\n              </div>\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"bg-warning size-2 rounded-full\" />\n                <span>Ambient Air</span>\n              </div>\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"border-destructive bg-destructive h-0.5 w-3 border-b border-dashed\" />\n                <span>Upper Limit (-18°C)</span>\n              </div>\n              <div class=\"flex items-center gap-1.5\">\n                <span class=\"border-info bg-info h-0.5 w-3 border-b border-dashed\" />\n                <span>Lower Limit (-22°C)</span>\n              </div>\n            </div>\n\n            <div class=\"bg-muted border-border/60 flex items-center rounded-lg border p-0.5 text-xs\">\n              <button\n                type=\"button\"\n                :class=\"[\n                  'rounded-md px-2.5 py-1 font-medium transition-colors',\n                  activeTimeframe === '24h'\n                    ? 'bg-background text-foreground shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                @click=\"activeTimeframe = '24h'\"\n              >\n                24h\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[\n                  'rounded-md px-2.5 py-1 font-medium transition-colors',\n                  activeTimeframe === '48h'\n                    ? 'bg-background text-foreground shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                @click=\"activeTimeframe = '48h'\"\n              >\n                48h\n              </button>\n              <button\n                type=\"button\"\n                :class=\"[\n                  'rounded-md px-2.5 py-1 font-medium transition-colors',\n                  activeTimeframe === '96h'\n                    ? 'bg-background text-foreground shadow-xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                ]\"\n                @click=\"activeTimeframe = '96h'\"\n              >\n                96h\n              </button>\n            </div>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4\">\n        <!-- SVG Chart Area -->\n        <div class=\"bg-muted/20 border-border/60 relative w-full overflow-x-auto rounded-lg border p-2 sm:p-4\">\n          <svg class=\"h-64 w-full max-w-[600px] min-w-full\" viewBox=\"0 0 740 220\" preserveAspectRatio=\"none\">\n            <defs>\n              <linearGradient id=\"grad-internal-vue\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"var(--color-sky-500, #0ea5e9)\" stop-opacity=\"0.25\" />\n                <stop offset=\"100%\" stop-color=\"var(--color-sky-500, #0ea5e9)\" stop-opacity=\"0.0\" />\n              </linearGradient>\n            </defs>\n\n            <!-- Target Corridor Shaded Band (-18°C [y=65] to -22°C [y=155]) -->\n            <rect\n              x=\"40\"\n              y=\"65\"\n              width=\"660\"\n              height=\"90\"\n              fill=\"var(--color-sky-500, #0ea5e9)\"\n              fill-opacity=\"0.06\"\n              rx=\"4\"\n            />\n\n            <!-- Grid Lines -->\n            <line x1=\"40\" y1=\"30\" x2=\"700\" y2=\"30\" stroke=\"currentColor\" class=\"text-border/40\" stroke-width=\"1\" />\n            <line\n              x1=\"40\"\n              y1=\"65\"\n              x2=\"700\"\n              y2=\"65\"\n              stroke=\"var(--color-rose-500, #f43f5e)\"\n              stroke-width=\"1.5\"\n              stroke-dasharray=\"4 4\"\n            />\n            <line\n              x1=\"40\"\n              y1=\"110\"\n              x2=\"700\"\n              y2=\"110\"\n              stroke=\"var(--color-emerald-500, #10b981)\"\n              stroke-width=\"1\"\n              stroke-dasharray=\"2 3\"\n              stroke-opacity=\"0.6\"\n            />\n            <line\n              x1=\"40\"\n              y1=\"155\"\n              x2=\"700\"\n              y2=\"155\"\n              stroke=\"var(--color-sky-600, #0284c7)\"\n              stroke-width=\"1.5\"\n              stroke-dasharray=\"4 4\"\n            />\n            <line x1=\"40\" y1=\"200\" x2=\"700\" y2=\"200\" stroke=\"currentColor\" class=\"text-border/40\" stroke-width=\"1\" />\n\n            <!-- Y-Axis Threshold Labels -->\n            <text x=\"36\" y=\"69\" text-anchor=\"end\" class=\"fill-destructive text-xs font-medium\">-18°C (Max)</text>\n            <text x=\"36\" y=\"113\" text-anchor=\"end\" class=\"dark:fill-success fill-emerald-600 text-xs\">-20°C (Set)</text>\n            <text x=\"36\" y=\"159\" text-anchor=\"end\" class=\"dark:fill-info fill-sky-600 text-xs font-medium\">\n              -22°C (Min)\n            </text>\n\n            <!-- Ambient Temperature Curve (Dashed Amber) -->\n            <path\n              :d=\"ambientPath\"\n              fill=\"none\"\n              stroke=\"var(--color-amber-500, #f59e0b)\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"3 3\"\n              stroke-linecap=\"round\"\n            />\n\n            <!-- Internal Temperature Gradient Area & Curve (Solid Sky) -->\n            <path :d=\"internalArea\" fill=\"url(#grad-internal-vue)\" />\n            <path\n              :d=\"internalPath\"\n              fill=\"none\"\n              stroke=\"var(--color-sky-500, #0ea5e9)\"\n              stroke-width=\"2.5\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n\n            <!-- Data Point Markers -->\n            <g v-for=\"(pt, idx) in chartPoints\" :key=\"idx\">\n              <!-- Internal Point -->\n              <circle\n                :cx=\"pt.x\"\n                :cy=\"pt.yInternal\"\n                r=\"3.5\"\n                class=\"stroke-background fill-info cursor-pointer stroke-2 transition-transform hover:scale-125\"\n                @mouseenter=\"selectedReadingIndex = idx\"\n              />\n              <!-- Ambient Point -->\n              <circle :cx=\"pt.x\" :cy=\"pt.yAmbient\" r=\"2.5\" class=\"stroke-background fill-warning stroke-1\" />\n            </g>\n          </svg>\n\n          <!-- X-Axis Timeline Milestones -->\n          <div class=\"mt-2 grid grid-cols-3 gap-2 text-xs sm:grid-cols-5 lg:grid-cols-9\">\n            <div\n              v-for=\"(pt, idx) in chartPoints\"\n              :key=\"idx\"\n              :class=\"[\n                'rounded p-1 text-center transition-colors',\n                selectedReadingIndex === idx ? 'bg-muted border-border/80 border' : '',\n              ]\"\n            >\n              <p class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">{{ pt.time }}</p>\n              <p class=\"text-muted-foreground truncate text-xs\">{{ pt.milestone }}</p>\n              <p class=\"text-info text-info font-mono text-xs font-medium tabular-nums\">{{ pt.internalTemp }}°C</p>\n            </div>\n          </div>\n        </div>\n\n        <!-- Metric Summary Strip -->\n        <div class=\"grid grid-cols-2 gap-3 text-xs sm:grid-cols-4 lg:grid-cols-5\">\n          <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n            <span class=\"text-muted-foreground\">Min Internal Temp</span>\n            <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">-20.8°C</p>\n            <span class=\"text-muted-foreground text-xs\">At cruise altitude</span>\n          </div>\n          <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n            <span class=\"text-muted-foreground\">Max Internal Temp</span>\n            <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">-19.2°C</p>\n            <span class=\"text-muted-foreground text-xs\">During DXB ramp transfer</span>\n          </div>\n          <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n            <span class=\"text-muted-foreground\">24h Mean Temp</span>\n            <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">-19.7°C</p>\n            <span class=\"text-success text-xs font-medium\">Optimal Setpoint</span>\n          </div>\n          <div class=\"border-border bg-muted/30 rounded-lg border p-2.5\">\n            <span class=\"text-muted-foreground\">Standard Deviation</span>\n            <p class=\"text-foreground font-mono text-sm font-semibold tabular-nums\">±0.4°C</p>\n            <span class=\"text-muted-foreground text-xs\">Tight thermal hold</span>\n          </div>\n          <div class=\"border-border bg-muted/30 col-span-2 rounded-lg border p-2.5 sm:col-span-4 lg:col-span-1\">\n            <span class=\"text-muted-foreground\">Peak External Heat</span>\n            <p class=\"text-warning text-warning font-mono text-sm font-semibold tabular-nums\">+38.6°C</p>\n            <span class=\"text-muted-foreground text-xs\">DXB Tarmac 12:00 UTC</span>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Temperature Logging History Table & Protocol Card -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-3\">\n      <!-- Table: 2 cols on lg -->\n      <Card class=\"border-border bg-card text-card-foreground shadow-xs lg:col-span-2\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle class=\"text-base font-semibold\">Temperature Logging History</CardTitle>\n              <CardDescription class=\"text-xs\">\n                Calibrated multi-probe sensor telemetry pings across core pallet positions.\n              </CardDescription>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"w-fit text-xs font-normal tabular-nums\">\n              {{ activeLogs.length }} Recent Pings\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"p-0 sm:p-6 sm:pt-0\">\n          <div class=\"overflow-x-auto\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead class=\"min-w-[140px]\">Timestamp</TableHead>\n                  <TableHead class=\"min-w-[110px]\">Internal Temp</TableHead>\n                  <TableHead class=\"min-w-[100px]\">Ambient Air</TableHead>\n                  <TableHead class=\"min-w-[90px]\">Delta-T</TableHead>\n                  <TableHead class=\"min-w-[150px]\">Probe Location</TableHead>\n                  <TableHead class=\"min-w-[70px]\">RH %</TableHead>\n                  <TableHead class=\"min-w-[90px] text-right\">Status</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow\n                  v-for=\"log in activeLogs\"\n                  :key=\"log.id\"\n                  :class=\"log.isLatest ? 'bg-muted/30 font-medium' : ''\"\n                >\n                  <TableCell class=\"text-foreground text-xs whitespace-nowrap\">\n                    <div class=\"flex items-center gap-1.5\">\n                      <span class=\"tabular-nums\">{{ log.timestamp }}</span>\n                      <Badge wrap v-if=\"log.isLatest\" variant=\"secondary\" class=\"h-4 px-1 text-xs font-normal\"\n                        >Now</Badge\n                      >\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"text-xs whitespace-nowrap\">\n                    <span class=\"text-info text-info font-semibold tabular-nums\">\n                      {{ log.internalTemp > 0 ? `+${log.internalTemp}` : log.internalTemp }}°C\n                    </span>\n                  </TableCell>\n                  <TableCell class=\"text-muted-foreground text-xs whitespace-nowrap tabular-nums\">\n                    {{ log.ambientTemp > 0 ? `+${log.ambientTemp}` : log.ambientTemp }}°C\n                  </TableCell>\n                  <TableCell class=\"text-foreground text-xs font-medium whitespace-nowrap tabular-nums\">\n                    {{ log.deltaT }}°C\n                  </TableCell>\n                  <TableCell class=\"text-xs whitespace-nowrap\">\n                    <span class=\"text-foreground\">{{ log.probeLocation }}</span>\n                    <span class=\"text-muted-foreground ml-1 font-mono text-xs\">({{ log.probeId }})</span>\n                  </TableCell>\n                  <TableCell class=\"text-muted-foreground text-xs whitespace-nowrap tabular-nums\">\n                    {{ log.humidity }}%\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    <Badge\n                      :variant=\"log.status === 'optimal' ? 'success' : log.status === 'in-spec' ? 'outline' : 'warning'\"\n                      class=\"text-xs whitespace-normal capitalize\"\n                    >\n                      {{ log.status }}\n                    </Badge>\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Critical Excursion Alert Protocol Card -->\n      <Card class=\"border-border bg-card text-card-foreground shadow-xs lg:col-span-1\">\n        <CardHeader class=\"pb-3\">\n          <div class=\"flex items-center justify-between gap-x-2\">\n            <div class=\"flex items-center gap-2\">\n              <Bell class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-semibold\">Excursion Alert Protocol</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"gap-1 text-xs\">\n              <ShieldAlert class=\"size-3\" />\n              <span>Armed</span>\n            </Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            Automated escalation rules and dry ice reserve endurance monitoring.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <!-- Escalation Rule 1 -->\n          <div class=\"border-border/70 bg-muted/30 space-y-1.5 rounded-lg border p-3 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-foreground font-semibold\">Urgent SMS / Pager Alert Trigger:</span>\n              <Badge wrap variant=\"destructive\" class=\"font-mono text-xs\">&gt; -15.0°C</Badge>\n            </div>\n            <p class=\"text-muted-foreground leading-relaxed\">\n              Triggers priority emergency dispatch if payload core temperature rises above -15.0°C for ≥ 30 consecutive\n              minutes.\n            </p>\n          </div>\n\n          <!-- Cryogenic Dry Ice Reserve -->\n          <div class=\"space-y-2 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <div class=\"flex items-center gap-1.5\">\n                <Snowflake class=\"text-info size-3.5\" />\n                <span class=\"text-foreground font-medium\">Dry Ice Solid CO2 Reserve</span>\n              </div>\n              <span class=\"text-foreground font-mono font-semibold tabular-nums\">{{ dryIceEnduranceHours }}h hold</span>\n            </div>\n            <Progress :model-value=\"dryIceCapacityPercent\" class=\"[&_[data-slot=progress-indicator]]:bg-info h-2\" />\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Sublimation: 0.38 kg/hr</span>\n              <span>42 kg solid reserve</span>\n            </div>\n          </div>\n\n          <Separator />\n\n          <!-- Emergency Response Logistics Desk -->\n          <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <div class=\"flex items-center gap-2\">\n                <PhoneCall class=\"text-primary size-3.5\" />\n                <span class=\"text-foreground font-semibold\">Rapid Intervention Desk:</span>\n              </div>\n              <span class=\"text-foreground font-medium\">DXB Hub Team</span>\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Emergency Pager:</span>\n              <span class=\"text-foreground font-mono font-medium\">+971 4 216 4890</span>\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Re-Icing Intervention SLA:</span>\n              <span class=\"text-success font-medium\">&lt; 20 minutes</span>\n            </div>\n            <div\n              class=\"text-muted-foreground border-border/50 flex items-center justify-between gap-x-2 border-t pt-1.5\"\n            >\n              <span>Standard Operating SOP:</span>\n              <span class=\"text-foreground font-mono\">SOP-BIO-904</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ColdChainTempMonitor.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/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Refrigerated pharmaceutical & perishable cargo IoT temperature logger and excursion monitoring with multi-reading time-series trend chart, upper/lower threshold guidelines, probe logging history table, and critical excursion alert protocol.",
  "categories": [
    "logistics",
    "dashboard",
    "app"
  ]
}