@naeil/ui 0.7.1 → 0.8.0

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.1";
+    readonly version: "0.8.0";
     readonly contractVersion: "1";
 };
 

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

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

package/docs/components/README.md

@@ -1,6 +1,6 @@
 # Component usage guides
 
-These guides include the unpublished **@naeil/ui 0.7.0 candidate**; the last published release is 0.6.0. release identities and publication evidence are recorded in the [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0). [Setup, themes, fonts and shared responsibilities](common.md). Run `pnpm storybook` for the current 17 Docs pages (15 UI and 2 Brand) and choose Docs or Usage. The [hosted Storybook](https://naeil-dev.github.io/naeil-ui/) was last verified for [0.5.0 on 2026-10-15](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0); each subsequent deployment is recorded separately. Select chooses a value; DropdownMenu chooses an action.
+These maintained guides cover **published and registry-verified @naeil/ui 0.7.1**: canonical footer and release identity from the unpublished 0.7.0 candidate, plus shared account presentation. The current published baseline is 0.7.1; see [release policy and identities](../package-release.md#publication-and-deployment). [Setup, themes, fonts and shared responsibilities](common.md). Run `pnpm storybook` for the current 17 Docs pages (15 UI and 2 Brand) and choose Docs or Usage. The [hosted Storybook](https://naeil-dev.github.io/naeil-ui/) has recorded [0.5.0 verification](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0); each subsequent deployment requires its own receipt. Select chooses a value; DropdownMenu chooses an action.
 
 Start application layouts with the [shared navigation/footer selection and frame guide](application-layout.md). It includes a starter, the 1600px frame contract and instructions to place in consumer repositories so agents reuse the shared implementation.
 
@@ -22,8 +22,8 @@ Start application layouts with the [shared navigation/footer selection and frame
 | Navigation | [Navigation](./navigation.md) | UI / Navigation / Usage |
 | SiteFooter | [SiteFooter](./navigation.md) | UI / SiteFooter / Usage |
 | NaeilFooter | [NaeilFooter](./naeil-footer.md) | Brand / NaeilHeader / ReferenceFull, ReferenceCompact |
-| NaeilHeader | [NaeilHeader](./naeil-header.md) | Brand / NaeilHeader / Usage, JapaneseApplication |
+| NaeilHeader and account control | [NaeilHeader](./naeil-header.md) | Brand / NaeilHeader / Usage, JapaneseApplication, AccountStates |
 
 [Field, native radio, Select and action composition](./composition.md) explains consumer state and semantic choices. [Demand decision](../design/component-demand.md) records why these two families were added.
 
-Use opt-in `@naeil/ui/naeil-header` for the actual naeil.dev branded header, with official artwork URL references and consumer-owned routing, theme provider and authentication. Use generic `Navigation` from `/ui` for different product menus. [Navigation / SiteFooter](navigation.md) also documents the compatibility adapters.
+Use opt-in `@naeil/ui/naeil-header` for the actual naeil.dev branded header and its `NaeilHeaderAccountControl` in `authSlot`, paired with `@naeil/ui/naeil-footer` on owned services. Consumers supply routing/save guards, theme providers and authentication state/actions; official artwork remains URL-referenced. Canonical footer and account examples are part of existing stories, without additional Docs families. Use generic `Navigation` and `SiteFooter` from `/ui` for different products. [Navigation / SiteFooter](navigation.md) also documents the compatibility adapters.

package/docs/components/application-layout.md

@@ -1,18 +1,20 @@
 # Application frame and shared navigation/footer
 
-This guide targets the **@naeil/ui 0.7.0 candidate**, including the width update approved on 2026-10-16. Use the matching registry release or tested local archive. See [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
 
 | Application need | Use |
 | --- | --- |
 | The actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
-| A product's own menu | `Navigation` from `@naeil/ui/ui` |
+| Owned-service login/account/logout presentation | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header` in `authSlot` |
+| 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 |
 
-Choose one header per application frame. Supply menu data, links, route guards, authentication and supported locale state through props/slots. Local adapters are appropriate; copies of the menu, responsive sheet, controls or footer implementation are not. Extend the shared component when a reusable behavior is missing.
+Choose one header per application frame. Supply menu data, links, route guards, authentication and supported locale state through props/slots. Owned services pass session state and guarded callbacks to the shared account control. Local adapters are appropriate; copies of the menu, responsive sheet, account presentation or footer implementation are not. Extend the shared component when a reusable behavior is missing.
 
 ## Width contract
 
@@ -39,30 +41,47 @@ This keeps a centered frame from shifting when a classic scrollbar appears. The
 
 ```tsx
 import type { ReactNode } from "react";
-import { NaeilHeader } from "@naeil/ui/naeil-header";
+import { NaeilHeader, NaeilHeaderAccountControl,
+  type NaeilHeaderAccount, type NaeilHeaderProps } from "@naeil/ui/naeil-header";
 import { NaeilFooter } from "@naeil/ui/naeil-footer";
 
 // Render inside the existing next-themes ThemeProvider.
-// Connect Link/onNavigate, locale and authSlot to real application state.
-export function ApplicationLayout({ children }: { children: ReactNode }) {
+// The app owns session state, its guarded logout and pending request lock.
+type ApplicationLayoutProps = {
+  children: ReactNode;
+  locale: NaeilHeaderProps["locale"];
+  Link: NaeilHeaderProps["Link"];
+  currentHref: string;
+  account: NaeilHeaderAccount;
+};
+
+export function ApplicationLayout({ children, locale, Link, currentHref,
+  account }: ApplicationLayoutProps) {
   return <>
-    <NaeilHeader locale="en" />
+    <NaeilHeader locale={locale} Link={Link} currentHref={currentHref}
+      authSlot={<NaeilHeaderAccountControl locale={locale} Link={Link}
+        account={account} />} />
     <main className="ui-app-frame"
       style={{ marginTop: "calc(var(--ui-navigation-height) + 1px)" }}>
       {children}
     </main>
-    <NaeilFooter locale="en" variant="compact" />
+    <NaeilFooter locale={locale} variant="compact" Link={Link} />
   </>;
 }
 
-<ApplicationLayout>
+<ApplicationLayout locale="en" Link={GuardedLink} currentHref={pathname}
+  account={account}>
   <section data-ui-layout="settings">{/* Settings form */}</section>
 </ApplicationLayout>
 ```
 
-`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). Only pass `onLocaleChange` when the application supports its complete language set.
+`GuardedLink`, `pathname` and `account` come from the consumer. Use `{ status: 'signed-out', loginHref }` or `{ status: 'signed-in', onLogout, busy, displayName, email }` for `account`; the app handles async cancellation, failure and retry. Keep pending state and the request lock above `NaeilHeader`, since desktop/mobile slot contents mount separately. See the [account contract](naeil-header.md#account-presentation).
 
-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.
+`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 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
 
@@ -88,16 +107,32 @@ Put this in the **consumer application's** `AGENTS.md` (or equivalent repository
 ## Shared application layout
 - Read the installed @naeil/ui/DESIGN.md and docs/components/application-layout.md before UI layout work.
 - Use @naeil/ui/naeil-header for the canonical naeil header; use Navigation from @naeil/ui/ui for a different product menu. Use NaeilFooter from @naeil/ui/naeil-footer for owned service footers; SiteFooter remains the generic primitive. Keep existing Next Nav/Footer compatibility adapters when applicable.
+- Put NaeilHeaderAccountControl from @naeil/ui/naeil-header in authSlot for owned apps. Supply real session state, the busy flag and guarded logout callback. Keep pending state and the request lock above the header so desktop/mobile copies share them; do not copy account/avatar/menu markup.
 - Local wrappers supply menu data, routing/guards, locale, auth and slots. Do not copy the menu, mobile sheet, controls or footer implementation. Extend the shared component for reusable missing behavior.
 - Use ui-app-frame on main; navigation/footer own their internal frames. Keep reading/settings/short-form sections inside that frame. Apply frame overrides consistently across routes.
 - Check the installed package version and CSS before creating a replacement for an apparently missing component.
-- Verify actual shared navigation/footer rendering and stable anchors across routes, themes and supported sizes. An import alone is not adoption evidence. Record intentional route exceptions.
+- Verify actual shared navigation/footer rendering and stable anchors across routes, themes and supported sizes, including signed-out, signed-in, menu, busy, cancellation/failure and retry states. An import or anonymous-only check is not adoption evidence. Record intentional route exceptions.
 ```
 
 ## Adoption checks
 
 For each consumer, record its installed version, layout adapter, shared imports, CSS entrypoints and intentional exceptions. In that consumer's browser CI, check that expected application routes render `[data-slot="navigation"]` and `[data-slot="site-footer"]`, and that anchors remain stable between wide lists and narrow forms. Include narrow/zoomed screens, localized labels and tall content that introduces a scrollbar. Keep table overflow local.
 
+Owned-service checks also verify canonical header/footer destinations, rendered package/contract identity and shared account states. Inspect both signed-in and signed-out chrome, open the account menu, and exercise busy, cancel/failure and retry without duplicate requests when the mobile sheet is reopened or the viewport changes.
+
 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). 0.7.0 candidate adds package/contract identity; publication and per-service operational rollout are separate.
+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`)
+
+Live since 2026-10-22 for naeil.dev, abestimate.naeil.dev and jev.naeil.dev. A new service joins the same login instead of running its own session, relay or password. Home Console (`:2455` on the tailnet) is outside the cookie scope.
+
+- **Session:** read the default `@supabase/ssr` 0.9.0 cookie `sb-dathsxdsaxooifnxjket-auth-token` (and its `.0`, `.1` chunks) with `Domain=.naeil.dev; Path=/; Secure; SameSite=Lax`. Write refreshed chunks with the same options; never set a host-only copy.
+- **Identity and access:** on the server call `supabase.auth.getUser()`, then `rpc('access_decision', { p_service_id: '<service>' })` with that session's access token. `allowed` → continue; `not_granted` / `member_inactive` / `service_inactive` → 403 page; terminal session errors → treat as signed out; other failures → 503.
+- **Signed out:** redirect (307) to `https://naeil.dev/login?next=<absolute URL>`. Add the service origin to the site's `canonicalRedirect` allowlist (`src/lib/auth/redirect.ts`).
+- **Logout:** `signOut({ scope: 'local' })`, then expire every shared cookie chunk with the same Domain/Path. All services see the user as signed out on the next request.
+- **Header:** `NaeilHeaderAccountControl` in `authSlot`, linked to the login URL and the logout callback.
+- **Onboarding:** register the service id in the central catalog, mark it verified, and grant users from Home Console (`console_set_access`).
+
+Reference code: Estimate `src/server/naeil-shared-session.ts`; site `src/lib/auth/site-session.ts` and `cookie-domain.ts`. Commit `c076391` handles a stale pre-2026-10-17 host-only apex cookie that otherwise breaks the OAuth callback.

package/docs/components/naeil-footer.md

@@ -1,13 +1,13 @@
 # NaeilFooter — canonical service footer
 
-New in the **0.7.0 candidate** (not published). React-only opt-in entry:
+Included in **published and registry-verified 0.7.1**, from the unpublished 0.7.0 candidate. Install exact `@naeil/ui@0.7.1` from npm; hosted Docs and service activation have separate receipts. See [release identities and publication status](../package-release.md#publication-and-deployment). React-only opt-in entry:
 
 ```tsx
 import { NaeilFooter } from '@naeil/ui/naeil-footer';
 <NaeilFooter locale="ja" variant="compact" Link={GuardedLink} />
 ```
 
-Use with [NaeilHeader](naeil-header.md) on owned user-facing services. Both `full` and `compact` contain the .naeil home link, Projects, Blog and the official naeil GitHub link. Full also displays the existing tagline. Compact reduces spacing/description, not the destinations. No social account or legal claim is invented. The website's former generic X homepage icon is not a canonical account link.
+Use with [NaeilHeader and its account control](naeil-header.md) on owned user-facing services. Both `full` and `compact` contain the .naeil home link, Projects, Blog and the official naeil GitHub link. Full also displays the existing tagline. Compact reduces spacing/description, not the destinations. No social account or legal claim is invented. The website's former generic X homepage icon is not a canonical account link.
 
 `locale` selects `en`, `ko`, or `ja`. `resolveHref(path)` defaults to official localized naeil.dev destinations; a local website router may resolve unlocalized paths itself. `Link` handles **every** canonical anchor, including absolute GitHub URLs. It must forward href, target, rel, onClick, className and children. GitHub opens a new tab with noopener/noreferrer. The shared implementation does not itself trigger navigation or await saves.
 

package/docs/components/naeil-header.md

@@ -1,6 +1,6 @@
 # NaeilHeader — branded whole-header composition
 
-This guide includes the **@naeil/ui 0.7.1 candidate**, whose unchanged frame comes from published 0.6.0. See the [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) for archive and publication evidence. Import this opt-in React-only entry when an application inherits the actual naeil.dev header. Generic `Navigation` from `/ui` remains available for different product menus.
+The published registry baseline is **@naeil/ui 0.7.2**. This guide also describes the **unpublished 0.8.0 candidate** APIs below. Install exact `@naeil/ui@0.7.2` for the published API; the new Home props require the reviewed 0.8.0 archive. Hosted Docs and service activation have separate receipts. See [release identities and publication status](../package-release.md#publication-and-deployment). Import this opt-in React-only entry when an application inherits the actual naeil.dev header. Generic `Navigation` from `/ui` remains available for different product menus.
 
 ```tsx
 import { NaeilHeader, NaeilHeaderAccountControl } from '@naeil/ui/naeil-header';
@@ -16,13 +16,13 @@ import '@naeil/ui/globals.css';
 
 Load shared styles once. Apps that already own their Tailwind/base styles may import both `@naeil/ui/theme.css` and `@naeil/ui/components.css` instead of globals. Tailwind 4 consumers must register the installed `dist` with `@source`; see [setup](../design/v2-migration.md#시작하기).
 
-The module owns the brand, five-project catalog and header-only translations, project artwork references/status, theme/optional locale controls, toolbar order, fixed positioning, branded frame and Radix desktop/mobile behavior. Do not copy menu JSX or styles into a consumer. The website's `NavWrapper` imports this same module and supplies locale/router/auth state; estimate consumes the built package entry. Legacy `Nav` retains its Next/next-intl compatibility API.
+The module owns the brand, single-project naeil-ui catalog and header-only translations, project artwork references/status, theme/optional locale controls, toolbar order, fixed positioning, branded frame and Radix desktop/mobile behavior. Do not copy menu JSX or styles into a consumer. The website's `NavWrapper` imports this same module and supplies locale/router/auth state; estimate consumes the built package entry. Legacy `Nav` retains its Next/next-intl compatibility API.
 
 ## Consumer contract
 
 Consumers provide an existing next-themes provider, routing/dirty-save guard, current locale and real authentication behavior. Default destinations point to `https://naeil.dev/{locale}`; the site's localized Link instead uses `resolveHref={path => path}`. A supplied `Link` handles default official destinations, including cross-origin URLs. `onNavigate` can intercept brand and menu links; honor modified clicks and target behavior. Explicit `external: true` project overrides and `projectsExternal` use native anchors, so intercept them with `onNavigate` when a dirty guard is required.
 
-Only provide `onLocaleChange` when the application's interface supports all three canonical locales (`en`, `ko`, `ja`). Omitting it removes the locale control; the component does not create application translations or shared preferences. `authSlot` uses `NaeilHeaderAccountControl` in owned applications: a shared44px neutral account trigger and localized Radix logout menu. Consumers supply their real session state/callbacks, not alternative account markup. The legacy slot remains public for deliberate compatibility overrides. It does not integrate site SSO, share credentials or create accounts. Theme preferences remain consumer-origin state. Without a working provider, rendering alone does not establish theme switching.
+Only provide `onLocaleChange` when the application's interface supports all three canonical locales (`en`, `ko`, `ja`). Omitting it removes the locale control; the component does not create application translations or shared preferences. `authSlot` uses `NaeilHeaderAccountControl` in owned applications: a shared 44px neutral account trigger and localized Radix logout menu. Consumers supply their real session state/callbacks, not alternative account markup. The legacy slot remains public for deliberate compatibility overrides. It does not integrate site SSO, share credentials or create accounts. Theme preferences remain consumer-origin state. Without a working provider, rendering alone does not establish theme switching.
 
 | Prop | Contract |
 | --- | --- |
@@ -33,6 +33,10 @@ Only provide `onLocaleChange` when the application's interface supports all thre
 | `authSlot` | Canonical `NaeilHeaderAccountControl`, with consumer-owned auth state/actions. Legacy arbitrary markup remains supported. |
 | `brandHref`, `brandSlot`, `brandLinkProps`, `brandLinkComponent` | Explicit brand destination/content/anchor overrides; default accessible brand name is `.naeil`. |
 | `projects`, `projectsExternal`, `showProjects`, `showBlog` | Legacy catalog/visibility/native-link overrides; defaults use the complete canonical catalog. |
+| `appNavigation` (0.8.0) | `NavigationItem[]` passed unchanged after catalog/blog and before flat `subNav`. Owned product menus use this with `showProjects={false} showBlog={false}`. |
+| `brandSuffix` (0.8.0) | Product qualifier inside the brand link; the package owns its 14px type, 4px gap and optical alignment. Ignored when `brandSlot` replaces the complete content. Set `brandLinkProps["aria-label"]` for a product name. |
+| `statusSlot` (0.8.0) | Exactly once, outside and 8px after the brand link at every width. The consumer owns the content and accessible status. No wrapper is added when omitted. |
+| `mobileOpen`, `onMobileOpenChange` (0.8.0) | Controlled/uncontrolled sheet state, also on generic Navigation. Omit `mobileOpen` for internal state; a callback alone observes it. Accepted transitions notify once. In controlled mode callbacks request a change against the committed prop, so another close request is reported if the parent rejects or delays the previous one; an external prop update emits no request. Route changes, ordinary links, close/overlay/Escape dismiss. Desktop crossing dismisses when the desktop navigation gains width; an empty menu retains B1's open sheet until Escape/close/overlay/route change. Modified/middle clicks preserve it; nested menus consume the first Escape. |
 | `subNav`, `currentProjectKey`, `currentProjectHref` | Legacy extra links and current-project destination. |
 | `translations`, `labels` | Legacy header/project lookup overrides and navigation/menu/close accessible labels. |
 | `toolbarSlot` | Replaces the complete default theme/locale/auth toolbar. |
@@ -47,20 +51,46 @@ Standard header attributes and the remaining inherited [Navigation props](naviga
 - `{ status: 'signed-out', loginHref }` renders the shared login link through that adapter.
 - `{ status: 'signed-in', onLogout, busy?, displayName?, email? }` renders the same account icon in every app; optional identity appears only inside its menu. There is no shared identity or avatar fetch.
 - `onLogout` starts the app's guarded action; the app handles async errors, cancellation, session endpoints and redirects. `busy` disables the menu action while keeping the trigger available, with `aria-busy`, for inspection and focus restoration. Cancel/failure clears busy and permits retry.
-- Callback invocation closes the menu and returns focus to the trigger. Mobile navigation may remain open during a failed action. The account menu uses the existing Radix overlay/inert implementation.
+- Desktop and uncontrolled-mobile account controls retain B1: `onLogout` runs during selection, then Radix closes the account menu and restores its trigger; the mobile sheet may remain open during a failed action. A controlled mobile sheet instead defers the callback until its account menu and sheet finish closing, focuses a surviving visible header control, and invokes the callback once. Reopening the sheet or account menu, a new sheet dismissal request, or unmounting the header cancels the queued action. The account menu uses the existing Radix overlay/inert implementation.
+
+While a controlled parent keeps `mobileOpen=true`, its rejection and delayed acceptance are indistinguishable. A later `false` prop without an intervening cancellation accepts the queued selection; assigning `true` when it is already `true` creates no observable reopen transition.
 
 Keep errors visible in the consumer's recovery UI or toast. The package never calls an authentication endpoint. Compare signed-in and signed-out render states separately; anonymous-only acceptance cannot establish authenticated parity. `AccountStates` is a synthetic Storybook example for pending/cancel/error/retry.
 
+Own pending state and the in-flight request lock above `NaeilHeader`. Navigation mounts desktop and mobile slot contents separately, and closing the mobile sheet unmounts its copy. Pass the same controller to both through `authSlot`; test reopening the sheet and changing viewport during a pending request. State inside an independently mounted slot component can enable duplicate requests.
+
 ## Frame and content clearance
 
 The fixed header is 65px: the current 64px navigation token plus a 1px border. Clear it in the application's main, sticky regions and focus/anchor scroll margins with `calc(var(--ui-navigation-height) + 1px)`. The header, main and footer now share a 1600px maximum outer frame, including responsive `clamp(16px, 2.4vw, 40px)` gutters. Put `ui-app-frame` on main and reading/settings or short-form sections inside it; the header and shared footer apply their own internal frame. Do not wrap them in another padded frame. Apply deliberate `--ui-width-frame` / `--ui-frame-gutter` overrides on a common ancestor. Remove old `max-w-7xl` or `px-6` overrides to adopt the new defaults. This width update supersedes the previous 1280px/24px branded frame. See the [application layout starter](application-layout.md).
 
 ## Artwork and package boundary
 
-The five decorative images reference `https://naeil.dev/images/{coral,jellyfish,whale,fish,turtle}.png`. Rendering those images requires network access to the official origin. Their bytes are not redistributed in npm; [third-party notices](../../THIRD_PARTY_NOTICES.md) retain unresolved artwork provenance and redistribution limits. Brand marks are not relicensed by the repository MIT license. Captions and links remain usable when images fail.
+The 0.7.2 default catalog contains naeil-ui and references only `https://naeil.dev/images/whale.png`. Rendering that decorative image requires network access to the official origin. Its bytes are not redistributed in npm; [third-party notices](../../THIRD_PARTY_NOTICES.md) retain unresolved artwork provenance and redistribution limits. Brand marks are not relicensed by the repository MIT license. Captions and links remain usable when images fail.
 
-This entry requires no Next.js, next-intl, site session/auth backend, full application message catalog, hero or site public folder. Generic `/ui` imports do not import its catalog. The local Storybook provides **Brand / NaeilHeader / Docs, Usage, JapaneseApplication**; the Japanese example omits unsupported locale switching and uses a consumer-owned auth slot. Candidate examples do not establish hosted deployment.
+This entry requires no Next.js, next-intl, site session/auth backend, full application message catalog, hero or site public folder. Generic `/ui` imports do not import its catalog. Storybook provides **Brand / NaeilHeader / Docs, Usage, JapaneseApplication, AccountStates, ReferenceFull, ReferenceCompact**; the Japanese example omits unsupported locale switching and supplies application state to the shared account control. Local examples do not establish hosted deployment.
 
 Verify actual packed consumption, Storybook behavior and rendered comparisons at matching viewport/language/theme. Source imports alone do not prove visual parity. Native Safari, devices, assistive technology, full OAuth and unresolved accessibility observations retain the [documented support limits](../design/public-ui-support.md).
 
-Pair owned-service headers with [NaeilFooter](naeil-footer.md). The 0.7.1 candidate emits package/contract identifiers for actual rendered validation.
+Pair owned-service headers with [NaeilFooter](naeil-footer.md). The 0.7.2 source is `40a3928e24cd2f0141be3e605eed0a75260938fd`. Both 0.7.2 and the 0.8.0 candidate emit package version and chrome contract `1`; archive identities, maintained guidance and hosted Docs remain separate evidence.
+
+
+## Host typography and mobile handoff (0.8.0 candidate)
+
+Import either `globals.css` or `theme.css` plus `components.css`, and register the installed `dist` with Tailwind `@source`. Header/footer roots and the actual navigation popover, sheet, account menu and locale menu Content elements carry `data-naeil-chrome` and `lang=locale`; the locale Select Content also carries `data-naeil-locale-menu`. Generic Navigation/Select/DropdownMenu do not acquire these markers. Do not identify chrome by option text or by the presence of a Japanese body option.
+
+Marker-and-language-scoped final typography uses a package-local font stack and explicit sizes, weights, line heights, letter spacing and smoothing. It supports a host `@theme` / `@theme inline` with different text tokens/font stacks and unlayered element/role rules at Home's specificity, including `(0,3,0)` `:root[attr] [role="menuitem"]` and Home's `[role="dialog"] p` rules. Host rules can load before or after either supported package CSS entry; owned text declarations outrank them. Rules with `!important` or IDs aimed at chrome are outside this guarantee. Ordinary body Select/menu/dialog typography remains host-owned; custom slot content remains consumer-owned. Font files are still consumer-supplied; Japanese chrome and portals use Noto Sans JP even when the document language differs.
+
+A controlled mobile sheet defers its shared account action until the account menu and sheet finish closing and restore a surviving header control. The consumer still owns dirty state, confirmation, logout, busy state and the request lock; `onLogout` must tolerate this asynchronous handoff. When a confirmation saves its opener, its restoration policy must also handle a viewport change hiding that opener. Verify normal and reduced motion, cancellation after a desktop transition, pending requests, reopen and retry in the actual application; the candidate's unresolved acceptance gates are not a production guarantee.
+
+The empty-menu desktop exception is intentional B1 compatibility: a zero-width desktop navigation cannot signal the crossing, so the sheet stays open. Escape, its close button, the overlay or a `currentHref` change still close it. Home owns the confirmation's desktop cancel fallback to the visible row account trigger; the package supplies a visible, focusable control and does not implement the confirmation's restoration policy.
+
+```tsx
+<NaeilHeader locale={locale} currentHref={pathname} Link={GuardedLink}
+  showProjects={false} showBlog={false} appNavigation={navigationItems}
+  brandHref="/" brandSuffix="Home" brandLinkProps={{ 'aria-label': 'Naeil Home' }}
+  statusSlot={readinessStatus} mobileOpen={mobileOpen} onMobileOpenChange={setMobileOpen}
+  onLocaleChange={changeLanguage}
+  authSlot={<NaeilHeaderAccountControl locale={locale} account={account} />} />
+```
+
+Keep the default theme/locale/separator/account toolbar for this profile; `toolbarSlot` is a compatibility override, not the Home migration path. Omitting all new props preserves the 0.7.2 canonical profile, apart from markers, language correction, release identity and Radix-generated IDs. SVG/Logo IDs and consumer-supplied IDs are not normalized away. See the `docs/superpowers/specs/2026-10-28-canonical-home-chrome.md` acceptance contract for gates and the four allowed Home differences.

package/docs/design/v2-migration.md

@@ -2,21 +2,21 @@
 
 이 안내는 `@naeil/ui`의 기본 모양과 재사용 규칙을 설명한다. 패키지 소비와 소비 사이트 배포는 별도 작업이다.
 
-이 안내는 **@naeil/ui 0.6.0**의 CSS·API·패키지 경계를 대상으로 한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다. 소스·archive와 실제 게시·배포 결과는 [릴리스 기록](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0)에서 구분한다. 이전 0.5.0은 2026-10-15에 게시되었으며, 이번 버전에서 공통 1600px 프레임과 적용 규칙을 추가한다.
+**0.7.1 npm 게시·registry 검증 완료 — 2026-10-23.** 현재 게시된 기준 버전은 **0.7.1**이다. 이 유지보수 안내는 canonical `NaeilFooter`, `NaeilHeaderAccountControl`, `/release` 식별자와 기존 1600px 프레임을 함께 다룬다. 0.7.0은 미게시 후보이며, 처음 게시된 0.7.x 버전은 0.7.1이다. 독립된 새 React/Next registry 설치에서 동결 파일 139개와 타입·프로덕션 빌드·브라우저 검증이 통과했다. hosted Docs와 상시 배포 활성화는 별도 실행 기록으로 확인한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다. 동결 패키지 소스·archive, 별도 검토한 Docs 소스와 실제 게시·배포 결과는 [릴리스 정책](../package-release.md#publication-and-deployment)에서 구분한다.
 
 ## 시작하기
 
-React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui` 또는 선택적 `/naeil-header`를 사용한다. API 키와 Next.js는 필요 없다.
+React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui` 또는 선택적 `/naeil-header`·`/naeil-footer`를 사용한다. API 키와 Next.js는 필요 없다. 검증한 registry 버전을 고정해 설치한다.
 
 ```sh
-pnpm add --save-exact @naeil/ui@0.6.0
+pnpm add --save-exact @naeil/ui@0.7.1
 ```
 
-로컬 후보를 검증할 때는 저장소에서 `pnpm build:pkg`와 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고 `/tmp/naeil-ui-0.6.0.tgz`를 설치한다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react)와 [검증/릴리스 정책](../package-release.md)을 참고한다.
+registry의 0.7.1 archive는 동결 릴리스 archive와 바이트가 일치한다. archive에 포함된 안내는 준비 시점의 기록이므로 현재 설치에는 이 유지보수 안내를 따른다. 로컬 개발에서는 저장소에서 `pnpm build:pkg`와 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고 `/tmp/naeil-ui-0.7.1.tgz`를 설치한다. 현재 소스의 개발용 pack은 동결 릴리스 archive와 다르므로 게시 파일을 대체하지 않는다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react)와 [검증/릴리스 정책](../package-release.md)을 참고한다.
 
 공통 UI 소비에는 Supabase, 21st 또는 다른 API 키가 필요하지 않다. React/ReactDOM 19는 소비 앱의 peer이며, Next 15/16과 next-intl 4는 호환 경로에 필요한 선택적 peer다. next-themes 0.4와 tailwind-merge 3은 공통 런타임 의존성으로 설치된다. 사이트의 Supabase·MDX·Three 의존성과 코드는 공통 소비 경계에서 제외했다.
 
-버전을 생략한 설치는 registry의 latest 태그를 따른다. 이 안내와 동일한 경계를 사용하려면 0.6.0을 명시하거나 같은 버전의 검증된 로컬 archive를 사용한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
+버전을 생략한 설치는 registry의 latest 태그를 따른다. 2026-10-23에 latest는 0.7.1로 확인했다. 검증한 버전을 유지하려면 0.7.1을 명시한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
 
 Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번 불러온다.
 
@@ -80,7 +80,7 @@ Next.js 소비자는 layout의 metadata title 기본값/템플릿과 페이지
 
 ## 앱 전체 틀과 콘텐츠 폭
 
-실제 naeil.dev 브랜드 헤더를 이어받는 앱은 선택적 React 전용 `@naeil/ui/naeil-header`의 `NaeilHeader`를 사용한다. 전체 프로젝트 메뉴·헤더 번역·테마/선택적 언어 컨트롤·toolbar·반응형 스타일을 한 모듈에서 제공하므로 소비 앱에 다시 복사하지 않는다. 소비 앱은 기존 theme provider, 라우팅·저장 guard, 현재 언어와 실제 인증 슬롯을 연결한다. 언어 변경을 지원하지 않으면 `onLocaleChange`를 생략한다. [전체 헤더 계약](../components/naeil-header.md)을 참조한다.
+실제 naeil.dev 브랜드 헤더를 이어받는 앱은 선택적 React 전용 `@naeil/ui/naeil-header`의 `NaeilHeader`를 사용하고, 소유 서비스 푸터는 `@naeil/ui/naeil-footer`의 `NaeilFooter`로 구성한다. 전체 프로젝트 메뉴·헤더 번역·테마/선택적 언어 컨트롤·toolbar·반응형 스타일과 canonical 푸터 목적지를 소비 앱에 다시 복사하지 않는다. 소비 앱은 기존 theme provider, 라우팅·저장 guard와 현재 언어를 연결한다. `authSlot`에는 같은 모듈의 `NaeilHeaderAccountControl`을 두고 실제 세션 상태·busy·guarded logout 콜백을 전달한다. pending 상태와 요청 잠금은 헤더 위에서 소유해 데스크톱/모바일 슬롯이 공유한다. 언어 변경을 지원하지 않으면 `onLocaleChange`를 생략한다. [전체 헤더 계약](../components/naeil-header.md)과 [푸터 계약](../components/naeil-footer.md)을 참조한다.
 
 2026-10-16 승인한 기본 프레임은 최대 1600px(여백 포함), 좌우 `clamp(16px, 2.4vw, 40px)`다. 브랜드 헤더·범용 Navigation·SiteFooter·본문 `.ui-app-frame`이 `--ui-width-frame`, `--ui-frame-gutter`를 함께 사용한다. 브랜드 헤더의 고정 높이는 65px이므로 main·sticky 영역과 초점/anchor 이동에 `calc(var(--ui-navigation-height) + 1px)`만큼 여유를 둔다. 다섯 장식 이미지는 공식 `https://naeil.dev/images/*.png` URL을 참조하므로 네트워크가 필요하다. 이미지 바이트는 npm에 포함하지 않으며 재배포 출처·권리 미해결 사항은 [제3자 고지](../../THIRD_PARTY_NOTICES.md)에 유지한다.
 
@@ -120,6 +120,7 @@ import { Navigation, SiteFooter } from "@naeil/ui/ui";
 
 - 주요 경로를 같은 조건에서 비교한다. 메뉴 좌표와 여백, 제목·행동의 정렬을 확인하고 의도적인 차이는 이유를 남긴다.
 - 제품이 지원하는 언어, 긴 이름, 적은/많은 데이터, 영향을 받는 로딩·오류 상태를 포함한다. 공유 컴포넌트 예시는 기존 한글·영문·일문 기준을 유지한다.
+- 인증 전·후, 계정 메뉴, 로그아웃 busy·취소·실패·재시도를 확인한다. pending 중 모바일 메뉴 재열기나 화면 폭 변경으로 중복 요청이 발생하지 않아야 한다. 익명 화면만으로 인증된 헤더의 일치를 주장하지 않는다.
 - 페이지 넘침과 함께 표 내부 잘림·줄바꿈·조작 영역을 확인한다. 내부 스크롤 자체를 페이지 넘침과 혼동하지 않는다.
 - 기능 검사, 공통 기준 준수, 실제 화면 구성을 별도로 기록한다. 기존 대비·중첩 조작·터치 크기 문제는 현재 증거가 생기기 전까지 미해결로 남긴다.
 
@@ -156,7 +157,7 @@ Storybook의 로컬 폰트 import는 예시다. 그대로 앱 전역에 모든
 
 ## 개별 컴포넌트 안내
 
-[컴포넌트 사용 안내](../components/README.md)는 13개 primitive와 Navigation·SiteFooter·전체 NaeilHeader의 실제 wrapper API·기본값, 키보드, 상태, 레이블·오류 연결, 재정의 책임을 설명한다. 현재 로컬 Storybook은 UI 15개와 Brand 2개, 총 17개 Docs를 제공한다. 각 `Docs`·`Usage`와 `Brand / NaeilHeader / JapaneseApplication`에서 안내와 실행 예시를 확인한다. 이는 새 hosted Docs 배포 완료를 뜻하지 않는다. [지원 범위와 수동 점검](public-ui-support.md)은 자동 검사와 실제 보조 기술·운영체제 검증의 차이를 기록한다.
+[컴포넌트 사용 안내](../components/README.md)는 13개 primitive와 Navigation·SiteFooter·NaeilFooter·전체 NaeilHeader 및 계정 컨트롤의 실제 API·기본값, 키보드, 상태, 레이블·오류 연결, 재정의 책임을 설명한다. Storybook 소스는 UI 15개와 Brand 2개, 총 17개 Docs를 제공한다. canonical 푸터 전체/축약형과 계정 상태는 기존 NaeilHeader/SiteFooter stories에 포함된다. 각 `Docs`·`Usage`와 `Brand / NaeilHeader / JapaneseApplication, ReferenceFull, ReferenceCompact, AccountStates`에서 안내와 실행 예시를 확인한다. 이는 새 hosted Docs 배포 완료를 뜻하지 않는다. [지원 범위와 수동 점검](public-ui-support.md)은 자동 검사와 실제 보조 기술·운영체제 검증의 차이를 기록한다.
 
 ## 확인 방법
 
@@ -169,7 +170,7 @@ Storybook의 로컬 폰트 import는 예시다. 그대로 앱 전역에 모든
 
 ## 0.3 package boundary
 
-The heading retains the original 0.3 migration anchor; the allowlist below reflects the 0.6.0 package boundary. `/ui` is the React core. The opt-in `/naeil-header` is the canonical complete branded header, also React-only. Root imports preserve Nav, Footer, Logo, LocaleSwitcher, ThemeProvider, ThemeToggle, ThemeToggleIcon, PageTitle, SectionTitle and their class helpers, but root has static Next/next-intl dependencies. React-only apps must use `/ui`, `/utils` and appropriate shared deep modules. `next-themes` is a React runtime library; it does not require Next.js. Fonts remain consumer-owned.
+The heading retains the original 0.3 migration anchor; the boundary below includes published and registry-verified 0.7.1. `/ui` is the React core. Opt-in `/naeil-header` provides the canonical complete branded header and `NaeilHeaderAccountControl`; `/naeil-footer` provides canonical full/compact footers. Both are React-only. `/release` exports server-safe `uiRelease` metadata, without application artifact or environment data. Root imports preserve Nav, Footer, Logo, LocaleSwitcher, ThemeProvider, ThemeToggle, ThemeToggleIcon, PageTitle, SectionTitle and their class helpers, but root has static Next/next-intl dependencies. React-only apps must use the dedicated entries and appropriate shared deep modules. `next-themes` is a React runtime library; it does not require Next.js. Fonts remain consumer-owned.
 
 Next.js `^15 || ^16` and next-intl `^4` are optional peers. Install both when using root, Nav, Footer or `i18n/routing`. This is an existing compatibility contract, not a claim that every peer combination has browser validation; the clean Next fixture checks Next 16.1.7. React/ReactDOM `^19` come from the host. Tailwind 4 is the documented styling pipeline. Explicit `className`, Radix props, Toaster options and theme-provider props remain consumer overrides.
 
@@ -206,7 +207,7 @@ i18n/config
 i18n/routing
 ```
 
-`components/index` has the same framework requirements as root. `/utils` and `lib/utils` remain aliases for `cn`. `i18n/config` preserves the compatibility locale names; products may instead own their locale list and routing. There are no open-ended component/lib/i18n export patterns. Root, `/ui`, `/utils`, `/theme.css`, `/globals.css` and `/components.css` remain public; `/naeil-header` is the explicit new opt-in entry. It is not an open-ended component export pattern.
+`components/index` has the same framework requirements as root. `/utils` and `lib/utils` remain aliases for `cn`. `i18n/config` preserves the compatibility locale names; products may instead own their locale list and routing. There are no open-ended component/lib/i18n export patterns. Root, `/ui`, `/utils`, `/theme.css`, `/globals.css` and `/components.css` remain public. `/naeil-header`, `/naeil-footer` and `/release` are explicit dedicated entries; they do not create open-ended component export patterns.
 
 Every excluded source path stays in this repository for the brand/example website. Move any local-source consumer use into the consumer application before upgrading:
 
@@ -214,7 +215,7 @@ Every excluded source path stays in this repository for the brand/example websit
 | --- | --- |
 | `components/nav-wrapper`, `components/nav-server-wrapper` | Use `/naeil-header` for the canonical whole header, or preserve Nav compatibility through your own adapter; your app loads users/sessions. |
 | `components/footer-wrapper` | Compose preserved Footer with your app's Link. |
-| `components/auth-slot` | App-owned account UI, logout action and avatar policy; pass it through Nav slots. |
+| `components/auth-slot` | The app owns session state and guarded logout. Owned-service headers render `NaeilHeaderAccountControl` from `/naeil-header` in `authSlot`; legacy custom Nav slots remain compatible. |
 | `components/hero-scene`, `components/hero-section`, `components/paraglider-cursor` | Website scene/cursor source, assets and Three dependencies stay website-owned. |
 | `components/project-layout`, `components/workflow-diagram`, `components/accent-picker` | Website showcase/data/theme editing composition; use shared primitives in product-owned compositions. |
 | `components/blog/MarkdownRenderer`, `lib/blog` | Application-owned content rendering, filesystem and MDX/remark pipeline. |