@naeil/ui 0.3.0 → 0.5.0

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

@@ -1,15 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SiteFooterProps } from './ui/site-footer.js';
+import 'react';
+import './ui/navigation.js';
 
 interface FooterProps {
-    /** Link component from consumer */
     Link?: React.ComponentType<{
         href: string;
         children: React.ReactNode;
         className?: string;
     }>;
-    /** Whether links go to naeil.dev (external) or are internal. Default: false */
     linksExternal?: boolean;
+    brandSlot?: React.ReactNode;
+    description?: React.ReactNode;
+    groups?: SiteFooterProps["groups"];
+    socialSlot?: React.ReactNode;
+    meta?: React.ReactNode;
+    variant?: SiteFooterProps["variant"];
+    className?: string;
+    containerClassName?: string;
 }
-declare function Footer({ Link, linksExternal }: FooterProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ Link, linksExternal, brandSlot, description, groups, socialSlot, meta, variant, className, containerClassName, }: FooterProps): react_jsx_runtime.JSX.Element;
 
-export { Footer };
+export { Footer, type FooterProps };

package/dist/source/components/footer.js

@@ -1,47 +1,87 @@
 "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));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
-function NavLink({
-  href,
-  children,
+import { Logo } from "./logo.js";
+import { SiteFooter } from "./ui/site-footer.js";
+import { cn } from "../lib/utils.js";
+function Footer({
+  Link,
+  linksExternal = false,
+  brandSlot,
+  description,
+  groups,
+  socialSlot,
+  meta,
+  variant,
   className,
-  linksExternal,
-  Link
+  containerClassName
 }) {
-  if (linksExternal) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: `https://naeil.dev${href}`,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className,
-        children
-      }
-    );
-  }
-  if (Link) {
-    return /* @__PURE__ */ jsx(Link, { href, className, children });
-  }
-  return /* @__PURE__ */ jsx("a", { href, className, children });
-}
-function Footer({ Link, linksExternal = false }) {
   const t = useTranslations("footer");
-  return /* @__PURE__ */ jsx("footer", { className: "border-border/40 border-t", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 sm:flex-row sm:justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(Logo, { size: 20 }),
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-semibold tracking-tight", children: ".naeil" })
-      ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-[240px] text-sm leading-relaxed", children: t("tagline") }),
-      /* @__PURE__ */ jsxs("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__ */ jsx(
+    SiteFooter,
+    {
+      Link,
+      className,
+      containerClassName: cn("max-w-7xl", containerClassName),
+      variant,
+      brand: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(
           "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__ */ jsx(GitHubIcon, {})
           }
@@ -52,92 +92,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__ */ jsx(XIcon, {})
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-10 sm:gap-16", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("navigation") }),
-        /* @__PURE__ */ jsx(
-          NavLink,
-          {
-            href: "/projects",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            linksExternal,
-            Link,
-            children: t("projects")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          NavLink,
-          {
-            href: "/blog",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            linksExternal,
-            Link,
-            children: t("blog")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("social") }),
-        /* @__PURE__ */ jsx(
-          "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 Logo({ size = 20 }) {
-  const id = `naeil-footer-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" }) })
-        ] })
-      ]
+      ] }) : socialSlot
     }
   );
 }

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

@@ -1,11 +1,13 @@
-export { Nav } from './nav.js';
-export { Footer } from './footer.js';
+export { Nav, NavProps } from './nav.js';
+export { Footer, FooterProps } from './footer.js';
 export { LocaleSwitcher } from './locale-switcher.js';
 export { ThemeToggle } from './theme-toggle.js';
 export { ThemeProvider } from './theme-provider.js';
 export { ThemeToggleIcon } from './theme-toggle-icon.js';
-export { Logo } from './logo.js';
+export { Logo, LogoProps } from './logo.js';
 export { PageTitle, SectionTitle, pageTitleClass, sectionTitleClass } from './typography.js';
 import 'react/jsx-runtime';
-import 'next-themes';
+import './ui/navigation.js';
 import 'react';
+import './ui/site-footer.js';
+import 'next-themes';

package/dist/source/components/locale-switcher.js

@@ -17,7 +17,7 @@ function LocaleSwitcher({
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "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__ */ jsx(GlobeIcon, {}),

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

@@ -1,9 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps } from 'react';
 
-declare function Logo({ size, mono, className, }: {
+interface LogoProps extends Omit<SVGProps<SVGSVGElement>, "children" | "width" | "height" | "viewBox"> {
+    /** Rendered height. Symbol stays square; lockups preserve their aspect ratio. */
     size?: number;
+    /** Legacy single-ink currentColor silhouette. Prefer tone="gray" for tonal detail. */
     mono?: boolean;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
+    variant?: "symbol" | "horizontal" | "footer" | "stacked" | "wordmark";
+    tone?: "color" | "gray";
+    /** Auto follows the nearest .light/.dark or data-theme ancestor, then the OS. */
+    theme?: "auto" | "light" | "dark";
+    /** null marks a decorative logo; label the containing link instead. */
+    label?: string | null;
+}
+declare function Logo({ size, mono, variant, tone, theme, label, className, ...props }: LogoProps): react_jsx_runtime.JSX.Element;
 
-export { Logo };
+export { Logo, type LogoProps };

package/dist/source/components/logo.js

@@ -1,50 +1,89 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-function Logo({
-  size = 20,
-  mono = false,
-  className
-}) {
-  const id = `naeil-logo-${size}`;
-  return /* @__PURE__ */ jsxs(
+"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 { useId } from "react";
+import { BrandArtwork, brandDimensions, brandVersion } from "./brand-artwork.generated.js";
+const autoThemeCSS = `
+:where(.light,[data-theme="light"]){--naeil-logo-light:inline;--naeil-logo-dark:none}
+:where(.dark,[data-theme="dark"]){--naeil-logo-light:none;--naeil-logo-dark:inline}
+@media(prefers-color-scheme:dark){[data-naeil-theme="auto"]{--naeil-logo-os-light:none;--naeil-logo-os-dark:inline}}
+`;
+function Logo(_a) {
+  var _b = _a, {
+    size = 20,
+    mono = false,
+    variant = "symbol",
+    tone = "color",
+    theme = "auto",
+    label = "naeil",
+    className
+  } = _b, props = __objRest(_b, [
+    "size",
+    "mono",
+    "variant",
+    "tone",
+    "theme",
+    "label",
+    "className"
+  ]);
+  const id = `naeil-${useId()}`;
+  const form = variant === "symbol" && size <= 48 ? "symbol-small" : variant;
+  const mode = mono ? "mono" : `${tone}${theme === "dark" ? "-dark" : ""}`;
+  const asset = `${form}-${mode}`;
+  const geometry = brandDimensions[asset];
+  const auto = !mono && theme === "auto";
+  return /* @__PURE__ */ jsx(
     "svg",
-    {
-      width: size,
+    __spreadProps(__spreadValues({
+      width: size * geometry.width / geometry.height,
       height: size,
-      viewBox: "0 0 24 24",
+      viewBox: geometry.viewBox,
       fill: "none",
-      "aria-label": "naeil",
-      className,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        mono ? /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: "currentColor", mask: `url(#${id})` }) : /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          !mono && /* @__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" }) })
-        ] })
-      ]
-    }
+      role: label === null ? void 0 : "img",
+      "aria-label": label != null ? label : void 0,
+      "aria-hidden": label === null ? true : void 0,
+      focusable: "false",
+      "data-naeil-brand": brandVersion,
+      "data-naeil-variant": variant,
+      "data-naeil-theme": auto ? "auto" : theme,
+      className
+    }, props), {
+      children: auto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("style", { children: autoThemeCSS }),
+        /* @__PURE__ */ jsx("g", { "data-naeil-palette": "light", style: { display: "var(--naeil-logo-light, var(--naeil-logo-os-light, inline))" }, children: /* @__PURE__ */ jsx(BrandArtwork, { asset, id: `${id}-light` }) }),
+        /* @__PURE__ */ jsx("g", { "data-naeil-palette": "dark", style: { display: "var(--naeil-logo-dark, var(--naeil-logo-os-dark, none))" }, children: /* @__PURE__ */ jsx(BrandArtwork, { asset: `${form}-${tone}-dark`, id: `${id}-dark` }) })
+      ] }) : /* @__PURE__ */ jsx(BrandArtwork, { asset, id })
+    })
   );
 }
 export {

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

@@ -0,0 +1,171 @@
+declare const headerLocales: readonly ["en", "ko", "ja"];
+type NaeilHeaderLocale = (typeof headerLocales)[number];
+declare const headerLocaleNames: {
+    readonly en: "English";
+    readonly ko: "한국어";
+    readonly ja: "日本語";
+};
+declare const headerProjects: readonly [{
+    readonly key: "cc";
+    readonly href: "/cc";
+    readonly accent: "oklch(0.704 0.140 181)";
+    readonly icon: "coral";
+    readonly status: "active";
+}, {
+    readonly key: "pkm";
+    readonly href: "/pkm";
+    readonly accent: "oklch(0.702 0.183 293)";
+    readonly icon: "jellyfish";
+    readonly status: "coming";
+}, {
+    readonly key: "naeilUi";
+    readonly href: "/design";
+    readonly accent: "oklch(0.623 0.214 259)";
+    readonly icon: "whale";
+    readonly status: "active";
+}, {
+    readonly key: "sa";
+    readonly href: "/sa";
+    readonly accent: "oklch(0.723 0.219 149)";
+    readonly icon: "fish";
+    readonly status: "active";
+}, {
+    readonly key: "babyAgent";
+    readonly href: "/baby-agent";
+    readonly accent: "oklch(0.769 0.188 70.08)";
+    readonly icon: "turtle";
+    readonly status: "coming";
+}];
+declare const headerContent: {
+    readonly en: {
+        readonly nav: {
+            readonly home: "Home";
+            readonly projects: "Projects";
+            readonly blog: "Blog";
+            readonly navigation: "Main navigation";
+            readonly menu: "Menu";
+            readonly closeMenu: "Close menu";
+        };
+        readonly theme: {
+            readonly switchToLight: "Switch to light theme";
+            readonly switchToDark: "Switch to dark theme";
+        };
+        readonly locale: {
+            readonly switchLabel: "Language";
+        };
+        readonly projects: {
+            readonly cc: {
+                readonly name: "Content Collector";
+                readonly description: "Automated content collection from RSS, YouTube, Reddit + AI summarization";
+            };
+            readonly pkm: {
+                readonly name: "PKM";
+                readonly description: "Personal knowledge management — document parsing, embeddings, semantic search";
+            };
+            readonly naeilUi: {
+                readonly name: "naeil-ui";
+                readonly description: "Minimal design system — OKLCH tokens, Tailwind v4, shadcn";
+            };
+            readonly sa: {
+                readonly name: "Sustainability Analyzer";
+                readonly description: "AI-powered ESG report analysis — PDF parsing, qualitative assessment, comparison tables";
+            };
+            readonly babyAgent: {
+                readonly name: "Baby Agent";
+                readonly description: "Parenting AI agent — LINE-based Q&A, records, reminders";
+            };
+            readonly status: {
+                readonly active: "Active";
+                readonly coming: "Coming Soon";
+            };
+        };
+    };
+    readonly ko: {
+        readonly nav: {
+            readonly home: "홈";
+            readonly projects: "프로젝트";
+            readonly blog: "블로그";
+            readonly navigation: "주요 메뉴";
+            readonly menu: "메뉴";
+            readonly closeMenu: "메뉴 닫기";
+        };
+        readonly theme: {
+            readonly switchToLight: "밝은 테마로 전환";
+            readonly switchToDark: "어두운 테마로 전환";
+        };
+        readonly locale: {
+            readonly switchLabel: "언어";
+        };
+        readonly projects: {
+            readonly cc: {
+                readonly name: "Content Collector";
+                readonly description: "RSS, YouTube, Reddit 자동 수집 + AI 요약";
+            };
+            readonly pkm: {
+                readonly name: "PKM";
+                readonly description: "개인 지식 관리 — 문서 파싱, 임베딩, 시맨틱 검색";
+            };
+            readonly naeilUi: {
+                readonly name: "naeil-ui";
+                readonly description: "미니멀 디자인 시스템 — OKLCH 토큰, Tailwind v4, shadcn";
+            };
+            readonly sa: {
+                readonly name: "Sustainability Analyzer";
+                readonly description: "ESG 리포트 AI 분석 — PDF 파싱, 정성평가, 비교표 자동 생성";
+            };
+            readonly babyAgent: {
+                readonly name: "Baby Agent";
+                readonly description: "육아 AI 에이전트 — LINE 기반 Q&A, 기록, 리마인더";
+            };
+            readonly status: {
+                readonly active: "활성";
+                readonly coming: "준비 중";
+            };
+        };
+    };
+    readonly ja: {
+        readonly nav: {
+            readonly home: "ホーム";
+            readonly projects: "プロジェクト";
+            readonly blog: "ブログ";
+            readonly navigation: "メインナビゲーション";
+            readonly menu: "メニュー";
+            readonly closeMenu: "メニューを閉じる";
+        };
+        readonly theme: {
+            readonly switchToLight: "ライトテーマに切り替える";
+            readonly switchToDark: "ダークテーマに切り替える";
+        };
+        readonly locale: {
+            readonly switchLabel: "言語";
+        };
+        readonly projects: {
+            readonly cc: {
+                readonly name: "Content Collector";
+                readonly description: "RSS、YouTube、Redditの自動収集 + AI要約";
+            };
+            readonly pkm: {
+                readonly name: "PKM";
+                readonly description: "個人ナレッジ管理 — ドキュメント解析、埋め込み、セマンティック検索";
+            };
+            readonly naeilUi: {
+                readonly name: "naeil-ui";
+                readonly description: "ミニマルデザインシステム — OKLCHトークン、Tailwind v4、shadcn";
+            };
+            readonly sa: {
+                readonly name: "Sustainability Analyzer";
+                readonly description: "ESGレポートAI分析 — PDF解析、定性評価、比較表の自動生成";
+            };
+            readonly babyAgent: {
+                readonly name: "Baby Agent";
+                readonly description: "育児AIエージェント — LINE Q&A、記録、リマインダー";
+            };
+            readonly status: {
+                readonly active: "アクティブ";
+                readonly coming: "準備中";
+            };
+        };
+    };
+};
+
+export { type NaeilHeaderLocale, headerContent, headerLocaleNames, headerLocales, headerProjects };