{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-tabbed-deepdive",
  "title": "Features — Tabbed Deep-Dive",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-tabbed-deepdive/FeatureTabbedDeepdive.vue",
      "content": "<script setup lang=\"ts\">\nimport { 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\n// Each angle names its own constraint. A deep-dive that only lists strengths\n// reads as marketing; the constraint is what makes the rest credible.\nconst angles = [\n  {\n    id: 'authoring',\n    label: 'Authoring',\n    headline: 'A metric is a file, not a setting',\n    body: 'Definitions are YAML in your repository. They are reviewed, branched, and reverted with the tools your team already runs, and the history is yours if you leave.',\n    constraint: 'Requires someone comfortable opening a pull request. There is no drag-and-drop builder.',\n    rows: [\n      { name: 'metrics/revenue_net.yml', detail: 'v128' },\n      { name: 'metrics/margin.yml', detail: 'v41' },\n      { name: 'metrics/pipeline.yml', detail: 'v12' },\n    ],\n  },\n  {\n    id: 'execution',\n    label: 'Execution',\n    headline: 'The planner decides where a query runs',\n    body: 'Hot aggregates resolve from materialised tables; everything else falls through to the warehouse. Each result carries the freshness it was served at.',\n    constraint: 'Materialised paths are stale between runs by design, and the stamp says so rather than hiding it.',\n    rows: [\n      { name: 'revenue rollup', detail: 'materialised · 5 min' },\n      { name: 'pipeline by stage', detail: 'materialised · 1 hr' },\n      { name: 'raw event search', detail: 'live query' },\n    ],\n  },\n  {\n    id: 'governance',\n    label: 'Governance',\n    headline: 'Access is decided at query time',\n    body: 'Scope resolves from your identity provider on every request, and each evaluation is written to an append-only log you can export.',\n    constraint: 'Group changes propagate on your directory’s sync interval, not instantly.',\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</script>\n\n<template>\n  <section data-slot=\"feature-tabbed-deepdive\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">In depth</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">The metric layer, from three angles</h2>\n      </div>\n\n      <Tabs default-value=\"authoring\" class=\"mt-10\">\n        <TabsList variant=\"segmented\" class=\"flex-nowrap overflow-x-auto\">\n          <TabsTrigger v-for=\"angle in angles\" :key=\"angle.id\" :value=\"angle.id\" variant=\"segmented\">\n            {{ angle.label }}\n          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent v-for=\"angle in angles\" :key=\"angle.id\" :value=\"angle.id\" class=\"mt-6\">\n          <div class=\"grid min-h-[18rem] gap-6 sm:grid-cols-[1.3fr_1fr]\">\n            <div>\n              <h3 class=\"text-xl font-semibold tracking-tight text-balance\">{{ angle.headline }}</h3>\n              <p class=\"text-muted-foreground mt-3 leading-relaxed\">{{ angle.body }}</p>\n\n              <Separator class=\"my-5\" />\n\n              <p class=\"flex items-start gap-2.5 text-sm\">\n                <TriangleAlert class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                <span class=\"text-muted-foreground\">{{ angle.constraint }}</span>\n              </p>\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                  {{ angle.label }}\n                </div>\n                <ul class=\"divide-border divide-y\">\n                  <li\n                    v-for=\"row in angle.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              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n      </Tabs>\n\n      <Button variant=\"outline\" class=\"mt-8\">Read the full reference</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureTabbedDeepdive.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": "One feature examined from three angles behind tabs, each panel carrying its own explanation, a constraint the reader should know, and a matching detail panel.",
  "categories": [
    "marketing"
  ]
}