@naeil/ui 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/DESIGN.md +7 -3
- package/README.md +19 -10
- package/dist/{chunk-S64H3OYQ.js → chunk-VL7FS4QM.js} +1 -1
- package/dist/components/index.js +2 -2
- package/dist/components/naeil-header.js +1 -1
- package/dist/source/components/footer.js +1 -2
- package/dist/source/components/naeil-header.js +1 -1
- package/docs/components/README.md +3 -1
- package/docs/components/application-layout.md +102 -0
- package/docs/components/common.md +2 -2
- package/docs/components/naeil-header.md +2 -2
- package/docs/components/navigation.md +5 -7
- package/docs/design/v2-migration.md +24 -25
- package/docs/package-release.md +10 -6
- package/package.json +1 -1
- package/src/styles/components.css +4 -4
- package/src/styles/theme.css +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.6.0 — shared application frame (2026-10-16)
|
|
4
|
+
|
|
5
|
+
- 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.
|
|
6
|
+
- 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.
|
|
7
|
+
- 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.
|
|
8
|
+
|
|
9
|
+
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.
|
|
10
|
+
|
|
3
11
|
## 0.5.0 — shared whole header (2026-10-15)
|
|
4
12
|
|
|
5
13
|
- 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.
|
package/DESIGN.md
CHANGED
|
@@ -110,13 +110,17 @@ Demonstrate the system in three neutral compositions: a settings form, a selecta
|
|
|
110
110
|
|
|
111
111
|
### Application frame and content widths
|
|
112
112
|
|
|
113
|
-
|
|
113
|
+
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.
|
|
114
114
|
|
|
115
|
-
|
|
115
|
+
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).
|
|
116
|
+
|
|
117
|
+
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).
|
|
116
118
|
|
|
117
119
|
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.
|
|
118
120
|
|
|
119
|
-
|
|
121
|
+
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.
|
|
122
|
+
|
|
123
|
+
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.
|
|
120
124
|
|
|
121
125
|
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.
|
|
122
126
|
|
package/README.md
CHANGED
|
@@ -13,20 +13,29 @@ This repository also contains the **naeil.dev brand/example website** and an **o
|
|
|
13
13
|
|
|
14
14
|
## Use the UI
|
|
15
15
|
|
|
16
|
-
This guide targets
|
|
16
|
+
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:
|
|
17
17
|
|
|
18
18
|
```sh
|
|
19
|
-
|
|
20
|
-
pnpm build:pkg
|
|
21
|
-
npm pack --ignore-scripts --pack-destination /tmp
|
|
22
|
-
# In the consumer app:
|
|
23
|
-
pnpm add --save-exact /tmp/naeil-ui-0.5.0.tgz
|
|
19
|
+
pnpm add --save-exact @naeil/ui@0.6.0
|
|
24
20
|
```
|
|
25
21
|
|
|
26
|
-
|
|
22
|
+
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.
|
|
23
|
+
|
|
24
|
+
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.
|
|
27
25
|
|
|
28
26
|
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).
|
|
29
27
|
|
|
28
|
+
Choose the shared application composition before building a header or footer:
|
|
29
|
+
|
|
30
|
+
| Application need | Shared component |
|
|
31
|
+
| --- | --- |
|
|
32
|
+
| Actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
|
|
33
|
+
| A product's own menu | `Navigation` from `@naeil/ui/ui` |
|
|
34
|
+
| Full or compact application footer | `SiteFooter` from `@naeil/ui/ui` |
|
|
35
|
+
| Existing Next/next-intl integration | Preserve `Nav` / `Footer` compatibility adapters |
|
|
36
|
+
|
|
37
|
+
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.
|
|
38
|
+
|
|
30
39
|
Import primitives from the dedicated entrypoint:
|
|
31
40
|
|
|
32
41
|
```tsx
|
|
@@ -66,7 +75,7 @@ Shared CSS follows the OS theme unless the document root has `class="light"` or
|
|
|
66
75
|
|
|
67
76
|
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.
|
|
68
77
|
|
|
69
|
-
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
|
|
78
|
+
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.
|
|
70
79
|
|
|
71
80
|
## Develop the shared UI
|
|
72
81
|
|
|
@@ -83,7 +92,7 @@ Storybook uses the actual public components with simulated example data. It need
|
|
|
83
92
|
```sh
|
|
84
93
|
pnpm build:pkg
|
|
85
94
|
pnpm pack --pack-destination /tmp
|
|
86
|
-
# In your consumer app: pnpm add /tmp/naeil-ui-0.
|
|
95
|
+
# In your consumer app: pnpm add /tmp/naeil-ui-0.6.0.tgz
|
|
87
96
|
```
|
|
88
97
|
|
|
89
98
|
| Command | Purpose |
|
|
@@ -95,7 +104,7 @@ pnpm pack --pack-destination /tmp
|
|
|
95
104
|
| `pnpm build:pkg` / `pnpm check:package` | Build package / inspect package boundary and independently install/build packed React + Next consumers |
|
|
96
105
|
| `pnpm dev` / `pnpm build` | Brand/example website development / build |
|
|
97
106
|
|
|
98
|
-
A [reusable React consumer example](https://github.com/naeil-dev/naeil-ui/
|
|
107
|
+
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.
|
|
99
108
|
|
|
100
109
|
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.
|
|
101
110
|
|
|
@@ -1498,7 +1498,7 @@ function NaeilHeader(_a) {
|
|
|
1498
1498
|
toolbar,
|
|
1499
1499
|
mobileToolbar: toolbar,
|
|
1500
1500
|
className: cn("naeil-header fixed top-0 w-full", className),
|
|
1501
|
-
containerClassName: cn("naeil-header-frame
|
|
1501
|
+
containerClassName: cn("naeil-header-frame", containerClassName)
|
|
1502
1502
|
})
|
|
1503
1503
|
);
|
|
1504
1504
|
}
|
package/dist/components/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
Logo,
|
|
4
4
|
NaeilHeader,
|
|
5
5
|
headerLocales
|
|
6
|
-
} from "../chunk-
|
|
6
|
+
} from "../chunk-VL7FS4QM.js";
|
|
7
7
|
import {
|
|
8
8
|
DropdownMenu,
|
|
9
9
|
DropdownMenuContent,
|
|
@@ -105,7 +105,7 @@ function Footer({
|
|
|
105
105
|
{
|
|
106
106
|
Link,
|
|
107
107
|
className,
|
|
108
|
-
containerClassName
|
|
108
|
+
containerClassName,
|
|
109
109
|
variant,
|
|
110
110
|
brand: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx2(Logo, { variant: "footer", size: 20, className: "block" }),
|
|
111
111
|
description: description === void 0 ? t("tagline") : description,
|
|
@@ -22,7 +22,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
22
22
|
import { useTranslations } from "next-intl";
|
|
23
23
|
import { Logo } from "./logo.js";
|
|
24
24
|
import { SiteFooter } from "./ui/site-footer.js";
|
|
25
|
-
import { cn } from "../lib/utils.js";
|
|
26
25
|
function Footer({
|
|
27
26
|
Link,
|
|
28
27
|
linksExternal = false,
|
|
@@ -45,7 +44,7 @@ function Footer({
|
|
|
45
44
|
{
|
|
46
45
|
Link,
|
|
47
46
|
className,
|
|
48
|
-
containerClassName
|
|
47
|
+
containerClassName,
|
|
49
48
|
variant,
|
|
50
49
|
brand: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(Logo, { variant: "footer", size: 20, className: "block" }),
|
|
51
50
|
description: description === void 0 ? t("tagline") : description,
|
|
@@ -185,7 +185,7 @@ function NaeilHeader(_a) {
|
|
|
185
185
|
toolbar,
|
|
186
186
|
mobileToolbar: toolbar,
|
|
187
187
|
className: cn("naeil-header fixed top-0 w-full", className),
|
|
188
|
-
containerClassName: cn("naeil-header-frame
|
|
188
|
+
containerClassName: cn("naeil-header-frame", containerClassName)
|
|
189
189
|
})
|
|
190
190
|
);
|
|
191
191
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# Component usage guides
|
|
2
2
|
|
|
3
|
-
These guides target the **@naeil/ui 0.
|
|
3
|
+
These guides target the **@naeil/ui 0.6.0**; release identities and publication evidence are recorded in the [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0). [Setup, themes, fonts and shared responsibilities](common.md). Run `pnpm storybook` for the current 17 Docs pages (15 UI and 2 Brand) and choose Docs or Usage. The [hosted Storybook](https://naeil-dev.github.io/naeil-ui/) was last verified for [0.5.0 on 2026-10-15](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0); each subsequent deployment is recorded separately. Select chooses a value; DropdownMenu chooses an action.
|
|
4
|
+
|
|
5
|
+
Start application layouts with the [shared navigation/footer selection and frame guide](application-layout.md). It includes a starter, the 1600px frame contract and instructions to place in consumer repositories so agents reuse the shared implementation.
|
|
4
6
|
|
|
5
7
|
| Family | Guide | Runnable story |
|
|
6
8
|
| --- | --- | --- |
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# Application frame and shared navigation/footer
|
|
2
|
+
|
|
3
|
+
This guide targets the **@naeil/ui 0.6.0**, including the width update approved on 2026-10-16. Use the matching registry release or tested local archive. See [consumer setup](../design/v2-migration.md) for CSS, Tailwind sources and fonts.
|
|
4
|
+
|
|
5
|
+
## Choose the shared composition first
|
|
6
|
+
|
|
7
|
+
| Application need | Use |
|
|
8
|
+
| --- | --- |
|
|
9
|
+
| The actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
|
|
10
|
+
| A product's own menu | `Navigation` from `@naeil/ui/ui` |
|
|
11
|
+
| A full or compact application footer | `SiteFooter` from `@naeil/ui/ui` |
|
|
12
|
+
| An existing Next/next-intl consumer | Keep its `Nav` / `Footer` adapters |
|
|
13
|
+
|
|
14
|
+
Choose one header per application frame. Supply menu data, links, route guards, authentication and supported locale state through props/slots. Local adapters are appropriate; copies of the menu, responsive sheet, controls or footer implementation are not. Extend the shared component when a reusable behavior is missing.
|
|
15
|
+
|
|
16
|
+
## Width contract
|
|
17
|
+
|
|
18
|
+
| Region | Default | CSS contract |
|
|
19
|
+
| --- | --- | --- |
|
|
20
|
+
| Header, main, footer outer frame | Maximum 1600px, including gutters | `--ui-width-frame` |
|
|
21
|
+
| Inline gutters | `clamp(16px, 2.4vw, 40px)` | `--ui-frame-gutter` |
|
|
22
|
+
| Reading / settings | Maximum 640px | `data-ui-layout="reading"` / `"settings"` |
|
|
23
|
+
| Short form | Maximum 480px | `data-ui-layout="short-form"` |
|
|
24
|
+
| List / dashboard / table region | Available space inside the frame, capped at 1600px | `data-ui-layout="list"` |
|
|
25
|
+
| Intentionally unrestricted region | Available parent width | `data-ui-layout="fluid"` |
|
|
26
|
+
|
|
27
|
+
Use `.ui-app-frame` on main. Shared header/footer already apply the frame internally; **do not wrap them in another padded frame**. Put purpose-specific sections inside main. At 1920px the default frame has 1520px available after its 40px gutters. Small screens shrink the frame and reduce gutters to at least 16px. A narrow form must not constrain or move navigation.
|
|
28
|
+
|
|
29
|
+
Reserve a consistent scrollbar gutter in the consumer's global CSS when routes can alternate between short and tall content:
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
html { scrollbar-gutter: stable; }
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
This keeps a centered frame from shifting when a classic scrollbar appears. The document scroll policy belongs to the application; the shared components do not set it implicitly. In a 1920px Chromium viewport with a 15px scrollbar, the frame starts at 152.5px with this policy in both short and tall states. Without it, the start changes from 160px to 152.5px. Overlay-scrollbar platforms may reserve no extra space.
|
|
36
|
+
|
|
37
|
+
## Canonical naeil application starter
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import type { ReactNode } from "react";
|
|
41
|
+
import { NaeilHeader } from "@naeil/ui/naeil-header";
|
|
42
|
+
import { SiteFooter } from "@naeil/ui/ui";
|
|
43
|
+
import { Logo } from "@naeil/ui/components/logo";
|
|
44
|
+
|
|
45
|
+
// Render inside the existing next-themes ThemeProvider.
|
|
46
|
+
// Connect Link/onNavigate, locale and authSlot to real application state.
|
|
47
|
+
export function ApplicationLayout({ children }: { children: ReactNode }) {
|
|
48
|
+
return <>
|
|
49
|
+
<NaeilHeader locale="en" />
|
|
50
|
+
<main className="ui-app-frame"
|
|
51
|
+
style={{ marginTop: "calc(var(--ui-navigation-height) + 1px)" }}>
|
|
52
|
+
{children}
|
|
53
|
+
</main>
|
|
54
|
+
<SiteFooter variant="compact"
|
|
55
|
+
brand={<Logo variant="footer" size={20} />} />
|
|
56
|
+
</>;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
<ApplicationLayout>
|
|
60
|
+
<section data-ui-layout="settings">{/* Settings form */}</section>
|
|
61
|
+
</ApplicationLayout>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
`NaeilHeader` is fixed; reserve its 65px height and account for it in sticky areas and focus/anchor scroll margins. Default destinations are official naeil.dev URLs. Preserve routing/unsaved-change guards using the [header contract](naeil-header.md). Only pass `onLocaleChange` when the application supports its complete language set.
|
|
65
|
+
|
|
66
|
+
For a different product menu, use the [generic Navigation composition](navigation.md) with the same main/footer structure. Generic Navigation is in document flow by default and needs no fixed-header clearance. The [standalone React example](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react) exercises the installed header, narrow form and SiteFooter together.
|
|
67
|
+
|
|
68
|
+
## Deliberate overrides
|
|
69
|
+
|
|
70
|
+
Apply overrides on a common ancestor or document root so header, main and footer inherit them together. Explicit `containerClassName` overrides still work. Do not give each route its own header cap or gutter.
|
|
71
|
+
|
|
72
|
+
```css
|
|
73
|
+
/* Product exception: record why this cap is needed. */
|
|
74
|
+
.product-shell {
|
|
75
|
+
--ui-width-frame: 1280px;
|
|
76
|
+
--ui-frame-gutter: 24px;
|
|
77
|
+
}
|
|
78
|
+
/* An existing focused list can retain its previous content cap. */
|
|
79
|
+
.focused-list { --ui-width-list: 1200px; }
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
The new frame/list caps replace the previous 1280px branded header and 1200px list defaults. Remove old `max-w-7xl` or `px-6` frame overrides when adopting the new default. Shared numeric values belong in `src/tokens/ui.json`; regenerate CSS with `pnpm build:tokens`.
|
|
83
|
+
|
|
84
|
+
## Consumer agent instructions
|
|
85
|
+
|
|
86
|
+
Put this in the **consumer application's** `AGENTS.md` (or equivalent repository instructions). Installing a package does not automatically load this repository's agent rules.
|
|
87
|
+
|
|
88
|
+
```markdown
|
|
89
|
+
## Shared application layout
|
|
90
|
+
- Read the installed @naeil/ui/DESIGN.md and docs/components/application-layout.md before UI layout work.
|
|
91
|
+
- Use @naeil/ui/naeil-header for the canonical naeil header; use Navigation from @naeil/ui/ui for a different product menu. Use SiteFooter for application footers. Keep existing Next Nav/Footer compatibility adapters when applicable.
|
|
92
|
+
- Local wrappers supply menu data, routing/guards, locale, auth and slots. Do not copy the menu, mobile sheet, controls or footer implementation. Extend the shared component for reusable missing behavior.
|
|
93
|
+
- Use ui-app-frame on main; navigation/footer own their internal frames. Keep reading/settings/short-form sections inside that frame. Apply frame overrides consistently across routes.
|
|
94
|
+
- Check the installed package version and CSS before creating a replacement for an apparently missing component.
|
|
95
|
+
- Verify actual shared navigation/footer rendering and stable anchors across routes, themes and supported sizes. An import alone is not adoption evidence. Record intentional route exceptions.
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Adoption checks
|
|
99
|
+
|
|
100
|
+
For each consumer, record its installed version, layout adapter, shared imports, CSS entrypoints and intentional exceptions. In that consumer's browser CI, check that expected application routes render `[data-slot="navigation"]` and `[data-slot="site-footer"]`, and that anchors remain stable between wide lists and narrow forms. Include narrow/zoomed screens, localized labels and tall content that introduces a scrollbar. Keep table overflow local.
|
|
101
|
+
|
|
102
|
+
A blanket ban on `<header>`, `<nav>` or `<footer>` would also reject valid section landmarks and adapters. Review the root composition and its rendered output instead. This repository checks packed React/Next examples; external applications still need their own upgrades, adapter migrations and CI. Publication and deployment are separate work.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Shared usage contract
|
|
2
2
|
|
|
3
|
-
These guides target the **@naeil/ui 0.
|
|
3
|
+
These guides target the **@naeil/ui 0.6.0**; release identities and publication evidence are recorded in the [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0). The [hosted Docs](https://naeil-dev.github.io/naeil-ui/) were last verified for [0.5.0 on 2026-10-15](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0), while `pnpm storybook` shows this checkout. Start with the [consumer setup and migration](../design/v2-migration.md). Primitives and generic Navigation/SiteFooter are exported from `@naeil/ui/ui`; the actual branded whole header uses the opt-in [NaeilHeader](naeil-header.md) entry `@naeil/ui/naeil-header`. Both are React-only. The legacy root needs the optional Next/next-intl peers. Examples import real wrappers; product state, validation and network requests belong to consumers.
|
|
4
4
|
|
|
5
5
|
## Styling, themes and overrides
|
|
6
6
|
|
|
7
7
|
Import `@naeil/ui/globals.css` once and register `@source` for the installed package's `dist` in your Tailwind 4 build. Alternatively load both theme.css and components.css alongside your existing Tailwind setup. Deliver Pretendard and, for Japanese, Noto Sans JP locally through your app's font pipeline; the package does not fetch fonts. Keep font OFL notices with redistributed binaries. The independent React example demonstrates consumer-owned delivery.
|
|
8
8
|
|
|
9
|
-
Use `.light`/`.dark` on the document root to override OS theme. Root `data-ui-density="compact"` changes spacing, not text size: default controls are 40px, compact 36px, small screens/coarse pointers at least 44px. Portals use document-level styles/density, so a locally themed subtree alone does not theme portaled content.
|
|
9
|
+
Use `.light`/`.dark` on the document root to override OS theme. Root `data-ui-density="compact"` changes spacing, not text size: default controls are 40px, compact 36px, small screens/coarse pointers at least 44px. Portals use document-level styles/density, so a locally themed subtree alone does not theme portaled content. Header, main and footer share a 1600px maximum outer frame and `clamp(16px, 2.4vw, 40px)` gutters. Use `ui-app-frame` on main; shared header/footer components apply that frame internally. Reading/settings sections remain capped at 640px, short forms at 480px, and lists at 1600px within the available frame space. Product root token overrides and explicit component classes remain supported. The [application layout guide](application-layout.md) explains composition, adoption and consistent overrides.
|
|
10
10
|
|
|
11
11
|
`className` is merged by `cn` (clsx + tailwind-merge). Consumer classes and primitive props remain available. Recheck specificity, text/control/focus contrast, mobile targets and portaled content after overriding. Override semantic color companions together; do not replace only an action hue or remove focus outlines. Reduced-motion rules remove shared transitions/animations. Custom consumer animation still needs its own reduced-motion treatment.
|
|
12
12
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# NaeilHeader — branded whole-header composition
|
|
2
2
|
|
|
3
|
-
This guide targets the **@naeil/ui 0.
|
|
3
|
+
This guide targets the **@naeil/ui 0.6.0**. See the [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) for archive and publication evidence. Import this opt-in React-only entry when an application inherits the actual naeil.dev header. Generic `Navigation` from `/ui` remains available for different product menus.
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
6
|
import { NaeilHeader } from '@naeil/ui/naeil-header';
|
|
@@ -39,7 +39,7 @@ Standard header attributes and the remaining inherited [Navigation props](naviga
|
|
|
39
39
|
|
|
40
40
|
## Frame and content clearance
|
|
41
41
|
|
|
42
|
-
The fixed header is 65px: the current 64px navigation token plus a 1px border. Clear it in the application's main, sticky regions and focus/anchor scroll margins with `calc(var(--ui-navigation-height) + 1px)`. The
|
|
42
|
+
The fixed header is 65px: the current 64px navigation token plus a 1px border. Clear it in the application's main, sticky regions and focus/anchor scroll margins with `calc(var(--ui-navigation-height) + 1px)`. The header, main and footer now share a 1600px maximum outer frame, including responsive `clamp(16px, 2.4vw, 40px)` gutters. Put `ui-app-frame` on main and reading/settings or short-form sections inside it; the header and shared footer apply their own internal frame. Do not wrap them in another padded frame. Apply deliberate `--ui-width-frame` / `--ui-frame-gutter` overrides on a common ancestor. Remove old `max-w-7xl` or `px-6` overrides to adopt the new defaults. This width update supersedes the previous 1280px/24px branded frame. See the [application layout starter](application-layout.md).
|
|
43
43
|
|
|
44
44
|
## Artwork and package boundary
|
|
45
45
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Navigation and SiteFooter
|
|
2
2
|
|
|
3
|
-
This guide targets the
|
|
3
|
+
This guide targets the **@naeil/ui 0.6.0**; release identities and publication evidence are recorded in the [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0). These are generic product-menu primitives. Applications inheriting the actual naeil.dev brand/catalog/control composition use the canonical opt-in [NaeilHeader](naeil-header.md) from `@naeil/ui/naeil-header`, with fixed positioning, a 65px height, the shared application frame and official artwork URL dependency.
|
|
4
4
|
|
|
5
5
|
`Navigation` and `SiteFooter` are React-only exports from `@naeil/ui/ui` (also `@naeil/ui/components/ui/navigation` and `@naeil/ui/components/ui/site-footer`). They require shared theme/components CSS and the normal consumer font/Tailwind setup. They do not import Next, next-intl, authentication, product routes or message dictionaries.
|
|
6
6
|
|
|
@@ -15,7 +15,6 @@ import { Navigation, SiteFooter } from "@naeil/ui/ui";
|
|
|
15
15
|
{ id: "keys", label: "API keys", href: "/keys" },
|
|
16
16
|
] }]}
|
|
17
17
|
currentHref={pathname}
|
|
18
|
-
containerClassName="product-frame"
|
|
19
18
|
toolbar={<ProductControls />}
|
|
20
19
|
onNavigate={(event, item) => {
|
|
21
20
|
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
|
@@ -23,24 +22,23 @@ import { Navigation, SiteFooter } from "@naeil/ui/ui";
|
|
|
23
22
|
guardedNavigate(item.href);
|
|
24
23
|
}}
|
|
25
24
|
/>
|
|
26
|
-
<main className="
|
|
25
|
+
<main className="ui-app-frame">
|
|
27
26
|
<section data-ui-layout="settings">{/* narrow form inside stable frame */}</section>
|
|
28
27
|
</main>
|
|
29
28
|
<SiteFooter
|
|
30
29
|
brand={<ProductBrand />}
|
|
31
30
|
variant="compact"
|
|
32
31
|
meta="Product information"
|
|
33
|
-
containerClassName="product-frame"
|
|
34
32
|
/>
|
|
35
33
|
```
|
|
36
34
|
|
|
37
|
-
These are composition snippets: `pathname`, controls, brand
|
|
35
|
+
These are composition snippets: `pathname`, controls, brand and `guardedNavigate` belong to the application. Keep its unsaved-change guard and modified-click behavior. Alternatively supply a `Link` adapter which forwards anchor props, `onClick`, `aria-current`, `className`, target and children. Links explicitly marked `external: true` render native anchors; an absolute URL alone does not bypass the supplied `Link`. `active` overrides exact `currentHref` matching when a route family needs custom matching.
|
|
38
36
|
|
|
39
37
|
`Navigation` accepts links and one level of labeled groups, optional description/icon/badge, `toolbar`, `mobileToolbar` and `mobileFooter`. Brand is a slot; the component does not invent a home destination or label. Groups use Radix Popover with actual links (Tab navigation, Escape and focus return); they are not action menus. Mobile uses a modal Radix Dialog with scroll locking, trapped focus and a labeled close control. The sheet closes on destination selection, currentHref changes or a return to desktop.
|
|
40
38
|
|
|
41
39
|
Desktop groups open on mouse hover without moving keyboard focus. Leaving both the trigger and panel closes the hover preview after the standard 180ms token duration, allowing travel across the portal gap. Entering the panel cancels the pending close. Mouse clicks keep the menu open while the pointer remains in the trigger/panel and do not pin it: leaving still dismisses it. Keyboard-activating a hovered trigger takes over the open menu and focuses its first link; subsequent keyboard activation, Escape, outside interaction or navigation dismisses it. A menu being used with keyboard focus remains open when the pointer leaves. Mouse dismissal preserves the previous focus; keyboard activation retains Radix focus return. Touch uses click/tap, and the mobile sheet behavior is unchanged. Reduced motion disables visual transitions while retaining pointer travel tolerance.
|
|
42
40
|
|
|
43
|
-
Container queries select desktop layout at 48rem of available header content width.
|
|
41
|
+
Container queries select desktop layout at 48rem of available header content width. Navigation, main and footer share a maximum 1600px outer frame and `clamp(16px, 2.4vw, 40px)` gutters by default. Use `ui-app-frame` on main; do not wrap Navigation or SiteFooter in another padded frame. Reading/settings sections inside main retain their 640px cap. The [application layout guide](application-layout.md) covers composition and consistent root token overrides. Header height uses `ui.navigation-height` (64px); toolbar controls should remain short, with volatile counts in the content area. Navigation itself is in document flow; `className` can make it sticky or fixed. Fixed consumers must reserve its height in page composition. A narrow form must not constrain the header. Explicit className/style remain consumer overrides.
|
|
44
42
|
|
|
45
43
|
`SiteFooter` supports `brand`, `description`, `groups: [{ id, label, links }]`, `meta`, children, `Link`, `containerClassName` and `variant="full|compact"`. Each link group is a labeled navigation landmark. Translated titles, destinations, legal/version text and social links belong to the consumer. A product may place a compact footer in its mobile sheet; a full marketing footer is not mandatory in a dashboard.
|
|
46
44
|
|
|
@@ -50,7 +48,7 @@ Desktop reserves `ui.navigation-brand-width` (160px) for the brand, followed by
|
|
|
50
48
|
|
|
51
49
|
Menu groups accept `columns?: 1 | 2` (default 1). The candidate sample uses 2 for the website project catalog and 1 for Home's functional menu; the mobile sheet remains one column. Menu widths use `ui.navigation-menu-width` (320px) and `ui.navigation-menu-wide-width` (640px), capped by available space. Group links share a 40px icon area, 16px icon-to-copy gap, title/description hierarchy and badges beside the title. Supply decorated brand artwork through `icon`; the shared package does not own product illustrations. Current group links use background, semibold title and a check indicator, retaining `aria-current` and keyboard focus without underlining descriptions.
|
|
52
50
|
|
|
53
|
-
Existing `Nav` and `Footer` imports and props remain. `Nav` adapts the canonical NaeilHeader, which renders this generic core; `Footer` composes SiteFooter. `Nav` retains its fixed positioning and
|
|
51
|
+
Existing `Nav` and `Footer` imports and props remain. `Nav` adapts the canonical NaeilHeader, which renders this generic core; `Footer` composes SiteFooter. `Nav` retains its fixed positioning and uses the shared 1600px application frame; menus gain keyboard/focus support, an opaque shared surface, 16px labels and a 64px minimum row. Its `projects` prop replaces the old default inventory; the old naeil projects remain the fallback for existing consumers. Optional `labels`, `className` and `containerClassName` support localization and frame overrides. Remove old `max-w-7xl` or `px-6` frame overrides to adopt the new defaults.
|
|
54
52
|
|
|
55
53
|
`Footer` adds `brandSlot`, `description`, `groups`, `socialSlot`, `meta`, `variant`, `className` and `containerClassName`. Use empty groups or null description/socialSlot to omit defaults. Existing linksExternal behavior remains for the default naeil links. Custom groups define their own absolute destinations and external/target settings.
|
|
56
54
|
|
|
@@ -2,25 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
이 안내는 `@naeil/ui`의 기본 모양과 재사용 규칙을 설명한다. 패키지 소비와 소비 사이트 배포는 별도 작업이다.
|
|
4
4
|
|
|
5
|
-
이 안내는 **@naeil/ui 0.
|
|
5
|
+
이 안내는 **@naeil/ui 0.6.0**의 CSS·API·패키지 경계를 대상으로 한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다. 소스·archive와 실제 게시·배포 결과는 [릴리스 기록](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0)에서 구분한다. 이전 0.5.0은 2026-10-15에 게시되었으며, 이번 버전에서 공통 1600px 프레임과 적용 규칙을 추가한다.
|
|
6
6
|
|
|
7
7
|
## 시작하기
|
|
8
8
|
|
|
9
|
-
React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui` 또는 선택적 `/naeil-header`를 사용한다. API 키와 Next.js는 필요 없다.
|
|
9
|
+
React 19/ReactDOM 19와 Tailwind 4 앱에서 `/ui` 또는 선택적 `/naeil-header`를 사용한다. API 키와 Next.js는 필요 없다.
|
|
10
10
|
|
|
11
11
|
```sh
|
|
12
|
-
|
|
13
|
-
pnpm build:pkg
|
|
14
|
-
npm pack --ignore-scripts --pack-destination /tmp
|
|
15
|
-
# 소비 앱에서:
|
|
16
|
-
pnpm add --save-exact /tmp/naeil-ui-0.5.0.tgz
|
|
12
|
+
pnpm add --save-exact @naeil/ui@0.6.0
|
|
17
13
|
```
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
로컬 후보를 검증할 때는 저장소에서 `pnpm build:pkg`와 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고 `/tmp/naeil-ui-0.6.0.tgz`를 설치한다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react)와 [검증/릴리스 정책](../package-release.md)을 참고한다.
|
|
20
16
|
|
|
21
17
|
공통 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 의존성과 코드는 공통 소비 경계에서 제외했다.
|
|
22
18
|
|
|
23
|
-
버전을 생략한 설치는 registry의 latest 태그를 따른다. 이 안내와 동일한 경계를 사용하려면
|
|
19
|
+
버전을 생략한 설치는 registry의 latest 태그를 따른다. 이 안내와 동일한 경계를 사용하려면 0.6.0을 명시하거나 같은 버전의 검증된 로컬 archive를 사용한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
|
|
24
20
|
|
|
25
21
|
Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번 불러온다.
|
|
26
22
|
|
|
@@ -54,7 +50,8 @@ Select는 값 선택, DropdownMenu는 행동 선택에 사용한다. Switch와 C
|
|
|
54
50
|
- 본문·입력·버튼 16px, 보조 14px, 메타정보 13px. 작은 화면에서도 입력 글씨를 줄이지 않는다.
|
|
55
51
|
- 기본 컨트롤 높이 40px. 문서 루트에 `data-ui-density="compact"`를 주면 36px가 된다. 작은 화면과 거친 포인터에서는 최소 44px를 유지한다. 데스크톱에서 `className="h-8"` 같은 높이 재정의는 적용되며, 모바일의 44px 최소 터치 크기는 유지된다.
|
|
56
52
|
- `.light`/`.dark`는 OS 테마보다 우선한다. 기존 ThemeProvider를 사용할 수 있다.
|
|
57
|
-
-
|
|
53
|
+
- 공통 바깥 틀은 최대 1600px, 좌우 여백은 `clamp(16px, 2.4vw, 40px)`다. 본문의 `.ui-app-frame`과 공통 헤더·푸터 내부 프레임이 같은 토큰을 사용한다.
|
|
54
|
+
- `data-ui-layout="reading|settings|list|short-form|fluid"`로 내부 콘텐츠 폭을 적용한다. 각각 최대 640/640/1600/480px 또는 가용 폭이다. 목록은 바깥 틀의 여백을 제외한 공간을 사용하고, 설정·읽기 영역은 그 안에서 좁게 유지한다.
|
|
58
55
|
- 레이블·도움말·오류 문구는 소비 화면이 연결한다. Input의 `aria-invalid`와 `aria-describedby`를 사용하고, 로딩 중에는 Button의 `disabled`와 `aria-busy`를 함께 지정한다.
|
|
59
56
|
- 성공·경고·오류·안내에는 Badge의 `success`, `warning`, `error`, `info` variant를 사용할 수 있다. 색만으로 의미를 전달하지 않는다.
|
|
60
57
|
|
|
@@ -85,37 +82,39 @@ Next.js 소비자는 layout의 metadata title 기본값/템플릿과 페이지
|
|
|
85
82
|
|
|
86
83
|
실제 naeil.dev 브랜드 헤더를 이어받는 앱은 선택적 React 전용 `@naeil/ui/naeil-header`의 `NaeilHeader`를 사용한다. 전체 프로젝트 메뉴·헤더 번역·테마/선택적 언어 컨트롤·toolbar·반응형 스타일을 한 모듈에서 제공하므로 소비 앱에 다시 복사하지 않는다. 소비 앱은 기존 theme provider, 라우팅·저장 guard, 현재 언어와 실제 인증 슬롯을 연결한다. 언어 변경을 지원하지 않으면 `onLocaleChange`를 생략한다. [전체 헤더 계약](../components/naeil-header.md)을 참조한다.
|
|
87
84
|
|
|
88
|
-
|
|
85
|
+
2026-10-16 승인한 기본 프레임은 최대 1600px(여백 포함), 좌우 `clamp(16px, 2.4vw, 40px)`다. 브랜드 헤더·범용 Navigation·SiteFooter·본문 `.ui-app-frame`이 `--ui-width-frame`, `--ui-frame-gutter`를 함께 사용한다. 브랜드 헤더의 고정 높이는 65px이므로 main·sticky 영역과 초점/anchor 이동에 `calc(var(--ui-navigation-height) + 1px)`만큼 여유를 둔다. 다섯 장식 이미지는 공식 `https://naeil.dev/images/*.png` URL을 참조하므로 네트워크가 필요하다. 이미지 바이트는 npm에 포함하지 않으며 재배포 출처·권리 미해결 사항은 [제3자 고지](../../THIRD_PARTY_NOTICES.md)에 유지한다.
|
|
89
86
|
|
|
90
87
|
다른 제품 메뉴에는 `@naeil/ui/ui`의 범용 `Navigation`과 `SiteFooter`를 조합하고 제품 메뉴 데이터·번역·폭을 소유한다. 기존 `Nav`·`Footer`는 Next/next-intl 호환 API를 유지한다. [범용 API와 마이그레이션 안내](../components/navigation.md)를 참조한다. Naeil Home 운영 적용은 아직 완료되지 않았으며 저장소의 `docs/design/navigation-footer-integration.md`에서 추적한다.
|
|
91
88
|
|
|
92
89
|
앱의 공통 헤더·메뉴·좌우 여백과 본문의 읽기/설정/목록 폭은 별도로 관리한다. 같은 앱 틀을 사용하는 페이지는 같은 화면 크기·언어·테마에서 메뉴 위치가 유지되어야 한다. 설정 폼을 640px로 제한할 때 헤더까지 그 폭에 종속시키지 않는다. 변동하는 계정 수·상태 요약도 메뉴를 밀어내지 않도록 배치한다.
|
|
93
90
|
|
|
94
|
-
|
|
91
|
+
아래처럼 실제 공통 컴포넌트로 앱 틀을 구성한다. 공통 헤더·푸터는 내부에 프레임이 있으므로 다른 패딩 컨테이너로 다시 감싸지 않는다. `items`, `pathname`, `ProductControls`는 제품이 제공한다. 고정형 브랜드 헤더를 사용하는 완성 예제와 소비 앱에 복사할 `AGENTS.md` 규칙은 [Application layout](../components/application-layout.md)에 있다.
|
|
95
92
|
|
|
96
93
|
```tsx
|
|
94
|
+
import { Navigation, SiteFooter } from "@naeil/ui/ui";
|
|
95
|
+
|
|
97
96
|
<>
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
<main className="
|
|
97
|
+
<Navigation brand={<a href="/">My product</a>}
|
|
98
|
+
items={items} currentHref={pathname} toolbar={<ProductControls />}
|
|
99
|
+
labels={{ navigation: "주 메뉴", menu: "메뉴", close: "닫기" }} />
|
|
100
|
+
<main className="ui-app-frame">
|
|
102
101
|
<section data-ui-layout="settings">{/* 설정 폼 */}</section>
|
|
103
102
|
</main>
|
|
103
|
+
<SiteFooter variant="compact" meta="Product information" />
|
|
104
104
|
</>
|
|
105
105
|
```
|
|
106
106
|
|
|
107
107
|
```css
|
|
108
|
-
/*
|
|
109
|
-
.product-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
max-width: var(--product-frame-max, 100%);
|
|
113
|
-
margin-inline: auto;
|
|
114
|
-
padding-inline: var(--product-gutter, 0);
|
|
108
|
+
/* 의도적인 제품 예외는 세 영역의 공통 조상에서 재정의한다. */
|
|
109
|
+
.product-shell {
|
|
110
|
+
--ui-width-frame: 1280px;
|
|
111
|
+
--ui-frame-gutter: 24px;
|
|
115
112
|
}
|
|
116
113
|
```
|
|
117
114
|
|
|
118
|
-
|
|
115
|
+
이번 1600px는 사용자가 Naeil Home의 실제 폭을 비교한 뒤 공통 기본값으로 선택한 결정이다. 1920px 화면에서는 여백을 제외한 영역이 1520px다. 실제 과업·정보량·짧은/긴 내용으로 내부 구성을 판단한다. 내부 카드·보고서 열 수는 모니터 폭보다 실제 콘텐츠 영역 폭에 맞추며, 필요한 경우 container query를 사용한다.
|
|
116
|
+
|
|
117
|
+
이전 1280px 헤더·24px 여백과 1200px 목록 기본값이 변경된다. 새 기본값을 적용할 때 기존 `max-w-7xl`·`px-6` 프레임 재정의를 제거한다. 기존 레이아웃을 유지해야 하면 위 프레임 토큰 및 `--ui-width-list: 1200px`를 명시한다. 공개 import·props·소비자 className 재정의는 유지된다. 설치된 패키지와 CSS를 먼저 확인하고, 메뉴·모바일 시트·푸터 구현을 복사하는 대신 공통 API와 슬롯으로 연결한다.
|
|
119
118
|
|
|
120
119
|
레이아웃 수정의 검증 기준:
|
|
121
120
|
|
|
@@ -170,7 +169,7 @@ Storybook의 로컬 폰트 import는 예시다. 그대로 앱 전역에 모든
|
|
|
170
169
|
|
|
171
170
|
## 0.3 package boundary
|
|
172
171
|
|
|
173
|
-
The heading retains the original 0.3 migration anchor; the allowlist below reflects the 0.
|
|
172
|
+
The heading retains the original 0.3 migration anchor; the allowlist below reflects the 0.6.0 package boundary. `/ui` is the React core. The opt-in `/naeil-header` is the canonical complete branded header, also React-only. Root imports preserve Nav, Footer, Logo, LocaleSwitcher, ThemeProvider, ThemeToggle, ThemeToggleIcon, PageTitle, SectionTitle and their class helpers, but root has static Next/next-intl dependencies. React-only apps must use `/ui`, `/utils` and appropriate shared deep modules. `next-themes` is a React runtime library; it does not require Next.js. Fonts remain consumer-owned.
|
|
174
173
|
|
|
175
174
|
Next.js `^15 || ^16` and next-intl `^4` are optional peers. Install both when using root, Nav, Footer or `i18n/routing`. This is an existing compatibility contract, not a claim that every peer combination has browser validation; the clean Next fixture checks Next 16.1.7. React/ReactDOM `^19` come from the host. Tailwind 4 is the documented styling pipeline. Explicit `className`, Radix props, Toaster options and theme-provider props remain consumer overrides.
|
|
176
175
|
|
package/docs/package-release.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Package verification and release policy
|
|
2
2
|
|
|
3
|
-
This policy covers
|
|
3
|
+
This policy covers **@naeil/ui 0.6.0** and its shared application frame. The [release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) records the frozen archive and actual publication/deployment outcomes. Verified 0.5.0, 0.4.0 and 0.3.0 evidence remains dated history. UI v2 names a design generation, not an npm major. Future breaking changes require an explicit migration and version decision. Version-scoped installation is in the [README](../README.md#use-the-ui).
|
|
4
4
|
|
|
5
5
|
## Architecture
|
|
6
6
|
|
|
@@ -48,9 +48,13 @@ The explicit font-notice regression gate copies the real React fixture config in
|
|
|
48
48
|
|
|
49
49
|
## Publication and deployment
|
|
50
50
|
|
|
51
|
-
###
|
|
51
|
+
### 0.6.0 release scope — 2026-10-16
|
|
52
52
|
|
|
53
|
-
The owner authorized
|
|
53
|
+
The owner authorized publication and deployment of the shared 1600px frame, responsive gutters and navigation/footer adoption improvements. Use the exact reviewed source and frozen archive; record npm, GitHub Release, Pages and production results independently. Existing consumer applications need their own upgrade and composition migration. The minor increment marks the deliberate default-width change and added public frame tokens/class.
|
|
54
|
+
|
|
55
|
+
### Verified 0.5.0 publication — 2026-10-15
|
|
56
|
+
|
|
57
|
+
Registry metadata and the [0.5.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0) were rechecked on 2026-10-16. npm published at `2026-10-15T21:48:55.614Z`; the release points to `04229adbecac302efbf50ab2b8a3a40edb0a04bb`. Its archive SHA-256 is `8c9203192d967dc4fae65cc00ae80743244e0ae2363fee8c2c0edd9541d07cf9`. Production deployment7093004444 and Pages deployment7093190956 succeeded for that source; the release retains their detailed verification assets. Earlier pending-publication statements describe the preparation checkpoint, not current registry state.
|
|
54
58
|
|
|
55
59
|
### Verified 0.4.0 publication — 2026-10-11
|
|
56
60
|
|
|
@@ -80,7 +84,7 @@ The immutable npm archive's bundled guides are the release-preparation snapshot.
|
|
|
80
84
|
|
|
81
85
|
### Release procedure
|
|
82
86
|
|
|
83
|
-
|
|
87
|
+
Storybook resolves relative Markdown guide links against the release's `v0.6.0` source tag. The tag must point to the reviewed release source, and hosted verification checks that guide links resolve. Historical foundation/source-authority links remain at their original revisions. Freeze subsequent documentation changes separately from immutable release archives.
|
|
84
88
|
|
|
85
89
|
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.
|
|
86
90
|
|
|
@@ -112,7 +116,7 @@ Run the command from this checkout after installing its dependencies. It serves
|
|
|
112
116
|
|
|
113
117
|
### Authorized GitHub Pages publication
|
|
114
118
|
|
|
115
|
-
The public Docs destination [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/)
|
|
119
|
+
The public Docs destination [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/) last completed [Pages run38737502303](https://github.com/naeil-dev/naeil-ui/actions/runs/38737502303) for0.5.0 source `04229adbecac302efbf50ab2b8a3a40edb0a04bb`, rechecked2026-10-16. Subsequent deployments belong to their release records. Pages uses `build_type=workflow` and a **github-pages** main-only deployment branch policy. See [workflow status](https://github.com/naeil-dev/naeil-ui/actions/workflows/publish-docs-manual.yml).
|
|
116
120
|
|
|
117
121
|
`.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.
|
|
118
122
|
|
|
@@ -123,7 +127,7 @@ Select **Publish reviewed UI docs (manual only)** in Actions (or use the command
|
|
|
123
127
|
gh workflow run publish-docs-manual.yml -f reviewed_sha=FULL_REVIEWED_COMMIT_SHA -f confirmation=PUBLISH_REVIEWED_DOCS
|
|
124
128
|
```
|
|
125
129
|
|
|
126
|
-
After a 0.
|
|
130
|
+
After a 0.6.0 deployment, verify the manager and iframe under `/naeil-ui/`, all 15 UI and 2 Brand Docs pages, their Usage examples and NaeilHeader JapaneseApplication, canonical artwork and official image references, Docs links, local fonts and exact LICENSE/THIRD_PARTY_NOTICES/font notices. Retain the deployment URL, source SHA and observed HTTP/navigation results. Hosted Storybook uses simulated data and requires no Supabase project, design API key or external font server. Only the reviewed Storybook directory is uploaded; website public assets stay excluded.
|
|
127
131
|
|
|
128
132
|
Normal builds are network-independent after dependency installation. Vite collects notices for actual preview modules; checked-in manager notices conservatively cover named embedded packages and versions from Storybook 10.4.6's original source lock. `check-storybook` fails if a named embedded module lacks a full notice. Four vendored tiny modules have no embedded version in that lock/comments; their original npm notice source is explicitly marked, without an exact-version claim. The exact use-composed-ref@1.4.0 tarball/repository provides MIT metadata but no standalone notice; its metadata plus full declared terms are retained without inventing a year/holder. The client-only@0.0.1 React marker retains its exact metadata and the original React MIT notice. Other missing notices fail the build; no generic MIT fallback passes arbitrary packages.
|
|
129
133
|
|
package/package.json
CHANGED
|
@@ -13,9 +13,6 @@
|
|
|
13
13
|
inset-inline: 0;
|
|
14
14
|
width: 100%;
|
|
15
15
|
}
|
|
16
|
-
.naeil-header-frame {
|
|
17
|
-
max-width: 80rem;
|
|
18
|
-
}
|
|
19
16
|
.naeil-header-controls {
|
|
20
17
|
display: flex;
|
|
21
18
|
align-items: center;
|
|
@@ -40,11 +37,14 @@
|
|
|
40
37
|
border: 1px solid;
|
|
41
38
|
border-radius: var(--radius-lg-value);
|
|
42
39
|
}
|
|
40
|
+
.ui-app-frame,
|
|
43
41
|
.ui-navigation-frame,
|
|
44
42
|
.ui-site-footer-frame {
|
|
43
|
+
box-sizing: border-box;
|
|
45
44
|
width: 100%;
|
|
45
|
+
max-width: var(--ui-width-frame);
|
|
46
46
|
margin-inline: auto;
|
|
47
|
-
padding-inline: var(--
|
|
47
|
+
padding-inline: var(--ui-frame-gutter);
|
|
48
48
|
}
|
|
49
49
|
.ui-navigation-frame {
|
|
50
50
|
container-type: inline-size;
|
package/src/styles/theme.css
CHANGED
|
@@ -152,7 +152,9 @@
|
|
|
152
152
|
--ui-field-gap-compact: 16px;
|
|
153
153
|
--ui-width-reading: 640px;
|
|
154
154
|
--ui-width-settings: 640px;
|
|
155
|
-
--ui-width-list:
|
|
155
|
+
--ui-width-list: 1600px;
|
|
156
|
+
--ui-width-frame: 1600px;
|
|
157
|
+
--ui-frame-gutter: clamp(16px, 2.4vw, 40px);
|
|
156
158
|
--ui-width-short-form: 480px;
|
|
157
159
|
--ui-motion-fast: 120ms;
|
|
158
160
|
--ui-motion-standard: 180ms;
|