{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-segmented-compare",
  "title": "Features — Segmented Compare",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-segmented-compare/FeatureSegmentedCompare.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, TriangleAlert } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\n// Each mode states its constraints as plainly as its capabilities. A comparison\n// that only lists upsides makes the reader do the work of distrusting it.\nconst modes = [\n  {\n    id: 'live',\n    label: 'Live query',\n    summary: 'Every read hits the warehouse at request time.',\n    capabilities: [\n      'Always current, to the second',\n      'No storage footprint on our side',\n      'Row-level scope applied per query',\n    ],\n    constraints: ['Latency follows your warehouse', 'Each read is billable compute'],\n    recommendation: 'Use for exploratory analysis and anything finance signs off on.',\n  },\n  {\n    id: 'materialised',\n    label: 'Materialised',\n    summary: 'Aggregates are computed on a schedule you set.',\n    capabilities: [\n      'Sub-100ms reads at any concurrency',\n      'Warehouse cost bounded by the schedule',\n      'Freshness stamp shown with every figure',\n    ],\n    constraints: ['Stale between runs, by design', 'Backfills reprocess the window'],\n    recommendation: 'Use for dashboards opened dozens of times an hour.',\n  },\n]\n\nconst active = ref(modes[0].id)\nconst current = computed(() => modes.find((mode) => mode.id === active.value) ?? modes[0])\n\nfunction onChange(value: unknown) {\n  if (typeof value === 'string' && value) active.value = value\n}\n</script>\n\n<template>\n  <section data-slot=\"feature-segmented-compare\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div class=\"max-w-xl\">\n          <Badge variant=\"secondary\">Execution modes</Badge>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Pick per metric, not per platform</h2>\n        </div>\n\n        <ToggleGroup\n          :model-value=\"active\"\n          type=\"single\"\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label=\"Choose an execution mode\"\n          @update:model-value=\"onChange\"\n        >\n          <ToggleGroupItem v-for=\"mode in modes\" :key=\"mode.id\" :value=\"mode.id\">{{ mode.label }}</ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n\n      <!-- min-h keeps the card from resizing between modes with different list\n           lengths, which would otherwise shift the page on every toggle. -->\n      <Card class=\"mt-8\">\n        <CardContent class=\"min-h-[22rem] p-6\">\n          <p class=\"text-lg leading-snug font-medium text-balance\">{{ current.summary }}</p>\n\n          <Separator class=\"my-6\" />\n\n          <div class=\"grid gap-8 sm:grid-cols-2\">\n            <div>\n              <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What you get</p>\n              <ul class=\"mt-3 space-y-2.5\">\n                <li\n                  v-for=\"capability in current.capabilities\"\n                  :key=\"capability\"\n                  class=\"flex items-start gap-2.5 text-sm\"\n                >\n                  <Check class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                  <span>{{ capability }}</span>\n                </li>\n              </ul>\n            </div>\n\n            <div>\n              <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What it costs you</p>\n              <ul class=\"mt-3 space-y-2.5\">\n                <li\n                  v-for=\"constraint in current.constraints\"\n                  :key=\"constraint\"\n                  class=\"flex items-start gap-2.5 text-sm\"\n                >\n                  <TriangleAlert class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                  <span class=\"text-muted-foreground\">{{ constraint }}</span>\n                </li>\n              </ul>\n            </div>\n          </div>\n\n          <Separator class=\"my-6\" />\n\n          <p class=\"text-sm\">\n            <span class=\"font-medium\">Recommendation. </span>\n            <span class=\"text-muted-foreground\">{{ current.recommendation }}</span>\n          </p>\n        </CardContent>\n      </Card>\n\n      <Button variant=\"ghost\" class=\"mt-6\">Read how the planner chooses</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureSegmentedCompare.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/separator.json",
    "https://uipkge.dev/r/vue/toggle-group.json"
  ],
  "description": "Segmented control switching one feature section between two operating modes, with the capability list, constraints, and a recommendation line changing per mode.",
  "categories": [
    "marketing"
  ]
}