{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer-developer-dense-grid",
  "title": "Footer Developer Dense Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/footer-developer-dense-grid/footer-developer-dense-grid.component.ts",
      "content": "// Dense developer footer with multi-column categorized links, live operational status\n// beacon, and social triggers. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { Github, Globe, LucideAngularModule, Twitter } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\nexport interface DeveloperFooterColumn {\n  title: string\n  links: { label: string; href: string; badge?: string }[]\n}\n\nconst columns: DeveloperFooterColumn[] = [\n  {\n    title: 'UI Primitives',\n    links: [\n      { label: 'Button & Controls', href: '#' },\n      { label: 'Dialog & Overlays', href: '#' },\n      { label: 'Data Table & Virtual', href: '#' },\n      { label: 'Charts & Sparklines', href: '#' },\n      { label: 'Form Controls & Inputs', href: '#' },\n      { label: 'KpiGrid & Metric Tiles', href: '#' },\n    ],\n  },\n  {\n    title: 'Marketing Blocks',\n    links: [\n      { label: 'Hero Sandboxes', href: '#' },\n      { label: 'Feature Workbenches', href: '#' },\n      { label: 'Pricing Matrix & ROI', href: '#' },\n      { label: 'Social Proof Tickers', href: '#' },\n      { label: 'Testimonial Masonry', href: '#' },\n      { label: 'Interactive Demos', href: '#', badge: 'New' },\n    ],\n  },\n  {\n    title: 'Ecosystem Templates',\n    links: [\n      { label: 'HRMS Nuxt Template', href: '#' },\n      { label: 'HMS Clinical Dashboard', href: '#' },\n      { label: 'Shipment Tracking Live', href: '#' },\n      { label: 'Fintech Banking Portal', href: '#' },\n      { label: 'AI LLM Workspace', href: '#' },\n    ],\n  },\n  {\n    title: 'Developer DX',\n    links: [\n      { label: 'CLI Installation Guide', href: '#' },\n      { label: 'Tailwind CSS v4 Tokens', href: '#' },\n      { label: 'Dual-Framework Parity', href: '#' },\n      { label: 'Reka UI Primitives', href: '#' },\n      { label: 'Radix UI Primitives', href: '#' },\n      { label: 'Changelog Timeline', href: '#' },\n    ],\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-footer-developer-dense-grid, [ui-footer-developer-dense-grid]',\n  standalone: true,\n  // React renders the root <footer> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent],\n  template: `\n    <footer data-slot=\"footer-developer-dense-grid\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-7xl space-y-12 px-4 py-12 sm:px-6 sm:py-16 lg:px-8\">\n        <!-- Top Grid: Brand & Categorized Columns -->\n        <div class=\"grid grid-cols-2 gap-8 text-left md:grid-cols-6 lg:grid-cols-12\">\n          <!-- Brand Info (4 Cols) -->\n          <div class=\"col-span-2 space-y-4 md:col-span-6 lg:col-span-4\">\n            <div class=\"flex items-center gap-2 font-mono text-base font-bold tracking-tight\">\n              <span\n                class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-lg text-xs font-bold shadow-xs\"\n              >\n                U\n              </span>\n              <span>UIPKGE.DEV</span>\n            </div>\n\n            <p class=\"text-muted-foreground max-w-sm text-xs leading-relaxed\">\n              The open-source unbundled component registry where you own 100% of the source code. Calibrated tokens,\n              pure AST distribution, and mathematical dual-framework parity across Vue 3.5 and React 19.\n            </p>\n\n            <!-- Social links -->\n            <div class=\"flex items-center gap-2 pt-2\">\n              <button ui-button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"GitHub\">\n                <lucide-icon [img]=\"Github\" class=\"size-3.5\" />\n              </button>\n              <button ui-button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Twitter\">\n                <lucide-icon [img]=\"Twitter\" class=\"size-3.5\" />\n              </button>\n              <button ui-button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Website\">\n                <lucide-icon [img]=\"Globe\" class=\"size-3.5\" />\n              </button>\n            </div>\n          </div>\n\n          <!-- 4 Links Columns (8 Cols total, 2 cols each) -->\n          @for (col of columnList; track col.title) {\n            <div class=\"col-span-1 space-y-3 md:col-span-3 lg:col-span-2\">\n              <h4 class=\"text-foreground font-mono text-xs font-bold tracking-wider uppercase\">\n                {{ col.title }}\n              </h4>\n              <ul class=\"text-muted-foreground space-y-2 font-mono text-xs\">\n                @for (link of col.links; track link.label) {\n                  <li>\n                    <a\n                      [href]=\"link.href\"\n                      class=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\"\n                    >\n                      <span>{{ link.label }}</span>\n                      @if (link.badge) {\n                        <span class=\"py-0.2 bg-primary/20 text-primary rounded px-1.5 text-xs font-bold uppercase\">\n                          {{ link.badge }}\n                        </span>\n                      }\n                    </a>\n                  </li>\n                }\n              </ul>\n            </div>\n          }\n        </div>\n\n        <!-- Bottom Operational Status & Copyright Bar -->\n        <div\n          class=\"border-border/80 text-muted-foreground flex flex-col items-center justify-between gap-4 border-t pt-8 text-center font-mono text-xs sm:flex-row sm:text-left\"\n        >\n          <!-- Live System Telemetry Status -->\n          <div class=\"flex items-center gap-2.5\">\n            <span class=\"relative flex size-2\">\n              <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n              <span class=\"bg-success relative inline-flex size-2 rounded-full\"></span>\n            </span>\n            <span class=\"text-foreground font-medium\">All Global Edge Nodes Operational</span>\n            <span class=\"text-muted-foreground/60\">&bull; Latency: 14ms (P99)</span>\n          </div>\n\n          <!-- Right Copyright & MIT Notice -->\n          <div class=\"flex items-center gap-3\">\n            <span>MIT Licensed &bull; Unbundled Code</span>\n            <span>&copy; {{ currentYear }} UIPKGE</span>\n          </div>\n        </div>\n      </div>\n    </footer>\n  `,\n})\nexport class UiFooterDeveloperDenseGridComponent {\n  protected readonly Github = Github\n  protected readonly Globe = Globe\n  protected readonly Twitter = Twitter\n\n  protected readonly columnList = columns\n  protected readonly currentYear = new Date().getFullYear()\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('border-border bg-card/60 text-foreground border-t backdrop-blur-md', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-developer-dense-grid/footer-developer-dense-grid.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/footer-developer-dense-grid/index.ts",
      "content": "export {\n  UiFooterDeveloperDenseGridComponent,\n  type DeveloperFooterColumn,\n} from './footer-developer-dense-grid.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/footer-developer-dense-grid/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/button.json"
  ],
  "description": "Dense developer footer with multi-column categorized links, live operational status beacon, and social triggers.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "footer"
}