@naeil/ui 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-## 0.3.0 — 2026-10-02
+## 0.4.0 — brand 1.1.1 integration (2026-10-11)
+
+- 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.
+
+
+## 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 +21,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

@@ -134,6 +134,14 @@ 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.
+
 ## 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

@@ -13,14 +13,14 @@ This repository also contains the **naeil.dev brand/example website** and an **o
 
 ## 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 **@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:
 
 ```sh
-pnpm add --save-exact @naeil/ui@0.3.0
-# npm install --save-exact @naeil/ui@0.3.0
+pnpm add --save-exact @naeil/ui@0.4.0
+# npm install --save-exact @naeil/ui@0.4.0
 ```
 
-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.
+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.
 
 Import primitives from the dedicated entrypoint:
 
@@ -76,7 +76,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.4.0.tgz
 ```
 
 | Command | Purpose |
@@ -88,11 +88,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. [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.
 
 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/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.
 
 ## 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.

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
 import * as React$1 from 'react';
+import { SVGProps } from 'react';
 
 interface NavProps {
     /** Internal Link component (from consumer's next-intl routing) */
@@ -9,11 +10,11 @@ interface NavProps {
     }>;
     /** Current pathname value (already resolved, not a hook) */
     usePathname: () => string;
-    /** Where the .naeil logo links to. Default: "/" */
+    /** Where the naeil logo links to. Default: "/" */
     brandHref?: string;
     /** Whether brandHref is external (renders <a>) or internal (renders Link). Default: false */
     brandExternal?: boolean;
-    /** Custom brand content (replaces default Logo + ".naeil" text) */
+    /** Custom brand content (replaces the default naeil wordmark lockup) */
     brandSlot?: React.ReactNode;
     /** When true, project links (except current) are rendered as external <a> to externalBaseUrl. Default: false */
     projectsExternal?: boolean;
@@ -70,11 +71,19 @@ declare function ThemeProvider({ children, ...props }: React.ComponentProps<type
 
 declare function ThemeToggleIcon(): react_jsx_runtime.JSX.Element;
 
-declare function Logo({ size, mono, className, }: {
+interface LogoProps extends Omit<SVGProps<SVGSVGElement>, "children" | "width" | "height" | "viewBox"> {
+    /** Rendered height. Symbol stays square; lockups preserve their aspect ratio. */
     size?: number;
+    /** Legacy single-ink currentColor silhouette. Prefer tone="gray" for tonal detail. */
     mono?: boolean;
-    className?: string;
-}): react_jsx_runtime.JSX.Element;
+    variant?: "symbol" | "horizontal" | "footer" | "stacked" | "wordmark";
+    tone?: "color" | "gray";
+    /** Auto follows the nearest .light/.dark or data-theme ancestor, then the OS. */
+    theme?: "auto" | "light" | "dark";
+    /** null marks a decorative logo; label the containing link instead. */
+    label?: string | null;
+}
+declare function Logo({ size, mono, variant, tone, theme, label, className, ...props }: LogoProps): react_jsx_runtime.JSX.Element;
 
 type HeadingProps = React$1.HTMLAttributes<HTMLHeadingElement> & {
     children: React$1.ReactNode;
@@ -84,4 +93,4 @@ declare const sectionTitleClass = "text-foreground text-xl font-semibold";
 declare function PageTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 declare function SectionTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 
-export { Footer, LocaleSwitcher, Logo, Nav, PageTitle, SectionTitle, ThemeProvider, ThemeToggle, ThemeToggleIcon, pageTitleClass, sectionTitleClass };
+export { Footer, LocaleSwitcher, Logo, type LogoProps, Nav, PageTitle, SectionTitle, ThemeProvider, ThemeToggle, ThemeToggleIcon, pageTitleClass, sectionTitleClass };