{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "integrations-directory",
  "title": "Integrations Directory",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/integrations-directory/IntegrationsDirectory.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component, HTMLAttributes } from 'vue'\nimport { computed, ref } from 'vue'\nimport {\n  BarChart3,\n  Check,\n  Container,\n  CreditCard,\n  LineChart,\n  Mail,\n  MessageSquare,\n  Radar,\n  Receipt,\n  ScrollText,\n  Search,\n  SearchX,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Chip } from '@/components/ui/chip'\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'\nimport { EmptyState } from '@/components/ui/empty-state'\nimport { Input } from '@/components/ui/input'\nimport { Switch } from '@/components/ui/switch'\n\ntype CategoryId = 'analytics' | 'devops' | 'communication' | 'billing'\ntype CategoryFilter = 'all' | CategoryId\n\ninterface Integration {\n  id: string\n  name: string\n  description: string\n  /** Longer paragraph shown in the detail view. */\n  detail: string\n  category: CategoryId\n  author: string\n  /** Lucide glyph standing in for the product logo. */\n  icon: Component\n  connected?: boolean\n  permissions: string[]\n}\n\nconst props = defineProps<{\n  /** Replace the built-in stub catalog. */\n  integrations?: Integration[]\n  initialQuery?: string\n  initialCategory?: CategoryFilter\n  initialInstalledOnly?: boolean\n  /** Render this integration's detail body as an always-visible panel (docs/story aid). */\n  featuredId?: string\n  class?: HTMLAttributes['class']\n}>()\n\nconst CATEGORIES: { id: CategoryFilter; label: string }[] = [\n  { id: 'all', label: 'All' },\n  { id: 'analytics', label: 'Analytics' },\n  { id: 'devops', label: 'DevOps' },\n  { id: 'communication', label: 'Communication' },\n  { id: 'billing', label: 'Billing' },\n]\n\nconst stubIntegrations: Integration[] = [\n  {\n    id: 'pulseboard',\n    name: 'Pulseboard',\n    description: 'Funnels, retention curves and cohort exploration for product teams.',\n    detail:\n      'Pulseboard plugs into your event stream and turns raw activity into funnels, retention curves and cohort views. Dashboards sync hourly, and annotations push back into your workspace so launches stay marked on every chart.',\n    category: 'analytics',\n    author: 'Pulseboard Labs',\n    icon: BarChart3,\n    connected: true,\n    permissions: ['Read workspace profile', 'Read dashboards and events', 'Create annotations and highlights'],\n  },\n  {\n    id: 'metrica',\n    name: 'Metrica',\n    description: 'Privacy-friendly web metrics with no cookie banner required.',\n    detail:\n      'Metrica collects pageviews and referrers without cookies or personal data, so sites stay compliant out of the box. Live visitor counts, entry pages and campaign attribution arrive as lightweight embeds or a full dashboard.',\n    category: 'analytics',\n    author: 'Metrica Inc.',\n    icon: LineChart,\n    permissions: ['Read site metadata', 'Record aggregate pageviews'],\n  },\n  {\n    id: 'shipyard',\n    name: 'Shipyard',\n    description: 'Zero-config preview environments for every pull request.',\n    detail:\n      'Shipyard builds an isolated environment for each pull request, complete with seeded databases and shareable URLs. Deploys post status checks back to your repository, and idle previews sleep automatically to keep costs flat.',\n    category: 'devops',\n    author: 'Shipyard Systems',\n    icon: Container,\n    connected: true,\n    permissions: ['Read pull requests and statuses', 'Create deployment check runs', 'Publish preview URLs'],\n  },\n  {\n    id: 'watchtower',\n    name: 'Watchtower',\n    description: 'Uptime, SSL and domain monitoring with on-call escalations.',\n    detail:\n      'Watchtower probes your endpoints from twelve regions and escalates incidents through on-call schedules when thresholds break. SSL expiry, DNS drift and port changes are tracked alongside uptime so surprises surface early.',\n    category: 'devops',\n    author: 'Northwind Ops',\n    icon: Radar,\n    permissions: ['Read incident history', 'Register webhook endpoints', 'Send alert notifications'],\n  },\n  {\n    id: 'loghound',\n    name: 'Loghound',\n    description: 'Structured log search across every service and region.',\n    detail:\n      'Loghound ingests structured logs from every service, indexes them in seconds and supports SQL-ish queries with saved views. Tail live streams during deploys and pipe matched events straight into your alerting rules.',\n    category: 'devops',\n    author: 'Houndworks',\n    icon: ScrollText,\n    permissions: ['Read log streams', 'Create saved queries', 'Forward events to webhooks'],\n  },\n  {\n    id: 'chatterbox',\n    name: 'Chatterbox',\n    description: 'Team chat with threads, huddles and shared channels.',\n    detail:\n      'Chatterbox keeps conversations organized with threaded channels, quick huddles and shared external channels. Bots receive messages through webhooks and can post rich updates, keeping build and incident feeds where the team already works.',\n    category: 'communication',\n    author: 'Chatterbox Co.',\n    icon: MessageSquare,\n    permissions: ['Read channel names and topics', 'Post messages as the app', 'Upload notification files'],\n  },\n  {\n    id: 'mailroom',\n    name: 'Mailroom',\n    description: 'Transactional email with templates and delivery insights.',\n    detail:\n      'Mailroom sends transactional email from versioned templates with per-recipient variables. Delivery webhooks report bounces, complaints and opens, and suppression lists keep problematic addresses out of future sends.',\n    category: 'communication',\n    author: 'Mailroom Ltd.',\n    icon: Mail,\n    permissions: ['Send email on your behalf', 'Read delivery and bounce events', 'Manage suppression list'],\n  },\n  {\n    id: 'ledgerly',\n    name: 'Ledgerly',\n    description: 'Invoicing, tax handling and revenue recognition in one flow.',\n    detail:\n      'Ledgerly generates invoices from your billing events, applies regional tax rules automatically and reconciles payments against your ledger. Revenue schedules export to your accounting package month by month.',\n    category: 'billing',\n    author: 'Ledgerly Inc.',\n    icon: Receipt,\n    permissions: ['Read customer records', 'Create and send invoices', 'Read payment statuses'],\n  },\n  {\n    id: 'billfold',\n    name: 'Billfold',\n    description: 'Subscription management and dunning recovery built in.',\n    detail:\n      'Billfold manages plans, proration and trial conversions with hosted checkout and self-serve portals. Smart retries and expiry reminders recover failed payments before customers ever notice.',\n    category: 'billing',\n    author: 'Billfold Labs',\n    icon: CreditCard,\n    permissions: ['Read subscription states', 'Start checkout sessions', 'Send payment reminders'],\n  },\n]\n\nconst integrations = ref<Integration[]>(props.integrations ?? stubIntegrations)\nconst query = ref(props.initialQuery ?? '')\nconst category = ref<CategoryFilter>(props.initialCategory ?? 'all')\nconst installedOnly = ref(props.initialInstalledOnly ?? false)\nconst detailId = ref<string | null>(null)\nconst detailOpen = ref(false)\n\nconst counts = computed<Record<string, number>>(() => {\n  const acc: Record<string, number> = {}\n  for (const c of CATEGORIES) acc[c.id] = 0\n  for (const i of integrations.value) acc[i.category] = (acc[i.category] ?? 0) + 1\n  return acc\n})\n\nconst visible = computed(() => {\n  const q = query.value.trim().toLowerCase()\n  return integrations.value.filter((i) => {\n    if (category.value !== 'all' && i.category !== category.value) return false\n    if (installedOnly.value && !i.connected) return false\n    if (!q) return true\n    const hay = `${i.name} ${i.description} ${i.author} ${categoryLabel(i.category)}`.toLowerCase()\n    return hay.includes(q)\n  })\n})\n\nconst featured = computed(() =>\n  props.featuredId ? (integrations.value.find((i) => i.id === props.featuredId) ?? null) : null,\n)\n\nconst activeDetail = computed(() =>\n  detailId.value ? (integrations.value.find((i) => i.id === detailId.value) ?? null) : null,\n)\n\nfunction categoryLabel(id: CategoryId): string {\n  return CATEGORIES.find((c) => c.id === id)?.label ?? id\n}\n\nfunction initials(author: string): string {\n  return author\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w[0]?.toUpperCase() ?? '')\n    .join('')\n}\n\nfunction openDetail(id: string) {\n  detailId.value = id\n  detailOpen.value = true\n}\n\nfunction setConnected(id: string, connected: boolean) {\n  const item = integrations.value.find((i) => i.id === id)\n  if (item) item.connected = connected\n}\n\nfunction install(id: string) {\n  setConnected(id, true)\n}\n\nfunction disconnect(id: string) {\n  setConnected(id, false)\n}\n\nfunction clearFilters() {\n  query.value = ''\n  category.value = 'all'\n  installedOnly.value = false\n}\n</script>\n\n<template>\n  <div :class=\"cn('space-y-4', props.class)\" data-slot=\"integrations-directory\">\n    <!-- Toolbar -->\n    <div class=\"space-y-3\">\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <Input\n          v-model=\"query\"\n          :prefix-icon=\"Search\"\n          placeholder=\"Search integrations…\"\n          aria-label=\"Search integrations\"\n          class=\"min-w-56 flex-1\"\n        />\n        <div class=\"ml-auto flex items-center gap-2\">\n          <Switch v-model=\"installedOnly\" size=\"sm\" aria-label=\"Show installed integrations only\" />\n          <span class=\"text-muted-foreground text-sm select-none\">Installed</span>\n        </div>\n      </div>\n      <div class=\"flex flex-wrap items-center gap-1.5\">\n        <button\n          v-for=\"c in CATEGORIES\"\n          :key=\"c.id\"\n          type=\"button\"\n          class=\"focus-visible:ring-ring rounded-full focus-visible:ring-2 focus-visible:outline-none\"\n          :aria-pressed=\"category === c.id\"\n          @click=\"category = c.id\"\n        >\n          <Chip :variant=\"category === c.id ? 'filled' : 'outline'\" size=\"sm\">\n            {{ c.label }}\n            <span class=\"tabular-nums opacity-70\">{{ counts[c.id] ?? 0 }}</span>\n          </Chip>\n        </button>\n      </div>\n    </div>\n\n    <!-- Featured detail panel (always-visible variant of the dialog body) -->\n    <section\n      v-if=\"featured\"\n      data-slot=\"integration-detail-panel\"\n      class=\"bg-card space-y-4 rounded-xl border p-6 shadow-sm\"\n      aria-label=\"Integration details\"\n    >\n      <div class=\"flex items-start gap-4\">\n        <span\n          class=\"bg-primary/10 text-primary flex size-14 shrink-0 items-center justify-center rounded-xl\"\n          aria-hidden=\"true\"\n        >\n          <component :is=\"featured.icon\" class=\"size-7\" />\n        </span>\n        <div class=\"min-w-0\">\n          <h2 class=\"text-base font-semibold tracking-tight\">{{ featured.name }}</h2>\n          <div class=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n            <Chip variant=\"outline\" size=\"sm\">{{ categoryLabel(featured.category) }}</Chip>\n            <span class=\"text-muted-foreground text-xs\">by {{ featured.author }}</span>\n          </div>\n        </div>\n      </div>\n      <p class=\"text-muted-foreground text-sm leading-relaxed\">{{ featured.detail }}</p>\n      <div>\n        <p class=\"text-muted-foreground text-xs font-semibold tracking-widest uppercase\">Permissions</p>\n        <ul class=\"mt-2 space-y-1.5\">\n          <li v-for=\"p in featured.permissions\" :key=\"p\" class=\"flex items-start gap-2 text-sm\">\n            <Check class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n            <span>{{ p }}</span>\n          </li>\n        </ul>\n      </div>\n      <div class=\"border-border flex items-center gap-2 border-t pt-4\">\n        <template v-if=\"featured.connected\">\n          <Badge variant=\"success\"><Check aria-hidden=\"true\" /> Connected</Badge>\n          <Button variant=\"ghost\" size=\"sm\" class=\"ml-auto\" @click=\"disconnect(featured.id)\">Disconnect</Button>\n        </template>\n        <Button v-else class=\"w-full\" @click=\"install(featured.id)\">Install</Button>\n      </div>\n    </section>\n\n    <!-- Results -->\n    <template v-if=\"visible.length > 0\">\n      <p class=\"text-muted-foreground text-xs tabular-nums\">\n        Showing {{ visible.length }} of {{ integrations.length }} integrations\n      </p>\n      <div class=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n        <article\n          v-for=\"i in visible\"\n          :key=\"i.id\"\n          data-slot=\"integration-card\"\n          class=\"bg-card hover:border-ring/50 relative flex flex-col gap-3 rounded-xl border p-5 shadow-sm transition-colors hover:shadow-md\"\n        >\n          <button\n            type=\"button\"\n            class=\"focus-visible:ring-ring/50 absolute inset-0 rounded-xl focus-visible:ring-2 focus-visible:outline-none\"\n            :aria-label=\"`View ${i.name} details`\"\n            @click=\"openDetail(i.id)\"\n          />\n          <div class=\"flex items-start justify-between gap-2\">\n            <span\n              class=\"bg-primary/10 text-primary flex size-10 shrink-0 items-center justify-center rounded-lg\"\n              aria-hidden=\"true\"\n            >\n              <component :is=\"i.icon\" class=\"size-5\" />\n            </span>\n            <Chip variant=\"outline\" size=\"sm\">{{ categoryLabel(i.category) }}</Chip>\n          </div>\n          <div>\n            <p class=\"text-sm font-semibold tracking-tight\">{{ i.name }}</p>\n            <p class=\"text-muted-foreground mt-0.5 truncate text-xs\">{{ i.description }}</p>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <span\n              class=\"bg-muted text-muted-foreground flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-medium\"\n              aria-hidden=\"true\"\n            >\n              {{ initials(i.author) }}\n            </span>\n            <span class=\"text-muted-foreground truncate text-xs\">{{ i.author }}</span>\n          </div>\n          <div class=\"border-border relative mt-auto flex items-center gap-2 border-t pt-3\">\n            <template v-if=\"i.connected\">\n              <Badge variant=\"success\"><Check aria-hidden=\"true\" /> Connected</Badge>\n              <Button variant=\"ghost\" size=\"xs\" class=\"ml-auto\" @click.stop=\"disconnect(i.id)\">Disconnect</Button>\n            </template>\n            <Button v-else size=\"sm\" class=\"w-full\" @click.stop=\"install(i.id)\">Install</Button>\n          </div>\n        </article>\n      </div>\n    </template>\n\n    <!-- Empty state -->\n    <div v-else class=\"rounded-xl border border-dashed\">\n      <EmptyState\n        :icon=\"SearchX\"\n        title=\"No integrations found\"\n        description=\"Nothing matches your current search and filters.\"\n      >\n        <Button variant=\"outline\" size=\"sm\" class=\"mt-4\" @click=\"clearFilters\">Clear filters</Button>\n      </EmptyState>\n    </div>\n\n    <!-- Detail dialog -->\n    <Dialog :open=\"detailOpen\" @update:open=\"detailOpen = $event\">\n      <DialogContent v-if=\"activeDetail\" class=\"sm:max-w-md\">\n        <DialogHeader>\n          <div class=\"flex items-start gap-4\">\n            <span\n              class=\"bg-primary/10 text-primary flex size-14 shrink-0 items-center justify-center rounded-xl\"\n              aria-hidden=\"true\"\n            >\n              <component :is=\"activeDetail.icon\" class=\"size-7\" />\n            </span>\n            <div class=\"min-w-0\">\n              <DialogTitle class=\"text-base tracking-tight\">{{ activeDetail.name }}</DialogTitle>\n              <div class=\"mt-1.5 flex flex-wrap items-center gap-1.5\">\n                <Chip variant=\"outline\" size=\"sm\">{{ categoryLabel(activeDetail.category) }}</Chip>\n                <span class=\"text-muted-foreground text-xs\">by {{ activeDetail.author }}</span>\n              </div>\n            </div>\n          </div>\n        </DialogHeader>\n        <DialogDescription class=\"leading-relaxed\">{{ activeDetail.detail }}</DialogDescription>\n        <div>\n          <p class=\"text-muted-foreground text-xs font-semibold tracking-widest uppercase\">Permissions</p>\n          <ul class=\"mt-2 space-y-1.5\">\n            <li v-for=\"p in activeDetail.permissions\" :key=\"p\" class=\"flex items-start gap-2 text-sm\">\n              <Check class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n              <span>{{ p }}</span>\n            </li>\n          </ul>\n        </div>\n        <div class=\"border-border flex items-center gap-2 border-t pt-4\">\n          <template v-if=\"activeDetail.connected\">\n            <Badge variant=\"success\"><Check aria-hidden=\"true\" /> Connected</Badge>\n            <Button variant=\"ghost\" size=\"sm\" class=\"ml-auto\" @click=\"disconnect(activeDetail.id)\"> Disconnect </Button>\n          </template>\n          <Button v-else class=\"w-full\" @click=\"install(activeDetail.id)\">Install</Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/integrations-directory/IntegrationsDirectory.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/chip.json",
    "https://uipkge.dev/r/vue/dialog.json",
    "https://uipkge.dev/r/vue/empty-state.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/switch.json"
  ],
  "description": "App marketplace surface: functional search, category chips with counts and an installed-only switch above a responsive grid of integration cards (logo tile, one-line blurb, author row, install/connected footer). Clicking a card opens a detail dialog with permissions; pass `featuredId` to render that dialog body as an always-visible panel. Stateful demo — swap the stub catalog for your source.",
  "categories": [
    "devops",
    "marketing",
    "dashboard"
  ]
}