@naeil/ui 0.8.0 → 0.10.0

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

@@ -0,0 +1,231 @@
+"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 { uiRelease } from "../lib/ui-release.js";
+import { headerLocales, headerProjects } from "./naeil-header-data.js";
+import { useNaeilMessages } from "./naeil-messages-context.js";
+import { NaeilHeaderAccountControl } from "./naeil-header-account-core.js";
+const subscribe = () => () => {
+};
+function NaeilHeaderThemeControl({ locale }) {
+  const copy = useNaeilMessages(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": copy.header.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 }) {
+  const copy = useNaeilMessages(locale);
+  return /* @__PURE__ */ jsxs(Select, { value: locale, onValueChange: (value) => onLocaleChange(value), children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        "data-naeil-focus-id": "locale-control",
+        className: "h-11 w-auto min-w-20 border-transparent bg-transparent px-2",
+        "aria-label": copy.header.locale.switchLabel,
+        children: /* @__PURE__ */ jsx(SelectValue, { children: locale.toUpperCase() })
+      }
+    ),
+    /* @__PURE__ */ jsx(SelectContent, { align: "end", "data-naeil-chrome": "", "data-naeil-locale-menu": "", lang: locale, children: headerLocales.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, className: "min-h-11", lang: value, children: copy.locale.names[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,
+    brandSuffix,
+    statusSlot,
+    appNavigation,
+    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",
+    "brandSuffix",
+    "statusSlot",
+    "appNavigation",
+    "brandLinkProps",
+    "brandLinkComponent",
+    "onLocaleChange",
+    "authSlot",
+    "toolbarSlot",
+    "projects",
+    "projectsExternal",
+    "translations",
+    "showProjects",
+    "showBlog",
+    "subNav",
+    "currentProjectKey",
+    "currentProjectHref",
+    "labels",
+    "Link",
+    "currentHref",
+    "onNavigate",
+    "className",
+    "containerClassName"
+  ]);
+  var _b2, _c;
+  const content = useNaeilMessages(locale).header;
+  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",
+      "data-naeil-chrome": toolbarSlot === void 0 ? "" : void 0,
+      lang: toolbarSlot === void 0 ? locale : void 0,
+      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
+        ] })
+      ] })
+    }
+  );
+  const logo = /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block", label: null });
+  const 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 : brandSuffix ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        logo,
+        /* @__PURE__ */ jsx("span", { className: "naeil-header-brand-suffix", children: brandSuffix })
+      ] }) : logo
+    })
+  );
+  return /* @__PURE__ */ jsx(
+    Navigation,
+    __spreadProps(__spreadValues({}, props), {
+      "data-global-header": true,
+      "data-naeil-header": true,
+      "data-naeil-chrome": "",
+      lang: locale,
+      "data-naeil-ui-version": uiRelease.version,
+      "data-naeil-ui-contract": uiRelease.contractVersion,
+      Link,
+      currentHref,
+      onNavigate,
+      brand: statusSlot != null ? /* @__PURE__ */ jsxs("div", { className: "naeil-header-brand-row", children: [
+        brand,
+        statusSlot
+      ] }) : brand,
+      items: [
+        ...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: projectLinks.length > 1 ? 2 : 1 }] : [],
+        ...showBlog ? [{ id: "blog", label: (_c = translations == null ? void 0 : translations.blog) != null ? _c : content.nav.blog, href: resolveHref("/blog"), external: projectsExternal }] : [],
+        ...appNavigation != null ? appNavigation : [],
+        ...(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", containerClassName)
+    })
+  );
+}
+export {
+  NaeilHeader,
+  NaeilHeaderAccountControl,
+  NaeilHeaderLocaleControl,
+  NaeilHeaderThemeControl
+};

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

@@ -0,0 +1,11 @@
+declare const headerLocales: readonly ["en", "ko", "ja"];
+type NaeilHeaderLocale = (typeof headerLocales)[number];
+declare const headerProjects: readonly [{
+    readonly key: "naeilUi";
+    readonly href: "/design";
+    readonly accent: "oklch(0.623 0.214 259)";
+    readonly icon: "whale";
+    readonly status: "active" | "coming";
+}];
+
+export { type NaeilHeaderLocale, headerLocales, headerProjects };

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

@@ -0,0 +1,14 @@
+const headerLocales = ["en", "ko", "ja"];
+const headerProjects = [
+  {
+    "key": "naeilUi",
+    "href": "/design",
+    "accent": "oklch(0.623 0.214 259)",
+    "icon": "whale",
+    "status": "active"
+  }
+];
+export {
+  headerLocales,
+  headerProjects
+};

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

@@ -1,59 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-import { NavigationProps, NavigationItem, NavigationLinkProps, NavigationLink, NavigationLinkComponent } from './ui/navigation.js';
-import { NaeilHeaderLocale } from './naeil-header-content.js';
-export { NaeilHeaderAccount, NaeilHeaderAccountControl, NaeilHeaderAccountControlProps } from './naeil-header-account.js';
+import { NaeilHeaderProps } from './naeil-header-core.js';
+import { NaeilHeaderLocale } from './naeil-header-data.js';
+export { NaeilHeaderAccountControl } from './naeil-header-account.js';
+export { NaeilHeaderAccount, NaeilHeaderAccountControlProps } from './naeil-header-account-core.js';
+import 'react';
+import './ui/navigation.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;
-    /** Ignored when brandSlot replaces the complete brand content. */
-    brandSuffix?: string;
-    /** After the brand link, outside it; rendered once at every width. */
-    statusSlot?: ReactNode;
-    /** Product menu data, after catalog/blog and before flat subNav links. */
-    appNavigation?: NavigationItem[];
-    brandLinkProps?: Omit<NavigationLinkProps, "href" | "children">;
-    /** Omit when the application does not support changing its UI language. */
-    onLocaleChange?: (locale: NaeilHeaderLocale) => void;
-    /** Use NaeilHeaderAccountControl for canonical UI; the app owns auth state/I/O. */
-    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 }: {
+declare function NaeilHeader(props: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
+declare function NaeilHeaderThemeControl(props: {
     locale: NaeilHeaderLocale;
 }): react_jsx_runtime.JSX.Element;
-/** Shared rendering used by the whole header and legacy site control adapters. */
-declare function NaeilHeaderLocaleControl({ locale, onLocaleChange }: {
+declare function NaeilHeaderLocaleControl(props: {
     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, brandSuffix, statusSlot, appNavigation, 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 };
+export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, NaeilHeaderProps, NaeilHeaderThemeControl };

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

@@ -1,7 +1,5 @@
 "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;
@@ -17,207 +15,18 @@ var __spreadValues = (a, b) => {
     }
   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 { uiRelease } from "../lib/ui-release.js";
-import { headerContent, headerLocales, headerLocaleNames, headerProjects } from "./naeil-header-content.js";
+import { jsx } from "react/jsx-runtime";
+import { NaeilHeader as Header, NaeilHeaderThemeControl as ThemeControl, NaeilHeaderLocaleControl as LocaleControl } from "./naeil-header-core.js";
+import { NaeilStandaloneMessages } from "./naeil-standalone-messages.js";
 import { NaeilHeaderAccountControl } from "./naeil-header-account.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 NaeilHeader(props) {
+  return /* @__PURE__ */ jsx(NaeilStandaloneMessages, { locale: props.locale, children: /* @__PURE__ */ jsx(Header, __spreadValues({}, props)) });
 }
-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", "data-naeil-chrome": "", "data-naeil-locale-menu": "", lang: locale, children: headerLocales.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, className: "min-h-11", lang: value, children: headerLocaleNames[value] }, value)) })
-  ] });
+function NaeilHeaderThemeControl(props) {
+  return /* @__PURE__ */ jsx(NaeilStandaloneMessages, { locale: props.locale, children: /* @__PURE__ */ jsx(ThemeControl, __spreadValues({}, props)) });
 }
-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,
-    brandSuffix,
-    statusSlot,
-    appNavigation,
-    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",
-    "brandSuffix",
-    "statusSlot",
-    "appNavigation",
-    "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",
-      "data-naeil-chrome": toolbarSlot === void 0 ? "" : void 0,
-      lang: toolbarSlot === void 0 ? locale : void 0,
-      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
-        ] })
-      ] })
-    }
-  );
-  const logo = /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block", label: null });
-  const 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 : brandSuffix ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        logo,
-        /* @__PURE__ */ jsx("span", { className: "naeil-header-brand-suffix", children: brandSuffix })
-      ] }) : logo
-    })
-  );
-  return /* @__PURE__ */ jsx(
-    Navigation,
-    __spreadProps(__spreadValues({}, props), {
-      "data-global-header": true,
-      "data-naeil-header": true,
-      "data-naeil-chrome": "",
-      lang: locale,
-      "data-naeil-ui-version": uiRelease.version,
-      "data-naeil-ui-contract": uiRelease.contractVersion,
-      Link,
-      currentHref,
-      onNavigate,
-      brand: statusSlot != null ? /* @__PURE__ */ jsxs("div", { className: "naeil-header-brand-row", children: [
-        brand,
-        statusSlot
-      ] }) : brand,
-      items: [
-        ...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: projectLinks.length > 1 ? 2 : 1 }] : [],
-        ...showBlog ? [{ id: "blog", label: (_c = translations == null ? void 0 : translations.blog) != null ? _c : content.nav.blog, href: resolveHref("/blog"), external: projectsExternal }] : [],
-        ...appNavigation != null ? appNavigation : [],
-        ...(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", containerClassName)
-    })
-  );
+function NaeilHeaderLocaleControl(props) {
+  return /* @__PURE__ */ jsx(NaeilStandaloneMessages, { locale: props.locale, children: /* @__PURE__ */ jsx(LocaleControl, __spreadValues({}, props)) });
 }
 export {
   NaeilHeader,

package/dist/source/components/naeil-messages-context.d.ts

@@ -0,0 +1,94 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { NaeilHeaderLocale } from './naeil-header-data.js';
+
+var naeil = {
+	header: {
+		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 — document parsing, embeddings, semantic search"
+			},
+			naeilUi: {
+				name: "naeil-ui",
+				description: "Minimal design system — OKLCH tokens, Tailwind v4, shadcn"
+			},
+			sa: {
+				name: "Sustainability Analyzer",
+				description: "AI-powered ESG report analysis — PDF parsing, qualitative assessment, comparison tables"
+			},
+			babyAgent: {
+				name: "Baby Agent",
+				description: "Parenting AI agent — LINE-based Q&A, records, reminders"
+			},
+			status: {
+				active: "Active",
+				coming: "Coming Soon"
+			}
+		}
+	},
+	account: {
+		menu: "Account menu",
+		account: "Account",
+		login: "Log in",
+		logout: "Log out",
+		busy: "Logging out…"
+	},
+	footer: {
+		navigation: "Navigation",
+		projects: "Projects",
+		blog: "Blog",
+		social: "Social",
+		description: "Tomorrow starts here."
+	},
+	locale: {
+		names: {
+			en: "English",
+			ko: "한국어",
+			ja: "日本語"
+		},
+		pending: "Changing language…",
+		failed: "The language could not be changed. Your work is still here.",
+		retry: "Try again",
+		errors: {
+			badRequest: "This address is not valid.",
+			notFound: "Page not found.",
+			unauthenticated: "Sign in to continue.",
+			forbidden: "You do not have access to this page.",
+			unavailable: "The service is temporarily unavailable. Please try again."
+		}
+	}
+};
+var en = {
+	naeil: naeil
+};
+
+type NaeilCommonMessages = typeof en.naeil;
+/** React-only bridge: the locale runtime supplies its already selected JSON. */
+declare function NaeilMessagesProvider({ locale, messages, children }: {
+    locale: NaeilHeaderLocale;
+    messages: NaeilCommonMessages;
+    children: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useNaeilMessages(locale: NaeilHeaderLocale): NaeilCommonMessages;
+
+export { type NaeilCommonMessages, NaeilMessagesProvider, useNaeilMessages };

package/dist/source/components/naeil-messages-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const NaeilMessages = createContext(null);
+function NaeilMessagesProvider({ locale, messages, children }) {
+  return /* @__PURE__ */ jsx(NaeilMessages.Provider, { value: { locale, messages }, children });
+}
+function useNaeilMessages(locale) {
+  const value = useContext(NaeilMessages);
+  if (!value || value.locale !== locale) throw new Error("Naeil chrome requires messages for its current locale");
+  return value.messages;
+}
+export {
+  NaeilMessagesProvider,
+  useNaeilMessages
+};