fulldev-ui 0.9.2 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Fulldev UI
 
+## 0.9.3
+
+### Patch Changes
+
+- [`e641911`](https://github.com/fulldotdev/ui/commit/e64191143efe448a46999d63ca7ed6d8bd320d1e) Thanks [@silveltman](https://github.com/silveltman)! - Add the gradient component to the registry, keep Lucide icons unfilled, and fix marquee spacing during looping animations.
+
 ## 0.9.2
 
 ### Patch Changes

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fulldev-ui",
   "type": "module",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Open-source Astro UI components and blocks",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/public/r/beta-repo-setup.json

@@ -12,12 +12,6 @@
       "type": "registry:file",
       "target": "src/content.config.ts"
     },
-    {
-      "path": "src/components/layout-renderer.astro",
-      "content": "---\n// Keep this renderer generic and stable. New page types should be wired by\n// adding a matching schema and src/layouts/<type>.astro file, not by adding\n// layout-specific branches here.\nimport { getEntry, render, type CollectionEntry } from \"astro:content\"\n\ntype Props = CollectionEntry<\"pages\">\n\nconst page = Astro.props\nconst pageData = page.data\nconst { Content, headings } = await render(page)\nconst global = await getEntry(\"globals\", Astro.currentLocale || \"en\")\nif (!global) throw new Error(\"Add a global to content/globals\")\nconst globalData = global.data\n\nconst layoutImports = import.meta.glob(\"../layouts/*.astro\", { eager: true })\nconst layoutPath = `../layouts/${pageData.type}.astro`\nconst layoutImport = layoutImports[layoutPath] as { default?: any } | undefined\nconst Layout = layoutImport?.default\n\nif (!Layout) throw new Error(`Add a layout for page type \"${pageData.type}\"`)\n---\n\n<Layout global={globalData} page={pageData} headings={headings}>\n  <Content />\n</Layout>\n",
-      "type": "registry:file",
-      "target": "src/components/layout-renderer.astro"
-    },
     {
       "path": "src/lib/pages.ts",
       "content": "import { getCollection, type CollectionEntry } from \"astro:content\"\n\ntype Page = CollectionEntry<\"pages\">\n\nexport type PageSearchItem = {\n  label: string\n  href: string\n  title: string\n  path: string\n  description: string\n  group: string\n}\n\nexport type PageBreadcrumbItem = {\n  label: string\n  href: string\n}\n\nexport const normalizePath = (path: string) => {\n  if (path === \"/\") return path\n\n  return path.replace(/\\/$/, \"\")\n}\n\nexport const getPageHref = (page: Page) =>\n  page.id === \"index\" ? \"/\" : `/${page.id}/`\n\nexport const formatSlug = (slug: string) =>\n  slug\n    .split(\"-\")\n    .filter(Boolean)\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(\" \")\n\nconst getPageSearchGroup = (href: string) => {\n  const [slug] = href.split(\"/\").filter(Boolean)\n\n  return slug ? formatSlug(slug) : \"Overview\"\n}\n\nexport const getPageSearchItems = async (): Promise<PageSearchItem[]> => {\n  const pages = await getCollection(\"pages\")\n\n  return pages\n    .map((page) => ({\n      label: page.data.title,\n      href: getPageHref(page),\n      title: page.data.title,\n      path: getPageHref(page),\n      description: page.data.description,\n      group: getPageSearchGroup(getPageHref(page)),\n    }))\n    .sort((a, b) => a.label.localeCompare(b.label))\n}\n\nexport const getPageBreadcrumbItems = async (\n  pathname: string\n): Promise<PageBreadcrumbItem[]> => {\n  const currentPath = normalizePath(pathname)\n  const pages = await getCollection(\"pages\")\n  const pageTitlesByHref = new Map(\n    pages.map((page) => [getPageHref(page), page.data.title])\n  )\n  const homeLink = {\n    label: pageTitlesByHref.get(\"/\") ?? \"Home\",\n    href: \"/\",\n  }\n\n  if (currentPath === \"/\") return [homeLink]\n\n  return [\n    homeLink,\n    ...currentPath\n      .split(\"/\")\n      .filter(Boolean)\n      .map((slug, index, slugs) => {\n        const href = `/${slugs.slice(0, index + 1).join(\"/\")}/`\n\n        return {\n          label: pageTitlesByHref.get(href) ?? formatSlug(slug),\n          href,\n        }\n      }),\n  ]\n}\n",
@@ -26,7 +20,7 @@
     },
     {
       "path": "src/pages/[...page].astro",
-      "content": "---\nimport { getCollection } from \"astro:content\"\n\nimport LayoutRenderer from \"@/components/layout-renderer.astro\"\n\nexport async function getStaticPaths() {\n  const pages = await getCollection(\"pages\")\n  return pages.map((page) => {\n    return {\n      params: {\n        page: page.id === \"index\" ? undefined : page.id,\n      },\n      props: page,\n    }\n  })\n}\n---\n\n<LayoutRenderer {...Astro.props} />\n",
+      "content": "---\nimport { getCollection, getEntry, render } from \"astro:content\"\n\nexport const prerender = true\n\nexport async function getStaticPaths() {\n  const pages = await getCollection(\"pages\")\n  return pages.map((page) => {\n    return {\n      params: {\n        page: page.id === \"index\" ? undefined : page.id,\n      },\n      props: page,\n    }\n  })\n}\n\nconst page = Astro.props\nconst pageData = page.data\nconst { Content, headings } = await render(page)\nconst global = await getEntry(\"globals\", Astro.currentLocale || \"en\")\nif (!global) throw new Error(\"Add a global to content/globals\")\nconst globalData = global.data\n\nconst layoutImports = import.meta.glob(\"../layouts/*.astro\", { eager: true })\nconst layoutPath = `../layouts/${pageData.type}.astro`\nconst layoutImport = layoutImports[layoutPath] as { default?: any } | undefined\nconst Layout = layoutImport?.default\n\nif (!Layout) throw new Error(`Add a layout for page type \"${pageData.type}\"`)\n---\n\n<Layout global={globalData} page={pageData} headings={headings}>\n  <Content />\n</Layout>\n",
       "type": "registry:file",
       "target": "src/pages/[...page].astro"
     },

package/public/r/components.json

@@ -19,6 +19,7 @@
     "@fulldev/dropdown-menu",
     "@fulldev/empty",
     "@fulldev/field",
+    "@fulldev/gradient",
     "@fulldev/header",
     "@fulldev/hover-card",
     "@fulldev/input",

package/public/r/gradient.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "gradient",
+  "files": [
+    {
+      "path": "src/components/ui/gradient/gradient.astro",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst gradientVariants = cva(\n  \"bg-primary pointer-events-none absolute inset-0 opacity-50 [--gradient-stops:black,transparent]\",\n  {\n    variants: {\n      variant: {\n        radial:\n          \"[mask-image:radial-gradient(ellipse_at_var(--gradient-position),var(--gradient-stops))] [-webkit-mask-image:radial-gradient(ellipse_at_var(--gradient-position),var(--gradient-stops))]\",\n        linear:\n          \"[mask-image:linear-gradient(var(--gradient-direction),var(--gradient-stops))] [-webkit-mask-image:linear-gradient(var(--gradient-direction),var(--gradient-stops))]\",\n      },\n      direction: {\n        left: \"[--gradient-direction:to_left] [--gradient-position:0%_50%]\",\n        right: \"[--gradient-direction:to_right] [--gradient-position:100%_50%]\",\n        top: \"[--gradient-direction:to_top] [--gradient-position:50%_0%]\",\n        bottom:\n          \"[--gradient-direction:to_bottom] [--gradient-position:50%_100%]\",\n        center:\n          \"[--gradient-direction:to_bottom] [--gradient-position:50%_50%]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"radial\",\n      direction: \"bottom\",\n    },\n  }\n)\n\ntype Props = HTMLAttributes<\"div\"> & VariantProps<typeof gradientVariants>\n\nconst { class: className, variant, direction, ...props } = Astro.props\n---\n\n<div\n  data-slot=\"gradient\"\n  aria-hidden=\"true\"\n  class={cn(gradientVariants({ variant, direction }), className)}\n  {...props}\n>\n</div>\n",
+      "type": "registry:ui"
+    },
+    {
+      "path": "src/components/ui/gradient/index.ts",
+      "content": "export { default as Gradient } from \"./gradient.astro\"\n",
+      "type": "registry:ui"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/icon.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "src/components/ui/icon/icon.astro",
-      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number | null\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\nconst icons = import.meta.glob(\n  [\n    \"/node_modules/lucide-static/icons/*.svg\",\n    \"/node_modules/simple-icons/icons/*.svg\",\n  ],\n  { eager: true }\n) as Record<string, { default: any }>\n\nconst foundPath = () => {\n  let foundPath: string | undefined = undefined\n\n  // For x.com, use the Simple Icons X instead of Lucide's X icon.\n  if (name === \"x.com\") {\n    foundPath = \"/node_modules/simple-icons/icons/x.svg\"\n  } else if (name) {\n    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))\n  } else if (href) {\n    const hrefKey = Object.keys(hrefMap).find((key) =>\n      href.toString().includes(key)\n    )\n    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]\n    foundPath = Object.keys(icons)\n      .reverse()\n      .find((key) => key.includes(`/${hrefValue}.svg`))\n  }\n\n  return foundPath\n}\n\nconst iconPath = foundPath()\nconst module = iconPath ? icons[iconPath] : undefined\nconst Comp = module?.default\n---\n\n{\n  Comp && foundPath()?.includes(\"simple-icons\") && (\n    <Comp\n      height={24}\n      width={24}\n      fill=\"currentColor\"\n      class=\"size-[1em] text-base\"\n      {...props}\n    />\n  )\n}\n\n{\n  Comp && foundPath()?.includes(\"lucide-static\") && (\n    <Comp height={24} width={24} class=\"size-[1em] text-base\" {...props} />\n  )\n}\n",
+      "content": "---\nimport type { HTMLAttributes } from \"astro/types\"\n\ntype Props = Omit<HTMLAttributes<\"svg\">, \"name\" | \"href\"> & {\n  href?: HTMLAttributes<\"a\">[\"href\"]\n  name?: string | number | null\n}\n\nconst { name, href, ...props } = Astro.props\n\nconst hrefMap = {\n  \"x.com\": \"x\",\n  twitter: \"twitter\",\n  facebook: \"facebook\",\n  instagram: \"instagram\",\n  pinterest: \"pinterest\",\n  youtube: \"youtube\",\n  tiktok: \"tiktok\",\n  snapchat: \"snapchat\",\n  reddit: \"reddit\",\n  tumblr: \"tumblr\",\n  \"wa.me\": \"whatsapp\",\n  telegram: \"telegram\",\n  discord: \"discord\",\n  vimeo: \"vimeo\",\n  flickr: \"flickr\",\n  yelp: \"yelp\",\n  spotify: \"spotify\",\n  behance: \"behance\",\n  dribbble: \"dribbble\",\n  soundcloud: \"soundcloud\",\n  github: \"github\",\n  twitch: \"twitch\",\n  \"tel:\": \"phone\",\n  \"mailto:\": \"mail\",\n  \"maps.app.goo.gl\": \"map-pin\",\n  linkedin: \"linkedin\",\n} as const\n\nconst icons = import.meta.glob(\n  [\n    \"/node_modules/lucide-static/icons/*.svg\",\n    \"/node_modules/simple-icons/icons/*.svg\",\n  ],\n  { eager: true }\n) as Record<string, { default: any }>\n\nconst foundPath = () => {\n  let foundPath: string | undefined = undefined\n\n  // For x.com, use the Simple Icons X instead of Lucide's X icon.\n  if (name === \"x.com\") {\n    foundPath = \"/node_modules/simple-icons/icons/x.svg\"\n  } else if (name) {\n    foundPath = Object.keys(icons).find((key) => key.includes(`/${name}.svg`))\n  } else if (href) {\n    const hrefKey = Object.keys(hrefMap).find((key) =>\n      href.toString().includes(key)\n    )\n    const hrefValue = hrefMap[hrefKey as keyof typeof hrefMap]\n    foundPath = Object.keys(icons)\n      .reverse()\n      .find((key) => key.includes(`/${hrefValue}.svg`))\n  }\n\n  return foundPath\n}\n\nconst iconPath = foundPath()\nconst module = iconPath ? icons[iconPath] : undefined\nconst Comp = module?.default\n---\n\n{\n  Comp && foundPath()?.includes(\"simple-icons\") && (\n    <Comp\n      height={24}\n      width={24}\n      fill=\"currentColor\"\n      class=\"size-[1em] text-base\"\n      {...props}\n    />\n  )\n}\n\n{\n  Comp && foundPath()?.includes(\"lucide-static\") && (\n    <Comp\n      height={24}\n      width={24}\n      fill=\"none\"\n      class=\"size-[1em] text-base\"\n      {...props}\n    />\n  )\n}\n",
       "type": "registry:ui"
     },
     {

package/public/r/marquee.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "src/components/ui/marquee/marquee.astro",
-      "content": "---\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = {\n  direction?: \"left\" | \"right\" | \"top\" | \"bottom\"\n  duration?: number | string\n  gap?: string\n  infinite?: boolean\n  pauseOnHover?: boolean\n  time?: number | string\n  variant?: \"gradient\" | \"solid\"\n  class?: string\n  style?: string\n}\n\nconst {\n  class: className = \"\",\n  direction = \"left\",\n  duration,\n  gap = \"1rem\",\n  infinite = true,\n  pauseOnHover = false,\n  style,\n  time = 30,\n  variant = \"gradient\",\n  ...props\n} = Astro.props\n\nconst resolvedDuration = duration ?? time\nconst styleValue = `--duration:${\n  typeof resolvedDuration === \"number\"\n    ? `${resolvedDuration}s`\n    : resolvedDuration\n}; --gap:${gap}; ${style ?? \"\"}`\nconst contentClass = cn(\n  \"marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]\",\n  infinite &&\n    \"animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]\",\n  direction === \"top\" && \"flex-col\",\n  direction === \"bottom\" && \"flex-col\"\n)\n\nconst marqueeVariants = cva(\"relative w-full\", {\n  variants: {\n    variant: {\n      gradient:\n        \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]\",\n      solid: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"gradient\",\n  },\n})\n---\n\n<div\n  data-marquee\n  data-direction={direction}\n  data-pause-on-hover={pauseOnHover ? \"true\" : undefined}\n  class={cn(\n    \"\",\n    // container utilities\n    \"group flex w-full overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col\",\n    marqueeVariants({ variant }),\n    className\n  )}\n  style={styleValue}\n  {...props}\n>\n  <div class={contentClass}>\n    <slot />\n  </div>\n  {\n    infinite && (\n      <div class={contentClass} aria-hidden=\"true\">\n        <slot />\n      </div>\n    )\n  }\n</div>\n\n<style>\n  @keyframes marquee-x {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(-100%);\n    }\n  }\n  @keyframes marquee-y {\n    from {\n      transform: translateY(0);\n    }\n    to {\n      transform: translateY(-100%);\n    }\n  }\n\n  [data-marquee][data-pause-on-hover=\"true\"]:hover .marquee-content {\n    animation-play-state: paused;\n  }\n</style>\n",
+      "content": "---\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype Props = {\n  direction?: \"left\" | \"right\" | \"top\" | \"bottom\"\n  duration?: number | string\n  gap?: string\n  infinite?: boolean\n  pauseOnHover?: boolean\n  time?: number | string\n  variant?: \"gradient\" | \"solid\"\n  class?: string\n  style?: string\n}\n\nconst {\n  class: className = \"\",\n  direction = \"left\",\n  duration,\n  gap = \"1rem\",\n  infinite = true,\n  pauseOnHover = false,\n  style,\n  time = 30,\n  variant = \"gradient\",\n  ...props\n} = Astro.props\n\nconst resolvedDuration = duration ?? time\nconst styleValue = `--duration:${\n  typeof resolvedDuration === \"number\"\n    ? `${resolvedDuration}s`\n    : resolvedDuration\n}; --gap:${gap}; ${style ?? \"\"}`\nconst contentClass = cn(\n  \"marquee-content flex min-w-full shrink-0 justify-around gap-[var(--gap)] will-change-transform group-data-[direction=bottom]:[animation-direction:reverse] group-data-[direction=right]:[animation-direction:reverse] data-[direction=bottom]:min-h-full data-[direction=bottom]:flex-col data-[direction=top]:min-h-full data-[direction=top]:flex-col motion-reduce:[animation-play-state:paused]\",\n  infinite &&\n    \"animate-[marquee-x_var(--duration,20s)_linear_infinite] group-data-[direction=bottom]:animate-[marquee-y_var(--duration,20s)_linear_infinite] group-data-[direction=top]:animate-[marquee-y_var(--duration,20s)_linear_infinite]\",\n  direction === \"top\" && \"flex-col\",\n  direction === \"bottom\" && \"flex-col\"\n)\n\nconst marqueeVariants = cva(\"relative w-full\", {\n  variants: {\n    variant: {\n      gradient:\n        \"[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [-webkit-mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=bottom]]:[-webkit-mask-image:linear-gradient(to_top,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)] [&[data-direction=top]]:[-webkit-mask-image:linear-gradient(to_bottom,transparent,black_10%,black_90%,transparent)]\",\n      solid: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"gradient\",\n  },\n})\n---\n\n<div\n  data-marquee\n  data-direction={direction}\n  data-pause-on-hover={pauseOnHover ? \"true\" : undefined}\n  class={cn(\n    \"\",\n    // container utilities\n    \"group flex w-full gap-[var(--gap)] overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col\",\n    marqueeVariants({ variant }),\n    className\n  )}\n  style={styleValue}\n  {...props}\n>\n  <div class={contentClass}>\n    <slot />\n  </div>\n  {\n    infinite && (\n      <div class={contentClass} aria-hidden=\"true\">\n        <slot />\n      </div>\n    )\n  }\n</div>\n\n<style>\n  @keyframes marquee-x {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(calc(-100% - var(--gap)));\n    }\n  }\n  @keyframes marquee-y {\n    from {\n      transform: translateY(0);\n    }\n    to {\n      transform: translateY(calc(-100% - var(--gap)));\n    }\n  }\n\n  [data-marquee][data-pause-on-hover=\"true\"]:hover .marquee-content {\n    animation-play-state: paused;\n  }\n</style>\n",
       "type": "registry:ui"
     },
     {

package/public/r/registry.json

@@ -651,6 +651,20 @@
         }
       ]
     },
+    {
+      "name": "gradient",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "src/components/ui/gradient/gradient.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/gradient/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "header",
       "type": "registry:ui",
@@ -1686,6 +1700,7 @@
         "@fulldev/dropdown-menu",
         "@fulldev/empty",
         "@fulldev/field",
+        "@fulldev/gradient",
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/input",
@@ -1848,11 +1863,6 @@
           "type": "registry:file",
           "target": "src/content.config.ts"
         },
-        {
-          "path": "src/components/layout-renderer.astro",
-          "type": "registry:file",
-          "target": "src/components/layout-renderer.astro"
-        },
         {
           "path": "src/lib/pages.ts",
           "type": "registry:file",

package/registry.json

@@ -651,6 +651,20 @@
         }
       ]
     },
+    {
+      "name": "gradient",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "src/components/ui/gradient/gradient.astro",
+          "type": "registry:ui"
+        },
+        {
+          "path": "src/components/ui/gradient/index.ts",
+          "type": "registry:ui"
+        }
+      ]
+    },
     {
       "name": "header",
       "type": "registry:ui",
@@ -1686,6 +1700,7 @@
         "@fulldev/dropdown-menu",
         "@fulldev/empty",
         "@fulldev/field",
+        "@fulldev/gradient",
         "@fulldev/header",
         "@fulldev/hover-card",
         "@fulldev/input",
@@ -1848,11 +1863,6 @@
           "type": "registry:file",
           "target": "src/content.config.ts"
         },
-        {
-          "path": "src/components/layout-renderer.astro",
-          "type": "registry:file",
-          "target": "src/components/layout-renderer.astro"
-        },
         {
           "path": "src/lib/pages.ts",
           "type": "registry:file",

package/src/components/ui/gradient/gradient.astro

@@ -0,0 +1,45 @@
+---
+import type { HTMLAttributes } from "astro/types"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const gradientVariants = cva(
+  "bg-primary pointer-events-none absolute inset-0 opacity-50 [--gradient-stops:black,transparent]",
+  {
+    variants: {
+      variant: {
+        radial:
+          "[mask-image:radial-gradient(ellipse_at_var(--gradient-position),var(--gradient-stops))] [-webkit-mask-image:radial-gradient(ellipse_at_var(--gradient-position),var(--gradient-stops))]",
+        linear:
+          "[mask-image:linear-gradient(var(--gradient-direction),var(--gradient-stops))] [-webkit-mask-image:linear-gradient(var(--gradient-direction),var(--gradient-stops))]",
+      },
+      direction: {
+        left: "[--gradient-direction:to_left] [--gradient-position:0%_50%]",
+        right: "[--gradient-direction:to_right] [--gradient-position:100%_50%]",
+        top: "[--gradient-direction:to_top] [--gradient-position:50%_0%]",
+        bottom:
+          "[--gradient-direction:to_bottom] [--gradient-position:50%_100%]",
+        center:
+          "[--gradient-direction:to_bottom] [--gradient-position:50%_50%]",
+      },
+    },
+    defaultVariants: {
+      variant: "radial",
+      direction: "bottom",
+    },
+  }
+)
+
+type Props = HTMLAttributes<"div"> & VariantProps<typeof gradientVariants>
+
+const { class: className, variant, direction, ...props } = Astro.props
+---
+
+<div
+  data-slot="gradient"
+  aria-hidden="true"
+  class={cn(gradientVariants({ variant, direction }), className)}
+  {...props}
+>
+</div>

package/src/components/ui/gradient/index.ts

@@ -0,0 +1 @@
+export { default as Gradient } from "./gradient.astro"

package/src/components/ui/icon/icon.astro

@@ -85,6 +85,12 @@ const Comp = module?.default
 
 {
   Comp && foundPath()?.includes("lucide-static") && (
-    <Comp height={24} width={24} class="size-[1em] text-base" {...props} />
+    <Comp
+      height={24}
+      width={24}
+      fill="none"
+      class="size-[1em] text-base"
+      {...props}
+    />
   )
 }

package/src/components/ui/marquee/marquee.astro

@@ -63,7 +63,7 @@ const marqueeVariants = cva("relative w-full", {
   class={cn(
     "",
     // container utilities
-    "group flex w-full overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col",
+    "group flex w-full gap-[var(--gap)] overflow-hidden data-[direction=bottom]:flex-col data-[direction=top]:flex-col",
     marqueeVariants({ variant }),
     className
   )}
@@ -88,7 +88,7 @@ const marqueeVariants = cva("relative w-full", {
       transform: translateX(0);
     }
     to {
-      transform: translateX(-100%);
+      transform: translateX(calc(-100% - var(--gap)));
     }
   }
   @keyframes marquee-y {
@@ -96,7 +96,7 @@ const marqueeVariants = cva("relative w-full", {
       transform: translateY(0);
     }
     to {
-      transform: translateY(-100%);
+      transform: translateY(calc(-100% - var(--gap)));
     }
   }