{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "author-bio-box",
  "title": "Author Bio Box",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/author-bio-box/author-bio-box.component.ts",
      "content": "// Editorial author signature card with avatar, verified badge, social links row,\n// recent articles list, and interactive follow / RSS subscribe buttons. Port of the\n// Vue/React block 1:1 — `variant` picks 'default', 'split', or 'compact'.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport {\n  ArrowUpRight,\n  BadgeCheck,\n  BookOpen,\n  Check,\n  Globe,\n  LucideAngularModule,\n  MapPin,\n  Rss,\n  UserPlus,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type AuthorBioBoxVariant = 'default' | 'split' | 'compact'\n\nconst AVATAR_SRC = 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-author-bio-box, [ui-author-bio-box]',\n  standalone: true,\n  // The block renders its own root <div>: keep this wrapper out of the layout.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiAvatarImageComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiSeparatorComponent,\n  ],\n  template: `\n    <div ui-card data-slot=\"author-bio-box\" [attr.data-variant]=\"variant\" [class]=\"rootClass\">\n      <!-- Subtle gradient background highlight -->\n      <div\n        class=\"from-primary/10 via-primary/5 pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-br to-transparent\"\n        aria-hidden=\"true\"\n      ></div>\n\n      @if (variant === 'split') {\n        <div ui-card-content class=\"relative p-6 sm:p-8\">\n          <div class=\"grid gap-8 lg:grid-cols-12 lg:items-start\">\n            <div class=\"space-y-5 lg:col-span-7\">\n              <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-5\">\n                <div class=\"relative size-16 shrink-0 sm:size-20\">\n                  <ui-avatar size=\"2xl\" class=\"ring-background size-16 shadow-xs ring-2 sm:size-20\">\n                    <ui-avatar-image [src]=\"avatarSrc\" alt=\"Elena Rostova\" />\n                    <ui-avatar-fallback class=\"text-lg font-semibold sm:text-xl\">ER</ui-avatar-fallback>\n                  </ui-avatar>\n                  <div\n                    class=\"bg-primary text-primary-foreground ring-background absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full shadow-xs ring-2 sm:size-6\"\n                    title=\"Verified Author\"\n                  >\n                    <lucide-icon [img]=\"BadgeCheck\" class=\"size-3.5 sm:size-4\" />\n                  </div>\n                </div>\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <h3 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h3>\n                    <span ui-badge variant=\"secondary\" class=\"gap-1 text-xs font-medium\">\n                      <lucide-icon [img]=\"BadgeCheck\" class=\"text-primary size-3.5\" /> Verified\n                    </span>\n                  </div>\n                  <p class=\"text-muted-foreground text-sm font-medium\">\n                    Principal Design Engineer &amp; Core Contributor\n                  </p>\n                  <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                    <lucide-icon [img]=\"MapPin\" class=\"size-3.5 shrink-0\" />\n                    <span>San Francisco, CA</span>\n                  </div>\n                </div>\n              </div>\n\n              <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">\n                Specializing in design token mathematics, headless accessibility primitives, and high-performance\n                dual-framework monorepos. Former Staff Engineer at Vercel.\n              </p>\n\n              <div class=\"flex flex-wrap items-center justify-between gap-4 pt-1\">\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <button\n                    ui-button\n                    [variant]=\"isFollowing() ? 'secondary' : 'default'\"\n                    size=\"sm\"\n                    class=\"gap-2\"\n                    (click)=\"toggleFollow()\"\n                  >\n                    @if (isFollowing()) {\n                      <lucide-icon [img]=\"Check\" class=\"text-success size-4\" />\n                    } @else {\n                      <lucide-icon [img]=\"UserPlus\" class=\"size-4\" />\n                    }\n                    <span>{{ isFollowing() ? 'Following' : 'Follow Author' }}</span>\n                  </button>\n                  <button ui-button variant=\"outline\" size=\"sm\" [class]=\"rssClass('gap-2')\" (click)=\"toggleRss()\">\n                    <lucide-icon [img]=\"Rss\" class=\"text-warning size-4\" />\n                    <span>{{ isSubscribedRss() ? 'Subscribed via RSS' : 'RSS Feed' }}</span>\n                  </button>\n                </div>\n\n                <div class=\"flex items-center gap-1\">\n                  <a\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    href=\"https://x.com\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    aria-label=\"Elena Rostova on X (Twitter)\"\n                  >\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                      <path\n                        d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n                      />\n                    </svg>\n                  </a>\n                  <a\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    href=\"https://github.com\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    aria-label=\"Elena Rostova on GitHub\"\n                  >\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                      <path\n                        d=\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.69-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.02 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.26 5.66.41.35.78 1.05.78 2.12v3.14c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z\"\n                      />\n                    </svg>\n                  </a>\n                  <a\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    href=\"https://linkedin.com\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    aria-label=\"Elena Rostova on LinkedIn\"\n                  >\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                      <path\n                        d=\"M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z\"\n                      />\n                    </svg>\n                  </a>\n                  <a\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    href=\"https://elenarostova.dev\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    aria-label=\"Elena Rostova's Website\"\n                  >\n                    <lucide-icon [img]=\"Globe\" class=\"size-4\" />\n                  </a>\n                  <a\n                    ui-button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    href=\"https://substack.com\"\n                    target=\"_blank\"\n                    rel=\"noreferrer\"\n                    aria-label=\"Elena Rostova on Substack\"\n                  >\n                    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                      <path\n                        d=\"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z\"\n                      />\n                    </svg>\n                  </a>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"space-y-4 lg:col-span-5\">\n              <div class=\"flex items-center justify-between\">\n                <div\n                  class=\"text-muted-foreground flex items-center gap-2 text-xs font-semibold tracking-wider uppercase\"\n                >\n                  <lucide-icon [img]=\"BookOpen\" class=\"text-primary size-4\" />\n                  <span>Recent Articles</span>\n                </div>\n                <span class=\"text-muted-foreground text-xs\">3 published</span>\n              </div>\n\n              <div class=\"grid gap-3\">\n                <a\n                  href=\"#article-1\"\n                  class=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-3 rounded-lg border p-3.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <div class=\"min-w-0 space-y-1\">\n                    <span class=\"text-muted-foreground text-xs\">5 min read · Aug 18</span>\n                    <h4 class=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                      Why Zero-Dependency Registries Are Winning\n                    </h4>\n                  </div>\n                  <div\n                    class=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md border transition-colors\"\n                  >\n                    <lucide-icon\n                      [img]=\"ArrowUpRight\"\n                      class=\"size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                    />\n                  </div>\n                </a>\n\n                <a\n                  href=\"#article-2\"\n                  class=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-3 rounded-lg border p-3.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <div class=\"min-w-0 space-y-1\">\n                    <span class=\"text-muted-foreground text-xs\">8 min read · Aug 10</span>\n                    <h4 class=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                      Deconstructing OKLCH Color Palettes in Tailwind v4\n                    </h4>\n                  </div>\n                  <div\n                    class=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md border transition-colors\"\n                  >\n                    <lucide-icon\n                      [img]=\"ArrowUpRight\"\n                      class=\"size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                    />\n                  </div>\n                </a>\n\n                <a\n                  href=\"#article-3\"\n                  class=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-3 rounded-lg border p-3.5 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n                >\n                  <div class=\"min-w-0 space-y-1\">\n                    <span class=\"text-muted-foreground text-xs\">12 min read · Jul 28</span>\n                    <h4 class=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                      Polymorphic Reka UI Primitives Architecture\n                    </h4>\n                  </div>\n                  <div\n                    class=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-7 shrink-0 items-center justify-center rounded-md border transition-colors\"\n                  >\n                    <lucide-icon\n                      [img]=\"ArrowUpRight\"\n                      class=\"size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                    />\n                  </div>\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      } @else if (variant === 'compact') {\n        <div ui-card-content class=\"relative space-y-5 p-5\">\n          <div class=\"flex items-center gap-3.5\">\n            <div class=\"relative size-12 shrink-0\">\n              <ui-avatar size=\"lg\" class=\"ring-background size-12 ring-2\">\n                <ui-avatar-image [src]=\"avatarSrc\" alt=\"Elena Rostova\" />\n                <ui-avatar-fallback class=\"text-sm font-semibold\">ER</ui-avatar-fallback>\n              </ui-avatar>\n              <div\n                class=\"bg-primary text-primary-foreground ring-background absolute -right-0.5 -bottom-0.5 flex size-4 items-center justify-center rounded-full ring-1\"\n              >\n                <lucide-icon [img]=\"BadgeCheck\" class=\"size-3\" />\n              </div>\n            </div>\n            <div class=\"min-w-0 space-y-0.5\">\n              <div class=\"flex items-center gap-1.5\">\n                <h3 class=\"text-foreground truncate text-base font-bold tracking-tight\">Elena Rostova</h3>\n                <span ui-badge variant=\"secondary\" class=\"h-4 px-1.5 text-xs font-medium\">Verified</span>\n              </div>\n              <p class=\"text-muted-foreground truncate text-xs\">Principal Design Engineer</p>\n            </div>\n          </div>\n\n          <p class=\"text-muted-foreground line-clamp-2 text-xs leading-relaxed\">\n            Specializing in design token mathematics, headless accessibility primitives, and high-performance\n            dual-framework monorepos. Former Staff Engineer at Vercel.\n          </p>\n\n          <div class=\"flex items-center justify-between gap-2\">\n            <div class=\"flex items-center gap-2\">\n              <button\n                ui-button\n                [variant]=\"isFollowing() ? 'secondary' : 'default'\"\n                size=\"sm\"\n                class=\"h-7 gap-1.5 px-2.5 text-xs\"\n                (click)=\"toggleFollow()\"\n              >\n                @if (isFollowing()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-3\" />\n                } @else {\n                  <lucide-icon [img]=\"UserPlus\" class=\"size-3\" />\n                }\n                <span>{{ isFollowing() ? 'Following' : 'Follow' }}</span>\n              </button>\n              <button\n                ui-button\n                variant=\"outline\"\n                size=\"sm\"\n                [class]=\"rssClass('h-7 gap-1.5 px-2.5 text-xs')\"\n                (click)=\"toggleRss()\"\n              >\n                <lucide-icon [img]=\"Rss\" class=\"text-warning size-3\" />\n                <span>{{ isSubscribedRss() ? 'Subscribed' : 'RSS' }}</span>\n              </button>\n            </div>\n            <div class=\"flex items-center gap-0.5\">\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"size-7\"\n                href=\"https://x.com\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova on X (Twitter)\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-3.5\" aria-hidden=\"true\">\n                  <path\n                    d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n                  />\n                </svg>\n              </a>\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"size-7\"\n                href=\"https://github.com\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova on GitHub\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-3.5\" aria-hidden=\"true\">\n                  <path\n                    d=\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.69-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.02 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.26 5.66.41.35.78 1.05.78 2.12v3.14c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z\"\n                  />\n                </svg>\n              </a>\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                class=\"size-7\"\n                href=\"https://elenarostova.dev\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova's Website\"\n              >\n                <lucide-icon [img]=\"Globe\" class=\"size-3.5\" />\n              </a>\n            </div>\n          </div>\n\n          <ui-separator />\n\n          <div class=\"space-y-2.5\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs font-medium\">\n              <span class=\"tracking-wider uppercase\">Latest Article</span>\n              <span>Aug 18</span>\n            </div>\n            <a\n              href=\"#article-1\"\n              class=\"group border-border/60 bg-muted/20 hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-2 rounded-md border p-2.5 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n            >\n              <span class=\"text-foreground group-hover:text-primary truncate text-xs font-semibold transition-colors\">\n                Why Zero-Dependency Registries Are Winning\n              </span>\n              <lucide-icon\n                [img]=\"ArrowUpRight\"\n                class=\"text-muted-foreground group-hover:text-foreground size-3.5 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n              />\n            </a>\n          </div>\n        </div>\n      } @else {\n        <div ui-card-content class=\"relative space-y-6 p-6 sm:p-8\">\n          <!-- Top Author Profile -->\n          <div class=\"flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-5\">\n            <div class=\"relative size-16 shrink-0 sm:size-20\">\n              <ui-avatar size=\"2xl\" class=\"ring-background size-16 shadow-xs ring-2 sm:size-20\">\n                <ui-avatar-image [src]=\"avatarSrc\" alt=\"Elena Rostova\" />\n                <ui-avatar-fallback class=\"text-lg font-semibold sm:text-xl\">ER</ui-avatar-fallback>\n              </ui-avatar>\n              <div\n                class=\"bg-primary text-primary-foreground ring-background absolute -right-1 -bottom-1 flex size-5 items-center justify-center rounded-full shadow-xs ring-2 sm:size-6\"\n                title=\"Verified Author\"\n              >\n                <lucide-icon [img]=\"BadgeCheck\" class=\"size-3.5 sm:size-4\" />\n              </div>\n            </div>\n            <div class=\"min-w-0 space-y-1.5\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <h3 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Elena Rostova</h3>\n                <span ui-badge variant=\"secondary\" class=\"gap-1 text-xs font-medium\">\n                  <lucide-icon [img]=\"BadgeCheck\" class=\"text-primary size-3.5\" /> Verified Author\n                </span>\n              </div>\n              <p class=\"text-muted-foreground text-sm font-medium\">Principal Design Engineer &amp; Core Contributor</p>\n              <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                <lucide-icon [img]=\"MapPin\" class=\"size-3.5 shrink-0\" />\n                <span>San Francisco, CA</span>\n              </div>\n            </div>\n          </div>\n\n          <!-- Author Bio Paragraph -->\n          <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">\n            Specializing in design token mathematics, headless accessibility primitives, and high-performance\n            dual-framework monorepos. Former Staff Engineer at Vercel.\n          </p>\n\n          <!-- Actions & Social Links Row -->\n          <div class=\"flex flex-wrap items-center justify-between gap-4 pt-1\">\n            <div class=\"flex flex-wrap items-center gap-2.5\">\n              <button\n                ui-button\n                [variant]=\"isFollowing() ? 'secondary' : 'default'\"\n                size=\"sm\"\n                class=\"gap-2\"\n                (click)=\"toggleFollow()\"\n              >\n                @if (isFollowing()) {\n                  <lucide-icon [img]=\"Check\" class=\"text-success size-4\" />\n                } @else {\n                  <lucide-icon [img]=\"UserPlus\" class=\"size-4\" />\n                }\n                <span>{{ isFollowing() ? 'Following' : 'Follow Author' }}</span>\n              </button>\n              <button ui-button variant=\"outline\" size=\"sm\" [class]=\"rssClass('gap-2')\" (click)=\"toggleRss()\">\n                <lucide-icon [img]=\"Rss\" class=\"text-warning size-4\" />\n                <span>{{ isSubscribedRss() ? 'Subscribed via RSS' : 'RSS Feed' }}</span>\n              </button>\n            </div>\n\n            <div class=\"flex items-center gap-1\">\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                href=\"https://x.com\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova on X (Twitter)\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                  <path\n                    d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n                  />\n                </svg>\n              </a>\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                href=\"https://github.com\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova on GitHub\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                  <path\n                    d=\"M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.15c-3.2.69-3.87-1.36-3.87-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.04-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.02 1.76 2.69 1.25 3.35.96.1-.75.4-1.25.72-1.54-2.55-.29-5.24-1.28-5.24-5.68 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11.1 11.1 0 0 1 5.78 0c2.21-1.49 3.18-1.18 3.18-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.41-2.69 5.38-5.26 5.66.41.35.78 1.05.78 2.12v3.14c0 .31.21.67.8.55A11.51 11.51 0 0 0 23.5 12C23.5 5.65 18.35.5 12 .5z\"\n                  />\n                </svg>\n              </a>\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                href=\"https://linkedin.com\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova on LinkedIn\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                  <path\n                    d=\"M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.46zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z\"\n                  />\n                </svg>\n              </a>\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                href=\"https://elenarostova.dev\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova's Website\"\n              >\n                <lucide-icon [img]=\"Globe\" class=\"size-4\" />\n              </a>\n              <a\n                ui-button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                href=\"https://substack.com\"\n                target=\"_blank\"\n                rel=\"noreferrer\"\n                aria-label=\"Elena Rostova on Substack\"\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\" aria-hidden=\"true\">\n                  <path\n                    d=\"M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z\"\n                  />\n                </svg>\n              </a>\n            </div>\n          </div>\n\n          <!-- Separator -->\n          <ui-separator />\n\n          <!-- Recent Articles by Author List (3 items) -->\n          <div class=\"space-y-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"text-muted-foreground flex items-center gap-2 text-xs font-semibold tracking-wider uppercase\">\n                <lucide-icon [img]=\"BookOpen\" class=\"text-primary size-4\" />\n                <span>Recent Articles by Author</span>\n              </div>\n              <span class=\"text-muted-foreground text-xs\">3 published</span>\n            </div>\n\n            <div class=\"grid gap-3 sm:grid-cols-1\">\n              <!-- Article 1 -->\n              <a\n                href=\"#article-1\"\n                class=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                    <span ui-badge variant=\"outline\" class=\"text-xs font-normal\">Registry</span>\n                    <span>5 min read · Aug 18</span>\n                  </div>\n                  <h4 class=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                    Why Zero-Dependency Registries Are Winning\n                  </h4>\n                </div>\n                <div\n                  class=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors\"\n                >\n                  <lucide-icon\n                    [img]=\"ArrowUpRight\"\n                    class=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  />\n                </div>\n              </a>\n\n              <!-- Article 2 -->\n              <a\n                href=\"#article-2\"\n                class=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                    <span ui-badge variant=\"outline\" class=\"text-xs font-normal\">Design Tokens</span>\n                    <span>8 min read · Aug 10</span>\n                  </div>\n                  <h4 class=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                    Deconstructing OKLCH Color Palettes in Tailwind v4\n                  </h4>\n                </div>\n                <div\n                  class=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors\"\n                >\n                  <lucide-icon\n                    [img]=\"ArrowUpRight\"\n                    class=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  />\n                </div>\n              </a>\n\n              <!-- Article 3 -->\n              <a\n                href=\"#article-3\"\n                class=\"group border-border/60 bg-muted/20 hover:border-border hover:bg-muted/60 focus-visible:ring-ring flex items-center justify-between gap-4 rounded-lg border p-4 transition-colors hover:shadow-xs focus-visible:ring-2 focus-visible:outline-none\"\n              >\n                <div class=\"min-w-0 space-y-1\">\n                  <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n                    <span ui-badge variant=\"outline\" class=\"text-xs font-normal\">Architecture</span>\n                    <span>12 min read · Jul 28</span>\n                  </div>\n                  <h4 class=\"text-foreground group-hover:text-primary text-sm font-semibold transition-colors\">\n                    Polymorphic Reka UI Primitives Architecture\n                  </h4>\n                </div>\n                <div\n                  class=\"border-border/60 bg-background text-muted-foreground group-hover:border-border group-hover:text-foreground flex size-8 shrink-0 items-center justify-center rounded-md border transition-colors\"\n                >\n                  <lucide-icon\n                    [img]=\"ArrowUpRight\"\n                    class=\"size-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                  />\n                </div>\n              </a>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class UiAuthorBioBoxComponent {\n  protected readonly ArrowUpRight = ArrowUpRight\n  protected readonly BadgeCheck = BadgeCheck\n  protected readonly BookOpen = BookOpen\n  protected readonly Check = Check\n  protected readonly Globe = Globe\n  protected readonly MapPin = MapPin\n  protected readonly Rss = Rss\n  protected readonly UserPlus = UserPlus\n  protected readonly avatarSrc = AVATAR_SRC\n\n  /** 'default' is the standard editorial signature card; 'split' arranges profile and articles side-by-side; 'compact' tightens padding. */\n  @Input() variant: AuthorBioBoxVariant = 'default'\n  @Input('class') className?: string\n\n  readonly isFollowing = signal(false)\n  readonly isSubscribedRss = signal(false)\n\n  get rootClass(): string {\n    return cn('border-border bg-card text-card-foreground relative overflow-hidden shadow-xs', this.className)\n  }\n\n  rssClass(extra: string): string {\n    return cn(extra, this.isSubscribedRss() && 'border-warning/30 bg-warning/10 text-warning')\n  }\n\n  toggleFollow(): void {\n    this.isFollowing.update((v) => !v)\n  }\n\n  toggleRss(): void {\n    this.isSubscribedRss.update((v) => !v)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/author-bio-box/author-bio-box.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/author-bio-box/index.ts",
      "content": "export { UiAuthorBioBoxComponent, type AuthorBioBoxVariant } from './author-bio-box.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/author-bio-box/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/separator.json"
  ],
  "description": "Editorial author signature card with avatar, verified badge, social links row, recent articles list, and interactive RSS subscribe button.",
  "categories": [
    "media",
    "marketing"
  ]
}