@naeil/ui 0.8.0 → 0.9.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 +17 -1
- package/DESIGN.md +5 -1
- package/README.md +6 -6
- package/dist/{chunk-WA5D7UI2.js → chunk-JDHGKM25.js} +1 -1
- package/dist/{chunk-ULZPJI5X.js → chunk-XRO3NJAB.js} +1 -1
- 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/lib/ui-release.d.ts +1 -1
- package/dist/source/lib/ui-release.js +1 -1
- package/docs/components/README.md +1 -1
- package/docs/components/application-layout.md +24 -6
- package/docs/components/common.md +2 -2
- package/docs/components/naeil-header.md +10 -4
- package/docs/design/v2-migration.md +8 -4
- package/docs/package-release.md +16 -6
- package/package.json +1 -1
- package/src/styles/components.css +17 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,22 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
-
## 0.
|
|
3
|
+
## 0.9.0 — page-root scrollbar reservation
|
|
4
|
+
|
|
5
|
+
- Reserve one classic scrollbar gutter at the document root through both package CSS paths; overlay scrollbars reserve no space. The root `data-naeil-scrollbar-gutter="auto"` opt-out disables reservation and shared lock correction together.
|
|
6
|
+
- Remove duplicate Radix body margin/gap compensation under the reserved root without changing scroll prevention, modal focus or cleanup. Preserve all frame, typography and spacing tokens.
|
|
7
|
+
- Document the existing Japanese 320px classic signed-out login toolbar wrap, repair comparison capture ordering and verify real clean React/Next CSS consumers against frozen 0.8.0. See the [adopted acceptance contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md). Publication, tags, main/site merge and consumer deployments require separate approval.
|
|
8
|
+
|
|
9
|
+
## 0.8.0 — canonical Home chrome (published 2026-10-28)
|
|
10
|
+
|
|
11
|
+
Published to npm with dist-tag `next`; `latest` remained 0.7.2 at the 2026-10-29 verification. Frozen source/tag: `3f708e27d05212af7f7a5be769f13f871e8d10c7`; archive SHA-256: `6feb5a8cd50265ace584a0855432683b4127119377e08235282eaebd27081084` (139 files). Hosted Docs and service deployments require separate receipts; see the [release policy](docs/package-release.md#publication-and-deployment).
|
|
12
|
+
|
|
13
|
+
- Add `appNavigation`, `brandSuffix` and `statusSlot` for complete owned-service header compositions, plus controlled/observer mobile-sheet state on NaeilHeader and Navigation.
|
|
14
|
+
- Isolate canonical chrome typography from host styles and preserve mobile account/confirmation focus handoffs. Keep existing imports, slots, default catalog and consumer routing/save guards.
|
|
15
|
+
- Retain chrome contract version 1 and verify the Home Workspace/LoginGate profiles against the canonical 0.7.2 baseline. See [NaeilHeader](docs/components/naeil-header.md) for API and compatibility limits.
|
|
16
|
+
|
|
17
|
+
## 0.7.2 — retired project catalog (published)
|
|
18
|
+
|
|
19
|
+
Published to npm; `latest=0.7.2` at the 2026-10-29 verification. Source/tag: `40a3928e24cd2f0141be3e605eed0a75260938fd`. Registry, hosted Docs and service activation remain separate receipts.
|
|
4
20
|
|
|
5
21
|
- 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
22
|
- Release class `dom`: the standing worker adopts it only through an owner-approved `reviewedMigration` of this exact release; ordinary fix-only patches are unaffected.
|
package/DESIGN.md
CHANGED
|
@@ -112,9 +112,13 @@ Demonstrate the system in three neutral compositions: a settings form, a selecta
|
|
|
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
|
+
The page root reserves scrollbar space. Shared full-page frames use `html { scrollbar-gutter: stable; }`, with one scrollbar-side gutter in classic mode and no reserved space in overlay mode. Header, main and footer use the resulting available page width. Changing page length or opening and closing a scroll-locking surface MUST NOT move those frames or their content horizontally. A consumer using a different document scroll policy MUST declare the documented root opt-out and own that policy consistently across routes.
|
|
116
|
+
|
|
117
|
+
The 0.9.0 candidate implements this default once in `components.css`, through either `globals.css` or `theme.css + components.css`. Theme-only/JS-only imports do not set it. `<html data-naeil-scrollbar-gutter="auto">` opts out of both the root reservation and its Radix duplicate-compensation correction before first paint. The default profile is LTR with zero body edge spacing; custom scrollers, body margins or dependency helper classes require consumer integration/opt-out. Unsupported browsers retain existing scroll-lock compensation. See the [adopted frame contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md) and [consumer override guidance](docs/components/application-layout.md).
|
|
118
|
+
|
|
115
119
|
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
120
|
|
|
117
|
-
Application navigation and footer must use the shared compositions: `NaeilHeader` for
|
|
121
|
+
Application navigation and footer must use the shared compositions: complete `NaeilHeader` with `NaeilFooter` for owned naeil services, supplying product menu data through `appNavigation`; generic `Navigation`/`SiteFooter` for a different product without canonical naeil chrome. 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).
|
|
118
122
|
|
|
119
123
|
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.
|
|
120
124
|
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
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.
|
|
5
|
+
**Version 0.9.0 adds the shared page-root scrollbar reservation and scroll-lock correction.** Use an exact version with verified registry publication and archive identity. At the 2026-10-29 verification, the published 0.8.0 archive matched frozen SHA-256 `6feb5a8cd50265ace584a0855432683b4127119377e08235282eaebd27081084` (139 files, source `3f708e27d05212af7f7a5be769f13f871e8d10c7`); tags were `latest=0.7.2`, `next=0.8.0`. Current publication, hosted Docs and per-service deployment have separate receipts in the [release policy](docs/package-release.md#publication-and-deployment).
|
|
6
6
|
|
|
7
7
|
This repository also contains the **naeil.dev brand/example website** and an **optional agent reference workflow**. Choose the path you need:
|
|
8
8
|
|
|
@@ -15,13 +15,13 @@ This repository also contains the **naeil.dev brand/example website** and an **o
|
|
|
15
15
|
|
|
16
16
|
## Use the UI
|
|
17
17
|
|
|
18
|
-
Use React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning.
|
|
18
|
+
Use React 19 / ReactDOM 19 and Tailwind 4. UI v2 names the design generation independently of npm versioning. The installation example targets 0.9.0; run it after verifying that exact version's registry publication:
|
|
19
19
|
|
|
20
20
|
```sh
|
|
21
|
-
pnpm add --save-exact @naeil/ui@0.
|
|
21
|
+
pnpm add --save-exact @naeil/ui@0.9.0
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
The [npm 0.
|
|
24
|
+
The [npm 0.8.0 archive](https://registry.npmjs.org/@naeil/ui/-/ui-0.8.0.tgz) is byte-identical to its frozen release archive. Bundled guides record the preparation snapshot; maintained guides record later publication outcomes. For local development, `pnpm build:pkg` and `npm pack --ignore-scripts --pack-destination /tmp` produce `/tmp/naeil-ui-0.9.0.tgz` from the checked-out source. Use the exact reviewed archive for release verification; later source or guide changes require a new freeze. 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.
|
|
25
25
|
|
|
26
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.
|
|
27
27
|
|
|
@@ -34,11 +34,11 @@ Choose the shared application composition before building a header or footer:
|
|
|
34
34
|
| Actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
|
|
35
35
|
| Owned-service login, account and logout presentation (0.7.1) | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header`, passed in `authSlot` |
|
|
36
36
|
| Owned naeil service footer (0.7.1) | `NaeilFooter` from `@naeil/ui/naeil-footer` |
|
|
37
|
-
| A product
|
|
37
|
+
| A different product without canonical naeil chrome | `Navigation` from `@naeil/ui/ui` |
|
|
38
38
|
| Different product footer or deliberate content override | `SiteFooter` from `@naeil/ui/ui` |
|
|
39
39
|
| Existing Next/next-intl integration | Preserve `Nav` / `Footer` compatibility adapters |
|
|
40
40
|
|
|
41
|
-
Pair `NaeilHeader` and `NaeilFooter` in owned services
|
|
41
|
+
Pair the complete `NaeilHeader` and `NaeilFooter` in owned services, including product menus via `appNavigation`. 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.
|
|
42
42
|
|
|
43
43
|
Import primitives from the dedicated entrypoint:
|
|
44
44
|
|
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-XRO3NJAB.js";
|
|
9
|
+
import "../chunk-JDHGKM25.js";
|
|
10
10
|
import "../chunk-KPE4KKYM.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.
|
|
1
|
+
export declare const uiRelease: Readonly<{version: "0.9.0"; contractVersion: "1"}>;
|
package/dist/lib/ui-release.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const uiRelease = Object.freeze({"version":"0.
|
|
1
|
+
export const uiRelease = Object.freeze({"version":"0.9.0","contractVersion":"1"});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Component usage guides
|
|
2
2
|
|
|
3
|
-
These maintained guides cover
|
|
3
|
+
These maintained guides cover published exact **@naeil/ui 0.8.0** and the unpublished **0.9.0 frame candidate**. On 2026-10-29 registry tags were latest=0.7.2 and next=0.8.0; 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
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Application frame and shared navigation/footer
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Exact **@naeil/ui 0.8.0 is published** (`next` tag; `latest` remains 0.7.2 at the 2026-10-29 verification). The **0.9.0 candidate** adds shared root reservation. Install exact `@naeil/ui@0.8.0` for the published Home APIs; 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
|
|
|
@@ -8,7 +8,7 @@ The published registry baseline is **@naeil/ui 0.7.2**; the new Home profile is
|
|
|
8
8
|
| --- | --- |
|
|
9
9
|
| The actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
|
|
10
10
|
| Owned-service login/account/logout presentation | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header` in `authSlot` |
|
|
11
|
-
| Owned naeil service with product menu data (0.8.0
|
|
11
|
+
| Owned naeil service with product menu data (0.8.0) | Complete `NaeilHeader`, with `appNavigation`, catalog/blog hidden, optional `brandSuffix` and `statusSlot` |
|
|
12
12
|
| A different product menu without canonical naeil chrome | `Navigation` from `@naeil/ui/ui` |
|
|
13
13
|
| Owned naeil service footer | `NaeilFooter` from `@naeil/ui/naeil-footer` |
|
|
14
14
|
| Different product footer or explicit content override | `SiteFooter` from `@naeil/ui/ui` |
|
|
@@ -29,13 +29,30 @@ Choose one header per application frame. Supply menu data, links, route guards,
|
|
|
29
29
|
|
|
30
30
|
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.
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
The **0.9.0 candidate** supplies `html { scrollbar-gutter: stable }` once in `components.css`, reached by `globals.css` or `theme.css + components.css`. Classic mode reserves one browser-sized gutter on short and long pages; overlay mode reserves none. The shared lock correction removes duplicate Radix body right-margin/gap compensation and retains its scroll prevention, focus and nested cleanup. Keep header/main/footer and their ordinary content horizontally stable. Compare matching root policies and measure before any fullPage capture. See the [adopted acceptance contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md).
|
|
33
|
+
|
|
34
|
+
For a different document policy, declare this on the root **before first paint**:
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<html data-naeil-scrollbar-gutter="auto">
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
This sets `scrollbar-gutter: auto` and disables the shared lock correction together. Apply custom root/scroller CSS only after opting out; changing only gutter CSS leaves an unsupported compensation combination. The default full-page profile has zero body margin/outer padding; no new body reset is supplied. Nonzero body edge spacing, custom scroll locks and react-remove-scroll-bar helper classes need consumer integration or opt-out. Theme-only and JS-only imports do not set root policy. Unsupported engines keep Radix's original compensation.
|
|
41
|
+
|
|
42
|
+
Import `globals.css`, or the split `theme.css` and `components.css`, without an enclosing named layer (`@import "@naeil/ui/components.css";`, not `@import "@naeil/ui/components.css" layer(ui);`). The package already declares its own layers. Wrapping the import in a named layer lets the dependency's unlayered `--removed-body-scroll-bar-size` win: it can remain 15px in classic mode even though the important margin correction still wins. Elements using that variable can then shift.
|
|
43
|
+
|
|
44
|
+
After opting out, a plain `@layer base { html { scrollbar-gutter: stable; } }` loses to the package's more specific root attribute selector in the same layer. Write the custom rule outside any layer, for example:
|
|
33
45
|
|
|
34
46
|
```css
|
|
35
|
-
|
|
47
|
+
/* The root has data-naeil-scrollbar-gutter="auto"; this policy owns its lock integration. */
|
|
48
|
+
html[data-naeil-scrollbar-gutter="auto"] { scrollbar-gutter: stable; }
|
|
36
49
|
```
|
|
37
50
|
|
|
38
|
-
|
|
51
|
+
Alternatively, use that attribute selector in `@layer base` after the package import, so equal specificity resolves to the later consumer rule. The shared lock correction stays disabled in either case; the consumer owns matching compensation.
|
|
52
|
+
|
|
53
|
+
In classic mode, a fixed modal scrim covers the page's available width, leaving the reserved gutter strip undimmed (15px in the measured macOS Chromium profile). This is expected with a reserved root; 0.9.0 leaves the scrim styles unchanged. Overlay mode has no reserved strip. A full-viewport scrim redesign is outside this release.
|
|
54
|
+
|
|
55
|
+
Frame and control tokens stay unchanged. At 1920px with a 15px classic gutter the centered 1600px frame starts at 152.5px on both short and long pages (overlay: 160px). Japanese signed-out canonical login content at width 320 has 257px inside the 305px classic sheet; its 261px toolbar wraps to 104px. Overlay remains 44px. Preserve all labels, 44px targets and keyboard access. Home Workspace/account and LoginGate/no-login-slot retain their 44px toolbars; this specific F3 profile difference is documented, not a new Home chrome exception.
|
|
39
56
|
|
|
40
57
|
## Canonical naeil application starter
|
|
41
58
|
|
|
@@ -79,7 +96,7 @@ export function ApplicationLayout({ children, locale, Link, currentHref,
|
|
|
79
96
|
|
|
80
97
|
`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.
|
|
81
98
|
|
|
82
|
-
For owned naeil product navigation, keep the whole header and pass menu data through `appNavigation`; see the [Home profile and host conditions](naeil-header.md#host-typography-and-mobile-handoff-080
|
|
99
|
+
For owned naeil product navigation, keep the whole header and pass menu data through `appNavigation`; see the [Home profile and host conditions](naeil-header.md#host-typography-and-mobile-handoff-080). `mobileOpen`/`onMobileOpenChange` can coordinate the sheet with a consumer confirmation, while busy state and request locking remain above the header. For a different product menu without canonical chrome, 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.
|
|
83
100
|
|
|
84
101
|
An empty desktop menu preserves B1's limitation: resizing alone leaves the sheet open; Escape/close/overlay/route change dismiss it. Controlled-mobile account callbacks wait for both closing layers and their focus handoff; desktop and uncontrolled-mobile account callbacks retain B1's selection-time behavior. A consumer confirmation owns cancellation focus, including a visible desktop account fallback after resize.
|
|
85
102
|
|
|
@@ -109,6 +126,7 @@ Put this in the **consumer application's** `AGENTS.md` (or equivalent repository
|
|
|
109
126
|
- 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.
|
|
110
127
|
- 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.
|
|
111
128
|
- 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.
|
|
129
|
+
- The 0.9.0 candidate CSS reserves a stable root gutter through globals or theme+components; opt out on html with data-naeil-scrollbar-gutter="auto" before first paint to disable both root reservation and lock correction. Compare classic/overlay and short/long body content through menus/dialogs; measure before fullPage screenshots.
|
|
112
130
|
- 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.
|
|
113
131
|
- Check the installed package version and CSS before creating a replacement for an apparently missing component.
|
|
114
132
|
- 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.
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
# Shared usage contract
|
|
2
2
|
|
|
3
|
-
These guides
|
|
3
|
+
These maintained guides cover published exact **@naeil/ui 0.8.0** and the unpublished **0.9.0 frame candidate**; see [release identities and status](../package-release.md#publication-and-deployment). 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. 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.
|
|
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, including the 0.9.0 default stable root gutter, the coupled html opt-out and unchanged classic/overlay toolbar tokens. Theme-only/JS-only imports do not set document policy.
|
|
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
|
-
|
|
3
|
+
Exact **@naeil/ui 0.8.0 is published** (registry `next`; `latest=0.7.2` verified 2026-10-29). These Home APIs are available in that exact version. The **0.9.0 candidate** adds shared root reservation and remains unpublished. Hosted Docs and service activation have separate receipts. See [release identities](../package-release.md#publication-and-deployment).
|
|
4
4
|
|
|
5
5
|
```tsx
|
|
6
6
|
import { NaeilHeader, NaeilHeaderAccountControl } from '@naeil/ui/naeil-header';
|
|
@@ -71,16 +71,16 @@ This entry requires no Next.js, next-intl, site session/auth backend, full appli
|
|
|
71
71
|
|
|
72
72
|
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).
|
|
73
73
|
|
|
74
|
-
Pair owned-service headers with [NaeilFooter](naeil-footer.md). The 0.7.2 source is `40a3928e24cd2f0141be3e605eed0a75260938fd`. Both 0.7.2 and
|
|
74
|
+
Pair owned-service headers with [NaeilFooter](naeil-footer.md). The 0.7.2 source is `40a3928e24cd2f0141be3e605eed0a75260938fd`. Both 0.7.2 and 0.8.0 emit package version and chrome contract `1`; archive identities, maintained guidance and hosted Docs remain separate evidence.
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
## Host typography and mobile handoff (0.8.0
|
|
77
|
+
## Host typography and mobile handoff (0.8.0)
|
|
78
78
|
|
|
79
79
|
Import either `globals.css` or `theme.css` plus `components.css`, and register the installed `dist` with Tailwind `@source`. Header/footer roots and the actual navigation popover, sheet, account menu and locale menu Content elements carry `data-naeil-chrome` and `lang=locale`; the locale Select Content also carries `data-naeil-locale-menu`. Generic Navigation/Select/DropdownMenu do not acquire these markers. Do not identify chrome by option text or by the presence of a Japanese body option.
|
|
80
80
|
|
|
81
81
|
Marker-and-language-scoped final typography uses a package-local font stack and explicit sizes, weights, line heights, letter spacing and smoothing. It supports a host `@theme` / `@theme inline` with different text tokens/font stacks and unlayered element/role rules at Home's specificity, including `(0,3,0)` `:root[attr] [role="menuitem"]` and Home's `[role="dialog"] p` rules. Host rules can load before or after either supported package CSS entry; owned text declarations outrank them. Rules with `!important` or IDs aimed at chrome are outside this guarantee. Ordinary body Select/menu/dialog typography remains host-owned; custom slot content remains consumer-owned. Font files are still consumer-supplied; Japanese chrome and portals use Noto Sans JP even when the document language differs.
|
|
82
82
|
|
|
83
|
-
A controlled mobile sheet defers its shared account action until the account menu and sheet finish closing and restore a surviving header control. The consumer still owns dirty state, confirmation, logout, busy state and the request lock; `onLogout` must tolerate this asynchronous handoff. When a confirmation saves its opener, its restoration policy must also handle a viewport change hiding that opener. Verify normal and reduced motion, cancellation after a desktop transition, pending requests, reopen and retry in the actual application;
|
|
83
|
+
A controlled mobile sheet defers its shared account action until the account menu and sheet finish closing and restore a surviving header control. The consumer still owns dirty state, confirmation, logout, busy state and the request lock; `onLogout` must tolerate this asynchronous handoff. When a confirmation saves its opener, its restoration policy must also handle a viewport change hiding that opener. Verify normal and reduced motion, cancellation after a desktop transition, pending requests, reopen and retry in the actual application; package verification does not replace actual product acceptance.
|
|
84
84
|
|
|
85
85
|
The empty-menu desktop exception is intentional B1 compatibility: a zero-width desktop navigation cannot signal the crossing, so the sheet stays open. Escape, its close button, the overlay or a `currentHref` change still close it. Home owns the confirmation's desktop cancel fallback to the visible row account trigger; the package supplies a visible, focusable control and does not implement the confirmation's restoration policy.
|
|
86
86
|
|
|
@@ -94,3 +94,9 @@ The empty-menu desktop exception is intentional B1 compatibility: a zero-width d
|
|
|
94
94
|
```
|
|
95
95
|
|
|
96
96
|
Keep the default theme/locale/separator/account toolbar for this profile; `toolbarSlot` is a compatibility override, not the Home migration path. Omitting all new props preserves the 0.7.2 canonical profile, apart from markers, language correction, release identity and Radix-generated IDs. SVG/Logo IDs and consumer-supplied IDs are not normalized away. See the `docs/superpowers/specs/2026-10-28-canonical-home-chrome.md` acceptance contract for gates and the four allowed Home differences.
|
|
97
|
+
|
|
98
|
+
## Page-root frame policy (0.9.0 candidate)
|
|
99
|
+
|
|
100
|
+
Both supported CSS paths obtain the stable root rule and scoped Radix duplicate-compensation correction from `components.css`. Theme-only and JS-only imports do not set document scrolling. Declare `<html data-naeil-scrollbar-gutter="auto">` before first paint to disable both pieces for a custom policy. See [application layout](application-layout.md) for custom-body/scroller/helper-class limits, fallback and the [adopted contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md) for required probes and capture ordering.
|
|
101
|
+
|
|
102
|
+
Keep frame/toolbar tokens unchanged. The Japanese signed-out canonical login toolbar at 320px is 104px tall under a 15px classic reservation and 44px with overlay. The owner's F3 decision accepts this wrap on naeil.dev itself. Home Workspace uses the shared account control/full footer; its signed-out LoginGate omits the auth slot/separator and footer (F1/F2). Neither Home profile is required to wrap. D1–D4 and the exact F3 auth-composition boundary remain; compare matching roots and auth-slot compositions before applying tolerances.
|
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
이 안내는 `@naeil/ui`의 기본 모양과 재사용 규칙을 설명한다. 패키지 소비와 소비 사이트 배포는 별도 작업이다.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
**정확한 0.8.0 npm 게시·archive 일치 검증 완료 — 2026-10-29.** registry 태그는 `latest=0.7.2`, `next=0.8.0`이며 0.8.0 archive는 동결된 139파일과 일치한다. Home API는 0.8.0에 포함된다. 현재 소스의 **0.9.0은 미게시 후보**이며 root 예약 기본값을 추가한다. hosted Docs와 소비 서비스 배포는 별도 기록이다. [릴리스 정책](../package-release.md#publication-and-deployment)을 따른다.
|
|
6
6
|
|
|
7
7
|
## 시작하기
|
|
8
8
|
|
|
9
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.8.0
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
registry의 0.
|
|
15
|
+
registry의 0.8.0 archive는 동결 릴리스 archive와 바이트가 일치한다. archive에 포함된 안내는 준비 시점의 기록이므로 현재 설치에는 이 유지보수 안내를 따른다. 로컬 개발에서는 저장소에서 `pnpm build:pkg`와 `npm pack --ignore-scripts --pack-destination /tmp`를 실행하고 현재 미게시 후보인 `/tmp/naeil-ui-0.9.0.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 태그를 따른다. 2026-10-
|
|
19
|
+
버전을 생략한 설치는 registry의 latest 태그를 따른다. 2026-10-29에 latest는 0.7.2, next는 0.8.0으로 확인했다. Home API를 사용하려면 검증한 0.8.0을 명시한다. 업그레이드 전에 [변경 기록](../../CHANGELOG.md)을 확인한다.
|
|
20
20
|
|
|
21
21
|
Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번 불러온다.
|
|
22
22
|
|
|
@@ -29,6 +29,10 @@ Tailwind 4를 사용하는 앱의 전역 CSS에서 공통 스타일을 한 번
|
|
|
29
29
|
|
|
30
30
|
이미 Tailwind와 기본 스타일을 구성한 앱은 `@naeil/ui/theme.css`와 `@naeil/ui/components.css`를 함께 불러올 수 있다. 컴포넌트 CSS에는 크기·포커스·밀도·포털·reduced-motion 규칙이 있으므로 theme.css만으로 전체 v2 모양이 완성되지는 않는다.
|
|
31
31
|
|
|
32
|
+
0.9.0 후보부터 두 CSS 경로의 `components.css`가 `html { scrollbar-gutter: stable }`과 Radix 이중 보상 제거를 제공한다. classic은 한쪽 공간을 예약하고 overlay는 0px이다. `<html data-naeil-scrollbar-gutter="auto">`를 첫 paint 전에 선언하면 root 예약과 lock 보정을 함께 끈다. theme-only/JS-only는 문서 정책을 바꾸지 않는다. 본문 바깥 여백/custom scroller/helper class는 별도 소비자 통합이나 opt-out이 필요하다. [채택된 계약](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md)과 [layout guide](../components/application-layout.md)의 비교·fallback·일본어 320px F3 wrap 규칙을 따른다.
|
|
33
|
+
|
|
34
|
+
CSS import를 `layer(ui)` 같은 named layer로 감싸지 않는다. 그러면 dependency의 unlayered `--removed-body-scroll-bar-size`가 이겨 classic에서 15px로 남을 수 있다. opt-out 후 `@layer base { html { scrollbar-gutter: stable; } }`는 패키지 attribute selector보다 약하므로, layer 밖에 `html[data-naeil-scrollbar-gutter="auto"] { scrollbar-gutter: stable; }`를 쓰거나 패키지 import 뒤의 같은 base layer에서 이 attribute selector를 쓴다. 이때 lock 보상은 소비자가 책임진다. Classic modal scrim은 예약된 gutter 띠를 덮지 않으며, 0.9.0에서 scrim 스타일을 바꾸지 않는다. 자세한 예시와 적용 범위는 [layout guide](../components/application-layout.md#width-contract)를 따른다.
|
|
35
|
+
|
|
32
36
|
```tsx
|
|
33
37
|
import { Button, Input, Select, SelectTrigger, SelectValue,
|
|
34
38
|
SelectContent, SelectItem, Switch, Checkbox } from '@naeil/ui/ui';
|
package/docs/package-release.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Package verification and release policy
|
|
2
2
|
|
|
3
|
-
**Published baseline: 0.
|
|
3
|
+
**Published exact baseline: 0.8.0** (source/tag `3f708e27d05212af7f7a5be769f13f871e8d10c7`, archive SHA-256 `6feb5a8cd50265ace584a0855432683b4127119377e08235282eaebd27081084`, 139 files). Registry download matched that frozen archive on 2026-10-29; tags were `latest=0.7.2`, `next=0.8.0`. Its Home menu/brand/status/controlled-sheet APIs and package-owned chrome typography are published. **0.9.0 is an unpublished candidate** for the adopted page-root frame rule. Contract version remains `1` only if all invariants pass. Historical releases/archives remain immutable; hosted Docs and service activation require separate receipts.
|
|
4
4
|
|
|
5
5
|
## Architecture
|
|
6
6
|
|
|
@@ -104,7 +104,7 @@ The immutable npm archive's bundled guides are the release-preparation snapshot.
|
|
|
104
104
|
|
|
105
105
|
### Release procedure
|
|
106
106
|
|
|
107
|
-
Maintained Storybook resolves relative Markdown guide links against the published `v0.7.2` source `40a3928e24cd2f0141be3e605eed0a75260938fd`. The
|
|
107
|
+
Maintained Storybook resolves relative Markdown guide links against the published `v0.7.2` source `40a3928e24cd2f0141be3e605eed0a75260938fd`. The published 0.8.0 archive and 0.9.0 candidate keep that published guide-link target until a separately reviewed Docs release. 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.
|
|
108
108
|
|
|
109
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.
|
|
110
110
|
|
|
@@ -121,15 +121,17 @@ npm publication, GitHub Releases, main merge and hosted Docs are distinct operat
|
|
|
121
121
|
`vercel.json` disables Git deployments only for `feat/public-ui-readiness`. Other branches retain Vercel's default behavior, so merging or pushing another branch requires a separate deployment decision. The automatic GitHub Actions checks are verification-only; enabling repository workflows is not evidence of a hosted site or approved release.
|
|
122
122
|
|
|
123
123
|
|
|
124
|
-
### Manual exact-archive preparation for 0.8.0
|
|
124
|
+
### Manual exact-archive preparation for 0.9.0 (following 0.8.0)
|
|
125
125
|
|
|
126
|
-
The standing `scripts/rollout/prepare-release.mjs` accepts consecutive stable 0.7.x releases only. Do not change rollout policy, `release.json` or the chrome contract to admit 0.
|
|
126
|
+
The standing `scripts/rollout/prepare-release.mjs` accepts consecutive stable 0.7.x releases only. Do not change rollout policy, `release.json` or the chrome contract to admit 0.9.0. Use the manual release procedure above: complete G1–G7 from the [adopted root-frame contract](https://github.com/naeil-dev/naeil-ui/blob/434b7d07235316097ca3a55265ee02c1422b0cfd/docs/superpowers/specs/2026-10-29-page-root-scrollbar-gutter.md), including the retained 0.8.0 P1–P5 regressions, freeze the exact source SHA/archive, then run boundary and clean React/Next checks with `NAEIL_UI_EXPECTED_ARCHIVE_SHA256`. The paired browser gate accepts `NAEIL_UI_CHROME_PACKAGE=/absolute/extracted/package` to exercise that exact archive, alongside SHA-512-pinned 0.7.2 and SHA-256-pinned frozen 0.8.0. Reference-only root/lock CSS adjustments are separate hashed fixture files; immutable archives stay untouched. Both classic and overlay jobs require actual probes. Viewport captures have geometry guards; all acceptance measurement precedes any terminal fullPage capture. It retains numeric differences and screenshots for human review; new renders never replace expectations automatically.
|
|
127
127
|
|
|
128
|
-
|
|
128
|
+
Before npm publication, the separately approved source push must make the linked adopted contract at `434b7d07235316097ca3a55265ee02c1422b0cfd` public. Immediately after that push, verify an anonymous HTTP 200 for the exact guide URL and confirm its status says **rev 1, adopted 2026-10-29**. Local link/boundary checks do not establish public reachability. Source push may trigger Vercel deployment and retains its own approval boundary.
|
|
129
|
+
|
|
130
|
+
Published 0.8.0 adds `appNavigation`, `brandSuffix`, `statusSlot` and controlled/observer sheet props; see [NaeilHeader](components/naeil-header.md) for supported host CSS and consumer-supplied fonts. Default catalog/blog/legacy overrides must remain equivalent to B1. Home Workspace uses the default account toolbar and full footer; LoginGate omits auth/separator and footer (F1/F2). A source rollback must revert adapter, CSS and manifest/lock together; pin-only rollback cannot support the new API.
|
|
129
131
|
|
|
130
132
|
The shipped guide records the B1 empty-menu desktop limitation, controlled-mobile asynchronous account/focus handoff versus desktop/uncontrolled selection-time behavior, and Home's confirmation-owned desktop cancel fallback. Compatibility comparisons normalize only the contract markers/language/release identity and Radix-generated IDs; SVG/Logo and consumer IDs stay exact. Source or guide corrections require a new archive and exact-archive gates; earlier candidate digests are historical evidence.
|
|
131
133
|
|
|
132
|
-
Package publication, tag, GitHub Release, main merge and Home deployment each require separate explicit approval. naeil.dev imports this repository's source, so a main merge upgrades its default header to 0.8.0 and is held until the owner approves that site impact and timing. Estimate/Jev stay on 0.7.2, and STOP remains. A prepared archive or local gate result grants no publication or rollout authority.
|
|
134
|
+
Package publication, tag, GitHub Release, main merge and Home deployment each require separate explicit approval. naeil.dev imports this repository's source, so a main merge upgrades its default header to the 0.8.0 API/style plus the 0.9.0 root/lock rule (including Japanese 320px classic F3 wrap) and is held until the owner approves that site impact and timing. Estimate/Jev stay on 0.7.2, and STOP remains. A prepared archive or local gate result grants no publication or rollout authority.
|
|
133
135
|
|
|
134
136
|
## Storybook preview artifact
|
|
135
137
|
|
|
@@ -164,3 +166,11 @@ After the reviewed Docs deployment, verify the manager and iframe under `/naeil-
|
|
|
164
166
|
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.
|
|
165
167
|
|
|
166
168
|
For a Storybook dependency upgrade, first build the new preview to obtain fresh manager scripts, then run `python3 scripts/refresh-storybook-notices.py` (read-only npm/source retrieval plus a local notice-file update), review its source/notice changes, and rebuild. The refresh is opt-in and needs network; the build never retrieves legal/reference material silently. Keep all generated `licenses/` JSON/text files with the preview. The standalone React consumer likewise emits exact installed code/font notices with its production output.
|
|
169
|
+
|
|
170
|
+
### 0.9.0 frame preparation gates
|
|
171
|
+
|
|
172
|
+
The owner adopted rev 1 on 2026-10-29 for local implementation and verification, including the root opt-out and F3 wrap. Both CSS graphs, theme/JS-only controls, opt-out and false-support branch, short/long route frames, body/content/fixed anchors under nested Radix locks, capture guards, frozen 0.8.0 comparisons and clean installed React/Next production CSS must pass before freezing. The false-support fixture tests a CSS branch, not a real unsupported engine. `build-chrome-fixtures.ts` alone is not clean-consumer proof; `check-consumers.ts` independently installs/builds/exercises both paths in each framework.
|
|
173
|
+
|
|
174
|
+
Run the normal checks above serially, plus the two deterministic Chromium mode jobs using B0's process-local wrappers, `NAEIL_UI_SCROLLBAR_MODE=classic|overlay` and `NAEIL_UI_SCROLLBAR_WRAPPERS=/absolute/wrapper-directory`. Their 15/0px overflow probes and stable-root frame probes must pass; the diagnostic `--enable-automation` flag exposes actual argv through CDP without changing the mode probe. Preserve exact source/archive SHA-256/SRI/inventory and per-gate commands/exit codes outside the archive. Repeat archive-dependent checks using `NAEIL_UI_CHROME_PACKAGE=/absolute/extracted/package` and `NAEIL_UI_EXPECTED_ARCHIVE_SHA256`.
|
|
175
|
+
|
|
176
|
+
This candidate is not published. npm/dist-tag, version tag, GitHub Release, push/main merge (= naeil.dev production), hosted Docs and Home bump/deploy remain separate approvals. Home keeps its local root rule until an approved exact-version upgrade removes it; rollback restores manifest/lock and local root rule together. Estimate/Jev remain on 0.7.2 and STOP remains in force.
|
package/package.json
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
@layer base {
|
|
2
|
+
html:not([data-naeil-scrollbar-gutter="auto"]) {
|
|
3
|
+
scrollbar-gutter: stable;
|
|
4
|
+
}
|
|
5
|
+
html[data-naeil-scrollbar-gutter="auto"] {
|
|
6
|
+
scrollbar-gutter: auto;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* The root already reserves the gap. Keep Radix's lock, without a second gap. */
|
|
11
|
+
@supports (scrollbar-gutter: stable) {
|
|
12
|
+
html:not([data-naeil-scrollbar-gutter="auto"]) > body[data-scroll-locked] {
|
|
13
|
+
margin-right: 0 !important;
|
|
14
|
+
--removed-body-scroll-bar-size: 0px;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
1
18
|
@layer components {
|
|
2
19
|
.ui-navigation {
|
|
3
20
|
position: relative;
|