@naeil/ui 0.3.0 → 0.5.0

package/dist/components/index.js

@@ -1,12 +1,19 @@
 "use client";
 import {
-  Badge,
-  Button,
+  Logo,
+  NaeilHeader,
+  headerLocales
+} from "../chunk-S64H3OYQ.js";
+import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger
-} from "../chunk-QKVN6Q6C.js";
+  DropdownMenuTrigger,
+  SiteFooter
+} from "../chunk-QSTGUEEI.js";
+import {
+  Button
+} from "../chunk-CE73AEJZ.js";
 import {
   __objRest,
   __spreadProps,
@@ -15,47 +22,9 @@ import {
 } from "../chunk-JBTDRVZ7.js";
 
 // src/components/nav.tsx
-import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
+import { useLocale, useTranslations } from "next-intl";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var PROJECTS = [
-  {
-    key: "cc",
-    href: "/cc",
-    accent: "oklch(0.704 0.140 181)",
-    icon: "/images/coral.png",
-    status: "active"
-  },
-  {
-    key: "pkm",
-    href: "/pkm",
-    accent: "oklch(0.702 0.183 293)",
-    icon: "/images/jellyfish.png",
-    status: "coming"
-  },
-  {
-    key: "naeilUi",
-    href: "/design",
-    accent: "oklch(0.623 0.214 259)",
-    icon: "/images/whale.png",
-    status: "active"
-  },
-  {
-    key: "sa",
-    href: "/sa",
-    accent: "oklch(0.723 0.219 149)",
-    icon: "/images/fish.png",
-    status: "active"
-  },
-  {
-    key: "babyAgent",
-    href: "/baby-agent",
-    accent: "oklch(0.769 0.188 70.08)",
-    icon: "/images/turtle.png",
-    status: "coming"
-  }
-];
+var NativeBrandLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
 function Nav({
   Link,
   usePathname,
@@ -70,355 +39,43 @@ function Nav({
   authSlot,
   showProjects = true,
   showBlog = true,
-  toolbarSlot
+  toolbarSlot,
+  projects,
+  className,
+  containerClassName,
+  labels
 }) {
+  var _a;
+  const consumerLocale = useLocale();
+  const locale = (_a = headerLocales.find((value) => value === consumerLocale)) != null ? _a : "en";
   const t = useTranslations("nav");
   const pt = useTranslations("projects");
   const pathname = usePathname();
-  const [scrolled, setScrolled] = useState(false);
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [projectsOpen, setProjectsOpen] = useState(false);
-  useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 16);
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-  useEffect(() => {
-    setMobileOpen(false);
-    setProjectsOpen(false);
-  }, [pathname]);
-  useEffect(() => {
-    document.body.style.overflow = mobileOpen ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [mobileOpen]);
-  const linkClass = (href) => {
-    const isActive = pathname === href;
-    return [
-      "text-sm font-medium transition-colors",
-      isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-    ].join(" ");
-  };
-  const isProjectActive = pathname.startsWith("/projects") || pathname.startsWith("/cc") || pathname.startsWith("/pkm") || pathname.startsWith("/sa") || pathname.startsWith("/design");
-  function getProjectLink(project) {
-    if (currentProjectKey && project.key === currentProjectKey) {
-      return { href: currentProjectHref || "/", external: false };
-    }
-    if (projectsExternal) {
-      return { href: `${externalBaseUrl}${project.href}`, external: true };
-    }
-    return { href: project.href, external: false };
-  }
-  const brandContent = brandSlot != null ? brandSlot : /* @__PURE__ */ jsxs("span", { className: "text-foreground flex items-center gap-3 text-xl font-semibold tracking-tight", children: [
-    /* @__PURE__ */ jsx(Logo, { size: 28 }),
-    ".naeil"
-  ] });
-  const brandElement = brandExternal ? /* @__PURE__ */ jsx("a", { href: brandHref, children: brandContent }) : /* @__PURE__ */ jsx(Link, { href: brandHref, children: brandContent });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "nav",
-      {
-        className: [
-          "fixed top-0 z-50 w-full transition-[background-color,border-color] duration-300",
-          scrolled || mobileOpen ? "border-b border-border/40 bg-background/80 backdrop-blur-md" : "border-b border-transparent bg-transparent"
-        ].join(" "),
-        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-[58px] max-w-7xl items-center px-6", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center md:w-[200px]", children: brandElement }),
-          /* @__PURE__ */ jsxs("div", { className: "hidden flex-1 items-center gap-6 md:flex", children: [
-            showProjects && /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  className: [
-                    "text-sm font-medium transition-colors",
-                    isProjectActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
-                  ].join(" "),
-                  children: [
-                    t("projects"),
-                    /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        width: "10",
-                        height: "10",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        className: "ml-1 inline-block transition-transform group-hover:rotate-180",
-                        children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-full pt-3 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "border-border/40 bg-background/95 w-[520px] rounded-xl border p-4 shadow-xl backdrop-blur-md", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: PROJECTS.map((project) => {
-                const { href, external } = getProjectLink(project);
-                const inner = /* @__PURE__ */ jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-3.5 rounded-lg px-3 py-3 transition-colors", children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border",
-                      style: {
-                        borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
-                        backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        Image,
-                        {
-                          src: project.icon,
-                          alt: "",
-                          width: 24,
-                          height: 24,
-                          className: "object-contain"
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: pt(`${project.key}.name`) }),
-                      project.status === "coming" && /* @__PURE__ */ jsx(
-                        Badge,
-                        {
-                          variant: "outline",
-                          className: "text-muted-foreground px-1 py-0 text-[9px]",
-                          children: pt("status.coming")
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-xs leading-snug", children: pt(`${project.key}.description`) })
-                  ] })
-                ] });
-                if (external) {
-                  return /* @__PURE__ */ jsx("a", { href, children: inner }, project.key);
-                }
-                return /* @__PURE__ */ jsx(Link, { href, children: inner }, project.key);
-              }) }) }) })
-            ] }),
-            showBlog && /* @__PURE__ */ jsx(Fragment, { children: projectsExternal ? /* @__PURE__ */ jsx(
-              "a",
-              {
-                href: `${externalBaseUrl}/blog`,
-                className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
-                children: t("blog")
-              }
-            ) : /* @__PURE__ */ jsx(Link, { href: "/blog", className: linkClass("/blog"), children: t("blog") }) }),
-            subNav && subNav.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/40" }),
-              subNav.map((item) => /* @__PURE__ */ jsx(
-                Link,
-                {
-                  href: item.href,
-                  className: linkClass(item.href),
-                  children: item.label
-                },
-                item.href
-              ))
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 md:flex", children: [
-            authSlot,
-            authSlot && toolbarSlot && /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/40" }),
-            toolbarSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: toolbarSlot })
-          ] }),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              className: "text-muted-foreground hover:text-foreground ml-auto transition-colors md:hidden",
-              onClick: () => setMobileOpen(!mobileOpen),
-              "aria-label": "Menu",
-              children: mobileOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {})
-            }
-          )
-        ] })
-      }
-    ),
-    mobileOpen && /* @__PURE__ */ jsx("div", { className: "bg-background/95 fixed inset-0 z-40 overflow-y-auto pt-[58px] backdrop-blur-md md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-6 py-6", children: [
-      showProjects && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            className: "text-foreground flex items-center justify-between py-3 text-base font-medium",
-            onClick: () => setProjectsOpen(!projectsOpen),
-            children: [
-              t("projects"),
-              /* @__PURE__ */ jsx(
-                "svg",
-                {
-                  width: "14",
-                  height: "14",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  stroke: "currentColor",
-                  strokeWidth: "2",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  className: [
-                    "transition-transform duration-200",
-                    projectsOpen ? "rotate-180" : ""
-                  ].join(" "),
-                  children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
-                }
-              )
-            ]
-          }
-        ),
-        projectsOpen && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-col gap-1 pl-1", children: PROJECTS.map((project) => {
-          const { href, external } = getProjectLink(project);
-          const inner = /* @__PURE__ */ jsxs("div", { className: "hover:bg-muted/50 flex items-center gap-3 rounded-lg px-3 py-3 transition-colors", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
-                style: {
-                  borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
-                  backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
-                },
-                children: /* @__PURE__ */ jsx(
-                  Image,
-                  {
-                    src: project.icon,
-                    alt: "",
-                    width: 20,
-                    height: 20,
-                    className: "object-contain"
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: pt(`${project.key}.name`) }),
-              project.status === "coming" && /* @__PURE__ */ jsx(
-                Badge,
-                {
-                  variant: "outline",
-                  className: "text-muted-foreground ml-2 px-1 py-0 text-[9px]",
-                  children: pt("status.coming")
-                }
-              )
-            ] })
-          ] });
-          if (external) {
-            return /* @__PURE__ */ jsx(
-              "a",
-              {
-                href,
-                onClick: () => setMobileOpen(false),
-                children: inner
-              },
-              project.key
-            );
-          }
-          return /* @__PURE__ */ jsx(
-            Link,
-            {
-              href,
-              onClick: () => setMobileOpen(false),
-              children: inner
-            },
-            project.key
-          );
-        }) })
-      ] }),
-      showBlog && /* @__PURE__ */ jsx(Fragment, { children: projectsExternal ? /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: `${externalBaseUrl}/blog`,
-          className: "text-foreground border-border/40 border-t py-3 text-base font-medium",
-          onClick: () => setMobileOpen(false),
-          children: t("blog")
-        }
-      ) : /* @__PURE__ */ jsx(
-        Link,
-        {
-          href: "/blog",
-          className: "text-foreground border-border/40 border-t py-3 text-base font-medium",
-          onClick: () => setMobileOpen(false),
-          children: t("blog")
-        }
-      ) }),
-      subNav && subNav.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t", children: subNav.map((item) => /* @__PURE__ */ jsx(
-        Link,
-        {
-          href: item.href,
-          className: "text-foreground block py-3 text-base font-medium",
-          onClick: () => setMobileOpen(false),
-          children: item.label
-        },
-        item.href
-      )) }),
-      authSlot && /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t pt-4", children: authSlot }),
-      toolbarSlot && /* @__PURE__ */ jsx("div", { className: "border-border/40 flex items-center gap-4 border-t pt-4 mt-2", children: toolbarSlot })
-    ] }) })
-  ] });
-}
-function Logo({
-  size = 20
-}) {
-  const id = `naeil-nav-logo-${size}`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-label": "naeil",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-grad`, x1: "15", y1: "12.5", x2: "15", y2: "16", children: [
-            /* @__PURE__ */ jsx("stop", { stopColor: "#eab308" }),
-            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#dc2626" })
-          ] }),
-          /* @__PURE__ */ jsx("mask", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
-        ] })
-      ]
-    }
-  );
-}
-function MenuIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "22",
-      height: "22",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
-    }
-  );
-}
-function CloseIcon() {
   return /* @__PURE__ */ jsx(
-    "svg",
+    NaeilHeader,
     {
-      width: "22",
-      height: "22",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+      locale,
+      Link,
+      currentHref: pathname,
+      resolveHref: (path) => projectsExternal ? `${externalBaseUrl}${path}` : path,
+      projectsExternal,
+      translations: { projects: showProjects ? t("projects") : "", blog: showBlog ? t("blog") : "", project: pt },
+      brandHref,
+      brandSlot,
+      brandLinkComponent: brandExternal ? NativeBrandLink : Link,
+      currentProjectKey,
+      currentProjectHref,
+      subNav,
+      projects,
+      showProjects,
+      showBlog,
+      toolbarSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
+        authSlot,
+        toolbarSlot
+      ] }),
+      className,
+      containerClassName,
+      labels
     }
   );
 }
@@ -426,47 +83,65 @@ function CloseIcon() {
 // src/components/footer.tsx
 import { useTranslations as useTranslations2 } from "next-intl";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function NavLink({
-  href,
-  children,
+function Footer({
+  Link,
+  linksExternal = false,
+  brandSlot,
+  description,
+  groups,
+  socialSlot,
+  meta,
+  variant,
   className,
-  linksExternal,
-  Link
+  containerClassName
 }) {
-  if (linksExternal) {
-    return /* @__PURE__ */ jsx2(
-      "a",
-      {
-        href: `https://naeil.dev${href}`,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className,
-        children
-      }
-    );
-  }
-  if (Link) {
-    return /* @__PURE__ */ jsx2(Link, { href, className, children });
-  }
-  return /* @__PURE__ */ jsx2("a", { href, className, children });
-}
-function Footer({ Link, linksExternal = false }) {
   const t = useTranslations2("footer");
-  return /* @__PURE__ */ jsx2("footer", { className: "border-border/40 border-t", children: /* @__PURE__ */ jsxs2("div", { className: "mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 sm:flex-row sm:justify-between", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx2(Logo2, { size: 20 }),
-        /* @__PURE__ */ jsx2("span", { className: "text-foreground text-sm font-semibold tracking-tight", children: ".naeil" })
-      ] }),
-      /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground max-w-[240px] text-sm leading-relaxed", children: t("tagline") }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+  const destinations = [
+    { id: "projects", label: t("projects"), href: "/projects" },
+    { id: "blog", label: t("blog"), href: "/blog" }
+  ];
+  return /* @__PURE__ */ jsx2(
+    SiteFooter,
+    {
+      Link,
+      className,
+      containerClassName: cn("max-w-7xl", containerClassName),
+      variant,
+      brand: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx2(Logo, { variant: "footer", size: 20, className: "block" }),
+      description: description === void 0 ? t("tagline") : description,
+      groups: groups != null ? groups : [
+        {
+          id: "navigation",
+          label: t("navigation"),
+          links: destinations.map((item) => __spreadProps(__spreadValues({}, item), {
+            href: linksExternal ? `https://naeil.dev${item.href}` : item.href,
+            external: linksExternal,
+            target: linksExternal ? "_blank" : void 0
+          }))
+        },
+        {
+          id: "social",
+          label: t("social"),
+          links: [
+            {
+              id: "github",
+              label: "GitHub",
+              href: "https://github.com/naeil-dev",
+              external: true,
+              target: "_blank"
+            }
+          ]
+        }
+      ],
+      meta,
+      children: socialSlot === void 0 ? /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx2(
           "a",
           {
             href: "https://github.com/naeil-dev",
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "text-muted-foreground hover:text-foreground transition-colors",
+            className: "ui-navigation-link ui-focus",
             "aria-label": "GitHub",
             children: /* @__PURE__ */ jsx2(GitHubIcon, {})
           }
@@ -477,92 +152,12 @@ function Footer({ Link, linksExternal = false }) {
             href: "https://x.com",
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "text-muted-foreground hover:text-foreground transition-colors",
+            className: "ui-navigation-link ui-focus",
             "aria-label": "X",
             children: /* @__PURE__ */ jsx2(XIcon, {})
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex gap-10 sm:gap-16", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx2("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("navigation") }),
-        /* @__PURE__ */ jsx2(
-          NavLink,
-          {
-            href: "/projects",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            linksExternal,
-            Link,
-            children: t("projects")
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          NavLink,
-          {
-            href: "/blog",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            linksExternal,
-            Link,
-            children: t("blog")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx2("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("social") }),
-        /* @__PURE__ */ jsx2(
-          "a",
-          {
-            href: "https://github.com/naeil-dev",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            children: "GitHub \u2197"
-          }
-        )
-      ] })
-    ] })
-  ] }) });
-}
-function Logo2({ size = 20 }) {
-  const id = `naeil-footer-logo-${size}`;
-  return /* @__PURE__ */ jsxs2(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-label": "naeil",
-      children: [
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "circle",
-          {
-            cx: "15",
-            cy: "16",
-            r: "3.5",
-            fill: `url(#${id}-grad)`,
-            mask: `url(#${id})`
-          }
-        ),
-        /* @__PURE__ */ jsxs2("defs", { children: [
-          /* @__PURE__ */ jsxs2("linearGradient", { id: `${id}-grad`, x1: "15", y1: "12.5", x2: "15", y2: "16", children: [
-            /* @__PURE__ */ jsx2("stop", { stopColor: "#eab308" }),
-            /* @__PURE__ */ jsx2("stop", { offset: "1", stopColor: "#dc2626" })
-          ] }),
-          /* @__PURE__ */ jsx2("mask", { id, children: /* @__PURE__ */ jsx2("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
-        ] })
-      ]
+      ] }) : socialSlot
     }
   );
 }
@@ -606,7 +201,7 @@ function LocaleSwitcher({
     /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
       "button",
       {
-        className: "text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors focus:outline-none",
+        className: "ui-focus text-muted-foreground hover:text-foreground inline-flex min-h-11 min-w-11 items-center justify-center gap-1.5 rounded-md px-2 text-sm transition-colors",
         "aria-label": `Change language \u2014 current: ${(_a = current == null ? void 0 : current.short) != null ? _a : currentLocale}`,
         children: [
           /* @__PURE__ */ jsx3(GlobeIcon, {}),
@@ -754,73 +349,22 @@ function ThemeToggleIcon() {
   );
 }
 
-// src/components/logo.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function Logo3({
-  size = 20,
-  mono = false,
-  className
-}) {
-  const id = `naeil-logo-${size}`;
-  return /* @__PURE__ */ jsxs5(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-label": "naeil",
-      className,
-      children: [
-        /* @__PURE__ */ jsx7(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        mono ? /* @__PURE__ */ jsx7("circle", { cx: "15", cy: "16", r: "3.5", fill: "currentColor", mask: `url(#${id})` }) : /* @__PURE__ */ jsx7("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
-        /* @__PURE__ */ jsxs5("defs", { children: [
-          !mono && /* @__PURE__ */ jsxs5(
-            "linearGradient",
-            {
-              id: `${id}-grad`,
-              x1: "15",
-              y1: "12.5",
-              x2: "15",
-              y2: "16",
-              children: [
-                /* @__PURE__ */ jsx7("stop", { stopColor: "#eab308" }),
-                /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "#dc2626" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx7("mask", { id, children: /* @__PURE__ */ jsx7("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
-        ] })
-      ]
-    }
-  );
-}
-
 // src/components/typography.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
 var sectionTitleClass = "text-foreground text-xl font-semibold";
 function PageTitle(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx8("h1", __spreadProps(__spreadValues({ className: cn(pageTitleClass, className) }, props), { children }));
+  return /* @__PURE__ */ jsx7("h1", __spreadProps(__spreadValues({ className: cn(pageTitleClass, className) }, props), { children }));
 }
 function SectionTitle(_a) {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
-  return /* @__PURE__ */ jsx8("h2", __spreadProps(__spreadValues({ className: cn(sectionTitleClass, className) }, props), { children }));
+  return /* @__PURE__ */ jsx7("h2", __spreadProps(__spreadValues({ className: cn(sectionTitleClass, className) }, props), { children }));
 }
 export {
   Footer,
   LocaleSwitcher,
-  Logo3 as Logo,
+  Logo,
   Nav,
   PageTitle,
   SectionTitle,