fulldev-ui 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Fulldev UI
 
+## 0.11.0
+
+### Minor Changes
+
+- [`4b0ccf6`](https://github.com/fulldotdev/ui/commit/4b0ccf6a70b0fd38e750755a1e9416e42e967352) Thanks [@silveltman](https://github.com/silveltman)! - Restore portable registry setup and complete component and block bundles. Add functional contact forms, mobile header links and slots, section heading primitives, HTML attribute forwarding, explicit icon sources, and Astro navigation reinitialization while preserving the latest component APIs. Add registry metadata and Markdown documentation indexes for agents.
+
 ## 0.10.1
 
 ### Patch Changes

package/README.md

@@ -56,7 +56,13 @@ npx shadcn@latest init
 }
 ```
 
-5. **Copy the base stylesheet** from [`src/styles/global.css`](./src/styles/global.css) into your project, then import it in your layout.
+5. **Install the base stylesheet and shared helpers**, then import the stylesheet in your layout:
+
+```bash
+npx shadcn@latest add @fulldev/init
+```
+
+Review stylesheet changes in an existing project to preserve your theme.
 
 6. **Use a container-aware app shell** because Fulldev UI uses Tailwind v4 container-query variants like `@2xl:` and `@max-5xl:`:
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fulldev-ui",
   "type": "module",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "Open-source Astro UI components and blocks",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",
@@ -38,7 +38,8 @@
     "src/components/blocks",
     "src/components/ui",
     "src/lib",
-    "src/styles/global.css"
+    "src/styles/global.css",
+    "registry/init"
   ],
   "publishConfig": {
     "access": "public"
@@ -110,11 +111,12 @@
     "build:prod": "pnpm check && pnpm registry:build && pnpm build",
     "build:preview": "pnpm registry:build && pnpm build && astro preview --host 127.0.0.1 --port 4321",
     "build:test": "pnpm check && pnpm registry:build && pnpm build && astro preview --host 127.0.0.1 --port 4321",
-    "registry:build": "shadcn build && pnpm format:write --log-level warn",
+    "registry:build": "pnpm registry:meta && shadcn build && pnpm format:write --log-level warn",
     "registry:check": "pnpm registry:build && git diff --exit-code -- registry.json public/r",
     "format:write": "prettier --write .",
     "format:check": "prettier --check .",
     "release": "changeset version && pnpm install --lockfile-only",
-    "release:publish": "pnpm registry:check && pnpm build && changeset publish"
+    "release:publish": "pnpm registry:check && pnpm build && changeset publish",
+    "registry:meta": "node scripts/registry-meta.mjs"
   }
 }

package/public/r/accordion.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "accordion",
+  "title": "Accordion",
+  "description": "A vertically stacked set of interactive headings that each reveal a section of content.",
   "dependencies": [
     "@data-slot/accordion",
     "@lucide/astro"
@@ -8,7 +10,7 @@
   "files": [
     {
       "path": "src/components/ui/accordion/accordion.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  multiple?: boolean\n  defaultValue?: string | string[]\n  disabled?: boolean\n  orientation?: \"horizontal\" | \"vertical\"\n  loopFocus?: boolean\n  hiddenUntilFound?: boolean\n  collapsible?: boolean\n}\n\nconst {\n  class: className,\n  multiple,\n  defaultValue,\n  disabled,\n  orientation = \"vertical\",\n  loopFocus,\n  hiddenUntilFound,\n  collapsible,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue\n---\n\n<div\n  data-slot=\"accordion\"\n  data-multiple={multiple}\n  data-default-value={serializedDefaultValue}\n  data-disabled={disabled}\n  data-orientation={orientation}\n  data-loop-focus={loopFocus}\n  data-hidden-until-found={hiddenUntilFound}\n  data-collapsible={collapsible}\n  class={cn(\"flex w-full flex-col\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/accordion\"\n\n  create()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  multiple?: boolean\n  defaultValue?: string | string[]\n  disabled?: boolean\n  orientation?: \"horizontal\" | \"vertical\"\n  loopFocus?: boolean\n  hiddenUntilFound?: boolean\n  collapsible?: boolean\n}\n\nconst {\n  class: className,\n  multiple,\n  defaultValue,\n  disabled,\n  orientation = \"vertical\",\n  loopFocus,\n  hiddenUntilFound,\n  collapsible,\n  ...props\n} = Astro.props\n\nconst serializedDefaultValue = Array.isArray(defaultValue)\n  ? JSON.stringify(defaultValue)\n  : defaultValue\n---\n\n<div\n  data-slot=\"accordion\"\n  data-multiple={multiple}\n  data-default-value={serializedDefaultValue}\n  data-disabled={disabled}\n  data-orientation={orientation}\n  data-loop-focus={loopFocus}\n  data-hidden-until-found={hiddenUntilFound}\n  data-collapsible={collapsible}\n  class={cn(\"flex w-full flex-col\", className)}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/accordion\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -32,5 +34,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/accordion/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/alert-dialog.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert-dialog",
+  "title": "Alert Dialog",
+  "description": "A modal dialog for important confirmations that expects a response.",
   "dependencies": [
     "@data-slot/alert-dialog"
   ],
@@ -10,7 +12,7 @@
   "files": [
     {
       "path": "src/components/ui/alert-dialog/alert-dialog.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/alert-dialog\"\n\n  create()\n</script>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = HTMLAttributes<\"div\"> & {\n  defaultOpen?: boolean\n  closeOnClickOutside?: boolean\n  closeOnEscape?: boolean\n  lockScroll?: boolean\n}\n\nconst {\n  class: className,\n  defaultOpen,\n  closeOnClickOutside,\n  closeOnEscape,\n  lockScroll,\n  ...props\n} = Astro.props\n---\n\n<div\n  data-slot=\"alert-dialog\"\n  data-default-open={defaultOpen}\n  data-close-on-click-outside={closeOnClickOutside}\n  data-close-on-escape={closeOnEscape}\n  data-lock-scroll={lockScroll}\n  class={className}\n  {...props}\n>\n  <slot />\n</div>\n\n<script>\n  import { create } from \"@data-slot/alert-dialog\"\n\n  create()\n  document.addEventListener(\"astro:page-load\", () => create())\n</script>\n",
       "type": "registry:ui"
     },
     {
@@ -74,5 +76,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/alert-dialog/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/alert.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "alert",
+  "title": "Alert",
+  "description": "Displays a callout for user attention.",
   "files": [
     {
       "path": "src/components/ui/alert/alert.astro",
@@ -23,5 +25,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/alert/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/article-1.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "article-1",
+  "title": "Article 1",
+  "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/badge",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/article-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article\n      class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\"\n    >\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl gap-8\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col gap-6\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col\">\n          <p class=\"text-sm font-medium\">{author.name}</p>\n          <p class=\"text-muted-foreground text-xs\">{author.date}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article\n      class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-base leading-8\"\n    >\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/article/",
+  "categories": [
+    "article"
+  ],
   "type": "registry:block"
 }

package/public/r/article-2.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "article-2",
+  "title": "Article 2",
+  "description": "Editorial article layouts for long-form stories, interviews, and analysis.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/badge",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/article-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article\n      class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\"\n    >\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  author: {\n    image?: ImageMetadata\n    initials: string\n    name: string\n    date: string\n    readingTime: string\n  }\n  image: {\n    src: ImageMetadata\n    alt: string\n  }\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  author,\n  image,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"mx-auto max-w-2xl items-center gap-8 text-center\">\n    <div class=\"mx-auto flex w-full max-w-2xl flex-col items-center gap-6\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <div class=\"flex flex-col gap-4\">\n        <h1\n          class=\"text-4xl leading-tight font-semibold tracking-tight text-balance sm:text-5xl\"\n        >\n          {title}\n        </h1>\n        <p class=\"text-muted-foreground text-lg leading-8 text-balance\">\n          {description}\n        </p>\n      </div>\n      <div class=\"flex items-center gap-3\">\n        <Avatar size=\"lg\">\n          <AvatarImage src={author.image} alt={author.name} />\n          <AvatarFallback>{author.initials}</AvatarFallback>\n        </Avatar>\n        <div class=\"flex flex-col text-left\">\n          <p class=\"text-sm font-medium\">\n            {author.name}\n            <span class=\"text-muted-foreground font-normal\">\n              &middot; {author.date}\n            </span>\n          </p>\n          <p class=\"text-muted-foreground text-xs\">{author.readingTime}</p>\n        </div>\n      </div>\n    </div>\n\n    <Image\n      src={image.src}\n      alt={image.alt}\n      class=\"aspect-[16/10] w-full rounded-xl object-cover\"\n      widths={[640, 960]}\n      sizes=\"(min-width: 42rem) 42rem, 100vw\"\n    />\n\n    <article\n      class=\"mx-auto flex w-full max-w-2xl flex-col gap-6 text-left text-base leading-8\"\n    >\n      <slot />\n    </article>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/article/",
+  "categories": [
+    "article"
+  ],
   "type": "registry:block"
 }

package/public/r/articles-1.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-1",
+  "title": "Articles 1",
+  "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/badge",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/articles-1.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, description, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <h2\n        class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex max-w-2xl flex-col gap-4\">\n      {\n        badge && (\n          <Badge variant=\"secondary\" class=\"w-fit\">\n            {badge}\n          </Badge>\n        )\n      }\n      <SectionTitle>\n        {title}\n      </SectionTitle>\n      <p class=\"text-muted-foreground text-base leading-7\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720, 960]}\n              sizes=\"(min-width: 64rem) 26rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/articles/",
+  "categories": [
+    "articles"
+  ],
   "type": "registry:block"
 }

package/public/r/articles-2.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-2",
+  "title": "Articles 2",
+  "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/badge",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/articles-2.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">{featured.category}</Badge>\n        <h3\n          class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\"\n        >\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  featured: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  featured,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <a\n      href={featured.href ?? \"#\"}\n      class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 grid gap-6 rounded-xl transition-colors focus-visible:ring-2 focus-visible:outline-none lg:grid-cols-2 lg:items-center lg:pr-4\"\n    >\n      <Image\n        src={featured.image.src}\n        alt={featured.image.alt}\n        class=\"aspect-[4/3] rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n        widths={[640, 960, 1280]}\n        sizes=\"(min-width: 64rem) 50vw, 100vw\"\n      />\n      <div class=\"flex flex-col gap-4\">\n        <Badge variant=\"outline\" class=\"w-fit\">{featured.category}</Badge>\n        <h3\n          class=\"text-foreground text-2xl leading-tight font-semibold sm:text-3xl\"\n        >\n          {featured.title}\n        </h3>\n        <p class=\"text-muted-foreground text-base leading-7\">\n          {featured.description}\n        </p>\n        <div class=\"flex items-center gap-3\">\n          <Avatar>\n            <AvatarImage\n              src={featured.author.image}\n              alt={featured.author.name}\n            />\n            <AvatarFallback>{featured.author.initials}</AvatarFallback>\n          </Avatar>\n          <div class=\"flex flex-col\">\n            <p class=\"text-sm font-medium\">{featured.author.name}</p>\n            <p class=\"text-muted-foreground text-xs\">{featured.author.date}</p>\n          </div>\n        </div>\n      </div>\n    </a>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 22rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/articles/",
+  "categories": [
+    "articles"
+  ],
   "type": "registry:block"
 }

package/public/r/articles-3.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-3",
+  "title": "Articles 3",
+  "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/badge",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/articles-3.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {\n          badge && (\n            <Badge variant=\"secondary\" class=\"w-fit\">\n              {badge}\n            </Badge>\n          )\n        }\n        <h2\n          class=\"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\"\n        >\n          {title}\n        </h2>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport { Image } from \"astro:assets\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n  Section,\n  SectionContainer,\n  SectionTitle,\n} from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  articles: {\n    image: {\n      src: ImageMetadata\n      alt: string\n    }\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, articles, ...props } = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"flex flex-wrap items-end justify-between gap-4\">\n      <div class=\"flex flex-col gap-4\">\n        {\n          badge && (\n            <Badge variant=\"secondary\" class=\"w-fit\">\n              {badge}\n            </Badge>\n          )\n        }\n        <SectionTitle>\n          {title}\n        </SectionTitle>\n      </div>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-4\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group bg-muted/50 hover:bg-muted focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <Image\n              src={article.image.src}\n              alt={article.image.alt}\n              class=\"-mx-4 -mt-4 aspect-[16/9] w-[calc(100%+2rem)] max-w-none rounded-lg object-cover transition-opacity group-hover:opacity-85\"\n              widths={[480, 720]}\n              sizes=\"(min-width: 64rem) 18rem, (min-width: 48rem) 50vw, 100vw\"\n            />\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-lg leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/articles/",
+  "categories": [
+    "articles"
+  ],
   "type": "registry:block"
 }

package/public/r/articles-4.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "articles-4",
+  "title": "Articles 4",
+  "description": "Collection and listing layouts for journals, magazines, and editorial feeds.",
   "registryDependencies": [
     "@fulldev/avatar",
     "@fulldev/badge",
@@ -9,9 +11,13 @@
   "files": [
     {
       "path": "src/components/blocks/articles-4.astro",
-      "content": "---\nimport type { ImageMetadata } from \"astro\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = {\n  class?: string\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst { class: className, badge, title, description, articles } = Astro.props\n---\n\n<Section class={cn(\"\", className)}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
+      "content": "---\nimport type { ImageMetadata } from \"astro\"\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Section, SectionContainer } from \"@/components/ui/section\"\n\ntype Props = HTMLAttributes<\"section\"> & {\n  badge?: string\n  title: string\n  description: string\n  articles: {\n    category: string\n    title: string\n    description: string\n    href?: string\n    author: {\n      image?: ImageMetadata\n      initials: string\n      name: string\n      date: string\n    }\n  }[]\n}\n\nconst {\n  class: className,\n  badge,\n  title,\n  description,\n  articles,\n  ...props\n} = Astro.props\n---\n\n<Section class={cn(\"\", className)} {...props}>\n  <SectionContainer class=\"gap-8\">\n    <div class=\"mx-auto max-w-2xl text-center\">\n      {badge && <Badge variant=\"secondary\">{badge}</Badge>}\n      <h2\n        class={cn(\n          \"text-3xl font-semibold tracking-tight text-balance sm:text-4xl\",\n          badge && \"mt-4\"\n        )}\n      >\n        {title}\n      </h2>\n      <p class=\"text-muted-foreground mt-2 text-base leading-7 text-balance\">\n        {description}\n      </p>\n    </div>\n\n    <div class=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n      {\n        articles.map((article) => (\n          <a\n            href={article.href ?? \"#\"}\n            class=\"group hover:bg-muted/50 focus-visible:ring-ring/50 flex h-full flex-col gap-4 rounded-xl border p-6 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          >\n            <div class=\"flex flex-col gap-2\">\n              <p class=\"text-muted-foreground text-sm font-medium\">\n                {article.category}\n              </p>\n              <h3 class=\"text-foreground line-clamp-2 text-xl leading-snug font-semibold\">\n                {article.title}\n              </h3>\n              <p class=\"text-muted-foreground line-clamp-2 text-sm leading-6\">\n                {article.description}\n              </p>\n            </div>\n            <div class=\"mt-auto flex items-center gap-3\">\n              <Avatar>\n                <AvatarImage\n                  src={article.author.image}\n                  alt={article.author.name}\n                />\n                <AvatarFallback>{article.author.initials}</AvatarFallback>\n              </Avatar>\n              <div class=\"flex flex-col\">\n                <p class=\"text-sm font-medium\">{article.author.name}</p>\n                <p class=\"text-muted-foreground text-xs\">\n                  {article.author.date}\n                </p>\n              </div>\n            </div>\n          </a>\n        ))\n      }\n    </div>\n  </SectionContainer>\n</Section>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/articles/",
+  "categories": [
+    "articles"
+  ],
   "type": "registry:block"
 }

package/public/r/avatar.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "avatar",
+  "title": "Avatar",
+  "description": "An image element with a fallback for representing the user.",
   "files": [
     {
       "path": "src/components/ui/avatar/avatar.astro",
@@ -23,5 +25,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/avatar/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/badge.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "badge",
+  "title": "Badge",
+  "description": "Displays a badge or a component that looks like a badge.",
   "files": [
     {
       "path": "src/components/ui/badge/badge-variants.ts",
@@ -18,5 +20,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/badge/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/banner-1.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "banner-1",
+  "title": "Banner 1",
+  "description": "Announcement and promo bars that sit above or inside page content.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -10,9 +12,13 @@
   "files": [
     {
       "path": "src/components/blocks/banner-1.astro",
-      "content": "---\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {\n      link && (\n        <a\n          href={link.href}\n          class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n        >\n          {link.label}\n          <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n        </a>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport ArrowRightIcon from \"@lucide/astro/icons/arrow-right\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  link?: {\n    label: string\n    href: string\n  }\n}\n\nconst { class: className, title, description, link, ...props } = Astro.props\n---\n\n<Banner\n  storageKey=\"banner-1\"\n  class={cn(\"dark bg-background text-foreground\", className)}\n  {...props}\n>\n  <BannerContainer class=\"flex-row items-center gap-x-4 gap-y-1\">\n    <p class=\"text-sm leading-relaxed\">\n      <span class=\"font-semibold\">{title}</span>\n      <span class=\"mx-1.5 hidden opacity-50 sm:inline\">&mdash;</span>\n      <span class=\"opacity-80\">{description}</span>\n    </p>\n    {\n      link && (\n        <a\n          href={link.href}\n          class=\"group/link inline-flex shrink-0 items-center gap-1 text-sm font-medium underline underline-offset-4 transition-opacity hover:opacity-80\"\n        >\n          {link.label}\n          <ArrowRightIcon class=\"size-3.5 transition-transform group-hover/link:translate-x-0.5\" />\n        </a>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/banner/",
+  "categories": [
+    "banner"
+  ],
   "type": "registry:block"
 }

package/public/r/banner-2.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "banner-2",
+  "title": "Banner 2",
+  "description": "Announcement and promo bars that sit above or inside page content.",
   "registryDependencies": [
     "@fulldev/banner",
     "@fulldev/button"
@@ -8,9 +10,13 @@
   "files": [
     {
       "path": "src/components/blocks/banner-2.astro",
-      "content": "---\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = {\n  class?: string\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons } = Astro.props\n---\n\n<Banner variant=\"floating\" storageKey=\"banner-2\" class={cn(\"\", className)}>\n  <BannerContainer class=\"gap-4 py-1\" showClose={false}>\n    <div\n      class=\"flex flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\"\n    >\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {\n      buttons?.length && (\n        <div class=\"flex shrink-0 items-center gap-2\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"sm\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Banner, BannerContainer } from \"@/components/ui/banner\"\nimport { Button } from \"@/components/ui/button\"\n\ntype Props = HTMLAttributes<\"aside\"> & {\n  title: string\n  description: string\n  buttons?: {\n    label: string\n    href: string\n    variant?: \"default\" | \"outline\" | \"secondary\" | \"ghost\"\n  }[]\n}\n\nconst { class: className, title, description, buttons, ...props } = Astro.props\n---\n\n<Banner\n  variant=\"floating\"\n  storageKey=\"banner-2\"\n  class={cn(\"\", className)}\n  {...props}\n>\n  <BannerContainer class=\"gap-4 py-1\" showClose={false}>\n    <div\n      class=\"flex flex-1 flex-col gap-0.5 @5xl:flex-row @5xl:items-center @5xl:gap-x-4\"\n    >\n      <p class=\"text-sm font-semibold\">{title}</p>\n      <p class=\"text-muted-foreground text-sm\">{description}</p>\n    </div>\n    {\n      buttons?.length && (\n        <div class=\"flex shrink-0 items-center gap-2\">\n          {buttons.map(({ href, label, ...button }, index) => (\n            <Button\n              as=\"a\"\n              href={href}\n              size=\"sm\"\n              variant={button.variant ?? (index === 0 ? \"default\" : \"outline\")}\n              {...button}\n            >\n              {label}\n            </Button>\n          ))}\n        </div>\n      )\n    }\n  </BannerContainer>\n</Banner>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/banner/",
+  "categories": [
+    "banner"
+  ],
   "type": "registry:block"
 }

package/public/r/banner.json

@@ -1,6 +1,8 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "banner",
+  "title": "Banner",
+  "description": "A full-width container for important messages or announcements.",
   "dependencies": [
     "@lucide/astro"
   ],
@@ -25,5 +27,9 @@
       "type": "registry:ui"
     }
   ],
+  "docs": "https://ui.full.dev/components/banner/",
+  "categories": [
+    "ui"
+  ],
   "type": "registry:ui"
 }

package/public/r/blocks-1.json

@@ -1,6 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "blocks-1",
+  "title": "Blocks 1",
   "dependencies": [
     "@lucide/astro",
     "simple-icons-astro"
@@ -14,9 +15,13 @@
   "files": [
     {
       "path": "src/components/blocks/blocks-1.astro",
-      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${markdownUrl}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead class=\"max-w-2xl text-base leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy class=\"blocks-copy-icon size-3.5\" />\n              <Check class=\"blocks-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <a\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </a>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n</SectionContainer>\n\n<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>\n  const button = copyButtonId ? document.getElementById(copyButtonId) : null\n\n  if (button instanceof HTMLButtonElement) {\n    button.addEventListener(\"click\", async () => {\n      const source = button.dataset.source\n\n      if (!source) return\n\n      try {\n        await navigator.clipboard.writeText(source)\n        button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n        window.setTimeout(() => {\n          button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n          button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n        }, 1200)\n      } catch {\n        // Ignore clipboard failures; the button remains available for retry.\n      }\n    })\n  }\n</script>\n",
+      "content": "---\nimport ArrowLeft from \"@lucide/astro/icons/arrow-left\"\nimport ArrowRight from \"@lucide/astro/icons/arrow-right\"\nimport Check from \"@lucide/astro/icons/check\"\nimport ChevronDown from \"@lucide/astro/icons/chevron-down\"\nimport Copy from \"@lucide/astro/icons/copy\"\nimport ExternalLink from \"@lucide/astro/icons/external-link\"\nimport Claude from \"simple-icons-astro/Claude\"\nimport Cursor from \"simple-icons-astro/Cursor\"\nimport Markdown from \"simple-icons-astro/Markdown\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { buttonVariants } from \"@/components/ui/button/button-variants\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { SectionContainer } from \"@/components/ui/section\"\nimport {\n  Typography,\n  TypographyH1,\n  TypographyLead,\n} from \"@/components/ui/typography\"\n\ntype Props = {\n  class?: string\n  title: string\n  description?: string\n  copyButton?: {\n    id: string\n    source: string\n  }\n  markdownUrl?: string\n  previousPage?: {\n    href: string\n    title: string\n  }\n  nextPage?: {\n    href: string\n    title: string\n  }\n  labels: {\n    copyMarkdown: string\n    openIn: string\n    openInMarkdown: string\n    openInChatGPT: string\n    openInClaude: string\n    openInCursor: string\n    pagination: {\n      previous: string\n      next: string\n      ariaLabel: string\n    }\n  }\n}\n\nconst {\n  class: className,\n  title,\n  description,\n  copyButton,\n  markdownUrl,\n  previousPage,\n  nextPage,\n  labels,\n} = Astro.props\nconst showCopyButton = Boolean(copyButton)\nconst showOpenButton = Boolean(markdownUrl)\nconst showPagination = Boolean(previousPage || nextPage)\nconst assistantPrompt = markdownUrl\n  ? `Read ${new URL(markdownUrl, Astro.site ?? Astro.url.origin).href}, I want to ask questions about it.`\n  : \"\"\nconst openLinks = markdownUrl\n  ? [\n      {\n        label: labels.openInMarkdown,\n        href: markdownUrl,\n        icon: \"markdown\",\n      },\n      {\n        label: labels.openInChatGPT,\n        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"chatgpt\",\n      },\n      {\n        label: labels.openInClaude,\n        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"claude\",\n      },\n      {\n        label: labels.openInCursor,\n        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,\n        icon: \"cursor\",\n      },\n    ]\n  : []\n---\n\n<SectionContainer\n  data-slot=\"blocks-page\"\n  class={cn(\"gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12\", className)}\n>\n  <div class=\"mx-auto flex w-full max-w-[84rem] flex-col gap-10\">\n    <header\n      class=\"flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between\"\n    >\n      <div class=\"flex max-w-3xl min-w-0 flex-1 flex-col gap-2\">\n        <TypographyH1\n          class=\"text-foreground text-left text-3xl tracking-tight sm:text-4xl\"\n        >\n          {title}\n        </TypographyH1>\n        {\n          description && (\n            <TypographyLead class=\"max-w-2xl text-base leading-7\">\n              {description}\n            </TypographyLead>\n          )\n        }\n      </div>\n      <div class=\"flex shrink-0 items-center gap-2 self-start\">\n        {\n          showCopyButton && (\n            <Button\n              id={copyButton?.id}\n              type=\"button\"\n              variant=\"outline\"\n              size=\"xs\"\n              data-source={copyButton?.source}\n              aria-label={labels.copyMarkdown}\n            >\n              <Copy class=\"blocks-copy-icon size-3.5\" />\n              <Check class=\"blocks-check-icon hidden size-3.5\" />\n              <span>{labels.copyMarkdown}</span>\n            </Button>\n          )\n        }\n        {\n          showOpenButton && (\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                class={buttonVariants({ variant: \"outline\", size: \"xs\" })}\n              >\n                <span>{labels.openIn}</span>\n                <ChevronDown class=\"size-3.5 opacity-70\" />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" sideOffset={6} class=\"w-56\">\n                {openLinks.map((link) => (\n                  <a\n                    href={link.href}\n                    target=\"_blank\"\n                    rel=\"noreferrer noopener\"\n                    class=\"hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none\"\n                  >\n                    {link.icon === \"markdown\" && <Markdown class=\"size-4\" />}\n                    {link.icon === \"chatgpt\" && (\n                      <svg\n                        role=\"img\"\n                        viewBox=\"0 0 24 24\"\n                        fill=\"currentColor\"\n                        class=\"size-4\"\n                        aria-hidden=\"true\"\n                      >\n                        <path d=\"M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z\" />\n                      </svg>\n                    )}\n                    {link.icon === \"claude\" && <Claude class=\"size-4\" />}\n                    {link.icon === \"cursor\" && <Cursor class=\"size-4\" />}\n                    <span>{link.label}</span>\n                    <ExternalLink class=\"text-muted-foreground ml-auto size-3.5\" />\n                  </a>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          )\n        }\n      </div>\n    </header>\n\n    <Typography as=\"article\" class=\"w-full max-w-none\">\n      <slot />\n    </Typography>\n\n    {\n      showPagination && (\n        <nav\n          class=\"flex items-center justify-between gap-3\"\n          aria-label={labels.pagination.ariaLabel}\n        >\n          {previousPage ? (\n            <Button\n              as=\"a\"\n              href={previousPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal\"\n            >\n              <ArrowLeft class=\"size-4\" />\n              <span class=\"truncate text-sm font-medium\">\n                {previousPage.title}\n              </span>\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n\n          {nextPage ? (\n            <Button\n              as=\"a\"\n              href={nextPage.href}\n              variant=\"outline\"\n              class=\"h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal\"\n            >\n              <span class=\"truncate text-sm font-medium\">{nextPage.title}</span>\n              <ArrowRight class=\"size-4\" />\n            </Button>\n          ) : (\n            <div aria-hidden=\"true\" />\n          )}\n        </nav>\n      )\n    }\n  </div>\n</SectionContainer>\n\n<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>\n  const button = copyButtonId ? document.getElementById(copyButtonId) : null\n\n  if (button instanceof HTMLButtonElement) {\n    button.addEventListener(\"click\", async () => {\n      const source = button.dataset.source\n\n      if (!source) return\n\n      try {\n        await navigator.clipboard.writeText(source)\n        button.querySelector(\".blocks-copy-icon\")?.classList.add(\"hidden\")\n        button.querySelector(\".blocks-check-icon\")?.classList.remove(\"hidden\")\n\n        window.setTimeout(() => {\n          button.querySelector(\".blocks-copy-icon\")?.classList.remove(\"hidden\")\n          button.querySelector(\".blocks-check-icon\")?.classList.add(\"hidden\")\n        }, 1200)\n      } catch {\n        // Ignore clipboard failures; the button remains available for retry.\n      }\n    })\n  }\n</script>\n",
       "type": "registry:block"
     }
   ],
+  "docs": "https://ui.full.dev/blocks/",
+  "categories": [
+    "blocks"
+  ],
   "type": "registry:block"
 }