@naeil/ui 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,11 +1,29 @@
 # Changelog
 
+## 0.6.0 — shared application frame (2026-10-16)
+
+- Align Navigation, SiteFooter, NaeilHeader and preserved Nav/Footer adapters with a shared 1600px maximum outer frame and responsive `clamp(16px, 2.4vw, 40px)` gutters. Add `ui-app-frame` for main composition; retain explicit classes and product token overrides.
+- Increase the list content cap from 1200px to 1600px within available frame space. Reading/settings remain 640px and short forms 480px. Remove prior `max-w-7xl` or `px-6` frame overrides when adopting defaults.
+- Add application-layout and consumer-agent guidance for shared header/footer selection; synchronize the standalone React example with the matching 0.6.0 archive. Existing external consumers require their own upgrades and adapter migrations.
+
+Archive identity, registry publication and hosted deployment outcomes are recorded in the [0.6.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0). External application upgrades remain separate.
+
+## 0.5.0 — shared whole header (2026-10-15)
+
+- Add optional React-only NaeilHeader with the actual site catalog, controls, toolbar, fixed frame and responsive behavior. Site adapters consume the same module; preserve existing public compatibility imports/props.
+- Include previously unpublished shared Navigation/SiteFooter and their styles. Generic /ui remains separate from the branded catalog. Official artwork remains URL-referenced, with no new redistribution claim.
+- Packed React/Next, actual Storybook, site and estimate integration evidence is recorded separately; registry/site/Docs execution and exact release identities are recorded in the dated release evidence.
+
+
 ## 0.4.0 — brand 1.1.1 integration (2026-10-11)
 
+Published to npm at `2026-10-11T05:36:58.047Z`; `latest` was verified as `0.4.0`. The [GitHub Release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.4.0) and tag retain merged source `e8fe5afc13788a0cac0244b72e78975812f4a2ee`, the exact npm archive and the independent brand 1.1.1 ZIP. [Registry/clean-consumer evidence](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/npm-publication-verification.json), [hosted Docs evidence](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/hosted-docs-verification.json) and [production evidence](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/production-verification.json) record the completed external checks.
+
 - Connect Logo, default Nav/Footer and site login to the checksum-verified sunset/island brand kit; remove duplicated old marks.
 - Preserve Logo size/className/mono and Nav brandSlot contracts. Add outlined lockup variants, grayscale tone, explicit/automatic themes and decorative accessibility support. Preserve the leading period in the official .naeil wordmark: an ending followed by tomorrow.
 - Generate React artwork and site icons with build:brand; package/Storybook builds reject drift. Keep standalone SVG/PNG/icons separate from UI runtime and retain the Lato notice.
-- Shared Pretendard typography, neutral tokens and existing public import paths remain unchanged. No npm publication or site deployment is implied.
+- Shared Pretendard typography, neutral tokens and existing public import paths remain unchanged.
+- Publish the byte-verified npm archive; fresh registry installs in independent React/Next apps pass types, production builds and browser contracts. Deploy the same source to [hosted Docs](https://naeil-dev.github.io/naeil-ui/) in [Pages run 38114879574](https://github.com/naeil-dev/naeil-ui/actions/runs/38114879574), and verify the deployed brand on [naeil.dev](https://naeil.dev/) across 24 homepage/login conditions in Chromium/WebKit. Existing native/manual support limits remain open.
 
 
 ## 0.3.0 — scope frozen 2026-10-02; published 2026-10-03

package/DESIGN.md

@@ -110,9 +110,17 @@ Demonstrate the system in three neutral compositions: a settings form, a selecta
 
 ### Application frame and content widths
 
+On 2026-10-16 the owner approved a shared maximum application frame of **1600px**, with responsive inline gutters **clamp(16px, 2.4vw, 40px)**, after inspecting Naeil Home at mobile and desktop widths. This supersedes the prior 1280px branded-header cap and fixed 24px frame gutters. The frame includes its padding, centers on wider screens and shrinks to available space. Numeric values live in `ui.width-frame` and `ui.frame-gutter`; `.ui-app-frame`, `Navigation`, `SiteFooter`, `NaeilHeader`, and the legacy adapters use those same defaults.
+
+The optional `@naeil/ui/naeil-header` composition centralizes the actual naeil.dev brand/catalog/control/toolbar/responsive implementation approved on 2026-10-15. Official decorative image URLs remain references; no new artwork rights or redistribution is implied. See [NaeilHeader](docs/components/naeil-header.md).
+
+Application navigation and footer must use the shared compositions: `NaeilHeader` for the canonical naeil catalog, `Navigation` for different product menus, and `SiteFooter` for both compact and full footers. Existing `Nav`/`Footer` preserve Next compatibility while using that core. Services own menu data, route guards, locale/theme providers and authentication through adapters and slots. Extend the shared API when a reusable behavior is missing instead of copying menu, responsive or footer implementations. See [the application starter and consumer-agent rules](docs/components/application-layout.md).
+
 The application frame owns navigation placement and outer gutters; each content region owns its purpose-specific width. A narrow settings form inside that frame must not move the shared navigation. For routes using the same frame, keep navigation anchors stable at the same viewport, language and theme, including loading and changing summary counts. A shared Header import alone does not establish this consistency.
 
-Choose a product's frame width from its tasks, information density and representative content. A dashboard name or a wide monitor alone does not justify filling all available space. Inspect sparse as well as dense content before selecting a cap or fluid layout. The shared reading/settings/list defaults remain content rules, not a universal application maximum; RelayDock's 1600px decision is not a shared token.
+Content caps are reading **640px**, settings **640px**, short form **480px**, and lists **1600px** (updated from 1200px on 2026-10-16). Put lists, tables and dashboards inside `.ui-app-frame` so they use the space remaining after its gutters. Narrow reading/forms stay inside that stable outer frame. `data-ui-layout="fluid"` uses the available region. At a 1920px viewport the default frame has 1520px of usable width.
+
+Products may deliberately override `--ui-width-frame`, `--ui-frame-gutter`, content tokens or `containerClassName`; apply frame overrides consistently to header, main and footer. Choose exceptions from representative tasks and sparse/dense content, and record the reason. An override is not permission to fork shared chrome. Keep the old list cap with `--ui-width-list: 1200px` where required. The earlier product-specific 1600px observation alone was not a shared rule; the owner's explicit 2026-10-16 decision establishes this new default.
 
 Internal columns must respond to the space available inside their region. Use container queries or an equivalent content-aware layout when viewport breakpoints no longer represent that space. Keep wide tables locally scrollable; check localized labels, wrapping and controls inside cells as well as page overflow. See the [consumer composition guide](docs/design/v2-migration.md#앱-전체-틀과-콘텐츠-폭) for application ownership and checks.
 
@@ -142,6 +150,21 @@ The shared `Logo` is the React adapter for that source. `brand/current.json` sel
 
 Lato Regular 400 is outlined lettering inside the logo only. It does not replace Pretendard, add a webfont dependency or turn the sunset palette into shared action tokens. Logo sizes and placement remain brand guidance, not numeric UI foundation tokens. See the [brand component contract](docs/design/v2-migration.md#brand-logo-integration-040) for themes, sizing, legacy mono behavior and accessibility. The standalone kit, research artifacts and high-resolution PNGs stay out of the npm package; generated artwork and the [Lato notice](licenses/Lato-OFL.txt) ship with the component. Brand names/marks are not relicensed by the repository MIT license.
 
+## Browser identity — tab title and favicon
+
+Accepted on 2026-10-13; naeil.dev spelling revised to `.naeil` by the user on 2026-10-14. Browser identity is part of the shared brand/content contract. The browser owns tab typography and sizing; this is a metadata rule, not a visual component or numeric token.
+
+- Use `Page name — Service name` for named pages, with one space on each side of the em dash. Put the page first so tabs remain distinguishable when titles are truncated.
+- A service home/landing page may use the service name alone. A named task screen such as a dashboard keeps its page name, even when it is the application's entry route.
+- Keep one canonical service spelling: `.naeil` for naeil.dev and `Naeil Home` for Home. The leading period is part of the official brand spelling in both the graphical wordmark and browser metadata. Other products define their canonical service name in their application configuration.
+- Localize the page name with the active UI language; keep the canonical service name unchanged. Use the visible page name or content title, and append the service suffix exactly once.
+- Keep the same service favicon across its routes. Use an approved brand asset; each service owns its icon files, metadata/manifest configuration and deployment.
+- Each application implements the title through its framework metadata or router and updates it on client-side navigation and language changes. Shared Navigation/Logo components do not set document metadata implicitly.
+
+Examples: `Naeil Home`, `대시보드 — Naeil Home`, `API 키 — Naeil Home`, `프로젝트 — .naeil`, `Dashboard — Naeil Home`. See [consumer implementation and verification guidance](docs/design/v2-migration.md#브라우저-탭-제목과-파비콘).
+
+This records the approved rule; it does not assert that existing service metadata has been migrated or deployed.
+
 ## Historical design studies
 
 The sections below record prototype-stage decisions and checks as they occurred. Their references to pending production work describe that earlier stage; current implementation status is above.

package/README.md

@@ -6,21 +6,35 @@ This repository also contains the **naeil.dev brand/example website** and an **o
 
 | Path | Start here | Tools / keys |
 | --- | --- | --- |
-| Use the UI in an app | [Consumer guide](docs/design/v2-migration.md) | React 19, Tailwind 4; **no Next.js or API keys** for `/ui` |
+| Use the UI in an app | [Consumer guide](docs/design/v2-migration.md) | React 19, Tailwind 4; **no Next.js or API keys** for `/ui` or `/naeil-header` |
 | Develop the shared UI | Commands below and [contributing](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/CONTRIBUTING.md) | Node.js 22+, pnpm; no Supabase or 21st key |
 | Use frontend references with an agent | [Optional workflow setup](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/docs/design/frontend-tooling.md) | Supported agent; Python for bundled helpers; your own 21st key only for optional MCP |
 | Develop the brand/example website | [Site setup](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/docs/site-development.md) | Next.js and a separate Supabase project for site authentication |
 
 ## Use the UI
 
-This guide targets **@naeil/ui 0.4.0** with React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation, independently of npm versioning. Install the exact version in your app:
+This guide targets **@naeil/ui 0.6.0** with React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. Install the matching release in your app:
 
 ```sh
-pnpm add --save-exact @naeil/ui@0.4.0
-# npm install --save-exact @naeil/ui@0.4.0
+pnpm add --save-exact @naeil/ui@0.6.0
 ```
 
-This source targets 0.4.0, which adds the approved `.naeil` brand 1.1.1. Registry availability and release evidence are recorded separately in the [release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.4.0). See the [changelog](CHANGELOG.md) and [brand usage](docs/design/v2-migration.md#brand-logo-integration-040); the local package workflow below works before publication.
+For a local candidate, run `pnpm build:pkg` and `npm pack --ignore-scripts --pack-destination /tmp`, then install `/tmp/naeil-ui-0.6.0.tgz`. The [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) tracks archive identity, publication and deployment separately.
+
+The preceding [0.5.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0) was published on 2026-10-15 and introduced the whole shared header. Version 0.6.0 adds the shared 1600px frame; existing applications must upgrade and adopt its layout composition.
+
+Version 0.4.0 was published to npm on 2026-10-11 and verified as `latest`; it adds the approved `.naeil` brand 1.1.1. The [release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.4.0) retains the byte-verified archive and fresh registry-consumer evidence. Download the [independent brand kit](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/naeil-brand-1.1.1.zip) for SVG/PNG/icons and non-React usage. See the [changelog](CHANGELOG.md), [brand usage](docs/design/v2-migration.md#brand-logo-integration-040) and [publication report](https://github.com/naeil-dev/naeil-ui/blob/main/docs/design/naeil-brand-0.4.0-publication.md).
+
+Choose the shared application composition before building a header or footer:
+
+| Application need | Shared component |
+| --- | --- |
+| Actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
+| A product's own menu | `Navigation` from `@naeil/ui/ui` |
+| Full or compact application footer | `SiteFooter` from `@naeil/ui/ui` |
+| Existing Next/next-intl integration | Preserve `Nav` / `Footer` compatibility adapters |
+
+Supply application routing, guards, authentication and menu data through adapters and slots. Keep the shared menu, mobile sheet, controls and footer implementation in the package. The [application layout guide](docs/components/application-layout.md) provides a starter and consumer-agent instructions. Header, main and footer share a 1600px maximum frame with `clamp(16px, 2.4vw, 40px)` gutters; use `ui-app-frame` on main and keep 640px reading/settings or 480px short-form sections inside it.
 
 Import primitives from the dedicated entrypoint:
 
@@ -59,7 +73,9 @@ Mark Japanese content with `lang="ja"`. Keep font OFL notices with redistributed
 
 Shared CSS follows the OS theme unless the document root has `class="light"` or `class="dark"`. For compact spacing, set `data-ui-density="compact"` on that root; omit it for comfortable spacing. Density changes spacing while retaining 16px control text and minimum mobile touch sizes. React apps can also use `ThemeProvider` from `@naeil/ui/components/theme-provider` with `attribute="class"`.
 
-The [13 component guides](docs/components/README.md) cover exact APIs, state composition and accessibility responsibilities. Each has a built Storybook Docs page and runnable Usage example. The [consumer guide](docs/design/v2-migration.md) covers peer dependencies, fonts, themes, density, Select versus DropdownMenu, overrides, and layout ownership. Fonts are delivered by the consumer; shared CSS does not fetch them automatically. `/ui` and `/utils` work without Next.js. The legacy root remains a framework compatibility entry with static Next/next-intl imports; install those optional peers when using it, Nav, Footer or i18n/routing. ThemeProvider/controls and Toaster retain the React library next-themes. Shared deep imports use the exact [allowlist and migration](docs/design/v2-migration.md#03-package-boundary); website-only paths belong in your application.
+The [component guides](docs/components/README.md) cover exact APIs, state composition and accessibility responsibilities. Each has a built Storybook Docs page and runnable Usage example. The [consumer guide](docs/design/v2-migration.md) covers peer dependencies, fonts, themes, density, Select versus DropdownMenu, overrides, and layout ownership. Fonts are delivered by the consumer; shared CSS does not fetch them automatically. `/ui`, `/utils` and the opt-in `/naeil-header` work without Next.js. The legacy root remains a framework compatibility entry with static Next/next-intl imports; install those optional peers when using it, Nav, Footer or i18n/routing. ThemeProvider/controls and Toaster retain the React library next-themes. Shared deep imports use the exact [allowlist and migration](docs/design/v2-migration.md#03-package-boundary); website-only paths belong in your application.
+
+For the actual naeil.dev branded header, import `NaeilHeader` from `@naeil/ui/naeil-header`; generic `Navigation` from `/ui` remains available for different product menus. The whole header owns its catalog, header translations, controls and responsive styles. Supply routing/dirty guards, an existing next-themes provider and real authentication through its props instead of copying the header. Its five decorative project images reference official `naeil.dev` URLs and require network access; their bytes are excluded and unresolved redistribution provenance remains in [third-party notices](THIRD_PARTY_NOTICES.md). See [NaeilHeader](docs/components/naeil-header.md) for fixed positioning, the shared frame, supported locales and adapter contract.
 
 ## Develop the shared UI
 
@@ -76,7 +92,7 @@ Storybook uses the actual public components with simulated example data. It need
 ```sh
 pnpm build:pkg
 pnpm pack --pack-destination /tmp
-# In your consumer app: pnpm add /tmp/naeil-ui-0.4.0.tgz
+# In your consumer app: pnpm add /tmp/naeil-ui-0.6.0.tgz
 ```
 
 | Command | Purpose |
@@ -88,11 +104,11 @@ pnpm pack --pack-destination /tmp
 | `pnpm build:pkg` / `pnpm check:package` | Build package / inspect package boundary and independently install/build packed React + Next consumers |
 | `pnpm dev` / `pnpm build` | Brand/example website development / build |
 
-A [reusable React consumer example](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/examples/react/README.md) shows a settings form. [Release policy](docs/package-release.md) and [changelog](CHANGELOG.md) distinguish implementation, publication and deployment. CI verifies the package and separate website/Storybook. Downloadable preview artifacts include notices and local fonts. [Hosted Docs](https://naeil-dev.github.io/naeil-ui/) are live: the [2026-10-02 Pages run](https://github.com/naeil-dev/naeil-ui/actions/runs/36963256014) and [release evidence](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0) record deployment and hosted HTTP/navigation/font checks. See [preview instructions](docs/package-release.md#storybook-preview-artifact) and [support limits](docs/design/public-ui-support.md). Native/manual platform acceptance and adoption in a real consumer product remain open.
+A [reusable React consumer example](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react) composes the packaged header, a settings form and footer. [Release policy](docs/package-release.md) and [changelog](CHANGELOG.md) distinguish implementation, publication and deployment. CI verifies the package and separate website/Storybook. Downloadable preview artifacts include notices and local fonts. The current local Storybook build contains 17 Docs pages (15 UI families and Brand / Logo plus NaeilHeader), including the whole-header Usage and JapaneseApplication examples. This does not establish a new hosted deployment. [Hosted Docs](https://naeil-dev.github.io/naeil-ui/) have recorded [0.5.0 verification](https://github.com/naeil-dev/naeil-ui/releases/download/v0.5.0/hosted-docs-verification.json). The current release record identifies the subsequent deployed source and its fresh checks. The same approved brand is live on [naeil.dev](https://naeil.dev/). See [preview instructions](docs/package-release.md#storybook-preview-artifact) and [support limits](docs/design/public-ui-support.md). Native/manual platform acceptance and adoption in a real consumer product remain open.
 
 Read [DESIGN.md](DESIGN.md) before shared UI changes. Numeric values live in `src/tokens/`; generated CSS is not edited by hand. Shared styles live in `src/styles/`, site-only styles in `src/app/`. Hero art, 3D scenes, cursor effects, and site content belong to the example website.
 
-[Documentation index](https://github.com/naeil-dev/naeil-ui/blob/04c5b8cce145a4c387763db6f28d29e62f7664c7/docs/README.md) separates maintained guides from dated implementation/review evidence. Historical checks describe their recorded revision and scope; publishing, merging, and site deployment are separate actions.
+[Documentation index](https://github.com/naeil-dev/naeil-ui/blob/main/docs/README.md) separates maintained guides from dated implementation/review evidence. Historical checks describe their recorded revision and scope; publishing, merging, and site deployment are separate actions.
 
 ## Project and license
 

package/THIRD_PARTY_NOTICES.md

@@ -49,3 +49,7 @@ Radix, Sonner, Lucide, React, Next.js and other npm dependencies carry licenses
 ## Website-only assets: unresolved provenance
 
 `public/images/`, `public/svg/`, and `public/coral-concepts.html` contain brand/hero art. History records additions and normalization (`8252a3e`, `9a15ff0`, `e57c21c`) but does not establish each original artist, generation service, source license or redistribution permission. No such provenance is invented here. `public/next.svg`, `public/vercel.svg` and other starter SVGs entered during Next.js setup; logos remain the respective owners' marks. These assets are outside shared UI requirements and the current npm file allowlist. Establish their rights or replace them before a separate public asset/site redistribution claim. This unresolved site-art audit is not package release approval.
+
+### Optional branded header candidate
+
+The0.5.0candidate header refers to the five decorative project images at their official https://naeil.dev/images/ URLs. It does not embed or redistribute those public/images bytes; their unresolved provenance above remains open. Site-adapter extraction does not establish artwork rights or clear unrelated website assets.