{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "vitals-tracker-chart",
  "title": "Vitals Tracker Chart",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/vitals-tracker-chart/VitalsTrackerChart.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, type HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  Heart,\n  TrendingDown,\n  Minus,\n  CheckCircle2,\n  Plus,\n  Sliders,\n  Droplets,\n  Wind,\n  RefreshCw,\n  Bell,\n  ShieldCheck,\n  Stethoscope,\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 {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Textarea } from '@/components/ui/textarea'\n\ninterface DailyVitalLog {\n  id: string\n  date: string\n  isToday?: boolean\n  morningBP: string\n  morningPulse: number\n  eveningBP: string\n  eveningPulse: number\n  avgBP: string\n  systolicVal: number\n  diastolicVal: number\n  fastingGlucose: number\n  glucoseStatus: 'optimal' | 'normal' | 'elevated'\n  spo2: number\n  riskStatus: 'optimal' | 'normal' | 'elevated'\n  riskLabel: string\n  notes?: string\n}\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst timeframe = ref<'7d' | '30d' | '90d'>('7d')\nconst isSyncing = ref(false)\nconst lastSyncText = ref('4m ago')\nconst isLogDialogOpen = ref(false)\nconst showSuccessNotification = ref(false)\n\n// Configurable Thresholds State\nconst systolicLimit = ref('140')\nconst diastolicLimit = ref('90')\nconst hrAlertRange = ref('50-100')\nconst glucoseAlertLimit = ref('130')\nconst spo2AlertLimit = ref('95')\n\n// Alert Toggles\nconst clinicianSmsAlert = ref(true)\nconst ehrAutoSync = ref(true)\nconst caregiverPush = ref(false)\n\n// New Entry Form State\nconst formDate = ref('2026-08-21T08:30')\nconst formPeriod = ref('morning')\nconst formSystolic = ref('120')\nconst formDiastolic = ref('78')\nconst formPulse = ref('68')\nconst formGlucose = ref('94')\nconst formSpo2 = ref('99')\nconst formDevice = ref('withings')\nconst formNotes = ref('')\n\nconst dailyLogs = ref<DailyVitalLog[]>([\n  {\n    id: 'vital-1',\n    date: 'Aug 21 (Today)',\n    isToday: true,\n    morningBP: '120/76',\n    morningPulse: 66,\n    eveningBP: '122/78',\n    eveningPulse: 68,\n    avgBP: '121/77',\n    systolicVal: 121,\n    diastolicVal: 77,\n    fastingGlucose: 94,\n    glucoseStatus: 'optimal',\n    spo2: 99,\n    riskStatus: 'optimal',\n    riskLabel: 'Optimal',\n    notes: 'Resting morning reading taken pre-breakfast.',\n  },\n  {\n    id: 'vital-2',\n    date: 'Aug 20',\n    morningBP: '124/80',\n    morningPulse: 70,\n    eveningBP: '122/79',\n    eveningPulse: 69,\n    avgBP: '123/80',\n    systolicVal: 123,\n    diastolicVal: 80,\n    fastingGlucose: 94,\n    glucoseStatus: 'optimal',\n    spo2: 98,\n    riskStatus: 'normal',\n    riskLabel: 'Normal',\n  },\n  {\n    id: 'vital-3',\n    date: 'Aug 19',\n    morningBP: '126/82',\n    morningPulse: 71,\n    eveningBP: '125/80',\n    eveningPulse: 70,\n    avgBP: '126/81',\n    systolicVal: 126,\n    diastolicVal: 81,\n    fastingGlucose: 97,\n    glucoseStatus: 'normal',\n    spo2: 99,\n    riskStatus: 'normal',\n    riskLabel: 'Normal',\n  },\n  {\n    id: 'vital-4',\n    date: 'Aug 18',\n    morningBP: '132/84',\n    morningPulse: 74,\n    eveningBP: '130/82',\n    eveningPulse: 73,\n    avgBP: '131/83',\n    systolicVal: 131,\n    diastolicVal: 83,\n    fastingGlucose: 101,\n    glucoseStatus: 'elevated',\n    spo2: 98,\n    riskStatus: 'elevated',\n    riskLabel: 'Elevated',\n    notes: 'Mild post-work stress reported by patient.',\n  },\n  {\n    id: 'vital-5',\n    date: 'Aug 17',\n    morningBP: '128/82',\n    morningPulse: 72,\n    eveningBP: '126/80',\n    eveningPulse: 71,\n    avgBP: '127/81',\n    systolicVal: 127,\n    diastolicVal: 81,\n    fastingGlucose: 98,\n    glucoseStatus: 'normal',\n    spo2: 99,\n    riskStatus: 'normal',\n    riskLabel: 'Normal',\n  },\n  {\n    id: 'vital-6',\n    date: 'Aug 16',\n    morningBP: '122/78',\n    morningPulse: 69,\n    eveningBP: '124/80',\n    eveningPulse: 70,\n    avgBP: '123/79',\n    systolicVal: 123,\n    diastolicVal: 79,\n    fastingGlucose: 95,\n    glucoseStatus: 'optimal',\n    spo2: 99,\n    riskStatus: 'optimal',\n    riskLabel: 'Optimal',\n  },\n  {\n    id: 'vital-7',\n    date: 'Aug 15',\n    morningBP: '120/78',\n    morningPulse: 68,\n    eveningBP: '121/77',\n    eveningPulse: 67,\n    avgBP: '121/78',\n    systolicVal: 121,\n    diastolicVal: 78,\n    fastingGlucose: 96,\n    glucoseStatus: 'optimal',\n    spo2: 99,\n    riskStatus: 'optimal',\n    riskLabel: 'Optimal',\n  },\n])\n\nfunction handleSyncRefresh() {\n  isSyncing.value = true\n  setTimeout(() => {\n    isSyncing.value = false\n    lastSyncText.value = 'just now'\n  }, 600)\n}\n\nfunction handleLogSubmit() {\n  const systolic = parseInt(formSystolic.value, 10) || 120\n  const diastolic = parseInt(formDiastolic.value, 10) || 80\n  const pulse = parseInt(formPulse.value, 10) || 68\n  const glucose = parseInt(formGlucose.value, 10) || 94\n  const spo2 = parseInt(formSpo2.value, 10) || 99\n\n  let riskStatus: 'optimal' | 'normal' | 'elevated' = 'normal'\n  let riskLabel = 'Normal'\n\n  if (systolic >= 130 || diastolic >= 85 || glucose >= 100) {\n    riskStatus = 'elevated'\n    riskLabel = 'Elevated'\n  } else if (systolic <= 120 && diastolic <= 80 && glucose < 95) {\n    riskStatus = 'optimal'\n    riskLabel = 'Optimal'\n  }\n\n  const newLog: DailyVitalLog = {\n    id: `vital-${Date.now()}`,\n    date: 'Aug 21 (Manual)',\n    isToday: true,\n    morningBP: `${systolic}/${diastolic}`,\n    morningPulse: pulse,\n    eveningBP: `${systolic}/${diastolic}`,\n    eveningPulse: pulse,\n    avgBP: `${systolic}/${diastolic}`,\n    systolicVal: systolic,\n    diastolicVal: diastolic,\n    fastingGlucose: glucose,\n    glucoseStatus: glucose < 95 ? 'optimal' : glucose <= 99 ? 'normal' : 'elevated',\n    spo2,\n    riskStatus,\n    riskLabel,\n    notes: formNotes.value.trim() || undefined,\n  }\n\n  dailyLogs.value = [newLog, ...dailyLogs.value.slice(0, 6)]\n  isLogDialogOpen.value = false\n  showSuccessNotification.value = true\n  setTimeout(() => {\n    showSuccessNotification.value = false\n  }, 4000)\n}\n\nfunction getSparkline(history: number[]) {\n  const min = Math.min(...history)\n  const max = Math.max(...history)\n  const range = max - min || 1\n  const height = 26\n  const padding = 3\n\n  const points = history.map((val, idx) => {\n    const x = (idx / (history.length - 1)) * 100\n    const y = height - ((val - min) / range) * (height - padding * 2) - padding\n    return { x, y }\n  })\n\n  let path = `M ${points[0].x},${points[0].y}`\n  for (let i = 1; i < points.length; i++) {\n    const prev = points[i - 1]\n    const curr = points[i]\n    const cx = (prev.x + curr.x) / 2\n    path += ` C ${cx},${prev.y} ${cx},${curr.y} ${curr.x},${curr.y}`\n  }\n\n  const lastPoint = points[points.length - 1]\n  const area = `${path} L 100,32 L 0,32 Z`\n\n  return { path, area, lastPoint }\n}\n\nconst bpHistory = [121, 123, 126, 131, 127, 123, 121]\nconst hrHistory = [68, 70, 71, 74, 72, 69, 68]\nconst glucoseHistory = [96, 95, 98, 101, 97, 94, 94]\n</script>\n\n<template>\n  <div data-slot=\"vitals-tracker-chart\" :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\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n            Patient Biometrics & Vitals Telemetry\n          </h1>\n          <Badge wrap variant=\"outline\" class=\"gap-1.5 text-xs font-normal\">\n            <span class=\"bg-success size-1.5 rounded-full\" />\n            <span class=\"tabular-nums\">MRN-84920</span>\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-sm\">\n          Continuous physiological telemetry stream · Eleanor Vance (DOB: 1984-06-12) · Care Lead: Dr. M. Vance, MD\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2.5\">\n        <!-- Device Sync Telemetry Badge -->\n        <div\n          class=\"bg-muted/50 border-border/80 text-card-foreground flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs shadow-xs\"\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          <span class=\"text-muted-foreground\">Apple Health / Withings Connected · Last sync</span>\n          <span class=\"text-foreground font-medium tabular-nums\">{{ lastSyncText }}</span>\n          <Button\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            class=\"text-muted-foreground hover:text-foreground size-6 rounded-md p-0\"\n            aria-label=\"Sync vitals telemetry\"\n            @click=\"handleSyncRefresh\"\n          >\n            <RefreshCw :class=\"['size-3.5', isSyncing ? 'animate-spin' : '']\" />\n          </Button>\n        </div>\n\n        <!-- Timeframe Selector -->\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              timeframe === '7d'\n                ? 'bg-background text-foreground shadow-xs'\n                : 'text-muted-foreground hover:text-foreground',\n            ]\"\n            @click=\"timeframe = '7d'\"\n          >\n            7 Days\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[\n              'rounded-md px-2.5 py-1 font-medium transition-colors',\n              timeframe === '30d'\n                ? 'bg-background text-foreground shadow-xs'\n                : 'text-muted-foreground hover:text-foreground',\n            ]\"\n            @click=\"timeframe = '30d'\"\n          >\n            30 Days\n          </button>\n          <button\n            type=\"button\"\n            :class=\"[\n              'rounded-md px-2.5 py-1 font-medium transition-colors',\n              timeframe === '90d'\n                ? 'bg-background text-foreground shadow-xs'\n                : 'text-muted-foreground hover:text-foreground',\n            ]\"\n            @click=\"timeframe = '90d'\"\n          >\n            90 Days\n          </button>\n        </div>\n\n        <!-- Log Vitals Entry Dialog -->\n        <Dialog v-model:open=\"isLogDialogOpen\">\n          <DialogTrigger as-child>\n            <Button size=\"sm\" class=\"gap-1.5 shadow-xs\">\n              <Plus class=\"size-4\" />\n              <span>Log Vitals Entry</span>\n            </Button>\n          </DialogTrigger>\n          <DialogContent class=\"sm:max-w-xl\">\n            <DialogHeader>\n              <DialogTitle>Log Biometric Vitals Entry</DialogTitle>\n              <DialogDescription>\n                Record manual cuff, glucometer, or pulse oximeter measurements into the clinical telemetry stream.\n              </DialogDescription>\n            </DialogHeader>\n\n            <div class=\"grid grid-cols-1 gap-4 py-2 sm:grid-cols-2\">\n              <div class=\"space-y-1.5 sm:col-span-2\">\n                <Label for=\"vital-timestamp\" class=\"text-xs\">Measurement Timestamp</Label>\n                <Input id=\"vital-timestamp\" v-model=\"formDate\" type=\"datetime-local\" class=\"h-9 text-xs\" />\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <Label for=\"vital-period\" class=\"text-xs\">Context / Reading Period</Label>\n                <Select v-model=\"formPeriod\">\n                  <SelectTrigger id=\"vital-period\" class=\"h-9 text-xs\">\n                    <SelectValue placeholder=\"Select period\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"morning\">Morning (Fasting)</SelectItem>\n                    <SelectItem value=\"midday\">Midday (Pre-lunch)</SelectItem>\n                    <SelectItem value=\"evening\">Evening (Post-dinner)</SelectItem>\n                    <SelectItem value=\"bedtime\">Bedtime (Resting)</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <Label for=\"vital-device\" class=\"text-xs\">Telemetry Source Device</Label>\n                <Select v-model=\"formDevice\">\n                  <SelectTrigger id=\"vital-device\" class=\"h-9 text-xs\">\n                    <SelectValue placeholder=\"Select device\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"withings\">Withings BPM Core</SelectItem>\n                    <SelectItem value=\"apple-watch\">Apple Watch Series 9</SelectItem>\n                    <SelectItem value=\"omron\">Omron Platinum Cuff</SelectItem>\n                    <SelectItem value=\"dexcom\">Dexcom G7 CGM</SelectItem>\n                    <SelectItem value=\"manual\">Manual Clinical Station</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <Label for=\"systolic-input\" class=\"text-xs\">Systolic Pressure (mmHg)</Label>\n                <Input\n                  id=\"systolic-input\"\n                  v-model=\"formSystolic\"\n                  type=\"number\"\n                  placeholder=\"120\"\n                  class=\"h-9 text-xs tabular-nums\"\n                />\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <Label for=\"diastolic-input\" class=\"text-xs\">Diastolic Pressure (mmHg)</Label>\n                <Input\n                  id=\"diastolic-input\"\n                  v-model=\"formDiastolic\"\n                  type=\"number\"\n                  placeholder=\"80\"\n                  class=\"h-9 text-xs tabular-nums\"\n                />\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <Label for=\"pulse-input\" class=\"text-xs\">Resting Heart Rate (bpm)</Label>\n                <Input\n                  id=\"pulse-input\"\n                  v-model=\"formPulse\"\n                  type=\"number\"\n                  placeholder=\"68\"\n                  class=\"h-9 text-xs tabular-nums\"\n                />\n              </div>\n\n              <div class=\"space-y-1.5\">\n                <Label for=\"glucose-input\" class=\"text-xs\">Blood Glucose (mg/dL)</Label>\n                <Input\n                  id=\"glucose-input\"\n                  v-model=\"formGlucose\"\n                  type=\"number\"\n                  placeholder=\"94\"\n                  class=\"h-9 text-xs tabular-nums\"\n                />\n              </div>\n\n              <div class=\"space-y-1.5 sm:col-span-2\">\n                <Label for=\"spo2-input\" class=\"text-xs\">Blood Oxygen SpO2 (%)</Label>\n                <Input\n                  id=\"spo2-input\"\n                  v-model=\"formSpo2\"\n                  type=\"number\"\n                  placeholder=\"99\"\n                  class=\"h-9 text-xs tabular-nums\"\n                />\n              </div>\n\n              <div class=\"space-y-1.5 sm:col-span-2\">\n                <Label for=\"vital-notes\" class=\"text-xs\">Clinical Notes & Symptoms (Optional)</Label>\n                <Textarea\n                  id=\"vital-notes\"\n                  v-model=\"formNotes\"\n                  placeholder=\"e.g. Patient rested seated for 5 minutes prior to measurement. No palpitations or dyspnea.\"\n                  rows=\"2\"\n                  class=\"text-xs\"\n                />\n              </div>\n            </div>\n\n            <DialogFooter class=\"gap-2 sm:gap-0\">\n              <Button variant=\"outline\" size=\"sm\" @click=\"isLogDialogOpen = false\">Cancel</Button>\n              <Button size=\"sm\" @click=\"handleLogSubmit\">Save Reading</Button>\n            </DialogFooter>\n          </DialogContent>\n        </Dialog>\n      </div>\n    </div>\n\n    <!-- Success Toast Notification -->\n    <div\n      v-if=\"showSuccessNotification\"\n      class=\"border-success/30 bg-success/10 text-foreground dark:text-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=\"font-medium\">Vitals telemetry entry successfully appended to EHR clinical chart.</span>\n      </div>\n      <Button\n        aria-label=\"Dismiss notification\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        class=\"text-success size-6\"\n        @click=\"showSuccessNotification = false\"\n      >\n        <span class=\"text-xs\">✕</span>\n      </Button>\n    </div>\n\n    <!-- 4 Primary Vitals Overview Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- 1. Blood Pressure -->\n      <Card class=\"flex flex-col justify-between\">\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=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Activity class=\"text-success size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Blood Pressure</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Normal</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 pt-1\">\n          <div>\n            <div class=\"mb-1 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\">122/78</span>\n                <span class=\"text-muted-foreground text-xs\">mmHg</span>\n              </div>\n              <span class=\"text-muted-foreground text-xs tabular-nums\">MAP 92 mmHg</span>\n            </div>\n\n            <!-- Mini Sparkline for BP Trend -->\n            <div class=\"h-7 w-full overflow-hidden pt-1\" aria-label=\"7-day systolic blood pressure trend\">\n              <svg class=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"grad-bp-vue\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"var(--color-emerald-500, #10b981)\" stop-opacity=\"0.25\" />\n                    <stop offset=\"100%\" stop-color=\"var(--color-emerald-500, #10b981)\" stop-opacity=\"0.0\" />\n                  </linearGradient>\n                </defs>\n                <path :d=\"getSparkline(bpHistory).area\" fill=\"url(#grad-bp-vue)\" />\n                <path\n                  :d=\"getSparkline(bpHistory).path\"\n                  fill=\"none\"\n                  stroke=\"var(--color-emerald-500, #10b981)\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n                <circle\n                  :cx=\"getSparkline(bpHistory).lastPoint.x\"\n                  :cy=\"getSparkline(bpHistory).lastPoint.y\"\n                  r=\"2.5\"\n                  class=\"fill-success\"\n                />\n              </svg>\n            </div>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">7-Day Mean:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">124/80 mmHg</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Target &lt; 120/80 mmHg · Controlled</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Resting Heart Rate -->\n      <Card class=\"flex flex-col justify-between\">\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=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Heart class=\"text-destructive size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Resting Heart Rate</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Healthy</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 pt-1\">\n          <div>\n            <div class=\"mb-1 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\">68</span>\n                <span class=\"text-muted-foreground text-xs\">bpm</span>\n              </div>\n              <div class=\"text-success flex items-center gap-1 text-xs font-medium tabular-nums\">\n                <TrendingDown class=\"size-3\" />\n                <span>-2 bpm</span>\n              </div>\n            </div>\n\n            <!-- Mini Sparkline for HR Trend -->\n            <div class=\"h-7 w-full overflow-hidden pt-1\" aria-label=\"7-day resting heart rate trend\">\n              <svg class=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"grad-hr-vue\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                    <stop offset=\"0%\" stop-color=\"var(--color-rose-500, #f43f5e)\" stop-opacity=\"0.25\" />\n                    <stop offset=\"100%\" stop-color=\"var(--color-rose-500, #f43f5e)\" stop-opacity=\"0.0\" />\n                  </linearGradient>\n                </defs>\n                <path :d=\"getSparkline(hrHistory).area\" fill=\"url(#grad-hr-vue)\" />\n                <path\n                  :d=\"getSparkline(hrHistory).path\"\n                  fill=\"none\"\n                  stroke=\"var(--color-rose-500, #f43f5e)\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n                <circle\n                  :cx=\"getSparkline(hrHistory).lastPoint.x\"\n                  :cy=\"getSparkline(hrHistory).lastPoint.y\"\n                  r=\"2.5\"\n                  class=\"fill-destructive\"\n                />\n              </svg>\n            </div>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Normal Range:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">60 – 100 bpm</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Sinus Rhythm · HRV 58 ms</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Blood Glucose / Fasting -->\n      <Card class=\"flex flex-col justify-between\">\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=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Droplets class=\"text-info size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Blood Glucose</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">Fasting &lt; 100</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 pt-1\">\n          <div>\n            <div class=\"mb-1 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\">94</span>\n                <span class=\"text-muted-foreground text-xs\">mg/dL</span>\n              </div>\n              <div class=\"text-muted-foreground flex items-center gap-1 text-xs font-medium tabular-nums\">\n                <Minus class=\"size-3\" />\n                <span>Stable</span>\n              </div>\n            </div>\n\n            <!-- Mini Sparkline for Glucose Trend -->\n            <div class=\"h-7 w-full overflow-hidden pt-1\" aria-label=\"7-day blood glucose trend\">\n              <svg class=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\">\n                <defs>\n                  <linearGradient id=\"grad-glu-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                <path :d=\"getSparkline(glucoseHistory).area\" fill=\"url(#grad-glu-vue)\" />\n                <path\n                  :d=\"getSparkline(glucoseHistory).path\"\n                  fill=\"none\"\n                  stroke=\"var(--color-sky-500, #0ea5e9)\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n                <circle\n                  :cx=\"getSparkline(glucoseHistory).lastPoint.x\"\n                  :cy=\"getSparkline(glucoseHistory).lastPoint.y\"\n                  r=\"2.5\"\n                  class=\"fill-info\"\n                />\n              </svg>\n            </div>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Fasting Window:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">12 hrs</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Estimated HbA1c: 5.4%</p>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Blood Oxygen SpO2 -->\n      <Card class=\"flex flex-col justify-between\">\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=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Wind class=\"size-4 text-teal-500\" />\n              </div>\n              <CardTitle class=\"truncate text-sm font-medium\">Blood Oxygen SpO2</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"shrink-0 text-xs\">≥ 95% Normal</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3 pt-1\">\n          <div>\n            <div class=\"mb-1 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\">99%</span>\n                <span class=\"text-muted-foreground text-xs\">SpO2</span>\n              </div>\n              <span class=\"text-success text-xs font-medium\">0 drops detected</span>\n            </div>\n            <Progress :model-value=\"99\" class=\"h-2 [&_[data-slot=progress-indicator]]:bg-teal-500\" />\n            <div class=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n              <span class=\"text-muted-foreground\">Pulse Oximeter</span>\n              <span class=\"text-muted-foreground tabular-nums\">Target ≥ 95%</span>\n            </div>\n          </div>\n\n          <div class=\"border-border/60 border-t pt-2.5 text-xs\">\n            <div class=\"flex items-center justify-between gap-x-2\">\n              <span class=\"text-muted-foreground\">Sleep O2 Baseline:</span>\n              <span class=\"text-foreground font-medium tabular-nums\">98.4%</span>\n            </div>\n            <p class=\"text-muted-foreground mt-0.5 text-xs\">Continuous Plethysmography</p>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- 7-Day Vitals Trend Grid & Daily Telemetry Table -->\n    <Card>\n      <CardHeader>\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle>7-Day Vitals Trend & Daily Telemetry Logs</CardTitle>\n            <CardDescription>\n              Comprehensive morning & evening multi-parameter biometrics with systolic range markers and risk\n              stratification.\n            </CardDescription>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <Badge wrap variant=\"outline\" class=\"w-fit text-xs font-normal tabular-nums\">\n              {{ dailyLogs.length }} readings logged\n            </Badge>\n          </div>\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-[120px]\">Date</TableHead>\n                <TableHead class=\"min-w-[150px]\">Morning Reading</TableHead>\n                <TableHead class=\"min-w-[150px]\">Evening Reading</TableHead>\n                <TableHead class=\"min-w-[110px]\">Daily Mean BP</TableHead>\n                <TableHead class=\"min-w-[120px]\">Fasting Glucose</TableHead>\n                <TableHead class=\"min-w-[80px]\">SpO2</TableHead>\n                <TableHead class=\"min-w-[160px]\">Systolic Band Indicator</TableHead>\n                <TableHead class=\"text-right\">Risk Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"log in dailyLogs\" :key=\"log.id\" :class=\"log.isToday ? 'bg-muted/25 font-medium' : ''\">\n                <TableCell class=\"text-foreground text-xs whitespace-nowrap\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"tabular-nums\">{{ log.date }}</span>\n                    <Badge wrap v-if=\"log.isToday\" variant=\"secondary\" class=\"h-4.5 px-1.5 text-xs font-normal\"\n                      >Now</Badge\n                    >\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-xs whitespace-nowrap\">\n                  <span class=\"text-foreground font-medium tabular-nums\">{{ log.morningBP }}</span>\n                  <span class=\"text-muted-foreground text-xs\"> mmHg · </span>\n                  <span class=\"text-muted-foreground tabular-nums\">{{ log.morningPulse }} bpm</span>\n                </TableCell>\n                <TableCell class=\"text-xs whitespace-nowrap\">\n                  <span class=\"text-foreground font-medium tabular-nums\">{{ log.eveningBP }}</span>\n                  <span class=\"text-muted-foreground text-xs\"> mmHg · </span>\n                  <span class=\"text-muted-foreground tabular-nums\">{{ log.eveningPulse }} bpm</span>\n                </TableCell>\n                <TableCell class=\"text-foreground text-xs font-semibold whitespace-nowrap tabular-nums\">\n                  {{ log.avgBP }}\n                  <span class=\"text-muted-foreground text-xs font-normal\">mmHg</span>\n                </TableCell>\n                <TableCell class=\"text-xs whitespace-nowrap\">\n                  <span class=\"text-foreground font-medium tabular-nums\">{{ log.fastingGlucose }}</span>\n                  <span class=\"text-muted-foreground text-xs\"> mg/dL</span>\n                </TableCell>\n                <TableCell class=\"text-foreground text-xs font-medium whitespace-nowrap tabular-nums\">\n                  {{ log.spo2 }}%\n                </TableCell>\n                <TableCell class=\"text-xs\">\n                  <!-- Visual Horizontal Range Pill -->\n                  <div class=\"w-36 space-y-1\">\n                    <div class=\"bg-muted border-border/70 relative h-3 w-full overflow-hidden rounded-full border\">\n                      <!-- Normal Zone (110 - 129) -->\n                      <div class=\"bg-success/20 absolute inset-y-0 right-[50%] left-[16%]\" />\n                      <!-- Elevated Zone (130 - 139) -->\n                      <div class=\"bg-warning/25 absolute inset-y-0 right-[33%] left-[50%]\" />\n                      <!-- High Zone (>= 140) -->\n                      <div class=\"bg-destructive/25 absolute inset-y-0 right-0 left-[67%]\" />\n                      <!-- Reading Dot Marker (Clamped to 100-160 scale) -->\n                      <div\n                        class=\"absolute top-1/2 size-2 -translate-y-1/2 rounded-full shadow-xs\"\n                        :class=\"[\n                          log.systolicVal < 130\n                            ? 'bg-success ring-success/30 ring-2'\n                            : log.systolicVal < 140\n                              ? 'bg-warning ring-warning/30 ring-2'\n                              : 'bg-destructive ring-destructive/30 ring-2',\n                        ]\"\n                        :style=\"{\n                          left: `${Math.min(96, Math.max(4, ((log.systolicVal - 100) / 60) * 100))}%`,\n                        }\"\n                      />\n                    </div>\n                    <div class=\"text-muted-foreground flex justify-between text-xs tabular-nums\">\n                      <span>100</span>\n                      <span class=\"text-success font-medium\">120</span>\n                      <span>140+</span>\n                    </div>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge\n                    :variant=\"\n                      log.riskStatus === 'optimal' ? 'success' : log.riskStatus === 'normal' ? 'success' : 'warning'\n                    \"\n                    class=\"text-xs whitespace-normal capitalize\"\n                  >\n                    {{ log.riskLabel }}\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Threshold & Alert Limits Card -->\n    <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n      <Card>\n        <CardHeader>\n          <div class=\"flex items-center justify-between gap-x-2\">\n            <div class=\"flex items-center gap-2\">\n              <Sliders class=\"text-primary size-4\" />\n              <CardTitle>Configurable Clinical Thresholds</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal\">AHA / ACC Standards</Badge>\n          </div>\n          <CardDescription>\n            Custom warning & critical breach boundaries tailored to this patient's clinical care plan.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <div class=\"space-y-1.5\">\n              <Label class=\"text-xs\">Systolic Alert Limit</Label>\n              <Select v-model=\"systolicLimit\">\n                <SelectTrigger class=\"h-9 text-xs\">\n                  <SelectValue placeholder=\"Select limit\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"130\">&gt; 130 mmHg (Elevated)</SelectItem>\n                  <SelectItem value=\"140\">&gt; 140 mmHg (Stage 2 Alert)</SelectItem>\n                  <SelectItem value=\"160\">&gt; 160 mmHg (Critical Crisis)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <Label class=\"text-xs\">Diastolic Alert Limit</Label>\n              <Select v-model=\"diastolicLimit\">\n                <SelectTrigger class=\"h-9 text-xs\">\n                  <SelectValue placeholder=\"Select limit\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"85\">&gt; 85 mmHg (Elevated)</SelectItem>\n                  <SelectItem value=\"90\">&gt; 90 mmHg (Stage 2 Alert)</SelectItem>\n                  <SelectItem value=\"100\">&gt; 100 mmHg (Crisis)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <Label class=\"text-xs\">Heart Rate Alert Range</Label>\n              <Select v-model=\"hrAlertRange\">\n                <SelectTrigger class=\"h-9 text-xs\">\n                  <SelectValue placeholder=\"Select range\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"50-100\">&lt; 50 or &gt; 100 bpm</SelectItem>\n                  <SelectItem value=\"55-110\">&lt; 55 or &gt; 110 bpm</SelectItem>\n                  <SelectItem value=\"45-120\">&lt; 45 or &gt; 120 bpm (Wide)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n\n            <div class=\"space-y-1.5\">\n              <Label class=\"text-xs\">Fasting Glucose Warning</Label>\n              <Select v-model=\"glucoseAlertLimit\">\n                <SelectTrigger class=\"h-9 text-xs\">\n                  <SelectValue placeholder=\"Select limit\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"120\">&gt; 120 mg/dL (Pre-diabetic)</SelectItem>\n                  <SelectItem value=\"130\">&gt; 130 mg/dL (Clinical Alert)</SelectItem>\n                  <SelectItem value=\"150\">&gt; 150 mg/dL (High Trigger)</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n\n          <Separator />\n\n          <div class=\"border-border bg-muted/40 flex items-center justify-between gap-x-2 rounded-lg border p-3\">\n            <div class=\"space-y-0.5\">\n              <p class=\"text-foreground text-xs font-medium\">Oxygen Desaturation Limit</p>\n              <p class=\"text-muted-foreground text-xs\">Triggers hypoxemia alert if SpO2 drops below bound.</p>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-medium tabular-nums\"\n              >&lt; {{ spo2AlertLimit }}% SpO2</Badge\n            >\n          </div>\n        </CardContent>\n      </Card>\n\n      <Card>\n        <CardHeader>\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>Automated Clinical Alert Protocol</CardTitle>\n            </div>\n            <Badge wrap variant=\"success\" class=\"gap-1 text-xs\">\n              <ShieldCheck class=\"size-3\" />\n              <span>Active Sentinel</span>\n            </Badge>\n          </div>\n          <CardDescription>\n            Instant escalation rules and clinician notification triggers for threshold violations.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-4\">\n          <div class=\"flex items-start justify-between gap-4\">\n            <div class=\"space-y-0.5\">\n              <Label class=\"text-foreground text-xs font-medium\">Clinician Urgent SMS Alert</Label>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Immediately dispatch SMS alert to on-call cardiologist when 2 consecutive readings exceed threshold.\n              </p>\n            </div>\n            <Switch v-model=\"clinicianSmsAlert\" aria-label=\"Toggle clinician SMS alert\" />\n          </div>\n\n          <Separator />\n\n          <div class=\"flex items-start justify-between gap-4\">\n            <div class=\"space-y-0.5\">\n              <Label class=\"text-foreground text-xs font-medium\">EHR Auto-Sync (FHIR R4 Stream)</Label>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                Stream verified biometric readings directly to patient's electronic health record chart.\n              </p>\n            </div>\n            <Switch v-model=\"ehrAutoSync\" aria-label=\"Toggle EHR auto sync\" />\n          </div>\n\n          <Separator />\n\n          <div class=\"bg-muted/40 border-border 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                <Stethoscope class=\"text-primary size-3.5\" />\n                <span class=\"text-foreground font-semibold\">On-Call Clinical Lead:</span>\n              </div>\n              <span class=\"text-foreground font-medium\">Dr. Sarah Chen, MD (Cardiology)</span>\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n              <span>Pager: #4920 · Priority SLA:</span>\n              <span class=\"text-success font-medium\">&lt; 15 min triage</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/VitalsTrackerChart.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/dialog.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "Biometric vitals monitoring dashboard with multi-day trends, threshold bands, device sync status, 7-day vitals table with risk indicators, clinician alert limits, and quick-entry logging dialog.",
  "categories": [
    "healthcare",
    "dashboard",
    "app"
  ]
}