@naeil/ui 0.5.0 → 0.7.1

package/docs/components/application-layout.md

@@ -0,0 +1,103 @@
+# 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.
+
+## 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 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.
+
+## Width contract
+
+| Region | Default | CSS contract |
+| --- | --- | --- |
+| Header, main, footer outer frame | Maximum 1600px, including gutters | `--ui-width-frame` |
+| Inline gutters | `clamp(16px, 2.4vw, 40px)` | `--ui-frame-gutter` |
+| Reading / settings | Maximum 640px | `data-ui-layout="reading"` / `"settings"` |
+| Short form | Maximum 480px | `data-ui-layout="short-form"` |
+| List / dashboard / table region | Available space inside the frame, capped at 1600px | `data-ui-layout="list"` |
+| Intentionally unrestricted region | Available parent width | `data-ui-layout="fluid"` |
+
+Use `.ui-app-frame` on main. Shared header/footer already apply the frame internally; **do not wrap them in another padded frame**. Put purpose-specific sections inside main. At 1920px the default frame has 1520px available after its 40px gutters. Small screens shrink the frame and reduce gutters to at least 16px. A narrow form must not constrain or move navigation.
+
+Reserve a consistent scrollbar gutter in the consumer's global CSS when routes can alternate between short and tall content:
+
+```css
+html { scrollbar-gutter: stable; }
+```
+
+This keeps a centered frame from shifting when a classic scrollbar appears. The document scroll policy belongs to the application; the shared components do not set it implicitly. In a 1920px Chromium viewport with a 15px scrollbar, the frame starts at 152.5px with this policy in both short and tall states. Without it, the start changes from 160px to 152.5px. Overlay-scrollbar platforms may reserve no extra space.
+
+## Canonical naeil application starter
+
+```tsx
+import type { ReactNode } from "react";
+import { NaeilHeader } 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 }) {
+  return <>
+    <NaeilHeader locale="en" />
+    <main className="ui-app-frame"
+      style={{ marginTop: "calc(var(--ui-navigation-height) + 1px)" }}>
+      {children}
+    </main>
+    <NaeilFooter locale="en" variant="compact" />
+  </>;
+}
+
+<ApplicationLayout>
+  <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.
+
+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.
+
+## Deliberate overrides
+
+Apply overrides on a common ancestor or document root so header, main and footer inherit them together. Explicit `containerClassName` overrides still work. Do not give each route its own header cap or gutter.
+
+```css
+/* Product exception: record why this cap is needed. */
+.product-shell {
+  --ui-width-frame: 1280px;
+  --ui-frame-gutter: 24px;
+}
+/* An existing focused list can retain its previous content cap. */
+.focused-list { --ui-width-list: 1200px; }
+```
+
+The new frame/list caps replace the previous 1280px branded header and 1200px list defaults. Remove old `max-w-7xl` or `px-6` frame overrides when adopting the new default. Shared numeric values belong in `src/tokens/ui.json`; regenerate CSS with `pnpm build:tokens`.
+
+## Consumer agent instructions
+
+Put this in the **consumer application's** `AGENTS.md` (or equivalent repository instructions). Installing a package does not automatically load this repository's agent rules.
+
+```markdown
+## 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.
+- 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.
+```
+
+## 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.
+
+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.

package/docs/components/common.md

@@ -1,12 +1,12 @@
 # Shared usage contract
 
-These guides target the **@naeil/ui 0.5.0 release candidate**; final archive verification and registry publication are pending. The [hosted Docs](https://naeil-dev.github.io/naeil-ui/) were last verified for [0.4.0 on 2026-10-11](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.4.0), while `pnpm storybook` shows the current candidate. Start with the [consumer setup and migration](../design/v2-migration.md). Primitives and generic Navigation/SiteFooter are exported from `@naeil/ui/ui`; the actual branded whole header uses the opt-in [NaeilHeader](naeil-header.md) entry `@naeil/ui/naeil-header`. Both are React-only. The legacy root needs the optional Next/next-intl peers. Examples import real wrappers; product state, validation and network requests belong to consumers.
+These guides target the **@naeil/ui 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). The [hosted Docs](https://naeil-dev.github.io/naeil-ui/) were last verified for [0.5.0 on 2026-10-15](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0), while `pnpm storybook` shows this checkout. Start with the [consumer setup and migration](../design/v2-migration.md). Primitives and generic Navigation/SiteFooter are exported from `@naeil/ui/ui`; the actual branded whole header uses the opt-in [NaeilHeader](naeil-header.md) entry `@naeil/ui/naeil-header`. Both are React-only. The legacy root needs the optional Next/next-intl peers. Examples import real wrappers; product state, validation and network requests belong to consumers.
 
 ## Styling, themes and overrides
 
 Import `@naeil/ui/globals.css` once and register `@source` for the installed package's `dist` in your Tailwind 4 build. Alternatively load both theme.css and components.css alongside your existing Tailwind setup. Deliver Pretendard and, for Japanese, Noto Sans JP locally through your app's font pipeline; the package does not fetch fonts. Keep font OFL notices with redistributed binaries. The independent React example demonstrates consumer-owned delivery.
 
-Use `.light`/`.dark` on the document root to override OS theme. Root `data-ui-density="compact"` changes spacing, not text size: default controls are 40px, compact 36px, small screens/coarse pointers at least 44px. Portals use document-level styles/density, so a locally themed subtree alone does not theme portaled content. Purpose-specific reading/settings/list widths are 640/640/1200px caps that shrink to available space; the product owns its application frame.
+Use `.light`/`.dark` on the document root to override OS theme. Root `data-ui-density="compact"` changes spacing, not text size: default controls are 40px, compact 36px, small screens/coarse pointers at least 44px. Portals use document-level styles/density, so a locally themed subtree alone does not theme portaled content. Header, main and footer share a 1600px maximum outer frame and `clamp(16px, 2.4vw, 40px)` gutters. Use `ui-app-frame` on main; shared header/footer components apply that frame internally. Reading/settings sections remain capped at 640px, short forms at 480px, and lists at 1600px within the available frame space. Product root token overrides and explicit component classes remain supported. The [application layout guide](application-layout.md) explains composition, adoption and consistent overrides.
 
 `className` is merged by `cn` (clsx + tailwind-merge). Consumer classes and primitive props remain available. Recheck specificity, text/control/focus contrast, mobile targets and portaled content after overriding. Override semantic color companions together; do not replace only an action hue or remove focus outlines. Reduced-motion rules remove shared transitions/animations. Custom consumer animation still needs its own reduced-motion treatment.
 

package/docs/components/naeil-footer.md

@@ -0,0 +1,20 @@
+# NaeilFooter — canonical service footer
+
+New in the **0.7.0 candidate** (not published). 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.
+
+`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.
+
+`onNavigate(event, item)` reaches the brand and all group links. An application can synchronously preventDefault, flush its draft, and navigate only after successful saving. Preserve defaultPrevented, modified/middle clicks and target behavior according to the application's established guard. Do not run both adapter and onNavigate guards twice. Native explicit `external:true` links in generic SiteFooter bypass Link for compatibility, but **still call onNavigate**. This closes the former missing interception path.
+
+`variant`, `className`, `containerClassName`, standard footer attributes, `meta` and children remain available. Product status/legal information belongs in meta; no private build data belongs in the UI. Canonical content has no arbitrary replacement groups/brand. Existing generic SiteFooter and Next/next-intl Footer keep their override APIs. Record intentional departures from the canonical composition as rollout exceptions; same component imports alone are not adoption evidence.
+
+Footer owns its internal 1600px/clamp frame. Do not wrap it in an additional padded container. Its `data-naeil-footer`, `data-naeil-ui-version` and `data-naeil-ui-contract` identify the actual rendering. `@naeil/ui/release` exports `uiRelease` for the application-owned public artifact identity endpoint. That endpoint exposes only schemaVersion, appId, artifactId, sourceRevision and ui. Release version is not proof of deployment without the matching app artifact and rendered checks.
+
+Actual shared examples: **Brand / NaeilHeader / ReferenceFull, ReferenceCompact, JapaneseApplication**. Full legacy Footer examples remain compatibility checks. Consumer saves, failures, auth, real supported locales and modified clicks require product tests.

package/docs/components/naeil-header.md

@@ -1,14 +1,17 @@
 # NaeilHeader — branded whole-header composition
 
-This guide targets the **@naeil/ui 0.5.0 release candidate**. Final archive verification and registry publication are pending. 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.
+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.
 
 ```tsx
-import { NaeilHeader } from '@naeil/ui/naeil-header';
+import { NaeilHeader, NaeilHeaderAccountControl } from '@naeil/ui/naeil-header';
 import '@naeil/ui/globals.css';
 
 // Inside the consumer's existing next-themes ThemeProvider:
 <NaeilHeader locale="ja" Link={GuardedLink} currentHref={pathname}
-  authSlot={<LogoutButton />} />
+  authSlot={<NaeilHeaderAccountControl locale="ja" Link={GuardedLink}
+    account={authenticated
+      ? { status: 'signed-in', onLogout: () => { void guardedLogout(); }, busy: leaving }
+      : { status: 'signed-out', loginHref: '/login' }} />} />
 ```
 
 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#시작하기).
@@ -19,7 +22,7 @@ The module owns the brand, five-project catalog and header-only translations, pr
 
 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` contains the consumer's real session action and must retain at least 44px touch targets. 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 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.
 
 | Prop | Contract |
 | --- | --- |
@@ -27,7 +30,7 @@ Only provide `onLocaleChange` when the application's interface supports all thre
 | `resolveHref` | Resolves canonical unlocalized paths; defaults to the official localized site. |
 | `Link`, `currentHref`, `onNavigate` | Routing adapter, active destination and navigation interception inherited from Navigation. |
 | `onLocaleChange` | Optional supported-language callback; omit for a single-language application. |
-| `authSlot` | Consumer-owned authentication action in the default toolbar. |
+| `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. |
 | `subNav`, `currentProjectKey`, `currentProjectHref` | Legacy extra links and current-project destination. |
@@ -37,9 +40,20 @@ Only provide `onLocaleChange` when the application's interface supports all thre
 
 Standard header attributes and the remaining inherited [Navigation props](navigation.md) remain available. Compatibility overrides preserve existing consumers; new applications normally use the canonical composition.
 
+## Account presentation
+
+`NaeilHeaderAccountControl` accepts `locale`, optional routing `Link`, and `account`:
+
+- `{ 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.
+
+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.
+
 ## 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 branded header uses the actual site's 1280px cap and 24px gutters; body/footer widths belong to the product. A 1600px workspace body does not change this header cap or create a new shared foundation token.
+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
 
@@ -48,3 +62,5 @@ The five decorative images reference `https://naeil.dev/images/{coral,jellyfish,
 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.
 
 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.

package/docs/components/navigation.md

@@ -1,6 +1,6 @@
 # Navigation and SiteFooter
 
-This guide targets the **0.5.0 release candidate**; final archive verification and publication are pending. These are generic product-menu primitives. Applications inheriting the actual naeil.dev brand/catalog/control composition use the canonical opt-in [NaeilHeader](naeil-header.md) from `@naeil/ui/naeil-header`, with its fixed 65px/1280px frame and official artwork URL dependency.
+This guide targets the **@naeil/ui 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). These are generic product-menu primitives. Applications inheriting the actual naeil.dev brand/catalog/control composition use the canonical opt-in [NaeilHeader](naeil-header.md) from `@naeil/ui/naeil-header`, with fixed positioning, a 65px height, the shared application frame and official artwork URL dependency.
 
 `Navigation` and `SiteFooter` are React-only exports from `@naeil/ui/ui` (also `@naeil/ui/components/ui/navigation` and `@naeil/ui/components/ui/site-footer`). They require shared theme/components CSS and the normal consumer font/Tailwind setup. They do not import Next, next-intl, authentication, product routes or message dictionaries.
 
@@ -15,7 +15,6 @@ import { Navigation, SiteFooter } from "@naeil/ui/ui";
     { id: "keys", label: "API keys", href: "/keys" },
   ] }]}
   currentHref={pathname}
-  containerClassName="product-frame"
   toolbar={<ProductControls />}
   onNavigate={(event, item) => {
     if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
@@ -23,26 +22,25 @@ import { Navigation, SiteFooter } from "@naeil/ui/ui";
     guardedNavigate(item.href);
   }}
 />
-<main className="product-frame">
+<main className="ui-app-frame">
   <section data-ui-layout="settings">{/* narrow form inside stable frame */}</section>
 </main>
 <SiteFooter
   brand={<ProductBrand />}
   variant="compact"
   meta="Product information"
-  containerClassName="product-frame"
 />
 ```
 
-These are composition snippets: `pathname`, controls, brand, frame and `guardedNavigate` belong to the application. Keep its unsaved-change guard and modified-click behavior. Alternatively supply a `Link` adapter which forwards anchor props, `onClick`, `aria-current`, `className`, target and children. Links explicitly marked `external: true` render native anchors; an absolute URL alone does not bypass the supplied `Link`. `active` overrides exact `currentHref` matching when a route family needs custom matching.
+These are composition snippets: `pathname`, controls, brand and `guardedNavigate` belong to the application. Keep its unsaved-change guard and modified-click behavior. Alternatively supply a `Link` adapter which forwards anchor props, `onClick`, `aria-current`, `className`, target and children. Links explicitly marked `external: true` render native anchors; an absolute URL alone does not bypass the supplied `Link`. `active` overrides exact `currentHref` matching when a route family needs custom matching.
 
 `Navigation` accepts links and one level of labeled groups, optional description/icon/badge, `toolbar`, `mobileToolbar` and `mobileFooter`. Brand is a slot; the component does not invent a home destination or label. Groups use Radix Popover with actual links (Tab navigation, Escape and focus return); they are not action menus. Mobile uses a modal Radix Dialog with scroll locking, trapped focus and a labeled close control. The sheet closes on destination selection, currentHref changes or a return to desktop.
 
 Desktop groups open on mouse hover without moving keyboard focus. Leaving both the trigger and panel closes the hover preview after the standard 180ms token duration, allowing travel across the portal gap. Entering the panel cancels the pending close. Mouse clicks keep the menu open while the pointer remains in the trigger/panel and do not pin it: leaving still dismisses it. Keyboard-activating a hovered trigger takes over the open menu and focuses its first link; subsequent keyboard activation, Escape, outside interaction or navigation dismisses it. A menu being used with keyboard focus remains open when the pointer leaves. Mouse dismissal preserves the previous focus; keyboard activation retains Radix focus return. Touch uses click/tap, and the mobile sheet behavior is unchanged. Reduced motion disables visual transitions while retaining pointer travel tolerance.
 
-Container queries select desktop layout at 48rem of available header content width. Product frame classes control max width and gutters. Header height uses `ui.navigation-height` (64px); toolbar controls should remain short, with volatile counts in the content area. Navigation itself is in document flow; `className` can make it sticky or fixed. Fixed consumers must reserve its height in page composition. A narrow form must not constrain the header. Explicit className/style remain consumer overrides.
+Container queries select desktop layout at 48rem of available header content width. Navigation, main and footer share a maximum 1600px outer frame and `clamp(16px, 2.4vw, 40px)` gutters by default. Use `ui-app-frame` on main; do not wrap Navigation or SiteFooter in another padded frame. Reading/settings sections inside main retain their 640px cap. The [application layout guide](application-layout.md) covers composition and consistent root token overrides. Header height uses `ui.navigation-height` (64px); toolbar controls should remain short, with volatile counts in the content area. Navigation itself is in document flow; `className` can make it sticky or fixed. Fixed consumers must reserve its height in page composition. A narrow form must not constrain the header. Explicit className/style remain consumer overrides.
 
-`SiteFooter` supports `brand`, `description`, `groups: [{ id, label, links }]`, `meta`, children, `Link`, `containerClassName` and `variant="full|compact"`. Each link group is a labeled navigation landmark. Translated titles, destinations, legal/version text and social links belong to the consumer. A product may place a compact footer in its mobile sheet; a full marketing footer is not mandatory in a dashboard.
+`SiteFooter` supports `brand`, `description`, `groups: [{ id, label, links }]`, `meta`, children, `Link`, `containerClassName`, `variant="full|compact"` and `onNavigate(event, item)` (0.7.0 candidate, including explicit external anchors). Each link group is a labeled navigation landmark. Translated titles, destinations, legal/version text and social links belong to the consumer. A product may place a compact footer in its mobile sheet; a full marketing footer is not mandatory in a dashboard.
 
 Desktop reserves `ui.navigation-brand-width` (160px) for the brand, followed by the existing 16px row gap. With matching frame, viewport and font conditions, `.naeil` and `.naeil Home` therefore start their first menu at the same position. Mobile keeps intrinsic brand width. For a larger custom brand, override `--ui-navigation-brand-width` on the header or shared product frame; use the same value across related compositions and ensure the brand fits the reserved area.
 
@@ -50,10 +48,12 @@ Desktop reserves `ui.navigation-brand-width` (160px) for the brand, followed by
 
 Menu groups accept `columns?: 1 | 2` (default 1). The candidate sample uses 2 for the website project catalog and 1 for Home's functional menu; the mobile sheet remains one column. Menu widths use `ui.navigation-menu-width` (320px) and `ui.navigation-menu-wide-width` (640px), capped by available space. Group links share a 40px icon area, 16px icon-to-copy gap, title/description hierarchy and badges beside the title. Supply decorated brand artwork through `icon`; the shared package does not own product illustrations. Current group links use background, semibold title and a check indicator, retaining `aria-current` and keyboard focus without underlining descriptions.
 
-Existing `Nav` and `Footer` imports and props remain. `Nav` adapts the canonical NaeilHeader, which renders this generic core; `Footer` composes SiteFooter. `Nav` retains its fixed positioning and max-w-7xl site frame; menus gain keyboard/focus support, an opaque shared surface, 16px labels and a 64px minimum row. Its `projects` prop replaces the old default inventory; the old naeil projects remain the fallback for existing consumers. Optional `labels`, `className` and `containerClassName` support localization and frame overrides.
+Existing `Nav` and `Footer` imports and props remain. `Nav` adapts the canonical NaeilHeader, which renders this generic core; `Footer` composes SiteFooter. `Nav` retains its fixed positioning and uses the shared 1600px application frame; menus gain keyboard/focus support, an opaque shared surface, 16px labels and a 64px minimum row. Its `projects` prop replaces the old default inventory; the old naeil projects remain the fallback for existing consumers. Optional `labels`, `className` and `containerClassName` support localization and frame overrides. Remove old `max-w-7xl` or `px-6` frame overrides to adopt the new defaults.
 
 `Footer` adds `brandSlot`, `description`, `groups`, `socialSlot`, `meta`, `variant`, `className` and `containerClassName`. Use empty groups or null description/socialSlot to omit defaults. Existing linksExternal behavior remains for the default naeil links. Custom groups define their own absolute destinations and external/target settings.
 
 `Nav`/`Footer` continue to need Next/next-intl as documented. React-only services use this core for their own product menus or `/naeil-header` for the canonical branded composition. ThemeProvider, ThemeToggleIcon, LocaleSwitcher and Logo remain available through their existing React-safe deep imports. Reusing controls does not synchronize theme/language/authentication between origins.
 
 Storybook: `UI/Navigation` (website, Home composition, long labels), `UI/SiteFooter` (full and compact). Naeil Home is a synthetic composition based on the inspected live menu, not proof of a deployed migration. The repository task note `docs/design/navigation-footer-integration.md` tracks rollout; it is not included in the npm package.
+
+Owned naeil services use [NaeilFooter](naeil-footer.md) for the common content preset. Generic and legacy content overrides remain supported.

package/docs/design/v2-migration.md

@@ -2,25 +2,21 @@
 
 이 안내는 `@naeil/ui`의 기본 모양과 재사용 규칙을 설명한다. 패키지 소비와 소비 사이트 배포는 별도 작업이다.
 
-이 안내는 **@naeil/ui 0.5.0 릴리스 후보**의 CSS·API·패키지 경계를 대상으로 한다. 최종 소스·archive 검증과 registry 게시, 새 Docs·운영 사이트 배포는 아직 완료로 기록하지 않는다. 2026-10-11에 확인한 npm 0.4.0 게시·latest와 당시 소비 앱·Docs·운영 사이트 결과는 [0.4.0 게시 기록](https://github.com/naeil-dev/naeil-ui/blob/main/docs/design/naeil-brand-0.4.0-publication.md)으로 유지한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다.
+이 안내는 **@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 프레임과 적용 규칙을 추가한다.
 
 ## 시작하기
 
-React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui` 또는 선택적 `/naeil-header`를 사용한다. API 키와 Next.js는 필요 없다. 후보 검증 중에는 저장소에서 빌드·pack한 archive를 소비 앱에 설치한다.
+React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui` 또는 선택적 `/naeil-header`를 사용한다. API 키와 Next.js는 필요 없다.
 
 ```sh
-# 이 저장소에서:
-pnpm build:pkg
-npm pack --ignore-scripts --pack-destination /tmp
-# 소비 앱에서:
-pnpm add --save-exact /tmp/naeil-ui-0.5.0.tgz
+pnpm add --save-exact @naeil/ui@0.6.0
 ```
 
-0.5.0 registry 게시가 실제 확인된 뒤에는 `pnpm add --save-exact @naeil/ui@0.5.0`을 사용한다. 설치 명령을 문서에 쓰는 것만으로 게시가 완료되지는 않는다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/examples/react/README.md)와 [검증/릴리스 정책](../package-release.md)을 참고한다.
+로컬 후보를 검증할 때는 저장소에서 `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)을 참고한다.
 
 공통 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.5.0 후보 archive를 사용하고, 게시 확인 후에는 0.5.0을 지정한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
+버전을 생략한 설치는 registry의 latest 태그를 따른다. 이 안내와 동일한 경계를 사용하려면 0.6.0을 명시하거나 같은 버전의 검증된 로컬 archive를 사용한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
 
 Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번 불러온다.
 
@@ -54,7 +50,8 @@ Select는 값 선택, DropdownMenu는 행동 선택에 사용한다. Switch와 C
 - 본문·입력·버튼 16px, 보조 14px, 메타정보 13px. 작은 화면에서도 입력 글씨를 줄이지 않는다.
 - 기본 컨트롤 높이 40px. 문서 루트에 `data-ui-density="compact"`를 주면 36px가 된다. 작은 화면과 거친 포인터에서는 최소 44px를 유지한다. 데스크톱에서 `className="h-8"` 같은 높이 재정의는 적용되며, 모바일의 44px 최소 터치 크기는 유지된다.
 - `.light`/`.dark`는 OS 테마보다 우선한다. 기존 ThemeProvider를 사용할 수 있다.
-- `data-ui-layout="reading|settings|list|short-form|fluid"`로 콘텐츠 폭을 적용한다. 각각 최대 640/640/1200/480px 또는 가용 폭이다. 이 속성은 전체 앱의 레이아웃을 강제하지 않는다.
+- 공통 바깥 틀은 최대 1600px, 좌우 여백은 `clamp(16px, 2.4vw, 40px)`다. 본문의 `.ui-app-frame`과 공통 헤더·푸터 내부 프레임이 같은 토큰을 사용한다.
+- `data-ui-layout="reading|settings|list|short-form|fluid"`로 내부 콘텐츠 폭을 적용한다. 각각 최대 640/640/1600/480px 또는 가용 폭이다. 목록은 바깥 틀의 여백을 제외한 공간을 사용하고, 설정·읽기 영역은 그 안에서 좁게 유지한다.
 - 레이블·도움말·오류 문구는 소비 화면이 연결한다. Input의 `aria-invalid`와 `aria-describedby`를 사용하고, 로딩 중에는 Button의 `disabled`와 `aria-busy`를 함께 지정한다.
 - 성공·경고·오류·안내에는 Badge의 `success`, `warning`, `error`, `info` variant를 사용할 수 있다. 색만으로 의미를 전달하지 않는다.
 
@@ -85,37 +82,39 @@ Next.js 소비자는 layout의 metadata title 기본값/템플릿과 페이지
 
 실제 naeil.dev 브랜드 헤더를 이어받는 앱은 선택적 React 전용 `@naeil/ui/naeil-header`의 `NaeilHeader`를 사용한다. 전체 프로젝트 메뉴·헤더 번역·테마/선택적 언어 컨트롤·toolbar·반응형 스타일을 한 모듈에서 제공하므로 소비 앱에 다시 복사하지 않는다. 소비 앱은 기존 theme provider, 라우팅·저장 guard, 현재 언어와 실제 인증 슬롯을 연결한다. 언어 변경을 지원하지 않으면 `onLocaleChange`를 생략한다. [전체 헤더 계약](../components/naeil-header.md)을 참조한다.
 
-이 브랜드 헤더는 고정 높이 65px, 최대 폭 1280px, 좌우 여백 24px를 사용한다. 본문·푸터의 제품별 폭과 독립적이다. 소비 앱은 main·sticky 영역과 초점/anchor 이동에 `calc(var(--ui-navigation-height) + 1px)`만큼 여유를 둔다. 다섯 장식 이미지는 공식 `https://naeil.dev/images/*.png` URL을 참조하므로 네트워크가 필요하다. 이미지 바이트는 npm에 포함하지 않으며 재배포 출처·권리 미해결 사항은 [제3자 고지](../../THIRD_PARTY_NOTICES.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)에 유지한다.
 
 다른 제품 메뉴에는 `@naeil/ui/ui`의 범용 `Navigation`과 `SiteFooter`를 조합하고 제품 메뉴 데이터·번역·폭을 소유한다. 기존 `Nav`·`Footer`는 Next/next-intl 호환 API를 유지한다. [범용 API와 마이그레이션 안내](../components/navigation.md)를 참조한다. Naeil Home 운영 적용은 아직 완료되지 않았으며 저장소의 `docs/design/navigation-footer-integration.md`에서 추적한다.
 
 앱의 공통 헤더·메뉴·좌우 여백과 본문의 읽기/설정/목록 폭은 별도로 관리한다. 같은 앱 틀을 사용하는 페이지는 같은 화면 크기·언어·테마에서 메뉴 위치가 유지되어야 한다. 설정 폼을 640px로 제한할 때 헤더까지 그 폭에 종속시키지 않는다. 변동하는 계정 수·상태 요약도 메뉴를 밀어내지 않도록 배치한다.
 
-아래는 소비 앱의 구성 예이며 새 패키지 API가 아니다. `product-frame`과 최대 폭·여백은 제품에서 소유하고 정한다. 공통 숫자 토큰은 `src/tokens/*.json`을 기준으로 한다.
+아래처럼 실제 공통 컴포넌트로 앱 틀을 구성한다. 공통 헤더·푸터는 내부에 프레임이 있으므로 다른 패딩 컨테이너로 다시 감싸지 않는다. `items`, `pathname`, `ProductControls`는 제품이 제공한다. 고정형 브랜드 헤더를 사용하는 완성 예제와 소비 앱에 복사할 `AGENTS.md` 규칙은 [Application layout](../components/application-layout.md)에 있다.
 
 ```tsx
+import { Navigation, SiteFooter } from "@naeil/ui/ui";
+
 <>
-  <header>
-    <div className="product-frame"><ProductNavigation /></div>
-  </header>
-  <main className="product-frame">
+  <Navigation brand={<a href="/">My product</a>}
+    items={items} currentHref={pathname} toolbar={<ProductControls />}
+    labels={{ navigation: "주 메뉴", menu: "메뉴", close: "닫기" }} />
+  <main className="ui-app-frame">
     <section data-ui-layout="settings">{/* 설정 폼 */}</section>
   </main>
+  <SiteFooter variant="compact" meta="Product information" />
 </>
 ```
 
 ```css
-/* 제품이 결정한 --product-frame-max, --product-gutter를 사용한다. */
-.product-frame {
-  box-sizing: border-box;
-  width: 100%;
-  max-width: var(--product-frame-max, 100%);
-  margin-inline: auto;
-  padding-inline: var(--product-gutter, 0);
+/* 의도적인 제품 예외는 세 영역의 공통 조상에서 재정의한다. */
+.product-shell {
+  --ui-width-frame: 1280px;
+  --ui-frame-gutter: 24px;
 }
 ```
 
-대시보드라는 이유만으로 전체 폭을 쓰거나, 다른 제품의 1600px를 공통 기준으로 가져오지 않는다. 실제 과업·정보량·짧은/긴 내용으로 폭을 판단한다. 내부 카드·보고서 열 수는 모니터 폭보다 실제 콘텐츠 영역 폭에 맞춘다. 필요한 경우 container query를 사용한다.
+이번 1600px는 사용자가 Naeil Home의 실제 폭을 비교한 뒤 공통 기본값으로 선택한 결정이다. 1920px 화면에서는 여백을 제외한 영역이 1520px다. 실제 과업·정보량·짧은/긴 내용으로 내부 구성을 판단한다. 내부 카드·보고서 열 수는 모니터 폭보다 실제 콘텐츠 영역 폭에 맞추며, 필요한 경우 container query를 사용한다.
+
+이전 1280px 헤더·24px 여백과 1200px 목록 기본값이 변경된다. 새 기본값을 적용할 때 기존 `max-w-7xl`·`px-6` 프레임 재정의를 제거한다. 기존 레이아웃을 유지해야 하면 위 프레임 토큰 및 `--ui-width-list: 1200px`를 명시한다. 공개 import·props·소비자 className 재정의는 유지된다. 설치된 패키지와 CSS를 먼저 확인하고, 메뉴·모바일 시트·푸터 구현을 복사하는 대신 공통 API와 슬롯으로 연결한다.
 
 레이아웃 수정의 검증 기준:
 
@@ -170,7 +169,7 @@ Storybook의 로컬 폰트 import는 예시다. 그대로 앱 전역에 모든
 
 ## 0.3 package boundary
 
-The heading retains the original 0.3 migration anchor; the allowlist below reflects the 0.5.0 candidate additions. `/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 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.
 
 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.
 

package/docs/package-release.md

@@ -1,11 +1,13 @@
 # Package verification and release policy
 
-This policy covers the intended **@naeil/ui 0.5.0 release candidate**. Final source/archive verification, registry publication and new hosted deployments are pending. Verified 0.4.0 (2026-10-11) and 0.3.0 publication evidence below remains dated history. UI v2 names a design generation, not an npm major. Future breaking changes require an explicit migration and version decision. Version-scoped installation is in the [README](../README.md#use-the-ui).
+The current implementation candidate is **@naeil/ui 0.7.0**, adding the canonical footer and release identity contract. It is unpublished and requires an explicit migration/release decision. The completed **0.6.0** [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) remains the evidence for the published application frame; do not republish it. Verified 0.5.0, 0.4.0 and 0.3.0 evidence remains dated history. UI v2 names a design generation, not an npm major. Future breaking changes require an explicit migration and version decision. Version-scoped installation is in the [README](../README.md#use-the-ui).
 
 ## Architecture
 
 One repository contains the shared package and the separate Next.js brand/example website. `@naeil/ui/ui` provides React primitives and generic Navigation/SiteFooter. The opt-in React-only `@naeil/ui/naeil-header` provides the complete actual naeil.dev branded header; see [its consumer contract](components/naeil-header.md). The legacy root is a framework compatibility entry with static Next/next-intl imports, even when selecting only Logo or a heading; React-only consumers use the documented shared deep modules. Next and next-intl are optional peers, not optional behavior inside the root. Supply them when importing that entry, Nav, Footer, or i18n/routing. Theme controls and Toaster use the framework-independent React library next-themes, retained as a runtime dependency.
 
+Owned services use `@naeil/ui/naeil-footer` for the canonical localized destinations in full/compact variants; generic SiteFooter and legacy Footer retain their APIs. Footer navigation adapters preserve application save/flush decisions and modified-click behavior. `@naeil/ui/release` is server-safe metadata; it contains no application artifact, credential or environment. Applications compile their own allowlisted artifact/source identity. See [the footer contract](components/naeil-footer.md). The release coordinator remains disabled until its concrete policy, source mappings, immutable artifacts, deployment bridges and recovery targets are reviewed. Publishing a package, creating an update PR or merging it never establishes complete consumer rollout.
+
 Website tools remain development dependencies so maintainers can develop both products. npm tarball consumers install only component runtime dependencies and their host React/ReactDOM. Build entries, package exports and packed checks constrain the public boundary. There is no bundled website action, Supabase helper, Three/hero/cursor module, blog engine or full application message catalog. The opt-in header includes only its three header dictionaries and canonical project catalog. Its five decorative images reference official `https://naeil.dev/images/*.png` URLs and require network access; no image bytes are bundled, and unresolved artwork redistribution provenance remains in [third-party notices](../THIRD_PARTY_NOTICES.md).
 
 ## Checks
@@ -48,9 +50,13 @@ The explicit font-notice regression gate copies the real React fixture config in
 
 ## Publication and deployment
 
-### Intended 0.5.0 release — pending
+### 0.6.0 release scope — 2026-10-16
+
+The owner authorized publication and deployment of the shared 1600px frame, responsive gutters and navigation/footer adoption improvements. Use the exact reviewed source and frozen archive; record npm, GitHub Release, Pages and production results independently. Existing consumer applications need their own upgrade and composition migration. The minor increment marks the deliberate default-width change and added public frame tokens/class.
+
+### Verified 0.5.0 publication — 2026-10-15
 
-The owner authorized npm publication, reviewed main integration and naeil.dev deployment for the whole-header change. Authentication and actual execution are separate from authorization. At this documentation checkpoint no 0.5.0 registry version, tag/release, new hosted Docs, production site deployment or final archive identity is claimed. Freeze and verify the complete candidate before following the procedure below; record each external outcome independently.
+Registry metadata and the [0.5.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0) were rechecked on 2026-10-16. npm published at `2026-10-15T21:48:55.614Z`; the release points to `04229adbecac302efbf50ab2b8a3a40edb0a04bb`. Its archive SHA-256 is `8c9203192d967dc4fae65cc00ae80743244e0ae2363fee8c2c0edd9541d07cf9`. Production deployment7093004444 and Pages deployment7093190956 succeeded for that source; the release retains their detailed verification assets. Earlier pending-publication statements describe the preparation checkpoint, not current registry state.
 
 ### Verified 0.4.0 publication — 2026-10-11
 
@@ -80,7 +86,7 @@ The immutable npm archive's bundled guides are the release-preparation snapshot.
 
 ### Release procedure
 
-The deployed Storybook's component guide URL base uses the 0.3.0 publication-status documentation snapshot `04c5b8cce145a4c387763db6f28d29e62f7664c7`. Runtime/API source-authority links retain tested component snapshot `81fd395031dc5b20074c4d915a8585360ce2d28a`; those foundation links remain valid and were rechecked during 0.4.0 hosted verification. The README documentation index points to the maintained main-branch index. Verify targets at their respective revisions and preserve original sources, dated approval scope and runtime evidence. Freeze subsequent documentation changes separately from immutable release archives.
+Storybook resolves relative Markdown guide links against the release's `v0.6.0` source tag. The tag must point to the reviewed release source, and hosted verification checks that guide links resolve. Historical foundation/source-authority links remain at their original revisions. Freeze subsequent documentation changes separately from immutable release archives.
 
 The authorized 0.3.0 release completed main merge, npm 0.3.0, a GitHub Release and hosted Docs as recorded above. The release maintainer performs external authentication and publication; documentation preparation does not itself execute those operations. The automatic verification workflow does not publish or deploy. Record native/manual observations with their actual scope and carry unrun checks as limitations; do not substitute automated WebKit/axe checks or publication authorization for human certification.
 
@@ -112,7 +118,7 @@ Run the command from this checkout after installing its dependencies. It serves
 
 ### Authorized GitHub Pages publication
 
-The public Docs destination [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/) serves source `e8fe5afc13788a0cac0244b72e78975812f4a2ee` following the 2026-10-11 [Pages run 38114879574](https://github.com/naeil-dev/naeil-ui/actions/runs/38114879574). The [0.4.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.4.0) records deployed source and hosted HTTP/navigation checks; the 0.3.0 deployment above remains history. Pages uses `build_type=workflow` and a **github-pages** main-only deployment branch policy. See [Docs workflow status](https://github.com/naeil-dev/naeil-ui/actions/workflows/publish-docs-manual.yml) for subsequent deployments; preview artifact checks above establish local artifact behavior only.
+The public Docs destination [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/) last completed [Pages run38737502303](https://github.com/naeil-dev/naeil-ui/actions/runs/38737502303) for0.5.0 source `04229adbecac302efbf50ab2b8a3a40edb0a04bb`, rechecked2026-10-16. Subsequent deployments belong to their release records. Pages uses `build_type=workflow` and a **github-pages** main-only deployment branch policy. See [workflow status](https://github.com/naeil-dev/naeil-ui/actions/workflows/publish-docs-manual.yml).
 
 `.github/workflows/publish-docs-manual.yml` is an explicit `workflow_dispatch` recipe with no PR/push trigger. Pages is configured to use **GitHub Actions**; the **github-pages** environment permits deployment from main only. Run the authorized workflow from main with the exact reviewed source SHA; configuration alone does not establish a successful deployment. The workflow file does not enable Pages itself. A default-branch merge can separately invoke the brand site's existing Vercel integration; that production deployment and its asset/font provenance require separate handling.
 
@@ -123,7 +129,7 @@ Select **Publish reviewed UI docs (manual only)** in Actions (or use the command
 gh workflow run publish-docs-manual.yml -f reviewed_sha=FULL_REVIEWED_COMMIT_SHA -f confirmation=PUBLISH_REVIEWED_DOCS
 ```
 
-After a 0.5.0 deployment, verify the manager and iframe under `/naeil-ui/`, all 15 UI and 2 Brand Docs pages, their Usage examples and NaeilHeader JapaneseApplication, canonical artwork and official image references, Docs links, local fonts and exact LICENSE/THIRD_PARTY_NOTICES/font notices. Retain the deployment URL, source SHA and observed HTTP/navigation results. Hosted Storybook uses simulated data and requires no Supabase project, design API key or external font server. Only the reviewed Storybook directory is uploaded; website public assets stay excluded.
+After a 0.6.0 deployment, verify the manager and iframe under `/naeil-ui/`, all 15 UI and 2 Brand Docs pages, their Usage examples and NaeilHeader JapaneseApplication, canonical artwork and official image references, Docs links, local fonts and exact LICENSE/THIRD_PARTY_NOTICES/font notices. Retain the deployment URL, source SHA and observed HTTP/navigation results. Hosted Storybook uses simulated data and requires no Supabase project, design API key or external font server. Only the reviewed Storybook directory is uploaded; website public assets stay excluded.
 
 Normal builds are network-independent after dependency installation. Vite collects notices for actual preview modules; checked-in manager notices conservatively cover named embedded packages and versions from Storybook 10.4.6's original source lock. `check-storybook` fails if a named embedded module lacks a full notice. Four vendored tiny modules have no embedded version in that lock/comments; their original npm notice source is explicitly marked, without an exact-version claim. The exact use-composed-ref@1.4.0 tarball/repository provides MIT metadata but no standalone notice; its metadata plus full declared terms are retained without inventing a year/holder. The client-only@0.0.1 React marker retains its exact metadata and the original React MIT notice. Other missing notices fail the build; no generic MIT fallback passes arbitrary packages.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naeil/ui",
-  "version": "0.5.0",
+  "version": "0.7.1",
   "type": "module",
   "license": "MIT",
   "sideEffects": [
@@ -137,12 +137,20 @@
     "./naeil-header": {
       "types": "./dist/components/naeil-header.d.ts",
       "import": "./dist/components/naeil-header.js"
+    },
+    "./naeil-footer": {
+      "types": "./dist/components/naeil-footer.d.ts",
+      "import": "./dist/components/naeil-footer.js"
+    },
+    "./release": {
+      "types": "./dist/lib/ui-release.d.ts",
+      "import": "./dist/lib/ui-release.js"
     }
   },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:pkg": "pnpm check:brand && tsup && tsup --config tsup.deep.config.ts && tsx scripts/fix-deep-imports.ts && pnpm build:tokens",
+    "build:pkg": "pnpm build:release && pnpm check:brand && tsup && tsup --config tsup.deep.config.ts && tsx scripts/fix-deep-imports.ts && pnpm build:tokens && node scripts/build-release-entry.mjs",
     "start": "next start",
     "lint": "eslint",
     "test": "vitest run",
@@ -157,7 +165,10 @@
     "check:consumers": "tsx scripts/check-consumers.ts",
     "preview:storybook": "tsx scripts/serve-storybook.ts",
     "build:brand": "tsx scripts/build-brand.ts",
-    "check:brand": "tsx scripts/build-brand.ts --check"
+    "check:brand": "tsx scripts/build-brand.ts --check",
+    "build:release": "node scripts/build-ui-release.mjs",
+    "rollout": "node scripts/rollout/rollout.mjs",
+    "test:rollout": "node --test scripts/rollout/*.test.mjs scripts/verify-ui-production.test.mjs"
   },
   "peerDependencies": {
     "next": "^15 || ^16",
@@ -234,7 +245,8 @@
     "docs/design/component-demand.md",
     "docs/design/public-ui-stage4-verification.md",
     "docs/design/public-ui-final-verification.md",
-    "docs/design/public-ui-release-validation.md"
+    "docs/design/public-ui-release-validation.md",
+    "contracts/"
   ],
   "pnpm": {
     "onlyBuiltDependencies": [

package/src/styles/components.css

@@ -13,9 +13,6 @@
     inset-inline: 0;
     width: 100%;
   }
-  .naeil-header-frame {
-    max-width: 80rem;
-  }
   .naeil-header-controls {
     display: flex;
     align-items: center;
@@ -31,6 +28,41 @@
     height: var(--spacing-4-value);
     background: var(--border);
   }
+  .naeil-header-account-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--ui-touch-target);
+    height: var(--ui-touch-target);
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-md-value);
+    background: transparent;
+    color: var(--foreground);
+    cursor: pointer;
+  }
+  .naeil-header-account-trigger:hover,
+  .naeil-header-account-trigger[data-state="open"] {
+    background: var(--surface-subtle);
+  }
+  .naeil-header-account-avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-8-value);
+    height: var(--spacing-8-value);
+    border-radius: 50%;
+    background: var(--secondary);
+    color: var(--secondary-foreground);
+  }
+  .naeil-header-account-avatar svg {
+    width: var(--spacing-4-value);
+    height: var(--spacing-4-value);
+  }
+  .naeil-header-login {
+    font-weight: var(--font-weight-medium);
+  }
   .naeil-header-project-icon {
     display: flex;
     align-items: center;
@@ -40,11 +72,14 @@
     border: 1px solid;
     border-radius: var(--radius-lg-value);
   }
+  .ui-app-frame,
   .ui-navigation-frame,
   .ui-site-footer-frame {
+    box-sizing: border-box;
     width: 100%;
+    max-width: var(--ui-width-frame);
     margin-inline: auto;
-    padding-inline: var(--spacing-6-value);
+    padding-inline: var(--ui-frame-gutter);
   }
   .ui-navigation-frame {
     container-type: inline-size;