@naeil/ui 0.6.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.7.1 — account presentation correction (candidate)
+
+- Add canonical `NaeilHeaderAccountControl` for shared login/account/logout presentation while consumers retain session and save guards.
+- Preserve existing header slots and imports; include authenticated menu/busy/failure coverage and packed consumer checks.
+
+## 0.7.0 — unpublished candidate
+
+- Add React-only canonical NaeilFooter with full/compact content, localized destinations and save-navigation adapters. Preserve generic and Next Footer overrides.
+- Add SiteFooter onNavigate for every group link including native external anchors.
+- Add package/chrome-contract identity, independent rendered release references and fail-closed service rollout verification.
+- Keep approved 1600px/clamp frame and purpose-specific content widths unchanged.
+
+
 ## 0.6.0 — shared application frame (2026-10-16)
 
 - Align Navigation, SiteFooter, NaeilHeader and preserved Nav/Footer adapters with a shared 1600px maximum outer frame and responsive `clamp(16px, 2.4vw, 40px)` gutters. Add `ui-app-frame` for main composition; retain explicit classes and product token overrides.

package/contracts/naeil-chrome.v1.json

@@ -0,0 +1,12 @@
+{
+  "schemaVersion": 1,
+  "contractVersion": "1",
+  "authority": "DESIGN.md: approved 2026-10-16 frame; shared-ui-rollout spec: canonical footer and guard",
+  "frame": { "maxWidth": 1600, "gutterMin": 16, "gutterVw": 2.4, "gutterMax": 40 },
+  "header": { "height": 65, "brandHeight": 28, "desktopBrandReservation": 160 },
+  "footer": { "variants": ["full", "compact"], "brandHeight": 20, "requiredPaths": ["/", "/projects", "/blog"], "github": "https://github.com/naeil-dev" },
+  "viewports": [390, 768, 1440, 1920],
+  "themes": ["light", "dark"],
+  "locales": ["en", "ko", "ja"],
+  "tolerancePx": 1
+}

package/dist/chunk-HSTDPY56.js

@@ -0,0 +1,74 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-JBTDRVZ7.js";
+
+// src/components/ui/site-footer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function SiteFooter(_a) {
+  var _b = _a, {
+    brand,
+    description,
+    groups = [],
+    Link,
+    meta,
+    children,
+    containerClassName,
+    className,
+    variant = "full",
+    onNavigate
+  } = _b, props = __objRest(_b, [
+    "brand",
+    "description",
+    "groups",
+    "Link",
+    "meta",
+    "children",
+    "containerClassName",
+    "className",
+    "variant",
+    "onNavigate"
+  ]);
+  return /* @__PURE__ */ jsx(
+    "footer",
+    __spreadProps(__spreadValues({
+      "data-slot": "site-footer",
+      "data-variant": variant,
+      className: cn("ui-site-footer", className)
+    }, props), {
+      children: /* @__PURE__ */ jsxs("div", { className: cn("ui-site-footer-frame", containerClassName), children: [
+        /* @__PURE__ */ jsxs("div", { className: "ui-site-footer-brand", children: [
+          brand,
+          description && /* @__PURE__ */ jsx("div", { className: "ui-site-footer-description", children: description }),
+          children
+        ] }),
+        groups.map((group) => /* @__PURE__ */ jsxs("nav", { "aria-label": group.label, children: [
+          /* @__PURE__ */ jsx("h2", { className: "ui-site-footer-label", children: group.label }),
+          group.links.map((item) => {
+            const Component = !item.external && Link ? Link : "a";
+            return /* @__PURE__ */ jsx(
+              Component,
+              {
+                href: item.href,
+                target: item.target,
+                rel: item.target === "_blank" ? "noopener noreferrer" : void 0,
+                className: "ui-site-footer-link ui-focus",
+                onClick: (event) => onNavigate == null ? void 0 : onNavigate(event, item),
+                children: item.label
+              },
+              item.id
+            );
+          })
+        ] }, group.id)),
+        meta && /* @__PURE__ */ jsx("div", { className: "ui-site-footer-meta", children: meta })
+      ] })
+    })
+  );
+}
+
+export {
+  SiteFooter
+};

package/dist/chunk-OLKTEYLS.js

@@ -0,0 +1,413 @@
+"use client";
+import {
+  Logo,
+  uiRelease
+} from "./chunk-VWIUN35X.js";
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Navigation,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "./chunk-QQQQZEPV.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-JBTDRVZ7.js";
+
+// src/components/naeil-header.tsx
+import { useSyncExternalStore } from "react";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+
+// src/components/naeil-header-content.ts
+var headerLocales = ["en", "ko", "ja"];
+var headerLocaleNames = { en: "English", ko: "\uD55C\uAD6D\uC5B4", ja: "\u65E5\u672C\u8A9E" };
+var 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"
+  }
+];
+var 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"
+      }
+    }
+  }
+};
+
+// src/components/naeil-header-account.tsx
+import { UserRound } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var labels = {
+  en: { menu: "Account menu", account: "Account", login: "Log in", logout: "Log out", busy: "Logging out\u2026" },
+  ko: { menu: "\uACC4\uC815 \uBA54\uB274", account: "\uACC4\uC815", login: "\uB85C\uADF8\uC778", logout: "\uB85C\uADF8\uC544\uC6C3", busy: "\uB85C\uADF8\uC544\uC6C3 \uC911\u2026" },
+  ja: { menu: "\u30A2\u30AB\u30A6\u30F3\u30C8\u30E1\u30CB\u30E5\u30FC", account: "\u30A2\u30AB\u30A6\u30F3\u30C8", login: "\u30ED\u30B0\u30A4\u30F3", logout: "\u30ED\u30B0\u30A2\u30A6\u30C8", busy: "\u30ED\u30B0\u30A2\u30A6\u30C8\u4E2D\u2026" }
+};
+var NativeLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
+function NaeilHeaderAccountControl({ locale, account, Link = NativeLink }) {
+  const text = labels[locale];
+  if (account.status === "signed-out") {
+    return /* @__PURE__ */ jsx(Link, { href: account.loginHref, className: "ui-navigation-link ui-focus naeil-header-login", "data-naeil-account-state": "signed-out", children: text.login });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "ui-focus naeil-header-account-trigger",
+        "data-naeil-account-trigger": true,
+        "data-naeil-account-state": "signed-in",
+        "aria-label": text.menu,
+        "aria-busy": account.busy || void 0,
+        children: /* @__PURE__ */ jsx("span", { className: "naeil-header-account-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx(UserRound, {}) })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-56 max-w-[calc(100vw-2rem)]", "data-naeil-account-menu": true, children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex min-w-0 flex-col font-normal", children: [
+        /* @__PURE__ */ jsx("span", { className: "truncate text-base font-medium", children: account.displayName || text.account }),
+        account.email && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-muted-foreground", children: account.email })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(
+        DropdownMenuItem,
+        {
+          className: "min-h-11",
+          disabled: account.busy,
+          onSelect: () => {
+            if (!account.busy) account.onLogout();
+          },
+          children: account.busy ? text.busy : text.logout
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/naeil-header.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var subscribe = () => () => {
+};
+function NaeilHeaderThemeControl({ locale }) {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useSyncExternalStore(subscribe, () => true, () => false);
+  const dark = mounted && resolvedTheme === "dark";
+  return /* @__PURE__ */ jsx2(
+    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__ */ jsx2(Sun, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(Moon, { "aria-hidden": "true" })
+    }
+  );
+}
+function NaeilHeaderLocaleControl({ locale, onLocaleChange }) {
+  return /* @__PURE__ */ jsxs2(Select, { value: locale, onValueChange: (value) => onLocaleChange(value), children: [
+    /* @__PURE__ */ jsx2(
+      SelectTrigger,
+      {
+        className: "h-11 w-auto min-w-20 border-transparent bg-transparent px-2",
+        "aria-label": headerContent[locale].locale.switchLabel,
+        children: /* @__PURE__ */ jsx2(SelectValue, { children: locale.toUpperCase() })
+      }
+    ),
+    /* @__PURE__ */ jsx2(SelectContent, { align: "end", children: headerLocales.map((value) => /* @__PURE__ */ jsx2(SelectItem, { value, className: "min-h-11", lang: value, children: headerLocaleNames[value] }, value)) })
+  ] });
+}
+var NativeLink2 = (props) => /* @__PURE__ */ jsx2("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: labels2,
+    Link = NativeLink2,
+    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__ */ jsx2("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__ */ jsx2("img", { src: `https://naeil.dev/images/${project.icon}.png`, alt: "", width: 24, height: 24 }) }),
+      badge: project.status === "coming" ? /* @__PURE__ */ jsx2(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__ */ jsx2("div", { "data-app-toolbar": true, className: "naeil-header-controls", children: toolbarSlot !== void 0 ? toolbarSlot : /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx2(NaeilHeaderThemeControl, { locale }),
+    onLocaleChange && /* @__PURE__ */ jsx2(NaeilHeaderLocaleControl, { locale, onLocaleChange }),
+    authSlot && /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", className: "naeil-header-separator" }),
+      authSlot
+    ] })
+  ] }) });
+  return /* @__PURE__ */ jsx2(
+    Navigation,
+    __spreadProps(__spreadValues({}, props), {
+      "data-global-header": true,
+      "data-naeil-header": true,
+      "data-naeil-ui-version": uiRelease.version,
+      "data-naeil-ui-contract": uiRelease.contractVersion,
+      Link,
+      currentHref,
+      onNavigate,
+      brand: /* @__PURE__ */ jsx2(
+        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__ */ jsx2(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: labels2 != null ? labels2 : { 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", containerClassName)
+    })
+  );
+}
+
+export {
+  headerLocales,
+  NaeilHeaderAccountControl,
+  NaeilHeaderThemeControl,
+  NaeilHeaderLocaleControl,
+  NaeilHeader
+};