{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "vitals-tracker-chart",
  "title": "Vitals Tracker Chart",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/vitals-tracker-chart/VitalsTrackerChart.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\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-react'\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 initialLogs: 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\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\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\nexport function VitalsTrackerChart({ className }: { className?: string }) {\n  const [timeframe, setTimeframe] = React.useState<'7d' | '30d' | '90d'>('7d')\n  const [isSyncing, setIsSyncing] = React.useState(false)\n  const [lastSyncText, setLastSyncText] = React.useState('4m ago')\n  const [isLogDialogOpen, setIsLogDialogOpen] = React.useState(false)\n  const [showSuccessNotification, setShowSuccessNotification] = React.useState(false)\n\n  // Configurable Thresholds State\n  const [systolicLimit, setSystolicLimit] = React.useState('140')\n  const [diastolicLimit, setDiastolicLimit] = React.useState('90')\n  const [hrAlertRange, setHrAlertRange] = React.useState('50-100')\n  const [glucoseAlertLimit, setGlucoseAlertLimit] = React.useState('130')\n  const [spo2AlertLimit] = React.useState('95')\n\n  // Alert Toggles\n  const [clinicianSmsAlert, setClinicianSmsAlert] = React.useState(true)\n  const [ehrAutoSync, setEhrAutoSync] = React.useState(true)\n\n  // New Entry Form State\n  const [formDate, setFormDate] = React.useState('2026-08-21T08:30')\n  const [formPeriod, setFormPeriod] = React.useState('morning')\n  const [formSystolic, setFormSystolic] = React.useState('120')\n  const [formDiastolic, setFormDiastolic] = React.useState('78')\n  const [formPulse, setFormPulse] = React.useState('68')\n  const [formGlucose, setFormGlucose] = React.useState('94')\n  const [formSpo2, setFormSpo2] = React.useState('99')\n  const [formDevice, setFormDevice] = React.useState('withings')\n  const [formNotes, setFormNotes] = React.useState('')\n\n  const [dailyLogs, setDailyLogs] = React.useState<DailyVitalLog[]>(initialLogs)\n\n  const handleSyncRefresh = () => {\n    setIsSyncing(true)\n    setTimeout(() => {\n      setIsSyncing(false)\n      setLastSyncText('just now')\n    }, 600)\n  }\n\n  const handleLogSubmit = () => {\n    const systolic = parseInt(formSystolic, 10) || 120\n    const diastolic = parseInt(formDiastolic, 10) || 80\n    const pulse = parseInt(formPulse, 10) || 68\n    const glucose = parseInt(formGlucose, 10) || 94\n    const spo2 = parseInt(formSpo2, 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.trim() || undefined,\n    }\n\n    setDailyLogs([newLog, ...dailyLogs.slice(0, 6)])\n    setIsLogDialogOpen(false)\n    setShowSuccessNotification(true)\n    setTimeout(() => {\n      setShowSuccessNotification(false)\n    }, 4000)\n  }\n\n  return (\n    <div data-slot=\"vitals-tracker-chart\" className={cn('mx-auto w-full max-w-6xl space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            <h1 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n              Patient Biometrics & Vitals Telemetry\n            </h1>\n            <Badge wrap variant=\"outline\" className=\"gap-1.5 text-xs font-normal\">\n              <span className=\"bg-success size-1.5 rounded-full\" />\n              <span className=\"tabular-nums\">MRN-84920</span>\n            </Badge>\n          </div>\n          <p className=\"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 className=\"flex flex-wrap items-center gap-2.5\">\n          {/* Device Sync Telemetry Badge */}\n          <div className=\"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            <span className=\"relative flex size-2 shrink-0\">\n              <span className=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n              <span className=\"bg-success relative inline-flex size-2 rounded-full\" />\n            </span>\n            <span className=\"text-muted-foreground\">Apple Health / Withings Connected · Last sync</span>\n            <span className=\"text-foreground font-medium tabular-nums\">{lastSyncText}</span>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"text-muted-foreground hover:text-foreground size-6 rounded-md p-0\"\n              aria-label=\"Sync vitals telemetry\"\n              onClick={handleSyncRefresh}\n            >\n              <RefreshCw className={cn('size-3.5', isSyncing && 'animate-spin')} />\n            </Button>\n          </div>\n\n          {/* Timeframe Selector */}\n          <div className=\"bg-muted border-border/60 flex items-center rounded-lg border p-0.5 text-xs\">\n            <button\n              type=\"button\"\n              className={cn(\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              onClick={() => setTimeframe('7d')}\n            >\n              7 Days\n            </button>\n            <button\n              type=\"button\"\n              className={cn(\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              onClick={() => setTimeframe('30d')}\n            >\n              30 Days\n            </button>\n            <button\n              type=\"button\"\n              className={cn(\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              onClick={() => setTimeframe('90d')}\n            >\n              90 Days\n            </button>\n          </div>\n\n          {/* Log Vitals Entry Dialog */}\n          <Dialog open={isLogDialogOpen} onOpenChange={setIsLogDialogOpen}>\n            <DialogTrigger asChild>\n              <Button size=\"sm\" className=\"gap-1.5 shadow-xs\">\n                <Plus className=\"size-4\" />\n                <span>Log Vitals Entry</span>\n              </Button>\n            </DialogTrigger>\n            <DialogContent className=\"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 className=\"grid grid-cols-1 gap-4 py-2 sm:grid-cols-2\">\n                <div className=\"space-y-1.5 sm:col-span-2\">\n                  <Label htmlFor=\"vital-timestamp-react\" className=\"text-xs\">\n                    Measurement Timestamp\n                  </Label>\n                  <Input\n                    id=\"vital-timestamp-react\"\n                    value={formDate}\n                    onChange={(e) => setFormDate(e.target.value)}\n                    type=\"datetime-local\"\n                    className=\"h-9 text-xs\"\n                  />\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label htmlFor=\"vital-period-react\" className=\"text-xs\">\n                    Context / Reading Period\n                  </Label>\n                  <Select value={formPeriod} onValueChange={setFormPeriod}>\n                    <SelectTrigger id=\"vital-period-react\" className=\"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 className=\"space-y-1.5\">\n                  <Label htmlFor=\"vital-device-react\" className=\"text-xs\">\n                    Telemetry Source Device\n                  </Label>\n                  <Select value={formDevice} onValueChange={setFormDevice}>\n                    <SelectTrigger id=\"vital-device-react\" className=\"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 className=\"space-y-1.5\">\n                  <Label htmlFor=\"systolic-input-react\" className=\"text-xs\">\n                    Systolic Pressure (mmHg)\n                  </Label>\n                  <Input\n                    id=\"systolic-input-react\"\n                    value={formSystolic}\n                    onChange={(e) => setFormSystolic(e.target.value)}\n                    type=\"number\"\n                    placeholder=\"120\"\n                    className=\"h-9 text-xs tabular-nums\"\n                  />\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label htmlFor=\"diastolic-input-react\" className=\"text-xs\">\n                    Diastolic Pressure (mmHg)\n                  </Label>\n                  <Input\n                    id=\"diastolic-input-react\"\n                    value={formDiastolic}\n                    onChange={(e) => setFormDiastolic(e.target.value)}\n                    type=\"number\"\n                    placeholder=\"80\"\n                    className=\"h-9 text-xs tabular-nums\"\n                  />\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label htmlFor=\"pulse-input-react\" className=\"text-xs\">\n                    Resting Heart Rate (bpm)\n                  </Label>\n                  <Input\n                    id=\"pulse-input-react\"\n                    value={formPulse}\n                    onChange={(e) => setFormPulse(e.target.value)}\n                    type=\"number\"\n                    placeholder=\"68\"\n                    className=\"h-9 text-xs tabular-nums\"\n                  />\n                </div>\n\n                <div className=\"space-y-1.5\">\n                  <Label htmlFor=\"glucose-input-react\" className=\"text-xs\">\n                    Blood Glucose (mg/dL)\n                  </Label>\n                  <Input\n                    id=\"glucose-input-react\"\n                    value={formGlucose}\n                    onChange={(e) => setFormGlucose(e.target.value)}\n                    type=\"number\"\n                    placeholder=\"94\"\n                    className=\"h-9 text-xs tabular-nums\"\n                  />\n                </div>\n\n                <div className=\"space-y-1.5 sm:col-span-2\">\n                  <Label htmlFor=\"spo2-input-react\" className=\"text-xs\">\n                    Blood Oxygen SpO2 (%)\n                  </Label>\n                  <Input\n                    id=\"spo2-input-react\"\n                    value={formSpo2}\n                    onChange={(e) => setFormSpo2(e.target.value)}\n                    type=\"number\"\n                    placeholder=\"99\"\n                    className=\"h-9 text-xs tabular-nums\"\n                  />\n                </div>\n\n                <div className=\"space-y-1.5 sm:col-span-2\">\n                  <Label htmlFor=\"vital-notes-react\" className=\"text-xs\">\n                    Clinical Notes & Symptoms (Optional)\n                  </Label>\n                  <Textarea\n                    id=\"vital-notes-react\"\n                    value={formNotes}\n                    onValueChange={setFormNotes}\n                    placeholder=\"e.g. Patient rested seated for 5 minutes prior to measurement. No palpitations or dyspnea.\"\n                    rows={2}\n                    className=\"text-xs\"\n                  />\n                </div>\n              </div>\n\n              <DialogFooter className=\"gap-2 sm:gap-0\">\n                <Button variant=\"outline\" size=\"sm\" onClick={() => setIsLogDialogOpen(false)}>\n                  Cancel\n                </Button>\n                <Button size=\"sm\" onClick={handleLogSubmit}>\n                  Save Reading\n                </Button>\n              </DialogFooter>\n            </DialogContent>\n          </Dialog>\n        </div>\n      </div>\n\n      {/* Success Toast Notification */}\n      {showSuccessNotification && (\n        <div\n          className=\"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 className=\"flex items-center gap-2\">\n            <CheckCircle2 className=\"text-success size-4 shrink-0\" />\n            <span className=\"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            className=\"text-success size-6\"\n            onClick={() => setShowSuccessNotification(false)}\n          >\n            <span className=\"text-xs\">✕</span>\n          </Button>\n        </div>\n      )}\n\n      {/* 4 Primary Vitals Overview Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* 1. Blood Pressure */}\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  className=\"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 className=\"text-success size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Blood Pressure</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                Normal\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3 pt-1\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">122/78</span>\n                  <span className=\"text-muted-foreground text-xs\">mmHg</span>\n                </div>\n                <span className=\"text-muted-foreground text-xs tabular-nums\">MAP 92 mmHg</span>\n              </div>\n\n              {/* Mini Sparkline for BP Trend */}\n              <div className=\"h-7 w-full overflow-hidden pt-1\" aria-label=\"7-day systolic blood pressure trend\">\n                <svg className=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\">\n                  <defs>\n                    <linearGradient id=\"grad-bp-react\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor=\"var(--color-emerald-500, #10b981)\" stopOpacity=\"0.25\" />\n                      <stop offset=\"100%\" stopColor=\"var(--color-emerald-500, #10b981)\" stopOpacity=\"0.0\" />\n                    </linearGradient>\n                  </defs>\n                  <path d={getSparkline(bpHistory).area} fill=\"url(#grad-bp-react)\" />\n                  <path\n                    d={getSparkline(bpHistory).path}\n                    fill=\"none\"\n                    stroke=\"var(--color-emerald-500, #10b981)\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                  <circle\n                    cx={getSparkline(bpHistory).lastPoint.x}\n                    cy={getSparkline(bpHistory).lastPoint.y}\n                    r=\"2.5\"\n                    className=\"fill-success\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">7-Day Mean:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">124/80 mmHg</span>\n              </div>\n              <p className=\"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 className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  className=\"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 className=\"text-destructive size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Resting Heart Rate</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                Healthy\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3 pt-1\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">68</span>\n                  <span className=\"text-muted-foreground text-xs\">bpm</span>\n                </div>\n                <div className=\"text-success flex items-center gap-1 text-xs font-medium tabular-nums\">\n                  <TrendingDown className=\"size-3\" />\n                  <span>-2 bpm</span>\n                </div>\n              </div>\n\n              {/* Mini Sparkline for HR Trend */}\n              <div className=\"h-7 w-full overflow-hidden pt-1\" aria-label=\"7-day resting heart rate trend\">\n                <svg className=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\">\n                  <defs>\n                    <linearGradient id=\"grad-hr-react\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor=\"var(--color-rose-500, #f43f5e)\" stopOpacity=\"0.25\" />\n                      <stop offset=\"100%\" stopColor=\"var(--color-rose-500, #f43f5e)\" stopOpacity=\"0.0\" />\n                    </linearGradient>\n                  </defs>\n                  <path d={getSparkline(hrHistory).area} fill=\"url(#grad-hr-react)\" />\n                  <path\n                    d={getSparkline(hrHistory).path}\n                    fill=\"none\"\n                    stroke=\"var(--color-rose-500, #f43f5e)\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                  <circle\n                    cx={getSparkline(hrHistory).lastPoint.x}\n                    cy={getSparkline(hrHistory).lastPoint.y}\n                    r=\"2.5\"\n                    className=\"fill-destructive\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Normal Range:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">60 – 100 bpm</span>\n              </div>\n              <p className=\"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 className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  className=\"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 className=\"text-info size-4\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Blood Glucose</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                Fasting &lt; 100\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3 pt-1\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">94</span>\n                  <span className=\"text-muted-foreground text-xs\">mg/dL</span>\n                </div>\n                <div className=\"text-muted-foreground flex items-center gap-1 text-xs font-medium tabular-nums\">\n                  <Minus className=\"size-3\" />\n                  <span>Stable</span>\n                </div>\n              </div>\n\n              {/* Mini Sparkline for Glucose Trend */}\n              <div className=\"h-7 w-full overflow-hidden pt-1\" aria-label=\"7-day blood glucose trend\">\n                <svg className=\"h-full w-full overflow-visible\" viewBox=\"0 0 100 28\" preserveAspectRatio=\"none\">\n                  <defs>\n                    <linearGradient id=\"grad-glu-react\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                      <stop offset=\"0%\" stopColor=\"var(--color-sky-500, #0ea5e9)\" stopOpacity=\"0.25\" />\n                      <stop offset=\"100%\" stopColor=\"var(--color-sky-500, #0ea5e9)\" stopOpacity=\"0.0\" />\n                    </linearGradient>\n                  </defs>\n                  <path d={getSparkline(glucoseHistory).area} fill=\"url(#grad-glu-react)\" />\n                  <path\n                    d={getSparkline(glucoseHistory).path}\n                    fill=\"none\"\n                    stroke=\"var(--color-sky-500, #0ea5e9)\"\n                    strokeWidth=\"2\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                  <circle\n                    cx={getSparkline(glucoseHistory).lastPoint.x}\n                    cy={getSparkline(glucoseHistory).lastPoint.y}\n                    r=\"2.5\"\n                    className=\"fill-info\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Fasting Window:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">12 hrs</span>\n              </div>\n              <p className=\"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 className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2.5\">\n                <div\n                  className=\"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 className=\"size-4 text-teal-500\" />\n                </div>\n                <CardTitle className=\"truncate text-sm font-medium\">Blood Oxygen SpO2</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"shrink-0 text-xs\">\n                ≥ 95% Normal\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-3 pt-1\">\n            <div>\n              <div className=\"mb-1 flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n                <div className=\"flex items-baseline gap-1.5\">\n                  <span className=\"text-foreground text-3xl font-bold tracking-tight tabular-nums\">99%</span>\n                  <span className=\"text-muted-foreground text-xs\">SpO2</span>\n                </div>\n                <span className=\"text-success text-xs font-medium\">0 drops detected</span>\n              </div>\n              <Progress value={99} className=\"h-2 [&_[data-slot=progress-indicator]]:bg-teal-500\" />\n              <div className=\"mt-1.5 flex items-center justify-between gap-x-2 text-xs\">\n                <span className=\"text-muted-foreground\">Pulse Oximeter</span>\n                <span className=\"text-muted-foreground tabular-nums\">Target ≥ 95%</span>\n              </div>\n            </div>\n\n            <div className=\"border-border/60 border-t pt-2.5 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <span className=\"text-muted-foreground\">Sleep O2 Baseline:</span>\n                <span className=\"text-foreground font-medium tabular-nums\">98.4%</span>\n              </div>\n              <p className=\"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 className=\"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 className=\"flex items-center gap-2\">\n              <Badge wrap variant=\"outline\" className=\"w-fit text-xs font-normal tabular-nums\">\n                {dailyLogs.length} readings logged\n              </Badge>\n            </div>\n          </div>\n        </CardHeader>\n        <CardContent className=\"p-0 sm:p-6 sm:pt-0\">\n          <div className=\"overflow-x-auto\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"min-w-[120px]\">Date</TableHead>\n                  <TableHead className=\"min-w-[150px]\">Morning Reading</TableHead>\n                  <TableHead className=\"min-w-[150px]\">Evening Reading</TableHead>\n                  <TableHead className=\"min-w-[110px]\">Daily Mean BP</TableHead>\n                  <TableHead className=\"min-w-[120px]\">Fasting Glucose</TableHead>\n                  <TableHead className=\"min-w-[80px]\">SpO2</TableHead>\n                  <TableHead className=\"min-w-[160px]\">Systolic Band Indicator</TableHead>\n                  <TableHead className=\"text-right\">Risk Status</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {dailyLogs.map((log) => (\n                  <TableRow key={log.id} className={log.isToday ? 'bg-muted/25 font-medium' : undefined}>\n                    <TableCell className=\"text-foreground text-xs whitespace-nowrap\">\n                      <div className=\"flex items-center gap-1.5\">\n                        <span className=\"tabular-nums\">{log.date}</span>\n                        {log.isToday && (\n                          <Badge wrap variant=\"secondary\" className=\"h-4.5 px-1.5 text-xs font-normal\">\n                            Now\n                          </Badge>\n                        )}\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"text-xs whitespace-nowrap\">\n                      <span className=\"text-foreground font-medium tabular-nums\">{log.morningBP}</span>\n                      <span className=\"text-muted-foreground text-xs\"> mmHg · </span>\n                      <span className=\"text-muted-foreground tabular-nums\">{log.morningPulse} bpm</span>\n                    </TableCell>\n                    <TableCell className=\"text-xs whitespace-nowrap\">\n                      <span className=\"text-foreground font-medium tabular-nums\">{log.eveningBP}</span>\n                      <span className=\"text-muted-foreground text-xs\"> mmHg · </span>\n                      <span className=\"text-muted-foreground tabular-nums\">{log.eveningPulse} bpm</span>\n                    </TableCell>\n                    <TableCell className=\"text-foreground text-xs font-semibold whitespace-nowrap tabular-nums\">\n                      {log.avgBP}\n                      <span className=\"text-muted-foreground text-xs font-normal\"> mmHg</span>\n                    </TableCell>\n                    <TableCell className=\"text-xs whitespace-nowrap\">\n                      <span className=\"text-foreground font-medium tabular-nums\">{log.fastingGlucose}</span>\n                      <span className=\"text-muted-foreground text-xs\"> mg/dL</span>\n                    </TableCell>\n                    <TableCell className=\"text-foreground text-xs font-medium whitespace-nowrap tabular-nums\">\n                      {log.spo2}%\n                    </TableCell>\n                    <TableCell className=\"text-xs\">\n                      {/* Visual Horizontal Range Pill */}\n                      <div className=\"w-36 space-y-1\">\n                        <div className=\"bg-muted border-border/70 relative h-3 w-full overflow-hidden rounded-full border\">\n                          {/* Normal Zone (110 - 129) */}\n                          <div className=\"bg-success/20 absolute inset-y-0 right-[50%] left-[16%]\" />\n                          {/* Elevated Zone (130 - 139) */}\n                          <div className=\"bg-warning/25 absolute inset-y-0 right-[33%] left-[50%]\" />\n                          {/* High Zone (>= 140) */}\n                          <div className=\"bg-destructive/25 absolute inset-y-0 right-0 left-[67%]\" />\n                          {/* Reading Dot Marker */}\n                          <div\n                            className={cn(\n                              'absolute top-1/2 size-2 -translate-y-1/2 rounded-full shadow-xs',\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 className=\"text-muted-foreground flex justify-between text-xs tabular-nums\">\n                          <span>100</span>\n                          <span className=\"text-success font-medium\">120</span>\n                          <span>140+</span>\n                        </div>\n                      </div>\n                    </TableCell>\n                    <TableCell className=\"text-right\">\n                      <Badge\n                        wrap\n                        variant={\n                          log.riskStatus === 'optimal' ? 'success' : log.riskStatus === 'normal' ? 'success' : 'warning'\n                        }\n                        className=\"text-xs capitalize\"\n                      >\n                        {log.riskLabel}\n                      </Badge>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Threshold & Alert Limits Card */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-2\">\n        <Card>\n          <CardHeader>\n            <div className=\"flex items-center justify-between gap-x-2\">\n              <div className=\"flex items-center gap-2\">\n                <Sliders className=\"text-primary size-4\" />\n                <CardTitle>Configurable Clinical Thresholds</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" className=\"text-xs font-normal\">\n                AHA / ACC Standards\n              </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 className=\"space-y-4\">\n            <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n              <div className=\"space-y-1.5\">\n                <Label className=\"text-xs\">Systolic Alert Limit</Label>\n                <Select value={systolicLimit} onValueChange={setSystolicLimit}>\n                  <SelectTrigger className=\"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 className=\"space-y-1.5\">\n                <Label className=\"text-xs\">Diastolic Alert Limit</Label>\n                <Select value={diastolicLimit} onValueChange={setDiastolicLimit}>\n                  <SelectTrigger className=\"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 className=\"space-y-1.5\">\n                <Label className=\"text-xs\">Heart Rate Alert Range</Label>\n                <Select value={hrAlertRange} onValueChange={setHrAlertRange}>\n                  <SelectTrigger className=\"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 className=\"space-y-1.5\">\n                <Label className=\"text-xs\">Fasting Glucose Warning</Label>\n                <Select value={glucoseAlertLimit} onValueChange={setGlucoseAlertLimit}>\n                  <SelectTrigger className=\"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 className=\"border-border bg-muted/40 flex items-center justify-between gap-x-2 rounded-lg border p-3\">\n              <div className=\"space-y-0.5\">\n                <p className=\"text-foreground text-xs font-medium\">Oxygen Desaturation Limit</p>\n                <p className=\"text-muted-foreground text-xs\">Triggers hypoxemia alert if SpO2 drops below bound.</p>\n              </div>\n              <Badge wrap variant=\"outline\" className=\"text-xs font-medium tabular-nums\">\n                &lt; {spo2AlertLimit}% SpO2\n              </Badge>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <div className=\"flex items-center justify-between gap-x-2\">\n              <div className=\"flex items-center gap-2\">\n                <Bell className=\"text-primary size-4\" />\n                <CardTitle>Automated Clinical Alert Protocol</CardTitle>\n              </div>\n              <Badge wrap variant=\"success\" className=\"gap-1 text-xs\">\n                <ShieldCheck className=\"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 className=\"space-y-4\">\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-0.5\">\n                <Label className=\"text-foreground text-xs font-medium\">Clinician Urgent SMS Alert</Label>\n                <p className=\"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\n                checked={clinicianSmsAlert}\n                onCheckedChange={setClinicianSmsAlert}\n                aria-label=\"Toggle clinician SMS alert\"\n              />\n            </div>\n\n            <Separator />\n\n            <div className=\"flex items-start justify-between gap-4\">\n              <div className=\"space-y-0.5\">\n                <Label className=\"text-foreground text-xs font-medium\">EHR Auto-Sync (FHIR R4 Stream)</Label>\n                <p className=\"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 checked={ehrAutoSync} onCheckedChange={setEhrAutoSync} aria-label=\"Toggle EHR auto sync\" />\n            </div>\n\n            <Separator />\n\n            <div className=\"bg-muted/40 border-border space-y-2 rounded-lg border p-3 text-xs\">\n              <div className=\"flex items-center justify-between gap-x-2\">\n                <div className=\"flex items-center gap-2\">\n                  <Stethoscope className=\"text-primary size-3.5\" />\n                  <span className=\"text-foreground font-semibold\">On-Call Clinical Lead:</span>\n                </div>\n                <span className=\"text-foreground font-medium\">Dr. Sarah Chen, MD (Cardiology)</span>\n              </div>\n              <div className=\"text-muted-foreground flex items-center justify-between gap-x-2\">\n                <span>Pager: #4920 · Priority SLA:</span>\n                <span className=\"text-success font-medium\">&lt; 15 min triage</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/VitalsTrackerChart.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/dialog.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/table.json",
    "https://uipkge.dev/r/react/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"
  ]
}