{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multimodal-vision-playground",
  "title": "Multimodal Vision Playground",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/multimodal-vision-playground/MultimodalVisionPlayground.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  Bot,\n  Braces,\n  Check,\n  CheckCircle2,\n  Copy,\n  Cpu,\n  Crosshair,\n  Eye,\n  FileCheck,\n  Info,\n  Layers,\n  RefreshCw,\n  Scan,\n  Send,\n  ShieldCheck,\n  Sparkles,\n  Tag,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { cn } from '@/lib/utils'\n\nexport interface MultimodalVisionPlaygroundProps {\n  className?: string\n}\n\ninterface ModelOption {\n  id: string\n  name: string\n  provider: string\n  latency: string\n  tokenUsage: number\n  meanConfidence: number\n}\n\ninterface VisionTaskOption {\n  id: string\n  name: string\n  description: string\n}\n\ninterface BoundingBox {\n  id: string\n  label: string\n  text: string\n  category: string\n  confidence: number\n  coordinates: string\n  top: string\n  left: string\n  width: string\n  height: string\n  colorBorder: string\n  colorBg: string\n  colorBadge: string\n}\n\ninterface ExtractedEntity {\n  id: string\n  fieldName: string\n  extractedValue: string\n  confidence: number\n  boxId: string\n  dataType: string\n}\n\ninterface LineItem {\n  id: number\n  description: string\n  qty: number\n  unit: string\n  unitPrice: number\n  totalPrice: number\n  confidence: number\n}\n\ninterface VqaPreset {\n  id: string\n  question: string\n  answer: string\n  targetBoxId: string\n}\n\nconst models: ModelOption[] = [\n  {\n    id: 'claude-3-5-sonnet-vision',\n    name: 'Claude 3.5 Sonnet Vision',\n    provider: 'Anthropic',\n    latency: '642ms',\n    tokenUsage: 1420,\n    meanConfidence: 99.4,\n  },\n  {\n    id: 'gpt-4o-vision',\n    name: 'GPT-4o Vision',\n    provider: 'OpenAI',\n    latency: '584ms',\n    tokenUsage: 1380,\n    meanConfidence: 99.2,\n  },\n]\n\nconst visionTasks: VisionTaskOption[] = [\n  {\n    id: 'ocr-extraction',\n    name: 'Document OCR & Extraction',\n    description: 'High-precision layout bounding boxes, key-value extraction & structured RFC-8259 JSON parsing.',\n  },\n  {\n    id: 'object-detection',\n    name: 'Object & Bounding Box Detection',\n    description: 'Semantic region segmentation, visual entity localization, and coordinate spatial mapping.',\n  },\n  {\n    id: 'vqa',\n    name: 'Visual Question Answering',\n    description: 'Multi-step visual reasoning and spatial evidence grounding directly on the document image.',\n  },\n]\n\nconst boundingBoxes: BoundingBox[] = [\n  {\n    id: 'box-logo',\n    label: 'Vendor Logo',\n    text: 'APEX CLOUD SYSTEMS INC.',\n    category: 'vendor',\n    confidence: 99.9,\n    coordinates: '[42, 48, 110, 320]',\n    top: '4%',\n    left: '4%',\n    width: '42%',\n    height: '11%',\n    colorBorder: 'border-warning/70',\n    colorBg: 'bg-warning/10',\n    colorBadge: 'bg-warning/15 text-warning border-warning/30',\n  },\n  {\n    id: 'box-inv',\n    label: 'Invoice #',\n    text: 'INV-84920',\n    category: 'identifier',\n    confidence: 99.8,\n    coordinates: '[42, 680, 110, 1140]',\n    top: '4%',\n    left: '54%',\n    width: '42%',\n    height: '11%',\n    colorBorder: 'border-info/70',\n    colorBg: 'bg-info/10',\n    colorBadge: 'bg-info/15 text-info border-info/30',\n  },\n  {\n    id: 'box-billto',\n    label: 'Customer Entity',\n    text: 'Cyberdyne Systems Corp',\n    category: 'customer',\n    confidence: 99.3,\n    coordinates: '[145, 48, 250, 480]',\n    top: '17%',\n    left: '4%',\n    width: '46%',\n    height: '13%',\n    colorBorder: 'border-info/70',\n    colorBg: 'bg-info/10',\n    colorBadge: 'bg-info/15 text-info border-info/30',\n  },\n  {\n    id: 'box-due',\n    label: 'Due Date & Terms',\n    text: 'Due: 2026-09-01 (Net 10)',\n    category: 'date',\n    confidence: 99.4,\n    coordinates: '[145, 680, 250, 1140]',\n    top: '17%',\n    left: '54%',\n    width: '42%',\n    height: '13%',\n    colorBorder: 'border-destructive/70',\n    colorBg: 'bg-destructive/10',\n    colorBadge: 'bg-destructive/15 text-destructive border-destructive/30',\n  },\n  {\n    id: 'box-table',\n    label: 'Line Items Table',\n    text: '3 Items (GPU, NVMe, Bandwidth)',\n    category: 'table',\n    confidence: 99.5,\n    coordinates: '[320, 48, 710, 1140]',\n    top: '32%',\n    left: '4%',\n    width: '92%',\n    height: '39%',\n    colorBorder: 'border-chart-1/70',\n    colorBg: 'bg-chart-1/10',\n    colorBadge: 'bg-chart-1/15 text-chart-1 border-chart-1/30',\n  },\n  {\n    id: 'box-subtotal',\n    label: 'Subtotal & VAT',\n    text: 'Subtotal: $1,150.00 · VAT: $95.00',\n    category: 'financial',\n    confidence: 99.1,\n    coordinates: '[730, 620, 830, 1140]',\n    top: '73%',\n    left: '50%',\n    width: '46%',\n    height: '10%',\n    colorBorder: 'border-chart-2/70',\n    colorBg: 'bg-chart-2/10',\n    colorBadge: 'bg-chart-2/15 text-chart-2 border-chart-2/30',\n  },\n  {\n    id: 'box-total',\n    label: 'Total Amount $1,245.00',\n    text: 'Total Due: USD $1,245.00',\n    category: 'total',\n    confidence: 99.9,\n    coordinates: '[850, 620, 960, 1140]',\n    top: '85%',\n    left: '50%',\n    width: '46%',\n    height: '11%',\n    colorBorder: 'border-success/80 border-success',\n    colorBg: 'bg-success/15',\n    colorBadge: 'bg-success/20 text-success border-success/40 font-semibold',\n  },\n]\n\nconst extractedEntities: ExtractedEntity[] = [\n  {\n    id: 'ent-1',\n    fieldName: 'Invoice Number',\n    extractedValue: 'INV-84920',\n    confidence: 99.8,\n    boxId: 'box-inv',\n    dataType: 'string',\n  },\n  {\n    id: 'ent-2',\n    fieldName: 'Due Date',\n    extractedValue: '2026-09-01',\n    confidence: 99.4,\n    boxId: 'box-due',\n    dataType: 'date',\n  },\n  {\n    id: 'ent-3',\n    fieldName: 'Issue Date',\n    extractedValue: '2026-08-21',\n    confidence: 99.6,\n    boxId: 'box-due',\n    dataType: 'date',\n  },\n  {\n    id: 'ent-4',\n    fieldName: 'Vendor Name',\n    extractedValue: 'Apex Cloud Systems Inc.',\n    confidence: 99.9,\n    boxId: 'box-logo',\n    dataType: 'string',\n  },\n  {\n    id: 'ent-5',\n    fieldName: 'Vendor Tax ID',\n    extractedValue: 'US-EIN-94-8271923',\n    confidence: 98.9,\n    boxId: 'box-logo',\n    dataType: 'string',\n  },\n  {\n    id: 'ent-6',\n    fieldName: 'Customer Entity',\n    extractedValue: 'Cyberdyne Systems Corp',\n    confidence: 99.3,\n    boxId: 'box-billto',\n    dataType: 'string',\n  },\n  {\n    id: 'ent-7',\n    fieldName: 'Subtotal Amount',\n    extractedValue: '$1,150.00',\n    confidence: 99.7,\n    boxId: 'box-subtotal',\n    dataType: 'currency',\n  },\n  {\n    id: 'ent-8',\n    fieldName: 'VAT / Tax Rate (8.25%)',\n    extractedValue: '$95.00',\n    confidence: 99.1,\n    boxId: 'box-subtotal',\n    dataType: 'currency',\n  },\n  {\n    id: 'ent-9',\n    fieldName: 'Total Amount Due',\n    extractedValue: '$1,245.00',\n    confidence: 99.9,\n    boxId: 'box-total',\n    dataType: 'currency',\n  },\n]\n\nconst lineItems: LineItem[] = [\n  {\n    id: 1,\n    description: 'GPU Compute Instance (H100 NVLink 80GB)',\n    qty: 2,\n    unit: 'hours',\n    unitPrice: 450.0,\n    totalPrice: 900.0,\n    confidence: 99.5,\n  },\n  {\n    id: 2,\n    description: 'High-Throughput NVMe Block Storage 4TB',\n    qty: 1,\n    unit: 'month',\n    unitPrice: 150.0,\n    totalPrice: 150.0,\n    confidence: 99.2,\n  },\n  {\n    id: 3,\n    description: 'Dedicated Egress Bandwidth Allocation (10Gbps)',\n    qty: 1,\n    unit: 'allocation',\n    unitPrice: 100.0,\n    totalPrice: 100.0,\n    confidence: 98.8,\n  },\n]\n\nconst vqaPresets: VqaPreset[] = [\n  {\n    id: 'q-total',\n    question: 'What is the total amount due on this invoice?',\n    answer:\n      'The total amount due is $1,245.00 USD, parsed from the summary block with 99.9% confidence. It includes $1,150.00 subtotal plus $95.00 VAT (8.25%).',\n    targetBoxId: 'box-total',\n  },\n  {\n    id: 'q-due',\n    question: 'What is the payment due date and terms?',\n    answer:\n      'The invoice payment due date is September 01, 2026 under Net 10 Day terms (issued on August 21, 2026), extracted with 99.4% confidence.',\n    targetBoxId: 'box-due',\n  },\n  {\n    id: 'q-math',\n    question: 'Are all line item totals and taxes mathematically verified?',\n    answer:\n      'Yes. Calculated ($450 × 2) + $150 + $100 = $1,150.00 subtotal. VAT of 8.25% ($94.88 rounded to $95.00) brings grand total to $1,245.00 with 0 arithmetic errors.',\n    targetBoxId: 'box-table',\n  },\n  {\n    id: 'q-vendor',\n    question: 'What is the verified vendor entity and tax identifier?',\n    answer:\n      'Vendor is Apex Cloud Systems Inc. with verified Federal Tax EIN: US-EIN-94-8271923, extracted with 99.9% confidence.',\n    targetBoxId: 'box-logo',\n  },\n]\n\nexport function MultimodalVisionPlayground({ className }: MultimodalVisionPlaygroundProps) {\n  // State variables\n  const [selectedModel, setSelectedModel] = React.useState('claude-3-5-sonnet-vision')\n  const [selectedTask, setSelectedTask] = React.useState('ocr-extraction')\n  const [isAnalyzing, setIsAnalyzing] = React.useState(false)\n  const [activeBoxId, setActiveBoxId] = React.useState<string | null>(null)\n  const [activeTab, setActiveTab] = React.useState('entities')\n  const [isCopied, setIsCopied] = React.useState(false)\n  const [copiedFieldId, setCopiedFieldId] = React.useState<string | null>(null)\n\n  // Bounding box layer toggles\n  const [showOcrText, setShowOcrText] = React.useState(true)\n  const [showConfidence, setShowConfidence] = React.useState(true)\n  const [showCoordinates, setShowCoordinates] = React.useState(true)\n\n  // VQA Question Answering state\n  const [vqaInput, setVqaInput] = React.useState(vqaPresets[0].question)\n  const [currentVqaAnswer, setCurrentVqaAnswer] = React.useState(vqaPresets[0].answer)\n  const [isAnsweringVqa, setIsAnsweringVqa] = React.useState(false)\n\n  const activeModel = React.useMemo(() => {\n    return models.find((m) => m.id === selectedModel) ?? models[0]\n  }, [selectedModel])\n\n  const activeBox = React.useMemo(() => {\n    if (!activeBoxId) return null\n    return boundingBoxes.find((b) => b.id === activeBoxId) ?? null\n  }, [activeBoxId])\n\n  const rawJsonSchema = React.useMemo(() => {\n    return JSON.stringify(\n      {\n        $schema: 'https://json-schema.org/draft/2020-12/schema',\n        document_type: 'commercial_invoice',\n        document_id: 'doc_vision_9824f8a1',\n        model: selectedModel,\n        mean_confidence: activeModel.meanConfidence / 100,\n        metadata: {\n          dimensions: { width: 1240, height: 1754, dpi: 300 },\n          orientation_degrees: 0,\n          language: 'en-US',\n          pages_analyzed: 1,\n          processed_at: new Date().toISOString(),\n        },\n        extracted_fields: {\n          invoice_number: {\n            value: 'INV-84920',\n            confidence: 0.998,\n            bbox: [42, 680, 110, 1140],\n          },\n          issue_date: {\n            value: '2026-08-21',\n            confidence: 0.996,\n            bbox: [145, 680, 250, 1140],\n          },\n          due_date: {\n            value: '2026-09-01',\n            confidence: 0.994,\n            bbox: [145, 680, 250, 1140],\n          },\n          vendor: {\n            name: 'Apex Cloud Systems Inc.',\n            tax_id: 'US-EIN-94-8271923',\n            address: '500 Howard St, Suite 400, San Francisco, CA 94105',\n            confidence: 0.999,\n          },\n          customer: {\n            name: 'Cyberdyne Systems Corp',\n            account_id: 'ACC-90412',\n            confidence: 0.993,\n          },\n          currency: 'USD',\n          subtotal: 1150.0,\n          tax_amount: 95.0,\n          tax_rate_pct: 8.25,\n          total_amount: 1245.0,\n        },\n        line_items: lineItems.map((item) => ({\n          item_id: item.id,\n          description: item.description,\n          quantity: item.qty,\n          unit: item.unit,\n          unit_price: item.unitPrice,\n          total_price: item.totalPrice,\n          confidence: item.confidence / 100,\n        })),\n        validation_rules: {\n          math_checksum_passed: true,\n          tax_arithmetic_valid: true,\n          vendor_sanctions_screened: true,\n          flagged_anomalies_count: 0,\n        },\n      },\n      null,\n      2,\n    )\n  }, [selectedModel, activeModel])\n\n  const runVisionAnalysis = React.useCallback(() => {\n    if (isAnalyzing) return\n    setIsAnalyzing(true)\n    setActiveBoxId(null)\n\n    setTimeout(() => {\n      setIsAnalyzing(false)\n    }, 650)\n  }, [isAnalyzing])\n\n  const handleCopyJson = React.useCallback(() => {\n    navigator.clipboard?.writeText(rawJsonSchema)\n    setIsCopied(true)\n    setTimeout(() => {\n      setIsCopied(false)\n    }, 2000)\n  }, [rawJsonSchema])\n\n  const handleCopyEntity = React.useCallback((field: ExtractedEntity) => {\n    navigator.clipboard?.writeText(field.extractedValue)\n    setCopiedFieldId(field.id)\n    setTimeout(() => {\n      setCopiedFieldId(null)\n    }, 2000)\n  }, [])\n\n  const selectVqaPreset = React.useCallback((preset: VqaPreset) => {\n    setVqaInput(preset.question)\n    setIsAnsweringVqa(true)\n    setActiveBoxId(preset.targetBoxId)\n\n    setTimeout(() => {\n      setCurrentVqaAnswer(preset.answer)\n      setIsAnsweringVqa(false)\n    }, 350)\n  }, [])\n\n  const submitCustomVqa = React.useCallback(() => {\n    if (!vqaInput.trim() || isAnsweringVqa) return\n    setIsAnsweringVqa(true)\n\n    setTimeout(() => {\n      const match = vqaPresets.find((p) => p.question.toLowerCase().includes(vqaInput.toLowerCase().slice(0, 8)))\n      if (match) {\n        setCurrentVqaAnswer(match.answer)\n        setActiveBoxId(match.targetBoxId)\n      } else {\n        setCurrentVqaAnswer(\n          `Multimodal reasoning on visual region: Extracted relevant visual context from document canvas. Invoice INV-84920 Total is $1,245.00 due Sep 01, 2026. Arithmetic verified.`,\n        )\n        setActiveBoxId('box-total')\n      }\n      setIsAnsweringVqa(false)\n    }, 400)\n  }, [vqaInput, isAnsweringVqa])\n\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {\n        e.preventDefault()\n        runVisionAnalysis()\n      }\n    }\n    window.addEventListener('keydown', handleKeyDown)\n    return () => {\n      window.removeEventListener('keydown', handleKeyDown)\n    }\n  }, [runVisionAnalysis])\n\n  return (\n    <div data-slot=\"multimodal-vision-playground\" className={cn('w-full space-y-6', className)}>\n      {/* Header Controls Strip */}\n      <div className=\"border-border bg-card flex flex-wrap items-center justify-between gap-4 rounded-lg border p-4 shadow-xs\">\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-3\">\n          <div className=\"flex items-center gap-2.5\">\n            <div className=\"bg-primary/10 text-primary flex size-8 items-center justify-center rounded-md\">\n              <Scan className=\"size-4.5\" />\n            </div>\n            <div className=\"min-w-[12rem]\">\n              <h2 className=\"text-foreground text-sm font-semibold tracking-tight\">\n                Multimodal Vision & Document Intelligence\n              </h2>\n              <p className=\"text-muted-foreground text-xs\">\n                Visual reasoning, layout parsing & entity extraction studio\n              </p>\n            </div>\n          </div>\n\n          <Separator orientation=\"vertical\" className=\"hidden h-7 sm:block\" />\n\n          {/* Model Selector */}\n          <div className=\"w-52\">\n            <Select value={selectedModel} onValueChange={setSelectedModel}>\n              <SelectTrigger className=\"h-9 w-full text-xs font-medium\" aria-label=\"Select Vision Model\">\n                <SelectValue placeholder=\"Select Vision Model\" />\n              </SelectTrigger>\n              <SelectContent>\n                {models.map((m) => (\n                  <SelectItem key={m.id} value={m.id}>\n                    <div className=\"flex items-center gap-2\">\n                      <Sparkles className=\"text-primary size-3.5\" />\n                      <span>{m.name}</span>\n                    </div>\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n\n          {/* Vision Task Selector */}\n          <div className=\"w-56\">\n            <Select value={selectedTask} onValueChange={setSelectedTask}>\n              <SelectTrigger className=\"h-9 w-full text-xs\" aria-label=\"Select Vision Task\">\n                <SelectValue placeholder=\"Select Vision Task\" />\n              </SelectTrigger>\n              <SelectContent>\n                {visionTasks.map((task) => (\n                  <SelectItem key={task.id} value={task.id}>\n                    <span>{task.name}</span>\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n\n          {/* Telemetry Pill */}\n          <div className=\"border-border bg-muted/60 text-muted-foreground hidden items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs lg:inline-flex\">\n            <Cpu className=\"text-primary size-3.5\" />\n            <span>{activeModel.latency}</span>\n            <span>{activeModel.tokenUsage} tokens</span>\n            <span className=\"text-success font-medium\">{activeModel.meanConfidence}% conf</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          {/* Run Vision Model Primary Button */}\n          <Button\n            size=\"sm\"\n            className=\"bg-primary text-primary-foreground hover:bg-primary/90 h-9 gap-1.5 text-xs font-medium shadow-xs\"\n            disabled={isAnalyzing}\n            onClick={runVisionAnalysis}\n          >\n            {isAnalyzing ? <RefreshCw className=\"size-3.5 animate-spin\" /> : <Eye className=\"size-3.5\" />}\n            <span>{isAnalyzing ? 'Analyzing Image...' : 'Run Vision Model'}</span>\n            <kbd className=\"bg-primary-foreground/20 hidden items-center rounded px-1 py-0.5 font-mono text-xs sm:inline-flex\">\n              ⌘↵\n            </kbd>\n          </Button>\n        </div>\n      </div>\n\n      {/* 2-Column Vision Studio (50% / 50%) */}\n      <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n        {/* Left Column: Visual Document Preview & Interactive Bounding Box Canvas (50%) */}\n        <div className=\"space-y-4 lg:col-span-6\">\n          <Card className=\"border-border bg-card overflow-hidden shadow-xs\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                    <Layers className=\"size-4\" />\n                  </div>\n                  <div>\n                    <CardTitle className=\"text-sm font-semibold\">Visual Document Canvas</CardTitle>\n                    <CardDescription className=\"text-xs\">\n                      Spatial bounding polygon detection & OCR anchor layer\n                    </CardDescription>\n                  </div>\n                </div>\n                <Badge variant=\"outline\" className=\"text-muted-foreground font-mono text-xs\">\n                  1240 × 1754 · 300 DPI\n                </Badge>\n              </div>\n\n              {/* Bounding Box Layer Toggles */}\n              <div className=\"border-border/80 bg-muted/40 mt-3 flex flex-wrap items-center justify-between gap-3 rounded-md border px-3 py-2 text-xs\">\n                <span className=\"text-muted-foreground flex items-center gap-1.5 font-medium\">\n                  <Crosshair className=\"text-primary size-3.5\" />\n                  <span>Layer Overlays:</span>\n                </span>\n\n                <div className=\"flex flex-wrap items-center gap-4\">\n                  {/* Toggle: OCR Text */}\n                  <div className=\"flex items-center gap-1.5\">\n                    <Switch id=\"react-show-ocr\" checked={showOcrText} onCheckedChange={setShowOcrText} />\n                    <label htmlFor=\"react-show-ocr\" className=\"text-foreground cursor-pointer text-xs font-medium\">\n                      OCR Text\n                    </label>\n                  </div>\n\n                  {/* Toggle: Confidence Scores */}\n                  <div className=\"flex items-center gap-1.5\">\n                    <Switch id=\"react-show-conf\" checked={showConfidence} onCheckedChange={setShowConfidence} />\n                    <label htmlFor=\"react-show-conf\" className=\"text-foreground cursor-pointer text-xs font-medium\">\n                      Confidence\n                    </label>\n                  </div>\n\n                  {/* Toggle: Coordinates */}\n                  <div className=\"flex items-center gap-1.5\">\n                    <Switch id=\"react-show-coords\" checked={showCoordinates} onCheckedChange={setShowCoordinates} />\n                    <label htmlFor=\"react-show-coords\" className=\"text-foreground cursor-pointer text-xs font-medium\">\n                      Coordinates\n                    </label>\n                  </div>\n                </div>\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"pt-0\">\n              {/* Document Viewport Container */}\n              <div className=\"border-border bg-muted/30 relative w-full overflow-hidden rounded-lg border p-3 select-none sm:p-4\">\n                {/* The Rendered High-Fidelity Document Sheet */}\n                <div className=\"border-border/90 bg-card text-card-foreground relative mx-auto flex aspect-[1/1.36] min-h-[420px] w-full max-w-[560px] max-w-full flex-col justify-between overflow-auto rounded-md border p-4 shadow-sm sm:p-6\">\n                  {/* Watermark Background Texture */}\n                  <div className=\"pointer-events-none absolute inset-0 bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px] opacity-[0.03] dark:opacity-[0.05]\" />\n\n                  {/* Document Header Section */}\n                  <div className=\"border-border/70 relative z-10 flex items-start justify-between border-b pb-4\">\n                    {/* Vendor Brand Info */}\n                    <div className=\"space-y-1\">\n                      <div className=\"flex items-center gap-2\">\n                        <div className=\"bg-primary/20 text-primary flex size-6 items-center justify-center rounded text-xs font-bold\">\n                          ▲\n                        </div>\n                        <span className=\"text-foreground text-xs font-bold tracking-wider uppercase\">\n                          Apex Cloud Systems\n                        </span>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">500 Howard St, Suite 400</p>\n                      <p className=\"text-muted-foreground text-xs\">San Francisco, CA 94105</p>\n                      <p className=\"text-muted-foreground font-mono text-xs\">EIN: US-94-8271923</p>\n                    </div>\n\n                    {/* Invoice Meta */}\n                    <div className=\"space-y-1 text-right\">\n                      <div className=\"bg-primary/10 text-primary inline-block rounded px-2 py-0.5 text-xs font-bold\">\n                        TAX INVOICE\n                      </div>\n                      <p className=\"text-foreground font-mono text-xs font-semibold\">INV-84920</p>\n                      <p className=\"text-muted-foreground text-xs\">Issued: Aug 21, 2026</p>\n                      <p className=\"text-destructive text-xs font-medium\">Due: Sep 01, 2026</p>\n                    </div>\n                  </div>\n\n                  {/* Bill To & Account Details */}\n                  <div className=\"border-border/60 relative z-10 grid grid-cols-1 gap-3 border-b py-3 text-xs sm:grid-cols-2\">\n                    <div>\n                      <span className=\"text-muted-foreground text-xs font-semibold uppercase\">Billed To:</span>\n                      <p className=\"text-foreground mt-0.5 font-semibold\">Cyberdyne Systems Corp</p>\n                      <p className=\"text-muted-foreground\">100 Cyberdyne Blvd, Suite 800</p>\n                      <p className=\"text-muted-foreground\">San Francisco, CA 94107</p>\n                    </div>\n                    <div className=\"text-right\">\n                      <span className=\"text-muted-foreground text-xs font-semibold uppercase\">Payment Terms:</span>\n                      <p className=\"text-foreground mt-0.5 font-medium\">Net 10 Days (Wire Transfer)</p>\n                      <p className=\"text-muted-foreground font-mono\">PO Ref: PO-2026-90412</p>\n                      <p className=\"text-muted-foreground\">Currency: USD ($)</p>\n                    </div>\n                  </div>\n\n                  {/* Document Line Items Table Mockup */}\n                  <div className=\"relative z-10 flex-1 py-3\">\n                    <div className=\"w-full text-xs\">\n                      <div className=\"border-border/80 text-muted-foreground grid grid-cols-12 gap-1 border-b pb-1.5 font-semibold\">\n                        <div className=\"col-span-6\">Item & Description</div>\n                        <div className=\"col-span-2 text-center\">Qty</div>\n                        <div className=\"col-span-2 text-right\">Rate</div>\n                        <div className=\"col-span-2 text-right\">Amount</div>\n                      </div>\n                      <div className=\"divide-border/40 divide-y text-xs\">\n                        <div className=\"grid grid-cols-12 items-center gap-1 py-2\">\n                          <div className=\"col-span-6\">\n                            <p className=\"text-foreground font-medium\">GPU Instance (H100 NVLink 80GB)</p>\n                            <p className=\"text-muted-foreground text-xs\">Dedicated high-speed cluster</p>\n                          </div>\n                          <div className=\"col-span-2 text-center font-mono\">2 hrs</div>\n                          <div className=\"col-span-2 text-right font-mono\">$450.00</div>\n                          <div className=\"col-span-2 text-right font-mono font-medium\">$900.00</div>\n                        </div>\n                        <div className=\"grid grid-cols-12 items-center gap-1 py-2\">\n                          <div className=\"col-span-6\">\n                            <p className=\"text-foreground font-medium\">High-Throughput NVMe Storage</p>\n                            <p className=\"text-muted-foreground text-xs\">4TB Tier-1 SSD Volume</p>\n                          </div>\n                          <div className=\"col-span-2 text-center font-mono\">1 mo</div>\n                          <div className=\"col-span-2 text-right font-mono\">$150.00</div>\n                          <div className=\"col-span-2 text-right font-mono font-medium\">$150.00</div>\n                        </div>\n                        <div className=\"grid grid-cols-12 items-center gap-1 py-2\">\n                          <div className=\"col-span-6\">\n                            <p className=\"text-foreground font-medium\">Dedicated Egress Bandwidth</p>\n                            <p className=\"text-muted-foreground text-xs\">10Gbps Burstable Pipe</p>\n                          </div>\n                          <div className=\"col-span-2 text-center font-mono\">1 alloc</div>\n                          <div className=\"col-span-2 text-right font-mono\">$100.00</div>\n                          <div className=\"col-span-2 text-right font-mono font-medium\">$100.00</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n\n                  {/* Financial Calculation Bottom Strip */}\n                  <div className=\"border-border/80 relative z-10 flex items-end justify-between border-t pt-3\">\n                    <div className=\"space-y-1\">\n                      <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                        <ShieldCheck className=\"text-success size-3.5\" />\n                        <span>Cryptographic Checksum: 0x8F9A2B</span>\n                      </div>\n                      <p className=\"text-muted-foreground text-xs\">Wire: Wells Fargo Routing 121000358</p>\n                    </div>\n                    <div className=\"w-48 space-y-1 text-right text-xs\">\n                      <div className=\"text-muted-foreground flex justify-between\">\n                        <span>Subtotal:</span>\n                        <span className=\"text-foreground font-mono font-medium\">$1,150.00</span>\n                      </div>\n                      <div className=\"text-muted-foreground flex justify-between\">\n                        <span>VAT (8.25%):</span>\n                        <span className=\"text-foreground font-mono font-medium\">$95.00</span>\n                      </div>\n                      <div className=\"border-border text-foreground flex justify-between border-t pt-1 text-xs font-bold sm:text-sm\">\n                        <span>Total Due:</span>\n                        <span className=\"text-success font-mono\">$1,245.00</span>\n                      </div>\n                    </div>\n                  </div>\n\n                  {/* INTERACTIVE BOUNDING BOX OVERLAYS LAYER */}\n                  <div className=\"pointer-events-auto absolute inset-0 z-20\">\n                    {boundingBoxes.map((box) => (\n                      <div\n                        key={box.id}\n                        tabIndex={0}\n                        role=\"button\"\n                        aria-label={`${box.label}: ${box.text}`}\n                        style={{\n                          top: box.top,\n                          left: box.left,\n                          width: box.width,\n                          height: box.height,\n                        }}\n                        className={cn(\n                          'focus-visible:ring-primary absolute cursor-pointer rounded border-2 transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-hidden',\n                          box.colorBorder,\n                          box.colorBg,\n                          activeBoxId === box.id\n                            ? 'ring-primary z-30 scale-[1.01] opacity-100 shadow-md ring-2'\n                            : 'hover:ring-primary/60 opacity-85 hover:opacity-100 hover:ring-1',\n                        )}\n                        onMouseEnter={() => setActiveBoxId(box.id)}\n                        onMouseLeave={() => setActiveBoxId(null)}\n                        onClick={() => setActiveBoxId(box.id)}\n                        onFocus={() => setActiveBoxId(box.id)}\n                        onBlur={() => setActiveBoxId(null)}\n                      >\n                        {/* Corner Anchor Dots */}\n                        <span className=\"bg-primary border-background absolute -top-1 -left-1 size-2 rounded-full border\" />\n                        <span className=\"bg-primary border-background absolute -top-1 -right-1 size-2 rounded-full border\" />\n                        <span className=\"bg-primary border-background absolute -bottom-1 -left-1 size-2 rounded-full border\" />\n                        <span className=\"bg-primary border-background absolute -right-1 -bottom-1 size-2 rounded-full border\" />\n\n                        {/* Floating Metadata Tag on Box */}\n                        <div\n                          className={cn(\n                            'absolute -top-5.5 left-0 flex items-center gap-1 rounded px-1.5 py-0.5 text-xs whitespace-nowrap shadow-xs transition-opacity',\n                            box.colorBadge,\n                          )}\n                        >\n                          <Tag className=\"size-3\" />\n                          <span className=\"font-semibold\">{box.label}</span>\n                          {showConfidence && <span className=\"font-mono text-xs opacity-90\">{box.confidence}%</span>}\n                        </div>\n\n                        {/* OCR Text Preview Ribbon (Bottom) */}\n                        {showOcrText && (\n                          <div className=\"bg-foreground/90 text-background py-0.2 absolute -bottom-5 left-0 max-w-full truncate rounded px-1.5 font-mono text-xs shadow-xs\">\n                            {box.text}\n                          </div>\n                        )}\n\n                        {/* Coordinates Pill */}\n                        {showCoordinates && activeBoxId === box.id && (\n                          <div className=\"bg-background/95 border-border text-muted-foreground absolute top-1 right-1 rounded border px-1 py-0.5 font-mono text-xs shadow-xs\">\n                            {box.coordinates}\n                          </div>\n                        )}\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n            </CardContent>\n\n            <CardFooter className=\"border-border text-muted-foreground flex items-center justify-between border-t pt-3 text-xs\">\n              <span className=\"flex items-center gap-1.5\">\n                <Info className=\"text-primary size-3.5\" />\n                <span>Hover or click any bounding box to isolate extracted entities</span>\n              </span>\n              {activeBox ? (\n                <span className=\"text-foreground font-mono font-medium\">\n                  Active: {activeBox.label} ({activeBox.confidence}%)\n                </span>\n              ) : (\n                <span className=\"font-mono text-xs\">7 Bounding Anchors</span>\n              )}\n            </CardFooter>\n          </Card>\n        </div>\n\n        {/* Right Column: Structured Output & Analysis Studio (50%) */}\n        <div className=\"space-y-4 lg:col-span-6\">\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardHeader className=\"pb-3\">\n              <div className=\"flex flex-wrap items-center justify-between gap-3\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md\">\n                    <Bot className=\"size-4\" />\n                  </div>\n                  <div>\n                    <CardTitle className=\"text-sm font-semibold\">Structured Output & Visual Analysis</CardTitle>\n                    <CardDescription className=\"text-xs\">\n                      Multi-modal entity parsing, JSON schemas & visual reasoning\n                    </CardDescription>\n                  </div>\n                </div>\n\n                {/* Status Badge */}\n                <Badge variant=\"outline\" className=\"border-success/30 bg-success/10 text-success font-mono text-xs\">\n                  <CheckCircle2 className=\"text-success mr-1 size-3\" />\n                  Validated · 0 Errors\n                </Badge>\n              </div>\n            </CardHeader>\n\n            <CardContent className=\"space-y-4 pt-0\">\n              <Tabs value={activeTab} onValueChange={setActiveTab} className=\"w-full\">\n                <TabsList className=\"grid h-9 w-full grid-cols-4\">\n                  <TabsTrigger value=\"entities\" className=\"text-xs\">\n                    Key-Values\n                  </TabsTrigger>\n                  <TabsTrigger value=\"table\" className=\"text-xs\">\n                    Line Items\n                  </TabsTrigger>\n                  <TabsTrigger value=\"json\" className=\"text-xs\">\n                    Raw JSON\n                  </TabsTrigger>\n                  <TabsTrigger value=\"reasoning\" className=\"text-xs\">\n                    Reasoning\n                  </TabsTrigger>\n                </TabsList>\n\n                {/* TAB 1: Extracted Key-Value Data Table */}\n                <TabsContent value=\"entities\" className=\"mt-4 space-y-3\">\n                  <div className=\"border-border overflow-hidden rounded-md border\">\n                    <div className=\"overflow-x-auto\">\n                      <Table>\n                        <TableHeader>\n                          <TableRow className=\"bg-muted/50 text-xs\">\n                            <TableHead className=\"font-semibold\">Field Name</TableHead>\n                            <TableHead className=\"font-semibold\">Extracted Value</TableHead>\n                            <TableHead className=\"text-center font-semibold\">Confidence</TableHead>\n                            <TableHead className=\"text-right font-semibold\">Action</TableHead>\n                          </TableRow>\n                        </TableHeader>\n                        <TableBody className=\"text-xs\">\n                          {extractedEntities.map((field) => (\n                            <TableRow\n                              key={field.id}\n                              className={cn(\n                                'cursor-pointer transition-colors',\n                                activeBoxId === field.boxId ? 'bg-primary/10 font-medium' : 'hover:bg-muted/40',\n                              )}\n                              onMouseEnter={() => setActiveBoxId(field.boxId)}\n                              onMouseLeave={() => setActiveBoxId(null)}\n                            >\n                              <TableCell className=\"text-foreground py-2.5 font-medium\">\n                                <div className=\"flex items-center gap-1.5\">\n                                  <span\n                                    className={cn(\n                                      'size-1.5 rounded-full',\n                                      activeBoxId === field.boxId ? 'bg-primary' : 'bg-muted-foreground/40',\n                                    )}\n                                  />\n                                  <span>{field.fieldName}</span>\n                                </div>\n                              </TableCell>\n                              <TableCell className=\"text-foreground py-2.5 font-mono\">{field.extractedValue}</TableCell>\n                              <TableCell className=\"py-2.5 text-center\">\n                                <Badge\n                                  variant=\"secondary\"\n                                  className={cn(\n                                    'font-mono text-xs',\n                                    field.confidence >= 99.5\n                                      ? 'border-success/20 bg-success/10 text-success border'\n                                      : 'border-info/20 bg-info/10 text-info border',\n                                  )}\n                                >\n                                  {field.confidence}%\n                                </Badge>\n                              </TableCell>\n                              <TableCell className=\"py-2.5 text-right\">\n                                <Button\n                                  variant=\"ghost\"\n                                  size=\"sm\"\n                                  className=\"text-muted-foreground hover:text-foreground h-7 w-7 p-0\"\n                                  aria-label=\"Copy field value\"\n                                  onClick={(e) => {\n                                    e.stopPropagation()\n                                    handleCopyEntity(field)\n                                  }}\n                                >\n                                  {copiedFieldId === field.id ? (\n                                    <Check className=\"text-success size-3.5\" />\n                                  ) : (\n                                    <Copy className=\"size-3.5\" />\n                                  )}\n                                </Button>\n                              </TableCell>\n                            </TableRow>\n                          ))}\n                        </TableBody>\n                      </Table>\n                    </div>\n                  </div>\n                </TabsContent>\n\n                {/* TAB 2: Line Items Tabular Structure */}\n                <TabsContent value=\"table\" className=\"mt-4 space-y-3\">\n                  <div className=\"border-border overflow-hidden rounded-md border\">\n                    <div className=\"overflow-x-auto\">\n                      <Table>\n                        <TableHeader>\n                          <TableRow className=\"bg-muted/50 text-xs\">\n                            <TableHead className=\"w-8 font-semibold\">#</TableHead>\n                            <TableHead className=\"font-semibold\">Description</TableHead>\n                            <TableHead className=\"text-center font-semibold\">Qty</TableHead>\n                            <TableHead className=\"text-right font-semibold\">Unit Price</TableHead>\n                            <TableHead className=\"text-right font-semibold\">Total</TableHead>\n                          </TableRow>\n                        </TableHeader>\n                        <TableBody className=\"text-xs\">\n                          {lineItems.map((item) => (\n                            <TableRow\n                              key={item.id}\n                              className=\"hover:bg-muted/40 cursor-pointer\"\n                              onMouseEnter={() => setActiveBoxId('box-table')}\n                              onMouseLeave={() => setActiveBoxId(null)}\n                            >\n                              <TableCell className=\"text-muted-foreground py-2.5 font-mono\">{item.id}</TableCell>\n                              <TableCell className=\"text-foreground py-2.5 font-medium\">\n                                <p>{item.description}</p>\n                                <span className=\"text-muted-foreground font-mono text-xs\">\n                                  Confidence: {item.confidence}%\n                                </span>\n                              </TableCell>\n                              <TableCell className=\"py-2.5 text-center font-mono\">\n                                {item.qty} {item.unit}\n                              </TableCell>\n                              <TableCell className=\"py-2.5 text-right font-mono\">\n                                ${item.unitPrice.toFixed(2)}\n                              </TableCell>\n                              <TableCell className=\"text-foreground py-2.5 text-right font-mono font-semibold\">\n                                ${item.totalPrice.toFixed(2)}\n                              </TableCell>\n                            </TableRow>\n                          ))}\n                        </TableBody>\n                      </Table>\n                    </div>\n                  </div>\n                </TabsContent>\n\n                {/* TAB 3: Raw Structured JSON Schema */}\n                <TabsContent value=\"json\" className=\"mt-4 space-y-3\">\n                  <div className=\"bg-muted/60 border-border flex items-center justify-between rounded-t-md border border-b-0 px-3 py-2 text-xs\">\n                    <span className=\"text-muted-foreground flex items-center gap-1.5 font-mono\">\n                      <Braces className=\"text-primary size-3.5\" />\n                      <span>rfc8259-invoice-schema.json</span>\n                    </span>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      className=\"text-muted-foreground hover:text-foreground h-7 px-2 text-xs\"\n                      onClick={handleCopyJson}\n                    >\n                      {isCopied ? <Check className=\"text-success mr-1 size-3.5\" /> : <Copy className=\"mr-1 size-3.5\" />}\n                      <span>{isCopied ? 'Copied JSON!' : 'Copy Schema'}</span>\n                    </Button>\n                  </div>\n                  <pre className=\"border-border bg-muted/30 text-foreground max-h-[320px] overflow-x-auto overflow-y-auto rounded-b-md border p-3.5 font-mono text-xs leading-relaxed\">\n                    <code>{rawJsonSchema}</code>\n                  </pre>\n                </TabsContent>\n\n                {/* TAB 4: Visual Reasoning & Question Answering */}\n                <TabsContent value=\"reasoning\" className=\"mt-4 space-y-4\">\n                  {/* Prose Summary Box */}\n                  <div className=\"border-border/90 bg-muted/30 space-y-2.5 rounded-lg border p-3.5 text-xs\">\n                    <div className=\"flex items-center gap-2\">\n                      <Sparkles className=\"text-primary size-4\" />\n                      <h4 className=\"text-foreground text-xs font-semibold\">Multimodal Reasoning Summary</h4>\n                    </div>\n                    <p className=\"text-muted-foreground leading-relaxed\">\n                      Identified standard commercial invoice with 3 line items. VAT calculation validated with 0\n                      arithmetic errors. Vendor entity verified against active directory with clean 0.0° skew angle and\n                      300 DPI clarity.\n                    </p>\n                    <div className=\"border-border/60 grid grid-cols-1 gap-2 border-t pt-1 sm:grid-cols-3\">\n                      <div className=\"border-border/70 bg-card rounded border p-2\">\n                        <span className=\"text-muted-foreground text-xs\">Arithmetic Check</span>\n                        <p className=\"text-success mt-0.5 font-semibold\">100% Match</p>\n                      </div>\n                      <div className=\"border-border/70 bg-card rounded border p-2\">\n                        <span className=\"text-muted-foreground text-xs\">Layout Skew</span>\n                        <p className=\"text-foreground mt-0.5 font-mono font-medium\">0.0° (Aligned)</p>\n                      </div>\n                      <div className=\"border-border/70 bg-card rounded border p-2\">\n                        <span className=\"text-muted-foreground text-xs\">Optical Clarity</span>\n                        <p className=\"text-foreground mt-0.5 font-semibold\">300 DPI High</p>\n                      </div>\n                    </div>\n                  </div>\n\n                  {/* Interactive VQA Console */}\n                  <div className=\"space-y-2.5\">\n                    <label className=\"text-foreground flex items-center justify-between text-xs font-semibold\">\n                      <span>Visual Question Answering (VQA):</span>\n                      <span className=\"text-muted-foreground text-xs font-normal\">Click a sample prompt</span>\n                    </label>\n\n                    {/* Preset Question Chips */}\n                    <div className=\"flex flex-wrap gap-1.5\">\n                      {vqaPresets.map((preset) => (\n                        <button\n                          key={preset.id}\n                          type=\"button\"\n                          className=\"border-border/80 bg-muted/40 hover:border-primary/60 hover:bg-primary/5 rounded-md border px-2 py-1 text-left text-xs transition-colors\"\n                          onClick={() => selectVqaPreset(preset)}\n                        >\n                          {preset.question}\n                        </button>\n                      ))}\n                    </div>\n\n                    {/* Query Input Box */}\n                    <div className=\"flex items-center gap-2\">\n                      <Input\n                        value={vqaInput}\n                        onChange={(e) => setVqaInput(e.target.value)}\n                        placeholder=\"Ask a visual question about this document...\"\n                        className=\"h-9 text-xs\"\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter') submitCustomVqa()\n                        }}\n                      />\n                      <Button\n                        size=\"sm\"\n                        className=\"h-9 gap-1.5 px-3 text-xs font-medium\"\n                        disabled={isAnsweringVqa}\n                        onClick={submitCustomVqa}\n                      >\n                        {isAnsweringVqa ? (\n                          <RefreshCw className=\"size-3.5 animate-spin\" />\n                        ) : (\n                          <Send className=\"size-3.5\" />\n                        )}\n                        <span>Ask</span>\n                      </Button>\n                    </div>\n\n                    {/* Reasoning Answer Box */}\n                    <div className=\"border-primary/20 bg-primary/5 text-foreground flex items-start gap-2.5 rounded-md border p-3 text-xs leading-relaxed\">\n                      <Bot className=\"text-primary mt-0.5 size-4 shrink-0\" />\n                      <div>\n                        <p className=\"text-foreground font-medium\">{currentVqaAnswer}</p>\n                      </div>\n                    </div>\n                  </div>\n                </TabsContent>\n              </Tabs>\n            </CardContent>\n\n            <CardFooter className=\"border-border text-muted-foreground flex items-center justify-between border-t pt-3 text-xs\">\n              <span className=\"flex items-center gap-1.5\">\n                <FileCheck className=\"text-success size-3.5\" />\n                <span>Extracted 10 Entities · 3 Line Items</span>\n              </span>\n              <span className=\"font-mono\">Throughput: ~412 tok/s</span>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default MultimodalVisionPlayground\n",
      "type": "registry:page",
      "target": "~/components/blocks/MultimodalVisionPlayground.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/input.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/tabs.json"
  ],
  "description": "GPT-4o/Claude 3.5 Vision multimodal visual analysis studio with interactive bounding box overlays, OCR entity extraction, tabular line item parsing, raw RFC-8259 JSON viewer, and visual question answering (VQA).",
  "categories": [
    "ai",
    "app",
    "dashboard"
  ]
}