{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "technical-specs-sheet",
  "title": "Technical Specs Sheet",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/technical-specs-sheet/TechnicalSpecsSheet.svelte",
      "content": "<script lang=\"ts\" module>\n  export 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\n  export interface TechnicalSpecsProps {\n    productTitle?: string\n    modelNumber?: string\n    revision?: string\n    specs?: SpecItem[]\n    className?: string\n  }\n\n  const 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</script>\n\n<script lang=\"ts\">\n  import { CheckCircle2, FileDown, Info, Search, ShieldCheck } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Input } from '$lib/components/ui/input'\n  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '$lib/components/ui/table'\n  import { cn } from '$lib/utils'\n\n  let {\n    productTitle = 'Apex Pro Reference Planar-Magnetic Studio Monitor Headphones',\n    modelNumber = 'APX-950-PRO',\n    revision = 'Rev 2.4 (2026)',\n    specs,\n    className,\n  }: TechnicalSpecsProps = $props()\n\n  void productTitle\n\n  const effectiveSpecs = $derived(specs ?? defaultSpecs)\n\n  let isMetric = $state(true)\n  let activeCategory = $state<'all' | 'acoustic' | 'electrical' | 'physical' | 'connectivity' | 'compliance'>('all')\n  let searchQuery = $state('')\n\n  const 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\n  const filteredSpecs = $derived.by(() => {\n    return effectiveSpecs.filter((item) => {\n      const matchesCat = activeCategory === 'all' || item.category === activeCategory\n      const matchesSearch =\n        searchQuery.trim() === '' ||\n        item.parameter.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        item.metricValue.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        item.imperialValue.toLowerCase().includes(searchQuery.toLowerCase())\n      return matchesCat && matchesSearch\n    })\n  })\n\n  function downloadPdf() {\n    alert(`Downloading official engineering data sheet for ${modelNumber} (${revision})...`)\n  }\n</script>\n\n<Card data-slot=\"technical-specs-sheet\" class={cn('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={cn(\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            onclick={() => (isMetric = true)}\n          >\n            Metric (SI)\n          </button>\n          <button\n            type=\"button\"\n            class={cn(\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            onclick={() => (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\" onclick={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        {#each categories as cat (cat.id)}\n          <button\n            type=\"button\"\n            class={cn(\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            onclick={() => (activeCategory = cat.id as typeof activeCategory)}\n          >\n            {cat.label}\n          </button>\n        {/each}\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 bind:value={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        {#each filteredSpecs as spec (spec.id)}\n          <TableRow class={cn(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                {#if spec.highlight}\n                  <Badge variant=\"secondary\" class=\"h-4.5 px-1.5 font-mono text-xs font-semibold uppercase\">\n                    Key Spec\n                  </Badge>\n                {/if}\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        {/each}\n\n        {#if filteredSpecs.length === 0}\n          <TableRow>\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        {/if}\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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/technical-specs-sheet/TechnicalSpecsSheet.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/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"
  ]
}