{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "author-bio-box",
  "title": "Author Bio Box",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/author-bio-box/AuthorBioBox.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { ref } from 'vue'\nimport { ArrowUpRight, BadgeCheck, BookOpen, Check, Globe, MapPin, Rss, UserPlus } from 'lucide-vue-next'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\ninterface Props {\n  /** 'default' is the standard editorial signature card; 'split' arranges profile and articles side-by-side; 'compact' tightens padding. */\n  variant?: 'default' | 'split' | 'compact'\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n})\n\nconst isFollowing = ref(false)\nconst isSubscribedRss = ref(false)\n\nfunction toggleFollow() {\n  isFollowing.value = !isFollowing.value\n}\n\nfunction toggleRss() {\n  isSubscribedRss.value = !isSubscribedRss.value\n}\n</script>\n\n<template>\n  <Card\n    data-slot=\"author-bio-box\"\n    :class=\"cn('border-border bg-card text-card-foreground relative overflow-hidden shadow-xs', props.class)\"\n  >\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    />\n\n    <!-- Split variant: two columns on large screens -->\n    <CardContent v-if=\"props.variant === 'split'\" 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              <Avatar size=\"2xl\" class=\"ring-background size-16 shadow-xs ring-2 sm:size-20\">\n                <AvatarImage\n                  src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop\"\n                  alt=\"Elena Rostova\"\n                />\n                <AvatarFallback class=\"text-lg font-semibold sm:text-xl\">ER</AvatarFallback>\n              </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                <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                <Badge variant=\"secondary\" class=\"gap-1 text-xs font-medium\">\n                  <BadgeCheck class=\"text-primary size-3.5\" /> Verified\n                </Badge>\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                <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 :variant=\"isFollowing ? 'secondary' : 'default'\" size=\"sm\" class=\"gap-2\" @click=\"toggleFollow\">\n                <Check v-if=\"isFollowing\" class=\"text-success size-4\" />\n                <UserPlus v-else class=\"size-4\" />\n                <span>{{ isFollowing ? 'Following' : 'Follow Author' }}</span>\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                :class=\"cn('gap-2', isSubscribedRss && 'border-warning/30 bg-warning/10 text-warning')\"\n                @click=\"toggleRss\"\n              >\n                <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              <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n                <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on X (Twitter)\">\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              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n                <a href=\"https://github.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on GitHub\">\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              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n                <a href=\"https://linkedin.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on LinkedIn\">\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              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n                <a\n                  href=\"https://elenarostova.dev\"\n                  target=\"_blank\"\n                  rel=\"noreferrer\"\n                  aria-label=\"Elena Rostova's Website\"\n                >\n                  <Globe class=\"size-4\" />\n                </a>\n              </Button>\n              <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n                <a href=\"https://substack.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on Substack\">\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              </Button>\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 class=\"text-muted-foreground flex items-center gap-2 text-xs font-semibold tracking-wider uppercase\">\n              <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                <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                <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                <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    </CardContent>\n\n    <!-- Compact variant -->\n    <CardContent v-else-if=\"props.variant === 'compact'\" 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          <Avatar size=\"lg\" class=\"ring-background size-12 ring-2\">\n            <AvatarImage\n              src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop\"\n              alt=\"Elena Rostova\"\n            />\n            <AvatarFallback class=\"text-sm font-semibold\">ER</AvatarFallback>\n          </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            <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            <Badge variant=\"secondary\" class=\"h-4 px-1.5 text-xs font-medium\">Verified</Badge>\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 dual-framework\n        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            :variant=\"isFollowing ? 'secondary' : 'default'\"\n            size=\"sm\"\n            class=\"h-7 gap-1.5 px-2.5 text-xs\"\n            @click=\"toggleFollow\"\n          >\n            <Check v-if=\"isFollowing\" class=\"text-success size-3\" />\n            <UserPlus v-else class=\"size-3\" />\n            <span>{{ isFollowing ? 'Following' : 'Follow' }}</span>\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :class=\"cn('h-7 gap-1.5 px-2.5 text-xs', isSubscribedRss && 'border-warning/30 bg-warning/10 text-warning')\"\n            @click=\"toggleRss\"\n          >\n            <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          <Button variant=\"ghost\" size=\"icon-sm\" class=\"size-7\" as-child>\n            <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on X (Twitter)\">\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          </Button>\n          <Button variant=\"ghost\" size=\"icon-sm\" class=\"size-7\" as-child>\n            <a href=\"https://github.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on GitHub\">\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          </Button>\n          <Button variant=\"ghost\" size=\"icon-sm\" class=\"size-7\" as-child>\n            <a href=\"https://elenarostova.dev\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova's Website\">\n              <Globe class=\"size-3.5\" />\n            </a>\n          </Button>\n        </div>\n      </div>\n\n      <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          <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    </CardContent>\n\n    <!-- Default editorial layout -->\n    <CardContent v-else 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          <Avatar size=\"2xl\" class=\"ring-background size-16 shadow-xs ring-2 sm:size-20\">\n            <AvatarImage\n              src=\"https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop\"\n              alt=\"Elena Rostova\"\n            />\n            <AvatarFallback class=\"text-lg font-semibold sm:text-xl\">ER</AvatarFallback>\n          </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            <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            <Badge variant=\"secondary\" class=\"gap-1 text-xs font-medium\">\n              <BadgeCheck class=\"text-primary size-3.5\" /> Verified Author\n            </Badge>\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            <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 dual-framework\n        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 :variant=\"isFollowing ? 'secondary' : 'default'\" size=\"sm\" class=\"gap-2\" @click=\"toggleFollow\">\n            <Check v-if=\"isFollowing\" class=\"text-success size-4\" />\n            <UserPlus v-else class=\"size-4\" />\n            <span>{{ isFollowing ? 'Following' : 'Follow Author' }}</span>\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            :class=\"cn('gap-2', isSubscribedRss && 'border-warning/30 bg-warning/10 text-warning')\"\n            @click=\"toggleRss\"\n          >\n            <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          <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n            <a href=\"https://x.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on X (Twitter)\">\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          </Button>\n          <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n            <a href=\"https://github.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on GitHub\">\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          </Button>\n          <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n            <a href=\"https://linkedin.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on LinkedIn\">\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          </Button>\n          <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n            <a href=\"https://elenarostova.dev\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova's Website\">\n              <Globe class=\"size-4\" />\n            </a>\n          </Button>\n          <Button variant=\"ghost\" size=\"icon-sm\" as-child>\n            <a href=\"https://substack.com\" target=\"_blank\" rel=\"noreferrer\" aria-label=\"Elena Rostova on Substack\">\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          </Button>\n        </div>\n      </div>\n\n      <!-- Separator -->\n      <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            <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                <Badge variant=\"outline\" class=\"text-xs font-normal\">Registry</Badge>\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              <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                <Badge variant=\"outline\" class=\"text-xs font-normal\">Design Tokens</Badge>\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              <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                <Badge variant=\"outline\" class=\"text-xs font-normal\">Architecture</Badge>\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              <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    </CardContent>\n  </Card>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AuthorBioBox.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/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"
  ]
}