@naeil/ui 0.11.0 → 0.13.0

package/dist/source/components/ui/sheet.js

@@ -0,0 +1,176 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import { cn } from "../../lib/utils.js";
+function Sheet(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, __spreadValues({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_b) {
+  var props = __objRest(_b, []);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, __spreadValues({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetPortal(_c) {
+  var props = __objRest(_c, []);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, __spreadValues({ "data-slot": "sheet-portal" }, props));
+}
+function SheetClose(_d) {
+  var props = __objRest(_d, []);
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, __spreadValues({ "data-slot": "sheet-close" }, props));
+}
+function SheetOverlay(_e) {
+  var _f = _e, {
+    className
+  } = _f, props = __objRest(_f, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    __spreadValues({
+      "data-slot": "sheet-overlay",
+      className: cn("ui-popup fixed inset-0 z-50 bg-black/60 ", className)
+    }, props)
+  );
+}
+function SheetContent(_g) {
+  var _h = _g, {
+    className,
+    children,
+    side = "right",
+    showCloseButton = true,
+    closeLabel = "Close"
+  } = _h, props = __objRest(_h, [
+    "className",
+    "children",
+    "side",
+    "showCloseButton",
+    "closeLabel"
+  ]);
+  return /* @__PURE__ */ jsxs(SheetPortal, { "data-slot": "sheet-portal", children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      __spreadProps(__spreadValues({
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "bg-popover ui-popup fixed z-50 flex flex-col gap-4 overflow-y-auto border-border-strong p-[var(--ui-panel-padding)]",
+          {
+            right: "inset-y-0 right-0 w-[min(100%,var(--ui-width-short-form))] rounded-l-xl border-l",
+            left: "inset-y-0 left-0 w-[min(100%,var(--ui-width-short-form))] rounded-r-xl border-r",
+            top: "inset-x-0 top-0 max-h-[100dvh] w-full rounded-b-xl border-b",
+            bottom: "inset-x-0 bottom-0 max-h-[100dvh] w-full rounded-t-xl border-t"
+          }[side],
+          className
+        )
+      }, props), {
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "sheet-close",
+              className: "ui-focus absolute top-2 right-2 flex size-10 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground transition-colors disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
+              ]
+            }
+          )
+        ]
+      })
+    )
+  ] });
+}
+function SheetHeader(_i) {
+  var _j = _i, { className } = _j, props = __objRest(_j, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-2 pr-8 text-left", className)
+    }, props)
+  );
+}
+function SheetFooter(_k) {
+  var _l = _k, { className } = _l, props = __objRest(_l, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)
+    }, props)
+  );
+}
+function SheetTitle(_m) {
+  var _n = _m, {
+    className
+  } = _n, props = __objRest(_n, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    __spreadValues({
+      "data-slot": "sheet-title",
+      className: cn("text-xl leading-normal font-semibold", className)
+    }, props)
+  );
+}
+function SheetDescription(_o) {
+  var _p = _o, {
+    className
+  } = _p, props = __objRest(_p, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Description,
+    __spreadValues({
+      "data-slot": "sheet-description",
+      className: cn("text-muted-foreground text-sm", className)
+    }, props)
+  );
+}
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger
+};

package/dist/source/components/ui/sonner.js

@@ -39,11 +39,11 @@ import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
 const Toaster = (_a) => {
   var props = __objRest(_a, []);
-  const { theme = "system" } = useTheme();
+  const { theme = "system", forcedTheme } = useTheme();
   return /* @__PURE__ */ jsx(
     Sonner,
     __spreadValues({
-      theme,
+      theme: forcedTheme != null ? forcedTheme : theme,
       className: "toaster group font-sans",
       position: "bottom-right",
       duration: 4e3,

package/dist/source/lib/ui-release.d.ts

@@ -1,5 +1,5 @@
 declare const uiRelease: {
-    readonly version: "0.11.0";
+    readonly version: "0.13.0";
     readonly contractVersion: "1";
 };
 

package/dist/source/lib/ui-release.js

@@ -1,4 +1,4 @@
-const uiRelease = { version: "0.11.0", contractVersion: "1" };
+const uiRelease = { version: "0.13.0", contractVersion: "1" };
 export {
   uiRelease
 };

package/docs/components/README.md

@@ -1,6 +1,6 @@
 # Component usage guides
 
-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.
+These maintained guides describe the repository APIs. See [release policy and identities](../package-release.md#publication-and-deployment) for the current published release. [Setup, themes, fonts and shared responsibilities](common.md). Run `pnpm storybook` for the current 18 Docs pages (16 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.
 
 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.
 
@@ -10,6 +10,7 @@ Start application layouts with the [shared navigation/footer selection and frame
 | Input | [Input](./input.md) | UI / Input / Usage |
 | Card | [Card](./card.md) | UI / Card / Usage |
 | Dialog | [Dialog](./dialog.md) | UI / Dialog / Usage |
+| Sheet | [Sheet](./sheet.md) | UI / Sheet / Usage, LocalizedClose, Sides |
 | DropdownMenu | [DropdownMenu](./dropdown-menu.md) | UI / DropdownMenu / Usage |
 | Badge | [Badge](./badge.md) | UI / Badge / Usage |
 | Avatar | [Avatar](./avatar.md) | UI / Avatar / Usage |
@@ -24,6 +25,8 @@ Start application layouts with the [shared navigation/footer selection and frame
 | NaeilFooter | [NaeilFooter](./naeil-footer.md) | Brand / NaeilHeader / ReferenceFull, ReferenceCompact |
 | NaeilHeader and account control | [NaeilHeader](./naeil-header.md) | Brand / NaeilHeader / Usage, JapaneseApplication, AccountStates |
 
+[Owned-service language runtime](naeil-locale.md) documents `/naeil-locale`, `/client`, `/server`, `/messages`, `/checker` and `/chrome`. Owned Next services under the shared provider import header/account/footer from `/naeil-locale/chrome`; the standalone React adapters remain available.
+
 [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.
 
 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.

package/docs/components/application-layout.md

@@ -1,6 +1,6 @@
 # Application frame and shared navigation/footer
 
-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.
+Product navigation and controlled mobile APIs are available since 0.8.0; shared root reservation is available since 0.9.0. See [release identities and publication status](../package-release.md#publication-and-deployment) for the current published release; hosted Docs and service activation have separate receipts. See [consumer setup](../design/v2-migration.md) for CSS, Tailwind sources and fonts.
 
 ## Choose the shared composition first
 
@@ -8,7 +8,7 @@ Exact **@naeil/ui 0.8.0 is published** (`next` tag; `latest` remains 0.7.2 at th
 | --- | --- |
 | The actual naeil.dev brand, project catalog and controls | `NaeilHeader` from `@naeil/ui/naeil-header` |
 | Owned-service login/account/logout presentation | `NaeilHeaderAccountControl` from `@naeil/ui/naeil-header` in `authSlot` |
-| Owned naeil service with product menu data (0.8.0) | Complete `NaeilHeader`, with `appNavigation`, catalog/blog hidden, optional `brandSuffix` and `statusSlot` |
+| Owned naeil service with product menu data (0.8.0) | Complete `NaeilHeader` with `service` and its own `appNavigation` |
 | A different product menu without canonical naeil chrome | `Navigation` from `@naeil/ui/ui` |
 | Owned naeil service footer | `NaeilFooter` from `@naeil/ui/naeil-footer` |
 | Different product footer or explicit content override | `SiteFooter` from `@naeil/ui/ui` |
@@ -24,12 +24,13 @@ Choose one header per application frame. Supply menu data, links, route guards,
 | Inline gutters | `clamp(16px, 2.4vw, 40px)` | `--ui-frame-gutter` |
 | Reading / settings | Maximum 640px | `data-ui-layout="reading"` / `"settings"` |
 | Short form | Maximum 480px | `data-ui-layout="short-form"` |
+| Multi-step / card-choice input (workflow) | Maximum 896px; fields inside stay within 640/480px | `data-ui-layout="workflow"` |
 | List / dashboard / table region | Available space inside the frame, capped at 1600px | `data-ui-layout="list"` |
 | Intentionally unrestricted region | Available parent width | `data-ui-layout="fluid"` |
 
 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.
 
-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).
+Since 0.9.0, the package 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).
 
 For a different document policy, declare this on the root **before first paint**:
 
@@ -56,53 +57,60 @@ Frame and control tokens stay unchanged. At 1920px with a 15px classic gutter th
 
 ## Canonical naeil application starter
 
+Owned Next services under `NaeilLocaleProvider` import header/account/footer chrome from `@naeil/ui/naeil-locale/chrome`; `/naeil-header` and `/naeil-footer` remain standalone React adapters. See [the owned-service language runtime](naeil-locale.md) for `/naeil-locale`, `/client`, `/server`, `/messages`, `/checker` and `/chrome` setup.
+
+For the standalone React adapter:
+
+Owned services use NaeilFooter's shared `full` default as-is; omit `variant`. `compact` is a deliberate, recorded exception (for example, a focused task screen), not the starter default.
+
 ```tsx
 import type { ReactNode } from "react";
 import { NaeilHeader, NaeilHeaderAccountControl,
-  type NaeilHeaderAccount, type NaeilHeaderProps } from "@naeil/ui/naeil-header";
+  type NaeilHeaderAccount, type NaeilHeaderProps, type NaeilService } from "@naeil/ui/naeil-header";
 import { NaeilFooter } from "@naeil/ui/naeil-footer";
 
 // Render inside the existing next-themes ThemeProvider.
 // The app owns session state, its guarded logout and pending request lock.
 type ApplicationLayoutProps = {
   children: ReactNode;
+  service: NaeilService;
   locale: NaeilHeaderProps["locale"];
   Link: NaeilHeaderProps["Link"];
   currentHref: string;
   account: NaeilHeaderAccount;
 };
 
-export function ApplicationLayout({ children, locale, Link, currentHref,
+export function ApplicationLayout({ children, service, locale, Link, currentHref,
   account }: ApplicationLayoutProps) {
   return <>
-    <NaeilHeader locale={locale} Link={Link} currentHref={currentHref}
+    <NaeilHeader service={service} locale={locale} Link={Link} currentHref={currentHref}
       authSlot={<NaeilHeaderAccountControl locale={locale} Link={Link}
         account={account} />} />
     <main className="ui-app-frame"
       style={{ marginTop: "calc(var(--ui-navigation-height) + 1px)" }}>
       {children}
     </main>
-    <NaeilFooter locale={locale} variant="compact" Link={Link} />
+    <NaeilFooter locale={locale} Link={Link} />
   </>;
 }
 
-<ApplicationLayout locale="en" Link={GuardedLink} currentHref={pathname}
+<ApplicationLayout service={service} locale="en" Link={GuardedLink} currentHref={pathname}
   account={account}>
   <section data-ui-layout="settings">{/* Settings form */}</section>
 </ApplicationLayout>
 ```
 
-`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).
+`service`, `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).
 
-`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.
+`NaeilHeader` is fixed; reserve its 65px height and account for it in sticky areas and focus/anchor scroll margins. The service brand defaults to `/`; footer destinations remain 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.
 
-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.
+For owned naeil product navigation, set the matching `service` id and pass only product 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/account control, narrow form and NaeilFooter together.
 
-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.
+Without `service`, an empty desktop menu preserves B1's limitation: resizing alone leaves the sheet open; Escape/close/overlay/route change dismiss it. Service profiles dismiss on desktop crossing even with an empty center; the mobile sheet omits empty navigation. 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.
 
 ## Deliberate overrides
 
-Apply overrides on a common ancestor or document root so header, main and footer inherit them together. Explicit `containerClassName` overrides still work. Do not give each route its own header cap or gutter.
+Apply overrides on a common ancestor or document root so header, main and footer inherit them together. Legacy (no `service`) `containerClassName` overrides still work; the owned-service profile rejects header class/style overrides. Do not give each route its own header cap or gutter.
 
 ```css
 /* Product exception: record why this cap is needed. */
@@ -125,8 +133,12 @@ Put this in the **consumer application's** `AGENTS.md` (or equivalent repository
 - Read the installed @naeil/ui/DESIGN.md and docs/components/application-layout.md before UI layout work.
 - 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.
 - 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.
-- 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.
-- 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.
+- For owned Next services under NaeilLocaleProvider, import header/account/footer from @naeil/ui/naeil-locale/chrome. Read docs/components/naeil-locale.md for the root controller, provider, server routing, message loading and checker. /naeil-header and /naeil-footer remain standalone React adapters.
+- Owned services must set service="abstorm" / "home" / "estimate" / "jev". The DS renders logo → .naeil → lowercase id; no statusSlot, status dot or extra indicator beside the brand.
+- Supply only the service's own appNavigation tabs; never copy naeil.dev Projects/Blog. Single-screen services leave appNavigation empty; the mobile menu still exposes theme/locale/account without empty navigation.
+- No header escape hatches: brandSuffix/brandSlot/toolbarSlot/subNav/brandLinkComponent, catalog/translations overrides, brandLinkProps/mobileFooter, className/containerClassName/style or data-slot/data-naeil-* marker overrides. Keep the shared tab and toolbar styles/states.
+- Local wrappers supply menu data, routing/guards, locale and shared auth state. Do not copy the menu, mobile sheet, controls or footer implementation. Extend the shared component for reusable missing behavior.
+- Since 0.9.0, shared 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.
 - 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.
 - Check the installed package version and CSS before creating a replacement for an apparently missing component.
 - 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.
@@ -141,16 +153,3 @@ Owned-service checks also verify canonical header/footer destinations, rendered
 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.
 
 See [canonical footer content and save interception](naeil-footer.md). Version 0.7.2 includes package/contract identity; registry publication, hosted Docs and per-service operational rollout have separate receipts.
-
-## Shared naeil.dev login (services on `*.naeil.dev`)
-
-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.
-
-- **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.
-- **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.
-- **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`).
-- **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.
-- **Header:** `NaeilHeaderAccountControl` in `authSlot`, linked to the login URL and the logout callback.
-- **Onboarding:** register the service id in the central catalog, mark it verified, and grant users from Home Console (`console_set_access`).
-
-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.

package/docs/components/avatar.md

@@ -10,7 +10,7 @@ Avatar forwards Radix Root span props and defaults **size="default"**; sizes `sm
 
 Inherited [Avatar 1.1.10 declaration](https://unpkg.com/@radix-ui/react-avatar@1.1.10/dist/index.d.ts).
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/avatar.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/avatar.tsx) is the API authority.
 
 ## Composition
 

package/docs/components/badge.md

@@ -6,7 +6,9 @@ Use Badge for concise status/category text. Prefer readable body/helper text for
 
 Exports: `Badge`, `badgeVariants`. Native span props plus `variant` and `asChild`. Defaults: **variant="default", asChild=false**. Variants: `default`, `secondary`, `outline`, `destructive`, `success`, `warning`, `error`, `info`. asChild uses Slot.Root; no disabled/loading or announcement API. Default text is intentionally small and single-line.
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/badge.tsx) is the API authority.
+**Server Components:** To call `badgeVariants` on the server, import it from `@naeil/ui/components/ui/badge`. The `@naeil/ui/ui` component barrel remains a client boundary. Import `cn` from `@naeil/ui/utils` or the RSC-safe deep path `@naeil/ui/lib/utils`.
+
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/badge.tsx) is the API authority.
 
 ## Composition
 
@@ -24,6 +26,8 @@ Static badges are not focusable. Name status by text, not only color/icon. Dynam
 
 ## States, resilience and mistakes
 
+Use `variant="error"` for error feedback; destructive badges retain the filled background/foreground pair described in [feedback and destructive color roles](common.md#feedback-and-destructive-color-roles).
+
 Pending/empty/error are literal status content; disabled is inapplicable to a static badge. Avoid essential long text in tiny tags; use a paragraph instead, or deliberate `whitespace-normal break-words max-w-full` overrides and review. Do not infer interactivity from hover or pass disabled to a span/link.
 
 Check this example in light/dark, comfortable/compact and mobile, including long Korean, English and Japanese text. Consumer overrides remain supported; follow the [shared override and acceptance guidance](common.md#styling-themes-and-overrides). Actual engine results and manual limits are in the [support matrix](../design/public-ui-support.md).

package/docs/components/button.md

@@ -6,6 +6,8 @@ Use Button for an action, a native anchor for navigation, and Select for a value
 
 Exports: `Button`, `buttonVariants`.
 
+**Server Components:** To call `buttonVariants` on the server, import it from `@naeil/ui/components/ui/button`. The `@naeil/ui/ui` component barrel remains a client boundary. Import `cn` from `@naeil/ui/utils` or the RSC-safe deep path `@naeil/ui/lib/utils`.
+
 | Prop | Contract / wrapper default |
 | --- | --- |
 | `variant` | `default` (default), `destructive`, `outline`, `secondary`, `ghost`, `link` |
@@ -15,7 +17,7 @@ Exports: `Button`, `buttonVariants`.
 
 `size` names are preserved; shared CSS controls actual height (40/36px; lg adds 4px; mobile minimum 44px). `xs` does not imply an extra-small touch target. `loading` is not an API.
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/button.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/button.tsx) is the API authority.
 
 ## Composition
 
@@ -34,6 +36,12 @@ Native buttons activate with Enter/Space and show focus-visible; disabled button
 
 ## States, resilience and mistakes
 
+Use `variant="destructive"` for the filled dangerous-action pair and `text-error` for error copy; see [feedback and destructive color roles](common.md#feedback-and-destructive-color-roles).
+
 Demonstrate normal, disabled, saving and recovery; no-data/error belong to the operation. Do not nest Button in a link or treat variant="link" as navigation. With asChild anchors, own href/activation/disabled policy. For long translated actions use `className="h-auto min-h-11 whitespace-normal py-2"` and check both densities.
 
 Check this example in light/dark, comfortable/compact and mobile, including long Korean, English and Japanese text. Consumer overrides remain supported; follow the [shared override and acceptance guidance](common.md#styling-themes-and-overrides). Actual engine results and manual limits are in the [support matrix](../design/public-ui-support.md).
+
+## Pressed state and compatibility (2026-11-12)
+
+Use `aria-pressed={selected}` for toggle actions. Every variant now shows a persistent 2px inset indicator; default uses its hover surface, and outline/secondary/ghost/link use `surface-selected` with foreground text. The destructive variant retains its dangerous-action fill. Filled variants inset the indicator 2px from the edge so it is surrounded by the contrasting fill. Indicators meet 3:1 against their adjacent fill and text meets 4.5:1 in both themes, including destructive hover. This changes the appearance of existing toggle buttons. Consumer `aria-pressed:*` classes still merge last; override the indicator and its contrast deliberately. `aria-pressed={false}` and ordinary actions retain their existing appearance.

package/docs/components/card.md

@@ -6,7 +6,7 @@ Use Card to group related information or a form. Use plain sections/headings for
 
 Exports: `Card`, `CardElevated`, `CardHeader`, `CardFooter`, `CardTitle`, `CardAction`, `CardDescription`, `CardContent`. All accept `React.ComponentProps<"div">`; no variant/size/asChild/loading API. Card and CardElevated use `data-slot="card"`, default panel spacing and consumer className; CardElevated adds shadow/elevated dark surface. CardTitle is a **div**, not a semantic heading. CardAction occupies the second header column.
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/card.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/card.tsx) is the API authority.
 
 ## Composition
 
@@ -30,3 +30,7 @@ Static cards are not tab stops. Put real buttons/links inside and a semantic hea
 Loading/empty/error are consumer content with status/retry actions, not Card props; disabled is inapplicable to the static surface. Keep CardAction concise, wrap long localized headings and use `w-full max-w-*` instead of fixed widths. Avoid nested cards and implicit clickable-card behavior; an entire link card must contain no nested controls.
 
 Check this example in light/dark, comfortable/compact and mobile, including long Korean, English and Japanese text. Consumer overrides remain supported; follow the [shared override and acceptance guidance](common.md#styling-themes-and-overrides). Actual engine results and manual limits are in the [support matrix](../design/public-ui-support.md).
+
+## Typography and theme compatibility (2026-11-12)
+
+CardTitle now uses the component-title role (16/25px), replacing `leading-none`; CardDescription uses supporting text (14/22px). Wrapped titles and descriptions can make cards taller. Explicit `className` typography/leading overrides still win. CardElevated now also uses its elevated dark surface under OS dark with no root theme class when importing globals.css.

package/docs/components/checkbox.md

@@ -8,7 +8,7 @@ Export: `Checkbox`. Forwards Radix Root props: `checked`/`defaultChecked`/`onChe
 
 Inherited [Checkbox 1.3.3 declaration](https://unpkg.com/@radix-ui/react-checkbox@1.3.3/dist/index.d.ts).
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/checkbox.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/checkbox.tsx) is the API authority.
 
 ## Composition
 

package/docs/components/common.md

@@ -1,6 +1,6 @@
 # Shared usage contract
 
-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.
+These maintained guides describe the repository APIs; for the current published release, 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.
 
 ## Styling, themes and overrides
 
@@ -18,6 +18,12 @@ Loading is composition: state + meaningful text + `aria-busy`, with `disabled` w
 
 Avoid nested buttons/links or embedding unrelated controls in a single clickable surface. A small Switch/Checkbox graphic has a 44px pseudo-element target; keep label rows at least 44px and leave room so adjacent targets do not overlap. Test actual pointer hit areas, keyboard focus and text wrapping in the consumer.
 
+### Feedback and destructive color roles
+
+Use `text-error` for error message text/icons, `bg-error-bg` for subtle error surfaces, and `border-error` for invalid boundaries. Reserve `destructive` / `destructive-foreground` for the filled background/foreground pair of a dangerous action (`Button variant="destructive"`) or destructive Badge.
+
+Never use `text-destructive` (or destructive as text on canvas/card) for error copy: it fails normal-text contrast in dark mode (about 3.45:1 on the background, below 4.5:1). Use `text-error` instead.
+
 ## Long and localized content
 
 Examples include Korean, English and Japanese. Set `lang` on translated content (Japanese selects Noto Sans JP in shared globals). Use responsive widths, `min-width: 0`, flexible heights and consumer wrapping classes for long actions/status text. The wrappers may use single-line truncation; retain the complete accessible name and offer the full value elsewhere if necessary. Do not shrink essential text to fit.
@@ -29,3 +35,18 @@ Run each affected composition under matching light/dark, comfortable/compact, mo
 ## Exact inherited contracts
 
 Native wrappers use React 19 element props: inspect your installed `@types/react/index.d.ts`, or infer `React.ComponentProps<typeof Component>`. Radix wrappers use `React.ComponentProps<typeof Primitive.Part>`; inspect the installed declarations reached through `radix-ui/dist/index.d.ts`. Per-family guides link pinned declarations inspected locally during this work. Those links describe the inherited contract, not a promise that all primitive configurations have been tested. Wrapper defaults below are separate from primitive defaults; omitted primitive defaults are not invented here. Consumer examples and browser checks demonstrate only their recorded configuration.
+
+## Theme and typography compatibility (2026-11-12)
+
+The `dark:` variant in globals.css now follows the same conditions as generated dark tokens: `.dark` on an element or ancestor, plus OS dark under `:root:not(.light)` (including the root itself). Root `.light` opts out of OS dark; a deliberately nested `.dark` still opts into dark. Use only one root theme class. `.light` is a root OS opt-out, not a nested light-theme reset. Consumers composing theme.css + components.css with their own Tailwind entry must copy this variant into that entry to match the token contract:
+
+```css
+@custom-variant dark {
+  &:where(.dark, .dark *) { @slot; }
+  @media (prefers-color-scheme: dark) {
+    &:where(:root:not(.light), :root:not(.light) *) { @slot; }
+  }
+}
+```
+
+Generated font-size utilities now include the approved line heights: `text-3xl` 32/42px, `text-xl` 20/29px, `text-base` 16/25px (UI body, component title and controls), `text-sm` 14/22px and `text-xs` 13/20px at a 16px root. Reading body uses `text-base leading-relaxed` (16/30px). PageTitle, DialogTitle and CardTitle no longer override their role line heights. This changes wrapping and vertical rhythm; recheck constrained layouts. Explicit consumer `leading-*` utilities remain supported. Numeric values live in typography.json; regenerate with `pnpm build:tokens`.

package/docs/components/dialog.md

@@ -6,14 +6,20 @@ Use Dialog for a focused modal task or detail that requires an interruption. Pre
 
 Exports: `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`, `DialogPortal`, `DialogOverlay`.
 
-Root forwards Radix `open`/`defaultOpen`/`onOpenChange`/`modal`; wrapper adds no root defaults. Trigger/Close accept primitive button props including `asChild`. Content forwards primitive focus/outside/Escape handlers and **defaults `showCloseButton=true`**; it creates its own Portal and Overlay. Footer is a div with **`showCloseButton=false`**. Header is a div; Title/Description wrap primitive semantic elements. Built-in close labels are English `Close`. For localized close controls set Content showCloseButton=false and compose DialogClose. Content does not expose a portal `container` prop; the separately exported DialogPortal is for a custom composition.
+Root forwards Radix `open`/`defaultOpen`/`onOpenChange`/`modal`; wrapper adds no root defaults. Trigger/Close accept primitive button props including `asChild`. Content forwards primitive focus/outside/Escape handlers and **defaults `showCloseButton=true`**; it creates its own Portal and Overlay. Footer is a div with **`showCloseButton=false`**. Header is a div; Title/Description wrap primitive semantic elements. Content and Footer each accept `closeLabel?: string` (default `"Close"`) for their built-in X accessible name and footer button text, respectively. Content does not expose a portal `container` prop; the separately exported DialogPortal is for a custom composition.
 
 Inherited [Dialog 1.1.15 declaration](https://unpkg.com/@radix-ui/react-dialog@1.1.15/dist/index.d.ts).
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/dialog.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/dialog.tsx) is the API authority.
+
+## Compatibility decision (2026-11-09)
+
+Keep Content `showCloseButton=true`: changing it would silently remove the only visible pointer exit in pinned consumers that rely on it. Adding `closeLabel` is additive and non-breaking; Footer still defaults to `showCloseButton=false`.
 
 ## Composition
 
+Choose one close affordance: either the built-in X with a localized `closeLabel`, or `showCloseButton={false}` plus a footer `DialogClose` (including Footer's built-in close button). Never ship English defaults in ko/ja UIs or add a second close control.
+
 ```tsx
 <Dialog>
   <DialogTrigger asChild><Button type="button">Edit name</Button></DialogTrigger>
@@ -28,7 +34,7 @@ The [shared usage contract](common.md) covers setup, inherited/native prop typin
 </Dialog>
 ```
 
-Import the named components from `@naeil/ui/ui`. Variables/handlers in snippets are consumer-owned. Run **UI / Dialog / Usage** in Storybook for a complete interactive example; its Docs page renders this same guide.
+Import the named components from `@naeil/ui/ui`. Variables/handlers in snippets are consumer-owned. Run **UI / Dialog / Usage** in Storybook for a complete interactive example; its Docs page renders this same guide. **UI / Dialog / Localized Close** demonstrates built-in X labels in Korean, Japanese and English.
 
 ## Keyboard, focus and accessible content
 
@@ -36,6 +42,10 @@ For the modal example, opening moves focus inside, Tab/Shift+Tab stay inside, Es
 
 ## States, resilience and mistakes
 
-Disabled applies to triggers/actions; loading/error/empty are content state. Keep failed input inside the dialog and enable retry. Long/mobile content should remain scrollable within the viewport (e.g. max-h-[calc(100%-2rem)] overflow-y-auto); do not hide all close actions. Consumer outside-dismissal overrides need keyboard/focus review. Do not nest modal roots casually or prevent Escape without an accessible exit.
+Disabled applies to triggers/actions; loading/error/empty are content state. Keep failed input inside the dialog and enable retry. Long/mobile content is scrollable within the dynamic viewport by default; preserve that behavior and do not hide all close actions. Consumer outside-dismissal overrides need keyboard/focus review. Do not nest modal roots casually or prevent Escape without an accessible exit.
 
 Check this example in light/dark, comfortable/compact and mobile, including long Korean, English and Japanese text. Consumer overrides remain supported; follow the [shared override and acceptance guidance](common.md#styling-themes-and-overrides). Actual engine results and manual limits are in the [support matrix](../design/public-ui-support.md).
+
+## Scroll default compatibility (2026-11-12)
+
+Content now defaults to `max-h-[min(calc(100%-2rem),calc(100dvh-2rem))] overflow-y-auto`, keeping tall content and footer actions reachable inside the dynamic viewport. The percentage cap also respects CSS zoom, where viewport units alone can exceed the visible area. Remove equivalent consumer classes. To own a different scroll layout, pass a replacement max-height/overflow class; `className="max-h-[none] overflow-y-visible"` opts out (the consumer must keep all actions reachable). Title now follows the section-title 20/29px typography role.

package/docs/components/dropdown-menu.md

@@ -10,7 +10,7 @@ Root: primitive `open`/`defaultOpen`/`onOpenChange`, `modal`, `dir`; no wrapper
 
 Inherited [DropdownMenu 2.1.16 declaration](https://unpkg.com/@radix-ui/react-dropdown-menu@2.1.16/dist/index.d.ts), including its inherited Menu types.
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/dropdown-menu.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/dropdown-menu.tsx) is the API authority.
 
 ## Composition
 

package/docs/components/input.md

@@ -6,7 +6,7 @@ Use Input for native single-line text/value entry. Use [Textarea](./textarea.md)
 
 Export: `Input`. Accepts `React.ComponentProps<"input">`; no wrapper default for `type`, value, disabled or validation. Native omitted type resolves to text. Important props: `value` + `onChange` or `defaultValue`, `name`, `type`, `required`, `readOnly`, `disabled`, `autoComplete`, `inputMode`, `min`/`max`, `minLength`/`maxLength`, `pattern`, form and ARIA props. No built-in label, error text or async validation API.
 
-The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/81fd395031dc5b20074c4d915a8585360ce2d28a/src/components/ui/input.tsx) is the API authority.
+The [shared usage contract](common.md) covers setup, inherited/native prop typing, themes, density, font delivery and overrides. [Wrapper source](https://github.com/naeil-dev/naeil-ui/blob/main/src/components/ui/input.tsx) is the API authority.
 
 ## Composition
 

package/docs/components/naeil-footer.md

@@ -1,14 +1,16 @@
 # NaeilFooter — canonical service footer
 
-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:
+Available since **0.7.1**, the first published release containing this entry. See [release identities and publication status](../package-release.md#publication-and-deployment) for the current published release; hosted Docs and service activation have separate receipts. React-only opt-in entry:
 
 ```tsx
 import { NaeilFooter } from '@naeil/ui/naeil-footer';
-<NaeilFooter locale="ja" variant="compact" Link={GuardedLink} />
+<NaeilFooter locale="ja" Link={GuardedLink} />
 ```
 
 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.
 
+Owned services use the shared default (`full`) as-is, matching naeil.dev; omit `variant` in starters. Use `compact` only as a deliberate, recorded exception, such as a focused task screen. Compact link groups are top-aligned so their titles line up; an `items-*` utility in `containerClassName` still controls every child's vertical alignment.
+
 `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.
 
 `onNavigate(event, item)` reaches the brand and all group links. An application can synchronously preventDefault, flush its draft, and navigate only after successful saving. Preserve defaultPrevented, modified/middle clicks and target behavior according to the application's established guard. Do not run both adapter and onNavigate guards twice. Native explicit `external:true` links in generic SiteFooter bypass Link for compatibility, but **still call onNavigate**. This closes the former missing interception path.