@naeil/ui 0.3.0 → 0.4.0

package/dist/source/components/footer.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
+import { Logo } from "./logo.js";
 function NavLink({
   href,
   children,
@@ -29,10 +30,7 @@ function Footer({ Link, linksExternal = false }) {
   const t = useTranslations("footer");
   return /* @__PURE__ */ jsx("footer", { className: "border-border/40 border-t", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 sm:flex-row sm:justify-between", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(Logo, { size: 20 }),
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-semibold tracking-tight", children: ".naeil" })
-      ] }),
+      /* @__PURE__ */ jsx(Logo, { variant: "footer", size: 20, className: "block" }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-[240px] text-sm leading-relaxed", children: t("tagline") }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(
@@ -99,48 +97,6 @@ function Footer({ Link, linksExternal = false }) {
     ] })
   ] }) });
 }
-function Logo({ size = 20 }) {
-  const id = `naeil-footer-logo-${size}`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-label": "naeil",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "15",
-            cy: "16",
-            r: "3.5",
-            fill: `url(#${id}-grad)`,
-            mask: `url(#${id})`
-          }
-        ),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-grad`, x1: "15", y1: "12.5", x2: "15", y2: "16", children: [
-            /* @__PURE__ */ jsx("stop", { stopColor: "#eab308" }),
-            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#dc2626" })
-          ] }),
-          /* @__PURE__ */ jsx("mask", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
-        ] })
-      ]
-    }
-  );
-}
 function GitHubIcon() {
   return /* @__PURE__ */ jsx(
     "svg",

package/dist/source/components/index.d.ts

@@ -4,7 +4,7 @@ export { LocaleSwitcher } from './locale-switcher.js';
 export { ThemeToggle } from './theme-toggle.js';
 export { ThemeProvider } from './theme-provider.js';
 export { ThemeToggleIcon } from './theme-toggle-icon.js';
-export { Logo } from './logo.js';
+export { Logo, LogoProps } from './logo.js';
 export { PageTitle, SectionTitle, pageTitleClass, sectionTitleClass } from './typography.js';
 import 'react/jsx-runtime';
 import 'next-themes';

package/dist/source/components/logo.d.ts

@@ -1,9 +1,18 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps } from 'react';
 
-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;
 
-export { Logo };
+export { Logo, type LogoProps };

package/dist/source/components/logo.js

@@ -1,50 +1,89 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-function Logo({
-  size = 20,
-  mono = false,
-  className
-}) {
-  const id = `naeil-logo-${size}`;
-  return /* @__PURE__ */ jsxs(
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { BrandArtwork, brandDimensions, brandVersion } from "./brand-artwork.generated.js";
+const autoThemeCSS = `
+:where(.light,[data-theme="light"]){--naeil-logo-light:inline;--naeil-logo-dark:none}
+:where(.dark,[data-theme="dark"]){--naeil-logo-light:none;--naeil-logo-dark:inline}
+@media(prefers-color-scheme:dark){[data-naeil-theme="auto"]{--naeil-logo-os-light:none;--naeil-logo-os-dark:inline}}
+`;
+function Logo(_a) {
+  var _b = _a, {
+    size = 20,
+    mono = false,
+    variant = "symbol",
+    tone = "color",
+    theme = "auto",
+    label = "naeil",
+    className
+  } = _b, props = __objRest(_b, [
+    "size",
+    "mono",
+    "variant",
+    "tone",
+    "theme",
+    "label",
+    "className"
+  ]);
+  const id = `naeil-${useId()}`;
+  const form = variant === "symbol" && size <= 48 ? "symbol-small" : variant;
+  const mode = mono ? "mono" : `${tone}${theme === "dark" ? "-dark" : ""}`;
+  const asset = `${form}-${mode}`;
+  const geometry = brandDimensions[asset];
+  const auto = !mono && theme === "auto";
+  return /* @__PURE__ */ jsx(
     "svg",
-    {
-      width: size,
+    __spreadProps(__spreadValues({
+      width: size * geometry.width / geometry.height,
       height: size,
-      viewBox: "0 0 24 24",
+      viewBox: geometry.viewBox,
       fill: "none",
-      "aria-label": "naeil",
-      className,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        mono ? /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: "currentColor", mask: `url(#${id})` }) : /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          !mono && /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: `${id}-grad`,
-              x1: "15",
-              y1: "12.5",
-              x2: "15",
-              y2: "16",
-              children: [
-                /* @__PURE__ */ jsx("stop", { stopColor: "#eab308" }),
-                /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#dc2626" })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("mask", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
-        ] })
-      ]
-    }
+      role: label === null ? void 0 : "img",
+      "aria-label": label != null ? label : void 0,
+      "aria-hidden": label === null ? true : void 0,
+      focusable: "false",
+      "data-naeil-brand": brandVersion,
+      "data-naeil-variant": variant,
+      "data-naeil-theme": auto ? "auto" : theme,
+      className
+    }, props), {
+      children: auto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("style", { children: autoThemeCSS }),
+        /* @__PURE__ */ jsx("g", { "data-naeil-palette": "light", style: { display: "var(--naeil-logo-light, var(--naeil-logo-os-light, inline))" }, children: /* @__PURE__ */ jsx(BrandArtwork, { asset, id: `${id}-light` }) }),
+        /* @__PURE__ */ jsx("g", { "data-naeil-palette": "dark", style: { display: "var(--naeil-logo-dark, var(--naeil-logo-os-dark, none))" }, children: /* @__PURE__ */ jsx(BrandArtwork, { asset: `${form}-${tone}-dark`, id: `${id}-dark` }) })
+      ] }) : /* @__PURE__ */ jsx(BrandArtwork, { asset, id })
+    })
   );
 }
 export {

package/dist/source/components/nav.d.ts

@@ -7,11 +7,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;

package/dist/source/components/nav.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
+import { Logo } from "./logo.js";
 import { Badge } from "./ui/badge.js";
 import Image from "next/image";
 const PROJECTS = [
@@ -95,10 +96,7 @@ function Nav({
     }
     return { href: project.href, external: false };
   }
-  const brandContent = brandSlot != null ? brandSlot : /* @__PURE__ */ jsxs("span", { className: "text-foreground flex items-center gap-3 text-xl font-semibold tracking-tight", children: [
-    /* @__PURE__ */ jsx(Logo, { size: 28 }),
-    ".naeil"
-  ] });
+  const brandContent = brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(Logo, { variant: "horizontal", size: 28, className: "block" });
   const brandElement = brandExternal ? /* @__PURE__ */ jsx("a", { href: brandHref, children: brandContent }) : /* @__PURE__ */ jsx(Link, { href: brandHref, children: brandContent });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -340,41 +338,6 @@ function Nav({
     ] }) })
   ] });
 }
-function Logo({
-  size = 20
-}) {
-  const id = `naeil-nav-logo-${size}`;
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-label": "naeil",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M6 4 L6 16 L20 16",
-            stroke: "currentColor",
-            strokeWidth: "2",
-            strokeLinecap: "square",
-            strokeLinejoin: "miter"
-          }
-        ),
-        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-grad`, x1: "15", y1: "12.5", x2: "15", y2: "16", children: [
-            /* @__PURE__ */ jsx("stop", { stopColor: "#eab308" }),
-            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#dc2626" })
-          ] }),
-          /* @__PURE__ */ jsx("mask", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
-        ] })
-      ]
-    }
-  );
-}
 function MenuIcon() {
   return /* @__PURE__ */ jsx(
     "svg",

package/docs/components/README.md

@@ -1,6 +1,6 @@
 # Component usage guides
 
-Prepared `@naeil/ui@0.3.0` (unpublished). [Setup, themes, fonts and shared responsibilities](common.md). Run `pnpm storybook` and choose each family’s Docs or Usage entry. Select chooses a value; DropdownMenu chooses an action.
+Published `@naeil/ui@0.3.0` (2026-10-03; [release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0)). [Setup, themes, fonts and shared responsibilities](common.md). Open the [live Storybook](https://naeil-dev.github.io/naeil-ui/) or run `pnpm storybook` and choose each family’s Docs or Usage entry. Select chooses a value; DropdownMenu chooses an action.
 
 | Family | Guide | Runnable story |
 | --- | --- | --- |

package/docs/components/common.md

@@ -1,6 +1,6 @@
 # Shared usage contract
 
-These guides describe the prepared **0.3.0, unpublished** package. Start with the [consumer setup and migration](../design/v2-migration.md). All listed exports are available from `@naeil/ui/ui`; 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 describe **@naeil/ui 0.3.0, published 2026-10-03** ([release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0)); [live Docs and Usage examples](https://naeil-dev.github.io/naeil-ui/) are available. Start with the [consumer setup and migration](../design/v2-migration.md). All listed exports are available from `@naeil/ui/ui`; 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
 

package/docs/design/public-ui-support.md

@@ -1,10 +1,12 @@
 # Public UI support and manual acceptance
 
-This support matrix targets `@naeil/ui@0.3.0`; it does not assert registry or hosted Docs availability. Current documentation covers 13 families. This matrix describes the current examples/checks, not every consumer or every allowed dependency version. [Dated Stage 3 results](public-ui-stage3-verification.md) identify commands, source hashes and local limitations. [Stage 4 extension results](public-ui-stage4-verification.md) separately cover Tabs/Textarea and native field/choice composition.
+This support matrix targets published `@naeil/ui@0.3.0` (2026-10-03); see [registry/clean-consumer evidence](https://github.com/naeil-dev/naeil-ui/releases/download/v0.3.0/npm-publication-verification.json) and the [release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0) for npm identity and [live Docs](https://naeil-dev.github.io/naeil-ui/) deployment. Current documentation covers 13 families. This matrix describes the current examples/checks, not every consumer or every allowed dependency version. [Dated Stage 3 results](public-ui-stage3-verification.md) identify commands, source hashes and local limitations. [Stage 4 extension results](public-ui-stage4-verification.md) separately cover Tabs/Textarea and native field/choice composition.
 
 Linux CI at `bcf99fca3467ae2b1cd29d54fa24f2569fb6001c` passed package-and-site in both the [push run](https://github.com/naeil-dev/naeil-ui/actions/runs/36945564443) and [PR run](https://github.com/naeil-dev/naeil-ui/actions/runs/36945943651). Their browser jobs failed: respectively 207 passed/4 skipped/2 failed (axe scan collision and Avatar Docs ambiguity), and 208 passed/4 skipped/1 failed (Avatar Docs ambiguity). Firefox application tests passed in both Linux runs. These failed baseline results remain historical evidence in the [final correction follow-up](public-ui-final-verification.md).
 
-The corrected source `9f90493abb4fb1186c948084026c3f4c04074013` passed independent scoped review with no actionable findings and both actual Linux workflows: [push](https://github.com/naeil-dev/naeil-ui/actions/runs/36948276767) and [PR](https://github.com/naeil-dev/naeil-ui/actions/runs/36948280881). The PR browser suite passed **209 tests with 4 expected forced-colors skips** (two each in Firefox/WebKit); package-and-site and optional helper checks also passed. Root verified the downloaded PR Storybook artifact and its `/naeil-ui/` navigation/fonts in Chromium/WebKit. This evidence applies to that exact source; [live PR checks](https://github.com/naeil-dev/naeil-ui/pull/1/checks) report later documentation-head status. Review/CI acceptance applies to its recorded source and does not complete native/manual platform coverage. Publication authorization is a separate decision; unrun checks remain limitations rather than completed results.
+The corrected source `9f90493abb4fb1186c948084026c3f4c04074013` passed independent scoped review with no actionable findings and both actual Linux workflows: [push](https://github.com/naeil-dev/naeil-ui/actions/runs/36948276767) and [PR](https://github.com/naeil-dev/naeil-ui/actions/runs/36948280881). The PR browser suite passed **209 tests with 4 expected forced-colors skips** (two each in Firefox/WebKit); package-and-site and optional helper checks also passed. Root verified the downloaded PR Storybook artifact and its `/naeil-ui/` navigation/fonts in Chromium/WebKit. This evidence applies to that exact source; [merged PR checks](https://github.com/naeil-dev/naeil-ui/pull/1/checks) retain the release-preparation checks. Subsequent documentation changes require their own verification. Review/CI acceptance applies to its recorded source and does not complete native/manual platform coverage. Publication completed separately on 2026-10-03; unrun checks remain limitations rather than completed results.
+
+Fresh npm-registry installs in clean-cache React/Next apps passed types/build, production fonts and blocked-font fallback, mixed-import ownership/StrictMode, Chromium/WebKit Tabs/Textarea contracts and Next 16.1.7 root/deep prerender; the [publication receipt](https://github.com/naeil-dev/naeil-ui/releases/download/v0.3.0/npm-publication-verification.json) gives their scope. The development overlay replay probe retains 34 Vite font allowlist warnings; it certifies overlay replay only, and font success applies to production. These fixtures do not establish adoption in a real consumer product.
 
 | Environment / capability | Contract and evidence |
 | --- | --- |

package/docs/design/v2-migration.md

@@ -2,22 +2,22 @@
 
 이 안내는 `@naeil/ui`의 기본 모양과 재사용 규칙을 설명한다. 패키지 소비와 소비 사이트 배포는 별도 작업이다.
 
-이 안내는 **@naeil/ui 0.3.0**의 CSS·API·패키지 경계를 대상으로 한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다. 기존 npm 0.2.0에 이 기능이 모두 구현됐다고 가정하지 않는다. Registry의 게시 여부와 latest 태그는 별도로 확인한다.
+이 안내는 **@naeil/ui 0.4.0**의 CSS·API·패키지 경계를 대상으로 한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다. 기존 npm 0.2.0에 이 기능이 모두 구현됐다고 가정하지 않는다. Registry의 게시 여부와 latest 태그는 별도로 확인한다.
 
 ## 시작하기
 
 React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui`를 사용한다. API 키와 Next.js는 필요 없다. 소비 앱에서 정확한 버전을 지정한다.
 
 ```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
 ```
 
-이 명령은 해당 버전이 registry에 있을 때 사용할 수 있다. 게시 전 소스 검증은 저장소에서 `pnpm build:pkg` 후 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고, 소비 앱에 `/tmp/naeil-ui-0.3.0.tgz`를 설치한다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/examples/react/README.md)와 [검증/릴리스 정책](../package-release.md)을 참고한다.
+이 명령은 해당 버전이 registry에 있을 때 사용할 수 있다. 게시 전 소스 검증은 저장소에서 `pnpm build:pkg` 후 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고, 소비 앱에 `/tmp/naeil-ui-0.4.0.tgz`를 설치한다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/examples/react/README.md)와 [검증/릴리스 정책](../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.3.0을 지정하고 [변경 기록](../../CHANGELOG.md)을 확인한다.
+버전을 생략한 설치는 registry의 latest 태그를 따른다. 이 안내와 동일한 경계를 사용하려면 0.4.0을 지정하고 [변경 기록](../../CHANGELOG.md)을 확인한다.
 
 Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번 불러온다.
 
@@ -197,3 +197,33 @@ The reachable Next consumer's observed deep imports (Nav, Footer, ThemeProvider,
 ## Demand-led extension
 
 Version 0.3.0 also adds `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` and `Textarea` to `/ui`, plus exact `components/ui/tabs` and `components/ui/textarea` deep entries. Existing root stays the brand/framework barrel. No new dependency or existing default is changed. See the [13-family index](../components/README.md), [Tabs defaults/mount responsibilities](../components/tabs.md), [native Textarea contract](../components/textarea.md), [field/native-radio composition](../components/composition.md), and [demand decision](component-demand.md). Publishing does not update consumers that use locally copied primitives.
+
+
+## Brand Logo integration (0.4.0)
+
+Version 0.4.0 connects the approved **brand 1.1.1** to the shared components. It is not a claim that npm 0.3.0 already contains the new logo. Package publication and consumer upgrades remain separate.
+
+```tsx
+// React-only, no Next.js peer required for this deep import:
+import { Logo, type LogoProps } from '@naeil/ui/components/logo';
+
+<Logo size={32} />
+<Logo variant="horizontal" size={28} />
+<Logo variant="footer" size={20} />
+<Logo tone="gray" size={40} />
+<Logo variant="horizontal" size={28} theme="dark" />
+<a href="/" aria-label="naeil 홈"><Logo size={28} label={null} /></a>
+```
+
+Root and `components/index` continue to export Logo; root still has the existing Next/next-intl compatibility peers. `LogoProps` is also exported. No brand export is added to `/ui`.
+
+- `size` remains the rendered height, default 20px. Default `variant="symbol"` remains square. The 16–48px symbol uses the reviewed small artwork; larger symbols use the detailed source. `horizontal`, `footer`, `stacked` and `wordmark` preserve their aspect ratio. Header height 28px and footer height 20px are recommended. For stacked use a minimum height of 140px (160px width).
+- `className`, standard SVG props and consumer style overrides are retained. Avoid stretching width and height independently. Artwork contains paths, not text or external images; Lato installation is unnecessary.
+- `theme="auto"` follows the nearest `.light`, `.dark`, `data-theme="light"` or `data-theme="dark"` ancestor, with OS preference as fallback. It uses embedded SVG CSS and React useId, so SSR markup does not branch on browser state. For strict CSP or manual control, provide `theme="light"` or `theme="dark"`; that form emits no theme style element. Multiple independently hydrated React roots should use distinct React identifierPrefix values as usual.
+- `tone="color"` is default. `tone="gray"` uses the selected grayscale A, including islands. Existing `mono` remains a **single currentColor silhouette** for compatibility; its one-ink shape loses the internal sun/island distinction. It is not the preferred grayscale version or a separately approved print master. `mono` takes precedence over tone/theme colors.
+- Default accessible name is naeil with role=img. Use `label={null}` for decorative use and name the enclosing link/button. `aria-label` and other standard SVG attributes remain consumer overrides.
+- Nav now uses the horizontal wordmark at 28px; Footer uses the footer lockup at 20px. Their official visible spelling remains `.naeil`: the period marks an ending, followed by tomorrow. Nav's `brandSlot`, brandHref, external/internal links, layout frame and other slots are preserved. Check custom layouts on upgrade because the new artwork has a different width.
+
+The independent kit lives in the repository's `brand/naeil/1.1.1/` directory with its own usage guide, SVG/PNG/icons, OFL and checksums. Copy it for non-React uses without installing @naeil/ui. It is intentionally not copied into the npm tarball. The package carries only generated React artwork and the [Lato notice](../../licenses/Lato-OFL.txt). A favicon is application-owned: Next file conventions can use the kit's favicon.ico, favicon.svg and apple-touch-icon.png; each consumer chooses its own app manifest and deployment.
+
+Maintainers run `pnpm build:brand` after explicitly selecting a reviewed version in `brand/current.json`, then `pnpm check:brand`. Package/Storybook builds check that generated artwork, notices and this site's icon files match that version. Shared color tokens and Pretendard do not change. In Storybook, **Brand / Logo / Docs, Usage, Application** demonstrates the actual adapter, canonical SVG comparisons and Nav/Footer composition.

package/docs/package-release.md

@@ -1,6 +1,6 @@
 # Package verification and release policy
 
-This policy covers `@naeil/ui@0.3.0`. UI v2 names a design generation, not an npm major. A 0.x minor increment communicates this dependency/export boundary change; future breaking changes must receive an explicit migration and version decision. The historical registry baseline on 2026-10-02 was npm latest at `0.2.0`; release completion requires separate registry, GitHub Release and hosted Docs evidence. Version-scoped installation is in the [README](../README.md#use-the-ui).
+This policy covers `@naeil/ui@0.4.0`; the 0.3.0 publication evidence below is retained as history. UI v2 names a design generation, not an npm major. A 0.x minor increment communicates this dependency/export boundary change; future breaking changes must receive an explicit migration and version decision. The historical registry baseline on 2026-10-02 was npm latest at `0.2.0`; the 2026-10-03 publication evidence below records npm 0.3.0, its GitHub Release and live hosted Docs separately. Version-scoped installation is in the [README](../README.md#use-the-ui).
 
 ## Architecture
 
@@ -33,17 +33,36 @@ pnpm test:browser
 
 CI runs these checks and a separate actual Storybook/browser job. Configured browser projects run Chromium, Firefox and WebKit in CI. Local Chromium/WebKit results and the Firefox environment launch block are distinguished in the [current support matrix](design/public-ui-support.md) and [dated Stage 3 verification](design/public-ui-stage3-verification.md) and [Stage 4 extension verification](design/public-ui-stage4-verification.md); configured CI is not a recorded remote pass. Automated axe/keyboard checks are not manual screen-reader or native Safari certification. The website build checks compatibility independently from package consumption; fonts fetched through next/font may require network access. Supabase OAuth and deployed behavior remain separate checks.
 
-At baseline `bcf99fca3467ae2b1cd29d54fa24f2569fb6001c`, both [push CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36945564443) and [PR CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36945943651) passed package-and-site and failed the browser job. Linux Firefox application coverage passed in those runs. The [final correction follow-up](design/public-ui-final-verification.md) preserves that baseline and the initial local freeze evidence, then records independent scoped review approval and successful [push CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36948276767) and [PR CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36948280881) at exact correction commit `9f90493abb4fb1186c948084026c3f4c04074013`. The PR browser job passed 209 tests with 4 expected Firefox/WebKit forced-colors skips; package-and-site and optional helper checks passed. The downloaded CI preview also passed actual Chromium/WebKit subpath navigation/font checks. This acceptance applies to that source; [live PR checks](https://github.com/naeil-dev/naeil-ui/pull/1/checks) report later documentation-head status. Publication and manual platform acceptance remain separate.
+At baseline `bcf99fca3467ae2b1cd29d54fa24f2569fb6001c`, both [push CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36945564443) and [PR CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36945943651) passed package-and-site and failed the browser job. Linux Firefox application coverage passed in those runs. The [final correction follow-up](design/public-ui-final-verification.md) preserves that baseline and the initial local freeze evidence, then records independent scoped review approval and successful [push CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36948276767) and [PR CI](https://github.com/naeil-dev/naeil-ui/actions/runs/36948280881) at exact correction commit `9f90493abb4fb1186c948084026c3f4c04074013`. The PR browser job passed 209 tests with 4 expected Firefox/WebKit forced-colors skips; package-and-site and optional helper checks passed. The downloaded CI preview also passed actual Chromium/WebKit subpath navigation/font checks. This acceptance applies to that source; [merged PR checks](https://github.com/naeil-dev/naeil-ui/pull/1/checks) retain the release-preparation checks. Subsequent documentation changes require their own verification. Publication and manual platform acceptance remain separate.
 
 The explicit font-notice regression gate copies the real React fixture config into scratch and installs only its existing Vite/Tailwind-plugin/font dependencies, with scripts disabled. It loads the installed fixture Vite and checks output ownership and exact OFL bytes. Like clean-consumer checks, it requires network for uncached npm dependencies and cleans scratch on failure.
 
 ## Publication and deployment
 
-Maintained source-authority links and the Storybook guide URL base use tested component snapshot `81fd395031dc5b20074c4d915a8585360ce2d28a`. Those pins identify the reviewed component/source contract and remain valid; documentation-only release preparation does not require repinning every historical or component guide. Verify each target exists at its pinned revision and preserve original upstream sources, dated approval scope and runtime evidence. Freeze later documentation changes and the intended archive separately.
+### 0.4.0 release scope — 2026-10-11
 
-The authorized 0.3.0 release scope includes main merge, npm 0.3.0, a GitHub Release and hosted Docs. 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.
+The user authorized repository integration, npm publication, hosted Docs and naeil.dev deployment for the approved `.naeil` logo. Brand 1.1.1 is independent of npm 0.4.0. Existing imports/props/slots remain supported; new Logo variants, grayscale and theme controls justify a minor package increment. New consumers should use the 0.4.0 instructions above the historical records.
 
-For the authorized release, use the exact frozen source and archive:
+Follow the release procedure below with version 0.4.0, freeze and publish the inspected archive, and record actual registry/tag/site/Docs outcomes in the v0.4.0 GitHub Release. Authorization is not itself evidence of publication. The previous Supabase-local-runtime and manual-device limitations remain documented; verify production behavior at its actual URL after Vercel deployment.
+
+### Verified 0.3.0 publication — 2026-10-03
+
+- npm published `@naeil/ui@0.3.0` at `2026-10-03T04:14:17.028Z`; `latest` was verified as `0.3.0` that day. [Public machine-readable evidence](https://github.com/naeil-dev/naeil-ui/releases/download/v0.3.0/npm-publication-verification.json) records registry integrity and fresh consumption.
+- [PR #1](https://github.com/naeil-dev/naeil-ui/pull/1) merged as `71464f3985d0146c85087411d1e2f07ddaaaaab0`, with the same tree as independently approved `0d51755160b3d8e986c9b464b123fa4beed2689a`. Tag `v0.3.0` points to the merge commit; the [GitHub Release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0) retains the reviewed archive.
+- The registry archive matches the reviewed bytes: **105 files**, **453,120 unpacked bytes**, SHA-256 `b71a81b22354f6b7c17610ef9c02650fbd2a84e4309706e311dd62fe32a66d27`.
+- [Hosted Docs](https://naeil-dev.github.io/naeil-ui/) are live following the 2026-10-02 [Pages run 36963256014](https://github.com/naeil-dev/naeil-ui/actions/runs/36963256014). Recorded Chromium/WebKit checks covered all 13 Docs pages, Docs-to-Usage navigation, local fonts and pinned links.
+
+Fresh actual npm installs in separate React/Next apps with empty caches passed types and production builds, production font/fallback checks, mixed-import ownership/StrictMode checks, Chromium/WebKit extension contracts and Next 16.1.7 root/deep prerender. The development overlay probe retains 34 Vite font allowlist warnings and certifies overlay replay only; font success applies to production. Publication did not rerun the full CI/browser suite for unchanged reviewed source/runtime bytes. Native/manual coverage and real-product adoption remain open; see [support limits](design/public-ui-support.md).
+
+The immutable npm archive's bundled guides are the release-preparation snapshot. Maintained GitHub guides record subsequent publication status; documentation-only changes do not alter npm 0.3.0, its tag or release asset. Hosted Docs reflect their separately deployed source.
+
+### Release procedure
+
+The Storybook guide URL base and README documentation index use publication-status documentation snapshot `04c5b8cce145a4c387763db6f28d29e62f7664c7`. Runtime/API source-authority links retain tested component snapshot `81fd395031dc5b20074c4d915a8585360ce2d28a`; that original evidence remains valid and is not replaced by this documentation-only snapshot. Verify targets at their respective pinned revisions and preserve original upstream sources, dated approval scope and runtime evidence. Freeze subsequent documentation changes separately from the immutable 0.3.0 archive.
+
+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.
+
+The 0.3.0 publication procedure below preserves the distinction between preparation and external verification; future releases require their own version, authorization and frozen source/archive:
 
 1. Review the changelog, migration, dated verification and the [2026-10-02 native environment report](design/public-ui-release-validation.md). Its capability blockers leave all native/manual acceptance rows open and add no native component pass. Confirm maintained links, actual Storybook Docs/Usage and legal notices for the intended source. Record unresolved manual coverage without inventing passes.
 2. Build and inspect a fresh archive with `npm pack --ignore-scripts --json --pack-destination /path/to/candidate`; preserve its SHA-256, file list and source revision outside the archive. Run boundary/relative-link checks and clean packed consumers on that candidate.
@@ -71,7 +90,7 @@ Run the command from this checkout after installing its dependencies. It serves
 
 ### Authorized GitHub Pages publication
 
-The public Docs destination is [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/), configured with Pages `build_type=workflow` and a **github-pages** main-only deployment branch policy. 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 the deployed source, deployment result and hosted HTTP/navigation checks; 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/) is live following the 2026-10-02 [Pages run 36963256014](https://github.com/naeil-dev/naeil-ui/actions/runs/36963256014). The [release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.3.0) records deployed source and hosted HTTP/navigation checks. 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.
 
 `.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.
 

package/licenses/Lato-OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naeil/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "sideEffects": [
@@ -130,12 +130,12 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "build:pkg": "tsup && tsup --config tsup.deep.config.ts && tsx scripts/fix-deep-imports.ts && pnpm build:tokens",
+    "build:pkg": "pnpm check:brand && tsup && tsup --config tsup.deep.config.ts && tsx scripts/fix-deep-imports.ts && pnpm build:tokens",
     "start": "next start",
     "lint": "eslint",
     "test": "vitest run",
     "storybook": "tsx scripts/prepare-storybook.ts && storybook dev -p 6006",
-    "build:storybook": "tsx scripts/prepare-storybook.ts && storybook build && tsx scripts/check-storybook.ts",
+    "build:storybook": "pnpm check:brand && tsx scripts/prepare-storybook.ts && storybook build && tsx scripts/check-storybook.ts",
     "build:tokens": "tsx scripts/build-tokens.ts",
     "check:contrast": "tsx scripts/check-contrast.ts",
     "test:browser": "playwright test",
@@ -143,7 +143,9 @@
     "check:types": "tsc --noEmit",
     "check:package:boundary": "tsx scripts/check-package.ts",
     "check:consumers": "tsx scripts/check-consumers.ts",
-    "preview:storybook": "tsx scripts/serve-storybook.ts"
+    "preview:storybook": "tsx scripts/serve-storybook.ts",
+    "build:brand": "tsx scripts/build-brand.ts",
+    "check:brand": "tsx scripts/build-brand.ts --check"
   },
   "peerDependencies": {
     "next": "^15 || ^16",