@naeil/ui 0.3.0 → 0.5.0

package/dist/source/components/naeil-header-content.js

@@ -0,0 +1,176 @@
+const headerLocales = ["en", "ko", "ja"];
+const headerLocaleNames = { en: "English", ko: "\uD55C\uAD6D\uC5B4", ja: "\u65E5\u672C\u8A9E" };
+const headerProjects = [
+  {
+    "key": "cc",
+    "href": "/cc",
+    "accent": "oklch(0.704 0.140 181)",
+    "icon": "coral",
+    "status": "active"
+  },
+  {
+    "key": "pkm",
+    "href": "/pkm",
+    "accent": "oklch(0.702 0.183 293)",
+    "icon": "jellyfish",
+    "status": "coming"
+  },
+  {
+    "key": "naeilUi",
+    "href": "/design",
+    "accent": "oklch(0.623 0.214 259)",
+    "icon": "whale",
+    "status": "active"
+  },
+  {
+    "key": "sa",
+    "href": "/sa",
+    "accent": "oklch(0.723 0.219 149)",
+    "icon": "fish",
+    "status": "active"
+  },
+  {
+    "key": "babyAgent",
+    "href": "/baby-agent",
+    "accent": "oklch(0.769 0.188 70.08)",
+    "icon": "turtle",
+    "status": "coming"
+  }
+];
+const headerContent = {
+  "en": {
+    "nav": {
+      "home": "Home",
+      "projects": "Projects",
+      "blog": "Blog",
+      "navigation": "Main navigation",
+      "menu": "Menu",
+      "closeMenu": "Close menu"
+    },
+    "theme": {
+      "switchToLight": "Switch to light theme",
+      "switchToDark": "Switch to dark theme"
+    },
+    "locale": {
+      "switchLabel": "Language"
+    },
+    "projects": {
+      "cc": {
+        "name": "Content Collector",
+        "description": "Automated content collection from RSS, YouTube, Reddit + AI summarization"
+      },
+      "pkm": {
+        "name": "PKM",
+        "description": "Personal knowledge management \u2014 document parsing, embeddings, semantic search"
+      },
+      "naeilUi": {
+        "name": "naeil-ui",
+        "description": "Minimal design system \u2014 OKLCH tokens, Tailwind v4, shadcn"
+      },
+      "sa": {
+        "name": "Sustainability Analyzer",
+        "description": "AI-powered ESG report analysis \u2014 PDF parsing, qualitative assessment, comparison tables"
+      },
+      "babyAgent": {
+        "name": "Baby Agent",
+        "description": "Parenting AI agent \u2014 LINE-based Q&A, records, reminders"
+      },
+      "status": {
+        "active": "Active",
+        "coming": "Coming Soon"
+      }
+    }
+  },
+  "ko": {
+    "nav": {
+      "home": "\uD648",
+      "projects": "\uD504\uB85C\uC81D\uD2B8",
+      "blog": "\uBE14\uB85C\uADF8",
+      "navigation": "\uC8FC\uC694 \uBA54\uB274",
+      "menu": "\uBA54\uB274",
+      "closeMenu": "\uBA54\uB274 \uB2EB\uAE30"
+    },
+    "theme": {
+      "switchToLight": "\uBC1D\uC740 \uD14C\uB9C8\uB85C \uC804\uD658",
+      "switchToDark": "\uC5B4\uB450\uC6B4 \uD14C\uB9C8\uB85C \uC804\uD658"
+    },
+    "locale": {
+      "switchLabel": "\uC5B8\uC5B4"
+    },
+    "projects": {
+      "cc": {
+        "name": "Content Collector",
+        "description": "RSS, YouTube, Reddit \uC790\uB3D9 \uC218\uC9D1 + AI \uC694\uC57D"
+      },
+      "pkm": {
+        "name": "PKM",
+        "description": "\uAC1C\uC778 \uC9C0\uC2DD \uAD00\uB9AC \u2014 \uBB38\uC11C \uD30C\uC2F1, \uC784\uBCA0\uB529, \uC2DC\uB9E8\uD2F1 \uAC80\uC0C9"
+      },
+      "naeilUi": {
+        "name": "naeil-ui",
+        "description": "\uBBF8\uB2C8\uBA40 \uB514\uC790\uC778 \uC2DC\uC2A4\uD15C \u2014 OKLCH \uD1A0\uD070, Tailwind v4, shadcn"
+      },
+      "sa": {
+        "name": "Sustainability Analyzer",
+        "description": "ESG \uB9AC\uD3EC\uD2B8 AI \uBD84\uC11D \u2014 PDF \uD30C\uC2F1, \uC815\uC131\uD3C9\uAC00, \uBE44\uAD50\uD45C \uC790\uB3D9 \uC0DD\uC131"
+      },
+      "babyAgent": {
+        "name": "Baby Agent",
+        "description": "\uC721\uC544 AI \uC5D0\uC774\uC804\uD2B8 \u2014 LINE \uAE30\uBC18 Q&A, \uAE30\uB85D, \uB9AC\uB9C8\uC778\uB354"
+      },
+      "status": {
+        "active": "\uD65C\uC131",
+        "coming": "\uC900\uBE44 \uC911"
+      }
+    }
+  },
+  "ja": {
+    "nav": {
+      "home": "\u30DB\u30FC\u30E0",
+      "projects": "\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8",
+      "blog": "\u30D6\u30ED\u30B0",
+      "navigation": "\u30E1\u30A4\u30F3\u30CA\u30D3\u30B2\u30FC\u30B7\u30E7\u30F3",
+      "menu": "\u30E1\u30CB\u30E5\u30FC",
+      "closeMenu": "\u30E1\u30CB\u30E5\u30FC\u3092\u9589\u3058\u308B"
+    },
+    "theme": {
+      "switchToLight": "\u30E9\u30A4\u30C8\u30C6\u30FC\u30DE\u306B\u5207\u308A\u66FF\u3048\u308B",
+      "switchToDark": "\u30C0\u30FC\u30AF\u30C6\u30FC\u30DE\u306B\u5207\u308A\u66FF\u3048\u308B"
+    },
+    "locale": {
+      "switchLabel": "\u8A00\u8A9E"
+    },
+    "projects": {
+      "cc": {
+        "name": "Content Collector",
+        "description": "RSS\u3001YouTube\u3001Reddit\u306E\u81EA\u52D5\u53CE\u96C6 + AI\u8981\u7D04"
+      },
+      "pkm": {
+        "name": "PKM",
+        "description": "\u500B\u4EBA\u30CA\u30EC\u30C3\u30B8\u7BA1\u7406 \u2014 \u30C9\u30AD\u30E5\u30E1\u30F3\u30C8\u89E3\u6790\u3001\u57CB\u3081\u8FBC\u307F\u3001\u30BB\u30DE\u30F3\u30C6\u30A3\u30C3\u30AF\u691C\u7D22"
+      },
+      "naeilUi": {
+        "name": "naeil-ui",
+        "description": "\u30DF\u30CB\u30DE\u30EB\u30C7\u30B6\u30A4\u30F3\u30B7\u30B9\u30C6\u30E0 \u2014 OKLCH\u30C8\u30FC\u30AF\u30F3\u3001Tailwind v4\u3001shadcn"
+      },
+      "sa": {
+        "name": "Sustainability Analyzer",
+        "description": "ESG\u30EC\u30DD\u30FC\u30C8AI\u5206\u6790 \u2014 PDF\u89E3\u6790\u3001\u5B9A\u6027\u8A55\u4FA1\u3001\u6BD4\u8F03\u8868\u306E\u81EA\u52D5\u751F\u6210"
+      },
+      "babyAgent": {
+        "name": "Baby Agent",
+        "description": "\u80B2\u5150AI\u30A8\u30FC\u30B8\u30A7\u30F3\u30C8 \u2014 LINE Q&A\u3001\u8A18\u9332\u3001\u30EA\u30DE\u30A4\u30F3\u30C0\u30FC"
+      },
+      "status": {
+        "active": "\u30A2\u30AF\u30C6\u30A3\u30D6",
+        "coming": "\u6E96\u5099\u4E2D"
+      }
+    }
+  }
+};
+export {
+  headerContent,
+  headerLocaleNames,
+  headerLocales,
+  headerProjects
+};

package/dist/source/components/naeil-header.d.ts

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { NavigationProps, NavigationLinkProps, NavigationLink, NavigationLinkComponent } from './ui/navigation.js';
+import { NaeilHeaderLocale } from './naeil-header-content.js';
+
+interface NaeilHeaderProps extends Omit<NavigationProps, "brand" | "items" | "toolbar" | "mobileToolbar" | "labels"> {
+    locale: NaeilHeaderLocale;
+    /** Resolve canonical unlocalized paths. Defaults to the official localized site. */
+    resolveHref?: (path: string) => string;
+    brandHref?: string;
+    brandSlot?: ReactNode;
+    brandLinkProps?: Omit<NavigationLinkProps, "href" | "children">;
+    /** Omit when the application does not support changing its UI language. */
+    onLocaleChange?: (locale: NaeilHeaderLocale) => void;
+    /** Application-owned authentication; this module has no site session/backend. */
+    authSlot?: ReactNode;
+    labels?: NavigationProps["labels"];
+    projects?: NavigationLink[];
+    /** Legacy remote-catalog mode: generated noncurrent project/blog links use native anchors. */
+    projectsExternal?: boolean;
+    /** Legacy next-intl copy overrides; catalog/artwork/layout remain shared. */
+    translations?: {
+        projects: string;
+        blog: string;
+        project: (key: string) => string;
+    };
+    showProjects?: boolean;
+    showBlog?: boolean;
+    subNav?: Array<{
+        label: string;
+        href: string;
+    }>;
+    currentProjectKey?: string;
+    currentProjectHref?: string;
+    /** Compatibility escape hatch replacing the default theme/locale/auth toolbar. */
+    toolbarSlot?: ReactNode;
+    /** Compatibility escape hatch for the legacy native external brand link. */
+    brandLinkComponent?: NavigationLinkComponent;
+}
+/** The actual header theme control; reads only the consumer's theme provider. */
+declare function NaeilHeaderThemeControl({ locale }: {
+    locale: NaeilHeaderLocale;
+}): react_jsx_runtime.JSX.Element;
+/** Shared rendering used by the whole header and legacy site control adapters. */
+declare function NaeilHeaderLocaleControl({ locale, onLocaleChange }: {
+    locale: NaeilHeaderLocale;
+    onLocaleChange: (locale: NaeilHeaderLocale) => void;
+}): react_jsx_runtime.JSX.Element;
+/** One complete, opt-in branded composition shared by naeil.dev and applications. */
+declare function NaeilHeader({ locale, resolveHref, brandHref, brandSlot, brandLinkProps, brandLinkComponent, onLocaleChange, authSlot, toolbarSlot, projects, projectsExternal, translations, showProjects, showBlog, subNav, currentProjectKey, currentProjectHref, labels, Link, currentHref, onNavigate, className, containerClassName, ...props }: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, type NaeilHeaderProps, NaeilHeaderThemeControl };

package/dist/source/components/naeil-header.js

@@ -0,0 +1,196 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { Logo } from "./logo.js";
+import { Badge } from "./ui/badge.js";
+import { Button } from "./ui/button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select.js";
+import { Navigation } from "./ui/navigation.js";
+import { cn } from "../lib/utils.js";
+import { headerContent, headerLocales, headerLocaleNames, headerProjects } from "./naeil-header-content.js";
+const subscribe = () => () => {
+};
+function NaeilHeaderThemeControl({ locale }) {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useSyncExternalStore(subscribe, () => true, () => false);
+  const dark = mounted && resolvedTheme === "dark";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-11 shrink-0",
+      disabled: !mounted,
+      "aria-label": headerContent[locale].theme[dark ? "switchToLight" : "switchToDark"],
+      onClick: () => setTheme(dark ? "light" : "dark"),
+      children: dark ? /* @__PURE__ */ jsx(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Moon, { "aria-hidden": "true" })
+    }
+  );
+}
+function NaeilHeaderLocaleControl({ locale, onLocaleChange }) {
+  return /* @__PURE__ */ jsxs(Select, { value: locale, onValueChange: (value) => onLocaleChange(value), children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        className: "h-11 w-auto min-w-20 border-transparent bg-transparent px-2",
+        "aria-label": headerContent[locale].locale.switchLabel,
+        children: /* @__PURE__ */ jsx(SelectValue, { children: locale.toUpperCase() })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { align: "end", children: headerLocales.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, className: "min-h-11", lang: value, children: headerLocaleNames[value] }, value)) })
+  ] });
+}
+const NativeLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
+function NaeilHeader(_a) {
+  var _b = _a, {
+    locale,
+    resolveHref = (path) => `https://naeil.dev/${locale}${path === "/" ? "" : path}`,
+    brandHref,
+    brandSlot,
+    brandLinkProps,
+    brandLinkComponent,
+    onLocaleChange,
+    authSlot,
+    toolbarSlot,
+    projects,
+    projectsExternal = false,
+    translations,
+    showProjects = true,
+    showBlog = true,
+    subNav,
+    currentProjectKey,
+    currentProjectHref,
+    labels,
+    Link = NativeLink,
+    currentHref,
+    onNavigate,
+    className,
+    containerClassName
+  } = _b, props = __objRest(_b, [
+    "locale",
+    "resolveHref",
+    "brandHref",
+    "brandSlot",
+    "brandLinkProps",
+    "brandLinkComponent",
+    "onLocaleChange",
+    "authSlot",
+    "toolbarSlot",
+    "projects",
+    "projectsExternal",
+    "translations",
+    "showProjects",
+    "showBlog",
+    "subNav",
+    "currentProjectKey",
+    "currentProjectHref",
+    "labels",
+    "Link",
+    "currentHref",
+    "onNavigate",
+    "className",
+    "containerClassName"
+  ]);
+  var _b2, _c;
+  const content = headerContent[locale];
+  const projectLinks = !showProjects ? [] : projects != null ? projects : headerProjects.map((project) => {
+    var _a3, _b3, _c2;
+    const current = project.key === currentProjectKey;
+    return {
+      id: project.key,
+      label: (_a3 = translations == null ? void 0 : translations.project(`${project.key}.name`)) != null ? _a3 : content.projects[project.key].name,
+      description: (_b3 = translations == null ? void 0 : translations.project(`${project.key}.description`)) != null ? _b3 : content.projects[project.key].description,
+      href: current ? currentProjectHref || "/" : resolveHref(project.href),
+      external: !current && projectsExternal,
+      active: current || currentHref === project.href || (currentHref == null ? void 0 : currentHref.startsWith(`${project.href}/`)) || currentHref === resolveHref(project.href),
+      icon: /* @__PURE__ */ jsx("span", { className: "naeil-header-project-icon", style: {
+        borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
+        backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
+      }, children: /* @__PURE__ */ jsx("img", { src: `https://naeil.dev/images/${project.icon}.png`, alt: "", width: 24, height: 24 }) }),
+      badge: project.status === "coming" ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: (_c2 = translations == null ? void 0 : translations.project("status.coming")) != null ? _c2 : content.projects.status.coming }) : void 0
+    };
+  });
+  const brandDestination = brandHref != null ? brandHref : resolveHref("/");
+  const BrandLink = brandLinkComponent != null ? brandLinkComponent : Link;
+  const _a2 = brandLinkProps != null ? brandLinkProps : {}, { onClick: onBrandClick } = _a2, brandProps = __objRest(_a2, ["onClick"]);
+  const toolbar = /* @__PURE__ */ jsx("div", { "data-app-toolbar": true, className: "naeil-header-controls", children: toolbarSlot !== void 0 ? toolbarSlot : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(NaeilHeaderThemeControl, { locale }),
+    onLocaleChange && /* @__PURE__ */ jsx(NaeilHeaderLocaleControl, { locale, onLocaleChange }),
+    authSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "naeil-header-separator" }),
+      authSlot
+    ] })
+  ] }) });
+  return /* @__PURE__ */ jsx(
+    Navigation,
+    __spreadProps(__spreadValues({}, props), {
+      "data-global-header": true,
+      "data-naeil-header": true,
+      Link,
+      currentHref,
+      onNavigate,
+      brand: /* @__PURE__ */ jsx(
+        BrandLink,
+        __spreadProps(__spreadValues({
+          href: brandDestination,
+          "data-app-brand": true,
+          "aria-label": brandSlot == null ? ".naeil" : void 0
+        }, brandProps), {
+          onClick: (event) => {
+            onBrandClick == null ? void 0 : onBrandClick(event);
+            onNavigate == null ? void 0 : onNavigate(event, { id: "brand", href: brandDestination, label: ".naeil" });
+          },
+          children: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block", label: null })
+        })
+      ),
+      items: [
+        ...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: 2 }] : [],
+        ...showBlog ? [{ id: "blog", label: (_c = translations == null ? void 0 : translations.blog) != null ? _c : content.nav.blog, href: resolveHref("/blog"), external: projectsExternal }] : [],
+        ...(subNav != null ? subNav : []).map((item) => __spreadProps(__spreadValues({}, item), { id: item.href }))
+      ],
+      labels: labels != null ? labels : { navigation: content.nav.navigation, menu: content.nav.menu, close: content.nav.closeMenu },
+      toolbar,
+      mobileToolbar: toolbar,
+      className: cn("naeil-header fixed top-0 w-full", className),
+      containerClassName: cn("naeil-header-frame max-w-7xl", containerClassName)
+    })
+  );
+}
+export {
+  NaeilHeader,
+  NaeilHeaderLocaleControl,
+  NaeilHeaderThemeControl
+};

package/dist/source/components/nav.d.ts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { NavigationLink, NavigationProps } from './ui/navigation.js';
+import 'react';
 
 interface NavProps {
     /** Internal Link component (from consumer's next-intl routing) */
@@ -7,11 +9,11 @@ interface NavProps {
     }>;
     /** Current pathname value (already resolved, not a hook) */
     usePathname: () => string;
-    /** Where the .naeil logo links to. Default: "/" */
+    /** 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) */
+    /** Custom brand content (replaces the default naeil wordmark lockup) */
     brandSlot?: React.ReactNode;
     /** When true, project links (except current) are rendered as external <a> to externalBaseUrl. Default: false */
     projectsExternal?: boolean;
@@ -33,7 +35,13 @@ interface NavProps {
     showBlog?: boolean;
     /** Right-side toolbar (theme toggle, locale switcher, etc.) */
     toolbarSlot?: React.ReactNode;
+    /** Replace the legacy naeil project inventory with application-owned links. */
+    projects?: NavigationLink[];
+    className?: string;
+    containerClassName?: string;
+    labels?: NavigationProps["labels"];
 }
-declare function Nav({ Link, usePathname, brandHref, brandExternal, brandSlot, projectsExternal, externalBaseUrl, currentProjectKey, currentProjectHref, subNav, authSlot, showProjects, showBlog, toolbarSlot, }: NavProps): react_jsx_runtime.JSX.Element;
+/** Legacy Next/next-intl adapter; the complete branded composition lives in NaeilHeader. */
+declare function Nav({ Link, usePathname, brandHref, brandExternal, brandSlot, projectsExternal, externalBaseUrl, currentProjectKey, currentProjectHref, subNav, authSlot, showProjects, showBlog, toolbarSlot, projects, className, containerClassName, labels, }: NavProps): react_jsx_runtime.JSX.Element;
 
-export { Nav };
+export { Nav, type NavProps };