{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-split-device-mockup",
  "title": "Hero Split Device Mockup",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-split-device-mockup/HeroSplitDeviceMockup.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Monitor, Moon, Smartphone, Sun, Tablet } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface HeroSplitDeviceMockupProps {\n  title?: string\n  description?: string\n  class?: string\n}\n\nconst props = withDefaults(defineProps<HeroSplitDeviceMockupProps>(), {\n  title: 'Responsive components with identical fidelity on every device.',\n  description:\n    'Every primitive and block is engineered with fluid container queries and zero layout shift across desktop, tablet, and mobile displays.',\n})\n\ntype DeviceMode = 'desktop' | 'tablet' | 'mobile'\n\nconst activeMode = ref<DeviceMode>('desktop')\nconst isDarkMode = ref(true)\nconst activeTab = ref<'overview' | 'analytics' | 'activity'>('overview')\nconst isMetricStreaming = ref(true)\n\nconst mockKpis = [\n  { label: 'Active Sessions', value: '24,892', change: '+14.2%', status: 'up' },\n  { label: 'Conversion Rate', value: '4.82%', change: '+0.6%', status: 'up' },\n  { label: 'Avg TTFB', value: '18ms', change: '-4ms', status: 'optimal' },\n]\n\nconst viewportWidthClass = computed(() => {\n  if (activeMode.value === 'desktop') return 'w-full max-w-2xl'\n  if (activeMode.value === 'tablet') return 'w-full max-w-md'\n  return 'w-full max-w-[320px]'\n})\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-split-device-mockup\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24 lg:py-28', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Top Title & Badge Area -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#device-preview\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Smartphone class=\"text-primary size-3.5\" />\n          <span>Fluid Container Queries &bull; Tailwind v4 Ready</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h1 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">\n          {{ title }}\n        </h1>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <!-- Viewport Controls & Interactive Triggers -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <div class=\"border-border bg-muted/50 inline-flex rounded-lg border p-1 shadow-2xs\">\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'desktop'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )\n              \"\n              @click=\"activeMode = 'desktop'\"\n            >\n              <Monitor class=\"size-3.5\" />\n              <span>Desktop (1440px)</span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'tablet'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )\n              \"\n              @click=\"activeMode = 'tablet'\"\n            >\n              <Tablet class=\"size-3.5\" />\n              <span>Tablet (768px)</span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n                  activeMode === 'mobile'\n                    ? 'bg-background text-foreground shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground',\n                )\n              \"\n              @click=\"activeMode = 'mobile'\"\n            >\n              <Smartphone class=\"size-3.5\" />\n              <span>Mobile (375px)</span>\n            </button>\n          </div>\n\n          <Button variant=\"outline\" size=\"sm\" class=\"border-border gap-1.5 text-xs\" @click=\"isDarkMode = !isDarkMode\">\n            <Sun v-if=\"isDarkMode\" class=\"size-3.5\" />\n            <Moon v-else class=\"size-3.5\" />\n            <span>{{ isDarkMode ? 'Dark Frame' : 'Light Frame' }}</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Split Device Mockup Canvas -->\n      <div class=\"mt-12 flex justify-center\">\n        <div\n          :class=\"\n            cn(\n              'border-border bg-card rounded-xl border p-2 shadow-md transition-colors duration-300 ease-out sm:p-3',\n              viewportWidthClass,\n              isDarkMode ? 'dark' : '',\n            )\n          \"\n        >\n          <!-- Browser / Device Chrome Header -->\n          <div class=\"border-border/80 flex items-center justify-between border-b px-2 pt-1 pb-2.5\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-destructive/80 size-2.5 rounded-full\" />\n              <span class=\"bg-warning/80 size-2.5 rounded-full\" />\n              <span class=\"bg-success/80 size-2.5 rounded-full\" />\n            </div>\n\n            <!-- URL Bar -->\n            <div\n              class=\"border-border/60 bg-muted/60 text-muted-foreground mx-auto flex h-6 w-1/2 items-center justify-center truncate rounded-md border px-2 font-mono text-xs\"\n            >\n              https://uipkge.dev/demo/dashboard-kpis\n            </div>\n\n            <div class=\"text-muted-foreground flex items-center gap-1\">\n              <span class=\"bg-success size-2 rounded-full\" />\n              <span class=\"font-mono text-xs\">LIVE</span>\n            </div>\n          </div>\n\n          <!-- Inside Interactive Device Application -->\n          <div class=\"bg-background space-y-4 rounded-lg p-4 pt-4\">\n            <!-- App Header Inside Frame -->\n            <div class=\"border-border flex items-center justify-between border-b pb-3\">\n              <div class=\"flex items-center gap-2\">\n                <div\n                  class=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md text-xs font-bold\"\n                >\n                  UI\n                </div>\n                <div>\n                  <div class=\"text-foreground text-xs font-semibold\">Platform Metrics</div>\n                  <div class=\"text-muted-foreground text-xs\">Production Cluster (us-east-1)</div>\n                </div>\n              </div>\n\n              <!-- Inner App Tabs -->\n              <div class=\"border-border bg-muted/40 flex gap-1 rounded-md border p-0.5\">\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2 py-0.5 text-xs font-medium transition-colors',\n                      activeTab === 'overview'\n                        ? 'bg-background text-foreground shadow-2xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"activeTab = 'overview'\"\n                >\n                  Overview\n                </button>\n                <button\n                  type=\"button\"\n                  :class=\"\n                    cn(\n                      'rounded px-2 py-0.5 text-xs font-medium transition-colors',\n                      activeTab === 'analytics'\n                        ? 'bg-background text-foreground shadow-2xs'\n                        : 'text-muted-foreground hover:text-foreground',\n                    )\n                  \"\n                  @click=\"activeTab = 'analytics'\"\n                >\n                  Analytics\n                </button>\n              </div>\n            </div>\n\n            <!-- KPI Metric Grid in Frame -->\n            <div :class=\"cn('grid gap-2.5', activeMode === 'mobile' ? 'grid-cols-1' : 'grid-cols-3')\">\n              <Card v-for=\"(kpi, idx) in mockKpis\" :key=\"idx\" class=\"border-border bg-card/60 shadow-2xs\">\n                <CardContent class=\"space-y-1 p-3\">\n                  <div class=\"text-muted-foreground text-xs font-medium\">{{ kpi.label }}</div>\n                  <div class=\"text-foreground text-lg font-bold tracking-tight\">{{ kpi.value }}</div>\n                  <div class=\"text-success flex items-center gap-1 text-xs font-medium\">\n                    <span>{{ kpi.change }}</span>\n                    <span class=\"text-muted-foreground\">&bull; vs last week</span>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n\n            <!-- Interactive Wave / Chart Preview -->\n            <div class=\"border-border/80 bg-muted/20 space-y-2 rounded-lg border p-3\">\n              <div class=\"flex items-center justify-between text-xs\">\n                <span class=\"text-foreground font-medium\">Real-time Telemetry Stream</span>\n                <Badge variant=\"outline\" class=\"border-border text-success font-mono text-xs\"> Synced: 0.2ms </Badge>\n              </div>\n\n              <!-- SVG Mock Sparkline Chart -->\n              <svg class=\"stroke-primary fill-primary/10 h-16 w-full\" viewBox=\"0 0 300 60\" preserveAspectRatio=\"none\">\n                <path d=\"M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20 L 300 60 L 0 60 Z\" />\n                <path\n                  d=\"M0 45 Q 25 20, 50 35 T 100 25 T 150 15 T 200 30 T 250 10 T 300 20\"\n                  fill=\"none\"\n                  stroke-width=\"2\"\n                />\n              </svg>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-split-device-mockup/HeroSplitDeviceMockup.vue"
    },
    {
      "path": "packages/registry-vue/blocks/hero-split-device-mockup/index.ts",
      "content": "export { default as HeroSplitDeviceMockup } from './HeroSplitDeviceMockup.vue'\nexport type { HeroSplitDeviceMockupProps } from './HeroSplitDeviceMockup.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/hero-split-device-mockup/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"
  ],
  "description": "Dual viewport device mockup hero with interactive viewport controls and real-time state synchronization.",
  "categories": [
    "hero",
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}