@naeil/ui 0.7.1 → 0.7.2
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 +10 -1
- package/README.md +15 -10
- package/dist/{chunk-VWIUN35X.js → chunk-7JBLPGZ4.js} +1 -1
- package/dist/{chunk-OLKTEYLS.js → chunk-MGCCKOGU.js} +2 -30
- package/dist/components/index.js +2 -2
- package/dist/components/naeil-footer.js +1 -1
- package/dist/components/naeil-header.js +2 -2
- package/dist/lib/ui-release.d.ts +1 -1
- package/dist/lib/ui-release.js +1 -1
- package/dist/source/components/naeil-header-content.d.ts +1 -25
- package/dist/source/components/naeil-header-content.js +0 -28
- package/dist/source/components/naeil-header.js +1 -1
- package/dist/source/lib/ui-release.d.ts +1 -1
- package/dist/source/lib/ui-release.js +1 -1
- package/docs/components/README.md +3 -3
- package/docs/components/application-layout.md +43 -11
- package/docs/components/naeil-footer.md +2 -2
- package/docs/components/naeil-header.md +7 -5
- package/docs/design/v2-migration.md +11 -10
- package/docs/package-release.md +32 -13
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## 0.7.
|
|
3
|
+
## 0.7.2 — retired project catalog (candidate)
|
|
4
|
+
|
|
5
|
+
- Narrow the canonical `NaeilHeader` project catalog to naeil-ui. Content Collector, PKM, Sustainability Analyzer and Baby Agent are retired from naeil.dev; their site pages move to `src/app/_archive/` and old URLs temporarily redirect to the project list. The project menu uses one column for a single entry. `projects`, `translations` and `currentProjectKey` overrides are unchanged.
|
|
6
|
+
- Release class `dom`: the standing worker adopts it only through an owner-approved `reviewedMigration` of this exact release; ordinary fix-only patches are unaffected.
|
|
7
|
+
|
|
8
|
+
## 0.7.1 — canonical service chrome (published 2026-10-23)
|
|
9
|
+
|
|
10
|
+
Published to npm at `2026-10-23T01:14:11.387Z`; `latest` was verified as `0.7.1`. This first published 0.7.x release includes the unpublished 0.7.0 scope below. Frozen package source and tag `v0.7.1`: `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618`; archive SHA-256: `ecd656c595fd63516417eef58a5e2624d1f1bf928ba0465761292d05502ab3f8`. Independent download and fresh React/Next registry consumers matched the archive and all 139 files, with types, production builds and browser checks passing. Hosted Docs and standing activation require separate receipts; see the [release policy](docs/package-release.md#publication-and-deployment).
|
|
4
11
|
|
|
5
12
|
- Add canonical `NaeilHeaderAccountControl` for shared login/account/logout presentation while consumers retain session and save guards.
|
|
13
|
+
- Include React-only `NaeilFooter`, canonical full/compact destinations, save-navigation interception and server-safe `/release` package/contract identity from the unpublished 0.7.0 candidate.
|
|
6
14
|
- Preserve existing header slots and imports; include authenticated menu/busy/failure coverage and packed consumer checks.
|
|
15
|
+
- Preserve the approved 1600px/clamp frame, generic Navigation/SiteFooter and legacy Nav/Footer APIs. Bundled guides retain their frozen preparation snapshot; maintained guides and hosted Docs use a separately reviewed source.
|
|
7
16
|
|
|
8
17
|
## 0.7.0 — unpublished candidate
|
|
9
18
|
|
package/README.md
CHANGED
|
@@ -2,24 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
React components, semantic design tokens, and shared styles for naeil products. The approved system uses a neutral light/dark palette, Pretendard, 16px controls, comfortable or compact density, purpose-specific content widths, and restrained motion. Radix supplies interaction behavior.
|
|
4
4
|
|
|
5
|
+
**0.7.1 published and registry-verified — 2026-10-23.** The current published baseline is **0.7.1**. This first published 0.7.x release combines canonical `NaeilFooter`, server-safe `/release` identity and `NaeilHeaderAccountControl`; 0.7.0 remains an unpublished candidate. The frozen package source and `v0.7.1` tag are `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618`. Fresh React/Next registry consumers matched all 139 frozen files and passed types, production builds and browser checks. Maintained guides use separately reviewed source; hosted Docs and standing activation require separate receipts. See the [release policy and receipts](docs/package-release.md#publication-and-deployment).
|
|
6
|
+
|
|
5
7
|
This repository also contains the **naeil.dev brand/example website** and an **optional agent reference workflow**. Choose the path you need:
|
|
6
8
|
|
|
7
9
|
| Path | Start here | Tools / keys |
|
|
8
10
|
| --- | --- | --- |
|
|
9
|
-
| Use the UI in an app | [Consumer guide](docs/design/v2-migration.md) | React 19, Tailwind 4; **no Next.js or API keys** for
|
|
11
|
+
| Use the UI in an app | [Consumer guide](docs/design/v2-migration.md) | React 19, Tailwind 4; **no Next.js or API keys** for shared React entries |
|
|
10
12
|
| Develop the shared UI | Commands below and [contributing](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/CONTRIBUTING.md) | Node.js 22+, pnpm; no Supabase or 21st key |
|
|
11
13
|
| Use frontend references with an agent | [Optional workflow setup](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/docs/design/frontend-tooling.md) | Supported agent; Python for bundled helpers; your own 21st key only for optional MCP |
|
|
12
14
|
| Develop the brand/example website | [Site setup](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/docs/site-development.md) | Next.js and a separate Supabase project for site authentication |
|
|
13
15
|
|
|
14
16
|
## Use the UI
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
Use React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. Install the verified registry release:
|
|
17
19
|
|
|
18
20
|
```sh
|
|
19
|
-
pnpm add --save-exact @naeil/ui@0.
|
|
21
|
+
pnpm add --save-exact @naeil/ui@0.7.1
|
|
20
22
|
```
|
|
21
23
|
|
|
22
|
-
For
|
|
24
|
+
The [npm 0.7.1 archive](https://registry.npmjs.org/@naeil/ui/-/ui-0.7.1.tgz) is byte-identical to the frozen release archive. Its bundled guides retain the preparation snapshot; use these maintained instructions for current installation. For local development, `pnpm build:pkg` and `npm pack --ignore-scripts --pack-destination /tmp` produce `/tmp/naeil-ui-0.7.1.tgz`. A fresh pack of maintained source differs from the frozen release archive; use the exact frozen file for release verification. The [0.6.0 release record](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) retains its archive, publication and deployment evidence.
|
|
23
25
|
|
|
24
26
|
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.
|
|
25
27
|
|
|
@@ -30,11 +32,13 @@ Choose the shared application composition before building a header or footer:
|
|
|
30
32
|
| Application need | Shared component |
|
|
31
33
|
| --- | --- |
|
|
32
34
|
| Actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
|
|
35
|
+
| Owned-service login, account and logout presentation (0.7.1) | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header`, passed in `authSlot` |
|
|
36
|
+
| Owned naeil service footer (0.7.1) | `NaeilFooter` from `@naeil/ui/naeil-footer` |
|
|
33
37
|
| A product's own menu | `Navigation` from `@naeil/ui/ui` |
|
|
34
|
-
|
|
|
38
|
+
| Different product footer or deliberate content override | `SiteFooter` from `@naeil/ui/ui` |
|
|
35
39
|
| Existing Next/next-intl integration | Preserve `Nav` / `Footer` compatibility adapters |
|
|
36
40
|
|
|
37
|
-
Supply application routing, guards, authentication and menu data through adapters and slots. Keep the shared menu, mobile sheet,
|
|
41
|
+
Pair `NaeilHeader` and `NaeilFooter` in owned services. Supply application routing, guards, authentication and menu data through adapters and slots. `NaeilHeaderAccountControl` receives session state, a busy flag and the guarded logout callback; keep pending state and its request lock above the header so desktop/mobile copies share them. Keep the shared menu, mobile sheet, account presentation 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
42
|
|
|
39
43
|
Import primitives from the dedicated entrypoint:
|
|
40
44
|
|
|
@@ -73,9 +77,9 @@ Mark Japanese content with `lang="ja"`. Keep font OFL notices with redistributed
|
|
|
73
77
|
|
|
74
78
|
Shared CSS follows the OS theme unless the document root has `class="light"` or `class="dark"`. For compact spacing, set `data-ui-density="compact"` on that root; omit it for comfortable spacing. Density changes spacing while retaining 16px control text and minimum mobile touch sizes. React apps can also use `ThemeProvider` from `@naeil/ui/components/theme-provider` with `attribute="class"`.
|
|
75
79
|
|
|
76
|
-
The [component guides](docs/components/README.md) cover exact APIs, state composition and accessibility responsibilities
|
|
80
|
+
The [component guides](docs/components/README.md) cover exact APIs, state composition and accessibility responsibilities, with matching Storybook Docs and runnable examples. Canonical footer and account examples live in the existing NaeilHeader/SiteFooter stories. 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`, `/naeil-header`, `/naeil-footer` and `/release` work without Next.js; the last two are included in 0.7.1. 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.
|
|
77
81
|
|
|
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
|
|
82
|
+
For the actual naeil.dev branded header, import `NaeilHeader` and `NaeilHeaderAccountControl` 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 state/actions through its props. 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, and [NaeilFooter](docs/components/naeil-footer.md) for canonical destinations and save interception.
|
|
79
83
|
|
|
80
84
|
## Develop the shared UI
|
|
81
85
|
|
|
@@ -92,7 +96,8 @@ Storybook uses the actual public components with simulated example data. It need
|
|
|
92
96
|
```sh
|
|
93
97
|
pnpm build:pkg
|
|
94
98
|
pnpm pack --pack-destination /tmp
|
|
95
|
-
# In your consumer app: pnpm add /tmp/naeil-ui-0.
|
|
99
|
+
# In your consumer app: pnpm add /tmp/naeil-ui-0.7.1.tgz
|
|
100
|
+
# This development pack does not replace the frozen release archive.
|
|
96
101
|
```
|
|
97
102
|
|
|
98
103
|
| Command | Purpose |
|
|
@@ -104,7 +109,7 @@ pnpm pack --pack-destination /tmp
|
|
|
104
109
|
| `pnpm build:pkg` / `pnpm check:package` | Build package / inspect package boundary and independently install/build packed React + Next consumers |
|
|
105
110
|
| `pnpm dev` / `pnpm build` | Brand/example website development / build |
|
|
106
111
|
|
|
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
|
|
112
|
+
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 Storybook source defines 17 Docs pages (15 UI families and Brand / Logo plus NaeilHeader), including Usage, JapaneseApplication, ReferenceFull, ReferenceCompact and AccountStates 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); subsequent deployments require their own source and HTTP 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 retains its documented limits; service adoption and continuous rollout have separate [dated records](https://github.com/naeil-dev/naeil-ui/tree/main/docs/rollout).
|
|
108
113
|
|
|
109
114
|
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.
|
|
110
115
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import {
|
|
3
3
|
Logo,
|
|
4
4
|
uiRelease
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-7JBLPGZ4.js";
|
|
6
6
|
import {
|
|
7
7
|
Badge,
|
|
8
8
|
Button,
|
|
@@ -35,40 +35,12 @@ import { Moon, Sun } from "lucide-react";
|
|
|
35
35
|
var headerLocales = ["en", "ko", "ja"];
|
|
36
36
|
var headerLocaleNames = { en: "English", ko: "\uD55C\uAD6D\uC5B4", ja: "\u65E5\u672C\u8A9E" };
|
|
37
37
|
var headerProjects = [
|
|
38
|
-
{
|
|
39
|
-
"key": "cc",
|
|
40
|
-
"href": "/cc",
|
|
41
|
-
"accent": "oklch(0.704 0.140 181)",
|
|
42
|
-
"icon": "coral",
|
|
43
|
-
"status": "active"
|
|
44
|
-
},
|
|
45
|
-
{
|
|
46
|
-
"key": "pkm",
|
|
47
|
-
"href": "/pkm",
|
|
48
|
-
"accent": "oklch(0.702 0.183 293)",
|
|
49
|
-
"icon": "jellyfish",
|
|
50
|
-
"status": "coming"
|
|
51
|
-
},
|
|
52
38
|
{
|
|
53
39
|
"key": "naeilUi",
|
|
54
40
|
"href": "/design",
|
|
55
41
|
"accent": "oklch(0.623 0.214 259)",
|
|
56
42
|
"icon": "whale",
|
|
57
43
|
"status": "active"
|
|
58
|
-
},
|
|
59
|
-
{
|
|
60
|
-
"key": "sa",
|
|
61
|
-
"href": "/sa",
|
|
62
|
-
"accent": "oklch(0.723 0.219 149)",
|
|
63
|
-
"icon": "fish",
|
|
64
|
-
"status": "active"
|
|
65
|
-
},
|
|
66
|
-
{
|
|
67
|
-
"key": "babyAgent",
|
|
68
|
-
"href": "/baby-agent",
|
|
69
|
-
"accent": "oklch(0.769 0.188 70.08)",
|
|
70
|
-
"icon": "turtle",
|
|
71
|
-
"status": "coming"
|
|
72
44
|
}
|
|
73
45
|
];
|
|
74
46
|
var headerContent = {
|
|
@@ -391,7 +363,7 @@ function NaeilHeader(_a) {
|
|
|
391
363
|
})
|
|
392
364
|
),
|
|
393
365
|
items: [
|
|
394
|
-
...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: 2 }] : [],
|
|
366
|
+
...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: projectLinks.length > 1 ? 2 : 1 }] : [],
|
|
395
367
|
...showBlog ? [{ id: "blog", label: (_c = translations == null ? void 0 : translations.blog) != null ? _c : content.nav.blog, href: resolveHref("/blog"), external: projectsExternal }] : [],
|
|
396
368
|
...(subNav != null ? subNav : []).map((item) => __spreadProps(__spreadValues({}, item), { id: item.href }))
|
|
397
369
|
],
|
package/dist/components/index.js
CHANGED
|
@@ -5,8 +5,8 @@ import {
|
|
|
5
5
|
NaeilHeaderAccountControl,
|
|
6
6
|
NaeilHeaderLocaleControl,
|
|
7
7
|
NaeilHeaderThemeControl
|
|
8
|
-
} from "../chunk-
|
|
9
|
-
import "../chunk-
|
|
8
|
+
} from "../chunk-MGCCKOGU.js";
|
|
9
|
+
import "../chunk-7JBLPGZ4.js";
|
|
10
10
|
import "../chunk-QQQQZEPV.js";
|
|
11
11
|
import "../chunk-JBTDRVZ7.js";
|
|
12
12
|
export {
|
package/dist/lib/ui-release.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const uiRelease: Readonly<{version: "0.7.
|
|
1
|
+
export declare const uiRelease: Readonly<{version: "0.7.2"; contractVersion: "1"}>;
|
package/dist/lib/ui-release.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const uiRelease = Object.freeze({"version":"0.7.
|
|
1
|
+
export const uiRelease = Object.freeze({"version":"0.7.2","contractVersion":"1"});
|
|
@@ -6,35 +6,11 @@ declare const headerLocaleNames: {
|
|
|
6
6
|
readonly ja: "日本語";
|
|
7
7
|
};
|
|
8
8
|
declare const headerProjects: readonly [{
|
|
9
|
-
readonly key: "cc";
|
|
10
|
-
readonly href: "/cc";
|
|
11
|
-
readonly accent: "oklch(0.704 0.140 181)";
|
|
12
|
-
readonly icon: "coral";
|
|
13
|
-
readonly status: "active";
|
|
14
|
-
}, {
|
|
15
|
-
readonly key: "pkm";
|
|
16
|
-
readonly href: "/pkm";
|
|
17
|
-
readonly accent: "oklch(0.702 0.183 293)";
|
|
18
|
-
readonly icon: "jellyfish";
|
|
19
|
-
readonly status: "coming";
|
|
20
|
-
}, {
|
|
21
9
|
readonly key: "naeilUi";
|
|
22
10
|
readonly href: "/design";
|
|
23
11
|
readonly accent: "oklch(0.623 0.214 259)";
|
|
24
12
|
readonly icon: "whale";
|
|
25
|
-
readonly status: "active";
|
|
26
|
-
}, {
|
|
27
|
-
readonly key: "sa";
|
|
28
|
-
readonly href: "/sa";
|
|
29
|
-
readonly accent: "oklch(0.723 0.219 149)";
|
|
30
|
-
readonly icon: "fish";
|
|
31
|
-
readonly status: "active";
|
|
32
|
-
}, {
|
|
33
|
-
readonly key: "babyAgent";
|
|
34
|
-
readonly href: "/baby-agent";
|
|
35
|
-
readonly accent: "oklch(0.769 0.188 70.08)";
|
|
36
|
-
readonly icon: "turtle";
|
|
37
|
-
readonly status: "coming";
|
|
13
|
+
readonly status: "active" | "coming";
|
|
38
14
|
}];
|
|
39
15
|
declare const headerContent: {
|
|
40
16
|
readonly en: {
|
|
@@ -1,40 +1,12 @@
|
|
|
1
1
|
const headerLocales = ["en", "ko", "ja"];
|
|
2
2
|
const headerLocaleNames = { en: "English", ko: "\uD55C\uAD6D\uC5B4", ja: "\u65E5\u672C\u8A9E" };
|
|
3
3
|
const headerProjects = [
|
|
4
|
-
{
|
|
5
|
-
"key": "cc",
|
|
6
|
-
"href": "/cc",
|
|
7
|
-
"accent": "oklch(0.704 0.140 181)",
|
|
8
|
-
"icon": "coral",
|
|
9
|
-
"status": "active"
|
|
10
|
-
},
|
|
11
|
-
{
|
|
12
|
-
"key": "pkm",
|
|
13
|
-
"href": "/pkm",
|
|
14
|
-
"accent": "oklch(0.702 0.183 293)",
|
|
15
|
-
"icon": "jellyfish",
|
|
16
|
-
"status": "coming"
|
|
17
|
-
},
|
|
18
4
|
{
|
|
19
5
|
"key": "naeilUi",
|
|
20
6
|
"href": "/design",
|
|
21
7
|
"accent": "oklch(0.623 0.214 259)",
|
|
22
8
|
"icon": "whale",
|
|
23
9
|
"status": "active"
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"key": "sa",
|
|
27
|
-
"href": "/sa",
|
|
28
|
-
"accent": "oklch(0.723 0.219 149)",
|
|
29
|
-
"icon": "fish",
|
|
30
|
-
"status": "active"
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
"key": "babyAgent",
|
|
34
|
-
"href": "/baby-agent",
|
|
35
|
-
"accent": "oklch(0.769 0.188 70.08)",
|
|
36
|
-
"icon": "turtle",
|
|
37
|
-
"status": "coming"
|
|
38
10
|
}
|
|
39
11
|
];
|
|
40
12
|
const headerContent = {
|
|
@@ -181,7 +181,7 @@ function NaeilHeader(_a) {
|
|
|
181
181
|
})
|
|
182
182
|
),
|
|
183
183
|
items: [
|
|
184
|
-
...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: 2 }] : [],
|
|
184
|
+
...showProjects ? [{ id: "projects", label: (_b2 = translations == null ? void 0 : translations.projects) != null ? _b2 : content.nav.projects, items: projectLinks, columns: projectLinks.length > 1 ? 2 : 1 }] : [],
|
|
185
185
|
...showBlog ? [{ id: "blog", label: (_c = translations == null ? void 0 : translations.blog) != null ? _c : content.nav.blog, href: resolveHref("/blog"), external: projectsExternal }] : [],
|
|
186
186
|
...(subNav != null ? subNav : []).map((item) => __spreadProps(__spreadValues({}, item), { id: item.href }))
|
|
187
187
|
],
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Component usage guides
|
|
2
2
|
|
|
3
|
-
These guides
|
|
3
|
+
These maintained guides cover **published and registry-verified @naeil/ui 0.7.1**: canonical footer and release identity from the unpublished 0.7.0 candidate, plus shared account presentation. The current published baseline is 0.7.1; see [release policy and identities](../package-release.md#publication-and-deployment). [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/) has recorded [0.5.0 verification](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.5.0); each subsequent deployment requires its own receipt. Select chooses a value; DropdownMenu chooses an action.
|
|
4
4
|
|
|
5
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.
|
|
6
6
|
|
|
@@ -22,8 +22,8 @@ Start application layouts with the [shared navigation/footer selection and frame
|
|
|
22
22
|
| Navigation | [Navigation](./navigation.md) | UI / Navigation / Usage |
|
|
23
23
|
| SiteFooter | [SiteFooter](./navigation.md) | UI / SiteFooter / Usage |
|
|
24
24
|
| NaeilFooter | [NaeilFooter](./naeil-footer.md) | Brand / NaeilHeader / ReferenceFull, ReferenceCompact |
|
|
25
|
-
| NaeilHeader | [NaeilHeader](./naeil-header.md) | Brand / NaeilHeader / Usage, JapaneseApplication |
|
|
25
|
+
| NaeilHeader and account control | [NaeilHeader](./naeil-header.md) | Brand / NaeilHeader / Usage, JapaneseApplication, AccountStates |
|
|
26
26
|
|
|
27
27
|
[Field, native radio, Select and action composition](./composition.md) explains consumer state and semantic choices. [Demand decision](../design/component-demand.md) records why these two families were added.
|
|
28
28
|
|
|
29
|
-
Use opt-in `@naeil/ui/naeil-header` for the actual naeil.dev branded header
|
|
29
|
+
Use opt-in `@naeil/ui/naeil-header` for the actual naeil.dev branded header and its `NaeilHeaderAccountControl` in `authSlot`, paired with `@naeil/ui/naeil-footer` on owned services. Consumers supply routing/save guards, theme providers and authentication state/actions; official artwork remains URL-referenced. Canonical footer and account examples are part of existing stories, without additional Docs families. Use generic `Navigation` and `SiteFooter` from `/ui` for different products. [Navigation / SiteFooter](navigation.md) also documents the compatibility adapters.
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
# Application frame and shared navigation/footer
|
|
2
2
|
|
|
3
|
-
This guide
|
|
3
|
+
This maintained guide covers **published and registry-verified @naeil/ui 0.7.1**, combining canonical footer/release identity and shared account presentation with the published 0.6.0 frame. Install exact `@naeil/ui@0.7.1` from npm; hosted Docs and service activation have separate receipts. See [release identities and status](../package-release.md#publication-and-deployment) and [consumer setup](../design/v2-migration.md) for CSS, Tailwind sources and fonts.
|
|
4
4
|
|
|
5
5
|
## Choose the shared composition first
|
|
6
6
|
|
|
7
7
|
| Application need | Use |
|
|
8
8
|
| --- | --- |
|
|
9
9
|
| The actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
|
|
10
|
+
| Owned-service login/account/logout presentation | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header` in `authSlot` |
|
|
10
11
|
| A product's own menu | `Navigation` from `@naeil/ui/ui` |
|
|
11
12
|
| Owned naeil service footer | `NaeilFooter` from `@naeil/ui/naeil-footer` |
|
|
12
13
|
| Different product footer or explicit content override | `SiteFooter` from `@naeil/ui/ui` |
|
|
13
14
|
| An existing Next/next-intl consumer | Keep its `Nav` / `Footer` adapters |
|
|
14
15
|
|
|
15
|
-
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,
|
|
16
|
+
Choose one header per application frame. Supply menu data, links, route guards, authentication and supported locale state through props/slots. Owned services pass session state and guarded callbacks to the shared account control. Local adapters are appropriate; copies of the menu, responsive sheet, account presentation or footer implementation are not. Extend the shared component when a reusable behavior is missing.
|
|
16
17
|
|
|
17
18
|
## Width contract
|
|
18
19
|
|
|
@@ -39,28 +40,43 @@ This keeps a centered frame from shifting when a classic scrollbar appears. The
|
|
|
39
40
|
|
|
40
41
|
```tsx
|
|
41
42
|
import type { ReactNode } from "react";
|
|
42
|
-
import { NaeilHeader
|
|
43
|
+
import { NaeilHeader, NaeilHeaderAccountControl,
|
|
44
|
+
type NaeilHeaderAccount, type NaeilHeaderProps } from "@naeil/ui/naeil-header";
|
|
43
45
|
import { NaeilFooter } from "@naeil/ui/naeil-footer";
|
|
44
46
|
|
|
45
47
|
// Render inside the existing next-themes ThemeProvider.
|
|
46
|
-
//
|
|
47
|
-
|
|
48
|
+
// The app owns session state, its guarded logout and pending request lock.
|
|
49
|
+
type ApplicationLayoutProps = {
|
|
50
|
+
children: ReactNode;
|
|
51
|
+
locale: NaeilHeaderProps["locale"];
|
|
52
|
+
Link: NaeilHeaderProps["Link"];
|
|
53
|
+
currentHref: string;
|
|
54
|
+
account: NaeilHeaderAccount;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
export function ApplicationLayout({ children, locale, Link, currentHref,
|
|
58
|
+
account }: ApplicationLayoutProps) {
|
|
48
59
|
return <>
|
|
49
|
-
<NaeilHeader locale=
|
|
60
|
+
<NaeilHeader locale={locale} Link={Link} currentHref={currentHref}
|
|
61
|
+
authSlot={<NaeilHeaderAccountControl locale={locale} Link={Link}
|
|
62
|
+
account={account} />} />
|
|
50
63
|
<main className="ui-app-frame"
|
|
51
64
|
style={{ marginTop: "calc(var(--ui-navigation-height) + 1px)" }}>
|
|
52
65
|
{children}
|
|
53
66
|
</main>
|
|
54
|
-
<NaeilFooter locale=
|
|
67
|
+
<NaeilFooter locale={locale} variant="compact" Link={Link} />
|
|
55
68
|
</>;
|
|
56
69
|
}
|
|
57
70
|
|
|
58
|
-
<ApplicationLayout
|
|
71
|
+
<ApplicationLayout locale="en" Link={GuardedLink} currentHref={pathname}
|
|
72
|
+
account={account}>
|
|
59
73
|
<section data-ui-layout="settings">{/* Settings form */}</section>
|
|
60
74
|
</ApplicationLayout>
|
|
61
75
|
```
|
|
62
76
|
|
|
63
|
-
`
|
|
77
|
+
`GuardedLink`, `pathname` and `account` come from the consumer. Use `{ status: 'signed-out', loginHref }` or `{ status: 'signed-in', onLogout, busy, displayName, email }` for `account`; the app handles async cancellation, failure and retry. Keep pending state and the request lock above `NaeilHeader`, since desktop/mobile slot contents mount separately. See the [account contract](naeil-header.md#account-presentation).
|
|
78
|
+
|
|
79
|
+
`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) and [footer interception contract](naeil-footer.md); a Link adapter must handle absolute official and GitHub destinations as well as local routes. Only pass `onLocaleChange` when the application supports its complete language set.
|
|
64
80
|
|
|
65
81
|
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.
|
|
66
82
|
|
|
@@ -88,16 +104,32 @@ Put this in the **consumer application's** `AGENTS.md` (or equivalent repository
|
|
|
88
104
|
## Shared application layout
|
|
89
105
|
- Read the installed @naeil/ui/DESIGN.md and docs/components/application-layout.md before UI layout work.
|
|
90
106
|
- Use @naeil/ui/naeil-header for the canonical naeil header; use Navigation from @naeil/ui/ui for a different product menu. Use NaeilFooter from @naeil/ui/naeil-footer for owned service footers; SiteFooter remains the generic primitive. Keep existing Next Nav/Footer compatibility adapters when applicable.
|
|
107
|
+
- Put NaeilHeaderAccountControl from @naeil/ui/naeil-header in authSlot for owned apps. Supply real session state, the busy flag and guarded logout callback. Keep pending state and the request lock above the header so desktop/mobile copies share them; do not copy account/avatar/menu markup.
|
|
91
108
|
- 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.
|
|
92
109
|
- 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.
|
|
93
110
|
- Check the installed package version and CSS before creating a replacement for an apparently missing component.
|
|
94
|
-
- Verify actual shared navigation/footer rendering and stable anchors across routes, themes and supported sizes. An import
|
|
111
|
+
- Verify actual shared navigation/footer rendering and stable anchors across routes, themes and supported sizes, including signed-out, signed-in, menu, busy, cancellation/failure and retry states. An import or anonymous-only check is not adoption evidence. Record intentional route exceptions.
|
|
95
112
|
```
|
|
96
113
|
|
|
97
114
|
## Adoption checks
|
|
98
115
|
|
|
99
116
|
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.
|
|
100
117
|
|
|
118
|
+
Owned-service checks also verify canonical header/footer destinations, rendered package/contract identity and shared account states. Inspect both signed-in and signed-out chrome, open the account menu, and exercise busy, cancel/failure and retry without duplicate requests when the mobile sheet is reopened or the viewport changes.
|
|
119
|
+
|
|
101
120
|
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.
|
|
102
121
|
|
|
103
|
-
See [canonical footer content and save interception](naeil-footer.md). 0.7.
|
|
122
|
+
See [canonical footer content and save interception](naeil-footer.md). Version 0.7.1 includes package/contract identity from the unpublished 0.7.0 candidate; registry publication, hosted Docs and per-service operational rollout have separate receipts.
|
|
123
|
+
|
|
124
|
+
## Shared naeil.dev login (services on `*.naeil.dev`)
|
|
125
|
+
|
|
126
|
+
Live since 2026-10-22 for naeil.dev, abestimate.naeil.dev and jev.naeil.dev. A new service joins the same login instead of running its own session, relay or password. Home Console (`:2455` on the tailnet) is outside the cookie scope.
|
|
127
|
+
|
|
128
|
+
- **Session:** read the default `@supabase/ssr` 0.9.0 cookie `sb-dathsxdsaxooifnxjket-auth-token` (and its `.0`, `.1` chunks) with `Domain=.naeil.dev; Path=/; Secure; SameSite=Lax`. Write refreshed chunks with the same options; never set a host-only copy.
|
|
129
|
+
- **Identity and access:** on the server call `supabase.auth.getUser()`, then `rpc('access_decision', { p_service_id: '<service>' })` with that session's access token. `allowed` → continue; `not_granted` / `member_inactive` / `service_inactive` → 403 page; terminal session errors → treat as signed out; other failures → 503.
|
|
130
|
+
- **Signed out:** redirect (307) to `https://naeil.dev/login?next=<absolute URL>`. Add the service origin to the site's `canonicalRedirect` allowlist (`src/lib/auth/redirect.ts`).
|
|
131
|
+
- **Logout:** `signOut({ scope: 'local' })`, then expire every shared cookie chunk with the same Domain/Path. All services see the user as signed out on the next request.
|
|
132
|
+
- **Header:** `NaeilHeaderAccountControl` in `authSlot`, linked to the login URL and the logout callback.
|
|
133
|
+
- **Onboarding:** register the service id in the central catalog, mark it verified, and grant users from Home Console (`console_set_access`).
|
|
134
|
+
|
|
135
|
+
Reference code: Estimate `src/server/naeil-shared-session.ts`; site `src/lib/auth/site-session.ts` and `cookie-domain.ts`. Commit `c076391` handles a stale pre-2026-10-17 host-only apex cookie that otherwise breaks the OAuth callback.
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# NaeilFooter — canonical service footer
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Included in **published and registry-verified 0.7.1**, from the unpublished 0.7.0 candidate. Install exact `@naeil/ui@0.7.1` from npm; hosted Docs and service activation have separate receipts. See [release identities and publication status](../package-release.md#publication-and-deployment). React-only opt-in entry:
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
6
|
import { NaeilFooter } from '@naeil/ui/naeil-footer';
|
|
7
7
|
<NaeilFooter locale="ja" variant="compact" Link={GuardedLink} />
|
|
8
8
|
```
|
|
9
9
|
|
|
10
|
-
Use with [NaeilHeader](naeil-header.md) on owned user-facing services. Both `full` and `compact` contain the .naeil home link, Projects, Blog and the official naeil GitHub link. Full also displays the existing tagline. Compact reduces spacing/description, not the destinations. No social account or legal claim is invented. The website's former generic X homepage icon is not a canonical account link.
|
|
10
|
+
Use with [NaeilHeader and its account control](naeil-header.md) on owned user-facing services. Both `full` and `compact` contain the .naeil home link, Projects, Blog and the official naeil GitHub link. Full also displays the existing tagline. Compact reduces spacing/description, not the destinations. No social account or legal claim is invented. The website's former generic X homepage icon is not a canonical account link.
|
|
11
11
|
|
|
12
12
|
`locale` selects `en`, `ko`, or `ja`. `resolveHref(path)` defaults to official localized naeil.dev destinations; a local website router may resolve unlocalized paths itself. `Link` handles **every** canonical anchor, including absolute GitHub URLs. It must forward href, target, rel, onClick, className and children. GitHub opens a new tab with noopener/noreferrer. The shared implementation does not itself trigger navigation or await saves.
|
|
13
13
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# NaeilHeader — branded whole-header composition
|
|
2
2
|
|
|
3
|
-
This guide
|
|
3
|
+
This maintained guide covers **published and registry-verified @naeil/ui 0.7.1**, adding shared account presentation to the unchanged 0.6.0 frame. Install exact `@naeil/ui@0.7.1` from npm; hosted Docs and service activation have separate receipts. See [release identities and publication status](../package-release.md#publication-and-deployment). 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, NaeilHeaderAccountControl } from '@naeil/ui/naeil-header';
|
|
@@ -22,7 +22,7 @@ The module owns the brand, five-project catalog and header-only translations, pr
|
|
|
22
22
|
|
|
23
23
|
Consumers provide an existing next-themes provider, routing/dirty-save guard, current locale and real authentication behavior. Default destinations point to `https://naeil.dev/{locale}`; the site's localized Link instead uses `resolveHref={path => path}`. A supplied `Link` handles default official destinations, including cross-origin URLs. `onNavigate` can intercept brand and menu links; honor modified clicks and target behavior. Explicit `external: true` project overrides and `projectsExternal` use native anchors, so intercept them with `onNavigate` when a dirty guard is required.
|
|
24
24
|
|
|
25
|
-
Only provide `onLocaleChange` when the application's interface supports all three canonical locales (`en`, `ko`, `ja`). Omitting it removes the locale control; the component does not create application translations or shared preferences. `authSlot` uses `NaeilHeaderAccountControl` in owned applications: a
|
|
25
|
+
Only provide `onLocaleChange` when the application's interface supports all three canonical locales (`en`, `ko`, `ja`). Omitting it removes the locale control; the component does not create application translations or shared preferences. `authSlot` uses `NaeilHeaderAccountControl` in owned applications: a shared 44px neutral account trigger and localized Radix logout menu. Consumers supply their real session state/callbacks, not alternative account markup. The legacy slot remains public for deliberate compatibility overrides. It does not integrate site SSO, share credentials or create accounts. Theme preferences remain consumer-origin state. Without a working provider, rendering alone does not establish theme switching.
|
|
26
26
|
|
|
27
27
|
| Prop | Contract |
|
|
28
28
|
| --- | --- |
|
|
@@ -51,16 +51,18 @@ Standard header attributes and the remaining inherited [Navigation props](naviga
|
|
|
51
51
|
|
|
52
52
|
Keep errors visible in the consumer's recovery UI or toast. The package never calls an authentication endpoint. Compare signed-in and signed-out render states separately; anonymous-only acceptance cannot establish authenticated parity. `AccountStates` is a synthetic Storybook example for pending/cancel/error/retry.
|
|
53
53
|
|
|
54
|
+
Own pending state and the in-flight request lock above `NaeilHeader`. Navigation mounts desktop and mobile slot contents separately, and closing the mobile sheet unmounts its copy. Pass the same controller to both through `authSlot`; test reopening the sheet and changing viewport during a pending request. State inside an independently mounted slot component can enable duplicate requests.
|
|
55
|
+
|
|
54
56
|
## Frame and content clearance
|
|
55
57
|
|
|
56
58
|
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).
|
|
57
59
|
|
|
58
60
|
## Artwork and package boundary
|
|
59
61
|
|
|
60
|
-
The five decorative images reference `https://naeil.dev/images/{coral,jellyfish,whale,fish,turtle}.png`. Rendering those images requires network access to the official origin. Their bytes are not redistributed in npm; [third-party notices](../../THIRD_PARTY_NOTICES.md) retain unresolved artwork provenance and redistribution limits. Brand marks are not relicensed by the repository MIT license. Captions and links remain usable when images fail.
|
|
62
|
+
The next release narrows the default catalog to naeil-ui and its `whale.png` image; 0.7.1 retains the five-project catalog described here. The five decorative images reference `https://naeil.dev/images/{coral,jellyfish,whale,fish,turtle}.png`. Rendering those images requires network access to the official origin. Their bytes are not redistributed in npm; [third-party notices](../../THIRD_PARTY_NOTICES.md) retain unresolved artwork provenance and redistribution limits. Brand marks are not relicensed by the repository MIT license. Captions and links remain usable when images fail.
|
|
61
63
|
|
|
62
|
-
This entry requires no Next.js, next-intl, site session/auth backend, full application message catalog, hero or site public folder. Generic `/ui` imports do not import its catalog.
|
|
64
|
+
This entry requires no Next.js, next-intl, site session/auth backend, full application message catalog, hero or site public folder. Generic `/ui` imports do not import its catalog. Storybook provides **Brand / NaeilHeader / Docs, Usage, JapaneseApplication, AccountStates, ReferenceFull, ReferenceCompact**; the Japanese example omits unsupported locale switching and supplies application state to the shared account control. Local examples do not establish hosted deployment.
|
|
63
65
|
|
|
64
66
|
Verify actual packed consumption, Storybook behavior and rendered comparisons at matching viewport/language/theme. Source imports alone do not prove visual parity. Native Safari, devices, assistive technology, full OAuth and unresolved accessibility observations retain the [documented support limits](../design/public-ui-support.md).
|
|
65
67
|
|
|
66
|
-
Pair owned-service headers with [NaeilFooter](naeil-footer.md).
|
|
68
|
+
Pair owned-service headers with [NaeilFooter](naeil-footer.md). Version 0.7.1 emits package/contract identifiers for actual rendered validation. The immutable `v0.7.1` package source is `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618`; maintained pending-state guidance above and hosted Docs are reviewed separately from that frozen snapshot.
|
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
이 안내는 `@naeil/ui`의 기본 모양과 재사용 규칙을 설명한다. 패키지 소비와 소비 사이트 배포는 별도 작업이다.
|
|
4
4
|
|
|
5
|
-
이 안내는
|
|
5
|
+
**0.7.1 npm 게시·registry 검증 완료 — 2026-10-23.** 현재 게시된 기준 버전은 **0.7.1**이다. 이 유지보수 안내는 canonical `NaeilFooter`, `NaeilHeaderAccountControl`, `/release` 식별자와 기존 1600px 프레임을 함께 다룬다. 0.7.0은 미게시 후보이며, 처음 게시된 0.7.x 버전은 0.7.1이다. 독립된 새 React/Next registry 설치에서 동결 파일 139개와 타입·프로덕션 빌드·브라우저 검증이 통과했다. hosted Docs와 상시 배포 활성화는 별도 실행 기록으로 확인한다. UI v2는 디자인 세대 이름이며 npm 2.0을 뜻하지 않는다. 동결 패키지 소스·archive, 별도 검토한 Docs 소스와 실제 게시·배포 결과는 [릴리스 정책](../package-release.md#publication-and-deployment)에서 구분한다.
|
|
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`·`/naeil-footer`를 사용한다. API 키와 Next.js는 필요 없다. 검증한 registry 버전을 고정해 설치한다.
|
|
10
10
|
|
|
11
11
|
```sh
|
|
12
|
-
pnpm add --save-exact @naeil/ui@0.
|
|
12
|
+
pnpm add --save-exact @naeil/ui@0.7.1
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
registry의 0.7.1 archive는 동결 릴리스 archive와 바이트가 일치한다. archive에 포함된 안내는 준비 시점의 기록이므로 현재 설치에는 이 유지보수 안내를 따른다. 로컬 개발에서는 저장소에서 `pnpm build:pkg`와 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고 `/tmp/naeil-ui-0.7.1.tgz`를 설치한다. 현재 소스의 개발용 pack은 동결 릴리스 archive와 다르므로 게시 파일을 대체하지 않는다. [독립 React 예제](https://github.com/naeil-dev/naeil-ui/tree/main/examples/react)와 [검증/릴리스 정책](../package-release.md)을 참고한다.
|
|
16
16
|
|
|
17
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 의존성과 코드는 공통 소비 경계에서 제외했다.
|
|
18
18
|
|
|
19
|
-
버전을 생략한 설치는 registry의 latest 태그를 따른다.
|
|
19
|
+
버전을 생략한 설치는 registry의 latest 태그를 따른다. 2026-10-23에 latest는 0.7.1로 확인했다. 검증한 버전을 유지하려면 0.7.1을 명시한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
|
|
20
20
|
|
|
21
21
|
Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번 불러온다.
|
|
22
22
|
|
|
@@ -80,7 +80,7 @@ Next.js 소비자는 layout의 metadata title 기본값/템플릿과 페이지
|
|
|
80
80
|
|
|
81
81
|
## 앱 전체 틀과 콘텐츠 폭
|
|
82
82
|
|
|
83
|
-
실제 naeil.dev 브랜드 헤더를 이어받는 앱은 선택적 React 전용 `@naeil/ui/naeil-header`의 `NaeilHeader`를
|
|
83
|
+
실제 naeil.dev 브랜드 헤더를 이어받는 앱은 선택적 React 전용 `@naeil/ui/naeil-header`의 `NaeilHeader`를 사용하고, 소유 서비스 푸터는 `@naeil/ui/naeil-footer`의 `NaeilFooter`로 구성한다. 전체 프로젝트 메뉴·헤더 번역·테마/선택적 언어 컨트롤·toolbar·반응형 스타일과 canonical 푸터 목적지를 소비 앱에 다시 복사하지 않는다. 소비 앱은 기존 theme provider, 라우팅·저장 guard와 현재 언어를 연결한다. `authSlot`에는 같은 모듈의 `NaeilHeaderAccountControl`을 두고 실제 세션 상태·busy·guarded logout 콜백을 전달한다. pending 상태와 요청 잠금은 헤더 위에서 소유해 데스크톱/모바일 슬롯이 공유한다. 언어 변경을 지원하지 않으면 `onLocaleChange`를 생략한다. [전체 헤더 계약](../components/naeil-header.md)과 [푸터 계약](../components/naeil-footer.md)을 참조한다.
|
|
84
84
|
|
|
85
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)에 유지한다.
|
|
86
86
|
|
|
@@ -120,6 +120,7 @@ import { Navigation, SiteFooter } from "@naeil/ui/ui";
|
|
|
120
120
|
|
|
121
121
|
- 주요 경로를 같은 조건에서 비교한다. 메뉴 좌표와 여백, 제목·행동의 정렬을 확인하고 의도적인 차이는 이유를 남긴다.
|
|
122
122
|
- 제품이 지원하는 언어, 긴 이름, 적은/많은 데이터, 영향을 받는 로딩·오류 상태를 포함한다. 공유 컴포넌트 예시는 기존 한글·영문·일문 기준을 유지한다.
|
|
123
|
+
- 인증 전·후, 계정 메뉴, 로그아웃 busy·취소·실패·재시도를 확인한다. pending 중 모바일 메뉴 재열기나 화면 폭 변경으로 중복 요청이 발생하지 않아야 한다. 익명 화면만으로 인증된 헤더의 일치를 주장하지 않는다.
|
|
123
124
|
- 페이지 넘침과 함께 표 내부 잘림·줄바꿈·조작 영역을 확인한다. 내부 스크롤 자체를 페이지 넘침과 혼동하지 않는다.
|
|
124
125
|
- 기능 검사, 공통 기준 준수, 실제 화면 구성을 별도로 기록한다. 기존 대비·중첩 조작·터치 크기 문제는 현재 증거가 생기기 전까지 미해결로 남긴다.
|
|
125
126
|
|
|
@@ -156,7 +157,7 @@ Storybook의 로컬 폰트 import는 예시다. 그대로 앱 전역에 모든
|
|
|
156
157
|
|
|
157
158
|
## 개별 컴포넌트 안내
|
|
158
159
|
|
|
159
|
-
[컴포넌트 사용 안내](../components/README.md)는 13개 primitive와 Navigation·SiteFooter·전체 NaeilHeader
|
|
160
|
+
[컴포넌트 사용 안내](../components/README.md)는 13개 primitive와 Navigation·SiteFooter·NaeilFooter·전체 NaeilHeader 및 계정 컨트롤의 실제 API·기본값, 키보드, 상태, 레이블·오류 연결, 재정의 책임을 설명한다. Storybook 소스는 UI 15개와 Brand 2개, 총 17개 Docs를 제공한다. canonical 푸터 전체/축약형과 계정 상태는 기존 NaeilHeader/SiteFooter stories에 포함된다. 각 `Docs`·`Usage`와 `Brand / NaeilHeader / JapaneseApplication, ReferenceFull, ReferenceCompact, AccountStates`에서 안내와 실행 예시를 확인한다. 이는 새 hosted Docs 배포 완료를 뜻하지 않는다. [지원 범위와 수동 점검](public-ui-support.md)은 자동 검사와 실제 보조 기술·운영체제 검증의 차이를 기록한다.
|
|
160
161
|
|
|
161
162
|
## 확인 방법
|
|
162
163
|
|
|
@@ -169,7 +170,7 @@ Storybook의 로컬 폰트 import는 예시다. 그대로 앱 전역에 모든
|
|
|
169
170
|
|
|
170
171
|
## 0.3 package boundary
|
|
171
172
|
|
|
172
|
-
The heading retains the original 0.3 migration anchor; the
|
|
173
|
+
The heading retains the original 0.3 migration anchor; the boundary below includes published and registry-verified 0.7.1. `/ui` is the React core. Opt-in `/naeil-header` provides the canonical complete branded header and `NaeilHeaderAccountControl`; `/naeil-footer` provides canonical full/compact footers. Both are React-only. `/release` exports server-safe `uiRelease` metadata, without application artifact or environment data. 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 the dedicated entries and appropriate shared deep modules. `next-themes` is a React runtime library; it does not require Next.js. Fonts remain consumer-owned.
|
|
173
174
|
|
|
174
175
|
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.
|
|
175
176
|
|
|
@@ -206,7 +207,7 @@ i18n/config
|
|
|
206
207
|
i18n/routing
|
|
207
208
|
```
|
|
208
209
|
|
|
209
|
-
`components/index` has the same framework requirements as root. `/utils` and `lib/utils` remain aliases for `cn`. `i18n/config` preserves the compatibility locale names; products may instead own their locale list and routing. There are no open-ended component/lib/i18n export patterns. Root, `/ui`, `/utils`, `/theme.css`, `/globals.css` and `/components.css` remain public
|
|
210
|
+
`components/index` has the same framework requirements as root. `/utils` and `lib/utils` remain aliases for `cn`. `i18n/config` preserves the compatibility locale names; products may instead own their locale list and routing. There are no open-ended component/lib/i18n export patterns. Root, `/ui`, `/utils`, `/theme.css`, `/globals.css` and `/components.css` remain public. `/naeil-header`, `/naeil-footer` and `/release` are explicit dedicated entries; they do not create open-ended component export patterns.
|
|
210
211
|
|
|
211
212
|
Every excluded source path stays in this repository for the brand/example website. Move any local-source consumer use into the consumer application before upgrading:
|
|
212
213
|
|
|
@@ -214,7 +215,7 @@ Every excluded source path stays in this repository for the brand/example websit
|
|
|
214
215
|
| --- | --- |
|
|
215
216
|
| `components/nav-wrapper`, `components/nav-server-wrapper` | Use `/naeil-header` for the canonical whole header, or preserve Nav compatibility through your own adapter; your app loads users/sessions. |
|
|
216
217
|
| `components/footer-wrapper` | Compose preserved Footer with your app's Link. |
|
|
217
|
-
| `components/auth-slot` |
|
|
218
|
+
| `components/auth-slot` | The app owns session state and guarded logout. Owned-service headers render `NaeilHeaderAccountControl` from `/naeil-header` in `authSlot`; legacy custom Nav slots remain compatible. |
|
|
218
219
|
| `components/hero-scene`, `components/hero-section`, `components/paraglider-cursor` | Website scene/cursor source, assets and Three dependencies stay website-owned. |
|
|
219
220
|
| `components/project-layout`, `components/workflow-diagram`, `components/accent-picker` | Website showcase/data/theme editing composition; use shared primitives in product-owned compositions. |
|
|
220
221
|
| `components/blog/MarkdownRenderer`, `lib/blog` | Application-owned content rendering, filesystem and MDX/remark pipeline. |
|
package/docs/package-release.md
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Package verification and release policy
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
**0.7.1 published and registry-verified — 2026-10-23.** Current registry baseline: **0.7.1**. This first published 0.7.x release includes canonical footer/release identity from the unpublished 0.7.0 candidate, plus shared account presentation. The owner authorized publication and the selected three-service continuous rollout; hosted Docs and standing activation require separate receipts. The completed [0.6.0 release](https://github.com/naeil-dev/naeil-ui/releases/tag/v0.6.0) remains evidence for its published application frame. 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
|
|
|
7
|
-
One repository contains the shared package and the separate Next.js brand/example website. `@naeil/ui/ui` provides React primitives and generic Navigation/SiteFooter. The opt-in React-only `@naeil/ui/naeil-header` provides the complete actual naeil.dev branded header
|
|
7
|
+
One repository contains the shared package and the separate Next.js brand/example website. `@naeil/ui/ui` provides React primitives and generic Navigation/SiteFooter. The opt-in React-only `@naeil/ui/naeil-header` provides the complete actual naeil.dev branded header and `NaeilHeaderAccountControl`; see [its consumer contract](components/naeil-header.md). Owned apps render that control in `authSlot` and supply session state, pending state and guarded callbacks above the header. The legacy root is a framework compatibility entry with static Next/next-intl imports, even when selecting only Logo or a heading; React-only consumers use the documented shared deep modules. Next and next-intl are optional peers, not optional behavior inside the root. Supply them when importing that entry, Nav, Footer, or i18n/routing. Theme controls and Toaster use the framework-independent React library next-themes, retained as a runtime dependency.
|
|
8
8
|
|
|
9
|
-
Owned services use `@naeil/ui/naeil-footer` for the canonical localized destinations in full/compact variants; generic SiteFooter and legacy Footer retain their APIs. Footer navigation adapters preserve application save/flush decisions and modified-click behavior. `@naeil/ui/release` is server-safe metadata; it contains no application artifact, credential or environment. Applications compile their own allowlisted artifact/source identity. See [the footer contract](components/naeil-footer.md).
|
|
9
|
+
Owned services use `@naeil/ui/naeil-footer` for the canonical localized destinations in full/compact variants; generic SiteFooter and legacy Footer retain their APIs. Footer navigation adapters preserve application save/flush decisions and modified-click behavior. `@naeil/ui/release` is server-safe metadata; it contains no application artifact, credential or environment. Applications compile their own allowlisted artifact/source identity. See [the footer contract](components/naeil-footer.md). Current coordinator policy, selected services, activation and recovery evidence are maintained in the [rollout records](https://github.com/naeil-dev/naeil-ui/tree/main/docs/rollout); historical disabled-policy statements describe their dated checkpoints. Publishing a package, creating an update PR or merging it never establishes complete consumer rollout. Home Console is outside the selected shared-UI rollout.
|
|
10
10
|
|
|
11
11
|
Website tools remain development dependencies so maintainers can develop both products. npm tarball consumers install only component runtime dependencies and their host React/ReactDOM. Build entries, package exports and packed checks constrain the public boundary. There is no bundled website action, Supabase helper, Three/hero/cursor module, blog engine or full application message catalog. The opt-in header includes only its three header dictionaries and canonical project catalog. Its five decorative images reference official `https://naeil.dev/images/*.png` URLs and require network access; no image bytes are bundled, and unresolved artwork redistribution provenance remains in [third-party notices](../THIRD_PARTY_NOTICES.md).
|
|
12
12
|
|
|
@@ -42,7 +42,7 @@ NAEIL_UI_EXPECTED_ARCHIVE_SHA256=FULL_LOWERCASE_SHA256 pnpm check:package
|
|
|
42
42
|
|
|
43
43
|
Each check hashes its actual `npm pack` output and prints the digest. An unset expectation preserves normal development checks; a defined malformed or mismatched digest fails. Record matching boundary and clean React/Next results against the final archive, then reconcile package metadata, source revision and the consumer lock/archive identities. A provisional pack pass does not verify later documentation or archive bytes.
|
|
44
44
|
|
|
45
|
-
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
|
|
45
|
+
CI runs these checks and a separate actual Storybook/browser job. Configured browser projects run Chromium, Firefox and WebKit in CI. Verification and manual Pages jobs use the pinned Playwright 1.63.0 image, mounted-directory ownership correction and a version/browser launch preflight before builds; CI does not download browsers or OS packages during those jobs. Local Chromium/WebKit results and the historical Firefox launch block remain distinguished in the [support matrix](design/public-ui-support.md), [dated Stage 3 verification](design/public-ui-stage3-verification.md) and [Stage 4 extension verification](design/public-ui-stage4-verification.md). 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.
|
|
46
46
|
|
|
47
47
|
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.
|
|
48
48
|
|
|
@@ -50,6 +50,24 @@ The explicit font-notice regression gate copies the real React fixture config in
|
|
|
50
50
|
|
|
51
51
|
## Publication and deployment
|
|
52
52
|
|
|
53
|
+
### Verified 0.7.1 registry publication and maintained Docs — 2026-10-23
|
|
54
|
+
|
|
55
|
+
The published release preserves these immutable identities:
|
|
56
|
+
|
|
57
|
+
| Item | Identity |
|
|
58
|
+
| --- | --- |
|
|
59
|
+
| Package source and pushed `v0.7.1` tag | `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618` |
|
|
60
|
+
| Frozen archive | `docs/rollout/frozen/naeil-ui-0.7.1.tgz` |
|
|
61
|
+
| Archive SHA-256 | `ecd656c595fd63516417eef58a5e2624d1f1bf928ba0465761292d05502ab3f8` |
|
|
62
|
+
| Archive size / contents | 167705 compressed bytes; 139 files; 904985 unpacked bytes |
|
|
63
|
+
| Chrome contract | 1, with matching frozen frame/account references |
|
|
64
|
+
|
|
65
|
+
The frozen archive was published directly with scripts disabled. npm records publication at `2026-10-23T01:14:11.387Z`; `latest` was verified as `0.7.1`. An independent [registry archive](https://registry.npmjs.org/@naeil/ui/-/ui-0.7.1.tgz) download matched the frozen SHA-256, SHA-1, SRI, length and contents. Do not build or pack maintained main and call it the same frozen release. Earlier exact-archive validation is retained in the [dated account-correction evidence](https://github.com/naeil-dev/naeil-ui/tree/main/docs/rollout/evidence/account-correction-2026-10-17). [CI run 39859416335](https://github.com/naeil-dev/naeil-ui/actions/runs/39859416335) passed at `041c3c4f61755eca422d9a5727b32adc8c02a1f4`, including 563 unit tests and 380 browser tests (5 and 4 expected skips respectively), contrast, package/site and consumer checks. Its rebuilt archive differs because maintained guides changed; that CI is current compatibility evidence, not byte-identical frozen validation.
|
|
66
|
+
|
|
67
|
+
The archive's bundled guides are an immutable preparation snapshot, including 0.6.0 installation copy. Release notes must point to maintained instructions. Deploy Docs from a separately reviewed commit containing current guidance, the `v0.7.1` link correction and the corrected manual workflow. Record that Docs SHA, workflow run, deployment and actual hosted checks separately; retain `v0.7.1` at the frozen package source.
|
|
68
|
+
|
|
69
|
+
Postpublication registry checks passed on 2026-10-23. Separate fresh React/Next fixtures installed exact `@naeil/ui@0.7.1` from npmjs with independent empty caches and no repository dependency symlinks; every installed file matched the frozen 139-file inventory in both fixtures. Types, production builds, public root/deep import boundaries, release/footer/account SSR and browser checks passed, including the React fixture's absence of Next/Supabase/Three. The retained `registry-receipt.json` and successful `npm-publication-verification.json` bind these checks to the frozen source/archive; the latter records `checkedAt: 2026-10-23T01:19:50.385Z`. At the 01:19 UTC registry checkpoint, the tag had been pushed and the Release draft prepared. GitHub Release publication, hosted Docs and standing activation require separate receipts; see the release assets and [current rollout runbook](https://github.com/naeil-dev/naeil-ui/blob/main/docs/rollout/standing-rollout.md). Native/manual, real OAuth and global service-discovery evidence retain their separate scopes and limits.
|
|
70
|
+
|
|
53
71
|
### 0.6.0 release scope — 2026-10-16
|
|
54
72
|
|
|
55
73
|
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.
|
|
@@ -86,15 +104,15 @@ The immutable npm archive's bundled guides are the release-preparation snapshot.
|
|
|
86
104
|
|
|
87
105
|
### Release procedure
|
|
88
106
|
|
|
89
|
-
Storybook resolves relative Markdown guide links against
|
|
107
|
+
Maintained Storybook resolves relative Markdown guide links against `v0.7.1`, whose frozen package source is `32108fd8e1cb1db6dae24a09f3ca72ac9a91f618`. That tag is independent of the reviewed Docs deployment SHA. Hosted verification checks that the pinned links resolve; the unpublished `v0.7.0` tag is not a valid target. Historical foundation/source-authority links remain at their original revisions. Freeze subsequent documentation changes separately from immutable release archives.
|
|
90
108
|
|
|
91
109
|
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.
|
|
92
110
|
|
|
93
111
|
The procedure preserves the distinction between preparation and external verification. Use the intended version in place of `VERSION`; future releases require their own authorization and frozen source/archive:
|
|
94
112
|
|
|
95
113
|
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.
|
|
96
|
-
2.
|
|
97
|
-
3. Check registry availability for `@naeil/ui@VERSION` immediately before publication. Publish the verified
|
|
114
|
+
2. When freezing a new release, build and inspect an 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 with `NAEIL_UI_EXPECTED_ARCHIVE_SHA256` set to that digest; confirm both generated archives match the candidate. For already frozen 0.7.1, rehash the existing file and retain its exact-archive evidence; maintained guide updates must not replace it.
|
|
115
|
+
3. Check registry availability for `@naeil/ui@VERSION` immediately before publication. Publish the verified archive with `--ignore-scripts`, then independently verify registry version/time, integrity, dist-tag and archive bytes, followed by fresh exact-version registry consumers. If that version already exists, inspect equality rather than attempt overwrite; a changelog or install command alone proves none of these.
|
|
98
116
|
4. Create the release tag/GitHub Release for the recorded source and retain version, artifact identity, validation scope and support limitations.
|
|
99
117
|
5. Publish the reviewed Storybook artifact through the manual Pages workflow below. Verify the actual hosted URL, subpath Docs-to-Usage navigation, fonts and notices over HTTP before reporting it live.
|
|
100
118
|
|
|
@@ -104,7 +122,7 @@ npm publication, GitHub Releases, main merge and hosted Docs are distinct operat
|
|
|
104
122
|
|
|
105
123
|
## Storybook preview artifact
|
|
106
124
|
|
|
107
|
-
`pnpm build:storybook` builds 17 actual Docs pages: 15 UI families (the 13 primitives plus Navigation and SiteFooter) and Brand / Logo and NaeilHeader. Interactive
|
|
125
|
+
`pnpm build:storybook` builds 17 actual Docs pages: 15 UI families (the 13 primitives plus Navigation and SiteFooter) and Brand / Logo and NaeilHeader. Interactive examples include the complete branded header, JapaneseApplication, canonical footer ReferenceFull/ReferenceCompact and AccountStates. Canonical footer/account examples live within existing stories, without a separate NaeilFooter Docs family. It copies generated documentation notices and approved canonical brand SVGs, bundles locally installed Pretendard/Noto Sans JP and disables Vite publicDir. The artifact check verifies real Docs/story entries, exact MIT/shadcn/font notices, brand references and absence of website public images/SVGs/HTML. It does not claim those excluded site assets have cleared rights.
|
|
108
126
|
|
|
109
127
|
CI uploads `storybook-preview` after a successful build; it is a downloadable static artifact, not a hosted deployment. Download/unzip it and serve the extracted directory (containing index.html):
|
|
110
128
|
|
|
@@ -118,18 +136,19 @@ Run the command from this checkout after installing its dependencies. It serves
|
|
|
118
136
|
|
|
119
137
|
### Authorized GitHub Pages publication
|
|
120
138
|
|
|
121
|
-
The public Docs destination [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/)
|
|
139
|
+
The public Docs destination [https://naeil-dev.github.io/naeil-ui/](https://naeil-dev.github.io/naeil-ui/) has recorded [Pages run 38737502303](https://github.com/naeil-dev/naeil-ui/actions/runs/38737502303) for 0.5.0 source `04229adbecac302efbf50ab2b8a3a40edb0a04bb`, rechecked 2026-10-16. Subsequent deployments belong to their release records; this preparation does not establish 0.7.1 hosted publication. 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).
|
|
122
140
|
|
|
123
141
|
`.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.
|
|
124
142
|
|
|
125
|
-
Select **Publish reviewed UI docs (manual only)** in Actions (or use the command below), supply the exact full reviewed source SHA and type `PUBLISH_REVIEWED_DOCS`. The job checks out that SHA, rebuilds/verifies its actual preview/notices, runs the configured three-engine browser suite, and deploys only the Pages artifact through its environment. Failed checks do not reach deploy. Native observations and remaining manual limitations belong in the release evidence; the workflow does not certify them.
|
|
143
|
+
Select **Publish reviewed UI docs (manual only)** in Actions (or use the command below), supply the exact full reviewed Docs source SHA and type `PUBLISH_REVIEWED_DOCS`. The job checks out that SHA, corrects mounted-directory ownership before the exact Git check, verifies preinstalled Chromium/Firefox/WebKit in the pinned Playwright image, rebuilds/verifies its actual preview/notices, runs the configured three-engine browser suite, and deploys only the Pages artifact through its environment. Failed checks do not reach deploy. Native observations and remaining manual limitations belong in the release evidence; the workflow does not certify them.
|
|
126
144
|
|
|
127
145
|
```sh
|
|
128
|
-
# Release maintainer:
|
|
129
|
-
|
|
146
|
+
# Release maintainer: dispatch the corrected workflow from main.
|
|
147
|
+
# For 0.7.1, reviewed_sha is the separately reviewed Docs commit, not 32108fd.
|
|
148
|
+
gh workflow run publish-docs-manual.yml --ref main -f reviewed_sha=FULL_REVIEWED_DOCS_COMMIT_SHA -f confirmation=PUBLISH_REVIEWED_DOCS
|
|
130
149
|
```
|
|
131
150
|
|
|
132
|
-
After
|
|
151
|
+
After the 0.7.1 Docs deployment, verify the manager and iframe under `/naeil-ui/`, all 15 UI and 2 Brand Docs pages, their Usage examples, NaeilHeader JapaneseApplication, canonical footer full/compact destinations, and signed-out/signed-in/menu/busy account states. Check pinned `v0.7.1` guide links, canonical artwork and official image references, local fonts and exact LICENSE/THIRD_PARTY_NOTICES/font notices over HTTP. Retain the deployment URL, Docs source SHA, workflow run and observed results separately from the package source/tag. 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.
|
|
133
152
|
|
|
134
153
|
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.
|
|
135
154
|
|