@naeil/ui 0.7.2 → 0.8.0

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

@@ -1,5 +1,7 @@
 "use client";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,9 +17,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { UserRound } from "lucide-react";
+import { useContext, useRef } from "react";
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuItem } from "./ui/dropdown-menu.js";
+import { NavigationSheetAction } from "./ui/navigation.js";
 const 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" },
@@ -26,10 +31,18 @@ const labels = {
 const 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",
       {
@@ -42,24 +55,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
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 export {

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { NavigationProps, NavigationLinkProps, NavigationLink, NavigationLinkComponent } from './ui/navigation.js';
+import { NavigationProps, NavigationItem, NavigationLinkProps, NavigationLink, NavigationLinkComponent } from './ui/navigation.js';
 import { NaeilHeaderLocale } from './naeil-header-content.js';
 export { NaeilHeaderAccount, NaeilHeaderAccountControl, NaeilHeaderAccountControlProps } from './naeil-header-account.js';
 
@@ -10,6 +10,12 @@ interface NaeilHeaderProps extends Omit<NavigationProps, "brand" | "items" | "to
     resolveHref?: (path: string) => string;
     brandHref?: string;
     brandSlot?: ReactNode;
+    /** Ignored when brandSlot replaces the complete brand content. */
+    brandSuffix?: string;
+    /** After the brand link, outside it; rendered once at every width. */
+    statusSlot?: ReactNode;
+    /** Product menu data, after catalog/blog and before flat subNav links. */
+    appNavigation?: NavigationItem[];
     brandLinkProps?: Omit<NavigationLinkProps, "href" | "children">;
     /** Omit when the application does not support changing its UI language. */
     onLocaleChange?: (locale: NaeilHeaderLocale) => void;
@@ -48,6 +54,6 @@ declare function NaeilHeaderLocaleControl({ locale, onLocaleChange }: {
     onLocaleChange: (locale: NaeilHeaderLocale) => void;
 }): react_jsx_runtime.JSX.Element;
 /** One complete, opt-in branded composition shared by naeil.dev and applications. */
-declare function NaeilHeader({ locale, resolveHref, brandHref, brandSlot, brandLinkProps, brandLinkComponent, onLocaleChange, authSlot, toolbarSlot, projects, projectsExternal, translations, showProjects, showBlog, subNav, currentProjectKey, currentProjectHref, labels, Link, currentHref, onNavigate, className, containerClassName, ...props }: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
+declare function NaeilHeader({ locale, resolveHref, brandHref, brandSlot, brandSuffix, statusSlot, appNavigation, brandLinkProps, brandLinkComponent, onLocaleChange, authSlot, toolbarSlot, projects, projectsExternal, translations, showProjects, showBlog, subNav, currentProjectKey, currentProjectHref, labels, Link, currentHref, onNavigate, className, containerClassName, ...props }: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
 
 export { NaeilHeader, NaeilHeaderLocale, NaeilHeaderLocaleControl, type NaeilHeaderProps, NaeilHeaderThemeControl };

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

@@ -72,7 +72,7 @@ function NaeilHeaderLocaleControl({ locale, onLocaleChange }) {
         children: /* @__PURE__ */ jsx(SelectValue, { children: locale.toUpperCase() })
       }
     ),
-    /* @__PURE__ */ jsx(SelectContent, { align: "end", children: headerLocales.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, className: "min-h-11", lang: value, children: headerLocaleNames[value] }, value)) })
+    /* @__PURE__ */ jsx(SelectContent, { align: "end", "data-naeil-chrome": "", "data-naeil-locale-menu": "", lang: locale, children: headerLocales.map((value) => /* @__PURE__ */ jsx(SelectItem, { value, className: "min-h-11", lang: value, children: headerLocaleNames[value] }, value)) })
   ] });
 }
 const NativeLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
@@ -82,6 +82,9 @@ function NaeilHeader(_a) {
     resolveHref = (path) => `https://naeil.dev/${locale}${path === "/" ? "" : path}`,
     brandHref,
     brandSlot,
+    brandSuffix,
+    statusSlot,
+    appNavigation,
     brandLinkProps,
     brandLinkComponent,
     onLocaleChange,
@@ -106,6 +109,9 @@ function NaeilHeader(_a) {
     "resolveHref",
     "brandHref",
     "brandSlot",
+    "brandSuffix",
+    "statusSlot",
+    "appNavigation",
     "brandLinkProps",
     "brandLinkComponent",
     "onLocaleChange",
@@ -148,41 +154,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__ */ jsx("div", { "data-app-toolbar": true, className: "naeil-header-controls", children: toolbarSlot !== void 0 ? toolbarSlot : /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(NaeilHeaderThemeControl, { locale }),
-    onLocaleChange && /* @__PURE__ */ jsx(NaeilHeaderLocaleControl, { locale, onLocaleChange }),
-    authSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "naeil-header-separator" }),
-      authSlot
-    ] })
-  ] }) });
+  const toolbar = /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-app-toolbar": true,
+      className: "naeil-header-controls",
+      "data-naeil-chrome": toolbarSlot === void 0 ? "" : void 0,
+      lang: toolbarSlot === void 0 ? locale : void 0,
+      children: toolbarSlot !== void 0 ? toolbarSlot : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(NaeilHeaderThemeControl, { locale }),
+        onLocaleChange && /* @__PURE__ */ jsx(NaeilHeaderLocaleControl, { locale, onLocaleChange }),
+        authSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "naeil-header-separator" }),
+          authSlot
+        ] })
+      ] })
+    }
+  );
+  const logo = /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block", label: null });
+  const brand = /* @__PURE__ */ jsx(
+    BrandLink,
+    __spreadProps(__spreadValues({
+      href: brandDestination,
+      "data-app-brand": true,
+      "aria-label": brandSlot == null ? ".naeil" : void 0
+    }, brandProps), {
+      onClick: (event) => {
+        onBrandClick == null ? void 0 : onBrandClick(event);
+        onNavigate == null ? void 0 : onNavigate(event, { id: "brand", href: brandDestination, label: ".naeil" });
+      },
+      children: brandSlot != null ? brandSlot : brandSuffix ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        logo,
+        /* @__PURE__ */ jsx("span", { className: "naeil-header-brand-suffix", children: brandSuffix })
+      ] }) : logo
+    })
+  );
   return /* @__PURE__ */ jsx(
     Navigation,
     __spreadProps(__spreadValues({}, props), {
       "data-global-header": true,
       "data-naeil-header": true,
+      "data-naeil-chrome": "",
+      lang: locale,
       "data-naeil-ui-version": uiRelease.version,
       "data-naeil-ui-contract": uiRelease.contractVersion,
       Link,
       currentHref,
       onNavigate,
-      brand: /* @__PURE__ */ jsx(
-        BrandLink,
-        __spreadProps(__spreadValues({
-          href: brandDestination,
-          "data-app-brand": true,
-          "aria-label": brandSlot == null ? ".naeil" : void 0
-        }, brandProps), {
-          onClick: (event) => {
-            onBrandClick == null ? void 0 : onBrandClick(event);
-            onNavigate == null ? void 0 : onNavigate(event, { id: "brand", href: brandDestination, label: ".naeil" });
-          },
-          children: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block", label: null })
-        })
-      ),
+      brand: statusSlot != null ? /* @__PURE__ */ jsxs("div", { className: "naeil-header-brand-row", children: [
+        brand,
+        statusSlot
+      ] }) : brand,
       items: [
         ...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: projectLinks.length > 1 ? 2 : 1 }] : [],
         ...showBlog ? [{ id: "blog", label: (_c = translations == null ? void 0 : translations.blog) != null ? _c : content.nav.blog, href: resolveHref("/blog"), external: projectsExternal }] : [],
+        ...appNavigation != null ? appNavigation : [],
         ...(subNav != null ? subNav : []).map((item) => __spreadProps(__spreadValues({}, item), { id: item.href }))
       ],
       labels: labels != null ? labels : { navigation: content.nav.navigation, menu: content.nav.menu, close: content.nav.closeMenu },

package/dist/source/components/ui/navigation.d.ts

@@ -38,11 +38,17 @@ interface NavigationProps extends Omit<react.ComponentPropsWithoutRef<"header">,
     toolbar?: react.ReactNode;
     mobileToolbar?: react.ReactNode;
     mobileFooter?: react.ReactNode;
+    mobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
     /** Use the same product-owned frame class on header, footer and main. */
     containerClassName?: string;
     /** Preserve modified clicks; applications may preventDefault for client routing/guards. */
     onNavigate?: (event: react.MouseEvent<HTMLAnchorElement>, item: NavigationLink) => void;
 }
-declare function Navigation({ brand, items, labels, Link, currentHref, toolbar, mobileToolbar, mobileFooter, containerClassName, onNavigate, className, ...props }: NavigationProps): react_jsx_runtime.JSX.Element;
+declare const NavigationSheetAction: react.Context<((action: () => void) => {
+    menuClosed: () => void;
+    cancel: () => void;
+}) | undefined>;
+declare function Navigation({ brand, items, labels, Link, currentHref, toolbar, mobileToolbar, mobileFooter, mobileOpen: controlledOpen, onMobileOpenChange, containerClassName, onNavigate, className, ...props }: NavigationProps): react_jsx_runtime.JSX.Element;
 
-export { Navigation, type NavigationGroup, type NavigationItem, type NavigationLink, type NavigationLinkComponent, type NavigationLinkProps, type NavigationProps };
+export { Navigation, type NavigationGroup, type NavigationItem, type NavigationLink, type NavigationLinkComponent, type NavigationLinkProps, type NavigationProps, NavigationSheetAction };

package/dist/source/components/ui/navigation.js

@@ -40,13 +40,15 @@ const NativeLink = React.forwardRef(
     return /* @__PURE__ */ jsx("a", __spreadValues({ ref }, props));
   }
 );
+const NavigationSheetAction = React.createContext(void 0);
 function DesktopGroup({
   item,
   active,
   open,
   anotherGroupOpen,
   onOpenChange,
-  children
+  children,
+  chrome
 }) {
   var _a;
   const hoverOpened = React.useRef(false);
@@ -125,7 +127,7 @@ function DesktopGroup({
         ),
         /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
           Popover.Content,
-          {
+          __spreadProps(__spreadValues({}, chrome), {
             ref: panel,
             "data-slot": "navigation-popover",
             className: "ui-navigation-popover ui-popup",
@@ -151,7 +153,7 @@ function DesktopGroup({
                 event.preventDefault();
             },
             children: /* @__PURE__ */ jsx("nav", { "aria-label": item.label, className: "ui-navigation-menu-grid", children })
-          }
+          })
         ) })
       ]
     }
@@ -167,6 +169,8 @@ function Navigation(_a) {
     toolbar,
     mobileToolbar,
     mobileFooter,
+    mobileOpen: controlledOpen,
+    onMobileOpenChange,
     containerClassName,
     onNavigate,
     className
@@ -179,18 +183,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;
@@ -200,7 +261,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;
@@ -220,8 +281,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__ */ jsx("span", { className: "ui-navigation-icon", "aria-hidden": "true", children: item.icon }),
@@ -256,6 +319,7 @@ function Navigation(_a) {
               (item) => "items" in item ? /* @__PURE__ */ jsx(
                 DesktopGroup,
                 {
+                  chrome,
                   item,
                   active: item.items.some(active),
                   open: openGroup === item.id,
@@ -264,7 +328,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
@@ -293,12 +357,26 @@ function Navigation(_a) {
             ),
             /* @__PURE__ */ jsxs(
               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();
@@ -325,16 +403,34 @@ function Navigation(_a) {
                         (item) => "items" in item ? /* @__PURE__ */ jsxs("section", { "aria-label": item.label, children: [
                           /* @__PURE__ */ jsx("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__ */ jsx("div", { className: "ui-navigation-mobile-toolbar", children: mobileToolbar != null ? mobileToolbar : toolbar }),
+                  (mobileToolbar != null ? mobileToolbar : toolbar) && /* @__PURE__ */ jsx("div", { className: "ui-navigation-mobile-toolbar", children: /* @__PURE__ */ jsx(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__ */ jsx("div", { className: "ui-navigation-mobile-footer", children: mobileFooter })
                 ]
-              }
+              })
             )
           ] })
         ] })
@@ -343,5 +439,6 @@ function Navigation(_a) {
   );
 }
 export {
-  Navigation
+  Navigation,
+  NavigationSheetAction
 };

package/dist/source/lib/ui-release.d.ts

@@ -1,5 +1,5 @@
 declare const uiRelease: {
-    readonly version: "0.7.2";
+    readonly version: "0.8.0";
     readonly contractVersion: "1";
 };
 

package/dist/source/lib/ui-release.js

@@ -1,4 +1,4 @@
-const uiRelease = { version: "0.7.2", contractVersion: "1" };
+const uiRelease = { version: "0.8.0", contractVersion: "1" };
 export {
   uiRelease
 };

package/docs/components/application-layout.md

@@ -1,6 +1,6 @@
 # Application frame and shared navigation/footer
 
-This maintained guide covers **published and registry-verified @naeil/ui 0.7.1**, combining canonical footer/release identity and shared account presentation with the published 0.6.0 frame. Install exact `@naeil/ui@0.7.1` from npm; hosted Docs and service activation have separate receipts. See [release identities and status](../package-release.md#publication-and-deployment) and [consumer setup](../design/v2-migration.md) for CSS, Tailwind sources and fonts.
+The published registry baseline is **@naeil/ui 0.7.2**; the new Home profile is an **unpublished 0.8.0 candidate**. Install exact `@naeil/ui@0.7.2` for published consumers; hosted Docs and service activation have separate receipts. See [release identities and status](../package-release.md#publication-and-deployment) and [consumer setup](../design/v2-migration.md) for CSS, Tailwind sources and fonts.
 
 ## Choose the shared composition first
 
@@ -8,7 +8,8 @@ This maintained guide covers **published and registry-verified @naeil/ui 0.7.1**
 | --- | --- |
 | The actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
 | Owned-service login/account/logout presentation | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header` in `authSlot` |
-| A product's own menu | `Navigation` from `@naeil/ui/ui` |
+| Owned naeil service with product menu data (0.8.0 candidate) | Complete `NaeilHeader`, with `appNavigation`, catalog/blog hidden, optional `brandSuffix` and `statusSlot` |
+| A different product menu without canonical naeil chrome | `Navigation` from `@naeil/ui/ui` |
 | Owned naeil service footer | `NaeilFooter` from `@naeil/ui/naeil-footer` |
 | Different product footer or explicit content override | `SiteFooter` from `@naeil/ui/ui` |
 | An existing Next/next-intl consumer | Keep its `Nav` / `Footer` adapters |
@@ -78,7 +79,9 @@ export function ApplicationLayout({ children, locale, Link, currentHref,
 
 `NaeilHeader` is fixed; reserve its 65px height and account for it in sticky areas and focus/anchor scroll margins. Default destinations are official naeil.dev URLs. Preserve routing/unsaved-change guards using the [header contract](naeil-header.md) and [footer interception contract](naeil-footer.md); a Link adapter must handle absolute official and GitHub destinations as well as local routes. Only pass `onLocaleChange` when the application supports its complete language set.
 
-For a different product menu, use the [generic Navigation composition](navigation.md) with the same main/footer structure. Generic Navigation is in document flow by default and needs no fixed-header clearance. The [standalone React example](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react) exercises the installed header, narrow form and SiteFooter together.
+For owned naeil product navigation, keep the whole header and pass menu data through `appNavigation`; see the [Home profile and host conditions](naeil-header.md#host-typography-and-mobile-handoff-080-candidate). `mobileOpen`/`onMobileOpenChange` can coordinate the sheet with a consumer confirmation, while busy state and request locking remain above the header. For a different product menu without canonical chrome, use the [generic Navigation composition](navigation.md) with the same main/footer structure. Generic Navigation is in document flow by default and needs no fixed-header clearance. The [standalone React example](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react) exercises the installed header, narrow form and SiteFooter together.
+
+An empty desktop menu preserves B1's limitation: resizing alone leaves the sheet open; Escape/close/overlay/route change dismiss it. Controlled-mobile account callbacks wait for both closing layers and their focus handoff; desktop and uncontrolled-mobile account callbacks retain B1's selection-time behavior. A consumer confirmation owns cancellation focus, including a visible desktop account fallback after resize.
 
 ## Deliberate overrides
 
@@ -119,7 +122,7 @@ Owned-service checks also verify canonical header/footer destinations, rendered
 
 A blanket ban on `<header>`, `<nav>` or `<footer>` would also reject valid section landmarks and adapters. Review the root composition and its rendered output instead. This repository checks packed React/Next examples; external applications still need their own upgrades, adapter migrations and CI. Publication and deployment are separate work.
 
-See [canonical footer content and save interception](naeil-footer.md). Version 0.7.1 includes package/contract identity from the unpublished 0.7.0 candidate; registry publication, hosted Docs and per-service operational rollout have separate receipts.
+See [canonical footer content and save interception](naeil-footer.md). Version 0.7.2 includes package/contract identity; registry publication, hosted Docs and per-service operational rollout have separate receipts.
 
 ## Shared naeil.dev login (services on `*.naeil.dev`)