{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "lab-results-viewer",
  "title": "Lab Results Viewer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/lab-results-viewer/LabResultsViewer.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  AlertTriangle,\n  CheckCircle2,\n  FileCheck2,\n  FileDown,\n  FlaskConical,\n  MapPin,\n  Printer,\n  Search,\n  Share2,\n  ShieldCheck,\n  Stethoscope,\n  TrendingDown,\n  TrendingUp,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\nexport type TestStatus = 'Normal' | 'High' | 'Low'\n\nexport interface LabTest {\n  id: string\n  name: string\n  panel: 'lipid' | 'metabolic' | 'renal'\n  panelLabel: string\n  loinc: string\n  value: number\n  unit: string\n  referenceRangeText: string\n  status: TestStatus\n  scaleMin: number\n  scaleMax: number\n  normalMin: number\n  normalMax: number\n  markerPercent: number\n  rangeZoneLeft: number\n  rangeZoneWidth: number\n  trendDelta: string\n  trendDirection: 'up' | 'down' | 'flat'\n  trendStatus: 'warning' | 'success' | 'neutral'\n  priorValue: string\n  clinicalNote: string\n}\n\nconst patientInfo = {\n  name: 'Sarah Jenkins',\n  mrn: 'MRN-9482104',\n  dob: 'Apr 12, 1984 (Age 42)',\n  sex: 'Female',\n  fasting: 'Fasting (12 hours)',\n  accession: 'Q-94827104',\n  orderedBy: 'Dr. Marcus Thorne, MD, FACP',\n  facility: 'Quest Diagnostics Central Lab #842',\n  facilityAddress: '100 Clifton Blvd, Clifton, NJ 07012 (CLIA: 31D0691234)',\n  collectedDate: 'Aug 18, 2026 · 08:30 AM EDT',\n  reportedDate: 'Aug 18, 2026 · 02:45 PM EDT',\n  specimen: 'Serum & Plasma (Gold SST / Lavender EDTA)',\n}\n\nconst labTests: LabTest[] = [\n  {\n    id: 'chol-total',\n    name: 'Total Cholesterol',\n    panel: 'lipid',\n    panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n    loinc: '2093-3',\n    value: 215,\n    unit: 'mg/dL',\n    referenceRangeText: '< 200 mg/dL',\n    status: 'High',\n    scaleMin: 100,\n    scaleMax: 300,\n    normalMin: 100,\n    normalMax: 200,\n    markerPercent: 57.5,\n    rangeZoneLeft: 0,\n    rangeZoneWidth: 50,\n    trendDelta: '+12 mg/dL vs 6 mos ago',\n    trendDirection: 'up',\n    trendStatus: 'warning',\n    priorValue: '203 mg/dL (Feb 2026)',\n    clinicalNote: 'Mild elevation. Suggests elevated total circulating atherogenic lipoprotein particles.',\n  },\n  {\n    id: 'chol-ldl',\n    name: 'LDL Cholesterol (Calculated)',\n    panel: 'lipid',\n    panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n    loinc: '13457-7',\n    value: 138,\n    unit: 'mg/dL',\n    referenceRangeText: '< 100 mg/dL',\n    status: 'High',\n    scaleMin: 50,\n    scaleMax: 200,\n    normalMin: 50,\n    normalMax: 100,\n    markerPercent: 58.7,\n    rangeZoneLeft: 0,\n    rangeZoneWidth: 33.3,\n    trendDelta: '+18 mg/dL vs 6 mos ago',\n    trendDirection: 'up',\n    trendStatus: 'warning',\n    priorValue: '120 mg/dL (Feb 2026)',\n    clinicalNote: 'Above primary prevention target (< 100 mg/dL). Lifestyle modifications indicated.',\n  },\n  {\n    id: 'chol-hdl',\n    name: 'HDL Cholesterol',\n    panel: 'lipid',\n    panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n    loinc: '2085-9',\n    value: 58,\n    unit: 'mg/dL',\n    referenceRangeText: '≥ 50 mg/dL',\n    status: 'Normal',\n    scaleMin: 20,\n    scaleMax: 100,\n    normalMin: 50,\n    normalMax: 100,\n    markerPercent: 47.5,\n    rangeZoneLeft: 37.5,\n    rangeZoneWidth: 62.5,\n    trendDelta: '+2 mg/dL vs 6 mos ago',\n    trendDirection: 'up',\n    trendStatus: 'success',\n    priorValue: '56 mg/dL (Feb 2026)',\n    clinicalNote: 'Desirable cardio-protective level for adult female population.',\n  },\n  {\n    id: 'triglycerides',\n    name: 'Triglycerides',\n    panel: 'lipid',\n    panelLabel: 'Lipid Panel (Cardiovascular Risk)',\n    loinc: '2571-8',\n    value: 142,\n    unit: 'mg/dL',\n    referenceRangeText: '< 150 mg/dL',\n    status: 'Normal',\n    scaleMin: 50,\n    scaleMax: 250,\n    normalMin: 50,\n    normalMax: 150,\n    markerPercent: 46.0,\n    rangeZoneLeft: 0,\n    rangeZoneWidth: 50,\n    trendDelta: '-15 mg/dL vs 6 mos ago',\n    trendDirection: 'down',\n    trendStatus: 'success',\n    priorValue: '157 mg/dL (Feb 2026)',\n    clinicalNote: 'Improved from borderline threshold into normal reference zone.',\n  },\n  {\n    id: 'glucose-fasting',\n    name: 'Fasting Glucose',\n    panel: 'metabolic',\n    panelLabel: 'Glucose Metabolism & Glycemic Control',\n    loinc: '1558-6',\n    value: 92,\n    unit: 'mg/dL',\n    referenceRangeText: '70 – 99 mg/dL',\n    status: 'Normal',\n    scaleMin: 50,\n    scaleMax: 150,\n    normalMin: 70,\n    normalMax: 99,\n    markerPercent: 42.0,\n    rangeZoneLeft: 20,\n    rangeZoneWidth: 29,\n    trendDelta: '-3 mg/dL vs 6 mos ago',\n    trendDirection: 'down',\n    trendStatus: 'success',\n    priorValue: '95 mg/dL (Feb 2026)',\n    clinicalNote: 'Normal euglycemic fasting state. No prediabetes indicators.',\n  },\n  {\n    id: 'egfr-renal',\n    name: 'eGFR (Kidney Function)',\n    panel: 'renal',\n    panelLabel: 'Renal Function & Filtration',\n    loinc: '33914-3',\n    value: 104,\n    unit: 'mL/min/1.73m²',\n    referenceRangeText: '≥ 60 mL/min/1.73m²',\n    status: 'Normal',\n    scaleMin: 30,\n    scaleMax: 130,\n    normalMin: 60,\n    normalMax: 130,\n    markerPercent: 74.0,\n    rangeZoneLeft: 30,\n    rangeZoneWidth: 70,\n    trendDelta: '+1 mL/min vs 6 mos ago',\n    trendDirection: 'up',\n    trendStatus: 'success',\n    priorValue: '103 mL/min (Feb 2026)',\n    clinicalNote: 'Calculated using CKD-EPI 2021 equation. Robust renal clearance performance.',\n  },\n]\n\nconst activeTab = ref<string>('all')\nconst searchQuery = ref<string>('')\nconst isCopiedShare = ref(false)\nconst isDownloadingPdf = ref(false)\n\nconst filteredTests = computed(() => {\n  return labTests.filter((test) => {\n    // Tab filter\n    if (activeTab.value === 'out-of-range' && test.status === 'Normal') return false\n    if (activeTab.value === 'lipid' && test.panel !== 'lipid') return false\n    if (activeTab.value === 'metabolic-renal' && test.panel !== 'metabolic' && test.panel !== 'renal') return false\n\n    // Search query filter\n    if (searchQuery.value.trim()) {\n      const q = searchQuery.value.toLowerCase().trim()\n      return (\n        test.name.toLowerCase().includes(q) ||\n        test.loinc.toLowerCase().includes(q) ||\n        test.panelLabel.toLowerCase().includes(q)\n      )\n    }\n\n    return true\n  })\n})\n\nconst totalNormalCount = labTests.filter((t) => t.status === 'Normal').length\nconst totalOutOfRangeCount = labTests.filter((t) => t.status !== 'Normal').length\n\nfunction handleShare() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(\n      `Lab Results for ${patientInfo.name} (${patientInfo.accession}) - ${patientInfo.collectedDate}`,\n    )\n    isCopiedShare.value = true\n    setTimeout(() => {\n      isCopiedShare.value = false\n    }, 2000)\n  }\n}\n\nfunction handleDownloadPdf() {\n  isDownloadingPdf.value = true\n  setTimeout(() => {\n    isDownloadingPdf.value = false\n  }, 1500)\n}\n\nfunction handlePrint() {\n  if (typeof window !== 'undefined') {\n    window.print()\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"lab-results-viewer\" :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Header: Diagnostic Pathology Report -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-4 sm:p-6 sm:pb-4\">\n        <div class=\"flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between\">\n          <div class=\"space-y-1.5\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Badge variant=\"outline\" class=\"gap-1.5 font-mono text-xs\">\n                <FlaskConical class=\"text-primary size-3.5\" />\n                {{ patientInfo.accession }}\n              </Badge>\n              <Badge variant=\"success\" class=\"gap-1 text-xs\">\n                <FileCheck2 class=\"size-3\" />\n                Final Diagnostic Report\n              </Badge>\n            </div>\n            <CardTitle class=\"text-foreground text-xl font-semibold tracking-tight sm:text-2xl\">\n              Comprehensive Metabolic Panel & Lipid Panel\n            </CardTitle>\n            <CardDescription class=\"text-muted-foreground text-xs sm:text-sm\">\n              Clinical chemistry and lipid risk profiling conducted by {{ patientInfo.facility }}\n            </CardDescription>\n          </div>\n\n          <!-- Quick Action Buttons -->\n          <div class=\"flex flex-wrap items-center gap-2 pt-1 lg:pt-0\">\n            <Button\n              aria-label=\"Download attachment\"\n              variant=\"outline\"\n              size=\"sm\"\n              class=\"gap-1.5 text-xs shadow-xs\"\n              :disabled=\"isDownloadingPdf\"\n              @click=\"handleDownloadPdf\"\n            >\n              <FileDown class=\"size-4\" />\n              {{ isDownloadingPdf ? 'Generating PDF...' : 'Download Official PDF' }}\n            </Button>\n            <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs shadow-xs\" @click=\"handleShare\">\n              <Share2 class=\"size-4\" />\n              {{ isCopiedShare ? 'Link Copied!' : 'Share with Doctor' }}\n            </Button>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              class=\"text-muted-foreground hover:text-foreground hidden sm:inline-flex\"\n              @click=\"handlePrint\"\n            >\n              <Printer class=\"size-4\" />\n              <span class=\"sr-only\">Print Report</span>\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-5 pt-0 sm:p-6 sm:pt-0\">\n        <Separator class=\"mb-4\" />\n\n        <!-- Patient & Order Metadata Grid -->\n        <dl class=\"grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-2 lg:grid-cols-4\">\n          <div class=\"space-y-0.5\">\n            <dt class=\"text-muted-foreground text-xs font-medium\">Patient Details</dt>\n            <dd class=\"text-foreground text-xs font-semibold sm:text-sm\">{{ patientInfo.name }}</dd>\n            <p class=\"text-muted-foreground text-xs\">{{ patientInfo.sex }} · {{ patientInfo.dob }}</p>\n          </div>\n\n          <div class=\"space-y-0.5\">\n            <dt class=\"text-muted-foreground text-xs font-medium\">Ordering Physician</dt>\n            <dd class=\"text-foreground text-xs font-semibold sm:text-sm\">{{ patientInfo.orderedBy }}</dd>\n            <p class=\"text-muted-foreground text-xs\">Internal Medicine & Cardiology</p>\n          </div>\n\n          <div class=\"space-y-0.5\">\n            <dt class=\"text-muted-foreground text-xs font-medium\">Collection & Fasting</dt>\n            <dd class=\"text-foreground text-xs font-semibold tabular-nums sm:text-sm\">\n              {{ patientInfo.collectedDate }}\n            </dd>\n            <p class=\"text-muted-foreground text-xs\">{{ patientInfo.fasting }}</p>\n          </div>\n\n          <div class=\"space-y-0.5\">\n            <dt class=\"text-muted-foreground text-xs font-medium\">Testing Facility</dt>\n            <dd class=\"text-foreground text-xs font-semibold sm:text-sm\">{{ patientInfo.facility }}</dd>\n            <p class=\"text-muted-foreground text-xs\">CLIA ID: 31D0691234 · CAP Accredited</p>\n          </div>\n        </dl>\n      </CardContent>\n    </Card>\n\n    <!-- Overall Summary Banner -->\n    <div\n      class=\"border-warning/30 bg-warning/10 text-foreground flex flex-col gap-4 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5\"\n    >\n      <div class=\"flex items-start gap-3.5\">\n        <div\n          class=\"border-warning/30 bg-warning/20 text-warning mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg border\"\n        >\n          <AlertTriangle class=\"size-5\" />\n        </div>\n        <div class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <h3 class=\"text-foreground text-sm font-semibold sm:text-base\">\n              14 tests normal · 2 tests out of reference range\n            </h3>\n            <Badge variant=\"warning\" class=\"text-xs font-medium\">Clinical Review Advised</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs leading-relaxed sm:text-sm\">\n            Total Cholesterol and LDL Cholesterol exceed recommended reference thresholds. Fasting glucose metabolism\n            and renal function (eGFR) remain optimal.\n          </p>\n        </div>\n      </div>\n\n      <!-- Quick Statistical Count Badges -->\n      <div class=\"flex shrink-0 flex-wrap items-center gap-2 sm:self-center\">\n        <div class=\"border-border bg-card/90 flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs shadow-2xs\">\n          <span class=\"bg-success size-2 rounded-full\" />\n          <span class=\"text-muted-foreground font-medium\">In Range:</span>\n          <span class=\"text-foreground font-semibold tabular-nums\">14</span>\n        </div>\n        <div class=\"border-border bg-card/90 flex items-center gap-2 rounded-lg border px-3 py-1.5 text-xs shadow-2xs\">\n          <span class=\"bg-warning size-2 rounded-full\" />\n          <span class=\"text-muted-foreground font-medium\">Out of Range:</span>\n          <span class=\"text-warning font-semibold tabular-nums\">2</span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Interactive Filtering & Search Header -->\n    <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n      <Tabs v-model=\"activeTab\" class=\"w-full sm:w-auto\">\n        <TabsList class=\"grid grid-cols-4 sm:inline-flex\">\n          <TabsTrigger value=\"all\" class=\"text-xs font-medium\"> All ({{ labTests.length }}) </TabsTrigger>\n          <TabsTrigger value=\"out-of-range\" class=\"text-xs font-medium\">\n            Out of Range ({{ totalOutOfRangeCount }})\n          </TabsTrigger>\n          <TabsTrigger value=\"lipid\" class=\"text-xs font-medium\"> Lipid (4) </TabsTrigger>\n          <TabsTrigger value=\"metabolic-renal\" class=\"text-xs font-medium\"> Metabolic & Renal (2) </TabsTrigger>\n        </TabsList>\n      </Tabs>\n\n      <!-- Test Search Filter Input -->\n      <div class=\"relative w-full sm:w-64\">\n        <Search class=\"text-muted-foreground absolute top-1/2 left-3 size-3.5 -translate-y-1/2\" />\n        <input\n          v-model=\"searchQuery\"\n          type=\"text\"\n          placeholder=\"Filter tests or LOINC...\"\n          class=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8.5 w-full rounded-lg border pr-3 pl-9 text-xs transition-colors focus-visible:ring-[3px] focus-visible:outline-none\"\n        />\n      </div>\n    </div>\n\n    <!-- Diagnostic Panels & Test Results Table -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"border-border border-b p-4 sm:px-6\">\n        <div class=\"flex items-center justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Laboratory Test Panels</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Quantitative measurements, standard LOINC reference intervals, and 6-month historical trend comparison.\n            </CardDescription>\n          </div>\n          <span class=\"text-muted-foreground hidden font-mono text-xs tabular-nums sm:inline-block\">\n            Showing {{ filteredTests.length }} of {{ labTests.length }} tests\n          </span>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow>\n                <TableHead class=\"min-w-[180px] text-xs font-semibold\">Test Name & Code</TableHead>\n                <TableHead class=\"min-w-[120px] text-xs font-semibold\">Measured Value</TableHead>\n                <TableHead class=\"w-24 text-xs font-semibold\">Flag</TableHead>\n                <TableHead class=\"min-w-[120px] text-xs font-semibold\">Reference Range</TableHead>\n                <TableHead class=\"min-w-[210px] text-xs font-semibold\">Visual Scale</TableHead>\n                <TableHead class=\"min-w-[170px] text-right text-xs font-semibold\">Historical 6-Mo Delta</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow\n                v-for=\"test in filteredTests\"\n                :key=\"test.id\"\n                :class=\"cn('transition-colors', test.status === 'High' && 'bg-warning/5 hover:bg-warning/10')\"\n              >\n                <!-- Test Name & LOINC -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"space-y-0.5\">\n                    <p class=\"text-foreground text-xs font-semibold sm:text-sm\">{{ test.name }}</p>\n                    <div class=\"flex items-center gap-1.5\">\n                      <span class=\"text-muted-foreground font-mono text-xs\">LOINC: {{ test.loinc }}</span>\n                      <span class=\"text-muted-foreground text-xs\">{{ test.panelLabel }}</span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Measured Result -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"flex items-baseline gap-1\">\n                    <span\n                      :class=\"\n                        cn(\n                          'text-base font-semibold tabular-nums sm:text-lg',\n                          test.status === 'High' && 'text-warning font-semibold',\n                          test.status === 'Normal' && 'text-foreground',\n                        )\n                      \"\n                    >\n                      {{ test.value }}\n                    </span>\n                    <span class=\"text-muted-foreground text-xs font-medium\">{{ test.unit }}</span>\n                  </div>\n                </TableCell>\n\n                <!-- Status Flag Badge -->\n                <TableCell class=\"py-3.5\">\n                  <Badge\n                    :variant=\"test.status === 'High' ? 'warning' : 'success'\"\n                    class=\"px-2 py-0.5 text-xs font-semibold\"\n                  >\n                    {{ test.status }}\n                  </Badge>\n                </TableCell>\n\n                <!-- Reference Range -->\n                <TableCell class=\"py-3.5\">\n                  <span class=\"text-foreground font-mono text-xs font-medium tabular-nums\">\n                    {{ test.referenceRangeText }}\n                  </span>\n                </TableCell>\n\n                <!-- Visual Reference Range Bar with Patient Needle Marker -->\n                <TableCell class=\"py-3.5\">\n                  <div class=\"w-full max-w-[210px] space-y-1\">\n                    <div class=\"bg-muted/80 relative flex h-2.5 w-full items-center overflow-visible rounded-full\">\n                      <!-- Normal Safe Zone (Green Region) -->\n                      <div\n                        class=\"border-success/40 bg-success/25 absolute h-full rounded-full border-x\"\n                        :style=\"{\n                          left: `${test.rangeZoneLeft}%`,\n                          width: `${test.rangeZoneWidth}%`,\n                        }\"\n                      />\n\n                      <!-- Patient Value Marker Pin -->\n                      <div\n                        class=\"absolute flex -translate-x-1/2 flex-col items-center\"\n                        :style=\"{ left: `${test.markerPercent}%` }\"\n                      >\n                        <span\n                          :class=\"\n                            cn(\n                              'border-background size-3.5 rounded-full border-2 shadow-xs transition-transform hover:scale-125',\n                              test.status === 'High' && 'bg-warning ring-warning/30 ring-2',\n                              test.status === 'Normal' && 'bg-success ring-success/30 ring-2',\n                              test.status === 'Low' && 'bg-info ring-info/30 ring-2',\n                            )\n                          \"\n                        />\n                      </div>\n                    </div>\n\n                    <!-- Min, Target, and Max Scale Labels -->\n                    <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs tabular-nums\">\n                      <span>{{ test.scaleMin }}</span>\n                      <span class=\"text-success text-xs font-medium\">Normal</span>\n                      <span>{{ test.scaleMax }}</span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Historical 6-Mo Trend Delta -->\n                <TableCell class=\"py-3.5 text-right\">\n                  <div class=\"flex flex-col items-end gap-0.5\">\n                    <div class=\"flex items-center gap-1\">\n                      <component\n                        :is=\"test.trendDirection === 'up' ? TrendingUp : TrendingDown\"\n                        :class=\"\n                          cn(\n                            'size-3.5',\n                            test.trendStatus === 'warning' && 'text-warning',\n                            test.trendStatus === 'success' && 'text-success',\n                          )\n                        \"\n                      />\n                      <span\n                        :class=\"\n                          cn(\n                            'text-xs font-semibold tabular-nums',\n                            test.trendStatus === 'warning' && 'text-warning',\n                            test.trendStatus === 'success' && 'text-foreground',\n                          )\n                        \"\n                      >\n                        {{ test.trendDelta }}\n                      </span>\n                    </div>\n                    <span class=\"text-muted-foreground text-xs tabular-nums\"> Prior: {{ test.priorValue }} </span>\n                  </div>\n                </TableCell>\n              </TableRow>\n\n              <TableRow v-if=\"filteredTests.length === 0\">\n                <TableCell colspan=\"6\" class=\"py-8 text-center\">\n                  <p class=\"text-muted-foreground text-xs\">No laboratory test records matched your filter criteria.</p>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Doctor's Clinical Impression Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-3 sm:p-6 sm:pb-4\">\n        <div class=\"flex flex-wrap items-center justify-between gap-3\">\n          <div class=\"flex items-center gap-2.5\">\n            <div class=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-lg\">\n              <Stethoscope class=\"size-4\" />\n            </div>\n            <div>\n              <CardTitle class=\"text-base font-semibold\">Doctor's Clinical Impression & Action Plan</CardTitle>\n              <CardDescription class=\"text-xs\">\n                Physician interpretation provided by {{ patientInfo.orderedBy }}\n              </CardDescription>\n            </div>\n          </div>\n\n          <Badge variant=\"outline\" class=\"gap-1.5 text-xs font-normal\">\n            <ShieldCheck class=\"text-success size-3.5\" />\n            Verified Electronic Signature\n          </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-4 p-5 pt-0 sm:p-6 sm:pt-0\">\n        <!-- Physician Qualitative Commentary -->\n        <div class=\"border-border/70 bg-muted/30 rounded-lg border p-4\">\n          <p class=\"text-foreground text-xs leading-relaxed sm:text-sm\">\n            “Lipid panel shows mild elevation in LDL Cholesterol (138 mg/dL) and Total Cholesterol (215 mg/dL). Fasting\n            blood glucose (92 mg/dL) and renal filtration markers (eGFR 104 mL/min/1.73m²) demonstrate outstanding\n            stability. Recommend continuing Mediterranean dietary pattern with emphasis on soluble fiber and healthy\n            monounsaturated fats, 150 minutes of moderate aerobic exercise weekly, and repeat lipid panel in 3 months.\n            Statin therapy is not warranted at the patient's current 10-year ASCVD risk threshold.”\n          </p>\n        </div>\n\n        <!-- Clinical Action Checklist -->\n        <div class=\"space-y-2\">\n          <span class=\"text-muted-foreground text-xs font-medium tracking-wide uppercase\">\n            Recommended Clinical Action Items\n          </span>\n          <div class=\"grid grid-cols-1 gap-2.5 sm:grid-cols-3\">\n            <div class=\"border-border bg-card flex items-start gap-2.5 rounded-lg border p-3\">\n              <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              <div class=\"space-y-0.5\">\n                <p class=\"text-foreground text-xs font-medium\">Repeat Lipid Panel</p>\n                <p class=\"text-muted-foreground text-xs\">Schedule re-test in 90 days (Nov 2026)</p>\n              </div>\n            </div>\n\n            <div class=\"border-border bg-card flex items-start gap-2.5 rounded-lg border p-3\">\n              <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              <div class=\"space-y-0.5\">\n                <p class=\"text-foreground text-xs font-medium\">Mediterranean Diet</p>\n                <p class=\"text-muted-foreground text-xs\">Maintain high fiber and plant sterols intake</p>\n              </div>\n            </div>\n\n            <div class=\"border-border bg-card flex items-start gap-2.5 rounded-lg border p-3\">\n              <CheckCircle2 class=\"text-primary mt-0.5 size-4 shrink-0\" />\n              <div class=\"space-y-0.5\">\n                <p class=\"text-foreground text-xs font-medium\">Cardiovascular Wellness</p>\n                <p class=\"text-muted-foreground text-xs\">150 mins weekly moderate aerobic activity</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Physician Signature Footer Strip -->\n        <Separator />\n        <div class=\"flex flex-col gap-2 pt-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"flex items-center gap-2\">\n            <div\n              class=\"border-border bg-muted flex size-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold\"\n            >\n              MT\n            </div>\n            <div>\n              <p class=\"text-foreground text-xs font-semibold\">{{ patientInfo.orderedBy }}</p>\n              <p class=\"text-muted-foreground text-xs\">NPI #1849204812 · Medical License #20MD084721</p>\n            </div>\n          </div>\n\n          <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n            Digitally signed on Aug 18, 2026 · 15:45 EDT\n          </p>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Lab Facility Certification Footer -->\n    <div\n      class=\"border-border/60 text-muted-foreground flex flex-col gap-2 rounded-lg border border-dashed px-4 py-3 text-xs sm:flex-row sm:items-center sm:justify-between\"\n    >\n      <div class=\"flex items-center gap-1.5\">\n        <MapPin class=\"size-3.5 shrink-0\" />\n        <span>{{ patientInfo.facilityAddress }}</span>\n      </div>\n      <div class=\"flex items-center gap-2 font-mono text-xs\">\n        <span>Specimen: {{ patientInfo.specimen }}</span>\n        <span>·</span>\n        <span>CLIA Certified</span>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/LabResultsViewer.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/separator.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/tabs.json"
  ],
  "description": "Quest and Labcorp style diagnostic lab results report viewer: patient metadata header, clinical attention banner, grouped test panels (Lipid, Glucose, Renal) with LOINC codes, reference range linear scale bars, historical 6-month trend deltas, and doctor clinical impression card with electronic verification.",
  "categories": [
    "healthcare",
    "app"
  ]
}