{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "feature-accordion-media",
  "title": "Features — Accordion with Media",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/feature-accordion-media/FeatureAccordionMedia.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst features = [\n  {\n    id: 'catalog',\n    title: 'Catalogue what exists',\n    body: 'The schema mirror lists every table and column with its freshness, so modelling starts from what is actually there rather than what the docs claim.',\n    rows: [\n      { name: 'warehouse.orders', detail: 'fresh · 2 min' },\n      { name: 'warehouse.refunds', detail: 'fresh · 2 min' },\n      { name: 'legacy.orders_v1', detail: 'stale · 41 days' },\n    ],\n  },\n  {\n    id: 'review',\n    title: 'Review before it ships',\n    body: 'Definition changes open a pull request. Reviewers see the diff, the consumers affected, and the reconciliation result against prior quarters.',\n    rows: [\n      { name: '+ window: trailing_28d', detail: 'added' },\n      { name: '- window: trailing_30d', detail: 'removed' },\n      { name: '41 consumers affected', detail: 'checked' },\n    ],\n  },\n  {\n    id: 'observe',\n    title: 'Watch it after it ships',\n    body: 'Freshness and drift alerts fire against certified metrics and route to the owner named in the definition, not a shared inbox.',\n    rows: [\n      { name: 'revenue_net', detail: 'within threshold' },\n      { name: 'margin_by_channel', detail: 'within threshold' },\n      { name: 'pipeline_weighted', detail: 'drift · owner paged' },\n    ],\n  },\n]\n\nconst open = ref(features[0].id)\n// The pane follows the open item; falling back to the first keeps the pane\n// populated when everything is collapsed.\nconst active = computed(() => features.find((feature) => feature.id === open.value) ?? features[0])\n</script>\n\n<template>\n  <section data-slot=\"feature-accordion-media\" 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\">Workflow</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Three habits, one loop</h2>\n      </div>\n\n      <div class=\"mt-10 grid gap-8 lg:grid-cols-2 lg:gap-12\">\n        <Accordion v-model=\"open\" type=\"single\" collapsible class=\"w-full\">\n          <AccordionItem v-for=\"feature in features\" :key=\"feature.id\" :value=\"feature.id\">\n            <AccordionTrigger class=\"text-left font-medium\">{{ feature.title }}</AccordionTrigger>\n            <AccordionContent class=\"text-muted-foreground leading-relaxed\">\n              {{ feature.body }}\n              <!-- Inline pane below the breakpoint, where a side pane would be\n                   too narrow to read. -->\n              <Card class=\"mt-4 lg:hidden\">\n                <CardContent class=\"p-0\">\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=\"text-foreground min-w-0 truncate font-mono text-xs\">{{ row.name }}</span>\n                      <span class=\"shrink-0 text-xs\">{{ row.detail }}</span>\n                    </li>\n                  </ul>\n                </CardContent>\n              </Card>\n            </AccordionContent>\n          </AccordionItem>\n        </Accordion>\n\n        <Card class=\"hidden self-start lg:block\">\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              {{ active.title }}\n            </div>\n            <ul class=\"divide-border divide-y\">\n              <li v-for=\"row in active.rows\" :key=\"row.name\" class=\"flex items-center justify-between gap-3 px-4 py-3\">\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\n      <Button variant=\"ghost\" class=\"mt-8\">See the full workflow</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FeatureAccordionMedia.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/accordion.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Single-open accordion of features beside a media pane that follows the open item, collapsing to inline panes on narrow screens where a side pane would be unreadable.",
  "categories": [
    "marketing"
  ]
}