@naeil/ui 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # Changelog
 
-## 0.3.0 — 2026-10-02
+## 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.
+- 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
+
+Published to npm at `2026-10-03T04:14:17.028Z`; `latest` was verified as `0.3.0` that day. The [GitHub Release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0), [registry/clean-consumer evidence](https://github.com/naeil-dev/naeil-ui/releases/download/v0.3.0/npm-publication-verification.json) and [Pages deployment](https://github.com/naeil-dev/naeil-ui/actions/runs/36963256014) record publication and live Docs separately from the earlier scope freeze.
 
 - Demand-led Radix Tabs and native Textarea with exact shared deep entries, standalone guides/Docs/Usage and packed behavior checks. Native field/radio composition remains consumer-owned; no FormField/RadioGroup API or dependency added.
 
@@ -11,7 +31,7 @@
 - Include CSS side-effect metadata, migration/design guidance and third-party notices/licenses. Verify isolated tarball consumers and add package/site/Storybook/browser CI.
 - Version-scoped installation and consumer font/theme/density guidance, plus a dispatch-only hosted Docs workflow. Hosted Docs and the brand website have separate deployment scopes; native/manual coverage is recorded separately from automated browser checks.
 
-This entry describes the 0.3.0 release scope; registry availability and tags are verified separately during publication. The historical registry baseline on 2026-10-02 was npm `latest` at `0.2.0`. Changes to the 0.x API boundary use a minor increment; there is no npm 2.0 release implied by UI v2.
+This entry describes the 0.3.0 release scope frozen on 2026-10-02; publication on 2026-10-03 is recorded above without redating earlier implementation evidence. The historical registry baseline on 2026-10-02 was npm `latest` at `0.2.0`. Changes to the 0.x API boundary use a minor increment; there is no npm 2.0 release implied by UI v2.
 
 ## 0.2.0 — published 2026-03-22
 

package/DESIGN.md

@@ -110,6 +110,10 @@ Demonstrate the system in three neutral compositions: a settings form, a selecta
 
 ### Application frame and content widths
 
+The owner approved extracting the actual naeil.dev whole header on2026-10-15. The optional `@naeil/ui/naeil-header` composition centralizes its brand/catalog/control/toolbar/responsive implementation. Its1280px branded frame is the existing website composition, separate from generic Navigation and from each product's content width. Official decorative image URLs are references; no new artwork rights or redistribution is implied. See [NaeilHeader](docs/components/naeil-header.md).
+
+Navigation and footer composition share the React-only `Navigation` and `SiteFooter` core. Existing `Nav`/`Footer` preserve Next compatibility while using that core. Services own menu data, route guards, locale/theme providers, authentication and frame widths; they should not fork the header/footer implementation. A compact dashboard/footer composition and a full website footer share behavior and visual rules without requiring identical product links. See [the component contract](docs/components/navigation.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.
@@ -134,6 +138,29 @@ For application layout changes, compare affected routes side by side under the s
 
 The visual comparisons and implementation scope are accepted. Token generation, component behavior, packed consumption, and actual browser examples have been implemented and checked; see the verification report for results and limits.
 
+## Brand assets and shared components
+
+The approved naeil sunset/island identity is managed independently under `brand/naeil/1.1.1/`. The standalone SVG/PNG/favicon kit is usable without React or this UI package. Its version is separate from the npm version; released brand directories are immutable. New artwork requires a new reviewed brand version. The official wordmark is `.naeil`; its leading period means an ending followed by tomorrow (historical decision: commit 2efb1b0, reaffirmed by the user on 2026-10-11). Keep the period in outlined lettering; standalone symbols need no extra dot.
+
+The shared `Logo` is the React adapter for that source. `brand/current.json` selects the active release for generation, Storybook and consumer checks. `pnpm build:brand` generates `src/components/brand-artwork.generated.tsx`, the Lato notice and app-owned site icons from checksum-verified release files; do not hand-edit the generated artwork. `pnpm check:brand` checks drift and runs before package/Storybook builds. Nav, Footer and the website login use the shared Logo instead of maintaining inline copies. Consumer brand slots remain supported.
+
+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,26 @@ 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.3.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 the **@naeil/ui 0.5.0 release candidate** with React 19 / ReactDOM 19 and Tailwind 4. Final archive verification and registry publication are pending; UI v2 names the design generation independently of npm versioning. Build and pack this checkout, then install the reviewed local archive in your app:
 
 ```sh
-pnpm add --save-exact @naeil/ui@0.3.0
-# npm install --save-exact @naeil/ui@0.3.0
+# In this repository:
+pnpm build:pkg
+npm pack --ignore-scripts --pack-destination /tmp
+# In the consumer app:
+pnpm add --save-exact /tmp/naeil-ui-0.5.0.tgz
 ```
 
-The command requires that version to be available in your registry. For source checkout validation before publication, use the local package workflow below. The [changelog](CHANGELOG.md) describes this version's changes; this guide does not assert the registry's current `latest` tag.
+After registry publication is verified, use `pnpm add --save-exact @naeil/ui@0.5.0`. An install command is not evidence of publication.
+
+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).
 
 Import primitives from the dedicated entrypoint:
 
@@ -59,7 +64,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 the fixed frame, supported locales and adapter contract.
 
 ## Develop the shared UI
 
@@ -76,7 +83,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.3.0.tgz
+# In your consumer app: pnpm add /tmp/naeil-ui-0.5.0.tgz
 ```
 
 | Command | Purpose |
@@ -88,11 +95,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. The hosted Docs destination is [naeil-dev.github.io/naeil-ui](https://naeil-dev.github.io/naeil-ui/), configured for workflow builds and main-only deployment. See [Docs deployment status](https://github.com/naeil-dev/naeil-ui/actions/workflows/publish-docs-manual.yml); live availability is confirmed separately in [release evidence](https://github.com/naeil-dev/naeil-ui/releases) with deployment and hosted HTTP/navigation results. See [preview instructions](docs/package-release.md#storybook-preview-artifact) and [support limits](docs/design/public-ui-support.md).
+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. 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/) were last verified for 0.4.0 with Brand / Logo alongside the 13 primitive families: the [2026-10-11 Pages run](https://github.com/naeil-dev/naeil-ui/actions/runs/38114879574) deployed source `e8fe5af`, and [hosted verification](https://github.com/naeil-dev/naeil-ui/releases/download/v0.4.0/hosted-docs-verification.json) records actual Docs/Usage navigation, fonts, artwork and notice 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/81fd395031dc5b20074c4d915a8585360ce2d28a/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

@@ -40,6 +40,8 @@ Storybook 10.4.6 also bundles Nunito Sans for its manager interface. The origina
 
 The site's `src/app/layout.tsx` separately requests JetBrains Mono via `next/font/google`; no copied font binary is tracked here. Before redistributing fetched site-build fonts, retain the original license/notice supplied with that font (https://github.com/JetBrains/JetBrainsMono). This audit did not inspect the fetched Google font binary/license and does not certify a deployed site's font-notice bundle. Prototype HTML uses external CDNs separately from packed UI styles.
 
+The naeil brand wordmark uses outlined Lato Regular 400 from Google Fonts commit `bd8f81ddb5c74d5c8897b36ad88b440266245103`, `ofl/lato/Lato-Regular.ttf`. The exact [Lato OFL 1.1 notice](licenses/Lato-OFL.txt) accompanies generated artwork in the package and Storybook. The independent brand kit retains the original font and source hashes; the UI package does not redistribute a runtime Lato font. Logo graphics do not become OFL-licensed font software, and naeil brand rights are separate from repository code licensing.
+
 ## Dependencies and references
 
 Radix, Sonner, Lucide, React, Next.js and other npm dependencies carry licenses in their own distributions. They are not newly attributed as copied sources here; preserve their notices if bundling their code. DESIGN.md's Linear analysis is design reference material, not an official Linear specification or a component license. The optional workflow grants no blanket license to 21st catalog code; inspect each retrieved original before adoption.
@@ -47,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.