{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-tabbed-deepdive",
  "title": "Features — Tabbed Deep-Dive",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-tabbed-deepdive/FeatureTabbedDeepdive.tsx",
      "content": "'use client'\n\nimport { TriangleAlert } from 'lucide-react'\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 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\nexport function FeatureTabbedDeepdive() {\n  return (\n    <section data-slot=\"feature-tabbed-deepdive\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-5xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">In depth</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n            The metric layer, from three angles\n          </h2>\n        </div>\n\n        <Tabs defaultValue=\"authoring\" className=\"mt-10\">\n          <TabsList variant=\"segmented\" className=\"flex-nowrap overflow-x-auto\">\n            {angles.map((angle) => (\n              <TabsTrigger key={angle.id} value={angle.id} variant=\"segmented\">\n                {angle.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n\n          {angles.map((angle) => (\n            <TabsContent key={angle.id} value={angle.id} className=\"mt-6\">\n              <div className=\"grid min-h-[18rem] gap-6 sm:grid-cols-[1.3fr_1fr]\">\n                <div>\n                  <h3 className=\"text-xl font-semibold tracking-tight text-balance\">{angle.headline}</h3>\n                  <p className=\"text-muted-foreground mt-3 leading-relaxed\">{angle.body}</p>\n\n                  <Separator className=\"my-5\" />\n\n                  <p className=\"flex items-start gap-2.5 text-sm\">\n                    <TriangleAlert className=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                    <span className=\"text-muted-foreground\">{angle.constraint}</span>\n                  </p>\n                </div>\n\n                <Card className=\"self-start\">\n                  <CardContent className=\"p-0\">\n                    <div className=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                      {angle.label}\n                    </div>\n                    <ul className=\"divide-border divide-y\">\n                      {angle.rows.map((row) => (\n                        <li key={row.name} className=\"flex items-center justify-between gap-3 px-4 py-2.5\">\n                          <span className=\"min-w-0 truncate font-mono text-xs\">{row.name}</span>\n                          <span className=\"text-muted-foreground shrink-0 text-xs\">{row.detail}</span>\n                        </li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n              </div>\n            </TabsContent>\n          ))}\n        </Tabs>\n\n        <Button variant=\"outline\" className=\"mt-8\">\n          Read the full reference\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureTabbedDeepdive.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/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"
  ]
}