{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "technical-specs-sheet",
  "title": "Technical Specs Sheet",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/technical-specs-sheet/TechnicalSpecsSheet.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport { FileDown, ShieldCheck, CheckCircle2, Search, Info } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface SpecItem {\n  id: string\n  category: 'acoustic' | 'electrical' | 'physical' | 'connectivity' | 'compliance'\n  parameter: string\n  metricValue: string\n  imperialValue: string\n  tolerance?: string\n  testCondition?: string\n  highlight?: boolean\n}\n\nexport interface TechnicalSpecsProps {\n  productTitle?: string\n  modelNumber?: string\n  revision?: string\n  specs?: SpecItem[]\n  className?: string\n}\n\nconst defaultSpecs: SpecItem[] = [\n  // Acoustic\n  {\n    id: 's1',\n    category: 'acoustic',\n    parameter: 'Transducer Type',\n    metricValue: '50mm Planar-Magnetic with Neodymium N52 Array',\n    imperialValue: '1.97 in Planar-Magnetic with Neodymium N52 Array',\n    highlight: true,\n  },\n  {\n    id: 's2',\n    category: 'acoustic',\n    parameter: 'Frequency Response',\n    metricValue: '5 Hz – 52,000 Hz',\n    imperialValue: '5 Hz – 52,000 Hz',\n    tolerance: '± 0.5 dB (20 Hz - 20 kHz)',\n    highlight: true,\n  },\n  {\n    id: 's3',\n    category: 'acoustic',\n    parameter: 'Total Harmonic Distortion (THD)',\n    metricValue: '< 0.04% @ 1 kHz, 100 dB SPL',\n    imperialValue: '< 0.04% @ 1 kHz, 100 dB SPL',\n    testCondition: 'IEC 60268-7 Standard',\n  },\n  {\n    id: 's4',\n    category: 'acoustic',\n    parameter: 'Sound Pressure Level (SPL)',\n    metricValue: '106 dB / 1 mW @ 1 kHz',\n    imperialValue: '106 dB / 1 mW @ 1 kHz',\n    testCondition: 'Free-field calibrated',\n  },\n  {\n    id: 's5',\n    category: 'acoustic',\n    parameter: 'Acoustic Enclosure',\n    metricValue: 'Open-Back CNC Milled Aircraft-Grade Aluminum Grille',\n    imperialValue: 'Open-Back CNC Milled Aircraft-Grade Aluminum Grille',\n  },\n\n  // Electrical\n  {\n    id: 's6',\n    category: 'electrical',\n    parameter: 'Nominal Impedance',\n    metricValue: '32 Ω pure resistive load',\n    imperialValue: '32 Ω pure resistive load',\n    tolerance: '± 5% @ 1 kHz',\n    highlight: true,\n  },\n  {\n    id: 's7',\n    category: 'electrical',\n    parameter: 'Maximum Input Power Handling',\n    metricValue: '3,000 mW (3.0 W Continuous)',\n    imperialValue: '3,000 mW (3.0 W Continuous)',\n    testCondition: 'Thermal peak 5,000 mW (100ms)',\n  },\n  {\n    id: 's8',\n    category: 'electrical',\n    parameter: 'Recommended Amplifier Output',\n    metricValue: '250 mW – 2,000 mW @ 32 Ω',\n    imperialValue: '250 mW – 2,000 mW @ 32 Ω',\n  },\n\n  // Physical\n  {\n    id: 's9',\n    category: 'physical',\n    parameter: 'Weight (excluding cable)',\n    metricValue: '385 grams',\n    imperialValue: '13.58 oz (0.85 lbs)',\n    tolerance: '± 5g',\n    highlight: true,\n  },\n  {\n    id: 's10',\n    category: 'physical',\n    parameter: 'Ear Cushion Dimensions (Inner ID)',\n    metricValue: '68 mm (H) × 52 mm (W) × 26 mm (D)',\n    imperialValue: '2.68 in (H) × 2.05 in (W) × 1.02 in (D)',\n  },\n  {\n    id: 's11',\n    category: 'physical',\n    parameter: 'Headband Clamping Force',\n    metricValue: '4.2 Newtons',\n    imperialValue: '0.94 lbf (Pound-force)',\n    tolerance: '± 0.3 N',\n  },\n  {\n    id: 's12',\n    category: 'physical',\n    parameter: 'Earpad Material Composition',\n    metricValue: 'Perforated Lambskin + Cooling Gel Memory Foam Core',\n    imperialValue: 'Perforated Lambskin + Cooling Gel Memory Foam Core',\n  },\n\n  // Connectivity\n  {\n    id: 's13',\n    category: 'connectivity',\n    parameter: 'Headphone Terminals',\n    metricValue: 'Dual 3.5mm Gold-Plated TRRS Balanced Sockets',\n    imperialValue: 'Dual 1/8 in Gold-Plated TRRS Balanced Sockets',\n  },\n  {\n    id: 's14',\n    category: 'connectivity',\n    parameter: 'Included Studio Cable',\n    metricValue: '2.5 meter 8-Core Monocrystalline Silver-Plated Copper (OCC)',\n    imperialValue: '8.20 feet 8-Core Monocrystalline Silver-Plated Copper (OCC)',\n    highlight: true,\n  },\n  {\n    id: 's15',\n    category: 'connectivity',\n    parameter: 'Source Termination',\n    metricValue: '4.4mm Pentaconn Balanced + 6.35mm Gold-Plated Adapter',\n    imperialValue: '4.4mm Pentaconn Balanced + 1/4 in Gold-Plated Adapter',\n  },\n\n  // Compliance\n  {\n    id: 's16',\n    category: 'compliance',\n    parameter: 'Certifications & Directives',\n    metricValue: 'Hi-Res Audio Certified, CE Mark, FCC Class B, RoHS 3, WEEE',\n    imperialValue: 'Hi-Res Audio Certified, CE Mark, FCC Class B, RoHS 3, WEEE',\n    highlight: true,\n  },\n  {\n    id: 's17',\n    category: 'compliance',\n    parameter: 'Operating Temperature & Humidity',\n    metricValue: '-10°C to +45°C (10% to 90% RH non-condensing)',\n    imperialValue: '14°F to 113°F (10% to 90% RH non-condensing)',\n  },\n]\n\nconst props = withDefaults(defineProps<TechnicalSpecsProps>(), {\n  productTitle: 'Apex Pro Reference Planar-Magnetic Studio Monitor Headphones',\n  modelNumber: 'APX-950-PRO',\n  revision: 'Rev 2.4 (2026)',\n})\n\nconst effectiveSpecs = computed(() => props.specs ?? defaultSpecs)\n\nconst isMetric = ref(true)\nconst activeCategory = ref<'all' | 'acoustic' | 'electrical' | 'physical' | 'connectivity' | 'compliance'>('all')\nconst searchQuery = ref('')\n\nconst categories = [\n  { id: 'all', label: 'All Specifications' },\n  { id: 'acoustic', label: 'Acoustic Architecture' },\n  { id: 'electrical', label: 'Electrical & Power' },\n  { id: 'physical', label: 'Dimensions & Weight' },\n  { id: 'connectivity', label: 'Cables & Interconnects' },\n  { id: 'compliance', label: 'Standards & Compliance' },\n]\n\nconst filteredSpecs = computed(() => {\n  return effectiveSpecs.value.filter((item) => {\n    const matchesCat = activeCategory.value === 'all' || item.category === activeCategory.value\n    const matchesSearch =\n      searchQuery.value.trim() === '' ||\n      item.parameter.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      item.metricValue.toLowerCase().includes(searchQuery.value.toLowerCase()) ||\n      item.imperialValue.toLowerCase().includes(searchQuery.value.toLowerCase())\n    return matchesCat && matchesSearch\n  })\n})\n\nfunction downloadPdf() {\n  alert(`Downloading official engineering data sheet for ${props.modelNumber} (${props.revision})...`)\n}\n</script>\n\n<template>\n  <Card data-slot=\"technical-specs-sheet\" :class=\"['border-border w-full shadow-xs', className]\">\n    <CardHeader class=\"border-border bg-muted/20 border-b pb-4\">\n      <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n        <div>\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n              {{ modelNumber }} · {{ revision }}\n            </span>\n            <Badge variant=\"outline\" class=\"text-success font-mono text-xs\"> Laboratory Certified </Badge>\n          </div>\n          <CardTitle class=\"text-foreground text-lg font-semibold tracking-tight sm:text-xl\">\n            Engineering & Technical Specifications Sheet\n          </CardTitle>\n          <CardDescription class=\"text-xs\">\n            Comprehensive acoustic measurements, electrical parameters, material tolerances, and compliance standards.\n          </CardDescription>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <!-- Metric / Imperial Toggle -->\n          <div class=\"border-border bg-background flex items-center rounded-lg border p-0.5 text-xs shadow-2xs\">\n            <button\n              type=\"button\"\n              :class=\"[\n                'rounded-md px-2.5 py-1 font-medium transition-colors',\n                isMetric\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-2xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]\"\n              @click=\"isMetric = true\"\n            >\n              Metric (SI)\n            </button>\n            <button\n              type=\"button\"\n              :class=\"[\n                'rounded-md px-2.5 py-1 font-medium transition-colors',\n                !isMetric\n                  ? 'bg-primary text-primary-foreground font-semibold shadow-2xs'\n                  : 'text-muted-foreground hover:text-foreground',\n              ]\"\n              @click=\"isMetric = false\"\n            >\n              Imperial (US)\n            </button>\n          </div>\n\n          <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs shadow-2xs\" @click=\"downloadPdf\">\n            <FileDown class=\"size-3.5\" />\n            <span>Download Spec PDF</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Controls: Category Filter Tabs & Search Bar -->\n      <div class=\"mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <button\n            v-for=\"cat in categories\"\n            :key=\"cat.id\"\n            type=\"button\"\n            :class=\"[\n              'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n              activeCategory === cat.id\n                ? 'bg-foreground text-background shadow-2xs'\n                : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground border border-transparent',\n            ]\"\n            @click=\"activeCategory = cat.id as any\"\n          >\n            {{ cat.label }}\n          </button>\n        </div>\n\n        <div class=\"relative w-full sm:w-64\">\n          <Search class=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n          <Input v-model=\"searchQuery\" placeholder=\"Search parameters...\" class=\"h-8 pl-8 text-xs\" />\n        </div>\n      </div>\n    </CardHeader>\n\n    <CardContent class=\"p-0\">\n      <Table>\n        <TableHeader>\n          <TableRow class=\"bg-muted/40\">\n            <TableHead class=\"w-[280px]\">Parameter / Measurement</TableHead>\n            <TableHead>Specification ({{ isMetric ? 'Metric' : 'Imperial' }})</TableHead>\n            <TableHead class=\"w-[180px]\">Tolerance / Range</TableHead>\n            <TableHead class=\"w-[220px]\">Test Standard / Method</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <TableRow v-for=\"spec in filteredSpecs\" :key=\"spec.id\" :class=\"[spec.highlight ? 'bg-primary/5' : '']\">\n            <TableCell>\n              <div class=\"flex items-center gap-2\">\n                <span class=\"text-foreground text-xs font-medium\">{{ spec.parameter }}</span>\n                <Badge\n                  v-if=\"spec.highlight\"\n                  variant=\"secondary\"\n                  class=\"h-4.5 px-1.5 font-mono text-xs font-semibold uppercase\"\n                >\n                  Key Spec\n                </Badge>\n              </div>\n            </TableCell>\n\n            <TableCell>\n              <span class=\"text-foreground font-mono text-xs font-semibold\">\n                {{ isMetric ? spec.metricValue : spec.imperialValue }}\n              </span>\n            </TableCell>\n\n            <TableCell>\n              <span class=\"text-muted-foreground font-mono text-xs\">\n                {{ spec.tolerance || '—' }}\n              </span>\n            </TableCell>\n\n            <TableCell>\n              <span class=\"text-muted-foreground text-xs\">\n                {{ spec.testCondition || 'Factory Standard Q/C' }}\n              </span>\n            </TableCell>\n          </TableRow>\n\n          <TableRow v-if=\"filteredSpecs.length === 0\">\n            <TableCell colspan=\"4\" class=\"text-muted-foreground h-28 text-center text-xs\">\n              No matching specifications found for \"{{ searchQuery }}\".\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n\n      <!-- Bottom Compliance Certification Footer Badges -->\n      <div class=\"border-border bg-muted/20 flex flex-wrap items-center justify-between gap-3 border-t p-4 text-xs\">\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-4\">\n          <div class=\"flex items-center gap-1.5\">\n            <ShieldCheck class=\"text-primary size-4\" />\n            <span class=\"text-foreground font-medium\">Calibrated Precision</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <CheckCircle2 class=\"text-success size-4\" />\n            <span>3-Year Studio Warranty Included</span>\n          </div>\n          <div class=\"flex items-center gap-1.5\">\n            <Info class=\"text-info size-4\" />\n            <span>Serial matched drivers (± 0.3 dB stereo tracking)</span>\n          </div>\n        </div>\n\n        <span class=\"text-muted-foreground font-mono text-xs\"> Document ID: SPEC-APX-{{ modelNumber }}-2026 </span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/technical-specs-sheet/TechnicalSpecsSheet.vue"
    },
    {
      "path": "packages/registry-vue/blocks/technical-specs-sheet/index.ts",
      "content": "export { default as TechnicalSpecsSheet } from './TechnicalSpecsSheet.vue'\nexport type { SpecItem, TechnicalSpecsProps } from './TechnicalSpecsSheet.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/technical-specs-sheet/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Comprehensive engineering technical specifications sheet with Metric/Imperial SI toggles, parameter category filters, search, and downloadable PDF trigger.",
  "categories": [
    "ecommerce",
    "data-display"
  ]
}