{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "price-drop-alert-card",
  "title": "Price Drop Alert Card",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/price-drop-alert-card/PriceDropAlertCard.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  BellRing,\n  Check,\n  History,\n  Mail,\n  RefreshCw,\n  ShieldCheck,\n  Smartphone,\n  Tag,\n  Trash2,\n  TrendingDown,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\ninterface TrackedProduct {\n  id: string\n  name: string\n  variant: string\n  category: string\n  sku: string\n  image: string\n  currentPrice: number\n  targetPrice: number\n  lowest90d: number\n  channel: 'email' | 'sms'\n  status: 'monitoring' | 'reached'\n  active: boolean\n}\n\nconst props = defineProps<{\n  class?: HTMLAttributes['class']\n}>()\n\nconst currentPrice = 299.0\nconst msrpPrice = 349.0\nconst lowest90dPrice = 279.0\n\nconst alertMethod = ref<'email' | 'sms'>('email')\nconst targetPrice = ref<number>(280)\nconst inStockNotification = ref<boolean>(true)\nconst alertSaved = ref<boolean>(false)\nconst isRefreshing = ref<boolean>(false)\n\nconst trackedProducts = ref<TrackedProduct[]>([\n  {\n    id: 'prod-1',\n    name: 'Pro Studio Wireless Headphones',\n    variant: 'Space Black',\n    category: 'Audio',\n    sku: 'SKU-8842',\n    image: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=300&auto=format&fit=crop&q=80',\n    currentPrice: 299.0,\n    targetPrice: 280.0,\n    lowest90d: 279.0,\n    channel: 'email',\n    status: 'monitoring',\n    active: true,\n  },\n  {\n    id: 'prod-2',\n    name: 'Ergonomic Mechanical Keyboard',\n    variant: 'RGB / Cherry MX Brown',\n    category: 'Peripherals',\n    sku: 'SKU-4109',\n    image: 'https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=300&auto=format&fit=crop&q=80',\n    currentPrice: 119.0,\n    targetPrice: 120.0,\n    lowest90d: 119.0,\n    channel: 'sms',\n    status: 'reached',\n    active: true,\n  },\n  {\n    id: 'prod-3',\n    name: 'Ultra-Wide Curved Monitor 34\"',\n    variant: 'WQHD 144Hz IPS',\n    category: 'Displays',\n    sku: 'SKU-9011',\n    image: 'https://images.unsplash.com/photo-1527443224154-c4a3942d3acf?w=300&auto=format&fit=crop&q=80',\n    currentPrice: 679.0,\n    targetPrice: 599.0,\n    lowest90d: 629.0,\n    channel: 'email',\n    status: 'monitoring',\n    active: true,\n  },\n])\n\n// Dynamic savings calculations\nconst additionalSavings = computed(() => Math.max(0, currentPrice - targetPrice.value))\nconst additionalSavingsPercent = computed(() => {\n  if (currentPrice <= 0) return '0.0'\n  return ((additionalSavings.value / currentPrice) * 100).toFixed(1)\n})\nconst totalSavingsFromMsrp = computed(() => Math.max(0, msrpPrice - targetPrice.value))\nconst totalSavingsPercent = computed(() => {\n  if (msrpPrice <= 0) return '0.0'\n  return ((totalSavingsFromMsrp.value / msrpPrice) * 100).toFixed(1)\n})\n\n// Dynamic SVG Chart Target Line Calculation\n// Y range: $240 (y=150) to $360 (y=20), height=130, span=120\nconst targetY = computed(() => {\n  const clamped = Math.max(240, Math.min(360, targetPrice.value))\n  return 150 - ((clamped - 240) / 120) * 130\n})\n\nfunction handleSetAlert() {\n  alertSaved.value = true\n}\n\nfunction handlePresetClick(price: number) {\n  targetPrice.value = price\n}\n\nfunction handleRemoveProduct(id: string) {\n  trackedProducts.value = trackedProducts.value.filter((p) => p.id !== id)\n}\n\nfunction handleToggleProductActive(id: string) {\n  const item = trackedProducts.value.find((p) => p.id === id)\n  if (item) {\n    item.active = !item.active\n  }\n}\n\nfunction triggerRefresh() {\n  isRefreshing.value = true\n  setTimeout(() => {\n    isRefreshing.value = false\n  }, 600)\n}\n</script>\n\n<template>\n  <div data-slot=\"price-drop-alert-card\" :class=\"cn('mx-auto w-full max-w-5xl space-y-6', props.class)\">\n    <!-- Header bar -->\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex items-center gap-2\">\n          <h2 class=\"text-foreground text-2xl font-semibold tracking-tight sm:text-3xl\">Price Drop Tracker</h2>\n          <Badge variant=\"outline\" class=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-semibold\">\n            <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n            Live Sync\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-sm\">\n          Monitor historical market fluctuations, set custom discount thresholds, and receive real-time notifications.\n        </p>\n      </div>\n\n      <div class=\"flex items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" :disabled=\"isRefreshing\" @click=\"triggerRefresh\">\n          <RefreshCw :class=\"cn('size-3.5', isRefreshing && 'text-primary animate-spin')\" />\n          <span>{{ isRefreshing ? 'Checking prices…' : 'Check All Prices' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 1. Product Wishlist Hero -->\n    <Card class=\"border-border bg-card overflow-hidden shadow-xs\">\n      <div class=\"grid grid-cols-1 gap-6 p-6 lg:grid-cols-12 lg:gap-8\">\n        <!-- Thumbnail column -->\n        <div class=\"relative flex flex-col items-center justify-center lg:col-span-4\">\n          <div\n            class=\"border-border/80 bg-muted/30 relative aspect-square w-full max-w-72 overflow-hidden rounded-xl border\"\n          >\n            <img\n              src=\"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Pro Studio Wireless Headphones - Space Black\"\n              class=\"size-full object-cover object-center transition-transform duration-300 hover:scale-105\"\n            />\n            <div class=\"absolute top-3 left-3 flex flex-col gap-1.5\">\n              <Badge\n                variant=\"secondary\"\n                class=\"bg-background/90 text-foreground border-border/40 border text-xs font-medium backdrop-blur-xs\"\n              >\n                Audio · SKU-8842\n              </Badge>\n            </div>\n            <div class=\"absolute right-3 bottom-3\">\n              <Badge class=\"bg-success bg-success text-xs font-semibold text-white shadow-xs\">\n                Lowest in 90 Days\n              </Badge>\n            </div>\n          </div>\n        </div>\n\n        <!-- Product detail column -->\n        <div class=\"flex flex-col justify-between space-y-4 lg:col-span-8\">\n          <div class=\"space-y-2\">\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs\">\n              <span class=\"text-foreground font-medium\">Sony Acoustic Systems</span>\n              <span>•</span>\n              <span>Model WH-1000XM-Pro</span>\n              <span>•</span>\n              <span class=\"text-warning inline-flex items-center gap-1 font-medium\">\n                ★ 4.8 <span class=\"text-muted-foreground\">(1,420 reviews)</span>\n              </span>\n            </div>\n\n            <h3 class=\"text-foreground text-xl font-semibold tracking-tight sm:text-2xl\">\n              Pro Studio Wireless Headphones - Space Black\n            </h3>\n\n            <p class=\"text-muted-foreground text-sm leading-relaxed\">\n              Flagship hybrid active noise cancelling with beryllium dynamic drivers, 38-hour battery longevity,\n              lossless LDAC codec support, and ultra-plush memory foam acoustic isolation cushions.\n            </p>\n          </div>\n\n          <!-- Price breakdown strip -->\n          <div class=\"border-border/60 bg-muted/20 rounded-xl border p-4\">\n            <div class=\"flex flex-wrap items-baseline gap-3 sm:gap-4\">\n              <div class=\"flex items-baseline gap-1.5\">\n                <span class=\"text-foreground text-3xl font-semibold tracking-tight tabular-nums sm:text-4xl\">\n                  ${{ currentPrice.toFixed(2) }}\n                </span>\n                <span class=\"text-muted-foreground text-sm tabular-nums line-through\">\n                  ${{ msrpPrice.toFixed(2) }}\n                </span>\n              </div>\n\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <span\n                  class=\"border-success/25 bg-success/10 text-success inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-semibold\"\n                >\n                  <TrendingDown class=\"size-3.5\" />\n                  Save $50.00 (-14.3%)\n                </span>\n\n                <span\n                  class=\"border-border bg-background text-muted-foreground inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs font-medium\"\n                >\n                  <Tag class=\"text-warning size-3\" />\n                  90-Day Low:\n                  <span class=\"text-foreground font-semibold tabular-nums\">${{ lowest90dPrice.toFixed(2) }}</span>\n                </span>\n              </div>\n            </div>\n\n            <div\n              class=\"text-muted-foreground border-border/40 mt-3 flex flex-wrap items-center gap-4 border-t pt-3 text-xs\"\n            >\n              <span class=\"text-success inline-flex items-center gap-1.5 font-medium\">\n                <Check class=\"size-3.5\" /> In Stock (14 left)\n              </span>\n              <span>•</span>\n              <span class=\"inline-flex items-center gap-1.5\">\n                <ShieldCheck class=\"text-muted-foreground size-3.5\" /> 30-Day Price Match Guarantee\n              </span>\n              <span>•</span>\n              <span>Free 2-Day Priority Delivery</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </Card>\n\n    <!-- 2. 90-Day Price History SVG Trend Chart -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <CardTitle class=\"flex items-center gap-2 text-base font-semibold sm:text-lg\">\n              <History class=\"text-primary size-4\" />\n              90-Day Price History & Target Threshold\n            </CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              Retail price trajectory from May through August with real-time target price alert line.\n            </CardDescription>\n          </div>\n\n          <!-- Quick trend stats pills -->\n          <div class=\"flex flex-wrap items-center gap-2 text-xs\">\n            <div class=\"border-border/80 bg-muted/40 rounded-md border px-2.5 py-1\">\n              <span class=\"text-muted-foreground\">High: </span>\n              <span class=\"text-foreground font-semibold tabular-nums\">$349.00</span>\n            </div>\n            <div class=\"border-border/80 bg-muted/40 rounded-md border px-2.5 py-1\">\n              <span class=\"text-muted-foreground\">Avg: </span>\n              <span class=\"text-foreground font-semibold tabular-nums\">$324.50</span>\n            </div>\n            <div class=\"border-success/30 bg-success/10 text-success rounded-md border px-2.5 py-1\">\n              <span class=\"opacity-80\">90d Low: </span>\n              <span class=\"font-bold tabular-nums\">$279.00</span>\n            </div>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"pt-2\">\n        <div class=\"border-border/60 bg-muted/10 relative w-full overflow-x-auto rounded-lg border p-2 sm:p-4\">\n          <svg\n            viewBox=\"0 0 600 180\"\n            class=\"h-auto w-full max-w-[560px] min-w-full overflow-visible select-none\"\n            preserveAspectRatio=\"xMidYMid meet\"\n          >\n            <defs>\n              <!-- Gradient for price line area -->\n              <linearGradient id=\"vue-price-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"var(--primary)\" stop-opacity=\"0.28\" />\n                <stop offset=\"100%\" stop-color=\"var(--primary)\" stop-opacity=\"0.0\" />\n              </linearGradient>\n            </defs>\n\n            <!-- Y-Axis Grid Lines & Labels -->\n            <!-- $360 Line (y=20) -->\n            <line x1=\"50\" y1=\"20\" x2=\"575\" y2=\"20\" class=\"stroke-border/40 stroke-1\" stroke-dasharray=\"3 3\" />\n            <text x=\"42\" y=\"24\" text-anchor=\"end\" class=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n              $360\n            </text>\n\n            <!-- $320 Line (y=63.3) -->\n            <line x1=\"50\" y1=\"63.3\" x2=\"575\" y2=\"63.3\" class=\"stroke-border/40 stroke-1\" stroke-dasharray=\"3 3\" />\n            <text x=\"42\" y=\"67\" text-anchor=\"end\" class=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n              $320\n            </text>\n\n            <!-- $280 Line (y=106.6) -->\n            <line x1=\"50\" y1=\"106.6\" x2=\"575\" y2=\"106.6\" class=\"stroke-border/40 stroke-1\" stroke-dasharray=\"3 3\" />\n            <text x=\"42\" y=\"110\" text-anchor=\"end\" class=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n              $280\n            </text>\n\n            <!-- $240 Line (y=150) -->\n            <line x1=\"50\" y1=\"150\" x2=\"575\" y2=\"150\" class=\"stroke-border/40 stroke-1\" />\n            <text x=\"42\" y=\"154\" text-anchor=\"end\" class=\"fill-muted-foreground font-mono text-xs tabular-nums\">\n              $240\n            </text>\n\n            <!-- Price Area Fill -->\n            <path\n              d=\"M 60,31.9 C 105,31.9 105,53.6 150,53.6 C 200,53.6 200,31.9 250,31.9 C 300,31.9 300,107.8 350,107.8 C 405,107.8 405,64.4 460,64.4 C 510,64.4 510,86.1 560,86.1 L 560,150 L 60,150 Z\"\n              fill=\"url(#vue-price-gradient)\"\n            />\n\n            <!-- Price Trajectory Line -->\n            <path\n              d=\"M 60,31.9 C 105,31.9 105,53.6 150,53.6 C 200,53.6 200,31.9 250,31.9 C 300,31.9 300,107.8 350,107.8 C 405,107.8 405,64.4 460,64.4 C 510,64.4 510,86.1 560,86.1\"\n              fill=\"none\"\n              class=\"stroke-primary stroke-2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n\n            <!-- Target Price Dynamic Threshold Line (Amber Dashed) -->\n            <line\n              x1=\"50\"\n              :y1=\"targetY\"\n              x2=\"575\"\n              :y2=\"targetY\"\n              class=\"stroke-amber-500 stroke-2 transition-colors duration-150 ease-out\"\n              stroke-dasharray=\"4 4\"\n            />\n\n            <!-- Dynamic Target Label Tag -->\n            <g :transform=\"`translate(565, ${targetY})`\" class=\"transition-colors duration-150 ease-out\">\n              <rect x=\"-96\" y=\"-18\" width=\"96\" height=\"18\" rx=\"4\" class=\"fill-warning dark:fill-amber-600\" />\n              <text x=\"-48\" y=\"-5\" text-anchor=\"middle\" class=\"fill-white font-mono text-xs font-bold tracking-tight\">\n                Alert: ${{ targetPrice.toFixed(0) }}.00\n              </text>\n            </g>\n\n            <!-- Historical Data Points & Annotations -->\n            <!-- Pt 1: May 22 ($349) -->\n            <circle cx=\"60\" cy=\"31.9\" r=\"3.5\" class=\"fill-background stroke-primary stroke-2\" />\n\n            <!-- Pt 2: Jun 15 ($329) -->\n            <circle cx=\"150\" cy=\"53.6\" r=\"3.5\" class=\"fill-background stroke-primary stroke-2\" />\n\n            <!-- Pt 3: Jul 05 ($349) -->\n            <circle cx=\"250\" cy=\"31.9\" r=\"3.5\" class=\"fill-background stroke-primary stroke-2\" />\n\n            <!-- Pt 4: Jul 26 ($279 - 90d Low) -->\n            <circle cx=\"350\" cy=\"107.8\" r=\"5\" class=\"stroke-background fill-success stroke-2\" />\n            <rect\n              x=\"306\"\n              y=\"117\"\n              width=\"88\"\n              height=\"18\"\n              rx=\"4\"\n              class=\"fill-success/10 stroke-emerald-500/30 stroke-1\"\n            />\n            <text\n              x=\"350\"\n              y=\"130\"\n              text-anchor=\"middle\"\n              class=\"dark:fill-success fill-emerald-600 font-mono text-xs font-bold\"\n            >\n              90d Low · $279\n            </text>\n\n            <!-- Pt 5: Aug 10 ($319) -->\n            <circle cx=\"460\" cy=\"64.4\" r=\"3.5\" class=\"fill-background stroke-primary stroke-2\" />\n\n            <!-- Pt 6: Aug 21 (Current $299) -->\n            <circle cx=\"560\" cy=\"86.1\" r=\"5\" class=\"fill-primary stroke-background stroke-2\" />\n            <rect x=\"508\" y=\"58\" width=\"80\" height=\"18\" rx=\"4\" class=\"fill-primary/10 stroke-primary/30 stroke-1\" />\n            <text x=\"548\" y=\"71\" text-anchor=\"middle\" class=\"fill-primary font-mono text-xs font-bold\">\n              Now · $299.00\n            </text>\n\n            <!-- X-Axis Timeline Milestones -->\n            <text x=\"60\" y=\"168\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">May 22</text>\n            <text x=\"150\" y=\"168\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">Jun 15</text>\n            <text x=\"250\" y=\"168\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">Jul 05</text>\n            <text x=\"350\" y=\"168\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">Jul 26</text>\n            <text x=\"460\" y=\"168\" text-anchor=\"middle\" class=\"fill-muted-foreground font-mono text-xs\">Aug 10</text>\n            <text x=\"560\" y=\"168\" text-anchor=\"middle\" class=\"fill-foreground font-mono text-xs font-semibold\">\n              Today\n            </text>\n          </svg>\n        </div>\n\n        <div class=\"text-muted-foreground mt-3 flex items-center justify-between text-xs\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"bg-warning size-2 rounded-full\" />\n            <span>Amber dashed threshold line updates automatically as you move the target slider below.</span>\n          </div>\n          <span class=\"font-mono text-xs\">Updated 4m ago</span>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- 3. Configure Price Drop Alert Form -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader>\n        <CardTitle class=\"flex items-center gap-2 text-base font-semibold sm:text-lg\">\n          <BellRing class=\"text-primary size-4\" />\n          Configure Price Drop Alert\n        </CardTitle>\n        <CardDescription class=\"text-xs sm:text-sm\">\n          Set your notification channel and custom trigger price. We check pricing every 15 minutes across verified\n          retailers.\n        </CardDescription>\n      </CardHeader>\n\n      <CardContent class=\"space-y-6\">\n        <!-- Step 1: Alert Delivery Method Radio -->\n        <div class=\"space-y-3\">\n          <label class=\"text-foreground text-sm font-semibold\">1. Alert Delivery Channel</label>\n          <RadioGroup v-model=\"alertMethod\" class=\"grid grid-cols-1 gap-3 sm:grid-cols-2\">\n            <label\n              for=\"vue-method-email\"\n              :class=\"\n                cn(\n                  'flex cursor-pointer items-center gap-3 rounded-lg border p-3.5 transition-colors',\n                  alertMethod === 'email'\n                    ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )\n              \"\n            >\n              <RadioGroupItem id=\"vue-method-email\" value=\"email\" />\n              <div class=\"space-y-0.5\">\n                <div class=\"text-foreground flex items-center gap-1.5 text-sm font-semibold\">\n                  <Mail class=\"text-muted-foreground size-3.5\" />\n                  Email Notification\n                </div>\n                <p class=\"text-muted-foreground font-mono text-xs\">customer@example.com</p>\n              </div>\n            </label>\n\n            <label\n              for=\"vue-method-sms\"\n              :class=\"\n                cn(\n                  'flex cursor-pointer items-center gap-3 rounded-lg border p-3.5 transition-colors',\n                  alertMethod === 'sms'\n                    ? 'border-primary bg-primary/5 ring-primary/20 shadow-xs ring-1'\n                    : 'border-border bg-card hover:bg-muted/40',\n                )\n              \"\n            >\n              <RadioGroupItem id=\"vue-method-sms\" value=\"sms\" />\n              <div class=\"space-y-0.5\">\n                <div class=\"text-foreground flex items-center gap-1.5 text-sm font-semibold\">\n                  <Smartphone class=\"text-muted-foreground size-3.5\" />\n                  SMS Push Notification\n                </div>\n                <p class=\"text-muted-foreground font-mono text-xs\">+1 (555) 019-2834</p>\n              </div>\n            </label>\n          </RadioGroup>\n        </div>\n\n        <Separator />\n\n        <!-- Step 2: Target Price Slider & Input -->\n        <div class=\"space-y-4\">\n          <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"space-y-0.5\">\n              <label class=\"text-foreground text-sm font-semibold\">2. Target Price Alert Threshold</label>\n              <p class=\"text-muted-foreground text-xs\">\n                Trigger an alert when the item price drops to or below this amount.\n              </p>\n            </div>\n\n            <!-- Target Price Display / Input Badge -->\n            <div class=\"flex items-center gap-2\">\n              <div class=\"border-border bg-muted/40 flex items-center rounded-lg border px-3 py-1.5\">\n                <span class=\"text-muted-foreground mr-1.5 text-xs font-medium\">Target:</span>\n                <span class=\"text-foreground font-mono text-lg font-semibold tabular-nums\"\n                  >${{ targetPrice.toFixed(2) }}</span\n                >\n              </div>\n            </div>\n          </div>\n\n          <!-- Slider component -->\n          <div class=\"space-y-2 pt-2\">\n            <Slider v-model=\"targetPrice\" :min=\"200\" :max=\"349\" :step=\"1\" class=\"w-full\" />\n\n            <!-- Min/Max labels -->\n            <div class=\"text-muted-foreground flex justify-between font-mono text-xs\">\n              <span>$200.00 (Deep Deal)</span>\n              <span class=\"text-warning font-semibold\">Target: ${{ targetPrice.toFixed(2) }}</span>\n              <span>$349.00 (MSRP)</span>\n            </div>\n          </div>\n\n          <!-- Savings calculation box & quick presets -->\n          <div\n            class=\"border-border/80 bg-muted/20 flex flex-col gap-3 rounded-lg border p-3.5 sm:flex-row sm:items-center sm:justify-between\"\n          >\n            <div class=\"flex items-center gap-2\">\n              <Tag class=\"text-success size-4 shrink-0\" />\n              <div class=\"text-xs\">\n                <template v-if=\"targetPrice < currentPrice\">\n                  <span class=\"text-foreground font-medium\">Notify when price drops below </span>\n                  <span class=\"text-success font-mono font-semibold\">${{ targetPrice.toFixed(2) }}</span>\n                  <span class=\"text-muted-foreground\"> — saves an extra </span>\n                  <span class=\"text-foreground font-mono font-semibold\">${{ additionalSavings.toFixed(2) }}</span>\n                  <span class=\"text-muted-foreground\"> ({{ additionalSavingsPercent }}% additional drop)</span>\n                </template>\n                <template v-else-if=\"targetPrice === currentPrice\">\n                  <span class=\"text-foreground font-medium\">Matches current price </span>\n                  <span class=\"text-primary font-mono font-semibold\">${{ currentPrice.toFixed(2) }}</span>\n                  <span class=\"text-muted-foreground\"> — triggers on any new price movement</span>\n                </template>\n                <template v-else>\n                  <span class=\"text-foreground font-medium\"\n                    >Target is set above current price (${{ currentPrice.toFixed(2) }}). Alert triggers\n                    immediately.</span\n                  >\n                </template>\n              </div>\n            </div>\n\n            <!-- Quick preset buttons -->\n            <div class=\"flex shrink-0 flex-wrap items-center gap-1.5\">\n              <Button variant=\"outline\" size=\"sm\" class=\"h-7 px-2 font-mono text-xs\" @click=\"handlePresetClick(289)\">\n                $289 (-$10)\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                class=\"border-success/40 text-success h-7 px-2 font-mono text-xs\"\n                @click=\"handlePresetClick(279)\"\n              >\n                $279 (Low)\n              </Button>\n              <Button variant=\"outline\" size=\"sm\" class=\"h-7 px-2 font-mono text-xs\" @click=\"handlePresetClick(249)\">\n                $249 (-$50)\n              </Button>\n            </div>\n          </div>\n        </div>\n\n        <Separator />\n\n        <!-- Step 3: In-Stock Notification Switch -->\n        <div\n          class=\"border-border/80 flex flex-col gap-3 rounded-lg border p-4 sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <div class=\"space-y-0.5\">\n            <div class=\"flex items-center gap-2\">\n              <Zap class=\"text-warning size-4\" />\n              <label for=\"vue-stock-switch\" class=\"text-foreground cursor-pointer text-sm font-semibold\">\n                In-Stock & Lightning Flash Deal Notification\n              </label>\n            </div>\n            <p class=\"text-muted-foreground text-xs\">\n              Send instant high-priority alert if available stock falls below 5 units or if a limited lightning coupon\n              goes live.\n            </p>\n          </div>\n\n          <Switch id=\"vue-stock-switch\" v-model=\"inStockNotification\" />\n        </div>\n\n        <!-- Alert confirmation banner (shown if saved) -->\n        <div\n          v-if=\"alertSaved\"\n          class=\"border-success/30 bg-success/10 text-success flex items-start gap-3 rounded-lg border p-4\"\n        >\n          <div class=\"bg-success mt-0.5 shrink-0 rounded-full p-1 text-white\">\n            <Check class=\"size-3.5\" />\n          </div>\n          <div class=\"space-y-1 text-xs\">\n            <p class=\"text-success dark:text-foreground text-sm font-semibold\">\n              Price Drop Alert Configured Successfully!\n            </p>\n            <p>\n              We'll monitor <span class=\"font-semibold\">Pro Studio Wireless Headphones</span> every 15 minutes and\n              dispatch an alert to\n              <span class=\"font-mono font-semibold\">{{\n                alertMethod === 'email' ? 'customer@example.com' : '+1 (555) 019-2834'\n              }}</span>\n              the moment the price reaches <span class=\"font-mono font-semibold\">${{ targetPrice.toFixed(2) }}</span> or\n              lower.\n            </p>\n          </div>\n        </div>\n      </CardContent>\n\n      <CardFooter\n        class=\"border-border/60 flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n          <ShieldCheck class=\"text-success size-4 shrink-0\" />\n          <span>Zero spam guarantee. You can pause or cancel alert subscriptions anytime.</span>\n        </div>\n\n        <Button class=\"w-full gap-2 font-semibold sm:w-auto\" @click=\"handleSetAlert\">\n          <BellRing class=\"size-4\" />\n          <span>{{ alertSaved ? 'Update Price Drop Alert' : 'Set Price Drop Alert' }}</span>\n        </Button>\n      </CardFooter>\n    </Card>\n\n    <!-- 4. Active Tracked Products Mini Table -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold sm:text-lg\">Active Tracked Wishlist Items</CardTitle>\n            <CardDescription class=\"text-xs sm:text-sm\">\n              Real-time monitoring list currently linked to your notification profile.\n            </CardDescription>\n          </div>\n          <Badge variant=\"secondary\" class=\"w-fit font-mono text-xs\"> {{ trackedProducts.length }} items active </Badge>\n        </div>\n      </CardHeader>\n\n      <CardContent>\n        <div class=\"border-border/60 overflow-x-auto rounded-lg border\">\n          <Table>\n            <TableHeader>\n              <TableRow class=\"bg-muted/40 hover:bg-muted/40\">\n                <TableHead class=\"text-xs font-semibold\">Product</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Current Price</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Target Alert</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">90-Day Low</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Channel</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Status</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Actions</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"item in trackedProducts\" :key=\"item.id\" class=\"transition-colors\">\n                <!-- Product name & image -->\n                <TableCell class=\"py-3\">\n                  <div class=\"flex items-center gap-3\">\n                    <img\n                      :src=\"item.image\"\n                      :alt=\"item.name\"\n                      class=\"border-border/60 size-10 shrink-0 rounded-md border object-cover\"\n                    />\n                    <div class=\"min-w-0 space-y-0.5\">\n                      <p class=\"text-foreground max-w-56 truncate text-xs font-semibold sm:max-w-xs\">\n                        {{ item.name }}\n                      </p>\n                      <p class=\"text-muted-foreground truncate text-xs\">\n                        {{ item.variant }} · <span class=\"font-mono\">{{ item.sku }}</span>\n                      </p>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Current Price -->\n                <TableCell class=\"text-foreground py-3 text-right font-mono text-xs font-semibold tabular-nums\">\n                  ${{ item.currentPrice.toFixed(2) }}\n                </TableCell>\n\n                <!-- Target Price -->\n                <TableCell\n                  class=\"text-warning text-warning py-3 text-right font-mono text-xs font-semibold tabular-nums\"\n                >\n                  ${{ item.targetPrice.toFixed(2) }}\n                </TableCell>\n\n                <!-- 90-Day Low -->\n                <TableCell class=\"text-muted-foreground py-3 text-right font-mono text-xs tabular-nums\">\n                  ${{ item.lowest90d.toFixed(2) }}\n                </TableCell>\n\n                <!-- Alert Channel -->\n                <TableCell class=\"py-3\">\n                  <Badge variant=\"outline\" class=\"gap-1 text-xs font-normal capitalize\">\n                    <Mail v-if=\"item.channel === 'email'\" class=\"text-muted-foreground size-3\" />\n                    <Smartphone v-else class=\"text-muted-foreground size-3\" />\n                    {{ item.channel }}\n                  </Badge>\n                </TableCell>\n\n                <!-- Status Badge -->\n                <TableCell class=\"py-3\">\n                  <Badge\n                    v-if=\"item.status === 'reached'\"\n                    class=\"border-success/30 bg-success/15 text-success gap-1 text-xs font-semibold\"\n                    variant=\"outline\"\n                  >\n                    <Check class=\"size-3\" /> Target Reached!\n                  </Badge>\n                  <Badge v-else variant=\"secondary\" class=\"text-muted-foreground gap-1 text-xs font-medium\">\n                    <TrendingDown class=\"text-warning size-3\" /> Monitoring (-${{\n                      (item.currentPrice - item.targetPrice).toFixed(0)\n                    }})\n                  </Badge>\n                </TableCell>\n\n                <!-- Actions -->\n                <TableCell class=\"py-3 text-right\">\n                  <div class=\"flex items-center justify-end gap-1.5\">\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      class=\"text-muted-foreground hover:text-destructive size-8 p-0\"\n                      title=\"Remove Tracker\"\n                      @click=\"handleRemoveProduct(item.id)\"\n                    >\n                      <Trash2 class=\"size-3.5\" />\n                    </Button>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PriceDropAlertCard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/radio-group.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/slider.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "E-commerce wishlist price tracker with 90-day price history chart, dynamic target price threshold slider, multi-channel alert configurator, and active tracked items table.",
  "categories": [
    "commerce",
    "ecommerce"
  ]
}