@naeil/ui 0.1.0

package/src/components/nav.tsx

@@ -0,0 +1,550 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Badge } from "./ui/badge";
+import Image from "next/image";
+
+const PROJECTS = [
+  {
+    key: "cc",
+    href: "/cc",
+    accent: "oklch(0.704 0.140 181)",
+    icon: "/images/coral.png",
+    status: "active" as const,
+  },
+  {
+    key: "pkm",
+    href: "/pkm",
+    accent: "oklch(0.702 0.183 293)",
+    icon: "/images/jellyfish.png",
+    status: "coming" as const,
+  },
+  {
+    key: "naeilUi",
+    href: "/design",
+    accent: "oklch(0.623 0.214 259)",
+    icon: "/images/whale.png",
+    status: "active" as const,
+  },
+  {
+    key: "sa",
+    href: "/sa",
+    accent: "oklch(0.723 0.219 149)",
+    icon: "/images/fish.png",
+    status: "active" as const,
+  },
+  {
+    key: "babyAgent",
+    href: "/baby-agent",
+    accent: "oklch(0.769 0.188 70.08)",
+    icon: "/images/turtle.png",
+    status: "coming" as const,
+  },
+];
+
+interface NavProps {
+  /** Internal Link component (from consumer's next-intl routing) */
+  Link: React.ComponentType<{
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+    onClick?: () => void;
+    [key: string]: any;
+  }>;
+  /** Current pathname value (already resolved, not a hook) */
+  usePathname: () => string;
+  /** Where the .naeil logo links to. Default: "/" */
+  brandHref?: string;
+  /** Whether brandHref is external (renders <a>) or internal (renders Link). Default: false */
+  brandExternal?: boolean;
+  /** Custom brand content (replaces default Logo + ".naeil" text) */
+  brandSlot?: React.ReactNode;
+  /** When true, project links (except current) are rendered as external <a> to externalBaseUrl. Default: false */
+  projectsExternal?: boolean;
+  /** Base URL for external project links. Default: "https://naeil.dev" */
+  externalBaseUrl?: string;
+  /** Override href for the current project in the dropdown */
+  currentProjectKey?: string;
+  currentProjectHref?: string;
+  /** App-specific sub-navigation items after the project dropdown */
+  subNav?: Array<{ label: string; href: string }>;
+  /** React node for auth UI (rendered in desktop right side + mobile bottom) */
+  authSlot?: React.ReactNode;
+  /** Show Projects dropdown in nav. Default: true */
+  showProjects?: boolean;
+  /** Show blog link in nav. Default: true */
+  showBlog?: boolean;
+  /** Right-side toolbar (theme toggle, locale switcher, etc.) */
+  toolbarSlot?: React.ReactNode;
+}
+
+export function Nav({
+  Link,
+  usePathname,
+  brandHref = "/",
+  brandExternal = false,
+  brandSlot,
+  projectsExternal = false,
+  externalBaseUrl = "https://naeil.dev",
+  currentProjectKey,
+  currentProjectHref,
+  subNav,
+  authSlot,
+  showProjects = true,
+  showBlog = true,
+  toolbarSlot,
+}: NavProps) {
+  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);
+  }, []);
+
+  // Close mobile menu on route change
+  useEffect(() => {
+    setMobileOpen(false);
+    setProjectsOpen(false);
+  }, [pathname]);
+
+  // Prevent body scroll when mobile menu open
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+
+  const linkClass = (href: string) => {
+    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");
+
+  // Resolve project href and whether it's external
+  function getProjectLink(project: (typeof PROJECTS)[number]) {
+    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 };
+  }
+
+  // Brand logo element
+  const brandContent = brandSlot ?? (
+    <span className="text-foreground flex items-center gap-3 text-xl font-semibold tracking-tight">
+      <Logo size={28} />
+      .naeil
+    </span>
+  );
+
+  const brandElement = brandExternal ? (
+    <a href={brandHref}>{brandContent}</a>
+  ) : (
+    <Link href={brandHref}>{brandContent}</Link>
+  );
+
+  return (
+    <>
+      <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(" ")}
+      >
+        <div className="mx-auto flex h-[58px] max-w-7xl items-center px-6">
+          {/* Logo */}
+          <div className="flex shrink-0 items-center md:w-[200px]">
+            {brandElement}
+          </div>
+
+          {/* Desktop: Nav links */}
+          <div className="hidden flex-1 items-center gap-6 md:flex">
+            {/* Projects dropdown */}
+            {showProjects && <div className="group relative">
+              <button
+                className={[
+                  "text-sm font-medium transition-colors",
+                  isProjectActive
+                    ? "text-foreground"
+                    : "text-muted-foreground hover:text-foreground",
+                ].join(" ")}
+              >
+                {t("projects")}
+                <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"
+                >
+                  <path d="M6 9l6 6 6-6" />
+                </svg>
+              </button>
+
+              {/* Hover mega-dropdown */}
+              <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">
+                <div className="border-border/40 bg-background/95 w-[520px] rounded-xl border p-4 shadow-xl backdrop-blur-md">
+                  <div className="grid grid-cols-2 gap-1">
+                    {PROJECTS.map((project) => {
+                      const { href, external } = getProjectLink(project);
+                      const inner = (
+                        <div className="hover:bg-muted/50 flex items-start gap-3.5 rounded-lg px-3 py-3 transition-colors">
+                          <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)`,
+                            }}
+                          >
+                            <Image
+                              src={project.icon}
+                              alt=""
+                              width={24}
+                              height={24}
+                              className="object-contain"
+                            />
+                          </div>
+                          <div className="min-w-0 flex-1 pt-0.5">
+                            <div className="flex items-center gap-2">
+                              <span className="text-foreground text-sm font-medium">
+                                {pt(`${project.key}.name`)}
+                              </span>
+                              {project.status === "coming" && (
+                                <Badge
+                                  variant="outline"
+                                  className="text-muted-foreground px-1 py-0 text-[9px]"
+                                >
+                                  {pt("status.coming")}
+                                </Badge>
+                              )}
+                            </div>
+                            <p className="text-muted-foreground mt-0.5 text-xs leading-snug">
+                              {pt(`${project.key}.description`)}
+                            </p>
+                          </div>
+                        </div>
+                      );
+
+                      if (external) {
+                        return (
+                          <a key={project.key} href={href}>
+                            {inner}
+                          </a>
+                        );
+                      }
+                      return (
+                        <Link key={project.key} href={href}>
+                          {inner}
+                        </Link>
+                      );
+                    })}
+                  </div>
+                </div>
+              </div>
+            </div>}
+
+            {/* Blog link (conditional) */}
+            {showBlog && (
+              <>
+                {projectsExternal ? (
+                  <a
+                    href={`${externalBaseUrl}/blog`}
+                    className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    {t("blog")}
+                  </a>
+                ) : (
+                  <Link href="/blog" className={linkClass("/blog")}>
+                    {t("blog")}
+                  </Link>
+                )}
+              </>
+            )}
+
+            {/* Divider before sub-nav */}
+            {subNav && subNav.length > 0 && (
+              <>
+                <div className="h-4 w-px bg-border/40" />
+                {subNav.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className={linkClass(item.href)}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </>
+            )}
+          </div>
+
+          {/* Desktop: Auth + Toolbar */}
+          <div className="hidden items-center gap-3 md:flex">
+            {authSlot}
+            {authSlot && toolbarSlot && (
+              <div className="h-4 w-px bg-border/40" />
+            )}
+            {toolbarSlot && (
+              <div className="flex items-center gap-4">{toolbarSlot}</div>
+            )}
+          </div>
+
+          {/* Mobile: Hamburger */}
+          <button
+            className="text-muted-foreground hover:text-foreground ml-auto transition-colors md:hidden"
+            onClick={() => setMobileOpen(!mobileOpen)}
+            aria-label="Menu"
+          >
+            {mobileOpen ? <CloseIcon /> : <MenuIcon />}
+          </button>
+        </div>
+      </nav>
+
+      {/* Mobile menu overlay */}
+      {mobileOpen && (
+        <div className="bg-background/95 fixed inset-0 z-40 overflow-y-auto pt-[58px] backdrop-blur-md md:hidden">
+          <div className="flex flex-col px-6 py-6">
+            {/* Projects accordion */}
+            {showProjects && (
+              <>
+                <button
+                  className="text-foreground flex items-center justify-between py-3 text-base font-medium"
+                  onClick={() => setProjectsOpen(!projectsOpen)}
+                >
+                  {t("projects")}
+                  <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(" ")}
+                  >
+                    <path d="M6 9l6 6 6-6" />
+                  </svg>
+                </button>
+
+                {projectsOpen && (
+                  <div className="mb-2 flex flex-col gap-1 pl-1">
+                    {PROJECTS.map((project) => {
+                      const { href, external } = getProjectLink(project);
+                      const inner = (
+                        <div className="hover:bg-muted/50 flex items-center gap-3 rounded-lg px-3 py-3 transition-colors">
+                          <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)`,
+                            }}
+                          >
+                            <Image
+                              src={project.icon}
+                              alt=""
+                              width={20}
+                              height={20}
+                              className="object-contain"
+                            />
+                          </div>
+                          <div>
+                            <span className="text-foreground text-sm font-medium">
+                              {pt(`${project.key}.name`)}
+                            </span>
+                            {project.status === "coming" && (
+                              <Badge
+                                variant="outline"
+                                className="text-muted-foreground ml-2 px-1 py-0 text-[9px]"
+                              >
+                                {pt("status.coming")}
+                              </Badge>
+                            )}
+                          </div>
+                        </div>
+                      );
+
+                      if (external) {
+                        return (
+                          <a
+                            key={project.key}
+                            href={href}
+                            onClick={() => setMobileOpen(false)}
+                          >
+                            {inner}
+                          </a>
+                        );
+                      }
+                      return (
+                        <Link
+                          key={project.key}
+                          href={href}
+                          onClick={() => setMobileOpen(false)}
+                        >
+                          {inner}
+                        </Link>
+                      );
+                    })}
+                  </div>
+                )}
+              </>
+            )}
+
+            {/* Blog link (conditional) */}
+            {showBlog && (
+              <>
+                {projectsExternal ? (
+                  <a
+                    href={`${externalBaseUrl}/blog`}
+                    className="text-foreground border-border/40 border-t py-3 text-base font-medium"
+                    onClick={() => setMobileOpen(false)}
+                  >
+                    {t("blog")}
+                  </a>
+                ) : (
+                  <Link
+                    href="/blog"
+                    className="text-foreground border-border/40 border-t py-3 text-base font-medium"
+                    onClick={() => setMobileOpen(false)}
+                  >
+                    {t("blog")}
+                  </Link>
+                )}
+              </>
+            )}
+
+            {/* Sub-nav items (mobile) */}
+            {subNav && subNav.length > 0 && (
+              <div className="border-border/40 border-t">
+                {subNav.map((item) => (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    className="text-foreground block py-3 text-base font-medium"
+                    onClick={() => setMobileOpen(false)}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+            )}
+
+            {/* Auth section mobile */}
+            {authSlot && (
+              <div className="border-border/40 border-t pt-4">
+                {authSlot}
+              </div>
+            )}
+
+            {/* Toolbar (Theme + Locale) */}
+            {toolbarSlot && (
+              <div className="border-border/40 flex items-center gap-4 border-t pt-4 mt-2">
+                {toolbarSlot}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+/* ── Inline Logo (pure SVG, no external deps) ── */
+function Logo({
+  size = 20,
+}: {
+  size?: number;
+}) {
+  const id = `naeil-nav-logo-${size}`;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-label="naeil"
+    >
+      <path
+        d="M6 4 L6 16 L20 16"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="square"
+        strokeLinejoin="miter"
+      />
+      <circle cx="15" cy="16" r="3.5" fill={`url(#${id}-grad)`} mask={`url(#${id})`} />
+      <defs>
+        <linearGradient id={`${id}-grad`} x1="15" y1="12.5" x2="15" y2="16">
+          <stop stopColor="#eab308" />
+          <stop offset="1" stopColor="#dc2626" />
+        </linearGradient>
+        <mask id={id}>
+          <rect x="0" y="0" width="24" height="16" fill="white" />
+        </mask>
+      </defs>
+    </svg>
+  );
+}
+
+function MenuIcon() {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 6h16M4 12h16M4 18h16" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M18 6L6 18M6 6l12 12" />
+    </svg>
+  );
+}

package/src/components/paraglider-cursor.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+export function ParagliderCursor({ containerRef }: { containerRef: React.RefObject<HTMLElement | null> }) {
+  const gliderRef = useRef<HTMLDivElement>(null);
+  const pos = useRef({ x: 0, y: 0 });
+  const target = useRef({ x: 0, y: 0 });
+  const visible = useRef(false);
+  const direction = useRef(1); // 1 = right, -1 = left
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const onMove = (e: MouseEvent) => {
+      const rect = container.getBoundingClientRect();
+      target.current = {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top,
+      };
+      // Track direction for tilt
+      const dx = target.current.x - pos.current.x;
+      if (Math.abs(dx) > 1) {
+        direction.current = dx > 0 ? 1 : -1;
+      }
+      if (!visible.current) {
+        visible.current = true;
+        setShow(true);
+        // Snap to initial position (no lag on first enter)
+        pos.current = { ...target.current };
+      }
+    };
+
+    const onLeave = () => {
+      visible.current = false;
+      setShow(false);
+    };
+
+    container.addEventListener("mousemove", onMove);
+    container.addEventListener("mouseleave", onLeave);
+
+    let raf: number;
+    const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
+
+    const animate = () => {
+      pos.current.x = lerp(pos.current.x, target.current.x, 0.06);
+      pos.current.y = lerp(pos.current.y, target.current.y, 0.06);
+
+      if (gliderRef.current) {
+        const dx = target.current.x - pos.current.x;
+        const tilt = Math.max(-15, Math.min(15, dx * 0.3));
+        gliderRef.current.style.transform = `translate(${pos.current.x - 24}px, ${pos.current.y - 32}px) rotate(${tilt}deg)`;
+      }
+      raf = requestAnimationFrame(animate);
+    };
+    raf = requestAnimationFrame(animate);
+
+    return () => {
+      container.removeEventListener("mousemove", onMove);
+      container.removeEventListener("mouseleave", onLeave);
+      cancelAnimationFrame(raf);
+    };
+  }, [containerRef]);
+
+  return (
+    <div
+      ref={gliderRef}
+      className="pointer-events-none absolute left-0 top-0 z-20 transition-opacity duration-300"
+      style={{ opacity: show ? 1 : 0 }}
+    >
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 64 64"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        {/* Canopy */}
+        <path
+          d="M8 22 Q12 6 32 4 Q52 6 56 22 Q44 18 32 20 Q20 18 8 22Z"
+          fill="white"
+          fillOpacity="0.7"
+        />
+        {/* Lines */}
+        <line x1="12" y1="21" x2="30" y2="42" stroke="white" strokeWidth="0.6" opacity="0.5" />
+        <line x1="22" y1="19" x2="31" y2="42" stroke="white" strokeWidth="0.6" opacity="0.5" />
+        <line x1="32" y1="18" x2="32" y2="42" stroke="white" strokeWidth="0.6" opacity="0.5" />
+        <line x1="42" y1="19" x2="33" y2="42" stroke="white" strokeWidth="0.6" opacity="0.5" />
+        <line x1="52" y1="21" x2="34" y2="42" stroke="white" strokeWidth="0.6" opacity="0.5" />
+        {/* Person */}
+        <circle cx="32" cy="45" r="2.5" fill="white" fillOpacity="0.8" />
+        <path
+          d="M30 48 L32 56 L34 48"
+          stroke="white"
+          strokeWidth="1.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          opacity="0.7"
+        />
+        <path
+          d="M28 51 L32 49 L36 51"
+          stroke="white"
+          strokeWidth="1"
+          strokeLinecap="round"
+          opacity="0.6"
+        />
+      </svg>
+    </div>
+  );
+}