@naeil/ui 0.7.1 → 0.8.0

package/dist/components/index.js

@@ -2,10 +2,10 @@
 import {
   NaeilHeader,
   headerLocales
-} from "../chunk-OLKTEYLS.js";
+} from "../chunk-ULZPJI5X.js";
 import {
   Logo
-} from "../chunk-VWIUN35X.js";
+} from "../chunk-WA5D7UI2.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-VWIUN35X.js";
+} from "../chunk-WA5D7UI2.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(

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { b as NavigationLinkComponent, a as NavigationProps, c as NavigationLinkProps, N as NavigationLink } from '../navigation-CgPeL9tF.js';
+import { b as NavigationLinkComponent, a as NavigationProps, c as NavigationItem, d as NavigationLinkProps, N as NavigationLink } from '../navigation-D8N1tMTu.js';
 import { N as NaeilHeaderLocale } from '../naeil-header-content-BvISJ4RV.js';
 
 type NaeilHeaderAccount = {
@@ -29,6 +29,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;
@@ -67,6 +73,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, type NaeilHeaderAccount, NaeilHeaderAccountControl, type NaeilHeaderAccountControlProps, NaeilHeaderLocale, NaeilHeaderLocaleControl, type NaeilHeaderProps, NaeilHeaderThemeControl };

package/dist/components/naeil-header.js

@@ -5,9 +5,9 @@ import {
   NaeilHeaderAccountControl,
   NaeilHeaderLocaleControl,
   NaeilHeaderThemeControl
-} from "../chunk-OLKTEYLS.js";
-import "../chunk-VWIUN35X.js";
-import "../chunk-QQQQZEPV.js";
+} from "../chunk-ULZPJI5X.js";
+import "../chunk-WA5D7UI2.js";
+import "../chunk-KPE4KKYM.js";
 import "../chunk-JBTDRVZ7.js";
 export {
   NaeilHeader,

package/dist/components/ui/index.d.ts

@@ -4,8 +4,8 @@ import { Avatar as Avatar$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1,
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ToasterProps } from 'sonner';
-export { d as Navigation, e as NavigationGroup, f as NavigationItem, N as NavigationLink, b as NavigationLinkComponent, c as NavigationLinkProps, a as NavigationProps } from '../../navigation-CgPeL9tF.js';
-export { a as SiteFooter, S as SiteFooterProps } from '../../site-footer-vXDa_6yr.js';
+export { e as Navigation, f as NavigationGroup, c as NavigationItem, N as NavigationLink, b as NavigationLinkComponent, d as NavigationLinkProps, a as NavigationProps } from '../../navigation-D8N1tMTu.js';
+export { a as SiteFooter, S as SiteFooterProps } from '../../site-footer-s113FZgC.js';
 
 declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
     size?: "default" | "sm" | "lg";

package/dist/components/ui/index.js

@@ -33,7 +33,7 @@ import {
   SelectValue,
   badgeVariants,
   buttonVariants
-} from "../../chunk-QQQQZEPV.js";
+} from "../../chunk-KPE4KKYM.js";
 import {
   __objRest,
   __spreadProps,

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

@@ -1 +1 @@
-export declare const uiRelease: Readonly<{version: "0.7.1"; contractVersion: "1"}>;
+export declare const uiRelease: Readonly<{version: "0.8.0"; contractVersion: "1"}>;

package/dist/lib/ui-release.js

@@ -1 +1 @@
-export const uiRelease = Object.freeze({"version":"0.7.1","contractVersion":"1"});
+export const uiRelease = Object.freeze({"version":"0.8.0","contractVersion":"1"});

package/dist/{navigation-CgPeL9tF.d.ts → navigation-D8N1tMTu.d.ts}

@@ -38,11 +38,13 @@ 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 function Navigation({ brand, items, labels, Link, currentHref, toolbar, mobileToolbar, mobileFooter, mobileOpen: controlledOpen, onMobileOpenChange, containerClassName, onNavigate, className, ...props }: NavigationProps): react_jsx_runtime.JSX.Element;
 
-export { type NavigationLink as N, type NavigationProps as a, type NavigationLinkComponent as b, type NavigationLinkProps as c, Navigation as d, type NavigationGroup as e, type NavigationItem as f };
+export { type NavigationLink as N, type NavigationProps as a, type NavigationLinkComponent as b, type NavigationItem as c, type NavigationLinkProps as d, Navigation as e, type NavigationGroup as f };

package/dist/{site-footer-vXDa_6yr.d.ts → site-footer-s113FZgC.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { N as NavigationLink, b as NavigationLinkComponent, a as NavigationProps } from './navigation-CgPeL9tF.js';
+import { N as NavigationLink, b as NavigationLinkComponent, a as NavigationProps } from './navigation-D8N1tMTu.js';
 
 interface SiteFooterProps extends React.ComponentPropsWithoutRef<"footer"> {
     brand?: React.ReactNode;

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

@@ -63,6 +63,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(

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-content.d.ts

@@ -6,35 +6,11 @@ declare const headerLocaleNames: {
     readonly ja: "日本語";
 };
 declare const headerProjects: readonly [{
-    readonly key: "cc";
-    readonly href: "/cc";
-    readonly accent: "oklch(0.704 0.140 181)";
-    readonly icon: "coral";
-    readonly status: "active";
-}, {
-    readonly key: "pkm";
-    readonly href: "/pkm";
-    readonly accent: "oklch(0.702 0.183 293)";
-    readonly icon: "jellyfish";
-    readonly status: "coming";
-}, {
     readonly key: "naeilUi";
     readonly href: "/design";
     readonly accent: "oklch(0.623 0.214 259)";
     readonly icon: "whale";
-    readonly status: "active";
-}, {
-    readonly key: "sa";
-    readonly href: "/sa";
-    readonly accent: "oklch(0.723 0.219 149)";
-    readonly icon: "fish";
-    readonly status: "active";
-}, {
-    readonly key: "babyAgent";
-    readonly href: "/baby-agent";
-    readonly accent: "oklch(0.769 0.188 70.08)";
-    readonly icon: "turtle";
-    readonly status: "coming";
+    readonly status: "active" | "coming";
 }];
 declare const headerContent: {
     readonly en: {

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

@@ -1,40 +1,12 @@
 const headerLocales = ["en", "ko", "ja"];
 const headerLocaleNames = { en: "English", ko: "\uD55C\uAD6D\uC5B4", ja: "\u65E5\u672C\u8A9E" };
 const 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"
   }
 ];
 const headerContent = {

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