@naeil/ui 0.5.0 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # 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.
+- Increase the list content cap from 1200px to 1600px within available frame space. Reading/settings remain 640px and short forms 480px. Remove prior `max-w-7xl` or `px-6` frame overrides when adopting defaults.
+- Add application-layout and consumer-agent guidance for shared header/footer selection; synchronize the standalone React example with the matching 0.6.0 archive. Existing external consumers require their own upgrades and adapter migrations.
+
+Archive identity, registry publication and hosted deployment outcomes are recorded in the [0.6.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0). External application upgrades remain separate.
+
 ## 0.5.0 — shared whole header (2026-10-15)
 
 - Add optional React-only NaeilHeader with the actual site catalog, controls, toolbar, fixed frame and responsive behavior. Site adapters consume the same module; preserve existing public compatibility imports/props.

package/DESIGN.md

@@ -110,13 +110,17 @@ Demonstrate the system in three neutral compositions: a settings form, a selecta
 
 ### Application frame and content widths
 
-The owner approved extracting the actual naeil.dev whole header on2026-10-15. The optional `@naeil/ui/naeil-header` composition centralizes its brand/catalog/control/toolbar/responsive implementation. Its1280px branded frame is the existing website composition, separate from generic Navigation and from each product's content width. Official decorative image URLs are references; no new artwork rights or redistribution is implied. See [NaeilHeader](docs/components/naeil-header.md).
+On 2026-10-16 the owner approved a shared maximum application frame of **1600px**, with responsive inline gutters **clamp(16px, 2.4vw, 40px)**, after inspecting Naeil Home at mobile and desktop widths. This supersedes the prior 1280px branded-header cap and fixed 24px frame gutters. The frame includes its padding, centers on wider screens and shrinks to available space. Numeric values live in `ui.width-frame` and `ui.frame-gutter`; `.ui-app-frame`, `Navigation`, `SiteFooter`, `NaeilHeader`, and the legacy adapters use those same defaults.
 
-Navigation and footer composition share the React-only `Navigation` and `SiteFooter` core. Existing `Nav`/`Footer` preserve Next compatibility while using that core. Services own menu data, route guards, locale/theme providers, authentication and frame widths; they should not fork the header/footer implementation. A compact dashboard/footer composition and a full website footer share behavior and visual rules without requiring identical product links. See [the component contract](docs/components/navigation.md).
+The optional `@naeil/ui/naeil-header` composition centralizes the actual naeil.dev brand/catalog/control/toolbar/responsive implementation approved on 2026-10-15. Official decorative image URLs remain references; no new artwork rights or redistribution is implied. See [NaeilHeader](docs/components/naeil-header.md).
+
+Application navigation and footer must use the shared compositions: `NaeilHeader` for the canonical naeil catalog, `Navigation` for different product menus, and `SiteFooter` for both compact and full footers. Existing `Nav`/`Footer` preserve Next compatibility while using that core. Services own menu data, route guards, locale/theme providers and authentication through adapters and slots. Extend the shared API when a reusable behavior is missing instead of copying menu, responsive or footer implementations. See [the application starter and consumer-agent rules](docs/components/application-layout.md).
 
 The application frame owns navigation placement and outer gutters; each content region owns its purpose-specific width. A narrow settings form inside that frame must not move the shared navigation. For routes using the same frame, keep navigation anchors stable at the same viewport, language and theme, including loading and changing summary counts. A shared Header import alone does not establish this consistency.
 
-Choose a product's frame width from its tasks, information density and representative content. A dashboard name or a wide monitor alone does not justify filling all available space. Inspect sparse as well as dense content before selecting a cap or fluid layout. The shared reading/settings/list defaults remain content rules, not a universal application maximum; RelayDock's 1600px decision is not a shared token.
+Content caps are reading **640px**, settings **640px**, short form **480px**, and lists **1600px** (updated from 1200px on 2026-10-16). Put lists, tables and dashboards inside `.ui-app-frame` so they use the space remaining after its gutters. Narrow reading/forms stay inside that stable outer frame. `data-ui-layout="fluid"` uses the available region. At a 1920px viewport the default frame has 1520px of usable width.
+
+Products may deliberately override `--ui-width-frame`, `--ui-frame-gutter`, content tokens or `containerClassName`; apply frame overrides consistently to header, main and footer. Choose exceptions from representative tasks and sparse/dense content, and record the reason. An override is not permission to fork shared chrome. Keep the old list cap with `--ui-width-list: 1200px` where required. The earlier product-specific 1600px observation alone was not a shared rule; the owner's explicit 2026-10-16 decision establishes this new default.
 
 Internal columns must respond to the space available inside their region. Use container queries or an equivalent content-aware layout when viewport breakpoints no longer represent that space. Keep wide tables locally scrollable; check localized labels, wrapping and controls inside cells as well as page overflow. See the [consumer composition guide](docs/design/v2-migration.md#앱-전체-틀과-콘텐츠-폭) for application ownership and checks.
 

package/README.md

@@ -13,20 +13,29 @@ This repository also contains the **naeil.dev brand/example website** and an **o
 
 ## Use the UI
 
-This guide targets the **@naeil/ui 0.5.0 release candidate** with React 19 / ReactDOM 19 and Tailwind 4. Final archive verification and registry publication are pending; UI v2 names the design generation independently of npm versioning. Build and pack this checkout, then install the reviewed local archive in your app:
+This guide targets **@naeil/ui 0.6.0** with React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. Install the matching release in your app:
 
 ```sh
-# In this repository:
-pnpm build:pkg
-npm pack --ignore-scripts --pack-destination /tmp
-# In the consumer app:
-pnpm add --save-exact /tmp/naeil-ui-0.5.0.tgz
+pnpm add --save-exact @naeil/ui@0.6.0
 ```
 
-After registry publication is verified, use `pnpm add --save-exact @naeil/ui@0.5.0`. An install command is not evidence of publication.
+For a local candidate, run `pnpm build:pkg` and `npm pack --ignore-scripts --pack-destination /tmp`, then install `/tmp/naeil-ui-0.6.0.tgz`. The [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) tracks archive identity, publication and deployment separately.
+
+The preceding [0.5.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0) was published on 2026-10-15 and introduced the whole shared header. Version 0.6.0 adds the shared 1600px frame; existing applications must upgrade and adopt its layout composition.
 
 Version 0.4.0 was published to npm on 2026-10-11 and verified as `latest`; it adds the approved `.naeil` brand 1.1.1. The [release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.4.0) retains the byte-verified archive and fresh registry-consumer evidence. Download the [independent brand kit](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/naeil-brand-1.1.1.zip) for SVG/PNG/icons and non-React usage. See the [changelog](CHANGELOG.md), [brand usage](docs/design/v2-migration.md#brand-logo-integration-040) and [publication report](https://github.com/naeil-dev/naeil-ui/blob/main/docs/design/naeil-brand-0.4.0-publication.md).
 
+Choose the shared application composition before building a header or footer:
+
+| Application need | Shared component |
+| --- | --- |
+| Actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
+| A product's own menu | `Navigation` from `@naeil/ui/ui` |
+| Full or compact application footer | `SiteFooter` from `@naeil/ui/ui` |
+| Existing Next/next-intl integration | Preserve `Nav` / `Footer` compatibility adapters |
+
+Supply application routing, guards, authentication and menu data through adapters and slots. Keep the shared menu, mobile sheet, controls and footer implementation in the package. The [application layout guide](docs/components/application-layout.md) provides a starter and consumer-agent instructions. Header, main and footer share a 1600px maximum frame with `clamp(16px, 2.4vw, 40px)` gutters; use `ui-app-frame` on main and keep 640px reading/settings or 480px short-form sections inside it.
+
 Import primitives from the dedicated entrypoint:
 
 ```tsx
@@ -66,7 +75,7 @@ Shared CSS follows the OS theme unless the document root has `class="light"` or
 
 The [component guides](docs/components/README.md) cover exact APIs, state composition and accessibility responsibilities. Each has a built Storybook Docs page and runnable Usage example. The [consumer guide](docs/design/v2-migration.md) covers peer dependencies, fonts, themes, density, Select versus DropdownMenu, overrides, and layout ownership. Fonts are delivered by the consumer; shared CSS does not fetch them automatically. `/ui`, `/utils` and the opt-in `/naeil-header` work without Next.js. The legacy root remains a framework compatibility entry with static Next/next-intl imports; install those optional peers when using it, Nav, Footer or i18n/routing. ThemeProvider/controls and Toaster retain the React library next-themes. Shared deep imports use the exact [allowlist and migration](docs/design/v2-migration.md#03-package-boundary); website-only paths belong in your application.
 
-For the actual naeil.dev branded header, import `NaeilHeader` from `@naeil/ui/naeil-header`; generic `Navigation` from `/ui` remains available for different product menus. The whole header owns its catalog, header translations, controls and responsive styles. Supply routing/dirty guards, an existing next-themes provider and real authentication through its props instead of copying the header. Its five decorative project images reference official `naeil.dev` URLs and require network access; their bytes are excluded and unresolved redistribution provenance remains in [third-party notices](THIRD_PARTY_NOTICES.md). See [NaeilHeader](docs/components/naeil-header.md) for the fixed frame, supported locales and adapter contract.
+For the actual naeil.dev branded header, import `NaeilHeader` from `@naeil/ui/naeil-header`; generic `Navigation` from `/ui` remains available for different product menus. The whole header owns its catalog, header translations, controls and responsive styles. Supply routing/dirty guards, an existing next-themes provider and real authentication through its props instead of copying the header. Its five decorative project images reference official `naeil.dev` URLs and require network access; their bytes are excluded and unresolved redistribution provenance remains in [third-party notices](THIRD_PARTY_NOTICES.md). See [NaeilHeader](docs/components/naeil-header.md) for fixed positioning, the shared frame, supported locales and adapter contract.
 
 ## Develop the shared UI
 
@@ -83,7 +92,7 @@ Storybook uses the actual public components with simulated example data. It need
 ```sh
 pnpm build:pkg
 pnpm pack --pack-destination /tmp
-# In your consumer app: pnpm add /tmp/naeil-ui-0.5.0.tgz
+# In your consumer app: pnpm add /tmp/naeil-ui-0.6.0.tgz
 ```
 
 | Command | Purpose |
@@ -95,7 +104,7 @@ pnpm pack --pack-destination /tmp
 | `pnpm build:pkg` / `pnpm check:package` | Build package / inspect package boundary and independently install/build packed React + Next consumers |
 | `pnpm dev` / `pnpm build` | Brand/example website development / build |
 
-A [reusable React consumer example](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/examples/react/README.md) shows a settings form. [Release policy](docs/package-release.md) and [changelog](CHANGELOG.md) distinguish implementation, publication and deployment. CI verifies the package and separate website/Storybook. Downloadable preview artifacts include notices and local fonts. The current local Storybook build contains 17 Docs pages (15 UI families and Brand / Logo plus NaeilHeader), including the whole-header Usage and JapaneseApplication examples. This does not establish a new hosted deployment. [Hosted Docs](https://naeil-dev.github.io/naeil-ui/) were last verified for 0.4.0 with Brand / Logo alongside the 13 primitive families: the [2026-10-11 Pages run](https://github.com/naeil-dev/naeil-ui/actions/runs/38114879574) deployed source `e8fe5af`, and [hosted verification](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/hosted-docs-verification.json) records actual Docs/Usage navigation, fonts, artwork and notice checks. The same approved brand is live on [naeil.dev](https://naeil.dev/). See [preview instructions](docs/package-release.md#storybook-preview-artifact) and [support limits](docs/design/public-ui-support.md). Native/manual platform acceptance and adoption in a real consumer product remain open.
+A [reusable React consumer example](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react) composes the packaged header, a settings form and footer. [Release policy](docs/package-release.md) and [changelog](CHANGELOG.md) distinguish implementation, publication and deployment. CI verifies the package and separate website/Storybook. Downloadable preview artifacts include notices and local fonts. The current local Storybook build contains 17 Docs pages (15 UI families and Brand / Logo plus NaeilHeader), including the whole-header Usage and JapaneseApplication examples. This does not establish a new hosted deployment. [Hosted Docs](https://naeil-dev.github.io/naeil-ui/) have recorded [0.5.0 verification](https://github.com/naeil-dev/naeil-ui/releases/download/v0.5.0/hosted-docs-verification.json). The current release record identifies the subsequent deployed source and its fresh checks. The same approved brand is live on [naeil.dev](https://naeil.dev/). See [preview instructions](docs/package-release.md#storybook-preview-artifact) and [support limits](docs/design/public-ui-support.md). Native/manual platform acceptance and adoption in a real consumer product remain open.
 
 Read [DESIGN.md](DESIGN.md) before shared UI changes. Numeric values live in `src/tokens/`; generated CSS is not edited by hand. Shared styles live in `src/styles/`, site-only styles in `src/app/`. Hero art, 3D scenes, cursor effects, and site content belong to the example website.
 

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
+};