{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "footer",
  "title": "Footer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/footer/BrandIcon.svelte",
      "content": "<script lang=\"ts\" module>\n  export type BrandIconName = 'github' | 'twitter' | 'linkedin' | 'youtube'\n\n  export interface BrandIconProps {\n    name: BrandIconName\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  // @lucide/svelte no longer ships brand glyphs, so the footer social row\n  // carries its own stroke-style marks (24x24, currentColor) mirroring the\n  // retired lucide brand icons the Vue twin imports.\n  let { name, class: className }: BrandIconProps = $props()\n</script>\n\n<svg\n  xmlns=\"http://www.w3.org/2000/svg\"\n  width=\"24\"\n  height=\"24\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  class={className}\n  aria-hidden=\"true\"\n>\n  {#if name === 'github'}\n    <path\n      d=\"M9 19c-5 1.5-5-2.5-7-3m14 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21\"\n    />\n  {:else if name === 'twitter'}\n    <path\n      d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"\n    />\n  {:else if name === 'linkedin'}\n    <path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\" />\n    <rect x=\"2\" y=\"9\" width=\"4\" height=\"12\" />\n    <circle cx=\"4\" cy=\"4\" r=\"2\" />\n  {:else if name === 'youtube'}\n    <path\n      d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z\"\n    />\n    <polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\" />\n  {/if}\n</svg>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/BrandIcon.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/footer/Footer01.svelte",
      "content": "<script lang=\"ts\">\n  import { Boxes } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Input } from '$lib/components/ui/input'\n  import { Separator } from '$lib/components/ui/separator'\n  import BrandIcon from './BrandIcon.svelte'\n\n  let newsletter = $state('')\n  let subscribed = $state(false)\n\n  function subscribe() {\n    if (!newsletter) return\n    subscribed = true\n    newsletter = ''\n  }\n</script>\n\n<footer data-slot=\"footer-01\" class=\"bg-background border-t\">\n  <div class=\"mx-auto max-w-6xl px-6 py-16\">\n    <div class=\"grid gap-10 lg:grid-cols-12\">\n      <div class=\"space-y-4 lg:col-span-4\">\n        <div class=\"flex items-center gap-2\">\n          <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n            <Boxes class=\"size-4\" />\n          </div>\n          <span class=\"text-base font-semibold\">Acme</span>\n        </div>\n        <p class=\"text-muted-foreground max-w-sm text-sm\">Built on shadcn-svelte. Get product updates monthly.</p>\n        <form\n          class=\"flex max-w-sm gap-2\"\n          onsubmit={(e) => {\n            e.preventDefault()\n            subscribe()\n          }}\n        >\n          <Input bind:value={newsletter} type=\"email\" placeholder=\"you@company.com\" required class=\"flex-1\" />\n          <Button type=\"submit\">Subscribe</Button>\n        </form>\n        {#if subscribed}\n          <p class=\"text-success text-xs\">Thanks — check your inbox to confirm.</p>\n        {/if}\n      </div>\n\n      <div class=\"grid grid-cols-2 gap-6 sm:grid-cols-4 lg:col-span-8\">\n        <div class=\"space-y-3\">\n          <h3 class=\"text-sm font-semibold\">Product</h3>\n          <ul class=\"space-y-2\">\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Features</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Pricing</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Changelog</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Roadmap</a>\n            </li>\n          </ul>\n        </div>\n        <div class=\"space-y-3\">\n          <h3 class=\"text-sm font-semibold\">Company</h3>\n          <ul class=\"space-y-2\">\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">About</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Blog</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Careers</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Contact</a>\n            </li>\n          </ul>\n        </div>\n        <div class=\"space-y-3\">\n          <h3 class=\"text-sm font-semibold\">Resources</h3>\n          <ul class=\"space-y-2\">\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\"\n                >Documentation</a\n              >\n            </li>\n            <li><a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">API</a></li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Help center</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Status</a>\n            </li>\n          </ul>\n        </div>\n        <div class=\"space-y-3\">\n          <h3 class=\"text-sm font-semibold\">Legal</h3>\n          <ul class=\"space-y-2\">\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Terms</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Privacy</a>\n            </li>\n            <li>\n              <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Security</a>\n            </li>\n            <li><a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">DPA</a></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n\n    <Separator class=\"my-10\" />\n\n    <div class=\"flex flex-wrap items-center justify-between gap-4\">\n      <p class=\"text-muted-foreground text-xs\">© 2026 Acme. All rights reserved.</p>\n      <div class=\"flex items-center gap-3\">\n        <a href=\"#\" aria-label=\"GitHub\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n          <BrandIcon name=\"github\" class=\"size-4\" />\n        </a>\n        <a href=\"#\" aria-label=\"Twitter\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n          <BrandIcon name=\"twitter\" class=\"size-4\" />\n        </a>\n        <a href=\"#\" aria-label=\"LinkedIn\" class=\"text-muted-foreground hover:text-foreground transition-colors\">\n          <BrandIcon name=\"linkedin\" class=\"size-4\" />\n        </a>\n      </div>\n    </div>\n  </div>\n</footer>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/Footer01.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/footer/FooterBrandStatement.svelte",
      "content": "<script lang=\"ts\">\n  import { Layers } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n  import BrandIcon from './BrandIcon.svelte'\n\n  const sections = [\n    { heading: 'Platform', links: ['Metric layer', 'Governance', 'Alerting', 'Embedding'] },\n    { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n    { heading: 'Resources', links: ['Documentation', 'Guides', 'Benchmarks', 'Status'] },\n  ]\n</script>\n\n<footer data-slot=\"footer-brand-statement\" class=\"border-border bg-background border-t\">\n  <div class=\"mx-auto max-w-6xl px-6 py-16\">\n    <a href=\"#top\" class=\"flex w-fit items-center gap-2 font-semibold tracking-tight\">\n      <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n      Northwind\n    </a>\n\n    <!-- The statement is the only oversized type on the page. Keep it to one\n         sentence; at this size a second one stops being read. -->\n    <p class=\"mt-8 max-w-3xl text-2xl leading-tight font-medium tracking-tight text-balance sm:text-3xl\">\n      Every number your company acts on should have one definition, one owner, and a history you can read.\n    </p>\n    <p class=\"text-muted-foreground mt-4 max-w-xl text-sm leading-relaxed\">\n      That is the whole product. Everything else here is detail.\n    </p>\n\n    <Separator class=\"my-12\" />\n\n    <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3\">\n      {#each sections as section (section.heading)}\n        <div>\n          <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{section.heading}</p>\n          <ul class=\"mt-3 space-y-2\">\n            {#each section.links as link (link)}\n              <li>\n                <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">{link}</a>\n              </li>\n            {/each}\n          </ul>\n        </div>\n      {/each}\n    </div>\n\n    <Separator class=\"my-10\" />\n\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n      <div class=\"text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-2 text-xs\">\n        <span>© 2026 Northwind Data, Inc.</span>\n        <a href=\"#privacy\" class=\"hover:text-foreground transition-colors\">Privacy</a>\n        <a href=\"#terms\" class=\"hover:text-foreground transition-colors\">Terms</a>\n        <a href=\"mailto:hello@northwind.example\" class=\"hover:text-foreground transition-colors\">\n          hello@northwind.example\n        </a>\n      </div>\n      <div class=\"flex items-center gap-2 sm:ml-auto\">\n        <Badge variant=\"outline\">SOC 2 Type II</Badge>\n        <Badge variant=\"outline\">GDPR</Badge>\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n          <BrandIcon name=\"github\" class=\"size-4\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n          <BrandIcon name=\"linkedin\" class=\"size-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</footer>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/FooterBrandStatement.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/footer/FooterDeveloperDenseGrid.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface FooterColumn {\n    title: string\n    links: { label: string; href: string; badge?: string }[]\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Globe } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import BrandIcon from './BrandIcon.svelte'\n\n  const columns: FooterColumn[] = [\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 SvelteKit 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: 'Cross-Framework Parity', href: '#' },\n        { label: 'Reka UI Primitives', href: '#' },\n        { label: 'Radix UI Primitives', href: '#' },\n        { label: 'Changelog Timeline', href: '#' },\n      ],\n    },\n  ]\n</script>\n\n<footer data-slot=\"footer-developer-dense-grid\" class=\"border-border bg-card text-foreground border-t\">\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, pure\n          AST distribution, and mathematical cross-framework parity across Svelte 5, Vue 3.5, and React 19.\n        </p>\n\n        <!-- Social links -->\n        <div class=\"flex items-center gap-2 pt-2\">\n          <Button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"GitHub\">\n            <BrandIcon name=\"github\" class=\"size-3.5\" />\n          </Button>\n          <Button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Twitter\">\n            <BrandIcon name=\"twitter\" class=\"size-3.5\" />\n          </Button>\n          <Button size=\"sm\" variant=\"outline\" class=\"size-8 rounded-lg p-0\" aria-label=\"Website\">\n            <Globe class=\"size-3.5\" />\n          </Button>\n        </div>\n      </div>\n\n      <!-- 4 Links Columns (8 Cols total, 2 cols each) -->\n      {#each columns as col (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            {#each col.links as link (link.label)}\n              <li>\n                <a href={link.href} class=\"hover:text-foreground inline-flex items-center gap-1.5 transition-colors\">\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                  {/if}\n                </a>\n              </li>\n            {/each}\n          </ul>\n        </div>\n      {/each}\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; {new Date().getFullYear()} UIPKGE</span>\n      </div>\n    </div>\n  </div>\n</footer>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/FooterDeveloperDenseGrid.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/footer/FooterMegaNewsletter.svelte",
      "content": "<script lang=\"ts\">\n  import { ArrowRight, Check, Layers } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Input } from '$lib/components/ui/input'\n  import { Separator } from '$lib/components/ui/separator'\n  import BrandIcon from './BrandIcon.svelte'\n\n  const sections = [\n    { heading: 'Product', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'Changelog'] },\n    { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering'] },\n    { heading: 'Developers', links: ['Documentation', 'API reference', 'CLI', 'Status'] },\n    { heading: 'Company', links: ['About', 'Careers', 'Customers', 'Press kit'] },\n    { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors'] },\n  ]\n\n  let email = $state('')\n  let submitted = $state(false)\n\n  function subscribe() {\n    if (!email.trim()) return\n    submitted = true\n  }\n</script>\n\n<footer data-slot=\"footer-mega-newsletter\" class=\"border-border bg-background border-t\">\n  <div class=\"mx-auto max-w-6xl px-6 py-14\">\n    <div class=\"grid gap-12 lg:grid-cols-[22rem_1fr] lg:gap-16\">\n      <div>\n        <a href=\"#top\" class=\"flex items-center gap-2 font-semibold tracking-tight\">\n          <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n        <p class=\"text-muted-foreground mt-3 max-w-sm text-sm leading-relaxed\">\n          One certified metric layer between your warehouse and everything downstream.\n        </p>\n\n        <form\n          class=\"mt-6\"\n          onsubmit={(e) => {\n            e.preventDefault()\n            subscribe()\n          }}\n        >\n          <label for=\"footer-email\" class=\"text-sm font-medium\">Monthly engineering notes</label>\n          <div class=\"mt-2 flex gap-2\">\n            <Input\n              id=\"footer-email\"\n              bind:value={email}\n              type=\"email\"\n              placeholder=\"you@company.com\"\n              autocomplete=\"email\"\n              class=\"max-w-64\"\n            />\n            <Button type=\"submit\">\n              Subscribe\n              <ArrowRight class=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n          <!-- Status line reserves its own row, so confirming does not shift the columns. -->\n          <p class=\"text-muted-foreground mt-2 min-h-5 text-xs\">\n            {#if submitted}\n              <span class=\"text-success inline-flex items-center gap-1.5\">\n                <Check class=\"size-3\" aria-hidden=\"true\" />\n                Check your inbox to confirm.\n              </span>\n            {:else}\n              <span>One email a month. Unsubscribe in one click.</span>\n            {/if}\n          </p>\n        </form>\n      </div>\n\n      <div class=\"grid grid-cols-2 gap-8 sm:grid-cols-3 lg:grid-cols-5\">\n        {#each sections as section (section.heading)}\n          <div>\n            <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{section.heading}</p>\n            <ul class=\"mt-3 space-y-2\">\n              {#each section.links as link (link)}\n                <li>\n                  <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">{link}</a>\n                </li>\n              {/each}\n            </ul>\n          </div>\n        {/each}\n      </div>\n    </div>\n\n    <Separator class=\"my-10\" />\n\n    <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center\">\n      <p class=\"text-muted-foreground text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n      <Badge variant=\"outline\" class=\"w-fit\">SOC 2 Type II</Badge>\n      <div class=\"flex items-center gap-1 sm:ml-auto\">\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n          <BrandIcon name=\"github\" class=\"size-4\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n          <BrandIcon name=\"linkedin\" class=\"size-4\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"YouTube\">\n          <BrandIcon name=\"youtube\" class=\"size-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</footer>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/FooterMegaNewsletter.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/footer/FooterMinimalRow.svelte",
      "content": "<script lang=\"ts\">\n  import { Layers } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n  import BrandIcon from './BrandIcon.svelte'\n\n  const links = [\n    { label: 'Product', href: '#product' },\n    { label: 'Pricing', href: '#pricing' },\n    { label: 'Docs', href: '#docs' },\n    { label: 'Privacy', href: '#privacy' },\n    { label: 'Terms', href: '#terms' },\n  ]\n</script>\n\n<footer data-slot=\"footer-minimal-row\" class=\"border-border bg-background border-t\">\n  <div class=\"mx-auto flex max-w-6xl flex-col gap-4 px-6 py-6 sm:flex-row sm:items-center\">\n    <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n      <Layers class=\"text-primary size-4\" aria-hidden=\"true\" />\n      Northwind\n    </a>\n\n    <Separator orientation=\"vertical\" class=\"hidden h-4 sm:block\" />\n\n    <nav class=\"flex flex-wrap items-center gap-x-5 gap-y-2\" aria-label=\"Footer\">\n      {#each links as link (link.href)}\n        <a href={link.href} class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n          {link.label}\n        </a>\n      {/each}\n    </nav>\n\n    <div class=\"flex items-center gap-1 sm:ml-auto\">\n      <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n        <BrandIcon name=\"github\" class=\"size-4\" />\n      </Button>\n      <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n        <BrandIcon name=\"linkedin\" class=\"size-4\" />\n      </Button>\n      <span class=\"text-muted-foreground ml-2 text-xs\">© 2026 Northwind</span>\n    </div>\n  </div>\n</footer>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/FooterMinimalRow.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/footer/FooterSitemapDense.svelte",
      "content": "<script lang=\"ts\">\n  import { Layers } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '$lib/components/ui/select'\n  import { Separator } from '$lib/components/ui/separator'\n  import BrandIcon from './BrandIcon.svelte'\n\n  const sections = [\n    { heading: 'Platform', links: ['Metric layer', 'Dashboards', 'Alerting', 'Embedding', 'API', 'CLI'] },\n    { heading: 'Solutions', links: ['Finance', 'RevOps', 'Analytics', 'Engineering', 'Healthcare', 'Retail'] },\n    { heading: 'Developers', links: ['Documentation', 'API reference', 'SDKs', 'Webhooks', 'Status', 'Changelog'] },\n    { heading: 'Resources', links: ['Guides', 'Benchmarks', 'Customers', 'Blog', 'Webinars', 'Glossary'] },\n    { heading: 'Company', links: ['About', 'Careers', 'Press kit', 'Partners', 'Contact', 'Security'] },\n    { heading: 'Legal', links: ['Privacy', 'Terms', 'DPA', 'Subprocessors', 'SLA', 'Accessibility'] },\n  ]\n\n  let region = $state('eu')\n  let currency = $state('eur')\n</script>\n\n<footer data-slot=\"footer-sitemap-dense\" class=\"border-border bg-background border-t\">\n  <div class=\"mx-auto max-w-6xl px-6 py-12\">\n    <div class=\"grid grid-cols-2 gap-x-6 gap-y-8 sm:grid-cols-3 lg:grid-cols-6\">\n      {#each sections as section (section.heading)}\n        <div>\n          <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{section.heading}</p>\n          <ul class=\"mt-3 space-y-1.5\">\n            {#each section.links as link (link)}\n              <li>\n                <a href=\"#\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">{link}</a>\n              </li>\n            {/each}\n          </ul>\n        </div>\n      {/each}\n    </div>\n\n    <Separator class=\"my-10\" />\n\n    <div class=\"flex flex-col gap-6 lg:flex-row lg:items-center\">\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-4\" aria-hidden=\"true\" />\n        Northwind\n      </a>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Select bind:value={region}>\n          <SelectTrigger class=\"h-8 w-40 text-xs\" aria-label=\"Data region\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"eu\">EU (Frankfurt)</SelectItem>\n            <SelectItem value=\"us\">US (Virginia)</SelectItem>\n            <SelectItem value=\"au\">AU (Sydney)</SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select bind:value={currency}>\n          <SelectTrigger class=\"h-8 w-28 text-xs\" aria-label=\"Currency\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"eur\">EUR €</SelectItem>\n            <SelectItem value=\"usd\">USD $</SelectItem>\n            <SelectItem value=\"gbp\">GBP £</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-3 lg:ml-auto\">\n        <!-- Status dot is a live indicator, so it carries its own text for\n             screen readers rather than relying on colour alone. -->\n        <a href=\"#status\" class=\"hover:bg-muted flex items-center gap-2 rounded-md px-2 py-1 transition-colors\">\n          <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\"></span>\n          <span class=\"text-muted-foreground text-xs\">All systems operational</span>\n        </a>\n        <Badge variant=\"outline\">SOC 2</Badge>\n        <Badge variant=\"outline\">GDPR</Badge>\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"GitHub\">\n          <BrandIcon name=\"github\" class=\"size-4\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"LinkedIn\">\n          <BrandIcon name=\"linkedin\" class=\"size-4\" />\n        </Button>\n      </div>\n    </div>\n\n    <p class=\"text-muted-foreground mt-6 text-xs\">© 2026 Northwind Data, Inc. All rights reserved.</p>\n  </div>\n</footer>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/footer/FooterSitemapDense.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/select.json",
    "https://uipkge.dev/r/svelte/separator.json"
  ],
  "description": "Site footer collection: multi-column newsletter, oversized brand statement, dense developer grid, mega newsletter, single-row minimal, and dense sitemap variants — each spelled out inline so copy lives in one place.",
  "categories": [
    "marketing"
  ]
}