@naeil/ui 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,9 +1,18 @@
 # Changelog
 
-## 0.7.1 — account presentation correction (candidate)
+## 0.7.2 — retired project catalog (candidate)
+
+- Narrow the canonical `NaeilHeader` project catalog to naeil-ui. Content Collector, PKM, Sustainability Analyzer and Baby Agent are retired from naeil.dev; their site pages move to `src/app/_archive/` and old URLs temporarily redirect to the project list. The project menu uses one column for a single entry. `projects`, `translations` and `currentProjectKey` overrides are unchanged.
+- Release class `dom`: the standing worker adopts it only through an owner-approved `reviewedMigration` of this exact release; ordinary fix-only patches are unaffected.
+
+## 0.7.1 — canonical service chrome (published 2026-10-23)
+
+Published to npm at `2026-10-23T01:14:11.387Z`; `latest` was verified as `0.7.1`. This first published 0.7.x release includes the unpublished 0.7.0 scope below. Frozen package source and tag `v0.7.1`: `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618`; archive SHA-256: `ecd656c595fd63516417eef58a5e2624d1f1bf928ba0465761292d05502ab3f8`. Independent download and fresh React/Next registry consumers matched the archive and all 139 files, with types, production builds and browser checks passing. Hosted Docs and standing activation require separate receipts; see the [release policy](docs/package-release.md#publication-and-deployment).
 
 - Add canonical `NaeilHeaderAccountControl` for shared login/account/logout presentation while consumers retain session and save guards.
+- Include React-only `NaeilFooter`, canonical full/compact destinations, save-navigation interception and server-safe `/release` package/contract identity from the unpublished 0.7.0 candidate.
 - Preserve existing header slots and imports; include authenticated menu/busy/failure coverage and packed consumer checks.
+- Preserve the approved 1600px/clamp frame, generic Navigation/SiteFooter and legacy Nav/Footer APIs. Bundled guides retain their frozen preparation snapshot; maintained guides and hosted Docs use a separately reviewed source.
 
 ## 0.7.0 — unpublished candidate
 

package/README.md

@@ -2,24 +2,26 @@
 
 React components, semantic design tokens, and shared styles for naeil products. The approved system uses a neutral light/dark palette, Pretendard, 16px controls, comfortable or compact density, purpose-specific content widths, and restrained motion. Radix supplies interaction behavior.
 
+**0.7.1 published and registry-verified — 2026-10-23.** The current published baseline is **0.7.1**. This first published 0.7.x release combines canonical `NaeilFooter`, server-safe `/release` identity and `NaeilHeaderAccountControl`; 0.7.0 remains an unpublished candidate. The frozen package source and `v0.7.1` tag are `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618`. Fresh React/Next registry consumers matched all 139 frozen files and passed types, production builds and browser checks. Maintained guides use separately reviewed source; hosted Docs and standing activation require separate receipts. See the [release policy and receipts](docs/package-release.md#publication-and-deployment).
+
 This repository also contains the **naeil.dev brand/example website** and an **optional agent reference workflow**. Choose the path you need:
 
 | Path | Start here | Tools / keys |
 | --- | --- | --- |
-| Use the UI in an app | [Consumer guide](docs/design/v2-migration.md) | React 19, Tailwind 4; **no Next.js or API keys** for `/ui` or `/naeil-header` |
+| Use the UI in an app | [Consumer guide](docs/design/v2-migration.md) | React 19, Tailwind 4; **no Next.js or API keys** for shared React entries |
 | Develop the shared UI | Commands below and [contributing](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/CONTRIBUTING.md) | Node.js 22+, pnpm; no Supabase or 21st key |
 | Use frontend references with an agent | [Optional workflow setup](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/docs/design/frontend-tooling.md) | Supported agent; Python for bundled helpers; your own 21st key only for optional MCP |
 | Develop the brand/example website | [Site setup](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/docs/site-development.md) | Next.js and a separate Supabase project for site authentication |
 
 ## Use the UI
 
-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:
+Use React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. Install the verified registry release:
 
 ```sh
-pnpm add --save-exact @naeil/ui@0.6.0
+pnpm add --save-exact @naeil/ui@0.7.1
 ```
 
-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 [npm 0.7.1 archive](https://registry.npmjs.org/@naeil/ui/-/ui-0.7.1.tgz) is byte-identical to the frozen release archive. Its bundled guides retain the preparation snapshot; use these maintained instructions for current installation. For local development, `pnpm build:pkg` and `npm pack --ignore-scripts --pack-destination /tmp` produce `/tmp/naeil-ui-0.7.1.tgz`. A fresh pack of maintained source differs from the frozen release archive; use the exact frozen file for release verification. The [0.6.0 release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) retains its archive, publication and deployment evidence.
 
 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.
 
@@ -30,11 +32,13 @@ 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` |
+| Owned-service login, account and logout presentation (0.7.1) | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header`, passed in `authSlot` |
+| Owned naeil service footer (0.7.1) | `NaeilFooter` from `@naeil/ui/naeil-footer` |
 | A product's own menu | `Navigation` from `@naeil/ui/ui` |
-| Full or compact application footer | `SiteFooter` from `@naeil/ui/ui` |
+| Different product footer or deliberate content override | `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.
+Pair `NaeilHeader` and `NaeilFooter` in owned services. Supply application routing, guards, authentication and menu data through adapters and slots. `NaeilHeaderAccountControl` receives session state, a busy flag and the guarded logout callback; keep pending state and its request lock above the header so desktop/mobile copies share them. Keep the shared menu, mobile sheet, account presentation 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:
 
@@ -73,9 +77,9 @@ Mark Japanese content with `lang="ja"`. Keep font OFL notices with redistributed
 
 Shared CSS follows the OS theme unless the document root has `class="light"` or `class="dark"`. For compact spacing, set `data-ui-density="compact"` on that root; omit it for comfortable spacing. Density changes spacing while retaining 16px control text and minimum mobile touch sizes. React apps can also use `ThemeProvider` from `@naeil/ui/components/theme-provider` with `attribute="class"`.
 
-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.
+The [component guides](docs/components/README.md) cover exact APIs, state composition and accessibility responsibilities, with matching Storybook Docs and runnable examples. Canonical footer and account examples live in the existing NaeilHeader/SiteFooter stories. 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`, `/naeil-header`, `/naeil-footer` and `/release` work without Next.js; the last two are included in 0.7.1. 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 fixed positioning, the shared frame, supported locales and adapter contract.
+For the actual naeil.dev branded header, import `NaeilHeader` and `NaeilHeaderAccountControl` 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 state/actions through its props. 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, and [NaeilFooter](docs/components/naeil-footer.md) for canonical destinations and save interception.
 
 ## Develop the shared UI
 
@@ -92,7 +96,8 @@ 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.6.0.tgz
+# In your consumer app: pnpm add /tmp/naeil-ui-0.7.1.tgz
+# This development pack does not replace the frozen release archive.
 ```
 
 | Command | Purpose |
@@ -104,7 +109,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/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.
+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 Storybook source defines 17 Docs pages (15 UI families and Brand / Logo plus NaeilHeader), including Usage, JapaneseApplication, ReferenceFull, ReferenceCompact and AccountStates 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); subsequent deployments require their own source and HTTP 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 retains its documented limits; service adoption and continuous rollout have separate [dated records](https://github.com/naeil-dev/naeil-ui/tree/main/docs/rollout).
 
 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/dist/{chunk-QQQQZEPV.js → chunk-KPE4KKYM.js}

@@ -343,13 +343,15 @@ var NativeLink = React.forwardRef(
     return /* @__PURE__ */ jsx4("a", __spreadValues({ ref }, props));
   }
 );
+var NavigationSheetAction = React.createContext(void 0);
 function DesktopGroup({
   item,
   active,
   open,
   anotherGroupOpen,
   onOpenChange,
-  children
+  children,
+  chrome
 }) {
   var _a;
   const hoverOpened = React.useRef(false);
@@ -428,7 +430,7 @@ function DesktopGroup({
         ),
         /* @__PURE__ */ jsx4(Popover.Portal, { children: /* @__PURE__ */ jsx4(
           Popover.Content,
-          {
+          __spreadProps(__spreadValues({}, chrome), {
             ref: panel,
             "data-slot": "navigation-popover",
             className: "ui-navigation-popover ui-popup",
@@ -454,7 +456,7 @@ function DesktopGroup({
                 event.preventDefault();
             },
             children: /* @__PURE__ */ jsx4("nav", { "aria-label": item.label, className: "ui-navigation-menu-grid", children })
-          }
+          })
         ) })
       ]
     }
@@ -470,6 +472,8 @@ function Navigation(_a) {
     toolbar,
     mobileToolbar,
     mobileFooter,
+    mobileOpen: controlledOpen,
+    onMobileOpenChange,
     containerClassName,
     onNavigate,
     className
@@ -482,18 +486,75 @@ function Navigation(_a) {
     "toolbar",
     "mobileToolbar",
     "mobileFooter",
+    "mobileOpen",
+    "onMobileOpenChange",
     "containerClassName",
     "onNavigate",
     "className"
   ]);
-  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [internalOpen, setInternalOpen] = React.useState(false);
+  const mobileOpen = controlledOpen != null ? controlledOpen : internalOpen;
+  const state = React.useRef({ open: mobileOpen, controlled: controlledOpen !== void 0, onChange: onMobileOpenChange });
+  const mounted = React.useRef(false);
+  const pendingAction = React.useRef(void 0);
+  const cancelAction = React.useCallback(() => {
+    var _a2;
+    clearTimeout((_a2 = pendingAction.current) == null ? void 0 : _a2.timer);
+    pendingAction.current = void 0;
+  }, []);
+  React.useLayoutEffect(() => {
+    const reopening = mobileOpen && !state.current.open;
+    state.current = { open: mobileOpen, controlled: controlledOpen !== void 0, onChange: onMobileOpenChange };
+    if (reopening) cancelAction();
+  });
+  React.useLayoutEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      cancelAction();
+    };
+  }, [cancelAction]);
+  const setMobileOpen = React.useCallback((next, owner) => {
+    var _a2, _b2;
+    if (next) cancelAction();
+    if (next === state.current.open) return;
+    if (pendingAction.current !== owner) cancelAction();
+    if (!state.current.controlled) {
+      state.current.open = next;
+      setInternalOpen(next);
+    }
+    (_b2 = (_a2 = state.current).onChange) == null ? void 0 : _b2.call(_a2, next);
+  }, [cancelAction]);
+  const chrome = "data-naeil-chrome" in props ? { "data-naeil-chrome": "", lang: props.lang } : {};
   const [openGroup, setOpenGroup] = React.useState(null);
   const trigger = React.useRef(null);
   const desktop = React.useRef(null);
+  const sheetContent = React.useRef(null);
+  function settleAction(flow) {
+    if (!mounted.current || pendingAction.current !== flow || state.current.open || !flow.menuClosed || !flow.sheetClosed || flow.timer !== void 0) return;
+    flow.timer = setTimeout(() => {
+      var _a2, _b2;
+      flow.timer = void 0;
+      if (!mounted.current || pendingAction.current !== flow) return;
+      if (state.current.open) {
+        cancelAction();
+        return;
+      }
+      if (!flow.menuClosed || !flow.sheetClosed) return;
+      const target = [trigger.current, (_b2 = (_a2 = desktop.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.querySelector(".ui-navigation-toolbar [data-naeil-account-trigger]")].find((element) => (element == null ? void 0 : element.isConnected) && element.getBoundingClientRect().width && element.getBoundingClientRect().height);
+      cancelAction();
+      if (!target) return;
+      target.focus();
+      flow.action();
+    }, 0);
+  }
+  const previousHref = React.useRef(currentHref);
   React.useEffect(() => {
+    if (previousHref.current === currentHref) return;
+    previousHref.current = currentHref;
     setMobileOpen(false);
     setOpenGroup(null);
-  }, [currentHref]);
+  }, [currentHref, setMobileOpen]);
   React.useEffect(() => {
     const element = desktop.current;
     if (!element || typeof ResizeObserver === "undefined") return;
@@ -503,7 +564,7 @@ function Navigation(_a) {
     });
     observer.observe(element);
     return () => observer.disconnect();
-  }, []);
+  }, [setMobileOpen]);
   const active = (item) => {
     var _a2;
     return (_a2 = item.active) != null ? _a2 : !item.external && item.href === currentHref;
@@ -523,8 +584,10 @@ function Navigation(_a) {
         ),
         onClick: (event) => {
           onNavigate == null ? void 0 : onNavigate(event, item);
-          if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey)
-            close == null ? void 0 : close();
+          if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+            if (close === "mobile") setMobileOpen(false);
+            else if (close === "group") setOpenGroup(null);
+          }
         },
         children: [
           item.icon && /* @__PURE__ */ jsx4("span", { className: "ui-navigation-icon", "aria-hidden": "true", children: item.icon }),
@@ -559,6 +622,7 @@ function Navigation(_a) {
               (item) => "items" in item ? /* @__PURE__ */ jsx4(
                 DesktopGroup,
                 {
+                  chrome,
                   item,
                   active: item.items.some(active),
                   open: openGroup === item.id,
@@ -567,7 +631,7 @@ function Navigation(_a) {
                     (current) => open ? item.id : current === item.id ? null : current
                   ),
                   children: item.items.map(
-                    (child) => link(child, () => setOpenGroup(null), true)
+                    (child) => link(child, "group", true)
                   )
                 },
                 item.id
@@ -596,12 +660,26 @@ function Navigation(_a) {
             ),
             /* @__PURE__ */ jsxs2(
               Dialog.Content,
-              {
+              __spreadProps(__spreadValues({}, chrome), {
+                ref: (element) => {
+                  if (element) sheetContent.current = element;
+                },
                 "data-slot": "navigation-sheet",
                 className: "ui-navigation-sheet ui-popup",
                 "aria-describedby": void 0,
                 onCloseAutoFocus: (event) => {
                   var _a2, _b2;
+                  if (controlledOpen !== void 0 && (!mounted.current || state.current.open)) {
+                    event.preventDefault();
+                    return;
+                  }
+                  const flow = pendingAction.current;
+                  if (flow && event.target === flow.sheet) {
+                    event.preventDefault();
+                    flow.sheetClosed = true;
+                    settleAction(flow);
+                    return;
+                  }
                   if (trigger.current && trigger.current.getBoundingClientRect().width === 0) {
                     event.preventDefault();
                     (_b2 = (_a2 = desktop.current) == null ? void 0 : _a2.querySelector("button, a")) == null ? void 0 : _b2.focus();
@@ -628,16 +706,34 @@ function Navigation(_a) {
                         (item) => "items" in item ? /* @__PURE__ */ jsxs2("section", { "aria-label": item.label, children: [
                           /* @__PURE__ */ jsx4("h3", { className: "ui-navigation-group-label", children: item.label }),
                           item.items.map(
-                            (child) => link(child, () => setMobileOpen(false), true)
+                            (child) => link(child, "mobile", true)
                           )
-                        ] }, item.id) : link(item, () => setMobileOpen(false))
+                        ] }, item.id) : link(item, "mobile")
                       )
                     }
                   ),
-                  (mobileToolbar != null ? mobileToolbar : toolbar) && /* @__PURE__ */ jsx4("div", { className: "ui-navigation-mobile-toolbar", children: mobileToolbar != null ? mobileToolbar : toolbar }),
+                  (mobileToolbar != null ? mobileToolbar : toolbar) && /* @__PURE__ */ jsx4("div", { className: "ui-navigation-mobile-toolbar", children: /* @__PURE__ */ jsx4(NavigationSheetAction.Provider, { value: controlledOpen === void 0 ? void 0 : (action) => {
+                    if (!mounted.current) return { menuClosed: () => {
+                    }, cancel: () => {
+                    } };
+                    cancelAction();
+                    const flow = { action, sheet: sheetContent.current, menuClosed: false, sheetClosed: false };
+                    pendingAction.current = flow;
+                    return {
+                      menuClosed: () => {
+                        if (!mounted.current || pendingAction.current !== flow) return;
+                        flow.menuClosed = true;
+                        setMobileOpen(false, flow);
+                        settleAction(flow);
+                      },
+                      cancel: () => {
+                        if (pendingAction.current === flow) cancelAction();
+                      }
+                    };
+                  }, children: mobileToolbar != null ? mobileToolbar : toolbar }) }),
                   mobileFooter && /* @__PURE__ */ jsx4("div", { className: "ui-navigation-mobile-footer", children: mobileFooter })
                 ]
-              }
+              })
             )
           ] })
         ] })
@@ -894,6 +990,7 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
+  NavigationSheetAction,
   Navigation,
   DropdownMenu,
   DropdownMenuPortal,

package/dist/{chunk-OLKTEYLS.js → chunk-ULZPJI5X.js}

@@ -2,7 +2,7 @@
 import {
   Logo,
   uiRelease
-} from "./chunk-VWIUN35X.js";
+} from "./chunk-WA5D7UI2.js";
 import {
   Badge,
   Button,
@@ -13,12 +13,13 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Navigation,
+  NavigationSheetAction,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue
-} from "./chunk-QQQQZEPV.js";
+} from "./chunk-KPE4KKYM.js";
 import {
   __objRest,
   __spreadProps,
@@ -35,40 +36,12 @@ import { Moon, Sun } from "lucide-react";
 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 = {
@@ -205,6 +178,7 @@ var headerContent = {
 
 // src/components/naeil-header-account.tsx
 import { UserRound } from "lucide-react";
+import { useContext, useRef } from "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" },
@@ -214,10 +188,18 @@ var labels = {
 var NativeLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
 function NaeilHeaderAccountControl({ locale, account, Link = NativeLink }) {
   const text = labels[locale];
+  const handoff = useContext(NavigationSheetAction);
+  const pendingAction = useRef(void 0);
   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: [
+  return /* @__PURE__ */ jsxs(DropdownMenu, { onOpenChange: (open) => {
+    var _a;
+    if (open) {
+      (_a = pendingAction.current) == null ? void 0 : _a.cancel();
+      pendingAction.current = void 0;
+    }
+  }, children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
       "button",
       {
@@ -230,24 +212,46 @@ function NaeilHeaderAccountControl({ locale, account, Link = NativeLink }) {
         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
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "end",
+        className: "w-56 max-w-[calc(100vw-2rem)]",
+        "data-naeil-account-menu": true,
+        "data-naeil-chrome": "",
+        lang: locale,
+        onCloseAutoFocus: (event) => {
+          const flow = pendingAction.current;
+          if (!flow || event.target !== flow.menu) return;
+          event.preventDefault();
+          flow.menu = null;
+          flow.menuClosed();
+        },
+        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: (event) => {
+                if (account.busy) return;
+                if (handoff) {
+                  const menu = event.target.closest("[data-naeil-account-menu]");
+                  if (!(menu == null ? void 0 : menu.isConnected)) return;
+                  pendingAction.current = __spreadProps(__spreadValues({}, handoff(account.onLogout)), { menu });
+                } else account.onLogout();
+              },
+              children: account.busy ? text.busy : text.logout
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 
@@ -282,7 +286,7 @@ function NaeilHeaderLocaleControl({ locale, onLocaleChange }) {
         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)) })
+    /* @__PURE__ */ jsx2(SelectContent, { align: "end", "data-naeil-chrome": "", "data-naeil-locale-menu": "", lang: locale, 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));
@@ -292,6 +296,9 @@ function NaeilHeader(_a) {
     resolveHref = (path) => `https://naeil.dev/${locale}${path === "/" ? "" : path}`,
     brandHref,
     brandSlot,
+    brandSuffix,
+    statusSlot,
+    appNavigation,
     brandLinkProps,
     brandLinkComponent,
     onLocaleChange,
@@ -316,6 +323,9 @@ function NaeilHeader(_a) {
     "resolveHref",
     "brandHref",
     "brandSlot",
+    "brandSuffix",
+    "statusSlot",
+    "appNavigation",
     "brandLinkProps",
     "brandLinkComponent",
     "onLocaleChange",
@@ -358,41 +368,61 @@ function NaeilHeader(_a) {
   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
-    ] })
-  ] }) });
+  const toolbar = /* @__PURE__ */ jsx2(
+    "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__ */ 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
+        ] })
+      ] })
+    }
+  );
+  const logo = /* @__PURE__ */ jsx2(Logo, { variant: "horizontal", size: 28, className: "block", label: null });
+  const 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 : brandSuffix ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+        logo,
+        /* @__PURE__ */ jsx2("span", { className: "naeil-header-brand-suffix", children: brandSuffix })
+      ] }) : logo
+    })
+  );
   return /* @__PURE__ */ jsx2(
     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: /* @__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 })
-        })
-      ),
+      brand: statusSlot != null ? /* @__PURE__ */ jsxs2("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: 2 }] : [],
+        ...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: labels2 != null ? labels2 : { navigation: content.nav.navigation, menu: content.nav.menu, close: content.nav.closeMenu },

package/dist/{chunk-VWIUN35X.js → chunk-WA5D7UI2.js}

@@ -1165,7 +1165,7 @@ function Logo(_a) {
 }
 
 // src/lib/ui-release.ts
-var uiRelease = { version: "0.7.1", contractVersion: "1" };
+var uiRelease = { version: "0.8.0", contractVersion: "1" };
 
 export {
   Logo,

package/dist/components/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { N as NavigationLink, a as NavigationProps } from '../navigation-CgPeL9tF.js';
-import { S as SiteFooterProps } from '../site-footer-vXDa_6yr.js';
+import { N as NavigationLink, a as NavigationProps } from '../navigation-D8N1tMTu.js';
+import { S as SiteFooterProps } from '../site-footer-s113FZgC.js';
 import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
 import * as React$1 from 'react';
 import { SVGProps } from 'react';