{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-vertical-tabs-pane",
  "title": "Features — Vertical Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-vertical-tabs-pane/FeatureVerticalTabsPane.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nconst features = [\n  {\n    id: 'definitions',\n    title: 'Versioned definitions',\n    summary: 'Reviewed like code',\n    body: 'Every metric is a file with an owner. Changing one opens a pull request carrying a diff, a reviewer, and a revert path — the same workflow the rest of your repo already uses.',\n    points: ['Branch per change', 'Required review', 'One-click revert'],\n    rows: [\n      { name: 'revenue_net', detail: 'v128 · finance' },\n      { name: 'margin_by_channel', detail: 'v41 · finance' },\n      { name: 'pipeline_weighted', detail: 'v12 · revops' },\n    ],\n  },\n  {\n    id: 'access',\n    title: 'Query-time access',\n    summary: 'Scope per identity',\n    body: 'Row-level scope resolves from your identity provider on every query. A dashboard link shared outside its audience renders the sender’s scope, never the recipient’s.',\n    points: ['SCIM group sync', 'Per-query evaluation', 'Audited'],\n    rows: [\n      { name: 'EMEA analyst', detail: 'region-scoped' },\n      { name: 'Finance lead', detail: 'full ledger' },\n      { name: 'Contractor', detail: 'no payroll' },\n    ],\n  },\n  {\n    id: 'cost',\n    title: 'Budgeted queries',\n    summary: 'Capped at run time',\n    body: 'Each team gets a budget the query planner enforces before execution, so warehouse spend is bounded rather than explained after the invoice arrives.',\n    points: ['Per-team ceilings', 'Materialised hot paths', 'Cost per dashboard'],\n    rows: [\n      { name: 'Finance', detail: '62% of budget' },\n      { name: 'RevOps', detail: '38% of budget' },\n      { name: 'Product', detail: '81% of budget' },\n    ],\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"feature-vertical-tabs-pane\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Platform</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Three things worth the detail</h2>\n      </div>\n\n      <Tabs default-value=\"definitions\" orientation=\"vertical\" class=\"mt-10\">\n        <div class=\"grid gap-8 lg:grid-cols-[20rem_1fr] lg:gap-12\">\n          <TabsList variant=\"underline\" orientation=\"vertical\" class=\"h-auto w-full flex-col items-stretch\">\n            <TabsTrigger\n              v-for=\"feature in features\"\n              :key=\"feature.id\"\n              :value=\"feature.id\"\n              variant=\"underline\"\n              orientation=\"vertical\"\n              class=\"h-auto flex-col items-start gap-0.5 py-3 text-left\"\n            >\n              <span class=\"text-sm font-medium\">{{ feature.title }}</span>\n              <span class=\"text-muted-foreground text-xs\">{{ feature.summary }}</span>\n            </TabsTrigger>\n          </TabsList>\n\n          <TabsContent v-for=\"feature in features\" :key=\"feature.id\" :value=\"feature.id\" class=\"mt-0\">\n            <!-- min-h holds the pane at the tallest panel so switching tabs\n                 never resizes the section. -->\n            <div class=\"grid min-h-[19rem] gap-6 sm:grid-cols-[1.2fr_1fr]\">\n              <div>\n                <h3 class=\"text-xl font-semibold tracking-tight\">{{ feature.title }}</h3>\n                <p class=\"text-muted-foreground mt-3 leading-relaxed\">{{ feature.body }}</p>\n                <ul class=\"mt-5 space-y-2\">\n                  <li v-for=\"point in feature.points\" :key=\"point\" class=\"flex items-start gap-2.5 text-sm\">\n                    <Check class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                    <span>{{ point }}</span>\n                  </li>\n                </ul>\n                <Button variant=\"link\" class=\"mt-5 h-auto p-0\">Read the reference</Button>\n              </div>\n\n              <Card class=\"self-start\">\n                <CardContent class=\"p-0\">\n                  <div class=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                    {{ feature.summary }}\n                  </div>\n                  <ul class=\"divide-border divide-y\">\n                    <li\n                      v-for=\"row in feature.rows\"\n                      :key=\"row.name\"\n                      class=\"flex items-center justify-between gap-3 px-4 py-2.5\"\n                    >\n                      <span class=\"min-w-0 truncate font-mono text-xs\">{{ row.name }}</span>\n                      <span class=\"text-muted-foreground shrink-0 text-xs\">{{ row.detail }}</span>\n                    </li>\n                  </ul>\n                  <Separator />\n                  <p class=\"text-muted-foreground px-4 py-2.5 text-xs\">Live values from your workspace.</p>\n                </CardContent>\n              </Card>\n            </div>\n          </TabsContent>\n        </div>\n      </Tabs>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureVerticalTabsPane.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/tabs.json"
  ],
  "description": "Vertical feature tabs where each trigger carries a title and one-line summary, swapping a wide preview pane built from primitives without changing the panel height.",
  "categories": [
    "marketing"
  ]
}