@naeil/ui 0.7.2 → 0.9.0

package/CHANGELOG.md

@@ -1,6 +1,22 @@
 # Changelog
 
-## 0.7.2 — retired project catalog (candidate)
+## 0.9.0 — page-root scrollbar reservation
+
+- Reserve one classic scrollbar gutter at the document root through both package CSS paths; overlay scrollbars reserve no space. The root `data-naeil-scrollbar-gutter="auto"` opt-out disables reservation and shared lock correction together.
+- Remove duplicate Radix body margin/gap compensation under the reserved root without changing scroll prevention, modal focus or cleanup. Preserve all frame, typography and spacing tokens.
+- Document the existing Japanese 320px classic signed-out login toolbar wrap, repair comparison capture ordering and verify real clean React/Next CSS consumers against frozen 0.8.0. See the [adopted acceptance contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md). Publication, tags, main/site merge and consumer deployments require separate approval.
+
+## 0.8.0 — canonical Home chrome (published 2026-10-28)
+
+Published to npm with dist-tag `next`; `latest` remained 0.7.2 at the 2026-10-29 verification. Frozen source/tag: `3f708e27d05212af7f7a5be769f13f871e8d10c7`; archive SHA-256: `6feb5a8cd50265ace584a0855432683b4127119377e08235282eaebd27081084` (139 files). Hosted Docs and service deployments require separate receipts; see the [release policy](docs/package-release.md#publication-and-deployment).
+
+- Add `appNavigation`, `brandSuffix` and `statusSlot` for complete owned-service header compositions, plus controlled/observer mobile-sheet state on NaeilHeader and Navigation.
+- Isolate canonical chrome typography from host styles and preserve mobile account/confirmation focus handoffs. Keep existing imports, slots, default catalog and consumer routing/save guards.
+- Retain chrome contract version 1 and verify the Home Workspace/LoginGate profiles against the canonical 0.7.2 baseline. See [NaeilHeader](docs/components/naeil-header.md) for API and compatibility limits.
+
+## 0.7.2 — retired project catalog (published)
+
+Published to npm; `latest=0.7.2` at the 2026-10-29 verification. Source/tag: `40a3928e24cd2f0141be3e605eed0a75260938fd`. Registry, hosted Docs and service activation remain separate receipts.
 
 - 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.

package/DESIGN.md

@@ -112,9 +112,13 @@ Demonstrate the system in three neutral compositions: a settings form, a selecta
 
 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.
 
+The page root reserves scrollbar space. Shared full-page frames use `html { scrollbar-gutter: stable; }`, with one scrollbar-side gutter in classic mode and no reserved space in overlay mode. Header, main and footer use the resulting available page width. Changing page length or opening and closing a scroll-locking surface MUST NOT move those frames or their content horizontally. A consumer using a different document scroll policy MUST declare the documented root opt-out and own that policy consistently across routes.
+
+The 0.9.0 candidate implements this default once in `components.css`, through either `globals.css` or `theme.css + components.css`. Theme-only/JS-only imports do not set it. `<html data-naeil-scrollbar-gutter="auto">` opts out of both the root reservation and its Radix duplicate-compensation correction before first paint. The default profile is LTR with zero body edge spacing; custom scrollers, body margins or dependency helper classes require consumer integration/opt-out. Unsupported browsers retain existing scroll-lock compensation. See the [adopted frame contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md) and [consumer override guidance](docs/components/application-layout.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).
+Application navigation and footer must use the shared compositions: complete `NaeilHeader` with `NaeilFooter` for owned naeil services, supplying product menu data through `appNavigation`; generic `Navigation`/`SiteFooter` for a different product without canonical naeil chrome. 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.
 

package/README.md

@@ -2,7 +2,7 @@
 
 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).
+**Version 0.9.0 adds the shared page-root scrollbar reservation and scroll-lock correction.** Use an exact version with verified registry publication and archive identity. At the 2026-10-29 verification, the published 0.8.0 archive matched frozen SHA-256 `6feb5a8cd50265ace584a0855432683b4127119377e08235282eaebd27081084` (139 files, source `3f708e27d05212af7f7a5be769f13f871e8d10c7`); tags were `latest=0.7.2`, `next=0.8.0`. Current publication, hosted Docs and per-service deployment have separate receipts in the [release policy](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:
 
@@ -15,13 +15,13 @@ This repository also contains the **naeil.dev brand/example website** and an **o
 
 ## Use the UI
 
-Use React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. Install the verified registry release:
+Use React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. The installation example targets 0.9.0; run it after verifying that exact version's registry publication:
 
 ```sh
-pnpm add --save-exact @naeil/ui@0.7.1
+pnpm add --save-exact @naeil/ui@0.9.0
 ```
 
-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 [npm 0.8.0 archive](https://registry.npmjs.org/@naeil/ui/-/ui-0.8.0.tgz) is byte-identical to its frozen release archive. Bundled guides record the preparation snapshot; maintained guides record later publication outcomes. For local development, `pnpm build:pkg` and `npm pack --ignore-scripts --pack-destination /tmp` produce `/tmp/naeil-ui-0.9.0.tgz` from the checked-out source. Use the exact reviewed archive for release verification; later source or guide changes require a new freeze. 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.
 
@@ -34,11 +34,11 @@ Choose the shared application composition before building a header or footer:
 | 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` |
+| A different product without canonical naeil chrome | `Navigation` 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 |
 
-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.
+Pair the complete `NaeilHeader` and `NaeilFooter` in owned services, including product menus via `appNavigation`. 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:
 

package/dist/{chunk-7JBLPGZ4.js → chunk-JDHGKM25.js}

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

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-MGCCKOGU.js → chunk-XRO3NJAB.js}

@@ -2,7 +2,7 @@
 import {
   Logo,
   uiRelease
-} from "./chunk-7JBLPGZ4.js";
+} from "./chunk-JDHGKM25.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,
@@ -177,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" },
@@ -186,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",
       {
@@ -202,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
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 
@@ -254,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));
@@ -264,6 +296,9 @@ function NaeilHeader(_a) {
     resolveHref = (path) => `https://naeil.dev/${locale}${path === "/" ? "" : path}`,
     brandHref,
     brandSlot,
+    brandSuffix,
+    statusSlot,
+    appNavigation,
     brandLinkProps,
     brandLinkComponent,
     onLocaleChange,
@@ -288,6 +323,9 @@ function NaeilHeader(_a) {
     "resolveHref",
     "brandHref",
     "brandSlot",
+    "brandSuffix",
+    "statusSlot",
+    "appNavigation",
     "brandLinkProps",
     "brandLinkComponent",
     "onLocaleChange",
@@ -330,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: 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/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';

package/dist/components/index.js

@@ -2,10 +2,10 @@
 import {
   NaeilHeader,
   headerLocales
-} from "../chunk-MGCCKOGU.js";
+} from "../chunk-XRO3NJAB.js";
 import {
   Logo
-} from "../chunk-7JBLPGZ4.js";
+} from "../chunk-JDHGKM25.js";
 import {
   SiteFooter
 } from "../chunk-HSTDPY56.js";
@@ -15,7 +15,7 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger
-} from "../chunk-QQQQZEPV.js";
+} from "../chunk-KPE4KKYM.js";
 import {
   __objRest,
   __spreadProps,

package/dist/components/naeil-footer.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SiteFooterProps } from '../site-footer-vXDa_6yr.js';
+import { S as SiteFooterProps } from '../site-footer-s113FZgC.js';
 import { N as NaeilHeaderLocale } from '../naeil-header-content-BvISJ4RV.js';
 import 'react';
-import '../navigation-CgPeL9tF.js';
+import '../navigation-D8N1tMTu.js';
 
 type NaeilFooterLocale = NaeilHeaderLocale;
 interface NaeilFooterProps extends Omit<SiteFooterProps, "brand" | "description" | "groups"> {

package/dist/components/naeil-footer.js

@@ -3,7 +3,7 @@
 import {
   Logo,
   uiRelease
-} from "../chunk-7JBLPGZ4.js";
+} from "../chunk-JDHGKM25.js";
 import {
   SiteFooter
 } from "../chunk-HSTDPY56.js";
@@ -44,6 +44,8 @@ function NaeilFooter(_a) {
       Link,
       onNavigate,
       "data-naeil-footer": true,
+      "data-naeil-chrome": "",
+      lang: locale,
       "data-naeil-ui-version": uiRelease.version,
       "data-naeil-ui-contract": uiRelease.contractVersion,
       brand: /* @__PURE__ */ jsx(