{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "knowledge-base-hub",
  "title": "Knowledge Base Hub",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/knowledge-base-hub/KnowledgeBaseHub.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport {\n  ArrowRight,\n  ArrowUpRight,\n  Blocks,\n  Clock,\n  Code,\n  CreditCard,\n  Eye,\n  HelpCircle,\n  MessageSquare,\n  Rocket,\n  Search,\n  Shield,\n  Users,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { KnowledgeHeroSearch } from './KnowledgeHeroSearch'\n\ninterface Category {\n  id: string\n  title: string\n  description: string\n  articlesCount: number\n  icon: LucideIcon\n  featuredTopics: string[]\n}\n\ninterface Article {\n  id: string\n  title: string\n  description: string\n  category: string\n  readTime: string\n  viewCount: string\n}\n\nexport interface KnowledgeBaseHubProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst CATEGORIES: Category[] = [\n  {\n    id: 'getting-started',\n    title: 'Getting Started',\n    icon: Rocket,\n    articlesCount: 14,\n    description: 'Quick start guides, installation walkthroughs, and core architecture concepts.',\n    featuredTopics: ['Quickstart Guide', 'Project Setup', 'First Deployment'],\n  },\n  {\n    id: 'account-billing',\n    title: 'Account & Billing',\n    icon: CreditCard,\n    articlesCount: 22,\n    description: 'Subscription plans, payment methods, invoice management, and seat licensing.',\n    featuredTopics: ['Upgrade Plan', 'Payment Methods', 'Invoices'],\n  },\n  {\n    id: 'api-sdks',\n    title: 'API & Developer SDKs',\n    icon: Code,\n    articlesCount: 35,\n    description: 'REST & GraphQL endpoints, SDK reference libraries, auth tokens, and rate limits.',\n    featuredTopics: ['Authentication', 'Rate Limits', 'SDK Libraries'],\n  },\n  {\n    id: 'security-compliance',\n    title: 'Security & Compliance',\n    icon: Shield,\n    articlesCount: 18,\n    description: 'SOC 2 certification, SSO/SAML configuration, audit logs, and data encryption.',\n    featuredTopics: ['SAML SSO', 'Audit Logs', 'Data Encryption'],\n  },\n  {\n    id: 'integrations-webhooks',\n    title: 'Integrations & Webhooks',\n    icon: Blocks,\n    articlesCount: 28,\n    description: 'Connecting third-party apps, custom webhooks, payload schemas, and event retries.',\n    featuredTopics: ['Webhooks Setup', 'Slack App', 'Retry Policies'],\n  },\n  {\n    id: 'troubleshooting-faq',\n    title: 'Troubleshooting & FAQ',\n    icon: HelpCircle,\n    articlesCount: 40,\n    description: 'Common error codes, debugging workflows, known limits, and frequent questions.',\n    featuredTopics: ['Error Codes', 'Performance', 'Account Recovery'],\n  },\n]\n\nconst TRENDING_ARTICLES: Article[] = [\n  {\n    id: 'art-1',\n    title: 'Setting up SAML 2.0 Single Sign-On (SSO)',\n    description: 'Step-by-step instructions for configuring Okta, Azure AD, and Google Workspace SSO.',\n    category: 'Security',\n    readTime: '6 min read',\n    viewCount: '14.2k views',\n  },\n  {\n    id: 'art-2',\n    title: 'Migrating from v1 REST API to v2 GraphQL',\n    description: 'Breaking changes, schema transformations, and backward-compatibility guidelines.',\n    category: 'API & SDKs',\n    readTime: '8 min read',\n    viewCount: '11.8k views',\n  },\n  {\n    id: 'art-3',\n    title: 'Configuring Custom Domains & SSL Certificates',\n    description: 'DNS record configuration, automatic TLS provisioning, and apex domain routing.',\n    category: 'Getting Started',\n    readTime: '4 min read',\n    viewCount: '9.5k views',\n  },\n  {\n    id: 'art-4',\n    title: 'Webhook Signatures & Replay Attack Prevention',\n    description: 'Verify HMAC-SHA256 signatures and implement idempotency keys for event handling.',\n    category: 'Integrations',\n    readTime: '5 min read',\n    viewCount: '8.9k views',\n  },\n  {\n    id: 'art-5',\n    title: 'Managing Team Roles & Granular Permissions',\n    description: 'Assigning RBAC policies, custom permission sets, and project-level scopes.',\n    category: 'Account',\n    readTime: '5 min read',\n    viewCount: '7.4k views',\n  },\n  {\n    id: 'art-6',\n    title: 'Debugging 429 Rate Limit Errors & Backoff Strategies',\n    description: 'Understanding quota tiers, exponential backoff algorithms, and jitter implementations.',\n    category: 'Troubleshooting',\n    readTime: '7 min read',\n    viewCount: '12.1k views',\n  },\n]\n\nexport function KnowledgeBaseHub({ className, ...props }: KnowledgeBaseHubProps) {\n  const [searchQuery, setSearchQuery] = React.useState('')\n\n  const filteredCategories = React.useMemo(() => {\n    const q = searchQuery.trim().toLowerCase()\n    if (!q) return CATEGORIES\n    return CATEGORIES.filter(\n      (c) =>\n        c.title.toLowerCase().includes(q) ||\n        c.description.toLowerCase().includes(q) ||\n        c.featuredTopics.some((t) => t.toLowerCase().includes(q)),\n    )\n  }, [searchQuery])\n\n  const filteredArticles = React.useMemo(() => {\n    const q = searchQuery.trim().toLowerCase()\n    if (!q) return TRENDING_ARTICLES\n    return TRENDING_ARTICLES.filter(\n      (a) =>\n        a.title.toLowerCase().includes(q) ||\n        a.description.toLowerCase().includes(q) ||\n        a.category.toLowerCase().includes(q),\n    )\n  }, [searchQuery])\n\n  return (\n    <div data-slot=\"knowledge-base-hub\" className={cn('w-full space-y-12 py-6', className)} {...props}>\n      {/* Hero Header */}\n      <KnowledgeHeroSearch searchQuery={searchQuery} onSearchQueryChange={setSearchQuery} />\n\n      {/* Empty Search State */}\n      {filteredCategories.length === 0 && filteredArticles.length === 0 && (\n        <div className=\"border-border bg-card/40 rounded-xl border border-dashed p-10 text-center\">\n          <div className=\"bg-muted text-muted-foreground mx-auto flex size-12 items-center justify-center rounded-full\">\n            <Search className=\"size-6\" aria-hidden=\"true\" />\n          </div>\n          <h3 className=\"mt-4 text-base font-semibold\">No matching articles found</h3>\n          <p className=\"text-muted-foreground mt-1 text-sm\">\n            No guides or categories matched &ldquo;{searchQuery}&rdquo;. Try searching for another topic.\n          </p>\n          <Button variant=\"outline\" size=\"sm\" className=\"mt-4\" onClick={() => setSearchQuery('')}>\n            Reset search\n          </Button>\n        </div>\n      )}\n\n      {/* Category Cards Grid */}\n      {filteredCategories.length > 0 && (\n        <section className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <h2 className=\"text-xl font-semibold tracking-tight sm:text-2xl\">Browse by Category</h2>\n            <span className=\"text-muted-foreground text-xs tabular-nums\">{filteredCategories.length} categories</span>\n          </div>\n\n          <div className=\"grid gap-5 sm:grid-cols-2 lg:grid-cols-3\">\n            {filteredCategories.map((category) => {\n              const Icon = category.icon\n              return (\n                <Card\n                  key={category.id}\n                  className=\"group/card hover:border-ring/50 relative flex flex-col justify-between overflow-hidden transition-colors duration-200 hover:shadow-sm\"\n                >\n                  <CardHeader className=\"pb-3\">\n                    <div className=\"flex items-start justify-between gap-3\">\n                      <div className=\"bg-primary/10 text-primary flex size-11 items-center justify-center rounded-lg\">\n                        <Icon className=\"size-5\" aria-hidden=\"true\" />\n                      </div>\n                      <Badge variant=\"secondary\" className=\"text-xs font-normal\">\n                        {category.articlesCount} articles\n                      </Badge>\n                    </div>\n                    <CardTitle className=\"mt-3 text-lg font-semibold tracking-tight\">{category.title}</CardTitle>\n                    <CardDescription className=\"text-muted-foreground text-sm leading-relaxed\">\n                      {category.description}\n                    </CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"pt-0\">\n                    <div className=\"border-border flex flex-wrap gap-1.5 border-t pt-3\">\n                      {category.featuredTopics.map((topic) => (\n                        <span\n                          key={topic}\n                          className=\"bg-muted/60 text-muted-foreground rounded-md px-2 py-0.5 text-xs font-medium\"\n                        >\n                          {topic}\n                        </span>\n                      ))}\n                    </div>\n                  </CardContent>\n                  <CardFooter className=\"border-border bg-muted/20 flex items-center justify-between border-t py-3\">\n                    <a\n                      href=\"#\"\n                      className=\"text-primary group-hover/card:text-primary/80 focus-visible:ring-ring flex min-h-6 items-center gap-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                    >\n                      <span>Explore category</span>\n                      <ArrowRight className=\"size-3.5 transition-transform duration-200 group-hover/card:translate-x-1\" />\n                    </a>\n                  </CardFooter>\n                </Card>\n              )\n            })}\n          </div>\n        </section>\n      )}\n\n      {/* Popular & Trending Articles Section */}\n      {filteredArticles.length > 0 && (\n        <section className=\"space-y-4\">\n          <div className=\"flex flex-col justify-between gap-2 sm:flex-row sm:items-end\">\n            <div>\n              <h2 className=\"text-xl font-semibold tracking-tight sm:text-2xl\">Popular & Trending Articles</h2>\n              <p className=\"text-muted-foreground mt-1 text-sm\">\n                Frequently read guides and developer documentation this week.\n              </p>\n            </div>\n            <a\n              href=\"#\"\n              className=\"text-primary hover:text-primary/80 inline-flex min-h-6 items-center gap-1 text-xs font-medium transition-colors\"\n            >\n              <span>View all documentation</span>\n              <ArrowRight className=\"size-3.5\" aria-hidden=\"true\" />\n            </a>\n          </div>\n\n          <div className=\"grid gap-4 md:grid-cols-2\">\n            {filteredArticles.map((article) => (\n              <Card\n                key={article.id}\n                className=\"group/article hover:border-ring/50 relative flex flex-col justify-between p-5 transition-colors duration-200 hover:shadow-sm\"\n              >\n                <div className=\"space-y-2.5\">\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <Badge variant=\"outline\" className=\"text-xs font-medium\">\n                      {article.category}\n                    </Badge>\n                    <div className=\"text-muted-foreground flex items-center gap-3 text-xs\">\n                      <span className=\"inline-flex items-center gap-1\">\n                        <Clock className=\"size-3.5\" aria-hidden=\"true\" />\n                        {article.readTime}\n                      </span>\n                      <span className=\"inline-flex items-center gap-1\">\n                        <Eye className=\"size-3.5\" aria-hidden=\"true\" />\n                        {article.viewCount}\n                      </span>\n                    </div>\n                  </div>\n\n                  <div>\n                    <a\n                      href=\"#\"\n                      className=\"text-foreground group-hover/article:text-primary focus-visible:ring-ring flex items-start justify-between gap-2 text-base font-semibold tracking-tight transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                    >\n                      <span>{article.title}</span>\n                      <ArrowUpRight\n                        className=\"text-muted-foreground group-hover/article:text-primary size-4 shrink-0 transition-transform duration-200 group-hover/article:translate-x-0.5 group-hover/article:-translate-y-0.5\"\n                        aria-hidden=\"true\"\n                      />\n                    </a>\n                    <p className=\"text-muted-foreground mt-1 line-clamp-2 text-sm leading-relaxed\">\n                      {article.description}\n                    </p>\n                  </div>\n                </div>\n              </Card>\n            ))}\n          </div>\n        </section>\n      )}\n\n      {/* Community & Live Support Footer Banner */}\n      <Card className=\"border-border bg-card/60 overflow-hidden shadow-xs\">\n        <CardContent className=\"flex flex-col items-center justify-between gap-6 p-8 text-center sm:p-10 md:flex-row md:text-left\">\n          <div className=\"max-w-xl space-y-2\">\n            <h3 className=\"text-xl font-semibold tracking-tight sm:text-2xl\">\n              Can&apos;t find what you&apos;re looking for?\n            </h3>\n            <p className=\"text-muted-foreground text-sm leading-relaxed\">\n              Our support engineers are available 24/7 to help resolve technical issues, or join our Discord community\n              to connect with other developers.\n            </p>\n          </div>\n          <div className=\"flex shrink-0 flex-wrap items-center justify-center gap-3\">\n            <Button className=\"gap-2\">\n              <MessageSquare className=\"size-4\" aria-hidden=\"true\" />\n              <span>Contact Support</span>\n            </Button>\n            <Button variant=\"outline\" className=\"gap-2\">\n              <Users className=\"size-4\" aria-hidden=\"true\" />\n              <span>Join Discord Community</span>\n            </Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/KnowledgeBaseHub.tsx"
    },
    {
      "path": "packages/registry-react/blocks/knowledge-base-hub/KnowledgeHeroSearch.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { BookOpen, Search, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Input } from '@/components/ui/input'\n\nconst QUICK_TOPICS = ['Authentication', 'Billing', 'Webhooks', 'Custom Domains']\n\nexport interface KnowledgeHeroSearchProps {\n  searchQuery: string\n  onSearchQueryChange: (value: string) => void\n}\n\nexport function KnowledgeHeroSearch({ searchQuery, onSearchQueryChange }: KnowledgeHeroSearchProps) {\n  function selectTopic(topic: string) {\n    if (searchQuery === topic) {\n      onSearchQueryChange('')\n    } else {\n      onSearchQueryChange(topic)\n    }\n  }\n\n  return (\n    <section className=\"mx-auto max-w-3xl space-y-6 text-center\">\n      <div className=\"space-y-3\">\n        <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-medium\">\n          <BookOpen className=\"text-primary size-3.5\" aria-hidden=\"true\" />\n          Help Center & Documentation\n        </Badge>\n        <h1 className=\"text-3xl font-bold tracking-tight sm:text-4xl lg:text-5xl\">How can we help you today?</h1>\n        <p className=\"text-muted-foreground mx-auto max-w-xl text-base sm:text-lg\">\n          Search our knowledge base for guides, API references, troubleshooting tips, and common workflows.\n        </p>\n      </div>\n\n      <div className=\"relative mx-auto max-w-2xl\">\n        <Search\n          aria-hidden=\"true\"\n          className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-4 size-5 -translate-y-1/2\"\n        />\n        <Input\n          type=\"search\"\n          value={searchQuery}\n          onChange={(e) => onSearchQueryChange(e.target.value)}\n          placeholder=\"Search for answers, guides, and error codes...\"\n          className=\"bg-card h-12 rounded-xl pr-14 pl-11 text-base shadow-xs\"\n        />\n        <div className=\"pointer-events-none absolute top-1/2 right-3 -translate-y-1/2\">\n          <kbd className=\"bg-muted text-muted-foreground border-border hidden h-6 items-center rounded border px-2 font-mono text-xs select-none sm:inline-flex\">\n            ⌘K\n          </kbd>\n        </div>\n      </div>\n\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        <span className=\"text-muted-foreground text-xs font-medium\">Quick topics:</span>\n        {QUICK_TOPICS.map((topic) => (\n          <button\n            key={topic}\n            type=\"button\"\n            className={cn(\n              'focus-visible:ring-ring inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n              searchQuery === topic\n                ? 'bg-primary text-primary-foreground border-primary'\n                : 'bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground border-transparent',\n            )}\n            onClick={() => selectTopic(topic)}\n          >\n            {topic}\n          </button>\n        ))}\n        {searchQuery && (\n          <button\n            type=\"button\"\n            className=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 px-1.5 py-1 text-xs font-medium transition-colors\"\n            onClick={() => onSearchQueryChange('')}\n          >\n            <X className=\"size-3\" aria-hidden=\"true\" />\n            Clear search\n          </button>\n        )}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/KnowledgeHeroSearch.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/input.json"
  ],
  "description": "Self-serve help center and customer documentation hub with hero search, quick topic pills, category cards grid, trending articles, and community support banner.",
  "categories": [
    "media",
    "support",
    "marketing"
  ]
}